IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 02:10:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add controls for Date Picker story (#54806)

Browse Source 
Signed-off-by: gefgu <gefgu@hotmail.com>

Signed-off-by: gefgu <gefgu@hotmail.com>
This commit is contained in:
Gustavo Santos 2022-09-07 09:30:46 -03:00 committed by GitHub
parent 8e577ce9fa
commit c56907b879
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.story.tsx
View File

@ -4,28 +4,46 @@ import React, { useState } from 'react';
import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
import { Button } from '../../Button/Button';
import { DatePicker } from './DatePicker';
import { DatePicker, DatePickerProps } from './DatePicker';
import mdx from './DatePicker.mdx';
const meta: ComponentMeta<typeof DatePicker> = {
title: 'Pickers and Editors/TimePickers/Pickers And Editors/DatePicker',
component: DatePicker,
decorators: [withCenteredStory],
argTypes: {
minDate: { control: 'date' },
},
parameters: {
docs: {
page: mdx,
},
controls: {
exclude: ['onChange', 'onClose', 'value', 'isOpen'],
},
},
};
export const Basic = () => {
export const Basic = (args: DatePickerProps) => {
const [date, setDate] = useState<Date>(new Date());
const [open, setOpen] = useState(false);
if (args?.minDate !== undefined) {
args.minDate = new Date(args.minDate);
}
args = {
...args,
isOpen: open,
value: date,
onChange: (newDate) => setDate(newDate),
onClose: () => setOpen(false),
};
return (
<>
<Button onClick={() => setOpen(true)}>Show Calendar</Button>
<DatePicker isOpen={open} value={date} onChange={(newDate) => setDate(newDate)} onClose={() => setOpen(false)} />
<DatePicker {...args} />
</>
);
};