All files / blong-browser/src/components/Editor/stories Events.stories.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Events stories — field-change events and form API interactions.
 */
import type {Meta} from '@storybook/react-vite';
import type {StoryFn} from '../Editor.stories.js';
import {Editor} from '../Editor.js';

const meta: Meta<typeof Editor> = {title: 'Editor/Events', component: Editor};
export default meta;

export const Events: StoryFn = () => (
    <Editor
        schema={{
            properties: {
                a: {title: 'A', type: 'integer', widget: {onChange: 'handleA'}} as never,
                b: {title: 'B', type: 'integer', widget: {onChange: 'handleB'}} as never,
                sum: {title: 'Sum', type: 'number', readOnly: true},
            },
        }}
        cards={{
            edit: {label: 'Field Events', className: 'lg:col-3', widgets: ['a', 'b', 'sum']},
        }}
        value={{a: 0, b: 0, sum: 0}}
        editable
        editMode
        layout="edit"
        layouts={{edit: ['edit']}}
        methods={{
            async handleA(params) {
                const {form, value} = params as {form: {getValues: (f: string) => unknown; setValue: (f: string, v: unknown) => void}; value: unknown};
                const sum = Number(form.getValues('b')) + Number(value);
                form.setValue('sum', sum);
            },
            async handleB(params) {
                const {form, value} = params as {form: {getValues: (f: string) => unknown; setValue: (f: string, v: unknown) => void}; value: unknown};
                const sum = Number(form.getValues('a')) + Number(value);
                form.setValue('sum', sum);
            },
        }}
    />
);

export const EventsFormAPI: StoryFn = () => (
    <Editor
        schema={{
            properties: {
                visible: {title: 'Visible', type: 'boolean'},
                enabled: {title: 'Enabled', type: 'boolean'},
                input: {
                    title: 'Conditional Input',
                    widget: {visible: 'visible', enabled: 'enabled'},
                } as never,
            },
        }}
        cards={{
            edit: {
                label: 'Form API',
                className: 'lg:col-3',
                widgets: ['visible', 'enabled', 'input'],
            },
        }}
        value={{visible: true, enabled: true, input: ''}}
        editable
        editMode
        layout="edit"
        layouts={{edit: ['edit']}}
    />
);