Skip to content

Commit 3b62f38

Browse files
jalavosusarthurdenner
jalavosus
authored and
arthurdenner
committed
feat(datepicker): Add clearOnSameDateClick prop (#25)
* 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`. * Add storybook entry for the clearOnSameDateClick prop being equal to `false`. * Updated README.md to reflect clearOnSameDateClick prop.
1 parent 371eac7 commit 3b62f38

File tree

3 files changed

+44
-17
lines changed

3 files changed

+44
-17
lines changed

‎README.md‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -69,18 +69,19 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
6969

7070
### Own Props
7171

72-
| property | type | required | default | description |
73-
| ---------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
74-
| clearable | boolean | no | true | Allows the user to clear the value |
75-
| 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) |
76-
| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked |
77-
| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected |
78-
| 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! |
79-
| onDateChange | function | yes | | Callback fired when the value changes |
80-
| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' |
81-
| filterDate | function | no | () => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not |
82-
| selected | Date, arrayOf(Date) | no | | Default date selected |
83-
| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
72+
| property | type | required | default | description |
73+
| -------------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
74+
| clearable | boolean | no | true | Allows the user to clear the value |
75+
| 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) |
76+
| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked |
77+
| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected |
78+
| 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! |
79+
| onDateChange | function | yes | | Callback fired when the value changes |
80+
| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' |
81+
| filterDate | function | no | () => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not |
82+
| selected | Date, arrayOf(Date) | no | | Default date selected |
83+
| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
84+
| clearOnSameDateClick | boolean | no | true | Controls whether the datepicker's state resets if the same date is selected in succession. |
8485

8586
### Form.Input Props
8687

‎src/components/datepicker.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ class SemanticDatepicker extends React.Component {
6060
format: PropTypes.string,
6161
keepOpenOnClear: PropTypes.bool,
6262
keepOpenOnSelect: PropTypes.bool,
63+
clearOnSameDateClick: PropTypes.bool,
6364
locale: PropTypes.object,
6465
onBlur: PropTypes.func,
6566
onDateChange: PropTypes.func.isRequired,
@@ -83,6 +84,7 @@ class SemanticDatepicker extends React.Component {
8384
format: 'YYYY-MM-DD',
8485
keepOpenOnClear: false,
8586
keepOpenOnSelect: false,
87+
clearOnSameDateClick: true,
8688
locale: localeEn,
8789
onBlur: () => {},
8890
placeholder: null,
@@ -222,11 +224,28 @@ class SemanticDatepicker extends React.Component {
222224
};
223225

224226
handleBasicInput = newDate => {
225-
const { format, keepOpenOnSelect, onDateChange } = this.props;
227+
const {
228+
format,
229+
keepOpenOnSelect,
230+
onDateChange,
231+
clearOnSameDateClick,
232+
} = this.props;
226233

227234
if (!newDate) {
228-
this.resetState();
229-
235+
// if clearOnSameDateClick is true (this is the default case)
236+
// then reset the state. This is what was previously the default
237+
// behavior, without a specific prop.
238+
if (clearOnSameDateClick) {
239+
this.resetState();
240+
} else {
241+
// Don't reset the state. Instead, close or keep open the
242+
// datepicker according to the value of keepOpenOnSelect.
243+
// Essentially, follow the default behavior of clicking a date
244+
// but without changing the value in state.
245+
this.setState({
246+
isVisible: keepOpenOnSelect,
247+
});
248+
}
230249
return;
231250
}
232251

@@ -322,7 +341,6 @@ class SemanticDatepicker extends React.Component {
322341
typedValue,
323342
} = this.state;
324343
const { clearable, locale, pointing, filterDate } = this.props;
325-
326344
return (
327345
<div
328346
className="field"

‎stories/index.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,19 @@ storiesOf('Examples', module)
3030
<SemanticDatepicker onDateChange={console.log} />
3131
</Content>
3232
))
33-
.add('Basic Readonly', () => (
33+
.add('Basic with readOnly', () => (
3434
<Content>
3535
<SemanticDatepicker onDateChange={console.log} readOnly={true} />
3636
</Content>
3737
))
38+
.add('Basic with clearOnSameDateClick={false}', () => (
39+
<Content>
40+
<SemanticDatepicker
41+
onDateChange={console.log}
42+
clearOnSameDateClick={false}
43+
/>
44+
</Content>
45+
))
3846
.add('Basic with allowOnlyNumbers', () => (
3947
<Content>
4048
<SemanticDatepicker allowOnlyNumbers onDateChange={console.log} />

0 commit comments

Comments
 (0)