@hi-ui/cascader 4.0.0-beta.41 → 4.0.0-beta.44

package/lib/cjs/Cascader.js

@@ -53,6 +53,8 @@ var funcUtils = require('@hi-ui/func-utils');
 
 var CascaderMenuList = require('./CascaderMenuList.js');
 
+var Highlighter = require('@hi-ui/highlighter');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -61,6 +63,8 @@ function _interopDefaultLegacy(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var Highlighter__default = /*#__PURE__*/_interopDefaultLegacy(Highlighter);
+
 var _prefix = classname.getPrefixCls('cascader');
 
 var NOOP_ARRAY = [];
@@ -95,14 +99,15 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       overlayClassName = props.overlayClassName,
       _props$data = props.data,
       data = _props$data === void 0 ? NOOP_ARRAY : _props$data,
+      _props$flattedSearchR = props.flattedSearchResult,
+      flattedSearchResult = _props$flattedSearchR === void 0 ? true : _props$flattedSearchR,
       visible = props.visible,
       onOpen = props.onOpen,
       onClose = props.onClose,
-      rest = tslib.__rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "visible", "onOpen", "onClose"]);
+      rest = tslib.__rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "onOpen", "onClose"]);
 
   var i18n = localeContext.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
-  var flatted = type === 'flatted';
 
   var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
     visible: visible,
@@ -131,7 +136,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var highlight = !!searchValue && searchMode === 'upMatch';
 
     if (highlight) {
-      return renderHighlightTitle(searchValue, node, titleRender);
+      return flattedSearchResult ? renderHighlightTitles(searchValue, node, titleRender) : renderHighlightTitle(searchValue, node, titleRender);
     }
 
     return typeAssertion.isFunction(titleRender) ? titleRender(node) : true;
@@ -154,9 +159,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     data: cascaderData,
     flattedData: flattedData,
     enabled: searchableProp,
-    exclude: function exclude(option) {
-      return index$1.checkCanLoadChildren(option, onLoadChildren);
-    }
+    exclude: function exclude(node) {
+      return node.disabled;
+    } // exclude: (option: FlattedCascaderDataItem) => {
+    //   return checkCanLoadChildren(option, onLoadChildren)
+    // },
+
   });
 
   var _useSearchMode = useSearchMode.useSearchMode({
@@ -194,11 +202,14 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, mergedTitle);
   };
 
