From 3fba49fc451f33c5876a4d9982f094c8fe6f023d Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Fri, 10 Jul 2020 18:50:34 -0400 Subject: [PATCH 01/12] Add custom input support and documentation --- README.md | 2 ++ src/DateInput.jsx | 6 +++++ src/DateInput/NativeInput.jsx | 51 +++++++++++++++++++++-------------- 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index f9bef0c36..295ed65bb 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,8 @@ Displays an input field complete with custom inputs, native input, and a calenda |clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`| |clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|| |closeCalendar|Whether to close the calendar on value selection.|`true`|`false`| +|customInput|Custom input component. Note that many attributes will be overriden to provide react-date-picker functionality. See customInputOverrides to control this.||| +|customInputOverrides|Tell react-date-picker to not override these attributes with its own custom attributes. Note this may result in loss of functionality. Exception is the style attribute; the style properties will be appended or overriden.|[]|['style']| |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`| |dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`| |disabled|Whether the date picker should be disabled.|`false`|`true`| diff --git a/src/DateInput.jsx b/src/DateInput.jsx index 78844ef90..67af559d5 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -547,6 +547,8 @@ export default class DateInput extends PureComponent { name, nativeInputAriaLabel, required, + customInput, + customInputOverrides } = this.props; const { value } = this.state; @@ -554,6 +556,8 @@ export default class DateInput extends PureComponent { - ); + const inputProps = { + ['aria-label']: ariaLabel, + disabled, + max: maxDate ? nativeValueParser(maxDate) : null, + min: minDate ? nativeValueParser(minDate) : null, + name, + onChange, + onFocus: stopPropagation, + required, + style: { + visibility: 'hidden', + position: 'absolute', + top: '-9999px', + left: '-9999px', + }, + type: nativeInputType, + value: value ? nativeValueParser(value) : '' + } + + const filteredInputProps = Object.keys(inputProps) + .reduce((obj, key) => { + return customInputOverrides.includes(key) ? + { ...obj } : + { ...obj, [key]: inputProps[key] } + }, {}); + + const InputComponent = customInput ? customInput : ; + + return } NativeInput.propTypes = { From c2a5c60fad1ef72adb99006b61a3be2396e7e8da Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Fri, 10 Jul 2020 19:07:11 -0400 Subject: [PATCH 02/12] Reorder property --- src/DateInput.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/DateInput.jsx b/src/DateInput.jsx index 67af559d5..0e26f3c58 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -601,6 +601,8 @@ const isValue = PropTypes.oneOfType([ DateInput.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string.isRequired, + customInput: PropTypes.element, + customInputOverrides: PropTypes.arrayOf(PropTypes.string), dayAriaLabel: PropTypes.string, dayPlaceholder: PropTypes.string, disabled: PropTypes.bool, @@ -623,7 +625,5 @@ DateInput.propTypes = { PropTypes.arrayOf(isValue), ]), yearAriaLabel: PropTypes.string, - yearPlaceholder: PropTypes.string, - customInput: PropTypes.element, - customInputOverrides: PropTypes.arrayOf(PropTypes.string) + yearPlaceholder: PropTypes.string }; From 8dce1b9244d84e8e52359e8768ddc86220f4e854 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Fri, 10 Jul 2020 19:29:49 -0400 Subject: [PATCH 03/12] Add custom input styling option --- README.md | 3 ++- src/DateInput.jsx | 5 ++++- src/DateInput/NativeInput.jsx | 28 +++++++++++++++++----------- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 295ed65bb..53cb5ac7f 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,8 @@ Displays an input field complete with custom inputs, native input, and a calenda |clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|
  • String: `"Clear"`
  • React element: ``
| |closeCalendar|Whether to close the calendar on value selection.|`true`|`false`| |customInput|Custom input component. Note that many attributes will be overriden to provide react-date-picker functionality. See customInputOverrides to control this.||| -|customInputOverrides|Tell react-date-picker to not override these attributes with its own custom attributes. Note this may result in loss of functionality. Exception is the style attribute; the style properties will be appended or overriden.|[]|['style']| +|customInputStyle|Custom input style property. This will be merged with the existing default style.|{}|{ color: 'red' }| +|customInputOverrides|Tell react-date-picker to not override these attributes with its own custom attributes. Note this may result in loss of functionality.|[]|['aria-label']| |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`| |dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`| |disabled|Whether the date picker should be disabled.|`false`|`true`| diff --git a/src/DateInput.jsx b/src/DateInput.jsx index 0e26f3c58..044976c8f 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -548,7 +548,8 @@ export default class DateInput extends PureComponent { nativeInputAriaLabel, required, customInput, - customInputOverrides + customInputOverrides, + customInputStyle } = this.props; const { value } = this.state; @@ -557,6 +558,7 @@ export default class DateInput extends PureComponent { key="date" ariaLabel={nativeInputAriaLabel} customInput={customInput} + customInputStyle={customInputStyle} customInputOverrides={customInputOverrides} disabled={disabled} maxDate={maxDate || defaultMaxDate} @@ -602,6 +604,7 @@ DateInput.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string.isRequired, customInput: PropTypes.element, + customInputStyle: PropTypes.object, customInputOverrides: PropTypes.arrayOf(PropTypes.string), dayAriaLabel: PropTypes.string, dayPlaceholder: PropTypes.string, diff --git a/src/DateInput/NativeInput.jsx b/src/DateInput/NativeInput.jsx index ef5a8b33f..e07ae308c 100644 --- a/src/DateInput/NativeInput.jsx +++ b/src/DateInput/NativeInput.jsx @@ -10,8 +10,9 @@ import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes'; export default function NativeInput({ ariaLabel, - customInput, - customInputOverrides, + customInput = , + customInputStyle = {}, + customInputOverrides = [], disabled, maxDate, minDate, @@ -54,6 +55,14 @@ export default function NativeInput({ event.stopPropagation(); } + const inputStyle = { + visibility: 'hidden', + position: 'absolute', + top: '-9999px', + left: '-9999px', + ...customInputStyle + } + const inputProps = { ['aria-label']: ariaLabel, disabled, @@ -63,30 +72,27 @@ export default function NativeInput({ onChange, onFocus: stopPropagation, required, - style: { - visibility: 'hidden', - position: 'absolute', - top: '-9999px', - left: '-9999px', - }, type: nativeInputType, value: value ? nativeValueParser(value) : '' } const filteredInputProps = Object.keys(inputProps) .reduce((obj, key) => { - return customInputOverrides.includes(key) ? + return customInputOverrides && customInputOverrides.includes(key) ? { ...obj } : { ...obj, [key]: inputProps[key] } }, {}); - const InputComponent = customInput ? customInput : ; + const InputComponent = customInput; - return + return } NativeInput.propTypes = { ariaLabel: PropTypes.string, + customInput: PropTypes.element, + customInputStyle: PropTypes.object, + customInputOverrides: PropTypes.arrayOf(PropTypes.string), disabled: PropTypes.bool, maxDate: isMaxDate, minDate: isMinDate, From 4411f2cd770dc075d3d0e08bd5507e1b1872ed85 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sat, 11 Jul 2020 08:22:29 -0400 Subject: [PATCH 04/12] Fix build errors and linter checks --- README.md | 2 +- src/DateInput.jsx | 10 ++-- src/DateInput/NativeInput.jsx | 86 +++++++++++++++++------------------ 3 files changed, 49 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 53cb5ac7f..d89d84ded 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ Displays an input field complete with custom inputs, native input, and a calenda |clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`| |clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|
  • String: `"Clear"`
  • React element: ``
