'DateSelector'

lib/components/atoms/Select/Select.js

@@ -7,7 +7,7 @@ import styles from './Select.style';
 type Props = {
   id: string,
   className?: string,
-  name: string,
+  name?: string,
   disabled?: string | boolean,
   elementLocator?: string,
   options: any,
@@ -37,7 +37,7 @@ const Select = ({
   >
     {placeholder && <option value="">{placeholder}</option>}
     {options.map(opt => (
-      <option key={opt} value={opt}>
+      <option key={`${name}_${opt}`} value={opt}>
         {opt}
       </option>
     ))}
@@ -50,6 +50,7 @@ Select.defaultProps = {
   placeholder: '',
   className: '',
   elementLocator: '',
+  name: 'optionName',
 };
 
 export default styled(Select)`

lib/components/molecules/DateSelector/DateSelector.js

@@ -0,0 +1,207 @@
+// @flow
+/**
+ *
+ * DateSelector
+ *
+ */
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import classNames from 'classnames';
+import styles from './DateSelector.style';
+import type { Props } from './types';
+import Select from '../../atoms/Select';
+
+const monthOptions = [
+  'January',
+  'Febuary',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const DateSelector = (props: Props): Node => {
+  const { className, format, startDate, endDate } = props;
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [newStartDate, setNewStartDate] = useState(
+    new Date(new Date().setFullYear(new Date().getFullYear() - 100))
+  );
+  const [newEndDate, setNewEndDate] = useState(
+    new Date(new Date().setFullYear(new Date().getFullYear() + 50))
+  );
+
+  const setDate = dateType => {
+    if (dateType === 'start') {
+      if (startDate) {
+        setNewStartDate(new Date(startDate));
+      } else {
+        const d = new Date();
+        setNewStartDate(new Date(d.setFullYear(d.getFullYear() - 100)));
+      }
+    } else if (dateType === 'end') {
+      if (endDate) {
+        setNewEndDate(new Date(endDate));
+      } else {
+        const d = new Date();
+        setNewEndDate(new Date(d.setFullYear(d.getFullYear() + 50)));
+      }
+    }
+  };
+
+  useEffect(() => {
+    // ... Use hooks
+    setDate('start');
+    setDate('end');
+  }, []);
+
+  useEffect(() => {
+    setSelectedDate(newStartDate);
+  }, [newStartDate, newEndDate]);
+
+  const getDaysInMonth = () => {
+    const noOfDays = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 0).getDate();
+    const days = [];
+    let startDay = 1;
+    let endDay = noOfDays;
+    if (
+      selectedDate.getMonth() === newStartDate.getMonth() &&
+      selectedDate.getFullYear() === newStartDate.getFullYear()
+    ) {
+      startDay = newStartDate.getDate();
+    }
+    if (
+      selectedDate.getMonth() === newEndDate.getMonth() &&
+      selectedDate.getFullYear() === newEndDate.getFullYear()
+    ) {
+      endDay = newEndDate.getDate();
+    }
+    for (let i = startDay; i <= endDay; i += 1) {
+      days.push(i);
+    }
+    return days;
+  };
+
+  const getMonthOptions = () => {
+    let months = [...monthOptions];
+    if (selectedDate.getFullYear() === newStartDate.getFullYear()) {
+      const startMonth = newStartDate.getMonth();
+      months = months.slice(startMonth, months.length);
+    }
+    if (selectedDate.getFullYear() === newEndDate.getFullYear()) {
+      const endMonth = newEndDate.getMonth();
+      months = months.slice(0, endMonth + 1);
+    }
+    return months;
+  };
+
+  const getYearOptions = () => {
+    const years = [];
+    for (let i = newStartDate.getFullYear(); i <= newEndDate.getFullYear(); i += 1) {
+      years.push(i);
+    }
+    return years;
+  };
+
+  const DaySelector = (
+    <>
+      <label htmlFor="date" style={{display: 'none'}}>Date</label>
+      <Select
+        onChange={e => {
+          return setSelectedDate(
+            new Date(selectedDate.getFullYear(), selectedDate.getMonth(), e.target.value)
+          );
+        }}
+        id="date"
+        name="day"
+        className={classNames('date', className)}
+        disabled={false}
+        elementLocator="date-picker-date"
+        selectedOption={selectedDate.getDate()}
+        options={getDaysInMonth()}
+      />
+    </>
+  );
+
+  const MonthSelector = (
+    <>
+      <label htmlFor="month" style={{display: 'none'}}>
+        Month
+      </label>
+      <Select
+        onChange={e => {
+          return setSelectedDate(
+            new Date(
+              selectedDate.getFullYear(),
+              monthOptions.indexOf(e.target.value),
+              selectedDate.getDate()
+            )
+          );
+        }}
+        id="month"
+        name="month"
+        className={classNames('month', className)}
+        disabled={false}
+        elementLocator="date-picker-month"
+        selectedOption={monthOptions[selectedDate.getMonth()]}
+        options={getMonthOptions()}
+      />
+    </>
+  );
+
+  const YearSelector = (
+    <>
+      <label htmlFor="year" style={{display: 'none'}}>Year</label>
+      <Select
+        onChange={e => {
+          return setSelectedDate(
+            new Date(e.target.value, selectedDate.getMonth(), selectedDate.getDate())
+          );
+        }}
+        id="year"
+        name="year"
+        className={classNames('year', className)}
+        disabled={false}
+        elementLocator="date-picker-year"
+        selectedOption={selectedDate.getFullYear()}
+        options={getYearOptions()}
+      />
+    </>
+  );
+
+  return (
+    <div className={className}>
+      {(format.toLowerCase() === 'ddmmyy' || format.toLowerCase() === 'ddmmyyyy') && [
+        DaySelector,
+        MonthSelector,
+        YearSelector,
+      ]}
+      {(format.toLowerCase() === 'mmddyy' || format.toLowerCase() === 'mmddyyyy') && [
+        MonthSelector,
+        DaySelector,
+        YearSelector,
+      ]}
+      {(format.toLowerCase() === 'mmyy' || format.toLowerCase() === 'mmyyyy') && [
+        MonthSelector,
+        YearSelector,
+      ]}
+    </div>
+  );
+};
+
+DateSelector.defaultProps = {
+  className: 'date-selector',
+  format: 'ddmmyy',
+};
+
+export default styled(DateSelector)`
+  ${styles};
+`;
+
+export { DateSelector as DateSelectorVanilla };

lib/components/molecules/DateSelector/DateSelector.mock.js

@@ -0,0 +1,44 @@
+const dateSelectorDefaultProps = {
+  className: 'example',
+  defaultValue: new Date(),
+  format: 'ddmmyy',
+};
+
+const mmddyyFormatProps = {
+  className: 'example',
+  format: 'mmddyy',
+  startDate: new Date(),
+};
+
+const monthYearOnlyProps = {
+  className: 'example',
+  format: 'mmyy',
+};
+
+const startDateProps = {
+  className: 'example',
+  format: 'ddmmyy',
+  startDate: 955865024000,
+};
+
+const endDateProps = {
+  className: 'example',
+  format: 'ddmmyy',
+  endDate: 2555865024000,
+};
+
+const startAndEndDateProps = {
+  className: 'example',
+  format: 'ddmmyy',
+  startDate: 955865024000,
+  endDate: 2555865024000,
+};
+
+export {
+  dateSelectorDefaultProps,
+  mmddyyFormatProps,
+  monthYearOnlyProps,
+  startDateProps,
+  endDateProps,
+  startAndEndDateProps,
+};

lib/components/molecules/DateSelector/DateSelector.story.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import { action } from '@storybook/addon-actions';
+import {
+  dateSelectorDefaultProps,
+  mmddyyFormatProps,
+  monthYearOnlyProps,
+  startDateProps,
+  endDateProps,
+  startAndEndDateProps,
+} from './DateSelector.mock';
+
+// Import Styled Component to showcase variations
+import DateSelector, { DateSelectorVanilla } from '.';
+
+storiesOf('Molecules/DateSelector', module)
+  .addParameters({ jest: ['DateSelector', 'DateSelectorVanilla'] })
+  .add('Knobs', () => <DateSelectorVanilla {...dateSelectorDefaultProps} />)
+  .add('DateSelector format ddmmyyyy', () => <DateSelector {...dateSelectorDefaultProps} />)
+  .add('DateSelector format mmddyyyy', () => <DateSelector {...mmddyyFormatProps} />)
+  .add('DateSelector format mmyyyy', () => <DateSelector {...monthYearOnlyProps} />)
+  .add('DateSelector with Start Date', () => <DateSelector {...startDateProps} />)
+  .add('DateSelector with End Date', () => <DateSelector {...endDateProps} />)
+  .add('DateSelector with Start and End Date', () => <DateSelector {...startAndEndDateProps} />);

lib/components/molecules/DateSelector/DateSelector.style.js

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export default css`
+  ${props => (props.inheritedStyles ? props.inheritedStyles : '')};
+`;

lib/components/molecules/DateSelector/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { default } from './DateSelector';
+export { DateSelectorVanilla } from './DateSelector';

lib/components/molecules/DateSelector/tests/DateSelector.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { DateSelectorVanilla } from '../index';
+import Select from '../../../atoms/Select';
+
+describe('<DateSelector />', () => {
+  let DateSelectorComponent = '';
+  beforeEach(() => {
+    DateSelectorComponent = shallow(<DateSelectorVanilla>Test</DateSelectorVanilla>);
+  });
+
+  test('should render correctly', () => {
+    expect(DateSelectorComponent).toMatchSnapshot();
+  });
+
+  test('should render the 3 Select Components(date month and year)', () => {
+    DateSelectorComponent.setProps({
+      format: 'ddmmyy',
+    });
+    expect(DateSelectorComponent.find(Select)).toHaveLength(3);
+  });
+
+  test('should render the 3 Select Components(date month and year)', () => {
+    DateSelectorComponent.setProps({
+      format: 'ddmmyyyy',
+    });
+    expect(DateSelectorComponent.find(Select)).toHaveLength(3);
+  });
+
+  test('should render the 3 Select Components(month date and year)', () => {
+    DateSelectorComponent.setProps({
+      format: 'mmddyy',
+    });
+    expect(DateSelectorComponent.find(Select)).toHaveLength(3);
+  });
+
+  test('should render the 3 Select Components(month date and year)', () => {
+    DateSelectorComponent.setProps({
+      format: 'mmddyyyy',
+    });
+    expect(DateSelectorComponent.find(Select)).toHaveLength(3);
+  });
+
+  test('should render the 2 Select Components(month and year selectors)', () => {
+    DateSelectorComponent.setProps({
+      format: 'mmyy',
+    });
+    expect(DateSelectorComponent.find(Select)).toHaveLength(2);
+  });
+
+  test('should render the 2 Select Components(month and year selectors)', () => {
+    DateSelectorComponent.setProps({
+      format: 'mmyyyy',
+    });
+    expect(DateSelectorComponent.find(Select)).toHaveLength(2);
+  });
+});