|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
import React, { useState, useCallback } from 'react'; |
|
|
|
|
import { boolean } from '@storybook/addon-knobs'; |
|
|
|
|
import { Meta, Story } from '@storybook/react'; |
|
|
|
|
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; |
|
|
|
|
import { InlineField, Switch, InlineSwitch } from '@grafana/ui'; |
|
|
|
|
import mdx from './Switch.mdx'; |
|
|
|
@ -14,41 +14,50 @@ export default { |
|
|
|
|
docs: { |
|
|
|
|
page: mdx, |
|
|
|
|
}, |
|
|
|
|
knobs: { |
|
|
|
|
disable: true, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export const Controlled = () => { |
|
|
|
|
const [checked, setChecked] = useState(false); |
|
|
|
|
const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]); |
|
|
|
|
const BEHAVIOUR_GROUP = 'Behaviour props'; |
|
|
|
|
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP); |
|
|
|
|
args: { |
|
|
|
|
disabled: false, |
|
|
|
|
value: false, |
|
|
|
|
transparent: false, |
|
|
|
|
}, |
|
|
|
|
} as Meta; |
|
|
|
|
|
|
|
|
|
export const Controlled: Story = (args) => { |
|
|
|
|
return ( |
|
|
|
|
<div> |
|
|
|
|
<div style={{ marginBottom: '32px' }}> |
|
|
|
|
<Field label="Normal switch" description="For horizontal forms"> |
|
|
|
|
<Switch value={checked} disabled={disabled} onChange={onChange} /> |
|
|
|
|
<Switch value={args.value} disabled={args.disabled} transparent={args.transparent} /> |
|
|
|
|
</Field> |
|
|
|
|
</div> |
|
|
|
|
<div style={{ marginBottom: '32px' }}> |
|
|
|
|
<InlineFieldRow> |
|
|
|
|
<InlineField label="My switch"> |
|
|
|
|
<InlineSwitch value={checked} disabled={disabled} onChange={onChange} /> |
|
|
|
|
<InlineSwitch value={args.value} disabled={args.disabled} transparent={args.transparent} /> |
|
|
|
|
</InlineField> |
|
|
|
|
</InlineFieldRow> |
|
|
|
|
</div> |
|
|
|
|
<div style={{ marginBottom: '32px' }}> |
|
|
|
|
<div>just inline switch with show label</div> |
|
|
|
|
<span> |
|
|
|
|
<InlineSwitch label="Raw data" showLabel={true} value={checked} disabled={disabled} onChange={onChange} /> |
|
|
|
|
<InlineSwitch |
|
|
|
|
label="Raw data" |
|
|
|
|
showLabel={true} |
|
|
|
|
value={args.value} |
|
|
|
|
disabled={args.disabled} |
|
|
|
|
transparent={args.transparent} |
|
|
|
|
/> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export const Uncontrolled = () => { |
|
|
|
|
const BEHAVIOUR_GROUP = 'Behaviour props'; |
|
|
|
|
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP); |
|
|
|
|
return <Switch disabled={disabled} />; |
|
|
|
|
export const Uncontrolled: Story = (args) => { |
|
|
|
|
const [checked, setChecked] = useState(args.value); |
|
|
|
|
const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]); |
|
|
|
|
return <Switch value={checked} disabled={args.disabled} transparent={args.transparent} onChange={onChange} />; |
|
|
|
|
}; |
|
|
|
|