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

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Tree from "@alifd/next/es/tree";
var _excluded = ["readOnly", "checkable", "value", "dataSource"];
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { pick as RPick } from 'ramda';
import { NextTreePropsKey } from "./utils/properties";
import { TreeNodeStatus } from "./interface";
import { genRelationMap, calculateStatus, getValueDiff } from "./data-adapter";
var TreeNode = _Tree.Node;
var PREFIX = 'aliretail-tree-field';

var TreeField = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(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 = genRelationMap(dataSource);
      var diffList = 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 = calculateStatus(diffList, item[keyCode], relationMap);
            }

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

              case 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 = _objectWithoutPropertiesLoose(_this$props2, _excluded);

    var _this$state$treeValue = this.state.treeValue,
        treeValue = _this$state$treeValue === void 0 ? [] : _this$state$treeValue;
    var treeProps = RPick(NextTreePropsKey, rest);
    return /*#__PURE__*/React.createElement(_Tree, _extends({}, 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'
};
export default TreeField;