4 * Copyright 2016 RIFT.IO Inc
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
20 var React
= require('react');
21 var ButtonEventListenerMixin
= require('../mixins/ButtonEventListener.js');
25 * A check-box component.
26 * It's props values and a brief description below
28 * label: The label for the checkbox group.
29 * checkboxes: The object that creates each checkbox. Each object has a property "label" and "checked".
30 * label: The label for the individual checkbox.
31 * checked: If set to true, the individual checkbox is initialized with a check.
32 * requiredText: The text content of the "if required" message.
33 * errorText: The text content of the error message.
34 * ClassName: Css Classes applied to the element.
35 * size: The size of the element.
36 * isRequired: A boolean indicating whether or not the input is required.
37 * isDisabled: A boolean indicating the disabled state of the element.
38 * isReadOnly: A boolean indicating whether or not the input is read only.
39 * instructions: The text content of the instructions
41 module
.exports
= React
.createClass({
42 displayName
: "CheckBox",
43 mixins
:[ButtonEventListenerMixin
],
45 label
: React
.PropTypes
.string
,
46 checkboxes
: React
.PropTypes
.arrayOf(
47 React
.PropTypes
.shape(
49 label
: React
.PropTypes
.string
,
50 checked
: React
.PropTypes
.bool
,
51 indeterminate
: React
.PropTypes
.bool
54 requiredText
: React
.PropTypes
.string
,
55 instructionText
: React
.PropTypes
.string
,
56 errorText
: React
.PropTypes
.string
,
57 className
: React
.PropTypes
.string
,
58 size
: React
.PropTypes
.string
,
59 isRequired
: React
.PropTypes
.bool
,
60 isDisabled
: React
.PropTypes
.bool
,
61 isReadOnly
: React
.PropTypes
.bool
66 * Sets the default input state.
67 * If there is no description for the variable, assume it's the same as it's props counterpart.
69 * isActive: Boolean to indicate if input is active.
70 * isHovered: Boolean to indicate if the input is being hovered over.
71 * isFocused: Boolean to indicate if the input has been focused.
72 * isDisabled: Boolean to indicate if input has been disabled.
74 * @returns {{sizeOfButton: (*|string), isActive: boolean, isHovered: boolean, isFocused: boolean, isDisabled: (*|boolean),
75 * isReadOnly: (*|.textInput.isReadOnly|.exports.propTypes.isReadOnly|.exports.getInitialState.isReadOnly|boolean),
76 * isRequired: (*|.textInput.isRequired|.exports.propTypes.isRequired|.exports.getInitialState.isRequired|isRequired|null),
77 * isValid: null, isSuccess: null}}
79 getInitialState: function() {
83 label
: this.props
.label
|| "",
84 requiredText
: this.props
.requiredText
|| "Required",
85 instructionsText
: this.props
.instructions
|| "",
86 errorText
: this.props
.errorText
|| "",
87 size
: this.props
.size
|| '',
91 isDisabled
: this.props
.disabled
|| false,
92 isReadOnly
: this.props
.isReadOnly
|| false,
93 isRequired
: this.props
.isRequired
|| null,
94 isValid
: null, // Three way bool. Valid: true. Invalid: false. Not acted on: null.
95 isSuccess
: null // Three way bool. Success: true. Error: false. Not acted on: null.
100 * If any of the state variables have changed, the component should update.
101 * "nextProps" and "nextState" hold the state and property variables as they will be after the update.
102 * "this.props" and "this.state" hold the state and property variables as they were before the update.
103 * returns true if the state have changed. Otherwise returns false.
108 shouldComponentUpdate: function(nextProps
, nextState
) {
109 var currentStateString
= this.state
.isReadOnly
+ this.state
.isDisabled
+ this.state
.isActive
+ this.state
.isFocused
+
110 this.state
.isHovered
+ this.state
.isValid
+ this.state
.isSuccess
;
111 var nextStateString
= nextState
.isReadOnly
+ nextState
.isDisabled
+ nextState
.isActive
+ nextState
.isFocused
+
112 nextState
.isHovered
+ nextState
.isValid
+ nextState
.isSuccess
;
113 if (currentStateString
== nextStateString
) {
119 componentDidMount: function() {
120 this.state
.mounted
= true;
125 * Returns a string reflecting the current state of the input.
126 * If the component state "isDisabled" is true, returns a string "disabled".
127 * If the component state "isReadOnly" is true, returns a string "readonly".
128 * Otherwise returns a string containing a word for each state that has been set to true.
129 * (ie "active focused" if the states active and focused are true, but hovered is false).
132 setComponentState: function() {
135 if (this.state
.isDisabled
) {
138 if (this.state
.isReadOnly
) {
141 if (this.state
.isActive
) {
144 if (this.state
.isHovered
) {
147 if (this.state
.isFocused
) {
153 localOnClick: function(e
) {
158 * Renders the checkbox component.
165 var input_style
= {};
166 var input_state
= this.setComponentState();
168 // The group label element
169 label
= React
.createElement("label", {className
: "rw-form__label"}, this.props
.label
);
171 // Creates each individual checkbox element and the label for each.
172 for (var i
= 0; i
< this.props
.checkboxes
.length
; i
++) {
173 checkbox
[i
] = React
.createElement("input",{
175 defaultChecked
: this.props
.checkboxes
[i
].checked
,
176 //indeterminate: true,
178 readOnly
: this.props
.readonly
,
179 disabled
: this.props
.disabled
,
180 onClick
: this.localOnClick
,
181 onMouseUp
: this.onMouseUp
,
182 onMouseDown
: this.onMouseDown
,
183 onMouseOver
: this.onMouseOver
,
184 onMouseEnter
: this.onMouseEnter
,
185 onMouseLeave
: this.onMouseLeave
,
186 onMouseOut
: this.onMouseOut
,
187 onTouchCancel
: this.onTouchCancel
,
188 onTouchEnd
: this.onTouchEnd
,
189 onTouchMove
: this.onTouchMove
,
190 onTouchStart
: this.onTouchStart
,
191 onKeyDown
: this.onKeyDown
,
192 onKeyPress
: this.onKeyPress
,
193 onKeyUp
: this.onKeyUp
,
194 onFocus
: this.onFocus
,
197 if (this.state
.mounted
) {
198 this.getDOMNode().children
[i
+ 1].children
[0].indeterminate
= this.props
.checkboxes
[i
].indeterminate
;
202 input
[i
] = React
.createElement("label", {className
: "rw-form__label-checkBox", key
:i
, readOnly
:this.props
.readonly
, disabled
:this.props
.disabled
}, checkbox
[i
], this.props
.checkboxes
[i
].label
);
206 // The "if required" element. It displays a label if the element is required.
207 if(this.props
.isRequired
== true){
208 var requiredEle
= React
.createElement("small", {className
: "rw-form__required-label"}, this.state
.requiredText
);
211 // The "error" element. It pops up as a message if there is an error with the input.
212 if(this.state
.errorText
!= "") {
213 var error
= React
.createElement("p", {className
: "rw-form__message-error"}, this.state
.errorText
);
216 // The "instruction" element.
217 if(this.state
.instructionsText
!= ""){
218 var instructions
= React
.createElement("p", {className
: "rw-form-instructions"}, this.state
.instructionsText
)
221 // The parent element for all.
222 var ret
= React
.createElement("div", {
223 "data-state": input_state
,
224 required
: this.state
.isRequired
,
225 disabled
: this.state
.isDisabled
,
226 readOnly
: this.state
.isReadOnly
,
229 }, requiredEle
, label
, input
, error
, instructions
);