1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
16 |
|
17 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
18 |
|
19 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
20 |
|
21 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
22 |
|
23 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
24 |
|
25 | var _createClass3 = _interopRequireDefault(_createClass2);
|
26 |
|
27 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
28 |
|
29 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
30 |
|
31 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
32 |
|
33 | var _inherits3 = _interopRequireDefault(_inherits2);
|
34 |
|
35 | var _simpleAssign = require('simple-assign');
|
36 |
|
37 | var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
|
38 |
|
39 | var _react = require('react');
|
40 |
|
41 | var _react2 = _interopRequireDefault(_react);
|
42 |
|
43 | var _propTypes = require('prop-types');
|
44 |
|
45 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
46 |
|
47 | var _EnhancedSwitch = require('../internal/EnhancedSwitch');
|
48 |
|
49 | var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch);
|
50 |
|
51 | var _transitions = require('../styles/transitions');
|
52 |
|
53 | var _transitions2 = _interopRequireDefault(_transitions);
|
54 |
|
55 | var _checkBoxOutlineBlank = require('../svg-icons/toggle/check-box-outline-blank');
|
56 |
|
57 | var _checkBoxOutlineBlank2 = _interopRequireDefault(_checkBoxOutlineBlank);
|
58 |
|
59 | var _checkBox = require('../svg-icons/toggle/check-box');
|
60 |
|
61 | var _checkBox2 = _interopRequireDefault(_checkBox);
|
62 |
|
63 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
64 |
|
65 | function getStyles(props, context) {
|
66 | var checkbox = context.muiTheme.checkbox;
|
67 |
|
68 | var checkboxSize = 24;
|
69 |
|
70 | return {
|
71 | icon: {
|
72 | height: checkboxSize,
|
73 | width: checkboxSize
|
74 | },
|
75 | check: {
|
76 | position: 'absolute',
|
77 | opacity: 0,
|
78 | transform: 'scale(0)',
|
79 | transitionOrigin: '50% 50%',
|
80 | transition: _transitions2.default.easeOut('450ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('0ms', 'transform', '450ms'),
|
81 | fill: checkbox.checkedColor
|
82 | },
|
83 | checkWhenSwitched: {
|
84 | opacity: 1,
|
85 | transform: 'scale(1)',
|
86 | transition: _transitions2.default.easeOut('0ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('800ms', 'transform', '0ms')
|
87 | },
|
88 | checkWhenDisabled: {
|
89 | fill: checkbox.disabledColor
|
90 | },
|
91 | box: {
|
92 | position: 'absolute',
|
93 | opacity: 1,
|
94 | fill: checkbox.boxColor,
|
95 | transition: _transitions2.default.easeOut('1000ms', 'opacity', '200ms')
|
96 | },
|
97 | boxWhenSwitched: {
|
98 | opacity: 0,
|
99 | transition: _transitions2.default.easeOut('650ms', 'opacity', '150ms'),
|
100 | fill: checkbox.checkedColor
|
101 | },
|
102 | boxWhenDisabled: {
|
103 | fill: props.checked ? 'transparent' : checkbox.disabledColor
|
104 | },
|
105 | label: {
|
106 | color: props.disabled ? checkbox.labelDisabledColor : checkbox.labelColor
|
107 | }
|
108 | };
|
109 | }
|
110 |
|
111 | var Checkbox = function (_Component) {
|
112 | (0, _inherits3.default)(Checkbox, _Component);
|
113 |
|
114 | function Checkbox() {
|
115 | var _ref;
|
116 |
|
117 | var _temp, _this, _ret;
|
118 |
|
119 | (0, _classCallCheck3.default)(this, Checkbox);
|
120 |
|
121 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
122 | args[_key] = arguments[_key];
|
123 | }
|
124 |
|
125 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Checkbox.__proto__ || (0, _getPrototypeOf2.default)(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
126 | switched: false
|
127 | }, _this.handleStateChange = function (newSwitched) {
|
128 | _this.setState({
|
129 | switched: newSwitched
|
130 | });
|
131 | }, _this.handleCheck = function (event, isInputChecked) {
|
132 | if (_this.props.onCheck) {
|
133 | _this.props.onCheck(event, isInputChecked);
|
134 | }
|
135 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
136 | }
|
137 |
|
138 | (0, _createClass3.default)(Checkbox, [{
|
139 | key: 'componentWillMount',
|
140 | value: function componentWillMount() {
|
141 | var _props = this.props,
|
142 | checked = _props.checked,
|
143 | defaultChecked = _props.defaultChecked,
|
144 | valueLink = _props.valueLink;
|
145 |
|
146 |
|
147 | if (checked || defaultChecked || valueLink && valueLink.value) {
|
148 | this.setState({
|
149 | switched: true
|
150 | });
|
151 | }
|
152 | }
|
153 | }, {
|
154 | key: 'componentWillReceiveProps',
|
155 | value: function componentWillReceiveProps(nextProps) {
|
156 | if (this.props.checked !== nextProps.checked) {
|
157 | this.setState({
|
158 | switched: nextProps.checked
|
159 | });
|
160 | }
|
161 | }
|
162 | }, {
|
163 | key: 'isChecked',
|
164 | value: function isChecked() {
|
165 | return this.refs.enhancedSwitch.isSwitched();
|
166 | }
|
167 | }, {
|
168 | key: 'setChecked',
|
169 | value: function setChecked(newCheckedValue) {
|
170 | this.refs.enhancedSwitch.setSwitched(newCheckedValue);
|
171 | }
|
172 | }, {
|
173 | key: 'render',
|
174 | value: function render() {
|
175 | var _props2 = this.props,
|
176 | iconStyle = _props2.iconStyle,
|
177 | onCheck = _props2.onCheck,
|
178 | checkedIcon = _props2.checkedIcon,
|
179 | uncheckedIcon = _props2.uncheckedIcon,
|
180 | other = (0, _objectWithoutProperties3.default)(_props2, ['iconStyle', 'onCheck', 'checkedIcon', 'uncheckedIcon']);
|
181 |
|
182 | var styles = getStyles(this.props, this.context);
|
183 | var boxStyles = (0, _simpleAssign2.default)(styles.box, this.state.switched && styles.boxWhenSwitched, iconStyle, this.props.disabled && styles.boxWhenDisabled);
|
184 | var checkStyles = (0, _simpleAssign2.default)(styles.check, this.state.switched && styles.checkWhenSwitched, iconStyle, this.props.disabled && styles.checkWhenDisabled);
|
185 |
|
186 | var checkedElement = checkedIcon ? _react2.default.cloneElement(checkedIcon, {
|
187 | style: (0, _simpleAssign2.default)(checkStyles, checkedIcon.props.style)
|
188 | }) : _react2.default.createElement(_checkBox2.default, {
|
189 | style: checkStyles
|
190 | });
|
191 |
|
192 | var unCheckedElement = uncheckedIcon ? _react2.default.cloneElement(uncheckedIcon, {
|
193 | style: (0, _simpleAssign2.default)(boxStyles, uncheckedIcon.props.style)
|
194 | }) : _react2.default.createElement(_checkBoxOutlineBlank2.default, {
|
195 | style: boxStyles
|
196 | });
|
197 |
|
198 | var checkboxElement = _react2.default.createElement(
|
199 | 'div',
|
200 | null,
|
201 | unCheckedElement,
|
202 | checkedElement
|
203 | );
|
204 |
|
205 | var rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill;
|
206 | var mergedIconStyle = (0, _simpleAssign2.default)(styles.icon, iconStyle);
|
207 |
|
208 | var labelStyle = (0, _simpleAssign2.default)(styles.label, this.props.labelStyle);
|
209 |
|
210 | var enhancedSwitchProps = {
|
211 | ref: 'enhancedSwitch',
|
212 | inputType: 'checkbox',
|
213 | switched: this.state.switched,
|
214 | switchElement: checkboxElement,
|
215 | rippleColor: rippleColor,
|
216 | iconStyle: mergedIconStyle,
|
217 | onSwitch: this.handleCheck,
|
218 | labelStyle: labelStyle,
|
219 | onParentShouldUpdate: this.handleStateChange,
|
220 | labelPosition: this.props.labelPosition
|
221 | };
|
222 |
|
223 | return _react2.default.createElement(_EnhancedSwitch2.default, (0, _extends3.default)({}, other, enhancedSwitchProps));
|
224 | }
|
225 | }]);
|
226 | return Checkbox;
|
227 | }(_react.Component);
|
228 |
|
229 | Checkbox.defaultProps = {
|
230 | labelPosition: 'right',
|
231 | disabled: false
|
232 | };
|
233 | Checkbox.contextTypes = {
|
234 | muiTheme: _propTypes2.default.object.isRequired
|
235 | };
|
236 | Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
|
237 | |
238 |
|
239 |
|
240 | checked: _propTypes2.default.bool,
|
241 | |
242 |
|
243 |
|
244 |
|
245 | checkedIcon: _propTypes2.default.element,
|
246 | |
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 | defaultChecked: _propTypes2.default.bool,
|
253 | |
254 |
|
255 |
|
256 | disabled: _propTypes2.default.bool,
|
257 | |
258 |
|
259 |
|
260 | iconStyle: _propTypes2.default.object,
|
261 | |
262 |
|
263 |
|
264 | inputStyle: _propTypes2.default.object,
|
265 | |
266 |
|
267 |
|
268 | labelPosition: _propTypes2.default.oneOf(['left', 'right']),
|
269 | |
270 |
|
271 |
|
272 | labelStyle: _propTypes2.default.object,
|
273 | |
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 | onCheck: _propTypes2.default.func,
|
280 | |
281 |
|
282 |
|
283 | style: _propTypes2.default.object,
|
284 | |
285 |
|
286 |
|
287 |
|
288 | uncheckedIcon: _propTypes2.default.element,
|
289 | |
290 |
|
291 |
|
292 | valueLink: _propTypes2.default.object
|
293 | } : {};
|
294 | exports.default = Checkbox; |
\ | No newline at end of file |