moira-web

1
// @flow
2
import * as React from "react";
3
import { storiesOf } from "@storybook/react";
4
import { action } from "@storybook/addon-actions";
5
import { ValidationContainer } from "react-ui-validations";
6
import TriggerSimpleModeEditor, {
7
    type TriggerSimpleModeSettings,
8
} from "../Components/TriggerSimpleModeEditor/TriggerSimpleModeEditor";
9

10
type Props = {
11
    initialValue: TriggerSimpleModeSettings,
12
};
13

14
type State = {
15
    value: TriggerSimpleModeSettings,
16
};
17

18
class TriggerSimpleModeEditorContainer extends React.Component<Props, State> {
19
    props: Props;
20
    state: State;
21

22
    constructor(props: Props) {
23
        super(props);
24
        this.state = {
25
            value: props.initialValue,
26
        };
27
    }
28

29
    render(): React.Node {
30
        return (
31
            <div>
32
                <TriggerSimpleModeEditor
33
                    value={this.state.value}
34
                    onChange={nextValue => this.setState({ value: nextValue })}
35
                />
36
                <div>
37
                    <pre>{JSON.stringify(this.state.value, null, "  ")}</pre>
38
                </div>
39
            </div>
40
        );
41
    }
42
}
43

44
storiesOf("TriggerSimpleModeEditor", module)
45
    .addDecorator(story => <ValidationContainer>{story()}</ValidationContainer>)
46
    .add("Simple", () => (
47
        <TriggerSimpleModeEditor value={{ warn_value: 10, error_value: 20 }} onChange={action("onChange")} />
48
    ))
49
    .add("StateFull_NullInitialValue", () => (
50
        <TriggerSimpleModeEditorContainer initialValue={{ warn_value: null, error_value: null }} />
51
    ));
52