diff --git a/package.json b/package.json index 61150e62..6aeac86b 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "test": "rc-test" }, "dependencies": { - "@rc-component/select": "~1.5.0", + "@rc-component/select": "~1.5.2", "@rc-component/tree": "~1.2.0", "@rc-component/util": "^1.4.0", "clsx": "^2.1.1" diff --git a/src/OptionList/CacheContent.tsx b/src/OptionList/CacheContent.tsx deleted file mode 100644 index 4f2ec10c..00000000 --- a/src/OptionList/CacheContent.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; - -export interface CacheContentProps { - children?: React.ReactNode; - open?: boolean; -} - -const CacheContent = React.memo( - ({ children }: CacheContentProps) => children as React.ReactElement, - (_, next) => !next.open, -); - -if (process.env.NODE_ENV !== 'production') { - CacheContent.displayName = 'CacheContent'; -} - -export default CacheContent; diff --git a/src/OptionList/List.tsx b/src/OptionList/List.tsx index bb01a3f9..c99ef264 100644 --- a/src/OptionList/List.tsx +++ b/src/OptionList/List.tsx @@ -3,6 +3,7 @@ import { clsx } from 'clsx'; import type { useBaseProps } from '@rc-component/select'; import type { RefOptionListProps } from '@rc-component/select/lib/OptionList'; import * as React from 'react'; +import useMemo from '@rc-component/util/lib/hooks/useMemo'; import type { DefaultOptionType, LegacyKey, SingleValueType } from '../Cascader'; import CascaderContext from '../context'; import { @@ -14,7 +15,6 @@ import { toPathValueStr, } from '../utils/commonUtil'; import { toPathOptions } from '../utils/treeUtil'; -import CacheContent from './CacheContent'; import Column, { FIX_LABEL } from './Column'; import useActive from './useActive'; import useKeyboard from './useKeyboard'; @@ -29,7 +29,9 @@ export type RawOptionListProps = Pick< | 'direction' | 'open' | 'disabled' ->; +> & { + lockOptions?: boolean; +}; const RawOptionList = React.forwardRef((props, ref) => { const { @@ -41,6 +43,7 @@ const RawOptionList = React.forwardRef(( direction, open, disabled, + lockOptions = false, } = props; const containerRef = React.useRef(null); @@ -135,7 +138,7 @@ const RawOptionList = React.forwardRef(( }; // ========================== Option ========================== - const mergedOptions = React.useMemo(() => { + const filteredOptions = React.useMemo(() => { if (searchValue) { return searchOptions; } @@ -143,6 +146,13 @@ const RawOptionList = React.forwardRef(( return options; }, [searchValue, searchOptions, options]); + // Update only when open or lockOptions + const mergedOptions = useMemo( + () => filteredOptions, + [open, lockOptions], + (prev, next) => !!next[0] && !next[1], + ); + // ========================== Column ========================== const optionColumns = React.useMemo(() => { const optionList = [{ options: mergedOptions }]; @@ -246,17 +256,15 @@ const RawOptionList = React.forwardRef(( // >>>>> Render return ( - -
- {columnNodes} -
-
+
+ {columnNodes} +
); }); diff --git a/src/OptionList/index.tsx b/src/OptionList/index.tsx index 9924f7ed..46475963 100644 --- a/src/OptionList/index.tsx +++ b/src/OptionList/index.tsx @@ -4,10 +4,10 @@ import * as React from 'react'; import RawOptionList from './List'; const RefOptionList = React.forwardRef((props, ref) => { - const baseProps = useBaseProps(); + const { lockOptions, ...baseProps } = useBaseProps(); // >>>>> Render - return ; + return ; }); export default RefOptionList;