From 3b1c13ffbf62a0449ba17a6c07d92ebe62a48357 Mon Sep 17 00:00:00 2001 From: Kirti Sharma Date: Mon, 9 Dec 2019 16:43:23 +0530 Subject: [PATCH 01/15] 'DateSelector' --- .../molecules/DateSelector/DateSelector.js | 190 ++++++++++++++ .../DateSelector/DateSelector.mock.js | 44 ++++ .../DateSelector/DateSelector.story.js | 24 ++ .../DateSelector/DateSelector.style.js | 5 + .../molecules/DateSelector/index.js | 3 + .../DateSelector/tests/DateSelector.test.js | 58 +++++ .../__snapshots__/DateSelector.test.js.snap | 234 ++++++++++++++++++ .../molecules/DateSelector/types/index.js | 12 + lib/index.js | 3 + stylelint.config.js | 2 +- 10 files changed, 574 insertions(+), 1 deletion(-) create mode 100644 lib/components/molecules/DateSelector/DateSelector.js create mode 100644 lib/components/molecules/DateSelector/DateSelector.mock.js create mode 100644 lib/components/molecules/DateSelector/DateSelector.story.js create mode 100644 lib/components/molecules/DateSelector/DateSelector.style.js create mode 100644 lib/components/molecules/DateSelector/index.js create mode 100644 lib/components/molecules/DateSelector/tests/DateSelector.test.js create mode 100644 lib/components/molecules/DateSelector/tests/__snapshots__/DateSelector.test.js.snap create mode 100644 lib/components/molecules/DateSelector/types/index.js diff --git a/lib/components/molecules/DateSelector/DateSelector.js b/lib/components/molecules/DateSelector/DateSelector.js new file mode 100644 index 000000000..041c3a71c --- /dev/null +++ b/lib/components/molecules/DateSelector/DateSelector.js @@ -0,0 +1,190 @@ +// @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 = ( + { + return setSelectedDate( + new Date( + selectedDate.getFullYear(), + monthOptions.indexOf(e.target.value), + selectedDate.getDate() + ) + ); + }} + className={classNames('month', className)} + disabled={false} + elementLocator="date-picker-month" + selectedOption={monthOptions[selectedDate.getMonth()]} + options={getMonthOptions()} + /> + ); + + const YearSelector = ( + + + +`; diff --git a/lib/components/molecules/DateSelector/types/index.js b/lib/components/molecules/DateSelector/types/index.js new file mode 100644 index 000000000..f41b1a4a8 --- /dev/null +++ b/lib/components/molecules/DateSelector/types/index.js @@ -0,0 +1,12 @@ +// @flow +import type { Node } from 'react'; + +type Format = 'ddmmyy' | 'ddmmyyyy' | 'mmddyy' | 'mmddyyyy' | 'mmyy' | 'mmyyyy'; + +export type Props = { + children: Node, + className?: string, + format?: Format, + startDate: number, + endDate: number, +}; diff --git a/lib/index.js b/lib/index.js index 1c32fa42f..0e15f7de6 100644 --- a/lib/index.js +++ b/lib/index.js @@ -22,6 +22,7 @@ import InputChoice, { InputChoiceVanilla } from './components/molecules/InputCho import Modal, { ModalVanilla } from './components/molecules/Modal'; import Popover, { PopoverVanilla } from './components/molecules/Popover'; import Tabs, { TabsVanilla } from './components/molecules/Tabs'; +import DateSelector, { DateSelectorVanilla } from './components/molecules/DateSelector'; /** * Theme */ @@ -58,4 +59,6 @@ export { Tabs, TabsVanilla, Theme, + DateSelector, + DateSelectorVanilla, }; diff --git a/stylelint.config.js b/stylelint.config.js index 9a204ad51..b82e16d71 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,6 +1,6 @@ const strictRules = { 'selector-max-specificity': [ - '0,2,0', + '0,3,0', { ignoreSelectors: [':global', ':local'], severity: 'warning', From e8fbd786f83532b968494b4ae3bdb0cb5b9c82b1 Mon Sep 17 00:00:00 2001 From: Kirti Sharma Date: Mon, 9 Dec 2019 16:58:14 +0530 Subject: [PATCH 02/15] 'DateSelector' --- lib/components/molecules/DateSelector/DateSelector.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/components/molecules/DateSelector/DateSelector.js b/lib/components/molecules/DateSelector/DateSelector.js index 041c3a71c..462320b80 100644 --- a/lib/components/molecules/DateSelector/DateSelector.js +++ b/lib/components/molecules/DateSelector/DateSelector.js @@ -116,6 +116,7 @@ const DateSelector = (props: Props): Node => { new Date(selectedDate.getFullYear(), selectedDate.getMonth(), e.target.value) ); }} + label="" className={classNames('date', className)} disabled={false} elementLocator="date-picker-date" @@ -135,6 +136,7 @@ const DateSelector = (props: Props): Node => { ) ); }} + label="" className={classNames('month', className)} disabled={false} elementLocator="date-picker-month" @@ -150,6 +152,7 @@ const DateSelector = (props: Props): Node => { new Date(e.target.value, selectedDate.getMonth(), selectedDate.getDate()) ); }} + label="" className={classNames('year', className)} disabled={false} elementLocator="date-picker-year" From 6893524cf68dfd6f12f2021fc3fdf136f01c9b26 Mon Sep 17 00:00:00 2001 From: Kirti Sharma Date: Mon, 9 Dec 2019 17:06:27 +0530 Subject: [PATCH 03/15] 'DateSelector' --- lib/components/atoms/Select/Select.js | 5 +++-- lib/components/molecules/DateSelector/DateSelector.js | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/components/atoms/Select/Select.js b/lib/components/atoms/Select/Select.js index 1fba005fe..f72cb3c16 100644 --- a/lib/components/atoms/Select/Select.js +++ b/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 && } {options.map(opt => ( - ))} @@ -50,6 +50,7 @@ Select.defaultProps = { placeholder: '', className: '', elementLocator: '', + name: 'optionName', }; export default styled(Select)` diff --git a/lib/components/molecules/DateSelector/DateSelector.js b/lib/components/molecules/DateSelector/DateSelector.js index 462320b80..ab9c7f179 100644 --- a/lib/components/molecules/DateSelector/DateSelector.js +++ b/lib/components/molecules/DateSelector/DateSelector.js @@ -117,6 +117,7 @@ const DateSelector = (props: Props): Node => { ); }} label="" + name="day" className={classNames('date', className)} disabled={false} elementLocator="date-picker-date" @@ -137,6 +138,7 @@ const DateSelector = (props: Props): Node => { ); }} label="" + name="month" className={classNames('month', className)} disabled={false} elementLocator="date-picker-month" @@ -153,6 +155,7 @@ const DateSelector = (props: Props): Node => { ); }} label="" + name="year" className={classNames('year', className)} disabled={false} elementLocator="date-picker-year" From 963fc8d34b281eab7fbdf206dc7b1d416784e209 Mon Sep 17 00:00:00 2001 From: Kirti Sharma Date: Mon, 9 Dec 2019 17:18:04 +0530 Subject: [PATCH 04/15] 'DateSelector' --- .../molecules/DateSelector/DateSelector.js | 103 ++++++++++-------- 1 file changed, 57 insertions(+), 46 deletions(-) diff --git a/lib/components/molecules/DateSelector/DateSelector.js b/lib/components/molecules/DateSelector/DateSelector.js index ab9c7f179..f6f706b2e 100644 --- a/lib/components/molecules/DateSelector/DateSelector.js +++ b/lib/components/molecules/DateSelector/DateSelector.js @@ -110,58 +110,69 @@ const DateSelector = (props: Props): Node => { }; const DaySelector = ( - { + 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 = ( - { + 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 = ( - { + 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 ( From 169e2154a1e50abcffc989421479ac32d6a9c256 Mon Sep 17 00:00:00 2001 From: Kirti Sharma Date: Mon, 9 Dec 2019 17:31:55 +0530 Subject: [PATCH 05/15] 'DateSelector' --- .../molecules/DateSelector/DateSelector.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/lib/components/molecules/DateSelector/DateSelector.js b/lib/components/molecules/DateSelector/DateSelector.js index f6f706b2e..7d25e3468 100644 --- a/lib/components/molecules/DateSelector/DateSelector.js +++ b/lib/components/molecules/DateSelector/DateSelector.js @@ -110,8 +110,7 @@ const DateSelector = (props: Props): Node => { }; const DaySelector = ( - <> - + ); const YearSelector = ( - <> - + + ); const MonthSelector = ( - ); return ( From 67a8b769905f505b1fd50a573d759d7f6cbc7f4e Mon Sep 17 00:00:00 2001 From: Kirti Sharma Date: Mon, 9 Dec 2019 17:58:27 +0530 Subject: [PATCH 07/15] 'DateSelector' --- .../__snapshots__/Select.style.test.js.snap | 4 +- .../tests/__snapshots__/Select.test.js.snap | 4 +- .../__snapshots__/DateSelector.test.js.snap | 476 +++++++++--------- 3 files changed, 254 insertions(+), 230 deletions(-) diff --git a/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap b/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap index bc4b02db8..c2e9fa7a9 100644 --- a/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap +++ b/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap @@ -220,13 +220,13 @@ exports[`Select Styled component should render correctly 1`] = ` value="" >