1 |
|
2 |
|
3 | var React = require("react");
|
4 |
|
5 | var Alert = require("./components/Alert.jsx");
|
6 | var Button = require("./components/Button.jsx");
|
7 | var ButtonGroup = require("./components/ButtonGroup.jsx");
|
8 | var ColorPicker = require("./components/ColorPicker.jsx");
|
9 | var Dropdown = require("./components/Dropdown.jsx");
|
10 | var TextArea = require("./components/TextArea.jsx");
|
11 | var TextInput = require("./components/TextInput.jsx");
|
12 | var LabelledTangle = require("./components/LabelledTangle.jsx");
|
13 | var Toggle = require("./components/Toggle.jsx");
|
14 |
|
15 | var exampleData = {
|
16 | buttons: [
|
17 | { title: "button1", content: "button1", value: "1" },
|
18 | { title: "button2", content: "button2", value: "2" },
|
19 | { title: "button3", content: "button3", value: "3" },
|
20 | { title: "button4", content: "button4", value: "4" },
|
21 | { title: "button5", content: "button5", value: "5" }
|
22 | ],
|
23 | dropdowns: [
|
24 | { content: "option1", value: "1" },
|
25 | { content: "option2", value: "2" },
|
26 | { content: "option3", value: "3" },
|
27 | { content: "option4", value: "4" },
|
28 | { content: "option5", value: "5" }
|
29 | ],
|
30 | inputAlerts: {
|
31 | "empty": {
|
32 | alertText: "Enter some text above.",
|
33 | boldText: "Hello!",
|
34 | alertType: "default"
|
35 | },
|
36 | "too_short": {
|
37 | alertText: "Your input is too short.",
|
38 | boldText: "Error!",
|
39 | alertType: "error"
|
40 | },
|
41 | "too_short_warn": {
|
42 | alertText: "Your input is long enough, but still unsafe.",
|
43 | boldText: "Warning!",
|
44 | alertType: "warning"
|
45 | },
|
46 | "success": {
|
47 | alertText: "Looks good.",
|
48 | boldText: "Success!",
|
49 | alertType: "success"
|
50 | }
|
51 | },
|
52 | numColors: 11
|
53 | };
|
54 |
|
55 | var ExampleParent = React.createClass({
|
56 |
|
57 | getInitialState: function() {
|
58 | return {
|
59 | buttonGroup: "1",
|
60 | buttonActive: true,
|
61 | tangleVal: 0,
|
62 | colorIndex: 0,
|
63 | shareButton: 0,
|
64 | textInput: "",
|
65 | textArea: "",
|
66 | disabled: true
|
67 | };
|
68 | },
|
69 |
|
70 | _handleEvent: function(k, v) {
|
71 | console.log(k, v);
|
72 | var state = this.state;
|
73 | state[k] = v;
|
74 | this.setState(state);
|
75 | },
|
76 |
|
77 | _validateInput: function() {
|
78 | var input = this.state.textInput;
|
79 | if (input.length === 0) {
|
80 | return exampleData.inputAlerts.empty;
|
81 | } else if (input.length < 5) {
|
82 | return exampleData.inputAlerts.too_short;
|
83 | } else if (input.length >=5 && input.length < 10) {
|
84 | return exampleData.inputAlerts.too_short_warn;
|
85 | } else if (input.length >= 10) {
|
86 | return exampleData.inputAlerts.success;
|
87 | }
|
88 | },
|
89 |
|
90 | _toggleButton: function() {
|
91 | newButtonState = !this.state.buttonActive;
|
92 | this._handleEvent("buttonActive", newButtonState);
|
93 | },
|
94 |
|
95 | render: function() {
|
96 | var self = this;
|
97 | var currentState = JSON.stringify(this.state, null, 2);
|
98 | var inputAlert = this._validateInput();
|
99 | var buttonOn = (this.state.buttonActive) ? "on" : "off";
|
100 | return (
|
101 | <div className="ui-container">
|
102 | <div className="examples">
|
103 | <h2 className={"cb-colorpicker-label-" + this.state.colorIndex}>
|
104 | Colorpicker
|
105 | </h2>
|
106 | <ColorPicker
|
107 | onChange={this._handleEvent.bind(null, "colorIndex")}
|
108 | numColors={exampleData.numColors}
|
109 | colorIndex={this.state.colorIndex}
|
110 | />
|
111 | <h2>Text area</h2>
|
112 | <TextArea
|
113 | onChange={this._handleEvent.bind(null, "textArea")}
|
114 | value={this.state.textArea}
|
115 | />
|
116 | <h2>Dropdown</h2>
|
117 | <Dropdown
|
118 | onChange={this._handleEvent.bind(null, "dropdown")}
|
119 | options={exampleData.dropdowns}
|
120 | />
|
121 | <h2>Button</h2>
|
122 | <Button
|
123 | text={"Button is " + buttonOn}
|
124 | onClick={this._toggleButton}
|
125 | className={this.state.buttonActive ? '' : 'disabled'}
|
126 | />
|
127 | <h2>Disabled Button</h2>
|
128 | <Button
|
129 | text="Disabled button"
|
130 | onClick={this._toggleButton}
|
131 | className={this.state.buttonActive ? '' : 'disabled'}
|
132 | disabled={this.state.disabled}
|
133 | />
|
134 | <h2>Button group</h2>
|
135 | <ButtonGroup
|
136 | onClick={this._handleEvent.bind(null, "buttonGroup")}
|
137 | buttons={exampleData.buttons}
|
138 | value={this.state.buttonGroup}
|
139 | />
|
140 | <h2>Text input</h2>
|
141 | <TextInput
|
142 | className="cb-text-input"
|
143 | onChange={this._handleEvent.bind(null, "textInput")}
|
144 | placeholder="Input text"
|
145 | />
|
146 | <h2>Alert</h2>
|
147 | <Alert
|
148 | alertType={inputAlert.alertType}
|
149 | alertText={inputAlert.alertText}
|
150 | boldText={inputAlert.boldText}
|
151 | />
|
152 | <h2>Labelled tangle</h2>
|
153 | <LabelledTangle
|
154 | className="cb-labelled-tangle"
|
155 | label="Tangle label"
|
156 | labelClass="cb-tangle-label"
|
157 | tangleClass="cb-tangle-input"
|
158 | onChange={this._handleEvent.bind(null, "tangleVal")}
|
159 | onInput={this._handleEvent.bind(null, "tangleVal")}
|
160 | value={this.state.tangleVal}
|
161 | />
|
162 | <h2>Toggle</h2>
|
163 | <Toggle
|
164 | onToggle={this._handleEvent.bind(null, "toggle1")}
|
165 | label="toggle on/off (default toggled)" toggled={true}
|
166 | />
|
167 | <Toggle
|
168 | onToggle={this._handleEvent.bind(null, "toggle2")}
|
169 | label="toggle another thing on/off"
|
170 | />
|
171 | </div>
|
172 | <div className="current-state">
|
173 | <pre>{currentState}</pre>
|
174 | </div>
|
175 | </div>
|
176 | );
|
177 | }
|
178 |
|
179 | });
|
180 |
|
181 | module.exports = ExampleParent;
|