IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DateTimePicker: Return cleared value in onChange (#88377)

Browse Source 
* DateTimePicker: Return cleared value in onChange

* Update story
This commit is contained in:
Alex Khomenko 2024-05-28 16:11:15 +02:00 committed by GitHub
parent 12e4a94d63
commit c4aca053e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx
View File

@ -80,7 +80,7 @@ export const widgets: Widgets = {
return (
<DateTimePicker
onChange={(e) => {
props?.setValue(e.format(BasicConfig.widgets.datetime.valueFormat));
props?.setValue(e?.format(BasicConfig.widgets.datetime.valueFormat));
}}
date={dateValue}
/>

12
packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx
View File

@ -58,7 +58,9 @@ export const OnlyWorkingHoursEnabled: StoryFn<typeof DateTimePicker> = ({ label,
showSeconds={showSeconds}
onChange={(newValue) => {
action('on change')(newValue);
setDate(newValue);
if (newValue) {
setDate(newValue);
}
}}
/>
);
@ -81,7 +83,9 @@ export const Basic: StoryFn<typeof DateTimePicker> = ({ label, minDate, maxDate,
clearable={clearable}
onChange={(newValue) => {
action('on change')(newValue);
setDate(newValue);
if (newValue) {
setDate(newValue);
}
}}
/>
);
@ -101,7 +105,9 @@ export const Clearable: StoryFn<typeof DateTimePicker> = ({ label, showSeconds,
clearable={clearable}
onChange={(newValue) => {
action('on change')(newValue);
setDate(newValue);
if (newValue) {
setDate(newValue);
}
}}
/>
);

14
packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
View File

@ -35,7 +35,7 @@ export interface Props {
/** Input date for the component */
date?: DateTime;
/** Callback for returning the selected date */
onChange: (date: DateTime) => void;
onChange: (date?: DateTime) => void;
/** label for the input field */
label?: ReactNode;
/** Set the latest selectable date */
@ -200,15 +200,10 @@ interface DateTimeCalendarProps {
disabledSeconds?: () => number[];
}
interface InputProps {
label?: ReactNode;
date?: DateTime;
type InputProps = Pick<Props, 'onChange' | 'label' | 'date' | 'showSeconds' | 'clearable'> & {
isFullscreen: boolean;
onChange: (date: DateTime) => void;
onOpen: (event: FormEvent<HTMLElement>) => void;
showSeconds?: boolean;
clearable?: boolean;
}
};
type InputState = {
value: string;
@ -249,7 +244,8 @@ const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>(
const clearInternalDate = useCallback(() => {
setInternalDate({ value: '', invalid: false });
}, []);
onChange();
}, [onChange]);
const icon = <Button aria-label="Time picker" icon="calendar-alt" variant="secondary" onClick={onOpen} />;
return (