feat: [cascader] position (#986)

* feat: cascader position

* fix: optimize code

Co-authored-by: zhangyumei.0319 <[email protected]>

content/input/cascader/index.md

@@ -1506,67 +1506,68 @@ function Demo() {
 
 ### Cascader
 
-| 属性               | 说明                                                                                 | 类型                                                                             | 默认值                           | 版本   |
-| ------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | -------------------------------- | ------ |
-| arrowIcon     |   自定义右侧下拉箭头 Icon，当 showClear 开关打开且当前有选中值时，hover 会优先显示 clear icon                                                              | ReactNode                                                                          |                             | 1.15.0      |
-| autoAdjustOverflow | 是否自动调整下拉框展开方向，用于边缘遮挡时自动调整展开方向 | boolean | true | - |
-| autoMergeValue | 设置自动合并 value。具体而言是，开启后，当某个父节点被选中时，value 将不包括该节点的子孙节点。不支持动态切换 | boolean | true |  1.28.0 |
-| bottomSlot | 底部插槽 | ReactNode | - |  1.27.0 |
-| changeOnSelect     | 是否允许选择非叶子节点                                                                   | boolean                                                                          | false                            | -      |
-| className          | 选择框的 className 属性                                                              | string                                                                           | -                                | -      |
-| defaultOpen       | 设置是否默认打开下拉菜单              | boolean   | false                                | -      |
-| defaultValue       | 指定默认选中的条目                                                                   | string\|number\|TreeNode\|(string\|number\|TreeNode)[]                                                                           | -                                | -      |
-| disabled           | 是否禁用                                                                             | boolean                                                                          | false                            | -      |
-| displayProp        | 设置回填选项显示的属性值                                                                 | string                                                                           | `label`                          | -      |
+| 属性               | 说明                                                                                 | 类型                                                                             | 默认值                           | 版本                               |
+| ------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | -------------------------------- |----------------------------------|
+| arrowIcon     |   自定义右侧下拉箭头 Icon，当 showClear 开关打开且当前有选中值时，hover 会优先显示 clear icon                                                              | ReactNode                                                                          |                             | 1.15.0                           |
+| autoAdjustOverflow | 是否自动调整下拉框展开方向，用于边缘遮挡时自动调整展开方向 | boolean | true | -                                |
+| autoMergeValue | 设置自动合并 value。具体而言是，开启后，当某个父节点被选中时，value 将不包括该节点的子孙节点。不支持动态切换 | boolean | true | 1.28.0                           |
+| bottomSlot | 底部插槽 | ReactNode | - | 1.27.0                           |
+| changeOnSelect     | 是否允许选择非叶子节点                                                                   | boolean                                                                          | false                            | -                                |
+| className          | 选择框的 className 属性                                                              | string                                                                           | -                                | -                                |
+| defaultOpen       | 设置是否默认打开下拉菜单              | boolean   | false                                | -                                |
+| defaultValue       | 指定默认选中的条目                                                                   | string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]                                                                           | -                                | -      |
+| disabled           | 是否禁用                                                                             | boolean                                                                          | false                            | -                                |
+| displayProp        | 设置回填选项显示的属性值                                                                 | string                                                                           | `label`                          | -                                |
 | displayRender      | 设置回填格式                                                                 | (selected: string[] \| Entity, idx?: number) => ReactNode                                                        | selected => selected.join(' / ') | -      |
-| dropdownClassName  | 下拉菜单的 className 属性                                                            | string                                                                           | -                                | -      |
-| dropdownStyle      | 下拉菜单的样式                                                                       | object                                                                           | -                                | -      |
-| emptyContent       | 当搜索无结果时展示的内容                                                             | ReactNode                                                                        | `暂无数据`                       | -      |
-| filterLeafOnly       |  搜索结果是否只展示叶子结点路径   | boolean    | true    | 1.26.0    |
+| dropdownClassName  | 下拉菜单的 className 属性                                                            | string                                                                           | -                                | -                                |
+| dropdownStyle      | 下拉菜单的样式                                                                       | object                                                                           | -                                | -                                |
+| emptyContent       | 当搜索无结果时展示的内容                                                             | ReactNode                                                                        | `暂无数据`                       | -                                |
+| filterLeafOnly       |  搜索结果是否只展示叶子结点路径   | boolean    | true    | 1.26.0                           |
 | filterTreeNode     | 设置筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | ((inputValue: string, treeNodeString: string) => boolean) \| boolean | false                            | -      |
-| getPopupContainer | 指定父级 DOM，下拉框将会渲染至该 DOM 中，自定义需要设置 position: relative |() => HTMLElement|() => document.body|-|
-| insetLabel         | 前缀标签别名，主要用于 Form                                                          | ReactNode                                                                        | -                                | 0.28.0 |
-| leafOnly | 多选时设置 value 只包含叶子节点，即显示的 Tag 和 onChange 的 value 参数只包含叶子节点。不支持动态切换 | boolean | false |  2.2.0|
-| loadData | 异步加载数据，需要返回一个Promise | (selectOptions: TreeNode[]) => Promise< void > |- |  1.8.0|
-| max| 多选时，限制多选选中的数量，超出 max 后将触发 onExceed 回调 | number |-|1.28.0|
-| maxTagCount| 多选时，标签的最大展示数量，超出后将以 +N 形式展示| number |-|1.28.0|
-| motion | 设置下拉框弹出的动画 |boolean\|object|true|-|
-| mouseEnterDelay | 鼠标移入后，延迟显示下拉框的时间，单位毫秒 | number | 50 | - |
-| mouseLeaveDelay | 鼠标移出后，延迟消失下拉框的时间，单位毫秒 | number | 50 | - |
-| multiple | 设置多选 | boolean | false |  1.28.0 |
-| placeholder        | 选择框默认文字                                                                       | string                                                                           | -                                | -      |
-| prefix             | 前缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0 |
-| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
-|restTagsPopoverProps |Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)           |PopoverProps     | {}        |1.28.0|
-| searchPlaceholder  | 搜索框默认文字                                                                       | string                                                                           | -                                | -      |
-| separator  | 自定义分隔符，包括：搜索时显示在下拉框的内容以及单选时回显到 Trigger 的内容的分隔符    | string                                                                           | ' / '                                | 2.2.0      |
-| showClear       |  是否展示清除按钮   | boolean    | false    | 0.35.0    |
-| showNext| 设置展开 Dropdown 子菜单的方式，可选: `click`、`hover` | string |`click`|1.29.0|
-| showRestTagsPopover| 当超过 maxTagCount，hover 到 +N 时，是否通过 Popover 显示剩余内容| boolean |false|1.28.0|
-| size               | 选择框大小，可选 `large`，`small`，`default`                                         | string                                                                           | `default`                        | -      |
-| stopPropagation | 是否阻止下拉框上的点击事件冒泡 | boolean | true | - |
-| disableStrictly | 设置是否开启严格禁用。开启后，当节点是 disabled 的时候，则不能通过子级或者父级的关系改变选中状态 | boolean | false | 1.32.0|
-| style              | 选择框的样式                                                                         | CSSProperties                                                                           | -                                | -      |
-| suffix             | 后缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0 |
-| topSlot | 顶部插槽 | ReactNode | - |  1.27.0 |
-| treeData           | 展示数据，具体属性参考 [TreeNode](#TreeNode)              | TreeNode[]                                                                  | \[]                              | -      |
-| treeNodeFilterProp | 搜索时输入项过滤对应的 treeNode 属性                                                 | string                                                                           | `label`                          | -      |
-| triggerRender | 自定义触发器渲染方法  | (triggerRenderData: object) => ReactNode | - | 0.34.0 |
-| validateStatus | trigger 的校验状态，仅影响展示样式。可选: default、error、warning | string | `default` | - |
-| value       | （受控）选中的条目                                                                   | string\|number\|TreeNode\|(string\|number\|TreeNode)[]                                                                           | -                                | -      |
-| zIndex | 下拉菜单的 zIndex | number | 1030 | - |
-| enableLeafClick | 多选时，是否启动点击叶子节点选项触发勾选 | boolean | false | 2.2.0 |
-| onBlur | 失焦 Cascader 的回调 | (e: MouseEvent) => void | - | - |
-| onChange           | 选中树节点时调用此函数，默认返回选中项 path 的 value 数组                            | (value: string\|number\|TreeNode\|(string\|number\|TreeNode)[]) => void                                                                         | -                                | -      |
-| onChangeWithObject | 是否将选中项 option 的其他属性作为回调。设为 true 时，onChange 的入参类型会从 string/number 变为 TreeNode。此时如果是受控，也需要把 value 设置成 TreeNode 类型，且必须含有 value 的键值，defaultValue 同理 | boolean | false | 1.16.0 |
-| onClear| showClear 为 true 时，点击清空按钮触发的回调 | () => void |-|1.29.0|
-| onDropdownVisibleChange       | 下拉框切换时的回调   | (visible: boolean) => void        | -                                | 0.35.0    |
-| onExceed| 多选时，超出 max 后触发的回调 | (checkedItem: Entity[]) => void |-|1.28.0|
-| onFocus| 聚焦 Cascader 的回调 | (e: MouseEvent) => void | - | - |
-| onListScroll | 下拉面板滚动的回调 | (e: React.Event, panel: { panelIndex: number; activeNode: TreeNode; } ) => void | - | 1.15.0 |
-| onLoad | 节点加载完毕时触发的回调 | (newLoadedKeys: Set< string >, data: TreeNode) => void |- |  1.8.0|
-| onSearch           | 文本框值变化时回调                                                                   | (value: string) => void                                                                         | -                                | -      |
-| onSelect           | 被选中时调用，返回选中项的 value                                                     | (value: string \| number \| (string \| number)[]) => void                                                                         | -                                | -      |
+| getPopupContainer | 指定父级 DOM，下拉框将会渲染至该 DOM 中，自定义需要设置 position: relative |() => HTMLElement|() => document.body| -                                |
+| insetLabel         | 前缀标签别名，主要用于 Form                                                          | ReactNode                                                                        | -                                | 0.28.0                           |
+| leafOnly | 多选时设置 value 只包含叶子节点，即显示的 Tag 和 onChange 的 value 参数只包含叶子节点。不支持动态切换 | boolean | false | 2.2.0                            |
+| loadData | 异步加载数据，需要返回一个Promise | (selectOptions: TreeNode[]) => Promise< void > |- | 1.8.0                            |
+| max| 多选时，限制多选选中的数量，超出 max 后将触发 onExceed 回调 | number |-| 1.28.0                           |
+| maxTagCount| 多选时，标签的最大展示数量，超出后将以 +N 形式展示| number |-| 1.28.0                           |
+| motion | 设置下拉框弹出的动画 |boolean\|object| true                             |-|
+| mouseEnterDelay | 鼠标移入后，延迟显示下拉框的时间，单位毫秒 | number | 50 | -                                |
+| mouseLeaveDelay | 鼠标移出后，延迟消失下拉框的时间，单位毫秒 | number | 50 | -                                |
+| multiple | 设置多选 | boolean | false | 1.28.0                           |
+| placeholder        | 选择框默认文字                                                                       | string                                                                           | -                                | -                                |
+| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                     | "bottom"                                    | 2.16.0-beta.0                    |
+| prefix             | 前缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0                           |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |                                  |
+|restTagsPopoverProps |Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)           |PopoverProps     | {}        | 1.28.0                           |
+| searchPlaceholder  | 搜索框默认文字                                                                       | string                                                                           | -                                | -                                |
+| separator  | 自定义分隔符，包括：搜索时显示在下拉框的内容以及单选时回显到 Trigger 的内容的分隔符    | string                                                                           | ' / '                                | 2.2.0                            |
+| showClear       |  是否展示清除按钮   | boolean    | false    | 0.35.0                           |
+| showNext| 设置展开 Dropdown 子菜单的方式，可选: `click`、`hover` | string |`click`| 1.29.0                           |
+| showRestTagsPopover| 当超过 maxTagCount，hover 到 +N 时，是否通过 Popover 显示剩余内容| boolean |false| 1.28.0                           |
+| size               | 选择框大小，可选 `large`，`small`，`default`                                         | string                                                                           | `default`                        | -                                |
+| stopPropagation | 是否阻止下拉框上的点击事件冒泡 | boolean | true | -                                |
+| disableStrictly | 设置是否开启严格禁用。开启后，当节点是 disabled 的时候，则不能通过子级或者父级的关系改变选中状态 | boolean | false | 1.32.0                           |
+| style              | 选择框的样式                                                                         | CSSProperties                                                                           | -                                | -                                |
+| suffix             | 后缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0                           |
+| topSlot | 顶部插槽 | ReactNode | - | 1.27.0                           |
+| treeData           | 展示数据，具体属性参考 [TreeNode](#TreeNode)              | TreeNode[]                                                                  | \[]                              | -                                |
+| treeNodeFilterProp | 搜索时输入项过滤对应的 treeNode 属性                                                 | string                                                                           | `label`                          | -                                |
+| triggerRender | 自定义触发器渲染方法  | (triggerRenderData: object) => ReactNode | - | 0.34.0                           |
+| validateStatus | trigger 的校验状态，仅影响展示样式。可选: default、error、warning | string | `default` | -                                |
+| value       | （受控）选中的条目                                                                   | string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]                                                                           | -                                | -      |
+| zIndex | 下拉菜单的 zIndex | number | 1030 | -                                |
+| enableLeafClick | 多选时，是否启动点击叶子节点选项触发勾选 | boolean | false | 2.2.0                            |
+| onBlur | 失焦 Cascader 的回调 | (e: MouseEvent) => void | - | -                                |
+| onChange           | 选中树节点时调用此函数，默认返回选中项 path 的 value 数组                            | (value: string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]) => void                                                                         | -                                | -      |
+| onChangeWithObject | 是否将选中项 option 的其他属性作为回调。设为 true 时，onChange 的入参类型会从 string/number 变为 TreeNode。此时如果是受控，也需要把 value 设置成 TreeNode 类型，且必须含有 value 的键值，defaultValue 同理 | boolean | false | 1.16.0                           |
+| onClear| showClear 为 true 时，点击清空按钮触发的回调 | () => void |-| 1.29.0                           |
+| onDropdownVisibleChange       | 下拉框切换时的回调   | (visible: boolean) => void        | -                                | 0.35.0                           |
+| onExceed| 多选时，超出 max 后触发的回调 | (checkedItem: Entity[]) => void |-| 1.28.0                           |
+| onFocus| 聚焦 Cascader 的回调 | (e: MouseEvent) => void | - | -                                |
+| onListScroll | 下拉面板滚动的回调 | (e: React.Event, panel: { panelIndex: number; activeNode: TreeNode; } ) => void | - | 1.15.0                           |
+| onLoad | 节点加载完毕时触发的回调 | (newLoadedKeys: Set< string >, data: TreeNode) => void |- | 1.8.0                            |
+| onSearch           | 文本框值变化时回调                                                                   | (value: string) => void                                                                         | -                                | -                                |
+| onSelect           | 被选中时调用，返回选中项的 value                                                     | (value: string \| number \| (string \                        | number)[]) => void                                                                         | -                                | -      |
 
 ### TreeNode
 

