@hypothesis/frontend-shared/lib/pattern-library/examples/select-in-input-group.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/select-in-input-group.tsx";
import { useCallback, useId, useMemo, useState } from 'preact/hooks';
import { ArrowLeftIcon, ArrowRightIcon } from '../../components/icons';
import { IconButton, InputGroup } from '../../components/input';
import { Select } from '../../components/input/Select';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
const students = [{
  id: '1',
  name: 'All students'
}, {
  id: '2',
  name: 'Albert Banana'
}, {
  id: '3',
  name: 'Bernard California'
}, {
  id: '4',
  name: 'Cecelia Davenport'
}, {
  id: '5',
  name: 'Doris Evanescence'
}];
function StudentContainer({
  student
}) {
  return _jsxDEV("div", {
    className: "flex",
    children: [_jsxDEV("div", {
      className: "rounded px-2 mr-2 bg-grey-7 text-white",
      children: student.id
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 20,
      columnNumber: 7
    }, this), _jsxDEV("div", {
      className: "truncate",
      children: student.name
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 21,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 19,
    columnNumber: 5
  }, this);
}
export default function App({
  buttonClasses,
  wrapperClasses = 'w-96'
}) {
  const [selected, setSelected] = useState();
  const selectedIndex = useMemo(() => !selected ? -1 : students.findIndex(item => item === selected), [selected]);
  const next = useCallback(() => {
    var _students$newIndex;
    const newIndex = selectedIndex + 1;
    setSelected((_students$newIndex = students[newIndex]) !== null && _students$newIndex !== void 0 ? _students$newIndex : selected);
  }, [selected, selectedIndex]);
  const previous = useCallback(() => {
    var _students$newIndex2;
    const newIndex = selectedIndex - 1;
    setSelected((_students$newIndex2 = students[newIndex]) !== null && _students$newIndex2 !== void 0 ? _students$newIndex2 : selected);
  }, [selected, selectedIndex]);
  const buttonId = useId();
  return _jsxDEV("div", {
    className: wrapperClasses,
    children: [_jsxDEV("label", {
      htmlFor: buttonId,
      children: "Select a person"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 50,
      columnNumber: 7
    }, this), _jsxDEV(InputGroup, {
      children: [_jsxDEV(IconButton, {
        icon: ArrowLeftIcon,
        title: "Previous student",
        variant: "dark",
        onClick: previous,
        disabled: selectedIndex <= 0
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 52,
        columnNumber: 9
      }, this), _jsxDEV(Select, {
        buttonId: buttonId,
        value: selected,
        onChange: setSelected,
        buttonClasses: buttonClasses,
        buttonContent: selected ? _jsxDEV(StudentContainer, {
          student: selected
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 66,
          columnNumber: 15
        }, this) : _jsxDEV(_Fragment, {
          children: "Select one\u2026"
        }, void 0, false),
        children: students.map(item => _jsxDEV(Select.Option, {
          value: item,
          children: _jsxDEV(StudentContainer, {
            student: item
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 74,
            columnNumber: 15
          }, this)
        }, item.id, false, {
          fileName: _jsxFileName,
          lineNumber: 73,
          columnNumber: 13
        }, this))
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 59,
        columnNumber: 9
      }, this), _jsxDEV(IconButton, {
        icon: ArrowRightIcon,
        title: "Next student",
        variant: "dark",
        onClick: next,
        disabled: selectedIndex >= students.length - 1
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 78,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 51,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 49,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=select-in-input-group.js.map