IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-23 09:26:43 -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 { ComponentMeta } from '@storybook/react';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';
import { UseState } from '../../../utils/storybook/UseState';
import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
@ -12,30 +12,28 @@ const meta: ComponentMeta<typeof RelativeTimeRangePicker> = {
component: RelativeTimeRangePicker,
decorators: [withCenteredStory],
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 (
<UseState
initialState={{
from: 900,
to: 0,
<RelativeTimeRangePicker
{...args}
onChange={(value) => {
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 React, { FormEvent, ReactElement, useCallback, useState } from 'react';
import React, { FormEvent, useCallback, useState } from 'react';
import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
@ -41,7 +41,7 @@ const validOptions = quickOptions.filter((o) => isRelativeFormat(o.from));
/**
* @internal
*/
export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): ReactElement | null {
export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
const { timeRange, onChange } = props;
const [isOpen, setIsOpen] = useState(false);
const onClose = useCallback(() => setIsOpen(false), []);