@aliretail/react-materials-components/lib/TreeField/index.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _tree = _interopRequireDefault(require("@alifd/next/lib/tree"));

var React = _interopRequireWildcard(require("react"));

var PropTypes = _interopRequireWildcard(require("prop-types"));

var _ramda = require("ramda");

var _properties = require("./utils/properties");

var _interface = require("./interface");

var _dataAdapter = require("./data-adapter");

var _excluded = ["readOnly", "checkable", "value", "dataSource"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var TreeNode = _tree["default"].Node;
var PREFIX = 'aliretail-tree-field';

var TreeField = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(TreeField, _React$Component);

  // 即便 ts 声明了 TreeFieldProps，这里还是要提供 propsTypes，用于 react 报错提示
  TreeField.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
    if ('value' in props) {
      return {
        treeValue: props.value || []
      };
    }

    return null;
  };

  function TreeField(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.renderTreeNode = function (data) {
      var _this$props = _this.props,
          useRange = _this$props.useRange,
          checkable = _this$props.checkable,
          readOnly = _this$props.readOnly,
          addTagText = _this$props.addTagText,
          deleteTagText = _this$props.deleteTagText,
          keyCode = _this$props.keyCode,
          labelCode = _this$props.labelCode,
          changeStatusCode = _this$props.changeStatusCode,
          checkboxDisabled = _this$props.checkboxDisabled,
          _this$props$defaultVa = _this$props.defaultValue,
          defaultValue = _this$props$defaultVa === void 0 ? [] : _this$props$defaultVa,
          dataSource = _this$props.dataSource;
      var treeValue = _this.state.treeValue;
      var relationMap = (0, _dataAdapter.genRelationMap)(dataSource);
      var diffList = (0, _dataAdapter.getValueDiff)(defaultValue, treeValue);
      var labelStatus = 0;
      return data && data.map(function (item) {
        var isDisabled = 'disabled' in item ? item.disabled : checkboxDisabled;
        var label = /*#__PURE__*/React.createElement("span", null, item[labelCode]);
        var addLabel = /*#__PURE__*/React.createElement("div", null, item[labelCode], /*#__PURE__*/React.createElement("span", {
          className: PREFIX + "-add-item"
        }, addTagText));
        var deleteLabel = /*#__PURE__*/React.createElement("div", null, item[labelCode], /*#__PURE__*/React.createElement("span", {
          className: PREFIX + "-delete-item"
        }, deleteTagText));

        switch (useRange) {
          case 'needFrag':
            // 只读状态下根据数据中changeStatus展示状态标识
            if (readOnly) {
              labelStatus = item[changeStatusCode];
            } else if (checkable) {
              labelStatus = (0, _dataAdapter.calculateStatus)(diffList, item[keyCode], relationMap);
            }

            switch (labelStatus) {
              case _interface.TreeNodeStatus.add:
                label = addLabel;
                break;

              case _interface.TreeNodeStatus["delete"]:
                label = deleteLabel;
                break;

              default:
                break;
            }

            break;

          default:
            break;
        }

        return /*#__PURE__*/React.createElement(TreeNode, {
          key: item[keyCode],
          label: label,
          checkboxDisabled: isDisabled
        }, item.children && _this.renderTreeNode(item.children));
      });
    };

    _this.onCheck = function (checkedKeys, extra) {
      var changeFirstParamType = _this.props.changeFirstParamType;
      var checkedNodes = extra.checkedNodes;

      _this.setState({
        treeValue: checkedKeys
      });

      if (_this.props.onChange) {
        changeFirstParamType === 'keys' ? _this.props.onChange(checkedKeys, extra) : _this.props.onChange(checkedNodes, extra);
      }
    };

    _this.state = {
      treeValue: props.value || props.defaultValue || []
    };
    return _this;
  }

  var _proto = TreeField.prototype;

  _proto.render = function render() {
    var _this$props2 = this.props,
        readOnly = _this$props2.readOnly,
        checkable = _this$props2.checkable,
        value = _this$props2.value,
        dataSource = _this$props2.dataSource,
        rest = (0, _objectWithoutPropertiesLoose2["default"])(_this$props2, _excluded);
    var _this$state$treeValue = this.state.treeValue,
        treeValue = _this$state$treeValue === void 0 ? [] : _this$state$treeValue;
    var treeProps = (0, _ramda.pick)(_properties.NextTreePropsKey, rest);
    return /*#__PURE__*/React.createElement(_tree["default"], (0, _extends2["default"])({}, treeProps, {
      checkable: readOnly ? false : checkable,
      onCheck: this.onCheck,
      checkedKeys: treeValue
    }), this.renderTreeNode(dataSource));
  };

  return TreeField;
}(React.Component);

TreeField.propTypes = {
  useRange: PropTypes.string,
  addTagText: PropTypes.string,
  deleteTagText: PropTypes.string,
  readOnly: PropTypes.bool,
  checkboxDisabled: PropTypes.bool,
  checkable: PropTypes.bool,
  value: PropTypes.array,
  dataSource: PropTypes.array,
  keyCode: PropTypes.any,
  labelCode: PropTypes.any,
  changeStatusCode: PropTypes.any,
  changeFirstParamType: PropTypes.string,
  defaultValue: PropTypes.array
};
TreeField.defaultProps = {
  useRange: 'normal',
  addTagText: '新增',
  deleteTagText: '删除',
  readOnly: false,
  checkable: false,
  checkboxDisabled: false,
  dataSource: [],
  keyCode: 'key',
  labelCode: 'label',
  changeStatusCode: 'changeStatus',
  changeFirstParamType: 'keys'
};
var _default = TreeField;
exports["default"] = _default;