From f211a0394c8316eeec4fcd17aaed49ae7e4adaae Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 7 May 2019 14:50:34 +0200 Subject: [PATCH] feat: add #date-picker including the docs and examples --- .../src/pages/uilib/components/date-picker.md | 19 +++-- .../uilib/components/date-picker/Examples.js | 85 +++++++++++++++++++ .../date-picker/date-picker-events.md | 24 ++++++ .../date-picker/date-picker-info.md | 17 ++++ .../date-picker/date-picker-properties.md | 25 ++++++ .../src/components/date-picker/DatePicker.js | 47 +++++----- .../components/date-picker/DatePickerInput.js | 20 ++--- .../dnb-ui-lib/stories/componentsStories.js | 11 +-- 8 files changed, 206 insertions(+), 42 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/Examples.js create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-events.md create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-info.md create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-properties.md diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker.md b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker.md index 253bcd9c698..ae04efcf465 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker.md @@ -1,21 +1,26 @@ --- title: 'DatePicker' draft: false -status: 'wip' +# status: 'imp' # order: 1 --- import Tabs from 'Tags/Tabs' +import DatePickerInfo from 'Pages/uilib/components/date-picker/date-picker-info' +import DatePickerProperties from 'Pages/uilib/components/date-picker/date-picker-properties' +import DatePickerEvents from 'Pages/uilib/components/date-picker/date-picker-events' + # DatePicker - - ... + + + + + - - ... + + - -**Under development** diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/Examples.js new file mode 100644 index 00000000000..44ecc5d8ae2 --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/Examples.js @@ -0,0 +1,85 @@ +/** + * UI lib Component Example + * + */ + +import React, { PureComponent, Fragment } from 'react' +import ComponentBox from '../../../../shared/tags/ComponentBox' + +class Example extends PureComponent { + render() { + return ( + + + {/* @jsx */ ` + { + console.log('on_change', start_date, end_date) + }} + on_submit={({ start_date, end_date }) => { + console.log('on_submit', start_date, end_date) + }} + on_cancel={({ start_date, end_date }) => { + console.log('on_cancel', start_date, end_date) + }} +/> + `} + + + {/* @jsx */ ` + { + console.log('on_change', date) + }} + on_cancel={({ date }) => { + console.log('on_cancel', date) + }} +/> + `} + + + {/* @jsx */ ` + { + console.log('on_change', date) + }} + on_show={({ date }) => { + console.log('on_show', date) + }} +/> + `} + + + {/* @jsx */ ` + { + console.log('on_change', date) + }} + on_hide={({ date }) => { + console.log('on_hide', date) + }} +/> + `} + + + ) + } +} + +export default Example diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-events.md b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-events.md new file mode 100644 index 00000000000..6437e1dfebd --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-events.md @@ -0,0 +1,24 @@ +--- +draft: true +--- + +## Events + +| Events | Description | +| ----------- | ------------------------------------------------------------------------------------------- | +| `on_change` | _(optional)_ will be called on a date change event. Returns an object with a date instance. | +| `on_submit` | _(optional)_ will be called once a user presses the submit button. | +| `on_cancel` | _(optional)_ will be called once a user presses the cancel button. | +| `on_show` | _(optional)_ will be called once date-picker is visible. | +| `on_hide` | _(optional)_ will be called once date-picker is hidden. | + +## Returned Object + +```js +{ + date: "return_format", /* Gets returned if range is true. Same as start_date and startDate */ + start_date: "return_format", + end_date: "return_format", + days_between: number +} +``` diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-info.md b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-info.md new file mode 100644 index 00000000000..861be8db0d7 --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-info.md @@ -0,0 +1,17 @@ +--- +draft: true +--- + +import Examples from 'Pages/uilib/components/date-picker/Examples' + +## Description + +The date-picker component should be used whenever there is to enter a single date or a date range/period with a start and end date. + +### Date Object + +The date-picker operates with a default JavaScript Date instance as well as string (ISO 8601) like `start_date="2019-05-05"`. + +## Demos + + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-properties.md new file mode 100644 index 00000000000..4bcd8a6021e --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-properties.md @@ -0,0 +1,25 @@ +--- +draft: true +--- + +## Properties + +| Properties | Description | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `date` | _(optional)_ defines the pre filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`. | +| `start_date` | _(optional)_ to set the pre filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`. | +| `end_date` | _(optional)_ to set the pre filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`. | +| `return_format` | _(optional)_ Defines how the returned date, as a string, should be formatted as. Defualts to `YYYY-MM-DD`. | +| `range` | _(optional)_ if the date picker should support a range of two dates (starting and ending date). Defaults to `false`. | +| `show_input` | _(optional)_ if the input fields with the mask should be visible. Defaults to `false`. | +| `mask_order` | _(optional)_ to define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy` | +| `opened` | _(optional)_ to open the date-picker by default. Defaults to `false`. | +| `mask_placeholder` | _(optional)_ to display the placeholder on input. Defaults to `dd/mm/åååå`. | +| `hide_navigation` | _(optional)_ if set to `true`, the navigation will be hidden. Defaults to `false`. | +| `hide_days` | _(optional)_ if set to `true`, the week days will be hidden. Defaults to `false`. | +| `show_submit_button` | _(optional)_ if set to `true`, a submit button will be shown. Defaults to `false`. | +| `show_cancel_button` | _(optional)_ if set to `true`, a cancel button will be shown. Defaults to `false`. | +| `link` | _(optional)_ link both calendars, once to user is navigating between months. Only meant to use if range is set to ture. Defaults to `false`. | +| `first_day` | _(optional)_ to define the first day of the week. Defaults to `monday`. | +| `locale` | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` locale object, like `import nbLocale from 'date-fns/locale/nb'`. Defaults to `nb`. | +| `label` | _(optional)_ a prepending label in sync with the date input field. | diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js index 5daf4a5145b..1342b2c3eb6 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js @@ -31,6 +31,10 @@ const renderProps = { export const propTypes = { id: PropTypes.string, + date: PropTypes.oneOfType([ + PropTypes.instanceOf(Date), + PropTypes.string + ]), // e.g. 2019-04-03T00:00:00Z start_date: PropTypes.oneOfType([ PropTypes.instanceOf(Date), PropTypes.string @@ -39,8 +43,8 @@ export const propTypes = { PropTypes.instanceOf(Date), PropTypes.string ]), // e.g. 2019-04-03T00:00:00Z - mask: PropTypes.string, - mask_input: PropTypes.string, + mask_order: PropTypes.string, + mask_placeholder: PropTypes.string, return_format: PropTypes.string, hide_navigation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), hide_days: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -79,10 +83,11 @@ export const propTypes = { export const defaultProps = { id: null, + date: null, start_date: null, end_date: null, - mask: 'dd/mm/yyyy', - mask_input: 'dd/mm/åååå', // have to be same setup as "mask" - but can be like: dd/mm/åååå + mask_order: 'dd/mm/yyyy', + mask_placeholder: 'dd/mm/åååå', // have to be same setup as "mask" - but can be like: dd/mm/åååå return_format: 'YYYY-MM-DD', hide_navigation: false, hide_days: false, @@ -125,8 +130,15 @@ export default class DatePicker extends PureComponent { static getDerivedStateFromProps(props, state) { if (state._listenForPropChanges) { + let startDate = null + if (props.date) { + startDate = props.date + } if (props.start_date) { - state.startDate = DatePicker.convertStringToDate(props.start_date) + startDate = props.start_date + } + if (startDate) { + state.startDate = DatePicker.convertStringToDate(startDate) if (!props.range) { state.endDate = state.startDate } @@ -139,11 +151,8 @@ export default class DatePicker extends PureComponent { return state } - static convertStringToDate(stringDate) { - const date = - typeof stringDate === Date ? stringDate : parse(stringDate) - // new Date(stringDate) - return date + static convertStringToDate(date) { + return typeof date === Date ? date : parse(date) } constructor(props) { @@ -172,8 +181,8 @@ export default class DatePicker extends PureComponent { _listenForPropChanges: true } - const separators = props.mask.match(/[^mdy]/g) - this.maskList = props.mask.split(/[^mdy]/).reduce((acc, cur) => { + const separators = props.mask_order.match(/[^mdy]/g) + this.maskList = props.mask_order.split(/[^mdy]/).reduce((acc, cur) => { acc.push(cur) if (separators.length > 0) { acc.push(separators.shift()) @@ -304,7 +313,6 @@ export default class DatePicker extends PureComponent { opened: true, _listenForPropChanges: false }) - if (this._hideTimeout) { clearTimeout(this._hideTimeout) } @@ -362,8 +370,8 @@ export default class DatePicker extends PureComponent { return this.props.range ? { - startDate, - endDate, + // startDate, + // endDate, days_between: endDate ? differenceInCalendarDays(endDate, startDate) : null, @@ -392,8 +400,8 @@ export default class DatePicker extends PureComponent { status, status_state, status_animation, - mask, - mask_input, + mask_order, + mask_placeholder, start_date: _start_date /* eslint-disable-line */, end_date: _end_date /* eslint-disable-line */, @@ -461,9 +469,8 @@ export default class DatePicker extends PureComponent { { acc.push(cur) @@ -305,8 +305,8 @@ export default class DatePickerInput extends PureComponent { this.refList = [] return this.maskList.map((value, i) => { const state = value.slice(0, 1) - const index = this.props.mask.indexOf(value) - const placeholderChar = this.props.mask_input[index] + const index = this.props.maskOrder.indexOf(value) + const placeholderChar = this.props.maskPlaceholder[index] if (!this.props.separatorRexExp.test(value)) { const params = { onKeyDown: this.onKeyDownHandler, @@ -384,8 +384,8 @@ export default class DatePickerInput extends PureComponent { generateEndDateList() { return this.maskList.map((value, i) => { const state = value.slice(0, 1) - const index = this.props.mask.indexOf(value) - const placeholderChar = this.props.mask_input[index] + const index = this.props.maskOrder.indexOf(value) + const placeholderChar = this.props.maskPlaceholder[index] if (!this.props.separatorRexExp.test(value)) { const params = { onKeyDown: this.onKeyDownHandler, diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js index 7bdfac67ffa..31ab4913279 100644 --- a/packages/dnb-ui-lib/stories/componentsStories.js +++ b/packages/dnb-ui-lib/stories/componentsStories.js @@ -186,9 +186,10 @@ stories.push([ { console.log('on_change', props) @@ -204,7 +205,7 @@ stories.push([ { console.log('on_change', props) }} @@ -225,7 +226,7 @@ stories.push([