d2-ui
Version:
276 lines (231 loc) • 10.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _simpleAssign = require('simple-assign');
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _EnhancedSwitch = require('../internal/EnhancedSwitch');
var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch);
var _transitions = require('../styles/transitions');
var _transitions2 = _interopRequireDefault(_transitions);
var _checkBoxOutlineBlank = require('../svg-icons/toggle/check-box-outline-blank');
var _checkBoxOutlineBlank2 = _interopRequireDefault(_checkBoxOutlineBlank);
var _checkBox = require('../svg-icons/toggle/check-box');
var _checkBox2 = _interopRequireDefault(_checkBox);
var _deprecatedPropType = require('../utils/deprecatedPropType');
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function getStyles(props, context) {
var checkbox = context.muiTheme.checkbox;
var checkboxSize = 24;
return {
icon: {
height: checkboxSize,
width: checkboxSize
},
check: {
position: 'absolute',
opacity: 0,
transform: 'scale(0)',
transitionOrigin: '50% 50%',
transition: _transitions2.default.easeOut('450ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('0ms', 'transform', '450ms'),
fill: checkbox.checkedColor
},
box: {
position: 'absolute',
opacity: 1,
fill: checkbox.boxColor,
transition: _transitions2.default.easeOut('2s', null, '200ms')
},
checkWhenSwitched: {
opacity: 1,
transform: 'scale(1)',
transition: _transitions2.default.easeOut('0ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('800ms', 'transform', '0ms')
},
boxWhenSwitched: {
transition: _transitions2.default.easeOut('100ms', null, '0ms'),
fill: checkbox.checkedColor
},
checkWhenDisabled: {
fill: checkbox.disabledColor
},
boxWhenDisabled: {
fill: props.checked ? 'transparent' : checkbox.disabledColor
},
label: {
color: props.disabled ? checkbox.labelDisabledColor : checkbox.labelColor
}
};
}
var Checkbox = function (_Component) {
_inherits(Checkbox, _Component);
function Checkbox() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, Checkbox);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { switched: false }, _this.handleCheck = function (event, isInputChecked) {
if (_this.props.onCheck) _this.props.onCheck(event, isInputChecked);
}, _this.handleStateChange = function (newSwitched) {
_this.setState({ switched: newSwitched });
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Checkbox, [{
key: 'componentWillMount',
value: function componentWillMount() {
var _props = this.props;
var checked = _props.checked;
var defaultChecked = _props.defaultChecked;
var valueLink = _props.valueLink;
if (checked || defaultChecked || valueLink && valueLink.value) {
this.setState({ switched: true });
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.setState({
switched: this.props.checked !== nextProps.checked ? nextProps.checked : this.state.switched
});
}
}, {
key: 'isChecked',
value: function isChecked() {
return this.refs.enhancedSwitch.isSwitched();
}
}, {
key: 'setChecked',
value: function setChecked(newCheckedValue) {
this.refs.enhancedSwitch.setSwitched(newCheckedValue);
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props;
var iconStyle = _props2.iconStyle;
var onCheck = _props2.onCheck;
var // eslint-disable-line no-unused-vars
checkedIcon = _props2.checkedIcon;
var uncheckedIcon = _props2.uncheckedIcon;
var unCheckedIcon = _props2.unCheckedIcon;
var other = _objectWithoutProperties(_props2, ['iconStyle', 'onCheck', 'checkedIcon', 'uncheckedIcon', 'unCheckedIcon']);
var styles = getStyles(this.props, this.context);
var boxStyles = (0, _simpleAssign2.default)(styles.box, this.state.switched && styles.boxWhenSwitched, iconStyle, this.props.disabled && styles.boxWhenDisabled);
var checkStyles = (0, _simpleAssign2.default)(styles.check, this.state.switched && styles.checkWhenSwitched, iconStyle, this.props.disabled && styles.checkWhenDisabled);
var checkedElement = checkedIcon ? _react2.default.cloneElement(checkedIcon, {
style: (0, _simpleAssign2.default)(checkStyles, checkedIcon.props.style)
}) : _react2.default.createElement(_checkBox2.default, {
style: checkStyles
});
var unCheckedElement = unCheckedIcon || uncheckedIcon ? _react2.default.cloneElement(unCheckedIcon || uncheckedIcon, {
style: (0, _simpleAssign2.default)(boxStyles, (unCheckedIcon || uncheckedIcon).props.style)
}) : _react2.default.createElement(_checkBoxOutlineBlank2.default, {
style: boxStyles
});
var checkboxElement = _react2.default.createElement(
'div',
null,
unCheckedElement,
checkedElement
);
var rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill;
var mergedIconStyle = (0, _simpleAssign2.default)(styles.icon, iconStyle);
var labelStyle = (0, _simpleAssign2.default)(styles.label, this.props.labelStyle);
var enhancedSwitchProps = {
ref: 'enhancedSwitch',
inputType: 'checkbox',
switched: this.state.switched,
switchElement: checkboxElement,
rippleColor: rippleColor,
iconStyle: mergedIconStyle,
onSwitch: this.handleCheck,
labelStyle: labelStyle,
onParentShouldUpdate: this.handleStateChange,
labelPosition: this.props.labelPosition
};
return _react2.default.createElement(_EnhancedSwitch2.default, _extends({}, other, enhancedSwitchProps));
}
}]);
return Checkbox;
}(_react.Component);
Checkbox.propTypes = {
/**
* Checkbox is checked if true.
*/
checked: _react.PropTypes.bool,
/**
* The SvgIcon to use for the checked state.
* This is useful to create icon toggles.
*/
checkedIcon: _react.PropTypes.element,
/**
* The default state of our checkbox component.
* **Warning:** This cannot be used in conjunction with `checked`.
* Decide between using a controlled or uncontrolled input element and remove one of these props.
* More info: https://fb.me/react-controlled-components
*/
defaultChecked: _react.PropTypes.bool,
/**
* Disabled if true.
*/
disabled: _react.PropTypes.bool,
/**
* Overrides the inline-styles of the icon element.
*/
iconStyle: _react.PropTypes.object,
/**
* Overrides the inline-styles of the input element.
*/
inputStyle: _react.PropTypes.object,
/**
* Where the label will be placed next to the checkbox.
*/
labelPosition: _react.PropTypes.oneOf(['left', 'right']),
/**
* Overrides the inline-styles of the Checkbox element label.
*/
labelStyle: _react.PropTypes.object,
/**
* Callback function that is fired when the checkbox is checked.
*
* @param {object} event `change` event targeting the underlying checkbox `input`.
* @param {boolean} isInputChecked The `checked` value of the underlying checkbox `input`.
*/
onCheck: _react.PropTypes.func,
/**
* Override the inline-styles of the root element.
*/
style: _react.PropTypes.object,
/**
* The SvgIcon to use for the unchecked state.
* This is useful to create icon toggles.
*/
unCheckedIcon: (0, _deprecatedPropType2.default)(_react.PropTypes.element, 'Use uncheckedIcon instead.'),
/**
* The SvgIcon to use for the unchecked state.
* This is useful to create icon toggles.
*/
uncheckedIcon: _react.PropTypes.element,
/**
* ValueLink for when using controlled checkbox.
*/
valueLink: _react.PropTypes.object
};
Checkbox.defaultProps = {
labelPosition: 'right',
disabled: false
};
Checkbox.contextTypes = {
muiTheme: _react.PropTypes.object.isRequired
};
exports.default = Checkbox;