feat(DateInput): initial

package.json

@@ -72,7 +72,9 @@
     "color": "^3.0.0",
     "emotion": "^9.1.1",
     "emotion-theming": "^9.1.2",
+    "moment": "^2.22.2",
     "prop-types": "^15.6.1",
+    "react-datepicker": "^1.7.0",
     "react-input-mask": "^2.0.1",
     "react-onclickoutside": "^6.7.1",
     "react-popper": "^0.10.1",

src/atoms/atoms.js

@@ -16,6 +16,8 @@ export { Heading } from './typography/Heading';
 export { Icon } from './typography/Icon';
 export { Input } from './dataEntry/Input';
 export { InputField } from './dataEntry/InputField';
+export { DateInput } from './dataEntry/DateInput';
+export { DateInputField } from './dataEntry/DateInputField';
 export { Label } from './typography/Label';
 export { Link } from './typography/Link';
 export { Modal } from './Modal';

src/atoms/dataEntry/DateInput/DateInput.js

@@ -0,0 +1,58 @@
+// @flow
+
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import { injectGlobal } from 'emotion';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import { createStyledTag, createTheme } from '../../../utils';
+import { DateInputValue } from './DateInputValue';
+
+injectGlobal(`
+  .react-datepicker-wrapper, .react-datepicker__input-container {
+    display: block;
+  }
+`);
+
+type DateInputProps = {|
+  onChange: (value: ?string) => void,
+  value: string,
+|};
+
+const name = 'dateInput';
+
+const theme = createTheme(name, {});
+
+const DateInputTag = createStyledTag(name, {
+  display: 'flex',
+  width: '100%',
+  '> div': {
+    flex: '1',
+  },
+});
+
+class DateInput extends React.Component<DateInputProps> {
+  onChange = (value: any) => {
+    this.props.onChange(value ? value.format('YYYY-MM-DD') : null);
+  };
+
+  collectProps() {
+    const { value } = this.props;
+
+    return {
+      selected: value ? moment(value) : null,
+      onChange: this.onChange,
+      // $FlowFixMe
+      customInput: <DateInputValue />,
+    };
+  }
+
+  render() {
+    const collectedProps = this.collectProps();
+
+    return <DateInputTag><DatePicker { ...collectedProps } /></DateInputTag>;
+  }
+}
+
+export { DateInput, theme };

src/atoms/dataEntry/DateInput/DateInput.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import moment from 'moment';
+
+let value = moment().format('YYYY-MM-DD');
+
+export default (asStory) => {
+  asStory('ATOMS/DATA ENTRY/DateInput', module, (story, { DateInput }) => {
+    story
+      .add('default', () => (
+        <DateInput value={ value } onChange={ (val) => { value = val; } } />
+      ));
+  });
+};
+

src/atoms/dataEntry/DateInput/DateInputValue.js

@@ -0,0 +1,17 @@
+// @flow
+
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import { Input } from '../Input';
+
+type DateInputValueProps = {|
+  onChange: (value: Object) => void,
+  value: string,
+|};
+
+const DateInputValue = ({ value, onChange, ...props }: DateInputValueProps) => (
+  <Input onChange={ (val) => onChange({ target: { value: val }}) } value={ value } { ...props } />
+);
+
+export { DateInputValue };

src/atoms/dataEntry/DateInput/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { theme, DateInput } from './DateInput';

src/atoms/dataEntry/DateInputField/DateInputField.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { createTheme } from '../../../utils';
+import { DateInput } from '../DateInput';
+import { FormField } from '../Form/FormField';
+
+type DateInputFieldProps = {|
+  /** field label */
+  label?: string,
+  /** form input object */
+  input?: InputType,
+  /** form meta object */
+  meta?: MetaType,
+|};
+
+const name = 'DateInputField';
+
+const theme = createTheme(name, {
+  modifiers: {
+  },
+  defaults: {
+  },
+});
+
+function DateInputField({
+  label,
+  input = {},
+  meta = {},
+  ...rest
+  }: DateInputFieldProps) {
+  const { name, value, onChange } = input;
+
+  return (
+    <FormField label={ label } input={ input } meta={ meta }>
+      <DateInput
+        { ...rest }
+        name={ name }
+        value={ value }
+        onChange={ onChange }
+      />
+    </FormField>
+  );
+}
+
+export { DateInputField, theme };

src/atoms/dataEntry/DateInputField/index.js

@@ -0,0 +1 @@
+export { DateInputField, theme } from './DateInputField';

src/atoms/theme.js

@@ -32,6 +32,8 @@ import { theme as switchTheme } from './dataEntry/Switch';
 import { theme as textTheme } from './typography/Text';
 import { theme as loaderTheme } from './Loader';
 import { theme as tableTheme } from './Table';
+import { theme as dateInputFieldTheme } from './dataEntry/DateInputField';
+import { theme as dateInputTheme } from './dataEntry/DateInput';
 
 export const theme = {
   ...avatarTheme,
@@ -66,4 +68,6 @@ export const theme = {
   ...loaderTheme,
   ...tableTheme,
   ...switchTheme,
+  ...dateInputFieldTheme,
+  ...dateInputTheme,
 };