diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/date-picker-events.md b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/date-picker-events.md index 19788a1a955..d6e42c8190b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/date-picker-events.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/date-picker-events.md @@ -15,6 +15,7 @@ draft: true ## Returned Object The type of native event will depend on the interaction. +All additional HTML attributes will be returned as well. ```js { @@ -22,6 +23,7 @@ The type of native event will depend on the interaction. start_date: null|"return_format", end_date: null|"return_format", days_between: number, + attributes: { attributes }, event: null|{ native event } } ``` 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 f7b33135e7f..858730994ee 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js @@ -453,9 +453,12 @@ export default class DatePicker extends PureComponent { getReturnObject({ event = null } = {}) { const { startDate, endDate } = this.state + const attributes = this.attributes || {} + return isTrue(this.props.range) ? { event, + attributes, days_between: endDate ? differenceInCalendarDays(endDate, startDate) : null, @@ -466,7 +469,11 @@ export default class DatePicker extends PureComponent { ? format(endDate, this.props.return_format) : null } - : { event, date: format(startDate, this.props.return_format) } + : { + event, + attributes, + date: format(startDate, this.props.return_format) + } } render() { @@ -541,7 +548,8 @@ export default class DatePicker extends PureComponent { pickerParams['aria-labelledby'] = id + '-label' } - const inputParams = { ['aria-expanded']: opened, ...attributes } + const inputParams = { ...attributes } + const submitParams = { ['aria-expanded']: opened } const mainParams = { className: classnames( @@ -559,8 +567,12 @@ export default class DatePicker extends PureComponent { } validateDOMAttributes(this.props, inputParams) + validateDOMAttributes(null, submitParams) validateDOMAttributes(null, pickerParams) + // make it pissible to grapt the rest attributes and return it with all events + this.attributes = inputParams + return ( {(label && ( @@ -599,6 +611,7 @@ export default class DatePicker extends PureComponent { status_state={status_state} // status_animation={status_animation} {...inputParams} + submitAttributes={submitParams} onChange={this.onInputChange} onFocus={this.showPicker} onSubmit={this.togglePicker} diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js index f95ca179402..e2d29580976 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js @@ -29,6 +29,7 @@ export const propTypes = { separatorRexExp: PropTypes.instanceOf(RegExp), minDate: PropTypes.instanceOf(Date), maxDate: PropTypes.instanceOf(Date), + submitAttributes: PropTypes.object, range: PropTypes.bool, status: PropTypes.string, status_state: PropTypes.string, @@ -47,6 +48,7 @@ export const defaultProps = { maskOrder: 'dd/mm/yyyy', maskPlaceholder: 'dd/mm/åååå', separatorRexExp: /[-/ ]/g, + submitAttributes: null, range: null, status: null, status_state: 'error', @@ -486,6 +488,7 @@ export default class DatePickerInput extends PureComponent { const { id, + submitAttributes, range /* eslint-disable-line */, maskOrder /* eslint-disable-line */, maskPlaceholder /* eslint-disable-line */, @@ -506,12 +509,13 @@ export default class DatePickerInput extends PureComponent { status_state, status_animation, - ...rest + ...attributes } = this.props const { focusState } = this.state - validateDOMAttributes(this.props, rest) + validateDOMAttributes(this.props, attributes) + validateDOMAttributes(null, submitAttributes) return ( } + {...attributes} /> ) } diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js b/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js index a8e76ffbf0f..e94dc12c4ad 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js @@ -175,6 +175,15 @@ describe('DatePicker component', () => { }) }) + it('has to return all additional attributes the event return', () => { + const my_event = jest.fn() + const params = { 'data-attr': 'value' } + const Comp = mount() + Comp.find('button').simulate('click') + expect(my_event.mock.calls.length).toBe(1) + expect(my_event.mock.calls[0][0].attributes).toMatchObject(params) + }) + it('is displaying correct month', () => { expect( Comp.find('.dnb-date-picker__header__title') diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 7e813cb6be3..61a14dee868 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -86,7 +86,6 @@ exports[`DatePicker component have to match snapshot 1`] = ` className="dnb-date-picker__shell" >