| |closeCalendar|Whether to close the calendar on value selection.|`true`|`false`| -|customInput|Custom input component. Note that many attributes will be overriden to provide react-date-picker functionality. See customInputOverrides to control this.||| +|customInput|Custom input component function. Note that many attributes will be overriden to provide react-date-picker functionality. See customInputOverrides to control this.|() => |() => | |customInputStyle|Custom input style property. This will be merged with the existing default style.|{}|{ color: 'red' }| |customInputOverrides|Tell react-date-picker to not override these attributes with its own custom attributes. Note this may result in loss of functionality.|[]|['aria-label']| |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`| diff --git a/src/DateInput.jsx b/src/DateInput.jsx index 044976c8f..cf5575872 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -549,7 +549,7 @@ export default class DateInput extends PureComponent { required, customInput, customInputOverrides, - customInputStyle + customInputStyle, } = this.props; const { value } = this.state; @@ -558,8 +558,8 @@ export default class DateInput extends PureComponent { key="date" ariaLabel={nativeInputAriaLabel} customInput={customInput} - customInputStyle={customInputStyle} customInputOverrides={customInputOverrides} + customInputStyle={customInputStyle} disabled={disabled} maxDate={maxDate || defaultMaxDate} minDate={minDate || defaultMinDate} @@ -603,9 +603,9 @@ const isValue = PropTypes.oneOfType([ DateInput.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string.isRequired, - customInput: PropTypes.element, - customInputStyle: PropTypes.object, + customInput: PropTypes.func, customInputOverrides: PropTypes.arrayOf(PropTypes.string), + customInputStyle: PropTypes.objectOf(PropTypes.any), dayAriaLabel: PropTypes.string, dayPlaceholder: PropTypes.string, disabled: PropTypes.bool, @@ -628,5 +628,5 @@ DateInput.propTypes = { PropTypes.arrayOf(isValue), ]), yearAriaLabel: PropTypes.string, - yearPlaceholder: PropTypes.string + yearPlaceholder: PropTypes.string, }; diff --git a/src/DateInput/NativeInput.jsx b/src/DateInput/NativeInput.jsx index e07ae308c..51846b9ea 100644 --- a/src/DateInput/NativeInput.jsx +++ b/src/DateInput/NativeInput.jsx @@ -8,9 +8,38 @@ import { import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes'; +const nativeInputType = (valueType) => { + switch (valueType) { + case 'decade': + case 'year': + return 'number'; + case 'month': + return 'month'; + case 'day': + return 'date'; + default: + throw new Error('Invalid valueType.'); + } +}; + +const nativeValueParser = (valueType) => { + switch (valueType) { + case 'century': + case 'decade': + case 'year': + return getYear; + case 'month': + return getISOLocalMonth; + case 'day': + return getISOLocalDate; + default: + throw new Error('Invalid valueType.'); + } +}; + export default function NativeInput({ ariaLabel, - customInput = , + customInput = () => , customInputStyle = {}, customInputOverrides = [], disabled, @@ -22,34 +51,6 @@ export default function NativeInput({ value, valueType, }) { - const nativeInputType = (() => { - switch (valueType) { - case 'decade': - case 'year': - return 'number'; - case 'month': - return 'month'; - case 'day': - return 'date'; - default: - throw new Error('Invalid valueType.'); - } - })(); - - const nativeValueParser = (() => { - switch (valueType) { - case 'century': - case 'decade': - case 'year': - return getYear; - case 'month': - return getISOLocalMonth; - case 'day': - return getISOLocalDate; - default: - throw new Error('Invalid valueType.'); - } - })(); function stopPropagation(event) { event.stopPropagation(); @@ -60,11 +61,11 @@ export default function NativeInput({ position: 'absolute', top: '-9999px', left: '-9999px', - ...customInputStyle - } + ...customInputStyle, + }; const inputProps = { - ['aria-label']: ariaLabel, + 'aria-label': ariaLabel, disabled, max: maxDate ? nativeValueParser(maxDate) : null, min: minDate ? nativeValueParser(minDate) : null, @@ -72,27 +73,26 @@ export default function NativeInput({ onChange, onFocus: stopPropagation, required, - type: nativeInputType, - value: value ? nativeValueParser(value) : '' - } + type: nativeInputType(valueType), + value: value ? nativeValueParser(valueType)(value) : '', + }; const filteredInputProps = Object.keys(inputProps) - .reduce((obj, key) => { - return customInputOverrides && customInputOverrides.includes(key) ? - { ...obj } : - { ...obj, [key]: inputProps[key] } - }, {}); + .reduce((obj, key) => customInputOverrides && customInputOverrides.includes(key) + ? { ...obj } + : { ...obj, [key]: inputProps[key] }, + {}); const InputComponent = customInput; - return + return ; } NativeInput.propTypes = { ariaLabel: PropTypes.string, - customInput: PropTypes.element, - customInputStyle: PropTypes.object, + customInput: PropTypes.func, customInputOverrides: PropTypes.arrayOf(PropTypes.string), + customInputStyle: PropTypes.objectOf(PropTypes.any), disabled: PropTypes.bool, maxDate: isMaxDate, minDate: isMinDate, From 29eb2ae05c64d0538463313efaa91c71f69c8c77 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sat, 11 Jul 2020 08:31:24 -0400 Subject: [PATCH 05/12] Fix syntax error and build errors --- src/DateInput/NativeInput.jsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/DateInput/NativeInput.jsx b/src/DateInput/NativeInput.jsx index 51846b9ea..d45447255 100644 --- a/src/DateInput/NativeInput.jsx +++ b/src/DateInput/NativeInput.jsx @@ -52,10 +52,6 @@ export default function NativeInput({ valueType, }) { - function stopPropagation(event) { - event.stopPropagation(); - } - const inputStyle = { visibility: 'hidden', position: 'absolute', @@ -67,20 +63,20 @@ export default function NativeInput({ const inputProps = { 'aria-label': ariaLabel, disabled, - max: maxDate ? nativeValueParser(maxDate) : null, - min: minDate ? nativeValueParser(minDate) : null, + max: maxDate ? nativeValueParser(valueType)(maxDate) : null, + min: minDate ? nativeValueParser(valueType)(minDate) : null, name, onChange, - onFocus: stopPropagation, + onFocus: (event) => event.stopPropagation(), required, type: nativeInputType(valueType), value: value ? nativeValueParser(valueType)(value) : '', }; const filteredInputProps = Object.keys(inputProps) - .reduce((obj, key) => customInputOverrides && customInputOverrides.includes(key) + .reduce((obj, key) => (customInputOverrides && customInputOverrides.includes(key) ? { ...obj } - : { ...obj, [key]: inputProps[key] }, + : { ...obj, [key]: inputProps[key] }), {}); const InputComponent = customInput; From 015a97fd2e1eba8dd348dd5d3daf7169f210ffc7 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sat, 11 Jul 2020 08:33:42 -0400 Subject: [PATCH 06/12] Fix lint error --- src/DateInput/NativeInput.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/DateInput/NativeInput.jsx b/src/DateInput/NativeInput.jsx index d45447255..8253a27bc 100644 --- a/src/DateInput/NativeInput.jsx +++ b/src/DateInput/NativeInput.jsx @@ -67,7 +67,7 @@ export default function NativeInput({ min: minDate ? nativeValueParser(valueType)(minDate) : null, name, onChange, - onFocus: (event) => event.stopPropagation(), + onFocus: event => event.stopPropagation(), required, type: nativeInputType(valueType), value: value ? nativeValueParser(valueType)(value) : '', @@ -82,6 +82,7 @@ export default function NativeInput({ const InputComponent = customInput; return ; + } NativeInput.propTypes = { From 45c84c398644553b45079b4af4734aeb03e6e494 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sat, 11 Jul 2020 08:38:50 -0400 Subject: [PATCH 07/12] Fix lint error again --- src/DateInput/NativeInput.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/DateInput/NativeInput.jsx b/src/DateInput/NativeInput.jsx index 8253a27bc..83b9ee7e5 100644 --- a/src/DateInput/NativeInput.jsx +++ b/src/DateInput/NativeInput.jsx @@ -51,7 +51,6 @@ export default function NativeInput({ value, valueType, }) { - const inputStyle = { visibility: 'hidden', position: 'absolute', @@ -82,7 +81,6 @@ export default function NativeInput({ const InputComponent = customInput; return ; - } NativeInput.propTypes = { From 33ef61cc81a7fd6e7fa185e5c4d735b097ab07f1 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sat, 11 Jul 2020 23:14:35 -0400 Subject: [PATCH 08/12] Implement React slot pattern --- README.md | 2 +- src/DateInput.jsx | 2 +- src/DateInput/NativeInput.jsx | 8 +++----- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d89d84ded..e5d1a2d0a 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ Displays an input field complete with custom inputs, native input, and a calenda |clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`| |clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|
  • String: `"Clear"`
  • React element: ``
