shineout/es/Cascader/Result.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import { inputClass } from '../Input/styles';
import { selectClass } from '../Select/styles';
import { cascaderClass } from './styles';
import Input from './Input';
import icons from '../icons';
import More, { getResetMore } from '../Select/More';
import { addResizeObserver } from '../utils/dom/element';
import { isEmpty, isNumber } from '../utils/is';
import { CHANGE_TOPIC } from '../Datum/types';
import Caret from '../icons/Caret';
import { getDirectionClass } from '../utils/classname';
import InputTitle from '../InputTitle';
import { inputTitleClass } from '../InputTitle/styles';

function Item(_ref) {
  var children = _ref.children,
      close = _ref.close,
      className = _ref.className,
      data = _ref.data,
      isPopover = _ref.isPopover,
      singleRemove = _ref.singleRemove,
      click = _ref.click,
      only = _ref.only,
      isDisabled = _ref.isDisabled;
  var onClose = close ? function (e) {
    close(data, isPopover, e);
  } : undefined;
  var onClick = click ? function () {
    click(data, isPopover);
  } : undefined;
  return React.createElement("a", {
    tabIndex: -1,
    className: classnames(cascaderClass(getDirectionClass('item'), only && 'item-only', isDisabled && 'item-disabled'), className),
    onClick: onClick
  }, children, singleRemove && !isDisabled && React.createElement("span", {
    className: cascaderClass(getDirectionClass('single-remove')),
    onClick: onClose
  }, icons.Close));
}

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

  function Result(props) {
    var _this;

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

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

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

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

    _this.state = {
      more: -1
    };
    _this.handleNodeClick = _this.handleNodeClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.renderItem = _this.renderItem.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.removeTargetNode = _this.removeTargetNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleUpdate = _this.handleUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.bindResult = _this.bindResult.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.resetMore = _this.resetMore.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  var _proto = Result.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var datum = this.props.datum;
    datum.subscribe(CHANGE_TOPIC, this.handleUpdate);
    var compressed = this.props.compressed;

    if (compressed && !this.isCompressedBound()) {
      this.cancelResizeObserver = addResizeObserver(this.resultEl, this.resetMore, {
        direction: 'x'
      });
    }
  };

  _proto.componentDidUpdate = function componentDidUpdate(preProps) {
    this.updateMore(preProps);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    var datum = this.props.datum;
    datum.unsubscribe(CHANGE_TOPIC, this.handleUpdate);
    if (this.cancelResizeObserver) this.cancelResizeObserver();
  };

  _proto.getCompressedBound = function getCompressedBound() {
    var compressedBound = this.props.compressedBound;

    if (this.isCompressedBound()) {
      return compressedBound;
    }

    return this.state.more;
  };

  _proto.handleUpdate = function handleUpdate() {
    this.forceUpdate();
  };

  _proto.bindResult = function bindResult(el) {
    this.resultEl = el;
  };

  _proto.isCompressedBound = function isCompressedBound() {
    var compressedBound = this.props.compressedBound;
    return compressedBound && isNumber(compressedBound) && compressedBound >= 1;
  };

  _proto.updateMore = function updateMore(preProps) {
    var _this$props = this.props,
        compressed = _this$props.compressed,
        _this$props$value = _this$props.value,
        value = _this$props$value === void 0 ? [] : _this$props$value,
        onFilter = _this$props.onFilter,
        data = _this$props.data;

    if (compressed) {
      if (this.isCompressedBound()) return;

      if ((preProps.value || []).join('') !== (value || []).join('')) {
        this.resetMore();
      } else if ((preProps.data || []).length !== (data || []).length) {
        this.resetMore();
      } else if (value.length && this.shouldResetMore) {
        this.shouldResetMore = false;
        var more = getResetMore(onFilter, this.resultEl, this.resultEl.querySelectorAll("." + cascaderClass('item')));
        this.setState({
          more: more
        });
        this.forceUpdate();
      }
    }
  };

  _proto.resetMore = function resetMore() {
    if (!this.props.compressed) return;
    this.shouldResetMore = true;
    this.setState({
      more: -1
    });
    this.forceUpdate();
  };

  _proto.handleNodeClick = function handleNodeClick(data, show) {
    if (show === void 0) {
      show = false;
    }

    var id = this.props.datum.getKey(data);

    var _ref2 = this.props.datum.getPath(id) || {},
        path = _ref2.path;

    if (!path) return;
    this.props.onPathChange(id, null, path);

    if (show) {
      this.props.showList();
    }
  };

  _proto.handleNode = function handleNode(nodes, render) {
    var _this2 = this;

    var singleRemove = this.props.singleRemove;
    var removeContainerClassName = cascaderClass(singleRemove && getDirectionClass('remove-container'));
    return nodes.map(function (n, i) {
      return _this2.renderItem({
        className: removeContainerClassName,
        index: i,
        data: n,
        raw: nodes,
        render: render
      });
    }).filter(function (n) {
      return !isEmpty(n);
    });
  };

  _proto.removeTargetNode = function removeTargetNode(node, isPopover, event) {
    if (isPopover) {
      event.stopPropagation();
    }

    var handleRemove = this.props.handleRemove;
    handleRemove(node);
  };

  _proto.renderClear = function renderClear() {
    var _this$props2 = this.props,
        clearable = _this$props2.clearable,
        _this$props2$value = _this$props2.value,
        value = _this$props2$value === void 0 ? [] : _this$props2$value,
        onClear = _this$props2.onClear;
    var className = classnames(selectClass('indicator', 'close'), cascaderClass(getDirectionClass('close')));

    if (clearable && value.length > 0) {
      /* eslint-disable */
      return React.createElement("a", {
        tabIndex: -1,
        className: className,
        onClick: onClear
      });
      /* eslint-enable */
    }

    return null;
  };

  _proto.renderItem = function renderItem(_ref3) {
    var index = _ref3.index,
        render = _ref3.render,
        data = _ref3.data,
        raw = _ref3.raw,
        className = _ref3.className,
        options = _objectWithoutPropertiesLoose(_ref3, ["index", "render", "data", "raw", "className"]);

    var _this$props3 = this.props,
        singleRemove = _this$props3.singleRemove,
        datum = _this$props3.datum,
        renderUnmatched = _this$props3.renderUnmatched;
    var res;

    if (datum.isUnMatch(data)) {
      if (renderUnmatched) {
        res = renderUnmatched(data.value);
      } else {
        res = typeof data.value === 'string' ? data.value : null;
      }
    } else {
      res = data && render(data, raw);
    }

    if (!res) return null;
    var more = this.getCompressedBound();
    return React.createElement(Item, _extends({
      key: index,
      only: more === 1
    }, options, {
      data: data,
      className: className,
      singleRemove: singleRemove,
      close: this.removeTargetNode,
      isPopover: true,
      isDisabled: datum.isDisabled(datum.getKey(data)),
      click: this.handleNodeClick
    }), res);
  };

  _proto.renderMore = function renderMore(list) {
    var _this$props4 = this.props,
        selectId = _this$props4.selectId,
        size = _this$props4.size,
        compressed = _this$props4.compressed;
    var more = this.getCompressedBound();
    return [React.createElement(More, {
      key: "more",
      data: list,
      className: cascaderClass(getDirectionClass('item'), 'item-compressed'),
      popoverClassName: cascaderClass('popover'),
      contentClassName: cascaderClass('result', size),
      dataId: selectId,
      showNum: more,
      compressed: compressed
    })];
  };

  _proto.renderInput = function renderInput() {
    var _this$props5 = this.props,
        onFilter = _this$props5.onFilter,
        focus = _this$props5.focus,
        trim = _this$props5.trim,
        bindInput = _this$props5.bindInput,
        filterText = _this$props5.filterText,
        multiple = _this$props5.multiple,
        emptyAfterSelect = _this$props5.emptyAfterSelect;
    return React.createElement(Input, {
      filterText: filterText,
      ref: bindInput,
      trim: !!trim,
      multiple: multiple,
      emptyAfterSelect: emptyAfterSelect,
      key: "input." + (focus ? 1 : 0),
      focus: true,
      onFilter: onFilter
    });
  };

  _proto.renderPlaceholder = function renderPlaceholder(empty) {
    var _this$props6 = this.props,
        focus = _this$props6.focus,
        onFilter = _this$props6.onFilter,
        innerTitle = _this$props6.innerTitle;

    if (focus && onFilter) {
      return this.renderInput();
    }

    return React.createElement("span", {
      key: "placeholder",
      style: !empty ? {
        display: 'none'
      } : undefined,
      className: classnames(inputClass('placeholder'), selectClass('ellipsis'), innerTitle && inputTitleClass('hidable'))
    }, this.props.placeholder, "\xA0");
  };

  _proto.renderIndicator = function renderIndicator() {
    var _this$props7 = this.props,
        multiple = _this$props7.multiple,
        showArrow = _this$props7.showArrow,
        compressed = _this$props7.compressed;
    if (!showArrow || multiple && !compressed) return null;
    var showCaret = !multiple; // eslint-disable-next-line

    return React.createElement("a", {
      key: "indicator",
      tabIndex: -1,
      className: selectClass('indicator', multiple ? 'multi' : 'caret')
    }, showCaret && React.createElement(Caret, null));
  };

  _proto.renderResult = function renderResult() {
    var _this$props8 = this.props,
        datum = _this$props8.datum,
        _this$props8$value = _this$props8.value,
        value = _this$props8$value === void 0 ? [] : _this$props8$value,
        renderItem = _this$props8.renderItem,
        renderResult = _this$props8.renderResult,
        compressed = _this$props8.compressed;
    var nodes = (value || []).map(function (v) {
      return datum.getDataById(v);
    });
    var render = renderResult || renderItem;

    if (typeof render === 'string') {
      var copyRender = render;

      render = function render(n) {
        return n[copyRender];
      };
    }

    var items = this.handleNode(nodes, render);

    if (compressed && items.length) {
      items = this.renderMore(items);
    }

    items.push(this.renderPlaceholder(items.length === 0));
    return items;
  };

  _proto.render = function render() {
    var _this$props9 = this.props,
        style = _this$props9.style,
        _this$props9$value = _this$props9.value,
        value = _this$props9$value === void 0 ? [] : _this$props9$value,
        compressed = _this$props9.compressed,
        multiple = _this$props9.multiple,
        innerTitle = _this$props9.innerTitle,
        onFilter = _this$props9.onFilter,
        focus = _this$props9.focus;
    var empty = value.length === 0;
    var result = this.renderResult();
    var clearEl = this.renderClear();
    var shouldCompressed = multiple && compressed;
    return React.createElement(InputTitle, {
      className: cascaderClass('title-box'),
      titleClass: cascaderClass(getDirectionClass('title-box-title'), shouldCompressed && 'title-box-title-compressed'),
      innerTitle: innerTitle,
      open: !empty || onFilter && focus
    }, React.createElement("div", {
      ref: this.bindResult,
      className: classnames(cascaderClass(getDirectionClass('result'), shouldCompressed && 'compressed', clearEl && 'result-clearable'), innerTitle && inputTitleClass('item-scroll')),
      style: style
    }, result, this.renderIndicator(), clearEl));
  };

  return Result;
}(PureComponent);

_defineProperty(Result, "defaultProps", {
  value: []
});

export default Result;