-
Notifications
You must be signed in to change notification settings - Fork 45
'DateSelector' #161
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
'DateSelector' #161
Changes from 14 commits
3b1c13f
e8fbd78
6893524
963fc8d
169e215
c9f0d5c
67a8b76
43fe181
7110845
38f056d
183ff41
d27736c
0d5f119
3baa202
6e65615
e07bf5a
8b90ec1
c6709dc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -35,9 +35,13 @@ const Select = ({ | |
data-locator={elementLocator || `select-input-${name}-${id}`} | ||
{...others} | ||
> | ||
{placeholder && <option value="">{placeholder}</option>} | ||
{options.map(opt => ( | ||
<option key={opt} value={opt}> | ||
{placeholder && ( | ||
<option value="" disabled selected> | ||
{placeholder} | ||
</option> | ||
)} | ||
{options.map((opt, index) => ( | ||
<option key={`${name}_${index.toString()}`} value={opt}> | ||
{opt} | ||
</option> | ||
))} | ||
|
@@ -46,10 +50,10 @@ const Select = ({ | |
|
||
Select.defaultProps = { | ||
disabled: false, | ||
selectedOption: '', | ||
placeholder: '', | ||
className: '', | ||
elementLocator: '', | ||
selectedOption: 'select', | ||
placeholder: 'Select', | ||
className: 'select', | ||
elementLocator: 'select', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Set elementLocator default value as null |
||
}; | ||
|
||
export default styled(Select)` | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
// @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'; | ||
import Label from '../../atoms/Label'; | ||
|
||
const DateSelector = ({ id, className, format, startDate, endDate, locale }: Props): Node => { | ||
const [selectedDate, setSelectedDate] = useState(new Date()); | ||
const [months, setMonths] = useState([]); | ||
|
||
const getMonths = () => { | ||
const date = new Date(); | ||
const monthsOptions = []; | ||
for (let i = 0; i < 12; i += 1) { | ||
date.setMonth(i); | ||
monthsOptions.push(date.toLocaleString(locale, { month: 'long' })); | ||
} | ||
return monthsOptions; | ||
}; | ||
|
||
useEffect(() => { | ||
setMonths(getMonths()); | ||
}, []); | ||
|
||
useEffect(() => { | ||
setSelectedDate(startDate); | ||
}, [startDate, endDate]); | ||
|
||
const getDaysInMonth = () => { | ||
const daysOptions = []; | ||
let startDay = 1; | ||
let endDay = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 0).getDate(); | ||
if ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't understand what this logic below is doing, first line itself has given you all the values. You must break this complexity There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That was a mistake. Made changes |
||
selectedDate.getMonth() === startDate.getMonth() && | ||
selectedDate.getFullYear() === startDate.getFullYear() | ||
) { | ||
startDay = startDate.getDate(); | ||
} | ||
if ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Still there is redundant code we can reduce, for example:
|
||
selectedDate.getMonth() === endDate.getMonth() && | ||
selectedDate.getFullYear() === endDate.getFullYear() | ||
) { | ||
endDay = endDate.getDate(); | ||
} | ||
for (let i = startDay; i <= endDay; i += 1) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hope you know end date and start date are optional features so that might be required or might not be in some use-cases There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. these are optional features but to show default start and end dates I'm using these |
||
daysOptions.push(i); | ||
} | ||
return daysOptions; | ||
}; | ||
|
||
const getMonthOptions = () => { | ||
let monthOptions = [...months]; | ||
if (selectedDate.getFullYear() === startDate.getFullYear()) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here, this could be returned by a function and also clear case of If or else. |
||
const startMonth = startDate.getMonth(); | ||
monthOptions = monthOptions.slice(startMonth, months.length); | ||
} | ||
if (selectedDate.getFullYear() === endDate.getFullYear()) { | ||
const endMonth = endDate.getMonth(); | ||
monthOptions = monthOptions.slice(0, endMonth + 1); | ||
} | ||
return monthOptions; | ||
}; | ||
|
||
const getYearOptions = () => { | ||
const years = []; | ||
for (let i = startDate.getFullYear(); i <= endDate.getFullYear(); i += 1) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
years.push(i); | ||
} | ||
return years; | ||
}; | ||
|
||
const DaySelector = ( | ||
<> | ||
<Label htmlFor={`${id}-day`} /> | ||
<Select | ||
onChange={e => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. |
||
return setSelectedDate( | ||
new Date(selectedDate.getFullYear(), selectedDate.getMonth(), e.target.value) | ||
); | ||
}} | ||
id={`${id}-day`} | ||
name="day" | ||
className={classNames('date', className)} | ||
selectedOption={selectedDate.getDate()} | ||
options={getDaysInMonth()} | ||
/> | ||
</> | ||
); | ||
|
||
const MonthSelector = ( | ||
<> | ||
<Label htmlFor={`${id}-month`} /> | ||
<Select | ||
onChange={e => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. |
||
return setSelectedDate( | ||
new Date( | ||
selectedDate.getFullYear(), | ||
months.indexOf(e.target.value), | ||
selectedDate.getDate() | ||
) | ||
); | ||
}} | ||
id={`${id}-month`} | ||
name="month" | ||
className={classNames('month', className)} | ||
selectedOption={months[selectedDate.getMonth()]} | ||
options={getMonthOptions()} | ||
/> | ||
</> | ||
); | ||
|
||
const YearSelector = ( | ||
<> | ||
<Label htmlFor={`${id}-year`} /> | ||
<Select | ||
onChange={e => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there's a label missing for this input. That makes it hard for people using screen readers or voice control to use the input. |
||
return setSelectedDate( | ||
new Date(e.target.value, selectedDate.getMonth(), selectedDate.getDate()) | ||
); | ||
}} | ||
id={`${id}-year`} | ||
name="year" | ||
className={classNames('year', className)} | ||
selectedOption={selectedDate.getFullYear()} | ||
options={getYearOptions()} | ||
/> | ||
</> | ||
); | ||
|
||
const renderSelector = value => { | ||
switch (value.toLowerCase()) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice |
||
case 'mmddyy': | ||
case 'mmddyyyy': | ||
return [MonthSelector, DaySelector, YearSelector]; | ||
case 'mmyy': | ||
case 'mmyyyy': | ||
return [MonthSelector, YearSelector]; | ||
case 'ddmmyy': | ||
case 'ddmmyyyy': | ||
default: | ||
return [DaySelector, MonthSelector, YearSelector]; | ||
} | ||
}; | ||
|
||
return <div className={className}>{renderSelector(format)}</div>; | ||
}; | ||
|
||
DateSelector.defaultProps = { | ||
id: 'date-selector', | ||
className: 'date-selector', | ||
format: 'ddmmyy', | ||
startDate: new Date(), | ||
endDate: new Date(new Date().setFullYear(new Date().getFullYear() + 50)), | ||
locale: 'default', | ||
}; | ||
|
||
export default styled(DateSelector)` | ||
${styles}; | ||
`; | ||
|
||
export { DateSelector as DateSelectorVanilla }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: new Date(955865024000), | ||
}; | ||
|
||
const endDateProps = { | ||
className: 'example', | ||
format: 'ddmmyy', | ||
endDate: new Date(2555865024000), | ||
}; | ||
|
||
const startAndEndDateProps = { | ||
className: 'example', | ||
format: 'ddmmyy', | ||
startDate: new Date(955865024000), | ||
endDate: new Date(2555865024000), | ||
}; | ||
|
||
export { | ||
dateSelectorDefaultProps, | ||
mmddyyFormatProps, | ||
monthYearOnlyProps, | ||
startDateProps, | ||
endDateProps, | ||
startAndEndDateProps, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} />); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { css } from 'styled-components'; | ||
|
||
export default css` | ||
${props => (props.inheritedStyles ? props.inheritedStyles : '')}; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// @flow | ||
export { default } from './DateSelector'; | ||
export { DateSelectorVanilla } from './DateSelector'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By default selected option should be null