shineout/css/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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

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

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

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

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

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

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

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

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

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;
    _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)));
    return _this;
  }

  var _proto = Node.prototype;

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

  _proto.handleClick = function handleClick() {
    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;
    onPathChange(id, data, path, true);

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

    if (loader && !this.state.loading) {
      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

    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);
    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;
    var loading = this.state.loading;
    var disabled = this.checkDisabled();
    var children = data[childrenKey];
    var hasChildren = children && children.length > 0;
    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' || !children || children.length === 0)) {
      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 && _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);
  };

  return Node;
}(_component.PureComponent);

Node.propTypes = {
  active: _propTypes.default.bool,
  data: _propTypes.default.object,
  datum: _propTypes.default.object,
  disabled: _propTypes.default.bool,
  expandTrigger: _propTypes.default.string,
  id: _propTypes.default.string,
  loader: _propTypes.default.func,
  multiple: _propTypes.default.bool,
  onChange: _propTypes.default.func,
  onPathChange: _propTypes.default.func,
  path: _propTypes.default.array,
  renderItem: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]).isRequired,
  childrenKey: _propTypes.default.string
};
var _default = Node;
exports.default = _default;