diff --git a/js/src/common/compat.ts b/js/src/common/compat.ts index bf952abd2..cd6af9a40 100644 --- a/js/src/common/compat.ts +++ b/js/src/common/compat.ts @@ -42,7 +42,7 @@ import Dropdown from './components/Dropdown'; import SplitDropdown from './components/SplitDropdown'; import RequestErrorModal from './components/RequestErrorModal'; import FieldSet from './components/FieldSet'; -// import Select from './components/Select'; +import Select from './components/Select'; import Navigation from './components/Navigation'; import Alert from './components/Alert'; import LinkButton from './components/LinkButton'; @@ -106,7 +106,7 @@ export default { 'components/SplitDropdown': SplitDropdown, 'components/RequestErrorModal': RequestErrorModal, 'components/FieldSet': FieldSet, - // 'components/Select': Select, + 'components/Select': Select, 'components/Navigation': Navigation, 'components/Alert': Alert, 'components/LinkButton': LinkButton, diff --git a/js/src/common/components/Select.tsx b/js/src/common/components/Select.tsx new file mode 100644 index 000000000..8ea2114e9 --- /dev/null +++ b/js/src/common/components/Select.tsx @@ -0,0 +1,57 @@ +import Component, { ComponentProps } from '../Component'; +import icon from '../helpers/icon'; + +export interface SelectProps extends ComponentProps { + /** + * Disabled state for the input. + */ + disabled: boolean; + + /** + * A callback to run when the selected value is changed. + */ + onchange?: Function; + + /** + * A map of option values to labels. + */ + options: { + [key: string]: string; + }; + + /** + * The value of the selected option. + */ + value: boolean; +} + +/** + * The `Select` component displays a + {Object.keys(this.props.options).map((key: string) => ( + + ))} + + {icon('fas fa-sort', { className: 'Select-caret' })} + + ); + } + + /** + * Run a callback when the state of the checkbox is changed. + */ + protected onchange() { + if (this.props.onchange) this.props.onchange(this); + } +}