feat(inputs): Formatting input value while typing and supporting some Input's props

arthurdenner · arthurdenner · commit 968a3111258f · 2018-05-24T15:59:41.000-03:00
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "classnames": "^2.2.5",
     "date-fns": "^1.29.0",
     "dayzed": "^2.0.1",
+    "format-string-by-pattern": "^0.3.0",
     "prop-types": "^15.6.1",
     "react": "16.2",
     "react-dom": "16.2",
@@ -37,7 +38,8 @@
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",
     "rules": {
-      "import/no-unassigned-import": 0
+      "import/no-unassigned-import": 0,
+      "no-console": 1
     }
   },
   "eslintIgnore": [
diff --git a/src/components/calendar/calendar.css b/src/components/calendar/calendar.css
@@ -1,10 +1,19 @@
+.clndr-calendar {
+  margin: 0 !important;
+}
+
 .clndr-control {
   display: grid;
-  grid-template-columns: auto auto 1fr auto auto;
+  grid-template-columns: 1fr 1fr 1fr;
   margin-bottom: 10px;
   align-items: center;
 }
 
+.clndr-control > div {
+  display: flex;
+  justify-content: var(--justify, flex-start);
+}
+
 .clndr-control-month {
   padding: 0 20px;
   text-align: center;
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Segment } from 'semantic-ui-react';
 import Dayzed from 'dayzed';
@@ -11,6 +11,8 @@ import './calendar.css';
 
 const Calendar = ({
   fluid,
+  minDate,
+  maxDate,
   onDateSelected,
   selected,
   selectedClassName,
@@ -19,39 +21,57 @@ const Calendar = ({
 }) => (
   <Dayzed
     {...otherProps}
+    minDate={minDate}
+    maxDate={maxDate}
     onDateSelected={onDateSelected}
     selected={selected}
     render={({ calendars, getBackProps, getForwardProps, getDateProps }) =>
-      calendars.map(calendar => (
-        <Segment compact={!fluid} key={`${calendar.year}-${calendar.month}`}>
+      calendars.map((calendar, calendarIdx) => (
+        <Segment
+          className="clndr-calendar"
+          compact={!fluid}
+          key={`${calendar.year}-${calendar.month}`}
+        >
           <div className="clndr-control">
-            <Button
-              icon="angle double left"
-              title="Last year"
-              {...getBackProps({ calendars, offset: 12 })}
-            />
-            <Button
-              icon="angle left"
-              style={{ marginRight: 0 }}
-              title="Last month"
-              {...getBackProps({ calendars })}
-            />
+            <div>
+              {calendarIdx === 0 && (
+                <Fragment>
+                  <Button
+                    icon="angle double left"
+                    title="Last year"
+                    {...getBackProps({ calendars, offset: 12 })}
+                  />
+                  <Button
+                    icon="angle left"
+                    style={{ marginRight: 0 }}
+                    title="Last month"
+                    {...getBackProps({ calendars })}
+                  />
+                </Fragment>
+              )}
+            </div>
 
             <span className="clndr-control-month">
               {monthNamesShort[calendar.month]} {calendar.year}
             </span>
 
-            <Button
-              icon="angle right"
-              title="Next month"
-              {...getForwardProps({ calendars })}
-            />
-            <Button
-              icon="angle double right"
-              style={{ marginRight: 0 }}
-              title="Next year"
-              {...getForwardProps({ calendars, offset: 12 })}
-            />
+            <div style={{ '--justify': 'flex-end' }}>
+              {calendarIdx === calendars.length - 1 && (
+                <Fragment>
+                  <Button
+                    icon="angle right"
+                    title="Next month"
+                    {...getForwardProps({ calendars })}
+                  />
+                  <Button
+                    icon="angle double right"
+                    style={{ marginRight: 0 }}
+                    title="Next year"
+                    {...getForwardProps({ calendars, offset: 12 })}
+                  />
+                </Fragment>
+              )}
+            </div>
           </div>
           <div className="clndr-days">
             {weekdayNamesShort.map(weekday => (
@@ -62,8 +82,8 @@ const Calendar = ({
               </CalendarCell>
             ))}
             {calendar.weeks.map(week =>
-              week.map((dateObj, index) => {
-                const key = `${calendar.year}-${calendar.month}-${index}`;
+              week.map((dateObj, weekIdx) => {
+                const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
 
                 return dateObj ? (
                   <CalendarCell
@@ -82,8 +102,10 @@ const Calendar = ({
           </div>
           {showToday && (
             <TodayButton
-              {...getToday(selected)}
-              {...getDateProps({ dateObj: getToday(selected) })}
+              {...getToday(selected, minDate, maxDate)}
+              {...getDateProps({
+                dateObj: getToday(selected, minDate, maxDate),
+              })}
             >
               Today
             </TodayButton>
@@ -96,6 +118,8 @@ const Calendar = ({
 
 Calendar.propTypes = {
   fluid: PropTypes.bool,
+  maxDate: PropTypes.instanceOf(Date),
+  minDate: PropTypes.instanceOf(Date),
   onDateSelected: PropTypes.func,
   selected: PropTypes.instanceOf(Date),
   selectedClassName: PropTypes.string,
@@ -104,6 +128,8 @@ Calendar.propTypes = {
 
 Calendar.defaultProps = {
   onDateSelected: () => {},
+  maxDate: null,
+  minDate: null,
   showToday: true,
 };
 
diff --git a/src/inputs/simple.js b/src/inputs/simple.js
@@ -4,22 +4,25 @@ import { Form } from 'semantic-ui-react';
 import isEqual from 'date-fns/is_equal';
 import isValid from 'date-fns/is_valid';
 import parse from 'date-fns/parse';
-import { formatDate } from '../utils';
+import formatByPattern from 'format-string-by-pattern';
+import { formatDate, omit, pick, semanticInputProps } from '../utils';
 import Calendar from '../components/calendar';
 import Portal from '../components/portal';
 
 class SimpleInput extends Component {
   static propTypes = {
     date: PropTypes.instanceOf(Date),
+    fluid: PropTypes.bool,
     format: PropTypes.string,
-    inputProps: PropTypes.object,
-    onDateSelected: PropTypes.func.isRequired,
+    onDateChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
   };
 
   static defaultProps = {
     date: undefined,
+    fluid: false,
     format: 'YYYY-MM-DD',
-    inputProps: {},
+    placeholder: null,
   };
 
   state = {
@@ -33,7 +36,7 @@ class SimpleInput extends Component {
       return;
     }
 
-    const { format, onDateSelected } = this.props;
+    const { format, onDateChange } = this.props;
 
     this.setState(({ selectedDate }) => {
       let newDate = date;
@@ -42,7 +45,7 @@ class SimpleInput extends Component {
         newDate = null;
       }
 
-      onDateSelected(newDate);
+      onDateChange(newDate);
 
       return {
         isCalendarVisible: false,
@@ -65,25 +68,36 @@ class SimpleInput extends Component {
   };
 
   handleDateChange = (evt, { value }) => {
-    const { format, onDateSelected } = this.props;
+    if (!value) {
+      this.setState({
+        selectedDate: null,
+        selectedDateFormatted: '',
+      });
+
+      return;
+    }
+
+    const { format, onDateChange } = this.props;
+    const formatInputValue = formatByPattern(format);
+    const formattedValue = formatInputValue(value.replace(/\D/g, ''));
 
     this.setState({
       selectedDate: null,
-      selectedDateFormatted: value,
+      selectedDateFormatted: formattedValue,
     });
 
-    onDateSelected(null);
+    onDateChange(null);
 
-    if (value.length === format.length) {
-      const newDate = parse(value);
+    if (formattedValue.length === format.length) {
+      const newDate = parse(formattedValue, format, new Date());
 
       if (isValid(newDate)) {
         this.setState({
-          selectedDate: newDate,
           selectedDateFormatted: formatDate(newDate, format),
+          selectedDate: newDate,
         });
 
-        onDateSelected(newDate);
+        onDateChange(newDate);
       }
     }
   };
@@ -94,8 +108,21 @@ class SimpleInput extends Component {
     }));
   };
 
+  get dayzedProps() {
+    return omit(semanticInputProps, this.props);
+  }
+
+  get inputProps() {
+    const props = pick(semanticInputProps, this.props);
+
+    return {
+      ...props,
+      placeholder: props.placeholder || this.props.format,
+    };
+  }
+
   render() {
-    const { date, format, inputProps } = this.props;
+    const { date, fluid } = this.props;
     const {
       isCalendarVisible,
       selectedDate,
@@ -105,18 +132,20 @@ class SimpleInput extends Component {
     return (
       <div id="test">
         <Form.Input
-          icon="calendar"
+          {...this.inputProps}
+          fluid={fluid}
           onBlur={this.handleBlur}
           onChange={this.handleDateChange}
           onClick={this.showCalendar}
-          placeholder={format}
+          icon="calendar"
           value={selectedDateFormatted}
-          {...inputProps}
         />
         {isCalendarVisible && (
           <Portal query="#test">
             <Calendar
+              {...this.dayzedProps}
               date={selectedDate || date}
+              fluid={fluid}
               onDateSelected={this.onDateSelected}
               selected={selectedDate}
             />
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -1,15 +1,60 @@
 import format from 'date-fns/format';
+import isBefore from 'date-fns/is_before';
 import isEqual from 'date-fns/is_equal';
-import startOfTheDay from 'date-fns/start_of_day';
+import startOfDay from 'date-fns/start_of_day';
+
+export const semanticInputProps = [
+  'disabled',
+  'error',
+  'icon',
+  'iconPosition',
+  'label',
+  'labelPosition',
+  'loading',
+  'placeholder',
+  'size',
+  'transparent',
+];
+
+function isSelectable(date, minDate, maxDate) {
+  if (
+    (minDate && isBefore(date, minDate)) ||
+    (maxDate && isBefore(maxDate, date))
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export const getToday = (selected, minDate, maxDate) => {
+  const today = new Date();
 
-export const getToday = selected => {
   return {
-    date: startOfTheDay(new Date()),
-    selectable: true,
-    selected: isEqual(new Date(), selected),
+    date: startOfDay(today),
+    selectable: isSelectable(today, minDate, maxDate),
+    selected: isEqual(today, selected),
     today: true,
   };
 };
 
 export const formatDate = (date, dateFormat) =>
-  date ? format(startOfTheDay(date), dateFormat) : undefined;
+  date ? format(startOfDay(date), dateFormat) : undefined;
+
+export const omit = (keysToOmit, obj) => {
+  const newObj = { ...obj };
+
+  keysToOmit.forEach(key => delete newObj[key]);
+
+  return newObj;
+};
+
+export const pick = (keysToPick, obj) => {
+  const newObj = {};
+
+  keysToPick.forEach(key => {
+    newObj[key] = obj[key];
+  });
+
+  return newObj;
+};
diff --git a/stories/index.js b/stories/index.js
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import Simple from '../src/inputs/simple';
 
 storiesOf('Examples', module)
-  .add('Simple', () => <Simple onDateSelected={alert} />)
+  .add('Simple', () => <Simple onDateChange={console.log} />)
   .add('Simple with custom props', () => (
-    <Simple format="DD/MM/YYYY" onDateSelected={alert} />
+    <Simple format="DD/MM/YYYY" onDateChange={console.log} />
   ));
