/
Controls playground.tsx
49 lines (45 loc) · 1.28 KB
/
Controls playground.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React from 'react';
import { useSelect, useValue } from 'react-cosmos/fixture';
export default () => {
const [string] = useValue('string', { defaultValue: 'How are you doing?' });
const [number] = useValue('number', { defaultValue: 1989 });
const [boolean] = useValue('boolean', { defaultValue: true });
const [object] = useValue('object', {
defaultValue: { isAdmin: true, name: 'Pat D', age: 44 },
});
const [value, setValue] = useSelect('mySelect', {
options: ['Option 1', 'Option 2', 'Option 3'],
});
const [array] = useValue('array', {
defaultValue: [
{ isAdmin: true, name: 'Pat D', age: 44 },
{ isAdmin: false, name: 'Dan B', age: 39 },
],
});
function renderButton(option: typeof value) {
return (
<button disabled={value === option} onClick={() => setValue(option)}>
{option}
</button>
);
}
return (
<>
<MyComponent
string={string}
number={number}
boolean={boolean}
object={object}
array={array}
/>
<div>
{renderButton('Option 1')}
{renderButton('Option 2')}
{renderButton('Option 3')}
</div>
</>
);
};
function MyComponent(props: Record<string, any>) {
return <pre>{JSON.stringify(props, null, 2)}</pre>;
}