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

Storybook: add controls support + remove UseState from RelativeTimeRangePicker story (#53459)

Browse Source 
* add controls support + remove UseState from RelativeTimeRangePicker story

* don't need this displayName

* exclude onChange
This commit is contained in:
Ashley Harrison 2022-08-10 08:55:22 +01:00 committed by GitHub
parent 742686bab1
commit d38e86f3a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx
View File

@ -1,8 +1,8 @@
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { ComponentMeta } from '@storybook/react'; import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react'; import React from 'react';
import { UseState } from '../../../utils/storybook/UseState';
import { withCenteredStory } from '../../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
import { RelativeTimeRangePicker } from './RelativeTimeRangePicker'; import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
@ -12,30 +12,28 @@ const meta: ComponentMeta<typeof RelativeTimeRangePicker> = {
component: RelativeTimeRangePicker, component: RelativeTimeRangePicker,
decorators: [withCenteredStory], decorators: [withCenteredStory],
parameters: { parameters: {
docs: {}, controls: {
exclude: ['onChange'],
},
},
args: {
timeRange: {
from: 900,
to: 0,
},
}, },
}; };
export const basic = () => { export const Basic: ComponentStory<typeof RelativeTimeRangePicker> = (args) => {
const [, updateArgs] = useArgs();
return ( return (
<UseState <RelativeTimeRangePicker
initialState={{ {...args}
from: 900, onChange={(value) => {
to: 0, action('onChange')(value);
updateArgs({ timeRange: value });
}} }}
> />
{(value, updateValue) => {
return (
<RelativeTimeRangePicker
onChange={(newValue) => {
action('on selected')(newValue);
updateValue(newValue);
}}
timeRange={value}
/>
);
}}
</UseState>
); );
}; };

4
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { FormEvent, ReactElement, useCallback, useState } from 'react'; import React, { FormEvent, useCallback, useState } from 'react';
import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data'; import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
@ -41,7 +41,7 @@ const validOptions = quickOptions.filter((o) => isRelativeFormat(o.from));
/** /**
* @internal * @internal
*/ */
export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): ReactElement | null { export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
const { timeRange, onChange } = props; const { timeRange, onChange } = props;
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const onClose = useCallback(() => setIsOpen(false), []); const onClose = useCallback(() => setIsOpen(false), []);