✨Date/Daterange: hideClearButton prop (#3537)

also hides clearbutton when no date is set
equinor · Jun 20, 2024 · 619edfb · 619edfb
1 parent a4c180b
commit 619edfb
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/packages/eds-core-react/src/components/Datepicker/DatePicker.tsx b/packages/eds-core-react/src/components/Datepicker/DatePicker.tsx
@@ -47,6 +47,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       defaultValue,
       showTimeInput,
       granularity,
+      hideClearButton,
       disabled: isDisabled,
       readOnly: isReadOnly,
       formatOptions,
@@ -149,6 +150,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         }
       : undefined
 
+    const showClearButton = pickerState.dateValue !== null && !hideClearButton
+
     // innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
     useEffect(() => {
       if (!defaultValue && !value) setInnerValue(null)
@@ -185,6 +188,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             onChange={_onChange}
             rightAdornments={
               <Toggle
+                showClearButton={showClearButton}
                 setOpen={setIsOpen}
                 open={isOpen}
                 icon={calendar}

diff --git a/packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx b/packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx
@@ -43,6 +43,7 @@ export const DateRangePicker = forwardRef(
       timezone,
       defaultValue,
       formatOptions,
+      hideClearButton,
       disabled: isDisabled,
       readOnly: isReadOnly,
       ...props
@@ -138,6 +139,8 @@ export const DateRangePicker = forwardRef(
         }
       : undefined
 
+    const showClearButton = state.dateRange !== null && !hideClearButton
+
     const formattedValue = state.formatValue(locale, {
       year: 'numeric',
       month: 'short',
@@ -186,6 +189,7 @@ export const DateRangePicker = forwardRef(
             disabled={isDisabled}
             rightAdornments={
               <Toggle
+                showClearButton={showClearButton}
                 buttonProps={buttonProps}
                 disabled={isDisabled}
                 readonly={isReadOnly}

diff --git a/packages/eds-core-react/src/components/Datepicker/fields/Toggle.tsx b/packages/eds-core-react/src/components/Datepicker/fields/Toggle.tsx
@@ -22,6 +22,7 @@ export const Toggle = ({
   disabled,
   buttonProps,
   valueString,
+  showClearButton,
   readonly,
 }: {
   reset: () => void
@@ -32,26 +33,29 @@ export const Toggle = ({
   readonly: boolean
   buttonProps: AriaButtonProps
   valueString: string
+  showClearButton: boolean
 }) => {
   return readonly || disabled ? null : (
     <>
-      <StyledButton
-        disabled={disabled}
-        variant={'ghost_icon'}
-        aria-label={'Reset'}
-        onClick={() => {
-          reset()
-        }}
-        onKeyDown={(e: KeyboardEvent) => {
-          if (e.code === 'Enter' || e.code === 'Space') {
-            e.preventDefault()
-            e.stopPropagation()
+      {showClearButton && (
+        <StyledButton
+          disabled={disabled}
+          variant={'ghost_icon'}
+          aria-label={'Reset'}
+          onClick={() => {
             reset()
-          }
-        }}
-      >
-        <Icon data={close} />
-      </StyledButton>
+          }}
+          onKeyDown={(e: KeyboardEvent) => {
+            if (e.code === 'Enter' || e.code === 'Space') {
+              e.preventDefault()
+              e.stopPropagation()
+              reset()
+            }
+          }}
+        >
+          <Icon data={close} />
+        </StyledButton>
+      )}
       <StyledButton
         {...filterDOMProps(buttonProps)}
         disabled={disabled}

diff --git a/packages/eds-core-react/src/components/Datepicker/props.ts b/packages/eds-core-react/src/components/Datepicker/props.ts
@@ -73,6 +73,11 @@ export type DatePickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
      * Whether to allow picking the time as well as the date
      */
     showTimeInput?: boolean
+    /**
+     * hide the clear button even when date is set
+     * @default false
+     */
+    hideClearButton?: boolean
     /**
      * Uncontrolled value
      */