@jdcfe/yep-react/es/switch/index.js

一套移动端的React组件库

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import * as React from 'react';
import classNames from 'classnames';

var Switch = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(Switch, _React$PureComponent);

  var _super = _createSuper(Switch);

  function Switch(props) {
    var _this;

    _classCallCheck(this, Switch);

    _this = _super.call(this, props);
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Switch, [{
    key: "onChange",
    value: function onChange(e) {
      var checked = e.target.checked;

      if (this.props.handleSwitch) {
        this.props.handleSwitch(checked);
      }
    }
  }, {
    key: "onClick",
    value: function onClick(e) {
      var _this$props = this.props,
          onClick = _this$props.onClick,
          checked = _this$props.currentStatus;

      if (onClick) {
        var val;

        if (e && e.target && e.target.checked !== undefined) {
          val = e.target.checked;
        } else {
          val = checked;
        }

        onClick(val);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames, _classNames2;

      var _this$props2 = this.props,
          disabled = _this$props2.disabled,
          prefixCls = _this$props2.prefixCls,
          className = _this$props2.className,
          style = _this$props2.style,
          color = _this$props2.color,
          name = _this$props2.name,
          checked = _this$props2.currentStatus;
      var wrapperCls = classNames(prefixCls, className);
      var innerCls = classNames("".concat(prefixCls, "-inner"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-inner-checked"), checked), _defineProperty(_classNames, "".concat(prefixCls, "-inner-disabled"), disabled), _classNames));
      var circleCls = classNames("".concat(prefixCls, "-circle"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-circle-unchecked"), !checked), _defineProperty(_classNames2, "".concat(prefixCls, "-circle-checked"), checked), _classNames2));

      if (color && checked) {
        style.backgroundColor = color;
      }

      return /*#__PURE__*/React.createElement("label", {
        className: wrapperCls
      }, /*#__PURE__*/React.createElement("input", _extends({
        type: "checkbox",
        name: name,
        className: "".concat(prefixCls, "-checkbox"),
        disabled: disabled,
        checked: checked,
        onChange: this.onChange,
        value: checked ? 'on' : 'off'
      }, !disabled ? {
        onClick: this.onClick
      } : {})), /*#__PURE__*/React.createElement("div", {
        className: innerCls,
        style: style
      }), /*#__PURE__*/React.createElement("div", {
        className: circleCls
      }));
    }
  }]);

  return Switch;
}(React.PureComponent);

export { Switch as default };
Switch.defaultProps = {
  prefixCls: 'Yep-switch',
  style: {},
  name: '',
  currentStatus: false,
  disabled: false,
  onClick: function onClick() {},
  handleSwitch: function handleSwitch() {}
};