Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨Date/Daterange: hideClearButton prop #3537

Merged
merged 1 commit into from
Jun 20, 2024
Merged

✨Date/Daterange: hideClearButton prop #3537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/eds-core-react/src/components/Datepicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
defaultValue,
showTimeInput,
granularity,
hideClearButton,
disabled: isDisabled,
readOnly: isReadOnly,
formatOptions,
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -185,6 +188,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
onChange={_onChange}
rightAdornments={
<Toggle
showClearButton={showClearButton}
setOpen={setIsOpen}
open={isOpen}
icon={calendar}
Expand Down
4 changes: 4 additions & 0 deletions packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const DateRangePicker = forwardRef(
timezone,
defaultValue,
formatOptions,
hideClearButton,
disabled: isDisabled,
readOnly: isReadOnly,
...props
Expand Down Expand Up @@ -138,6 +139,8 @@ export const DateRangePicker = forwardRef(
}
: undefined

const showClearButton = state.dateRange !== null && !hideClearButton

const formattedValue = state.formatValue(locale, {
year: 'numeric',
month: 'short',
Expand Down Expand Up @@ -186,6 +189,7 @@ export const DateRangePicker = forwardRef(
disabled={isDisabled}
rightAdornments={
<Toggle
showClearButton={showClearButton}
buttonProps={buttonProps}
disabled={isDisabled}
readonly={isReadOnly}
Expand Down
36 changes: 20 additions & 16 deletions packages/eds-core-react/src/components/Datepicker/fields/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const Toggle = ({
disabled,
buttonProps,
valueString,
showClearButton,
readonly,
}: {
reset: () => void
Expand All @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions packages/eds-core-react/src/components/Datepicker/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down