shineout/lib/Cascader/Node.js

Shein 前端组件库

"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 _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

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

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

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

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

var _Spin = _interopRequireDefault(require("../Spin"));

var _config = require("../config");

var _Caret = _interopRequireDefault(require("../icons/Caret"));

var _Checkbox = _interopRequireDefault(require("../Checkbox"));

var _styles = require("./styles");

var _component = require("../component");

var _types = require("../Datum/types");

var _element = require("../utils/dom/element");

var _styles2 = require("../Checkbox/styles");

var _classname = require("../utils/classname");

var checkBoxStyle = {
  marginRight: 8,
  marginTop: -1,
  verticalAlign: 'top'
};

var Node =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inheritsLoose2.default)(Node, _PureComponent);

  function Node(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleUpdate", void 0);
    _this.state = {
      loading: false
    };
    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.handlePathChange = _this.handlePathChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.handleUpdate = _this.forceUpdate.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));

    _this.props.datum.subscribe(_types.CHANGE_TOPIC, _this.handleUpdate);

    return _this;
  }

  var _proto = Node.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    _PureComponent.prototype.componentWillUnmount.call(this);

    this.props.datum.unsubscribe(_types.CHANGE_TOPIC, this.handleUpdate);
  };

  _proto.checkDisabled = function checkDisabled() {
    var _this$props = this.props,
        datum = _this$props.datum,
        id = _this$props.id;
    return datum.isDisabled(id);
  };

  _proto.handleClick = function handleClick(e) {
    var _this$props2 = this.props,
        id = _this$props2.id,
        data = _this$props2.data,
        path = _this$props2.path,
        onChange = _this$props2.onChange,
        onPathChange = _this$props2.onPathChange,
        loader = _this$props2.loader,
        multiple = _this$props2.multiple,
        datum = _this$props2.datum,
        shouldFinal = _this$props2.shouldFinal;

    if (shouldFinal && this.hasChildren) {
      this.handlePathChange();
      return;
    }

    if (onPathChange) onPathChange(id, data, path, true);

    if (!multiple) {
      if (onChange && path) onChange([].concat(path, [id]), datum.getDataById(id));
    }

    if (loader && !this.state.loading && !(0, _element.getParent)(e.target, "." + (0, _styles2.checkinputClass)('_'))) {
      this.setState({
        loading: true
      });
      loader(id, data);
    }
  };

  _proto.handlePathChange = function handlePathChange() {
    var _this$props3 = this.props,
        id = _this$props3.id,
        data = _this$props3.data,
        path = _this$props3.path,
        onPathChange = _this$props3.onPathChange; // if (active) return

    if (onPathChange) onPathChange(id, data, path);
  };

  _proto.handleChange = function handleChange(_, checked) {
    var _this$props4 = this.props,
        datum = _this$props4.datum,
        id = _this$props4.id,
        onChange = _this$props4.onChange;
    datum.set(id, checked ? 1 : 0);
    if (onChange) onChange(datum.getValue(), datum.getDataById(id));
  };

  _proto.handleSelect = function handleSelect(e) {
    var _this$props5 = this.props,
        datum = _this$props5.datum,
        id = _this$props5.id;
    if ((0, _element.getParent)(e.target, "." + (0, _styles2.checkinputClass)('_'))) return;
    var checked = datum.getChecked(id);
    this.handleChange(null, !checked);
  };

  _proto.renderContent = function renderContent() {
    var _this$props6 = this.props,
        id = _this$props6.id,
        active = _this$props6.active,
        data = _this$props6.data,
        renderItem = _this$props6.renderItem;
    var render = typeof renderItem === 'function' ? renderItem : function (d) {
      return d[renderItem];
    };
    return render(data, active, id);
  };

  _proto.render = function render() {
    var _this$props7 = this.props,
        active = _this$props7.active,
        data = _this$props7.data,
        multiple = _this$props7.multiple,
        datum = _this$props7.datum,
        id = _this$props7.id,
        loader = _this$props7.loader,
        expandTrigger = _this$props7.expandTrigger,
        childrenKey = _this$props7.childrenKey,
        shouldFinal = _this$props7.shouldFinal;
    var loading = this.state.loading;
    var disabled = this.checkDisabled();
    var children = data[childrenKey];
    var hasChildren = this.hasChildren;
    var mayChildren = loader && !loading && children === undefined;
    var className = (0, _styles.cascaderClass)('node', active && 'active', disabled && 'disabled', hasChildren && 'has-children', mayChildren && 'may-be-children');
    var style = {};
    var events = {};

    if (!disabled && (expandTrigger !== 'hover-only' || !hasChildren)) {
      events.onClick = this.handleClick;
      style.cursor = 'pointer';
    }

    if (expandTrigger === 'hover' || expandTrigger === 'hover-only') {
      events.onMouseEnter = this.handlePathChange;
      if (multiple) events.onClick = this.handleSelect;
    }

    var caret = _react.default.createElement("span", {
      className: (0, _styles.cascaderClass)((0, _classname.getDirectionClass)('caret'))
    }, _react.default.createElement(_Caret.default, null));

    if ((0, _config.isRTL)() && checkBoxStyle.marginRight !== 0) {
      checkBoxStyle.marginRight = 0;
    }

    return _react.default.createElement("div", (0, _extends2.default)({
      className: className,
      style: style
    }, events), multiple && !(shouldFinal && this.hasChildren) && _react.default.createElement(_Checkbox.default, {
      checked: datum.getChecked(id),
      disabled: disabled,
      onChange: this.handleChange,
      style: checkBoxStyle
    }), this.renderContent(), loading && children === undefined && _react.default.createElement(_Spin.default, {
      className: (0, _styles.cascaderClass)('loading'),
      size: 10,
      name: "ring"
    }), (hasChildren || mayChildren) && caret);
  };

  (0, _createClass2.default)(Node, [{
    key: "hasChildren",
    get: function get() {
      var _this$props8 = this.props,
          data = _this$props8.data,
          childrenKey = _this$props8.childrenKey;
      var children = data[childrenKey];
      return children && children.length > 0;
    }
  }]);
  return Node;
}(_component.PureComponent);

var _default = Node;
exports.default = _default;