From 267723ddf2a78af3000b64589a2dcfb4b7e50681 Mon Sep 17 00:00:00 2001 From: jalavosus Date: Thu, 21 Feb 2019 18:54:30 -0500 Subject: [PATCH 1/3] Add clearOnSameDateSelect prop to basic datepicker. This prop, if `false`, will prevent the component's state from resetting if the same date is clicked in succession. So as to not break previous or expected default behavior, the default value of this prop is `true`. --- src/components/datepicker.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/datepicker.js b/src/components/datepicker.js index 6244f45d..c46a6bdb 100644 --- a/src/components/datepicker.js +++ b/src/components/datepicker.js @@ -60,6 +60,7 @@ class SemanticDatepicker extends React.Component { format: PropTypes.string, keepOpenOnClear: PropTypes.bool, keepOpenOnSelect: PropTypes.bool, + clearOnSameDateClick: PropTypes.bool, locale: PropTypes.object, onBlur: PropTypes.func, onDateChange: PropTypes.func.isRequired, @@ -83,6 +84,7 @@ class SemanticDatepicker extends React.Component { format: 'YYYY-MM-DD', keepOpenOnClear: false, keepOpenOnSelect: false, + clearOnSameDateClick: true, locale: localeEn, onBlur: () => {}, placeholder: null, @@ -222,11 +224,28 @@ class SemanticDatepicker extends React.Component { }; handleBasicInput = newDate => { - const { format, keepOpenOnSelect, onDateChange } = this.props; + const { + format, + keepOpenOnSelect, + onDateChange, + clearOnSameDateClick, + } = this.props; if (!newDate) { - this.resetState(); - + // if clearOnSameDateClick is true (this is the default case) + // then reset the state. This is what was previously the default + // behavior, without a specific prop. + if (clearOnSameDateClick) { + this.resetState(); + } else { + // Don't reset the state. Instead, close or keep open the + // datepicker according to the value of keepOpenOnSelect. + // Essentially, follow the default behavior of clicking a date + // but without changing the value in state. + this.setState({ + isVisible: keepOpenOnSelect, + }); + } return; } @@ -322,7 +341,6 @@ class SemanticDatepicker extends React.Component { typedValue, } = this.state; const { clearable, locale, pointing, filterDate } = this.props; - return (
Date: Thu, 21 Feb 2019 18:57:01 -0500 Subject: [PATCH 2/3] Add storybook entry for the clearOnSameDateClick prop being equal to `false`. --- stories/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/stories/index.js b/stories/index.js index 573afe63..8ccf5abf 100644 --- a/stories/index.js +++ b/stories/index.js @@ -30,11 +30,19 @@ storiesOf('Examples', module) )) - .add('Basic Readonly', () => ( + .add('Basic with readOnly', () => ( )) + .add('Basic with clearOnSameDateClick={false}', () => ( + + + + )) .add('Basic with allowOnlyNumbers', () => ( From 4ba71736c271434c7e4b11826a277b0e5d2c4044 Mon Sep 17 00:00:00 2001 From: jalavosus Date: Thu, 21 Feb 2019 18:59:34 -0500 Subject: [PATCH 3/3] Updated README.md to reflect clearOnSameDateClick prop. --- README.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 8d06264d..fbc0adcd 100644 --- a/README.md +++ b/README.md @@ -69,18 +69,19 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh). ### Own Props -| property | type | required | default | description | -| ---------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -| clearable | boolean | no | true | Allows the user to clear the value | -| format | string | no | 'YYYY-MM-DD' | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) | -| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked | -| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected | -| locale | object | no | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales! | -| onDateChange | function | yes | | Callback fired when the value changes | -| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' | -| filterDate | function | no | () => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not | -| selected | Date, arrayOf(Date) | no | | Default date selected | -| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' | +| property | type | required | default | description | +| -------------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | +| clearable | boolean | no | true | Allows the user to clear the value | +| format | string | no | 'YYYY-MM-DD' | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) | +| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked | +| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected | +| locale | object | no | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales! | +| onDateChange | function | yes | | Callback fired when the value changes | +| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' | +| filterDate | function | no | () => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not | +| selected | Date, arrayOf(Date) | no | | Default date selected | +| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' | +| clearOnSameDateClick | boolean | no | true | Controls whether the datepicker's state resets if the same date is selected in succession. | ### Form.Input Props