refactoring

gpietro · Jan 25, 2018 · 66d786e · 66d786e
1 parent 90ccdf3
commit 66d786e
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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
@@ -13,15 +13,15 @@ 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,
     });
   }
 
   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 (
       <Swipeable
@@ -258,7 +258,7 @@ class Calendar extends Component {
                 .fill()
                 .map((_, i) => i + 1 + weekOffset)
                 .map(weekDay => (
-                  <StyledGridItem key={`week-day-${weekDay}`} weekDays={true}>
+                  <StyledGridItem key={`week-day-${weekDay}`} weekDays>
                     {moment()
                       .isoWeekday(weekDay)
                       .locale(locale)
@@ -268,9 +268,9 @@ class Calendar extends Component {
             </WeekDays>
 
             <Days>
-              {createDateObjects(calendarMonth, weekOffset).map((day, i) => (
+              {createDateObjects(calendarMonth, weekOffset).map(day => (
                 <GridItem
-                  key={`day-${i}`}
+                  key={`day-${day.day.format('DD.MM')}`}
                   day={day}
                   date={date}
                   onClick={this.onChange}
@@ -286,37 +286,28 @@ class Calendar extends Component {
   }
 }
 
-class GridItem extends Component {
-  constructor(props) {
-    super(props);
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick() {
-    this.props.onClick(this.props.day.day);
-  }
-
-  render() {
-    let { day, date } = this.props;
-
-    return (
-      <StyledGridItem
-        active={day.day.isSame(date)}
-        onClick={this.onClick}
-        nextMonth={day.nextMonth}
-        prevMonth={day.prevMonth}
-      >
-        {this.props.children}
-      </StyledGridItem>
-    );
-  }
-}
+const GridItem = ({ onClick, day, date, children }) => (
+  <StyledGridItem
+    active={day.day.isSame(date)}
+    onClick={() => onClick(day.day)}
+    nextMonth={day.nextMonth}
+    prevMonth={day.prevMonth}
+  >
+    {children}
+  </StyledGridItem>
+);
+
+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
@@ -85,6 +85,12 @@ storiesOf('Components', module)
         theme="blackAndWhite"
         onChange={value => console.log('changed', value)}
       />
+      <NumPad.Calendar
+        onChange={value => console.log('changed', value)}
+        label={'Data di nascita'}
+        locale="it"
+        dateFormat="DD.MM.YYYY"
+      />
     </DemoModal>
   ))
   .add('Numpad date', () => [