[WIP] SelectBox

src/SelectBox/SelectBox.js

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

src/SelectBox/SelectBox.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { renderWithTheme } from '../../test/utils';
+import SelectBox from './SelectBox';
+
+const options = [
+  { label: 'ten', value: 0 },
+  { label: 'twenty', value: 1 },
+  { label: 'thirty', value: 2 }
+];
+
+describe('<SelectBox />', () => {
+  beforeEach(() => {
+    window.HTMLElement.prototype.scrollIntoView = function() {};
+  });
+  it('should be able to mount the component', () => {
+    const { container } = renderWithTheme(<SelectBox options={options} />);
+    expect(container.querySelector('ul').querySelector('li').textContent).toBe(
+      'ten'
+    );
+  });
+});

src/SelectBox/SelectBox.stories.js

@@ -0,0 +1,89 @@
+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,33 @@
+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;
+  line-height: 1.5;
+  overflow-y: auto;
+  ${({ variant }) => createScrollbars(variant)}
+  outline: none;
+`;
+
+export const StyledOptionsListItem = styled.li`
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: 31px;
+  line-height: calc(${blockSizes.md} - 4px);
+  background: ${({ theme, isSelected }) =>
+    isSelected ? theme.hoverBackground : 'none'};
+  color: ${({ theme, isSelected }) =>
+    isSelected ? theme.canvasTextInvert : '#000'};
+  width: 100%;
+  padding-left: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+`;