IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-24 07:17:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

Storybook: Add controls to UnitPicker (#54694)

Browse Source
This commit is contained in:
Tima Gixe 2022-09-08 15:16:27 +03:00 committed by GitHub
parent bdd0af0645
commit 8fb0d3421b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx
View File

@ -1,10 +1,10 @@
import { action } from '@storybook/addon-actions';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';
import { UnitPicker } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UnitPicker, UnitPickerProps } from './UnitPicker';
import mdx from './UnitPicker.mdx';
const meta: ComponentMeta<typeof UnitPicker> = {
@ -12,10 +12,18 @@ const meta: ComponentMeta<typeof UnitPicker> = {
component: UnitPicker,
decorators: [withCenteredStory],
parameters: {
controls: {
exclude: ['onChange', 'value'],
},
docs: mdx,
},
};
export const simple: ComponentStory<typeof UnitPicker> = () => <UnitPicker onChange={(val) => console.log(val)} />;
export const Basic: ComponentStory<typeof UnitPicker> = (args: UnitPickerProps) => <UnitPicker {...args} />;
Basic.args = {
onChange: action('onChange fired'),
width: 30,
};
export default meta;

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

@ -4,7 +4,7 @@ import { getValueFormats, SelectableValue } from '@grafana/data';
import { Cascader, CascaderOption } from '../Cascader/Cascader';
interface Props {
export interface UnitPickerProps {
onChange: (item?: string) => void;
value?: string;
width?: number;
@ -14,7 +14,7 @@ function formatCreateLabel(input: string) {
return `Custom unit: ${input}`;
}
export class UnitPicker extends PureComponent<Props> {
export class UnitPicker extends PureComponent<UnitPickerProps> {
onChange = (value: SelectableValue<string>) => {
this.props.onChange(value.value);
};