@beisen-phoenix/switch/lib/index.js

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import React from 'react';
import classNames from 'classnames';
import './index.css';

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

  function Switch(props) {
    var _this;

    _classCallCheck(this, Switch);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Switch).call(this, props));
    _this.node = void 0;

    _this.onClick = function (e) {
      var checked = _this.state.checked;
      var onClick = _this.props.onClick;
      var newChecked = !checked;

      _this.setChecked(newChecked, e);

      onClick && onClick(newChecked, e);
    };

    _this.onKeyDown = function (e) {
      if (e.keyCode === 37) {
        _this.setChecked(false, e);
      } else if (e.keyCode === 39) {
        _this.setChecked(true, e);
      }
    };

    _this.onMouseUp = function (e) {
      var onMouseUp = _this.props.onMouseUp;

      _this.blur();

      onMouseUp && onMouseUp(e);
    };

    var _checked = false;

    if ('checked' in props) {
      _checked = !!props.checked;
    } else {
      _checked = !!props.defaultChecked;
    }

    _this.state = {
      checked: _checked,
      isChanged: false
    };
    _this.node = React.createRef();
    return _this;
  }

  _createClass(Switch, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
          autoFocus = _this$props.autoFocus,
          disabled = _this$props.disabled,
          loading = _this$props.loading;

      if (autoFocus && !disabled && !loading) {
        this.focus();
      }
    }
  }, {
    key: "setChecked",
    value: function setChecked(checked, e) {
      var isChanged = this.state.isChanged;
      var _this$props2 = this.props,
          disabled = _this$props2.disabled,
          loading = _this$props2.loading,
          onChange = _this$props2.onChange;

      if (disabled || loading) {
        return;
      }

      if (!('checked' in this.props)) {
        this.setState({
          checked: checked
        });
      }

      !isChanged && this.setState({
        isChanged: true
      });
      onChange && onChange(checked, e);
    }
  }, {
    key: "focus",
    value: function focus() {
      if (this.node.current) {
        this.node.current.focus();
      }
    }
  }, {
    key: "blur",
    value: function blur() {
      if (this.node.current) {
        this.node.current.blur();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props3 = this.props,
          className = _this$props3.className,
          size = _this$props3.size,
          prefixCls = _this$props3.prefixCls,
          disabled = _this$props3.disabled,
          loading = _this$props3.loading,
          checkedChildren = _this$props3.checkedChildren,
          unCheckedChildren = _this$props3.unCheckedChildren,
          onChange = _this$props3.onChange,
          restProps = _objectWithoutProperties(_this$props3, ["className", "size", "prefixCls", "disabled", "loading", "checkedChildren", "unCheckedChildren", "onChange"]);

      var _this$state = this.state,
          checked = _this$state.checked,
          isChanged = _this$state.isChanged;
      var switchClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, "".concat(prefixCls, "_small"), size === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "_checked"), checked), _defineProperty(_classNames, "".concat(prefixCls, "_disabled"), disabled || loading), _defineProperty(_classNames, className, !!className), _classNames));
      return React.createElement("button", _extends({}, restProps, {
        type: "button",
        disabled: disabled || loading,
        className: switchClassName,
        ref: this.node,
        onKeyDown: this.onKeyDown,
        onClick: this.onClick,
        onMouseUp: this.onMouseUp
      }), React.createElement("span", {
        className: "".concat(prefixCls, "__child")
      }, checked ? checkedChildren : unCheckedChildren), // 手动切换时的动画
      isChanged && React.createElement("div", {
        className: "".concat(prefixCls, "__ani")
      }), React.createElement("div", {
        className: "".concat(prefixCls, "__bar")
      }, loading && React.createElement("div", {
        className: "".concat(prefixCls, "__loading")
      })));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps) {
      var newState = {};

      if ('checked' in nextProps) {
        newState.checked = !!nextProps.checked;
      }

      return newState;
    }
  }]);

  return Switch;
}(React.Component);

Switch.defaultProps = {
  prefixCls: 'phoenix-switch',
  checkedChildren: null,
  unCheckedChildren: null,
  className: '',
  defaultChecked: false
};
export default Switch;