diff options
| author | Haishan <[email protected]> | 2020-10-31 18:18:04 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2020-11-01 17:42:52 +0800 |
| commit | ff1a39d04e53b428e34d46c55ecd6689189b5443 (patch) | |
| tree | 94a60abe3d28a1d729b877356bdd38d75ce655a5 /src/components/StyleGuide.js | |
| parent | e62c9165481ef12ee2310dee1c32f890b3fe4b78 (diff) | |
chore: run ts-migrate
Diffstat (limited to 'src/components/StyleGuide.js')
| -rw-r--r-- | src/components/StyleGuide.js | 82 |
1 files changed, 0 insertions, 82 deletions
diff --git a/src/components/StyleGuide.js b/src/components/StyleGuide.js deleted file mode 100644 index 5979ee5..0000000 --- a/src/components/StyleGuide.js +++ /dev/null @@ -1,82 +0,0 @@ -import React, { PureComponent } from 'react'; -import { Zap } from 'react-feather'; - -import Button from './Button'; -import Input from './Input'; -import { LoadingDot } from './shared/Basic'; -import SwitchThemed from './SwitchThemed'; -import ToggleSwitch from './ToggleSwitch'; - -const noop = () => { - /* empty */ -}; - -const paneStyle = { - padding: '20px 0', -}; - -const optionsRule = [ - { - label: 'Global', - value: 'Global', - }, - { - label: 'Rule', - value: 'Rule', - }, - { - label: 'Direct', - value: 'Direct', - }, -]; - -const Pane = ({ children, style }) => ( - <div style={{ ...paneStyle, ...style }}>{children}</div> -); - -function useToggle(initialState = false) { - const [onoff, setonoff] = React.useState(initialState); - const handleChange = React.useCallback(() => { - setonoff((x) => !x); - }, []); - return [onoff, handleChange]; -} - -function SwitchExample() { - const [checked, handleChange] = useToggle(false); - return <SwitchThemed checked={checked} onChange={handleChange} />; -} - -class StyleGuide extends PureComponent { - render() { - return ( - <div> - <Pane> - <SwitchExample /> - </Pane> - <Pane> - <Input /> - </Pane> - <Pane> - <ToggleSwitch - name="test" - options={optionsRule} - value="Rule" - onChange={noop} - /> - </Pane> - <Pane> - <Button text="Test Lxatency" start={<Zap size={16} />} /> - <Button text="Test Lxatency" start={<Zap size={16} />} isLoading /> - <Button label="Test Lxatency" /> - <Button label="Button Plain" kind="minimal" /> - </Pane> - <Pane style={{ paddingLeft: 20 }}> - <LoadingDot /> - </Pane> - </div> - ); - } -} - -export default StyleGuide; |