packages/semi-ui/cascader/index.tsx

@@ -29,6 +29,7 @@ import Tag from '../tag';
 import TagInput from '../tagInput';
 import { Motion } from '../_base/base';
 import { isSemiIcon } from '../_utils';
+import { Position } from '../tooltip/index';
 
 export { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/cascader/foundation';
 export { CascaderData, Entity, Data, CascaderItemProps } from './item';
@@ -82,6 +83,7 @@ export interface CascaderProps extends BasicCascaderProps {
     onBlur?: (e: MouseEvent) => void;
     onFocus?: (e: MouseEvent) => void;
     validateStatus?: ValidateStatus;
+    position?: Position;
 }
 
 export interface CascaderState extends BasicCascaderInnerData {
@@ -169,6 +171,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         leafOnly: PropTypes.bool,
         enableLeafClick: PropTypes.bool,
         preventScroll: PropTypes.bool,
+        position:PropTypes.string
     };
 
     static defaultProps = {
@@ -954,12 +957,13 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             stopPropagation,
             mouseLeaveDelay,
             mouseEnterDelay,
+            position
         } = this.props;
         const { isOpen, rePosKey } = this.state;
         const { direction } = this.context;
         const content = this.renderContent();
         const selection = this.renderSelection();
-        const pos = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+        const pos = position ?? (direction === 'rtl' ? 'bottomRight' : 'bottomLeft');
         const mergedMotion: Motion = this.foundation.getMergedMotion();
         return (
             <Popover