+  var shouldUseSearch = !!searchValue; // 搜索的结果列表也采用 flatted 模式进行展示
+
+  var flatted = shouldUseSearch ? flattedSearchResult : type === 'flatted';
+
   var _a = useCascader.useCascader(Object.assign(Object.assign({}, rest), {
     disabled: disabled,
     fieldNames: fieldNames,
-    // 搜索的结果列表也采用 flatted 模式进行展示
-    flatted: flatted || !!searchValue,
+    flatted: flatted,
     onSelect: onSelect,
     onLoadChildren: onLoadChildren,
     data: data,
@@ -215,14 +226,17 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       reset = context$1.reset,
       menuList = context$1.menuList,
       getItemRequiredProps = context$1.getItemRequiredProps;
-  var shouldUseSearch = !!searchValue;
   var showData = React.useMemo(function () {
     if (shouldUseSearch) {
+      if (!flattedSearchResult) {
+        return index$1.getFilteredMenuList(menuList, stateInSearch.data);
+      }
+
       return typeAssertion.isArrayNonEmpty(stateInSearch.data) ? [stateInSearch.data] : [];
     }
 
     return menuList;
-  }, [shouldUseSearch, stateInSearch.data, menuList]);
+  }, [shouldUseSearch, flattedSearchResult, stateInSearch.data, menuList]);
   React.useEffect(function () {
     // 关闭展示后，重置展开要高亮的选项
     if (!menuVisible) {
@@ -285,6 +299,16 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
   // 如果 titleRender 返回 `true`，则使用默认 title
   var title = titleRender ? titleRender(option, keyword) : true;
   if (title !== true) return title;
+  return /*#__PURE__*/React__default["default"].createElement(Highlighter__default["default"], {
+    key: option.id,
+    keyword: keyword
+  }, option.title);
+};
+
+var renderHighlightTitles = function renderHighlightTitles(keyword, option, titleRender) {
+  // 如果 titleRender 返回 `true`，则使用默认 title
+  var title = titleRender ? titleRender(option, keyword) : true;
+  if (title !== true) return title;
 
   if (typeof option.title !== 'string') {
     console.info('WARNING: The `option.title` should be `string` when searchable is enabled.');

package/lib/cjs/utils/index.js

@@ -110,9 +110,38 @@ function getItemEventData(node, requiredProps) {
   return Object.assign(Object.assign({}, node), requiredProps);
 }
 
+var getFilteredMenuList = function getFilteredMenuList(menuList, searchedData) {
+  var result = [];
+  searchedData.forEach(function (item) {
+    while (item && item.depth >= 0) {
+      var depth = item.depth;
+      var depthResult = result[depth];
+
+      if (!depthResult) {
+        depthResult = new Map();
+        result[depth] = depthResult;
+      }
+
+      depthResult.set(item.id, item);
+      item = item.parent;
+    }
+  });
+  return menuList.map(function (depthItems, depth) {
+    var depthSavedMp = result[depth];
+    if (!depthSavedMp) return depthItems;
+    return depthItems.filter(function (item) {
+      var depthSavedMp = result[item.depth];
+      if (!depthSavedMp) return true;
+      if (depthSavedMp.has(item.id)) return true;
+      return false;
+    });
+  });
+};
+
 exports.checkCanLoadChildren = checkCanLoadChildren;
 exports.flattenTreeData = flattenTreeData;
 exports.getActiveMenus = getActiveMenus;
 exports.getActiveNodePaths = getActiveNodePaths;
+exports.getFilteredMenuList = getFilteredMenuList;
 exports.getFlattedMenus = getFlattedMenus;
 exports.getItemEventData = getItemEventData;

package/lib/esm/Cascader.js

@@ -15,7 +15,7 @@ import { useUncontrolledToggle } from '@hi-ui/use-toggle';
 import { useCascader } from './use-cascader.js';
 import { MockInput } from '@hi-ui/input';
 import { UpOutlined, DownOutlined } from '@hi-ui/icons';
-import { flattenTreeData, checkCanLoadChildren, getItemEventData } from './utils/index.js';
+import { flattenTreeData, getFilteredMenuList, getItemEventData } from './utils/index.js';
 import { CascaderProvider } from './context.js';
 import { getTopDownAncestors, getNodeAncestorsWithMe } from '@hi-ui/tree-utils';
 import { isUndef, isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
@@ -26,6 +26,7 @@ import { useCache } from './hooks/use-cache/lib/esm/index.js';
 import { useLocaleContext } from '@hi-ui/locale-context';
 import { callAllFuncs } from '@hi-ui/func-utils';
 import { CascaderMenuList } from './CascaderMenuList.js';
+import Highlighter from '@hi-ui/highlighter';
 
 var _prefix = getPrefixCls('cascader');
 
@@ -61,14 +62,15 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
       overlayClassName = props.overlayClassName,
       _props$data = props.data,
       data = _props$data === void 0 ? NOOP_ARRAY : _props$data,
+      _props$flattedSearchR = props.flattedSearchResult,
+      flattedSearchResult = _props$flattedSearchR === void 0 ? true : _props$flattedSearchR,
       visible = props.visible,
       onOpen = props.onOpen,
       onClose = props.onClose,
-      rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "visible", "onOpen", "onClose"]);
+      rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "onOpen", "onClose"]);
 
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
-  var flatted = type === 'flatted';
 
   var _useUncontrolledToggl = useUncontrolledToggle({
     visible: visible,
@@ -97,7 +99,7 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     var highlight = !!searchValue && searchMode === 'upMatch';
 
     if (highlight) {
-      return renderHighlightTitle(searchValue, node, titleRender);
+      return flattedSearchResult ? renderHighlightTitles(searchValue, node, titleRender) : renderHighlightTitle(searchValue, node, titleRender);
     }
 
     return isFunction(titleRender) ? titleRender(node) : true;
@@ -120,9 +122,12 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     data: cascaderData,
     flattedData: flattedData,
     enabled: searchableProp,
-    exclude: function exclude(option) {
-      return checkCanLoadChildren(option, onLoadChildren);
-    }
+    exclude: function exclude(node) {
+      return node.disabled;
+    } // exclude: (option: FlattedCascaderDataItem) => {
+    //   return checkCanLoadChildren(option, onLoadChildren)
+    // },
+
   });
 
   var _useSearchMode = useSearchMode({
@@ -160,11 +165,14 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     }, mergedTitle);
   };
 
+  var shouldUseSearch = !!searchValue; // 搜索的结果列表也采用 flatted 模式进行展示
+
+  var flatted = shouldUseSearch ? flattedSearchResult : type === 'flatted';
+
   var _a = useCascader(Object.assign(Object.assign({}, rest), {
     disabled: disabled,
     fieldNames: fieldNames,
-    // 搜索的结果列表也采用 flatted 模式进行展示
-    flatted: flatted || !!searchValue,
+    flatted: flatted,
     onSelect: onSelect,
     onLoadChildren: onLoadChildren,
     data: data,
@@ -181,14 +189,17 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
       reset = context.reset,
       menuList = context.menuList,
       getItemRequiredProps = context.getItemRequiredProps;
-  var shouldUseSearch = !!searchValue;
   var showData = useMemo(function () {
     if (shouldUseSearch) {
+      if (!flattedSearchResult) {
+        return getFilteredMenuList(menuList, stateInSearch.data);
+      }
+
       return isArrayNonEmpty(stateInSearch.data) ? [stateInSearch.data] : [];
     }
 
     return menuList;
-  }, [shouldUseSearch, stateInSearch.data, menuList]);
+  }, [shouldUseSearch, flattedSearchResult, stateInSearch.data, menuList]);
   useEffect(function () {
     // 关闭展示后，重置展开要高亮的选项
     if (!menuVisible) {
@@ -251,6 +262,16 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
   // 如果 titleRender 返回 `true`，则使用默认 title
   var title = titleRender ? titleRender(option, keyword) : true;
   if (title !== true) return title;
+  return /*#__PURE__*/React.createElement(Highlighter, {
+    key: option.id,
+    keyword: keyword
+  }, option.title);
+};
+
+var renderHighlightTitles = function renderHighlightTitles(keyword, option, titleRender) {
+  // 如果 titleRender 返回 `true`，则使用默认 title
+  var title = titleRender ? titleRender(option, keyword) : true;
+  if (title !== true) return title;
 
   if (typeof option.title !== 'string') {
     console.info('WARNING: The `option.title` should be `string` when searchable is enabled.');

package/lib/esm/utils/index.js

@@ -102,4 +102,32 @@ function getItemEventData(node, requiredProps) {
   return Object.assign(Object.assign({}, node), requiredProps);
 }
 
-export { checkCanLoadChildren, flattenTreeData, getActiveMenus, getActiveNodePaths, getFlattedMenus, getItemEventData };
+var getFilteredMenuList = function getFilteredMenuList(menuList, searchedData) {
+  var result = [];
+  searchedData.forEach(function (item) {
+    while (item && item.depth >= 0) {
+      var depth = item.depth;
+      var depthResult = result[depth];
+
+      if (!depthResult) {
+        depthResult = new Map();
+        result[depth] = depthResult;
+      }
+
+      depthResult.set(item.id, item);
+      item = item.parent;
+    }
+  });
+  return menuList.map(function (depthItems, depth) {
+    var depthSavedMp = result[depth];
+    if (!depthSavedMp) return depthItems;
+    return depthItems.filter(function (item) {
+      var depthSavedMp = result[item.depth];
+      if (!depthSavedMp) return true;
+      if (depthSavedMp.has(item.id)) return true;
+      return false;
+    });
+  });
+};
+
+export { checkCanLoadChildren, flattenTreeData, getActiveMenus, getActiveNodePaths, getFilteredMenuList, getFlattedMenus, getItemEventData };

package/lib/types/Cascader.d.ts

@@ -61,4 +61,8 @@ export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | '
      * 设置展现形式
      */
     appearance?: HiBaseAppearanceEnum;
+    /**
+     * 搜索结果拍平展示
+     */
+    flattedSearchResult?: boolean;
 }

package/lib/types/utils/index.d.ts

@@ -16,3 +16,4 @@ export declare const getActiveMenus: (flattedData: FlattedCascaderDataItem[], se
 export declare const getFlattedMenus: (data: FlattedCascaderDataItem[], filter: (option: FlattedCascaderDataItem) => boolean) => FlattedCascaderDataItem[][];
 export declare const checkCanLoadChildren: (node: FlattedCascaderDataItem, onLoadChildren?: any) => any;
 export declare function getItemEventData(node: FlattedCascaderDataItem, requiredProps: CascaderItemRequiredProps): CascaderItemEventData;
+export declare const getFilteredMenuList: (menuList: FlattedCascaderDataItem[][], searchedData: any[]) => FlattedCascaderDataItem[][];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/cascader",
-  "version": "4.0.0-beta.41",
+  "version": "4.0.0-beta.44",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -45,22 +45,23 @@
   "dependencies": {
     "@hi-ui/array-utils": "^4.0.0-beta.8",
     "@hi-ui/classname": "^4.0.0-beta.0",
-    "@hi-ui/core": "^4.0.0-beta.9",
+    "@hi-ui/core": "^4.0.0-beta.10",
     "@hi-ui/env": "^4.0.0-beta.1",
     "@hi-ui/func-utils": "^4.0.0-beta.13",
-    "@hi-ui/icons": "^4.0.0-beta.14",
-    "@hi-ui/input": "^4.0.0-beta.21",
-    "@hi-ui/locale-context": "^4.0.0-beta.19",
-    "@hi-ui/picker": "^4.0.0-beta.36",
-    "@hi-ui/popper": "^4.0.0-beta.19",
-    "@hi-ui/spinner": "^4.0.0-beta.11",
-    "@hi-ui/tree-utils": "^4.0.0-beta.5",
+    "@hi-ui/highlighter": "^4.0.0-beta.12",
+    "@hi-ui/icons": "^4.0.0-beta.15",
+    "@hi-ui/input": "^4.0.0-beta.22",
+    "@hi-ui/locale-context": "^4.0.0-beta.20",
+    "@hi-ui/picker": "^4.0.0-beta.37",
+    "@hi-ui/popper": "^4.0.0-beta.20",
+    "@hi-ui/spinner": "^4.0.0-beta.12",
+    "@hi-ui/tree-utils": "^4.0.0-beta.6",
     "@hi-ui/type-assertion": "^4.0.0-beta.5",
     "@hi-ui/use-check-state": "^4.0.0-beta.5",
     "@hi-ui/use-data-source": "^4.0.0-beta.6",
     "@hi-ui/use-latest": "^4.0.0-beta.5",
-    "@hi-ui/use-search-mode": "^4.0.0-beta.27",
-    "@hi-ui/use-toggle": "^4.0.0-beta.5",
+    "@hi-ui/use-search-mode": "^4.0.0-beta.28",
+    "@hi-ui/use-toggle": "^4.0.0-beta.6",
     "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5"
   },
   "peerDependencies": {
@@ -72,5 +73,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "a5d4d719cac7f0eaf9293668ad436cccb67fa570"
+  "gitHead": "43cfc64831263176a31bf951a5add214df340248"
 }