| |closeCalendar|Whether to close the calendar on value selection.|`true`|`false`| -|customInput|Custom input component function. Note that many attributes will be overriden to provide react-date-picker functionality. See customInputOverrides to control this.|() => |() => | +|customInput|Custom input component function. Note that many attributes will be overriden to provide react-date-picker functionality. See customInputOverrides to control this.||| |customInputStyle|Custom input style property. This will be merged with the existing default style.|{}|{ color: 'red' }| |customInputOverrides|Tell react-date-picker to not override these attributes with its own custom attributes. Note this may result in loss of functionality.|[]|['aria-label']| |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`| diff --git a/src/DateInput.jsx b/src/DateInput.jsx index cf5575872..ad27beb12 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -603,7 +603,7 @@ const isValue = PropTypes.oneOfType([ DateInput.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string.isRequired, - customInput: PropTypes.func, + customInput: PropTypes.element, customInputOverrides: PropTypes.arrayOf(PropTypes.string), customInputStyle: PropTypes.objectOf(PropTypes.any), dayAriaLabel: PropTypes.string, diff --git a/src/DateInput/NativeInput.jsx b/src/DateInput/NativeInput.jsx index 83b9ee7e5..6e1e048eb 100644 --- a/src/DateInput/NativeInput.jsx +++ b/src/DateInput/NativeInput.jsx @@ -39,7 +39,7 @@ const nativeValueParser = (valueType) => { export default function NativeInput({ ariaLabel, - customInput = () => , + customInput = , customInputStyle = {}, customInputOverrides = [], disabled, @@ -78,14 +78,12 @@ export default function NativeInput({ : { ...obj, [key]: inputProps[key] }), {}); - const InputComponent = customInput; - - return ; + return <>{React.cloneElement(customInput, { ...filteredInputProps, style: inputStyle })} } NativeInput.propTypes = { ariaLabel: PropTypes.string, - customInput: PropTypes.func, + customInput: PropTypes.element, customInputOverrides: PropTypes.arrayOf(PropTypes.string), customInputStyle: PropTypes.objectOf(PropTypes.any), disabled: PropTypes.bool, From 4a99d1a01cd5b460bfe46e324b86831c771f4c6b Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sat, 11 Jul 2020 23:53:46 -0400 Subject: [PATCH 09/12] Fix missing semicolon --- src/DateInput/NativeInput.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DateInput/NativeInput.jsx b/src/DateInput/NativeInput.jsx index 6e1e048eb..ce8b64dba 100644 --- a/src/DateInput/NativeInput.jsx +++ b/src/DateInput/NativeInput.jsx @@ -78,7 +78,7 @@ export default function NativeInput({ : { ...obj, [key]: inputProps[key] }), {}); - return <>{React.cloneElement(customInput, { ...filteredInputProps, style: inputStyle })} + return <>{React.cloneElement(customInput, { ...filteredInputProps, style: inputStyle })}; } NativeInput.propTypes = { From 601b210e09a43e41823aef27adb570ec3544a450 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sun, 12 Jul 2020 00:15:53 -0400 Subject: [PATCH 10/12] Fix codeclimate error --- src/DateInput.jsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/DateInput.jsx b/src/DateInput.jsx index ad27beb12..bed3b2a41 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -540,17 +540,8 @@ export default class DateInput extends PureComponent { } renderNativeInput() { - const { - disabled, - maxDate, - minDate, - name, - nativeInputAriaLabel, - required, - customInput, - customInputOverrides, - customInputStyle, - } = this.props; + const { disabled, maxDate, minDate, name, nativeInputAriaLabel, + required, customInput, customInputOverrides, customInputStyle } = this.props; const { value } = this.state; return ( From 3ce2d97bd3767e31405a56b3afe907c14e039a0d Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sun, 12 Jul 2020 01:41:03 -0400 Subject: [PATCH 11/12] Fix lint error --- src/DateInput.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/DateInput.jsx b/src/DateInput.jsx index bed3b2a41..50f3e967a 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -540,8 +540,8 @@ export default class DateInput extends PureComponent { } renderNativeInput() { - const { disabled, maxDate, minDate, name, nativeInputAriaLabel, - required, customInput, customInputOverrides, customInputStyle } = this.props; + const { disabled, maxDate, minDate, name, nativeInputAriaLabel } = this.props; + const { required, customInput, customInputOverrides, customInputStyle } = this.props; const { value } = this.state; return ( From 71a5dd8bdc24e3d07080f77f90656019c251c8f5 Mon Sep 17 00:00:00 2001 From: Brian Lim Date: Sun, 12 Jul 2020 01:43:35 -0400 Subject: [PATCH 12/12] Fix lint error again --- src/DateInput.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/DateInput.jsx b/src/DateInput.jsx index 50f3e967a..15e57bcbe 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -540,8 +540,9 @@ export default class DateInput extends PureComponent { } renderNativeInput() { - const { disabled, maxDate, minDate, name, nativeInputAriaLabel } = this.props; - const { required, customInput, customInputOverrides, customInputStyle } = this.props; + const { disabled, maxDate, minDate } = this.props; + const { name, nativeInputAriaLabel, required } = this.props; + const { customInput, customInputOverrides, customInputStyle } = this.props; const { value } = this.state; return (