acud 0.0.60

package/lib/select/src/OptionList.js

@@ -0,0 +1,556 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+
+var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
+
+var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _acudIcon = require("acud-icon");
+
+var _valueUtil = require("./utils/valueUtil");
+
+var _virtualList = _interopRequireDefault(require("../../virtual-list"));
+
+var _checkbox = _interopRequireDefault(require("../../checkbox"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var formatContent = function formatContent(content, searchValue, prefixCls) {
+  var lowerContent = (0, _valueUtil.toRawString)(content).toLowerCase();
+  var lowerSearch = searchValue.toLowerCase();
+  var searchStartIndex = lowerContent.indexOf(lowerSearch);
+  var len = lowerSearch.length; // 存在搜索值不在content的情况，比如key与children不一致时
+
+  if (searchStartIndex === -1) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, content);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, content.slice(0, searchStartIndex), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-search-highlight")
+  }, content.slice(searchStartIndex, searchStartIndex + len)), content.slice(searchStartIndex + len));
+};
+/**{afterSearch}
+ * ;list of option display.
+ * Will fallback to dom if use customize render.
+ */
+
+
+var OptionList = function OptionList(_ref, ref) {
+  var prefixCls = _ref.prefixCls,
+      id = _ref.id,
+      flattenOptions = _ref.flattenOptions,
+      childrenAsData = _ref.childrenAsData,
+      values = _ref.values,
+      searchValue = _ref.searchValue,
+      multiple = _ref.multiple,
+      defaultActiveFirstOption = _ref.defaultActiveFirstOption,
+      height = _ref.height,
+      itemHeight = _ref.itemHeight,
+      notFoundContent = _ref.notFoundContent,
+      mode = _ref.mode,
+      open = _ref.open,
+      virtual = _ref.virtual,
+      _ref$defaultExpandGro = _ref.defaultExpandGroupKey,
+      defaultExpandGroupKey = _ref$defaultExpandGro === void 0 ? false : _ref$defaultExpandGro,
+      renderEmpty = _ref.renderEmpty,
+      onSelect = _ref.onSelect,
+      onToggleOpen = _ref.onToggleOpen,
+      onActiveValue = _ref.onActiveValue,
+      onScroll = _ref.onScroll,
+      onMouseEnter = _ref.onMouseEnter,
+      triggerChange = _ref.triggerChange,
+      setInnerOpen = _ref.setInnerOpen;
+  var itemPrefixCls = "".concat(prefixCls, "-item");
+  var memoFlattenOptions = (0, _useMemo["default"])(function () {
+    return flattenOptions;
+  }, [open, flattenOptions], function (prev, next) {
+    return next[0] && prev[1] !== next[1];
+  }); // =========================== List ===========================
+
+  var listRef = React.useRef(null);
+
+  var onListMouseDown = function onListMouseDown(event) {
+    event.preventDefault();
+  };
+
+  var scrollIntoView = function scrollIntoView(index) {
+    if (listRef.current) {
+      listRef.current.scrollTo({
+        index: index
+      });
+    }
+  }; // ========================== Active ==========================
+
+
+  var getEnabledActiveIndex = function getEnabledActiveIndex(index) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var len = memoFlattenOptions.length;
+
+    for (var i = 0; i < len; i += 1) {
+      var current = (index + i * offset + len) % len;
+      var _memoFlattenOptions$c = memoFlattenOptions[current],
+          group = _memoFlattenOptions$c.group,
+          data = _memoFlattenOptions$c.data;
+
+      if (!group && !data.disabled) {
+        return current;
+      }
+    }
+
+    return -1;
+  };
+
+  var _React$useState = React.useState(function () {
+    return getEnabledActiveIndex(0);
+  }),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      activeIndex = _React$useState2[0],
+      setActiveIndex = _React$useState2[1];
+
+  var setActive = function setActive(index) {
+    var fromKeyboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setActiveIndex(index);
+    var info = {
+      source: fromKeyboard ? 'keyboard' : 'mouse'
+    }; // Trigger active event
+
+    var flattenItem = memoFlattenOptions[index];
+
+    if (!flattenItem) {
+      onActiveValue(null, -1, info);
+      return;
+    }
+
+    onActiveValue(flattenItem.data.value, index, info);
+  }; // Auto active first item when list length or searchValue changed
+
+
+  React.useEffect(function () {
+    setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
+  }, [memoFlattenOptions.length, searchValue]); // Auto scroll to item position in single mode
+
+  React.useEffect(function () {
+    var _a;
+    /**
+     * React will skip `onChange` when component update.
+     * `setActive` function will call root accessibility state update which makes re-render.
+     * So we need to delay to let Input component trigger onChange first.
+     */
+
+
+    var timeoutId = setTimeout(function () {
+      if (!multiple && open && values.size === 1) {
+        var value = Array.from(values)[0];
+        var index = memoFlattenOptions.findIndex(function (_ref2) {
+          var data = _ref2.data;
+          return data.value === value;
+        });
+        setActive(index);
+        scrollIntoView(index);
+      }
+    }); // Force trigger scrollbar visible when open
+
+    if (open) {
+      (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(undefined);
+    }
+
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [open]); // ========================== Values ==========================
+
+  var onSelectValue = function onSelectValue(value) {
+    if (value !== undefined) {
+      onSelect(value, {
+        selected: !values.has(value)
+      });
+    } // Single mode should always close by select
+
+
+    if (!multiple) {
+      onToggleOpen(false);
+    }
+  }; // ========================= Keyboard =========================
+
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      onKeyDown: function onKeyDown(event) {
+        var which = event.which;
+
+        switch (which) {
+          // >>> Arrow keys
+          case _KeyCode["default"].UP:
+          case _KeyCode["default"].DOWN:
+            {
+              var offset = 0;
+
+              if (which === _KeyCode["default"].UP) {
+                offset = -1;
+              } else if (which === _KeyCode["default"].DOWN) {
+                offset = 1;
+              }
+
+              if (offset !== 0) {
+                var nextActiveIndex = getEnabledActiveIndex(activeIndex + offset, offset);
+                scrollIntoView(nextActiveIndex);
+                setActive(nextActiveIndex, true);
+              }
+
+              break;
+            }
+          // >>> Select
+
+          case _KeyCode["default"].ENTER:
+            {
+              // value
+              var item = memoFlattenOptions[activeIndex];
+
+              if (item && !item.data.disabled) {
+                onSelectValue(item.data.value);
+              } else {
+                onSelectValue(undefined);
+              }
+
+              if (open) {
+                event.preventDefault();
+              }
+
+              break;
+            }
+          // >>> Close
+
+          case _KeyCode["default"].ESC:
+            {
+              onToggleOpen(false);
+
+              if (open) {
+                event.stopPropagation();
+              }
+            }
+        }
+      },
+      onKeyUp: function onKeyUp() {},
+      scrollTo: function scrollTo(index) {
+        scrollIntoView(index);
+      }
+    };
+  }); // ===================== Empty =====================
+
+  var mergedNotFound;
+
+  if (notFoundContent !== undefined) {
+    mergedNotFound = notFoundContent;
+  } else if (mode === 'combobox') {
+    mergedNotFound = null;
+  } else {
+    mergedNotFound = renderEmpty('Select', searchValue ? '未查找到任何结果' : undefined);
+  }
+
+  function renderItem(index) {
+    var item = memoFlattenOptions[index];
+
+    if (!item) {
+      return null;
+    }
+
+    var itemData = item.data || {};
+    var value = itemData.value,
+        label = itemData.label,
+        children = itemData.children;
+    var attrs = (0, _pickAttrs["default"])(itemData, true);
+    var mergedLabel = childrenAsData ? children : label;
+    return item ? /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      "aria-label": typeof mergedLabel === 'string' ? mergedLabel : null
+    }, attrs, {
+      key: index,
+      role: "option",
+      id: "".concat(id, "_list_").concat(index),
+      "aria-selected": values.has(value)
+    }), value) : null;
+  } // 是否全选状态
+
+
+  var selectAllChecked = false; // 半选状态
+
+  var indeterminate = false; // 所有enable项的值
+
+  var enableAllValues = []; // 已选中的disabled项的值
+
+  var disabledValues = []; // 已选中的enable项的值
+
+  var enableValues = []; // 所有group key
+
+  var groupKeys = [];
+
+  if (multiple) {
+    var enableOptions = memoFlattenOptions.filter(function (option) {
+      return !option.data.disabled && !option.group;
+    });
+    var disabledOptions = memoFlattenOptions.filter(function (option) {
+      return option.data.disabled;
+    });
+    enableAllValues = enableOptions.map(function (option) {
+      return option.key;
+    });
+    enableValues = (0, _toConsumableArray2["default"])(values).filter(function (value) {
+      return enableOptions.find(function (option) {
+        return option.key === value;
+      });
+    });
+    disabledValues = (0, _toConsumableArray2["default"])(values).filter(function (value) {
+      return disabledOptions.find(function (option) {
+        return option.key === value;
+      });
+    });
+    selectAllChecked = enableValues.length === enableOptions.length;
+    indeterminate = !selectAllChecked && !!enableValues.length;
+    groupKeys = memoFlattenOptions.filter(function (option) {
+      return option.group;
+    }).map(function (option) {
+      return option.key;
+    });
+  }
+
+  var expandGroupKeys = [];
+
+  if (defaultExpandGroupKey === true) {
+    // 默认展开所有折叠项
+    expandGroupKeys = groupKeys;
+  } else if (Array.isArray(defaultExpandGroupKey)) {
+    expandGroupKeys = defaultExpandGroupKey;
+  } else if (typeof defaultExpandGroupKey === 'string' || typeof defaultExpandGroupKey === 'number') {
+    expandGroupKeys = [defaultExpandGroupKey];
+  }
+
+  var _React$useState3 = React.useState(expandGroupKeys),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      expandGroupKey = _React$useState4[0],
+      setExpandGroupKey = _React$useState4[1];
+
+  var handleCheckAll = function handleCheckAll() {
+    if (searchValue === '' || searchValue === undefined) {
+      triggerChange(selectAllChecked ? disabledValues : [].concat((0, _toConsumableArray2["default"])(enableAllValues), (0, _toConsumableArray2["default"])(disabledValues)));
+    } else {
+      triggerChange(selectAllChecked ? (0, _toConsumableArray2["default"])(values).filter(function (v) {
+        return !enableAllValues.includes(v);
+      }) : Array.from(new Set([].concat((0, _toConsumableArray2["default"])(values), (0, _toConsumableArray2["default"])(enableAllValues)))));
+    }
+
+    if (!selectAllChecked && setInnerOpen) {
+      setInnerOpen(false);
+    }
+  };
+
+  var getCheckStatus = function getCheckStatus(groupKey, type) {
+    var groupOptions = memoFlattenOptions.filter(function (option) {
+      return option.groupKey === groupKey;
+    });
+    var groupEnableOptions = groupOptions.filter(function (option) {
+      return !option.data.disabled;
+    });
+
+    if (type === 'all') {
+      return groupEnableOptions.every(function (option) {
+        return values.has(option.key);
+      });
+    } else if (type === 'indeterminate') {
+      return !groupEnableOptions.every(function (option) {
+        return values.has(option.key);
+      }) && groupEnableOptions.some(function (option) {
+        return values.has(option.key);
+      });
+    }
+
+    return false;
+  };
+
+  var handleCheckGroup = function handleCheckGroup(e, groupKey) {
+    var groupOptions = memoFlattenOptions.filter(function (option) {
+      return !option.disabled && option.groupKey === groupKey;
+    });
+    var groupEnableOptions = groupOptions.filter(function (option) {
+      return !option.data.disabled;
+    });
+    var allValues = groupEnableOptions.map(function (option) {
+      return option.key;
+    });
+    var checkAll = getCheckStatus(groupKey, 'all');
+
+    if (checkAll) {
+      triggerChange((0, _toConsumableArray2["default"])(Array.from(values).filter(function (value) {
+        return !allValues.includes(value);
+      })));
+    } else {
+      triggerChange(Array.from(new Set([].concat((0, _toConsumableArray2["default"])(values), (0, _toConsumableArray2["default"])(allValues)))));
+    }
+
+    e.stopPropagation();
+  };
+
+  var renderOption = function renderOption(data, values, groupOption, label, itemIndex, groupKey) {
+    var _classNames;
+
+    var _a = data,
+        disabled = _a.disabled,
+        value = _a.value,
+        title = _a.title,
+        children = _a.children,
+        style = _a.style,
+        className = _a.className,
+        maxLabelLength = _a.maxLabelLength,
+        extra = _a.extra,
+        otherProps = __rest(_a, ["disabled", "value", "title", "children", "style", "className", "maxLabelLength", "extra"]); // Option
+
+
+    var selected = values.has(value);
+    var optionPrefixCls = "".concat(itemPrefixCls, "-option");
+    var optionClassName = (0, _classnames["default"])(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(optionPrefixCls, "-grouped"), groupOption), (0, _defineProperty2["default"])(_classNames, "".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), (0, _defineProperty2["default"])(_classNames, "".concat(optionPrefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(optionPrefixCls, "-selected"), selected), _classNames));
+    var mergedLabel = childrenAsData ? children : label; // const iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected;
+
+    var content = mergedLabel || value;
+    var optionTitle = typeof content === 'string' || typeof content === 'number' ? content.toString() : undefined;
+
+    if (title !== undefined) {
+      optionTitle = title;
+    }
+
+    var fContent = (typeof content === 'string' || typeof content === 'number') && searchValue ? formatContent(content, searchValue, prefixCls) : content;
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, otherProps, {
+      "aria-selected": selected,
+      className: optionClassName,
+      title: optionTitle,
+      onMouseMove: function onMouseMove() {
+        if (activeIndex === itemIndex || disabled) {
+          return;
+        }
+
+        setActive(itemIndex);
+      },
+      onClick: function onClick() {
+        if (!disabled) {
+          onSelectValue(value);
+        }
+      },
+      style: (0, _extends2["default"])({
+        display: groupOption && !expandGroupKey.includes(groupKey) ? 'none' : ''
+      }, style)
+    }), multiple && /*#__PURE__*/React.createElement(_checkbox["default"], {
+      checked: selected,
+      disabled: disabled
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(optionPrefixCls, "-content")
+    }, fContent), extra);
+  }; // ========================== Render ==========================
+
+
+  if (memoFlattenOptions.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      role: "listbox",
+      id: "".concat(id, "_list"),
+      className: "".concat(itemPrefixCls, "-empty"),
+      onMouseDown: onListMouseDown
+    }, mergedNotFound);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    role: "listbox",
+    id: "".concat(id, "_list"),
+    style: {
+      height: 0,
+      width: 0,
+      overflow: 'hidden'
+    }
+  }, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), multiple && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(itemPrefixCls, "-checkall"),
+    onClick: handleCheckAll
+  }, /*#__PURE__*/React.createElement(_checkbox["default"], {
+    indeterminate: indeterminate,
+    checked: selectAllChecked
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(itemPrefixCls, "-option-content")
+  }, "\u5168\u9009")), /*#__PURE__*/React.createElement(_virtualList["default"], {
+    itemKey: "key",
+    ref: listRef,
+    data: memoFlattenOptions,
+    height: height,
+    itemHeight: itemHeight,
+    fullHeight: false,
+    onMouseDown: onListMouseDown,
+    onScroll: onScroll,
+    virtual: virtual,
+    onMouseEnter: onMouseEnter
+  }, function (_ref3, itemIndex) {
+    var group = _ref3.group,
+        groupOption = _ref3.groupOption,
+        data = _ref3.data,
+        groupKey = _ref3.groupKey;
+    var label = data.label,
+        key = data.key; // Group
+
+    if (group) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _classnames["default"])(itemPrefixCls, "".concat(itemPrefixCls, "-group")),
+        onClick: function onClick() {
+          var gIndex = expandGroupKey.indexOf(key);
+          var newGroupKey = (0, _toConsumableArray2["default"])(expandGroupKey);
+          gIndex !== -1 ? newGroupKey.splice(gIndex, 1) : newGroupKey.push(key);
+          setExpandGroupKey(newGroupKey);
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(itemPrefixCls, "-group-arrow")
+      }, expandGroupKey.includes(key) ? /*#__PURE__*/React.createElement(_acudIcon.OutlinedDown, null) : /*#__PURE__*/React.createElement(_acudIcon.OutlinedRight, null)), multiple && /*#__PURE__*/React.createElement(_checkbox["default"], {
+        className: "".concat(itemPrefixCls, "-group-checkbox"),
+        indeterminate: getCheckStatus(key, 'indeterminate'),
+        checked: getCheckStatus(key, 'all'),
+        onClick: function onClick(e) {
+          return handleCheckGroup(e, key);
+        }
+      }), /*#__PURE__*/React.createElement("span", null, label !== undefined ? label : key));
+    }
+
+    return renderOption(data, values, groupOption, label, itemIndex, groupKey);
+  }));
+};
+
+var RefOptionList = /*#__PURE__*/React.forwardRef(OptionList);
+RefOptionList.displayName = 'OptionList';
+var _default = RefOptionList;
+exports["default"] = _default;

