shineout/es/Checkbox/CheckItem.js

Shein 前端组件库

import _objectSpread from "@babel/runtime/helpers/objectSpread";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import classnames from 'classnames';
import { PureComponent } from '../component';
import { defaultProps } from '../utils/defaultProps';
import { getUidStr } from '../utils/uid';
import { getDirectionClass } from '../utils/classname';
import { isEnterPress, isFunc } from '../utils/is';
import Input from '../Input';
import Spin from '../Spin';
import { checkinputClass } from './styles';
import { isRTL } from '../config';
import getDataset from '../utils/dom/getDataset';

function checkItem(type) {
  var CheckItem =
  /*#__PURE__*/
  function (_PureComponent) {
    _inheritsLoose(CheckItem, _PureComponent);

    function CheckItem(props) {
      var _this;

      _this = _PureComponent.call(this, props) || this;

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "input", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "el", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClick", function (e) {
        e.stopPropagation();
        var onClick = _this.props.onClick;
        if (isFunc(onClick)) onClick(e);
      });

      _this.state = {
        checked: typeof props.checked === 'function' ? undefined : props.checked
      };
      _this.id = "cb_" + getUidStr();
      _this.input = null;
      _this.el = null;
      _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.handleEnter = _this.handleEnter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.bindRef = _this.bindRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      return _this;
    }

    var _proto = CheckItem.prototype;

    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
      var _this$props = this.props,
          checked = _this$props.checked,
          inputable = _this$props.inputable,
          value = _this$props.value,
          htmlValue = _this$props.htmlValue;

      if (prevProps.value !== value && checked === undefined) {
        // eslint-disable-next-line
        this.setState({
          checked: inputable ? !!value : value === htmlValue
        });
      }
    };

    _proto.getChecked = function getChecked() {
      var _this$props2 = this.props,
          checked = _this$props2.checked,
          value = _this$props2.value,
          htmlValue = _this$props2.htmlValue; // 传函数的用法

      if (typeof checked === 'function') return checked(htmlValue);
      if (checked !== undefined) return checked;
      if (this.state.checked === undefined) return value === htmlValue;
      return this.state.checked;
    };

    _proto.getProp = function getProp(key) {
      if (this.props[key] !== undefined) return this.props[key];
      return this.state[key];
    };

    _proto.bindRef = function bindRef(el) {
      if (el) this.el = el;
    };

    _proto.handleEnter = function handleEnter(e) {
      if (isEnterPress(e)) {
        if (type === 'radio' && this.getChecked()) return;
        this.handleChange({
          target: {
            checked: !this.getChecked()
          }
        }); // e.target.click()
        // if (this.el) this.el.focus()
      }
    };

    _proto.handleChange = function handleChange(e) {
      var _this2 = this;

      var _this$props3 = this.props,
          onChange = _this$props3.onChange,
          onRawChange = _this$props3.onRawChange,
          index = _this$props3.index,
          inputable = _this$props3.inputable;
      var checked = e.target.checked;
      this.setState({
        checked: checked
      }, function () {
        return _this2.el.focus();
      });

      if (type === 'switch' && onChange) {
        onChange(checked);
        return;
      }

      var value = inputable ? this.props.value : this.props.htmlValue;
      if (onRawChange) onRawChange(value, checked);
      value = checked ? value : undefined;
      if (onChange) onChange(value, checked, index);
    };

    _proto.handleInputChange = function handleInputChange(val) {
      var _this$props4 = this.props,
          onChange = _this$props4.onChange,
          index = _this$props4.index;
      var checked = val.length > 0;
      if (onChange) onChange(val, checked, index);
    };

    _proto.render = function render() {
      var _this$props5 = this.props,
          disabled = _this$props5.disabled,
          style = _this$props5.style,
          content = _this$props5.content,
          size = _this$props5.size,
          children = _this$props5.children,
          inputable = _this$props5.inputable,
          loading = _this$props5.loading;
      var rtl = isRTL();
      var checked = this.getChecked();
      var isSwitch = type === 'switch';
      var ban = disabled || isSwitch && loading;
      var className = classnames(checkinputClass('_', ban && 'disabled', checked === true && 'checked', checked === 'indeterminate' && 'indeterminate', isSwitch && 'switch', loading && 'loading', type + "-container", rtl && 'rtl', {
        large: size === 'large',
        small: size === 'small'
      }), this.props.className);

      var _ref = content || [],
          checkedChildren = _ref[0],
          uncheckedChildren = _ref[1];

      var switchChildren = isSwitch && size !== 'small' ? React.createElement("span", {
        className: checkinputClass('switch-children')
      }, checked ? checkedChildren : uncheckedChildren) : null;
      var value = typeof this.props.value === 'string' ? this.props.value : '';
      return React.createElement("label", _extends({
        onKeyDown: this.handleEnter,
        className: className,
        style: style,
        htmlFor: this.id,
        tabIndex: disabled ? undefined : 0,
        ref: this.bindRef
        /* @ts-ignore */
        ,
        disabled: ban
      }, getDataset(this.props)), switchChildren, React.createElement("input", {
        id: this.id,
        disabled: ban,
        tabIndex: -1,
        type: isSwitch ? 'checkbox' : type,
        onClick: this.onClick,
        onChange: this.handleChange,
        checked: checked
      }), React.createElement("i", {
        className: checkinputClass('indicator', type)
      }), children && !isSwitch && React.createElement("span", {
        className: checkinputClass('desc')
      }, children), inputable && !isSwitch && checked && React.createElement(Input, {
        className: checkinputClass('text'),
        onChange: this.handleInputChange,
        value: value
      }), isSwitch && React.createElement("span", {
        className: checkinputClass(getDirectionClass('switch-indicator'))
      }, loading ? React.createElement(Spin, {
        size: "auto",
        color: "none",
        name: "ring"
      }) : null));
    };

    return CheckItem;
  }(PureComponent);

  _defineProperty(CheckItem, "defaultProps", _objectSpread({}, defaultProps, {
    htmlValue: true,
    onClick: undefined,
    content: []
  }));

  return CheckItem;
}

export default checkItem;