diff --git a/.eslintrc.js b/.eslintrc.js index 26066799..488edc11 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,7 +13,7 @@ module.exports = { 'error', { singleQuote: true, - trailingComma: 'all', + trailingComma: 'all', }, ], 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], diff --git a/lib/components/CalendarDate.js b/lib/components/CalendarDate.js index 74951ac2..29261777 100644 --- a/lib/components/CalendarDate.js +++ b/lib/components/CalendarDate.js @@ -1,5 +1,4 @@ import React from 'react'; -import moment from 'moment'; import MdCalendar from 'react-icons/lib/md/date-range'; import { Calendar } from '../elements'; import NumPad from './NumPad'; diff --git a/lib/components/NumPad.js b/lib/components/NumPad.js index b98ffc7d..b1af711d 100644 --- a/lib/components/NumPad.js +++ b/lib/components/NumPad.js @@ -102,6 +102,7 @@ export default ({ label: undefined, theme: undefined, dateFormat: undefined, + locale: 'en', defaultValue: '', }; @@ -114,6 +115,7 @@ export default ({ ]), placeholder: PropTypes.string, label: PropTypes.string, + locale: PropTypes.string, theme: PropTypes.string, dateFormat: PropTypes.string, defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/lib/elements/Calendar.js b/lib/elements/Calendar.js index b64b3ddb..9a2f8569 100644 --- a/lib/elements/Calendar.js +++ b/lib/elements/Calendar.js @@ -13,7 +13,7 @@ const createDateObjects = (startOfMonth, weekOffset = 0) => { if (diff < 0) diff += 7; const prevMonthDays = []; - for (let i = 0; i < diff; i++) { + for (let i = 0; i < diff; i += 1) { prevMonthDays.push({ day: startOfMonth.clone().subtract(diff - i, 'days'), prevMonth: true, @@ -21,7 +21,7 @@ const createDateObjects = (startOfMonth, weekOffset = 0) => { } const currentMonthDays = []; - for (let i = 1; i < startOfMonth.daysInMonth() + 1; i++) { + for (let i = 1; i < startOfMonth.daysInMonth() + 1; i += 1) { currentMonthDays.push({ day: moment([startOfMonth.year(), startOfMonth.month(), i]), }); @@ -53,7 +53,7 @@ const Button = styled.button` cursor: pointer; &:focus { color: yellow; - outline: noneĀ ; + outline: none; } margin-top: -5px; `; @@ -169,10 +169,11 @@ class Calendar extends Component { this.onChange = this.onChange.bind(this); } - handleClickOutside(evt) { - evt.preventDefault(); - evt.stopPropagation(); - this.onChange(this.state.date); + onChange(day) { + const { confirm, dateFormat } = this.props; + this.setState({ date: day }, () => { + confirm(this.state.date.format(dateFormat)); + }); } swipingLeft() { @@ -211,16 +212,15 @@ class Calendar extends Component { })); } - onChange(day) { - let { confirm, dateFormat } = this.props; - this.setState({ date: day }, () => { - confirm(this.state.date.format(dateFormat)); - }); + handleClickOutside(evt) { + evt.preventDefault(); + evt.stopPropagation(); + this.onChange(this.state.date); } render() { - let { locale, weekOffset } = this.props; - let { date, calendarMonth } = this.state; + const { locale, weekOffset } = this.props; + const { date, calendarMonth } = this.state; return ( i + 1 + weekOffset) .map(weekDay => ( - + {moment() .isoWeekday(weekDay) .locale(locale) @@ -268,9 +268,9 @@ class Calendar extends Component { - {createDateObjects(calendarMonth, weekOffset).map((day, i) => ( + {createDateObjects(calendarMonth, weekOffset).map(day => ( - {this.props.children} - - ); - } -} +const GridItem = ({ onClick, day, date, children }) => ( + onClick(day.day)} + nextMonth={day.nextMonth} + prevMonth={day.prevMonth} + > + {children} + +); + +GridItem.propTypes = { + onClick: PropTypes.func.isRequired, + day: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types + date: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types + children: PropTypes.string.isRequired, +}; Calendar.propTypes = { confirm: PropTypes.func.isRequired, - cancel: PropTypes.func.isRequired, - weekOffset: PropTypes.number.isRequired, - currentDate: PropTypes.object.isRequired, + weekOffset: PropTypes.number, + currentDate: PropTypes.object, // eslint-disable-line react/forbid-prop-types dateFormat: PropTypes.string, locale: PropTypes.string, }; diff --git a/stories/index.js b/stories/index.js index 5fff8de0..4e97152f 100644 --- a/stories/index.js +++ b/stories/index.js @@ -85,6 +85,12 @@ storiesOf('Components', module) theme="blackAndWhite" onChange={value => console.log('changed', value)} /> + console.log('changed', value)} + label={'Data di nascita'} + locale="it" + dateFormat="DD.MM.YYYY" + /> )) .add('Numpad date', () => [