Rewrite in Typescript: Select

src/scripts/Datepicker.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import moment from 'moment';
 import { Button } from './Button';
-import Select, { Option } from './Select';
+import { Select, Option } from './Select';
 import { getToday, isElInChildren } from './util';
 
 function createCalendarObject(date, mnDate, mxDate) {

src/scripts/Select.js → src/scripts/Select.tsx

@@ -1,16 +1,32 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { FormElement } from './FormElement';
+import { FormElement, FormElementProps } from './FormElement';
 import { uuid } from './util';
 
-export default class Select extends Component {
-  constructor() {
-    super();
+export type SelectProps = {
+  id?: string;
+  className?: string;
+  label?: string;
+  required?: boolean;
+  totalCols?: number;
+  cols?: number;
+  error?: FormElementProps['error'];
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+} & React.SelectHTMLAttributes<HTMLSelectElement>;
+
+export type SelectState = {
+  id: string;
+};
+
+export class Select extends Component<SelectProps, SelectState> {
+  static isFormElement = true;
+
+  constructor(props: Readonly<SelectProps>) {
+    super(props);
     this.state = { id: `form-element-${uuid()}` };
   }
 
-  onChange(e) {
+  onChange(e: React.ChangeEvent<HTMLSelectElement>) {
     const { value } = e.target;
     if (this.props.onChange) {
       this.props.onChange(e, value);
@@ -44,32 +60,11 @@ export default class Select extends Component {
   }
 }
 
-Select.propTypes = {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  label: PropTypes.string,
-  required: PropTypes.bool,
-  totalCols: PropTypes.number,
-  cols: PropTypes.number,
-  // FormElement.propTypes.error
-  error: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.string,
-    PropTypes.shape({
-      message: PropTypes.string,
-    }),
-  ]),
-  onChange: PropTypes.func,
-};
-
-Select.isFormElement = true;
+export type OptionProps = {
+  label: string | number;
+} & React.OptionHTMLAttributes<HTMLOptionElement>;
 
-export const Option = (props) => {
+export const Option: React.FC<OptionProps> = (props) => {
   const { label, children, ...pprops } = props;
   return <option {...pprops}>{label || children}</option>;
 };
-
-Option.propTypes = {
-  children: PropTypes.node,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};

src/scripts/index.js

@@ -5,7 +5,6 @@ import Datepicker from './Datepicker';
 import Tabs, { Tab } from './Tabs';
 import SalesPath from './SalesPath';
 import Modal, { ModalHeader, ModalContent, ModalFooter } from './Modal';
-import Select, { Option } from './Select';
 import DateInput from './DateInput';
 import Grid, { Row, Col } from './Grid';
 import Notification, { Alert, Toast } from './Notification';
@@ -39,8 +38,6 @@ export {
   ModalContent,
   ModalFooter,
   SalesPath,
-  Select,
-  Option,
   DateInput,
   Grid,
   Row,
@@ -73,6 +70,7 @@ export * from './ButtonGroup';
 export * from './Container';
 export * from './Checkbox';
 export * from './CheckboxGroup';
+export * from './Select';
 export * from './DropdownMenu';
 export * from './DropdownButton';
 export * from './Icon';

stories/SelectStories.js → stories/SelectStories.tsx

@@ -10,10 +10,10 @@ storiesOf('Select', module)
     () => (
       <Select
         label={text('label', 'Select Label')}
-        error={text('error')}
-        required={boolean('required')}
-        value={text('value')}
-        disabled={boolean('disabled')}
+        error={text('error', '')}
+        required={boolean('required', false)}
+        value={text('value', '')}
+        disabled={boolean('disabled', false)}
         onChange={action('change')}
         onBlur={action('blur')}
       >

test/storyshots/__snapshots__/storyshots.test.js.snap

@@ -39371,9 +39371,11 @@ exports[`Storyshots Select Controlled with knobs 1`] = `
         >
           <select
             className="slds-select"
+            disabled={false}
             id="form-element-$uuid$"
             onBlur={[Function]}
             onChange={[Function]}
+            value=""
           >
             <option
               value="1"