fix(DatePicker): shortcut buttons (#2266)

* swap datepicker shortcut toggle buttons out with regular buttons
dnbexperience · May 31, 2023 · 59b174b · 59b174b
1 parent fd5f7a8
commit 59b174b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.js b/packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.js
@@ -6,7 +6,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { convertStringToDate } from './DatePickerCalc'
-import ToggleButton from '../toggle-button/ToggleButton'
+import Button from '../button/Button'
 import DatePickerContext from './DatePickerContext'
 
 export default class DatePickerAddon extends React.PureComponent {
@@ -23,18 +23,16 @@ export default class DatePickerAddon extends React.PureComponent {
   }
 
   state = {
-    currentShortcut: null,
     _listenForPropChanges: true,
   }
 
-  setDate({ value, event }) {
+  setDate({ shortcut, event }) {
     this.setState({
-      currentShortcut: value,
       _listenForPropChanges: false,
     })
 
-    const start_date = value.date || value.start_date
-    const end_date = value.end_date
+    const start_date = shortcut.date || shortcut.start_date
+    const end_date = shortcut.end_date
     const startDate =
       typeof start_date === 'function'
         ? start_date(this.getCurrentDates())
@@ -54,7 +52,7 @@ export default class DatePickerAddon extends React.PureComponent {
       event,
     })
 
-    if (value.close_on_select) {
+    if (shortcut.close_on_select) {
       this.context.hidePicker(event)
     }
   }
@@ -92,14 +90,19 @@ export default class DatePickerAddon extends React.PureComponent {
     }
 
     const shortcutElements = hasShortcuts && (
-      <ToggleButton.Group
-        value={this.state.currentShortcut}
-        on_change={({ value, event }) => this.setDate({ value, event })}
-      >
-        {shortcutsArray.map(({ title, ...rest }, i) => (
-          <ToggleButton key={i} text={title} value={rest} />
-        ))}
-      </ToggleButton.Group>
+      <>
+        {shortcutsArray.map(({ title, ...shortcut }, i) => {
+          return (
+            <Button
+              key={i}
+              text={title}
+              variant="secondary"
+              onClick={(event) => this.setDate({ shortcut, event })}
+              right
+            />
+          )
+        })}
+      </>
     )
 
     return (

diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
@@ -212,9 +212,10 @@ describe('DatePicker component', () => {
     )
 
     Comp.find('button.dnb-button').simulate('click')
-    Comp.find('span.dnb-toggle-button')
+
+    Comp.find('div.dnb-date-picker__addon')
+      .find('.dnb-button--secondary')
       .at(0)
-      .find('button.dnb-button')
       .simulate('click')
     expect(Comp.find('label.dnb-date-picker__header__title').text()).toBe(
       'mai 2020'
@@ -223,9 +224,9 @@ describe('DatePicker component', () => {
     expect(on_change).toBeCalledTimes(1)
 
     // Now, test "close_on_select"
-    Comp.find('span.dnb-toggle-button')
+    Comp.find('div.dnb-date-picker__addon')
+      .find('.dnb-button--secondary')
       .at(1)
-      .find('button.dnb-button')
       .simulate('click')
     expect(Comp.find('label.dnb-date-picker__header__title').text()).toBe(
       'april 2020'