feat(datepicker): Adding new prop allowOnlyNumbers

Author: arthurdenner

package.json

@@ -69,6 +69,7 @@
           "ignoreRestSiblings": true
         }
       ],
+      "complexity": ["error", 10],
       "import/no-unassigned-import": 0,
       "no-console": 1
     }

src/__tests__/utils.test.js

@@ -8,6 +8,7 @@ import {
   isSelectable,
   moveElementsByN,
   omit,
+  onlyNumbers,
   parseFormatString,
   pick,
 } from '../utils';
@@ -152,3 +153,9 @@ describe('parseFormatString', () => {
     expect(parseFormatString('DD/MM/yyyy')).toBe('dd/MM/yyyy');
   });
 });
+
+describe('onlyNumbers', () => {
+  it('should only return numbers', () => {
+    expect(onlyNumbers('ABC-1025.4.8')).toBe('102548');
+  });
+});

src/components/datepicker.js

@@ -7,6 +7,7 @@ import {
   formatSelectedDate,
   moveElementsByN,
   omit,
+  onlyNumbers,
   parseOnBlur,
   pick,
 } from '../utils';
@@ -51,6 +52,7 @@ const semanticInputProps = [
 
 class SemanticDatepicker extends React.Component {
   static propTypes = {
+    allowOnlyNumbers: PropTypes.bool,
     clearable: PropTypes.bool,
     date: PropTypes.instanceOf(Date),
     firstDayOfWeek: PropTypes.number,
@@ -71,6 +73,7 @@ class SemanticDatepicker extends React.Component {
   };
 
   static defaultProps = {
+    allowOnlyNumbers: false,
     clearable: true,
     date: undefined,
     filterDate: () => true,
@@ -269,10 +272,11 @@ class SemanticDatepicker extends React.Component {
   };
 
   handleChange = (evt, { value }) => {
-    const { format, onDateChange } = this.props;
+    const { allowOnlyNumbers, format, onDateChange } = this.props;
     const formatString = this.isRangeInput ? `${format} - ${format}` : format;
+    const typedValue = allowOnlyNumbers ? onlyNumbers(value) : value;
 
-    if (!value) {
+    if (!typedValue) {
       const newState = {
         selectedDate: this.isRangeInput ? [] : null,
         selectedDateFormatted: '',
@@ -289,7 +293,7 @@ class SemanticDatepicker extends React.Component {
     this.setState({
       selectedDate: this.isRangeInput ? [] : null,
       selectedDateFormatted: '',
-      typedValue: formatStringByPattern(formatString, value),
+      typedValue: formatStringByPattern(formatString, typedValue),
     });
   };
 

src/utils.js

@@ -74,3 +74,5 @@ export const parseOnBlur = (typedValue, formatString, isRangeInput) => {
 
   return dateFnsV2.parse(typedValue, parsedFormatString, new Date());
 };
+
+export const onlyNumbers = (value = '') => value.replace(/[^\d]/g, '');

stories/index.js

@@ -30,6 +30,11 @@ storiesOf('Examples', module)
       <SemanticDatepicker onDateChange={console.log} />
     </Content>
   ))
+  .add('Basic with allowOnlyNumbers', () => (
+    <Content>
+      <SemanticDatepicker allowOnlyNumbers onDateChange={console.log} />
+    </Content>
+  ))
   .add('Basic with firstDayOfWeek', () => (
     <Content>
       <SemanticDatepicker firstDayOfWeek={3} onDateChange={console.log} />