shineout/es/Cascader/Node.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import _createClass from "@babel/runtime/helpers/createClass";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import Spin from '../Spin';
import { isRTL } from '../config';
import Caret from '../icons/Caret';
import Checkbox from '../Checkbox';
import { cascaderClass } from './styles';
import { PureComponent } from '../component';
import { CHANGE_TOPIC } from '../Datum/types';
import { getParent } from '../utils/dom/element';
import { checkinputClass } from '../Checkbox/styles';
import { getDirectionClass } from '../utils/classname';
var checkBoxStyle = {
  marginRight: 8,
  marginTop: -1,
  verticalAlign: 'top'
};

var Node =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Node, _PureComponent);

  function Node(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleUpdate", void 0);

    _this.state = {
      loading: false
    };
    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handlePathChange = _this.handlePathChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleUpdate = _this.forceUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));

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

    return _this;
  }

  var _proto = Node.prototype;

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

    this.props.datum.unsubscribe(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 && !getParent(e.target, "." + 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 (getParent(e.target, "." + 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 = 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.createElement("span", {
      className: cascaderClass(getDirectionClass('caret'))
    }, React.createElement(Caret, null));

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

    return React.createElement("div", _extends({
      className: className,
      style: style
    }, events), multiple && !(shouldFinal && this.hasChildren) && React.createElement(Checkbox, {
      checked: datum.getChecked(id),
      disabled: disabled,
      onChange: this.handleChange,
      style: checkBoxStyle
    }), this.renderContent(), loading && children === undefined && React.createElement(Spin, {
      className: cascaderClass('loading'),
      size: 10,
      name: "ring"
    }), (hasChildren || mayChildren) && caret);
  };

  _createClass(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;
}(PureComponent);

export default Node;