@aliretail/react-whale-checked-all/es/index.js

whale-checked-all

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Checkbox from "@alifd/next/es/checkbox";
var _excluded = ["className", "value", "dataSource", "disabled", "readOnly"];
import * as React from 'react';
import cx from 'classnames';
import './index.scss';
var CheckboxGroup = _Checkbox.Group;

var WhaleCheckedAll = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(WhaleCheckedAll, _React$Component);

  function WhaleCheckedAll() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.onChange = function (selectedItems) {
      var onChange = _this.props.onChange;
      onChange(selectedItems);
    };

    _this.handleChangeAll = function (v) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          dataSource = _this$props.dataSource;

      if (v) {
        onChange(dataSource.map(function (i) {
          if (typeof i === 'object') {
            return i.value;
          }

          return i;
        }));
      } else {
        onChange([]);
      }
    };

    _this.renderReadOnlyLabel = function () {
      var _this$props2 = _this.props,
          value = _this$props2.value,
          dataSource = _this$props2.dataSource;
      var labels = [];
      dataSource.forEach(function (i) {
        if (typeof i === 'object') {
          if (value && value.indexOf(i.value) > -1) {
            labels.push(i.label);
          }
        } else if (value && value.indexOf(i) > -1) {
          labels.push(i);
        }
      });
      return /*#__PURE__*/React.createElement("div", null, labels.join('、'));
    };

    return _this;
  }

  var _proto = WhaleCheckedAll.prototype;

  _proto.render = function render() {
    var _cx;

    var _this$props3 = this.props,
        className = _this$props3.className,
        _this$props3$value = _this$props3.value,
        value = _this$props3$value === void 0 ? [] : _this$props3$value,
        dataSource = _this$props3.dataSource,
        disabled = _this$props3.disabled,
        readOnly = _this$props3.readOnly,
        others = _objectWithoutPropertiesLoose(_this$props3, _excluded); // 用于判断是否全选


    var indeterminate = value.length > 0 && value.length < dataSource.length;
    var classes = cx((_cx = {
      'whale-checked-all': true
    }, _cx[className] = !!className, _cx['biz-whaleCheckedAll'] = true, _cx));

    if (readOnly) {
      return /*#__PURE__*/React.createElement("div", {
        className: classes
      }, this.renderReadOnlyLabel());
    }

    return /*#__PURE__*/React.createElement("div", {
      className: classes
    }, /*#__PURE__*/React.createElement(_Checkbox, {
      className: "whale-checked-all-all",
      checked: value.length === dataSource.length,
      indeterminate: indeterminate,
      onChange: this.handleChangeAll,
      disabled: disabled
    }, "\u5168\u90E8"), /*#__PURE__*/React.createElement(CheckboxGroup, _extends({
      value: value,
      dataSource: dataSource,
      onChange: this.onChange,
      disabled: disabled
    }, others)));
  };

  return WhaleCheckedAll;
}(React.Component);

WhaleCheckedAll.displayName = 'WhaleCheckedAll';
WhaleCheckedAll.defaultProps = {
  value: [],
  dataSource: [],
  onChange: function onChange() {},
  disabled: false,
  readOnly: false
};
export default WhaleCheckedAll;