[WIP] SelectBox

src/SelectBox/SelectBox.js

@@ -0,0 +1,79 @@
+import React, { useRef, useEffect } from 'react';
+import propTypes from 'prop-types';
+import {
+  StyledOptionsList,
+  StyledOptionsListItemInnerButton,
+  StyledOptionsListItem
+} from './SelectBox.styles';
+import { StyledCutout } from '../Cutout/Cutout';
+
+const SelectBox = React.forwardRef(function SelectBox(props) {
+  const { options, value, onSelect, width, height } = props;
+  const selectedListItemRef = useRef(null);
+  const listRef = useRef(null);
+
+  const handleKeyDown = event => {
+    const { key } = event;
+    switch (key) {
+      case 'ArrowDown':
+        if (value < options.length - 1) onSelect(value + 1);
+        break;
+      case 'ArrowUp':
+        if (value > 0) onSelect(value - 1);
+        break;
+      default:
+        break;
+    }
+  };
+
+  useEffect(() => {
+    selectedListItemRef.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    });
+  }, [selectedListItemRef]);
+
+  return (
+    <StyledCutout>
+      <StyledOptionsList
+        style={{ width, height }}
+        ref={listRef}
+        onKeyDown={handleKeyDown}
+      >
+        {options.map(o => (
+          <StyledOptionsListItem key={o.value.toString()}>
+            <StyledOptionsListItemInnerButton
+              onClick={() => onSelect(o.value)}
+              type='button'
+              autoFocus={o.value === value}
+              isSelected={o.value === value}
+              ref={o.value === value ? selectedListItemRef : null}
+            >
+              {o.label}
+            </StyledOptionsListItemInnerButton>
+          </StyledOptionsListItem>
+        ))}
+      </StyledOptionsList>
+    </StyledCutout>
+  );
+});
+
+SelectBox.defaultProps = {
+  onSelect: () => {},
+  options: [],
+  value: 0,
+  width: '300px',
+  height: '150px'
+};
+
+SelectBox.propTypes = {
+  onSelect: propTypes.func,
+  options: propTypes.arrayOf(
+    propTypes.objectOf({ value: propTypes.number, label: propTypes.string })
+  ),
+  value: propTypes.number,
+  width: propTypes.string,
+  height: propTypes.string
+};
+
+export default SelectBox;

src/SelectBox/SelectBox.stories.js

@@ -0,0 +1,90 @@
+/* eslint-disable no-console */
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { Window, WindowContent, Cutout, Fieldset } from 'react95';
+import SelectBox from './SelectBox';
+
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+  fieldset,
+  fieldset {
+    margin-bottom: 2rem;
+  }
+  legend + * {
+    margin-bottom: 1rem;
+  }
+  #default-selects {
+    width: 200px;
+  }
+  #cutout > div {
+    width: 250px;
+    padding: 1rem;
+    background: ${({ theme }) => theme.canvas};
+    & > p {
+      margin-bottom: 2rem;
+    }
+  }
+`;
+
+export default {
+  title: 'SelectBox',
+  component: SelectBox,
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
+};
+
+const options = [
+  { value: 0, label: '[None]' },
+  { value: 1, label: 'Pikachu' },
+  { value: 2, label: 'Bulbasaur' },
+  { value: 3, label: 'Squirtle' },
+  { value: 4, label: 'Mega Charizard Y' },
+  { value: 5, label: 'Jigglypuff' },
+  { value: 6, label: 'Snorlax' },
+  { value: 7, label: 'Geodude' }
+];
+
+export const Default = () => {
+  const [selected, setSelected] = useState(0);
+  const onSelect = value => {
+    setSelected(value);
+  };
+  return (
+    <div id='default-selects'>
+      <Fieldset label='default'>
+        <SelectBox options={options} value={selected} onSelect={onSelect} />
+      </Fieldset>
+    </div>
+  );
+};
+
+Default.story = {
+  name: 'default'
+};
+
+export const Flat = () => (
+  <Window>
+    <WindowContent>
+      <Cutout id='cutout'>
+        <p>
+          When you want to use SelectBox on a light background (like scrollable
+          content), just use the flat variant:
+        </p>
+        <Fieldset label='flat' variant='flat'>
+          <SelectBox />
+        </Fieldset>
+      </Cutout>
+    </WindowContent>
+  </Window>
+);
+
+Flat.story = {
+  name: 'flat'
+};
+
+export const CustomDisplayFormatting = () => <SelectBox />;
+
+CustomDisplayFormatting.story = {
+  name: 'custom display formatting'
+};

src/SelectBox/SelectBox.styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+import { createScrollbars } from '../common';
+import { blockSizes } from '../common/system';
+
+export const StyledOptionsList = styled.ul`
+  position: relative;
+  box-sizing: border-box;
+  background-color: #fff;
+  font-size: 1rem;
+  border-style: solid;
+  border-width: 2px;
+  border-left-color: ${({ theme }) => theme.borderDark};
+  border-top-color: ${({ theme }) => theme.borderDark};
+  border-right-color: ${({ theme }) => theme.borderLightest};
+  border-bottom-color: ${({ theme }) => theme.borderLightest};
+  line-height: 1.5;
+  overflow-y: auto;
+  ${({ variant }) => createScrollbars(variant)}
+`;
+
+export const StyledOptionsListItem = styled.li`
+  margin: 0;
+  padding: 0;
+  height: ${blockSizes.md};
+`;
+
+export const StyledOptionsListItemInnerButton = styled.button`
+  outline: 0;
+  border: none;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  font-size: 1rem;
+  background: ${({ theme, isSelected }) =>
+    isSelected ? theme.hoverBackground : 'none'};
+  color: ${({ theme, isSelected }) =>
+    isSelected ? theme.canvasTextInvert : '#000'};
+  outline: 0;
+`;