package/lib/select/src/Select.d.ts

@@ -0,0 +1,50 @@
+/**
+ * To match accessibility requirement, we always provide an input in the component.
+ * Other element will not set `tabIndex` to avoid `onBlur` sequence problem.
+ * For focused select, we set `aria-live="polite"` to update the accessibility content.
+ *
+ * ref:
+ * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
+ *
+ * New api:
+ * - listHeight
+ * - listItemHeight
+ * - component
+ *
+ * Remove deprecated api:
+ * - multiple
+ * - tags
+ * - combobox
+ * - firstActiveValue
+ * - dropdownMenuStyle
+ * - openClassName (Not list in api)
+ *
+ * Update:
+ * - `backfill` only support `combobox` mode
+ * - `combobox` mode not support `labelInValue` since it's meaningless
+ * - `getInputElement` only support `combobox` mode
+ * - `onChange` return OptionData instead of ReactNode
+ * - `filterOption` `onChange` `onSelect` accept OptionData instead of ReactNode
+ * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
+ * - `combobox` mode not support `optionLabelProp`
+ */
+import * as React from 'react';
+import { OptionsType as SelectOptionsType } from './interface';
+import Option from './Option';
+import OptGroup from './OptGroup';
+import { SelectProps, RefSelectProps } from './generate';
+import { DefaultValueType } from './interface/generator';
+export declare type ExportedSelectProps<ValueType extends DefaultValueType = DefaultValueType> = SelectProps<SelectOptionsType, ValueType>;
+/**
+ * Typescript not support generic with function component,
+ * we have to wrap an class component to handle this.
+ */
+declare class Select<VT> extends React.Component<SelectProps<SelectOptionsType, VT>> {
+    static Option: typeof Option;
+    static OptGroup: typeof OptGroup;
+    selectRef: React.RefObject<RefSelectProps>;
+    focus: () => void;
+    blur: () => void;
+    render(): JSX.Element;
+}
+export default Select;