bonree-cascader/es/OptionList/Column.js

cascade select ui component for react

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from 'react';
import classNames from 'classnames';
import { LOAD_STATUS } from '../Cascader';
import { connectValue, isLeaf } from '../util';
import CascaderContext from '../context';
import Checkbox from './Checkbox';
export default 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(CascaderContext),
      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 = isLeaf(option); // const isLoading = loadingKeys.includes(value);
    // 加载中

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

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


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

    if (isLoadFailed) {
      return /*#__PURE__*/React.createElement("li", {
        key: value,
        className: classNames(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 === connectValue([openFinalValue, LOAD_STATUS.EMPTY]) || value === LOAD_STATUS.EMPTY;

    if (isNoData) {
      return /*#__PURE__*/React.createElement("li", {
        key: value,
        className: classNames(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: classNames(menuItemPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-active"), openKey === value), _defineProperty(_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, {
      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));
  }));
}