maycur-business/lib/TreeTransfer/TreeTransfer.jsx

maycur business react components of web

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

require("maycur-antd/lib/alert/style/css");

var _alert = _interopRequireDefault(require("maycur-antd/lib/alert"));

require("maycur-antd/lib/input/style/css");

var _input2 = _interopRequireDefault(require("maycur-antd/lib/input"));

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

var _SelectableTree = _interopRequireDefault(require("./SelectableTree/SelectableTree"));

var _i18next = _interopRequireDefault(require("i18next"));

var _Loader = _interopRequireDefault(require("../Loader"));

var _lodash = _interopRequireDefault(require("lodash"));

var _utils = _interopRequireDefault(require("../utils/utils"));

var _mkTranslate = _interopRequireDefault(require("../utils/mkTranslate"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var prefix = _utils["default"].prefixCls; // const Loader = () => {
//     return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
//         <Spin />
//     </div>
// };

var Search = _input2["default"].Search;

var TreeTransfer =
/*#__PURE__*/
function (_Component) {
  _inherits(TreeTransfer, _Component);

  function TreeTransfer(props) {
    var _this;

    _classCallCheck(this, TreeTransfer);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TreeTransfer).call(this, props));

    _this.localeProcess = function () {
      _mkTranslate["default"].getNameSpace('TreeTransfer').then(function (t) {
        _this.setState({
          t: t
        });
      });
    };

    _this.generateCheckedKeys = function (value) {
      if (_lodash["default"].isArray(value) && value.length > 0) {
        return value.map(function (item) {
          return item.code;
        });
      } else {
        return [];
      }
    };

    _this.onChangeCheckedKeys = function (checkedKeys) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          maxLength = _this$props.maxLength; // 如果当前选中的数量大于maxLength限制的

      if (checkedKeys.length > maxLength) {
        checkedKeys.shift();
      }

      var _output = [];

      if (_lodash["default"].isArray(checkedKeys) && checkedKeys.length > 0) {
        checkedKeys.forEach(function (checkedKey) {
          if (_this.map[checkedKey]) {
            _output.push(_this.map[checkedKey]);
          }
        });
      }

      if (typeof onChange === 'function') {
        onChange(_output);
      }
    };

    _this.buildMap = function (data) {
      var map = {};

      if (data instanceof Array && data.length > 0) {
        _lodash["default"].forEach(data, function (item) {
          map[item.code] = item;
        });

        _this.map = _lodash["default"].merge(_this.map, map);
      }
    };

    _this.deepBuildMap = function (item) {
      if (item instanceof Array && item.length > 0) {
        _this.buildMap(item);

        item.forEach(function (i) {
          if (i.children && i.children instanceof Array && i.children.length > 0) {
            _this.deepBuildMap(i.children);
          }
        });
      }
    };

    _this.refreshOutput = function (output) {
      var _output = [];

      if (output && output.length > 0) {
        output.forEach(function (item) {
          if (_this.map && _this.map[item.code]) {
            _output.push(_this.map[item.code]);
          } else {
            _output.push(item);
          }
        });
      }

      return _output;
    };

    _this.onClose = function (item, index, e) {
      var checkedKeys = _this.state.checkedKeys;

      var idx = _lodash["default"].findIndex(checkedKeys, function (o) {
        return o === item.code;
      });

      checkedKeys.splice(idx, 1);

      _this.onChangeCheckedKeys(checkedKeys);
    };

    _this.onSearch = function (keyword) {
      var search = _this.props.search;

      if (keyword) {
        if (typeof search === 'function') {
          _this.setState({
            isSearching: true,
            searchingLoading: true
          });

          search(keyword).then(function (data) {
            _this.setState({
              searchResult: data,
              searchingLoading: false
            });

            _this.buildMap(data);
          })["catch"](function (error) {
            _this.setState({
              searchingLoading: false
            });
          });
        }
      } else {
        _this.clearSearching();
      }
    };

    _this.onSearchKeywordChange = function (e) {
      _this.setState({
        keyword: e.target.value
      });
    };

    _this.clearSearching = function () {
      _this.setState({
        isSearching: false,
        searchResult: [],
        keyword: null
      });

      _this.initTree();
    };

    _this.clearBasket = function () {
      _this.onChangeCheckedKeys([]);
    };

    _this.renderTreeShelf = function () {
      var _this$props2 = _this.props,
          fetchChildren = _this$props2.fetchChildren,
          checkStrictly = _this$props2.checkStrictly;
      var _this$state = _this.state,
          input = _this$state.input,
          inputLoading = _this$state.inputLoading,
          checkedKeys = _this$state.checkedKeys;
      return !inputLoading ? input && input.length > 0 ? _react["default"].createElement(_SelectableTree["default"], {
        checkedKeys: checkedKeys,
        checkStrictly: checkStrictly,
        dataSource: input,
        onChange: _this.onChangeCheckedKeys,
        fetchChildren: fetchChildren,
        onBuildMap: _this.buildMap
      }) : _react["default"].createElement("div", {
        className: 'no-data'
      }, _i18next["default"].t('MkGlobal:noData')) : _react["default"].createElement(_Loader["default"], {
        active: true,
        mask: true
      });
    };

    _this.renderSearchShelf = function () {
      var _this$state2 = _this.state,
          searchResult = _this$state2.searchResult,
          searchingLoading = _this$state2.searchingLoading,
          checkedKeys = _this$state2.checkedKeys;
      return !searchingLoading ? searchResult && searchResult.length > 0 ? _react["default"].createElement(_SelectableTree["default"], {
        checkedKeys: checkedKeys,
        dataSource: searchResult,
        onChange: _this.onChangeCheckedKeys,
        onBuildMap: _this.buildMap
      }) : _react["default"].createElement("div", {
        className: 'no-data'
      }, _i18next["default"].t('MkGlobal:noResult')) : _react["default"].createElement(_Loader["default"], {
        active: true,
        mask: true
      });
    };

    _this.renderBasket = function () {
      var _this$state3 = _this.state,
          output = _this$state3.output,
          t = _this$state3.t;
      var _this$props3 = _this.props,
          renderRightListItem = _this$props3.renderRightListItem,
          maxLength = _this$props3.maxLength;
      return _react["default"].createElement(_react["default"].Fragment, null, maxLength && _react["default"].createElement(_alert["default"], {
        type: "warning",
        message: t('maxLength', {
          n: maxLength
        })
      }), output && output.length > 0 ? output.map(function (item, index) {
        return renderRightListItem ? renderRightListItem(item, index, _this.onClose) : _react["default"].createElement("div", {
          className: 'right-item',
          key: index
        }, _react["default"].createElement("div", {
          className: 'name-wrapper'
        }, item._type === 'CATEGORY' ? _react["default"].createElement("span", {
          className: "fm fm-folder-o"
        }) : _react["default"].createElement("span", {
          className: "fm fm-paper"
        }), _react["default"].createElement("span", {
          className: 'name'
        }, _react["default"].createElement("b", null, item.name ? item.name : null))), _react["default"].createElement("div", {
          className: 'delete-btn',
          onClick: _this.onClose.bind(_assertThisInitialized(_this), item, index)
        }, _react["default"].createElement("span", {
          className: "fm fm-trash"
        })));
      }) : _react["default"].createElement("div", {
        className: 'no-data'
      }, _i18next["default"].t('MkGlobal:noData')));
    };

    _this.initTree = function () {
      var dataSourceSync = _this.props.dataSourceSync;

      if (typeof dataSourceSync === 'function') {
        _this.setState({
          inputLoading: true
        });

        try {
          dataSourceSync().then(function (_input) {
            _this.setState({
              input: _input,
              inputLoading: false
            }, function () {
              _this.deepBuildMap(_this.state.input); // 刷新输出：主要解决有些时候值只有code时的显示问题


              _this.setState({
                output: _this.refreshOutput(_this.state.output)
              }, function () {
                _this.buildMap(_this.state.output);
              });
            });
          })["catch"](function (error) {
            _this.setState({
              inputLoading: false
            });
          });
        } catch (error) {
          console.log(error);
        }
      } else {
        _this.deepBuildMap(_this.state.input);

        _this.setState({
          output: _this.refreshOutput(_this.state.output)
        }, function () {
          _this.buildMap(_this.state.output);
        });
      }
    };

    _this.state = {
      input: props.dataSource ? props.dataSource : null,
      output: props.value ? props.value : [],
      checkedKeys: _this.generateCheckedKeys(props.value),
      isSearching: false,
      searchResult: [],
      inputLoading: false,
      searchingLoading: false,
      keyword: null,
      t: _mkTranslate["default"].noop()
    };
    _this.map = {};

    _this.localeProcess();

    return _this;
  }

  _createClass(TreeTransfer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.initTree();
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (!_lodash["default"].isEqual(this.props.value, nextProps.value)) {
        this.setState({
          output: nextProps.value,
          checkedKeys: this.generateCheckedKeys(nextProps.value)
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          title = _this$props4.title,
          placeholder = _this$props4.placeholder,
          hasSearch = _this$props4.hasSearch;
      var _this$state4 = this.state,
          output = _this$state4.output,
          isSearching = _this$state4.isSearching,
          keyword = _this$state4.keyword,
          t = _this$state4.t;
      return _react["default"].createElement("div", {
        className: "".concat(prefix, "-tree-transfer-body")
      }, _react["default"].createElement("div", {
        className: 'selection-box'
      }, _react["default"].createElement("div", {
        className: 'selection-box-title'
      }, title), _react["default"].createElement("div", {
        className: 'selection-box-body'
      }, hasSearch ? _react["default"].createElement("div", {
        className: "search-wrapper"
      }, _react["default"].createElement(Search, {
        value: keyword,
        onChange: this.onSearchKeywordChange,
        onSearch: this.onSearch,
        placeholder: placeholder
      }), isSearching ? _react["default"].createElement("div", {
        className: "clear-btn",
        onClick: this.clearSearching
      }, _react["default"].createElement("span", {
        className: "fm fm-cross"
      })) : null) : null, _react["default"].createElement("div", {
        className: "main-wrapper"
      }, isSearching ? this.renderSearchShelf() : this.renderTreeShelf()))), _react["default"].createElement("div", {
        className: 'middle-icon-box'
      }, _react["default"].createElement("span", {
        className: "fm fm-angle-right"
      })), _react["default"].createElement("div", {
        className: 'selection-box'
      }, _react["default"].createElement("div", {
        className: 'selection-box-title basket-box'
      }, _react["default"].createElement("div", null, _react["default"].createElement("span", {
        className: 'basket-title'
      }, t('selection')), _react["default"].createElement("span", {
        className: 'number'
      }, output ? output.length : null), _react["default"].createElement("span", null, title)), _react["default"].createElement("span", {
        className: 'basket-clear',
        onClick: this.clearBasket
      }, _i18next["default"].t('MkGlobal:clear'))), _react["default"].createElement("div", {
        className: 'selection-box-body'
      }, _react["default"].createElement("div", {
        className: "main-wrapper"
      }, this.renderBasket()))));
    }
  }]);

  return TreeTransfer;
}(_react.Component);

TreeTransfer.defaultProps = {
  hasSearch: true
};
var _default = TreeTransfer;
exports["default"] = _default;