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