bonree-cascader/lib/OptionList/Column.js

cascade select ui component for react

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Column;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _Cascader = require("../Cascader");

var _util = require("../util");

var _context = _interopRequireDefault(require("../context"));

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

function Column(_ref) {
  var prefixCls = _ref.prefixCls,
      index = _ref.index,
      multiple = _ref.multiple,
      options = _ref.options,
      openKey = _ref.openKey,
      onSelect = _ref.onSelect,
      onOpen = _ref.onOpen,
      onToggleOpen = _ref.onToggleOpen,
      checkedSet = _ref.checkedSet,
      halfCheckedSet = _ref.halfCheckedSet,
      openFinalValue = _ref.openFinalValue;
  var menuPrefixCls = "".concat(prefixCls, "-menu");
  var menuItemPrefixCls = "".concat(prefixCls, "-menu-item");

  var _React$useContext = React.useContext(_context.default),
      changeOnSelect = _React$useContext.changeOnSelect,
      expandTrigger = _React$useContext.expandTrigger,
      expandIcon = _React$useContext.expandIcon,
      loadingIcon = _React$useContext.loadingIcon,
      dropdownMenuColumnStyle = _React$useContext.dropdownMenuColumnStyle,
      requestFailureIcon = _React$useContext.requestFailureIcon,
      requestFailureText = _React$useContext.requestFailureText,
      refreshText = _React$useContext.refreshText,
      empty = _React$useContext.empty;

  var hoverOpen = expandTrigger === 'hover'; // ============================ Render ============================

  return /*#__PURE__*/React.createElement("ul", {
    className: menuPrefixCls,
    role: "menu"
  }, options.map(function (option) {
    var _classNames;

    var disabled = option.disabled,
        value = option.value,
        node = option.node;
    var isMergedLeaf = (0, _util.isLeaf)(option); // const isLoading = loadingKeys.includes(value);
    // 加载中

    var isLoading = value === (0, _util.connectValue)([openFinalValue, _Cascader.LOAD_STATUS.LOADING]) || value === _Cascader.LOAD_STATUS.LOADING;

    if (isLoading) {
      return /*#__PURE__*/React.createElement("li", {
        key: value,
        className: (0, _classnames.default)(menuItemPrefixCls, "".concat(menuItemPrefixCls, "-loading")),
        style: dropdownMenuColumnStyle
      }, loadingIcon);
    } // 加载数据失败


    var isLoadFailed = value === (0, _util.connectValue)([openFinalValue, _Cascader.LOAD_STATUS.FAILED]) || value === _Cascader.LOAD_STATUS.FAILED;

    if (isLoadFailed) {
      return /*#__PURE__*/React.createElement("li", {
        key: value,
        className: (0, _classnames.default)(menuItemPrefixCls, "".concat(menuItemPrefixCls, "-failed")),
        style: dropdownMenuColumnStyle
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(menuItemPrefixCls, "-failed-content")
      }, requestFailureIcon, requestFailureText, /*#__PURE__*/React.createElement("span", {
        className: "".concat(menuItemPrefixCls, "-failed-content-refresh"),
        onClick: function onClick() {
          onOpen(index, openFinalValue);
        }
      }, refreshText)));
    } // 无数据


    var isNoData = value === (0, _util.connectValue)([openFinalValue, _Cascader.LOAD_STATUS.EMPTY]) || value === _Cascader.LOAD_STATUS.EMPTY;

    if (isNoData) {
      return /*#__PURE__*/React.createElement("li", {
        key: value,
        className: (0, _classnames.default)(menuItemPrefixCls, "".concat(menuItemPrefixCls, "-empty")),
        style: dropdownMenuColumnStyle
      }, empty);
    } // >>>>> checked


    var checked = checkedSet.has(value); // >>>>> Open

    var triggerOpenPath = function triggerOpenPath() {
      // if (!disabled && hoverOpen) {
      if (!disabled && (!hoverOpen || !isMergedLeaf)) {
        onOpen(index, value);
      }
    }; // >>>>> Selection


    var triggerSelect = function triggerSelect() {
      if (!disabled && (isMergedLeaf || changeOnSelect || multiple)) {
        onSelect(value, isMergedLeaf);
      }
    }; // >>>>> Title


    var title;

    if (typeof (node === null || node === void 0 ? void 0 : node.title) === 'string') {
      title = node.title;
    } else if (typeof option.title === 'string') {
      title = option.title;
    } // >>>>> Render


    return /*#__PURE__*/React.createElement("li", {
      key: value,
      className: (0, _classnames.default)(menuItemPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), (0, _defineProperty2.default)(_classNames, "".concat(menuItemPrefixCls, "-active"), openKey === value), (0, _defineProperty2.default)(_classNames, "".concat(menuItemPrefixCls, "-disabled"), disabled), _classNames)),
      style: dropdownMenuColumnStyle,
      role: "menuitemcheckbox",
      title: title,
      "aria-checked": checked,
      "data-value": value,
      onClick: function onClick() {
        triggerOpenPath();

        if (!multiple || isMergedLeaf) {
          triggerSelect();
        }
      },
      onDoubleClick: function onDoubleClick() {
        if (changeOnSelect) {
          onToggleOpen(false);
        }
      },
      onMouseEnter: function onMouseEnter() {
        if (!disabled && hoverOpen) {
          onOpen(index, value);
        }
      }
    }, multiple && value !== '__EMPTY__' && !isLoading && /*#__PURE__*/React.createElement(_Checkbox.default, {
      prefixCls: "".concat(prefixCls, "-checkbox"),
      checked: checked,
      halfChecked: halfCheckedSet.has(value),
      disabled: disabled,
      onClick: function onClick(e) {
        e.stopPropagation();
        triggerSelect();
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "".concat(menuItemPrefixCls, "-content")
    }, option.title), expandIcon && !isMergedLeaf && /*#__PURE__*/React.createElement("div", {
      className: "".concat(menuItemPrefixCls, "-expand-icon")
    }, expandIcon));
  }));
}