doly
Version:
doly ui components
225 lines (182 loc) • 8.63 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _common = require("../_style/common");
var _createTag = _interopRequireDefault(require("../_utils/createTag"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
function _templateObject2() {
var data = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n position: relative;\n cursor: pointer;\n display: inline-block;\n vertical-align: middle;\n align-self: center;\n\n ", "{\n box-sizing: border-box;\n position: relative;\n cursor: pointer;\n \n z-index: 0;\n margin: 0;\n padding: 0;\n appearance: none;\n border: 0;\n transition: all .3s;\n\n ", "\n\n &::before, &::after{\n content: \"\";\n position: absolute;\n background: #fff;\n transition: all .2s;\n\n height: ", ";\n left: ", ";\n top: ", ";\n border-radius: ", ";\n }\n\n &::before{\n box-sizing: border-box;\n z-index: 1;\n width: 48px;\n transform: scale(1);\n\n ", ";\n }\n\n &::after{\n z-index: 2;\n box-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n\n width: ", ";\n }\n }\n \n input{\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n border: 0 none;\n\n &:checked+", "{\n\n ", ";\n\n &::before{\n transform: scale(0);\n }\n\n &::after{\n transform: translateX(", ");\n }\n }\n\n &:disabled+", "{\n opacity: 0.3;\n }\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = (0, _taggedTemplateLiteral2.default)([""]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var labelTag = (0, _createTag.default)({
tag: 'label',
propsToOmit: ['color', 'platform']
});
var StyleCheckbox = _styledComponents.default.div(_templateObject());
var StyleSwitch = (0, _styledComponents.default)(labelTag)(_templateObject2(), StyleCheckbox, function (props) {
var width = '51px',
height = '31px',
round = '31px',
backgroundColor = '#e5e5e5';
if (props.platform === 'android') {
width = '72px';
height = '23px';
round = '3px';
backgroundColor = '#a7aaa6';
}
return "\n width: ".concat(width, ";\n height: ").concat(height, ";\n border-radius: ").concat(round, ";\n background: ").concat(backgroundColor, ";\n ");
}, function (props) {
return props.platform === 'android' ? '21px' : '28px';
}, function (props) {
return props.platform === 'android' ? '1px' : '1.5px';
}, function (props) {
return props.platform === 'android' ? '1px' : '1.5px';
}, function (props) {
return props.platform === 'android' ? '2px' : '28px';
}, function (props) {
return props.platform === 'android' ? 'display: none' : '';
}, function (props) {
return props.platform === 'android' ? '35px' : '28px';
}, StyleCheckbox, function (props) {
var color = props.platform === 'android' ? '#108ee9' : '#4dd865';
if (props.color) {
color = props.color;
}
return 'background: ' + color + ';';
}, function (props) {
return props.platform === 'android' ? '35px' : '20px';
}, StyleCheckbox);
var noop = function noop() {};
var Switch =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Switch, _React$Component);
function Switch(props) {
var _this;
(0, _classCallCheck2.default)(this, Switch);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Switch).call(this, props));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleChange", function (e) {
var _this$props = _this.props,
onChange = _this$props.onChange,
onClick = _this$props.onClick,
disabled = _this$props.disabled;
var checked = _this.state.checked;
if (!disabled) {
checked = !checked;
if (!('checked' in _this.props)) {
_this.setState({
checked: checked
});
}
}
onChange(checked);
});
var _checked = false;
if ('checked' in props) {
_checked = !!props.checked;
} else {
_checked = !!props.defaultChecked;
}
_this.state = {
checked: _checked
};
return _this;
}
(0, _createClass2.default)(Switch, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if ('checked' in nextProps) {
this.setState({
checked: !!nextProps.checked
});
}
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
if ('checked' in nextProps) {
return nextProps.checked !== this.state.checked;
} else {
if (this.state.checked !== nextState.checked) {
return true;
} else {
return false;
}
}
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
disabled = _this$props2.disabled,
name = _this$props2.name,
color = _this$props2.color,
platform = _this$props2.platform,
rest = (0, _objectWithoutProperties2.default)(_this$props2, ["disabled", "name", "color", "platform"]);
var checked = this.state.checked;
var globalProps = Object.keys(rest).reduce(function (prev, key) {
if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
prev[key] = rest[key];
}
return prev;
}, {});
return _react.default.createElement(StyleSwitch, {
platform: platform,
color: color
}, _react.default.createElement(_common.GlobalStyle, null), _react.default.createElement("input", (0, _extends2.default)({
type: "checkbox",
name: name,
checked: checked,
disabled: disabled,
value: checked ? 'on' : 'off',
onChange: this.handleChange
}, globalProps)), _react.default.createElement(StyleCheckbox, null));
}
}]);
return Switch;
}(_react.default.Component);
exports.default = Switch;
(0, _defineProperty2.default)(Switch, "propTypes", {
checked: _propTypes.default.bool,
defaultChecked: _propTypes.default.bool,
disabled: _propTypes.default.bool,
color: _propTypes.default.string,
platform: _propTypes.default.oneOf(['ios', 'android']),
name: _propTypes.default.string,
onChange: _propTypes.default.func
});
(0, _defineProperty2.default)(Switch, "defaultProps", {
// checked: false,
// defaultChecked: false,
// disabled: false,
// color: '#4dd865',
platform: 'ios',
name: '',
onChange: noop
});