UNPKG

4.94 kBJSXView Raw
1// Big example
2
3var React = require("react");
4
5var Alert = require("./components/Alert.jsx");
6var Button = require("./components/Button.jsx");
7var ButtonGroup = require("./components/ButtonGroup.jsx");
8var ColorPicker = require("./components/ColorPicker.jsx");
9var Dropdown = require("./components/Dropdown.jsx");
10var TextArea = require("./components/TextArea.jsx");
11var TextInput = require("./components/TextInput.jsx");
12var LabelledTangle = require("./components/LabelledTangle.jsx");
13var Toggle = require("./components/Toggle.jsx");
14
15var 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
55var 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
181module.exports = ExampleParent;