From 222ee1f3ad0a1857fc3c635e6d2105d741ebdffc Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 30 Jan 2022 15:49:24 +0800 Subject: [PATCH 01/22] Revert "revert: Revert "Merge branch 'feature' into master" (#33903)" This reverts commit 6b1a48d5edaca3d10380568f8ca1a6a867cb599e. --- components/_util/motion.tsx | 13 +- components/{tooltip => _util}/placements.tsx | 3 +- components/breadcrumb/BreadcrumbItem.tsx | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 235 +++ .../__tests__/__snapshots__/demo.test.js.snap | 145 ++ components/cascader/__tests__/index.test.js | 23 +- components/cascader/demo/placement.md | 77 + components/cascader/index.en-US.md | 2 +- components/cascader/index.tsx | 22 +- components/cascader/index.zh-CN.md | 2 +- .../date-picker/__tests__/DatePicker.test.js | 32 + .../__snapshots__/demo-extend.test.ts.snap | 1861 +++++++++++++++++ .../__tests__/__snapshots__/demo.test.js.snap | 210 ++ components/date-picker/demo/placement.md | 47 + .../generatePicker/generateRangePicker.tsx | 4 +- .../generatePicker/generateSinglePicker.tsx | 4 +- .../date-picker/generatePicker/index.tsx | 20 +- components/date-picker/index.en-US.md | 1 + components/date-picker/index.zh-CN.md | 1 + components/date-picker/util.ts | 55 + .../__snapshots__/demo-extend.test.ts.snap | 1292 +++++++++++- .../__tests__/__snapshots__/demo.test.js.snap | 62 +- components/dropdown/__tests__/index.test.js | 20 + components/dropdown/demo/arrow-center.md | 75 + components/dropdown/demo/arrow.md | 8 +- components/dropdown/demo/dropdown-button.md | 2 +- components/dropdown/demo/placement.md | 8 +- components/dropdown/dropdown.tsx | 33 +- components/dropdown/index.en-US.md | 6 +- components/dropdown/index.zh-CN.md | 6 +- components/dropdown/style/index.less | 24 +- .../__snapshots__/demo-extend.test.ts.snap | 71 + .../__tests__/__snapshots__/demo.test.js.snap | 71 + .../notification/__tests__/placement.test.js | 32 + components/notification/demo/placement.md | 13 + components/notification/index.tsx | 24 +- components/notification/index.zh-CN.md | 2 +- components/notification/style/index.less | 14 + .../__snapshots__/demo-extend.test.ts.snap | 247 +++ .../__tests__/__snapshots__/demo.test.js.snap | 148 ++ components/select/demo/placement.md | 53 + components/select/index.en-US.md | 3 +- components/select/index.tsx | 23 +- components/select/index.zh-CN.md | 3 +- components/skeleton/Input.tsx | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 14 +- .../__tests__/__snapshots__/demo.test.js.snap | 14 +- components/skeleton/demo/element.md | 9 +- components/skeleton/style/index.less | 9 +- components/space/index.tsx | 6 +- components/style/themes/variable.less | 4 +- .../table/__tests__/Table.sorter.test.js | 95 +- .../__snapshots__/Table.sorter.test.js.snap | 1 + .../__snapshots__/demo-extend.test.ts.snap | 1 + .../__tests__/__snapshots__/demo.test.js.snap | 1 + components/table/hooks/useSorter.tsx | 9 + components/time-picker/index.en-US.md | 37 +- components/time-picker/index.zh-CN.md | 45 +- components/tooltip/index.tsx | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 427 ++++ .../__tests__/__snapshots__/demo.test.js.snap | 142 ++ components/tree-select/demo/placement.md | 64 + components/tree-select/index.en-US.md | 1 + components/tree-select/index.tsx | 21 +- components/tree-select/index.zh-CN.md | 1 + package.json | 2 +- site/theme/template/Content/MainContent.jsx | 2 +- 67 files changed, 5796 insertions(+), 122 deletions(-) rename components/{tooltip => _util}/placements.tsx (97%) create mode 100644 components/cascader/demo/placement.md create mode 100644 components/date-picker/demo/placement.md create mode 100644 components/dropdown/demo/arrow-center.md create mode 100644 components/select/demo/placement.md create mode 100644 components/tree-select/demo/placement.md diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx index 1c69a9f05a..edac9ccda1 100644 --- a/components/_util/motion.tsx +++ b/components/_util/motion.tsx @@ -1,5 +1,6 @@ import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion'; import { MotionEvent } from 'rc-motion/lib/interface'; +import { tuple } from './type'; // ================== Collapse Motion ================== const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 }); @@ -25,11 +26,21 @@ const collapseMotion: CSSMotionProps = { motionDeadline: 500, }; +const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight'); +export type SelectCommonPlacement = typeof SelectPlacements[number]; + +const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => { + if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) { + return `slide-down`; + } + return `slide-up`; +}; + const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => { if (transitionName !== undefined) { return transitionName; } return `${rootPrefixCls}-${motion}`; }; -export { getTransitionName }; +export { getTransitionName, getTransitionDirection }; export default collapseMotion; diff --git a/components/tooltip/placements.tsx b/components/_util/placements.tsx similarity index 97% rename from components/tooltip/placements.tsx rename to components/_util/placements.tsx index 3fc9152268..eb4dead8a8 100644 --- a/components/tooltip/placements.tsx +++ b/components/_util/placements.tsx @@ -42,6 +42,7 @@ export default function getPlacements(config: PlacementsConfig) { horizontalArrowShift = 16, verticalArrowShift = 8, autoAdjustOverflow, + arrowPointAtCenter, } = config; const placementMap: BuildInPlacements = { left: { @@ -94,7 +95,7 @@ export default function getPlacements(config: PlacementsConfig) { }, }; Object.keys(placementMap).forEach(key => { - placementMap[key] = config.arrowPointAtCenter + placementMap[key] = arrowPointAtCenter ? { ...placementMap[key], overflow: getOverflowOptions(autoAdjustOverflow), diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index fd29f24a85..860971e847 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -30,7 +30,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({ const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => { if (overlay) { return ( - + {breadcrumbItem} @@ -62,9 +62,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({ return ( {link} - {separator && ( - {separator} - )} + {separator && {separator}} ); } diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap index cec599fae5..7a472fce2b 100644 --- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1674,6 +1674,241 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly `; +exports[`renders ./components/cascader/demo/placement.md extend context correctly 1`] = ` +Array [ +
+ + + + +
, +
, +
, +
+
+ + + + + Please select + +
+
+
+
+
+ +
+
+
+
+ +
, +] +`; + exports[`renders ./components/cascader/demo/search.md extend context correctly 1`] = `
`; +exports[`renders ./components/cascader/demo/placement.md correctly 1`] = ` +Array [ +
+ + + + +
, +
, +
, +
+
+ + + + + Please select + +
+ +
, +] +`; + exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
{ expect(wrapper.find('.ant-select-selection-placeholder').text()).toEqual(customPlaceholder); }); + it('placement work correctly', () => { + const customerOptions = [ + { + value: 'zhejiang', + label: 'Zhejiang', + children: [ + { + value: 'hangzhou', + label: 'Hangzhou', + }, + ], + }, + ]; + const wrapper = mount(); + expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight'); + }); + it('popup correctly with defaultValue RTL', () => { const wrapper = mount( @@ -484,10 +501,12 @@ describe('Cascader', () => { describe('legacy props', () => { it('popupClassName', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount(); + const wrapper = mount( + , + ); expect(wrapper.exists('.mock-cls')).toBeTruthy(); - expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight'); + expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('bottomLeft'); expect(errorSpy).toHaveBeenCalledWith( 'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.', diff --git a/components/cascader/demo/placement.md b/components/cascader/demo/placement.md new file mode 100644 index 0000000000..21a7a19caf --- /dev/null +++ b/components/cascader/demo/placement.md @@ -0,0 +1,77 @@ +--- +order: 13 +title: + zh-CN: 弹出位置 + en-US: Placement +--- + +## zh-CN + +可以通过 `placement` 手动指定弹出的位置。 + +## en-US + +You can manually specify the position of the popup via `placement`. + +```jsx +import { Cascader, Radio } from 'antd'; + +const options = [ + { + value: 'zhejiang', + label: 'Zhejiang', + children: [ + { + value: 'hangzhou', + label: 'Hangzhou', + children: [ + { + value: 'xihu', + label: 'West Lake', + }, + ], + }, + ], + }, + { + value: 'jiangsu', + label: 'Jiangsu', + children: [ + { + value: 'nanjing', + label: 'Nanjing', + children: [ + { + value: 'zhonghuamen', + label: 'Zhong Hua Men', + }, + ], + }, + ], + }, +]; + +const SetPlacementDemo = () => { + const [placement, SetPlacement] = React.useState('topLeft'); + + const placementChange = e => { + SetPlacement(e.target.value); + }; + + return ( + <> + + topLeft + topRight + bottomLeft + bottomRight + +
+
+ + + ); +}; + +ReactDOM.render(, mountNode); +``` diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index d0d9a698a4..ab236c8dad 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -42,7 +42,7 @@ Cascade selection box. | open | Set visible of cascader popup | boolean | - | 4.17.0 | | options | The data options of cascade | [Option](#Option)\[] | - | | | placeholder | The input placeholder | string | `Please select` | | -| placement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 | +| placement | Use preset popup align config from builtinPlacements | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 | | showSearch | Whether show search input in single mode | boolean \| [Object](#showSearch) | false | | | size | The input size | `large` \| `middle` \| `small` | - | | | style | The additional style | CSSProperties | - | | diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index f38029f626..718619deee 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -17,7 +17,7 @@ import { ConfigContext } from '../config-provider'; import type { SizeType } from '../config-provider/SizeContext'; import SizeContext from '../config-provider/SizeContext'; import getIcons from '../select/utils/iconUtil'; -import { getTransitionName } from '../_util/motion'; +import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion'; // Align the design since we use `rc-select` in root. This help: // - List search content will show all content @@ -85,7 +85,7 @@ export interface CascaderProps multiple?: boolean; size?: SizeType; bordered?: boolean; - + placement?: SelectCommonPlacement; suffixIcon?: React.ReactNode; options?: DataNodeType[]; } @@ -107,6 +107,7 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref, ref: React.Ref { + if (placement !== undefined) { + return placement; + } + return direction === 'rtl' + ? ('bottomRight' as SelectCommonPlacement) + : ('bottomLeft' as SelectCommonPlacement); + }; + // ==================== Render ===================== return ( , ref: React.Ref, ref: React.Ref diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 8fc6a4efda..6f437bc181 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg | open | 控制浮层显隐 | boolean | - | 4.17.0 | | options | 可选项数据源 | [Option](#Option)\[] | - | | | placeholder | 输入框占位文本 | string | `请选择` | | -| placement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 | +| placement | 浮层预设位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 | | showSearch | 在选择框中显示搜索框 | boolean \| [Object](#showSearch) | false | | | size | 输入框大小 | `large` \| `middle` \| `small` | - | | | style | 自定义样式 | CSSProperties | - | | diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js index 51cc73d956..7da679cdf7 100644 --- a/components/date-picker/__tests__/DatePicker.test.js +++ b/components/date-picker/__tests__/DatePicker.test.js @@ -199,4 +199,36 @@ describe('DatePicker', () => { expect(year).toBe(startDate.format('YYYY')); expect(wrapper.find('.ant-picker-time-panel').length).toBe(1); }); + + it('placement api work correctly ', () => { + const popupAlignDefault = (points = ['tl', 'bl'], offset = [0, 4]) => ({ + points, + offset, + overflow: { + adjustX: 1, + adjustY: 1, + }, + }); + + const wrapper = mount( + , + ); + expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tl', 'bl'])); + wrapper.setProps({ + placement: 'bottomRight', + }); + expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tr', 'br'])); + wrapper.setProps({ + placement: 'topLeft', + }); + expect(wrapper.find('Trigger').prop('popupAlign')).toEqual( + popupAlignDefault(['bl', 'tl'], [0, -4]), + ); + wrapper.setProps({ + placement: 'topRight', + }); + expect(wrapper.find('Trigger').prop('popupAlign')).toEqual( + popupAlignDefault(['br', 'tr'], [0, -4]), + ); + }); }); diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 47a53a4e9f..f0456a20b3 100644 --- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -28598,6 +28598,1867 @@ exports[`renders ./components/date-picker/demo/mode.md extend context correctly
`; +exports[`renders ./components/date-picker/demo/placement.md extend context correctly 1`] = ` +Array [ +
+ + + + +
, +
, +
, +
+
+ + + + + + +
+
, +
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+ + Today + +
+
+
+
+
, +
, +
, +
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
, +
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+
+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+
+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
+
+
+
+
+
+
+
+
, +] +`; + exports[`renders ./components/date-picker/demo/presetted-ranges.md extend context correctly 1`] = `
`; +exports[`renders ./components/date-picker/demo/placement.md correctly 1`] = ` +Array [ +
+ + + + +
, +
, +
, +
+
+ + + + + + +
+
, +
, +
, +
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
, +] +`; + exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
{ + const [placement, SetPlacement] = React.useState('topLeft'); + + const placementChange = e => { + SetPlacement(e.target.value); + }; + + return ( + <> + + topLeft + topRight + bottomLeft + bottomRight + +
+
+ +
+
+ + + ); +}; + +ReactDOM.render(, mountNode); +``` diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 6444353153..12d9154006 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -10,7 +10,7 @@ import enUS from '../locale/en_US'; import { ConfigContext, ConfigConsumerProps } from '../../config-provider'; import SizeContext from '../../config-provider/SizeContext'; import LocaleReceiver from '../../locale-provider/LocaleReceiver'; -import { getRangePlaceholder } from '../util'; +import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util'; import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.'; import { PickerComponentClass } from './interface'; @@ -43,6 +43,7 @@ export default function generateRangePicker( prefixCls: customizePrefixCls, getPopupContainer: customGetPopupContainer, className, + placement, size: customizeSize, bordered = true, placeholder, @@ -73,6 +74,7 @@ export default function generateRangePicker( } ref={this.pickerRef} + dropdownAlign={transPlacement2DropdownAlign(direction, placement)} placeholder={getRangePlaceholder(picker, locale, placeholder)} suffixIcon={picker === 'time' ? : } clearIcon={} diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index d061682316..af208611ab 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -7,7 +7,7 @@ import RCPicker from 'rc-picker'; import { PickerMode } from 'rc-picker/lib/interface'; import { GenerateConfig } from 'rc-picker/lib/generate/index'; import enUS from '../locale/en_US'; -import { getPlaceholder } from '../util'; +import { getPlaceholder, transPlacement2DropdownAlign } from '../util'; import devWarning from '../../_util/devWarning'; import { ConfigContext, ConfigConsumerProps } from '../../config-provider'; import LocaleReceiver from '../../locale-provider/LocaleReceiver'; @@ -68,6 +68,7 @@ export default function generatePicker(generateConfig: GenerateConfig< className, size: customizeSize, bordered = true, + placement, placeholder, ...restProps } = this.props; @@ -105,6 +106,7 @@ export default function generatePicker(generateConfig: GenerateConfig< suffixIcon={ mergedPicker === 'time' ? : } + dropdownAlign={transPlacement2DropdownAlign(direction, placement)} clearIcon={} prevIcon={} nextIcon={} diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 26e14c4bc8..ed7d4b509b 100644 --- a/components/date-picker/generatePicker/index.tsx +++ b/components/date-picker/generatePicker/index.tsx @@ -17,6 +17,7 @@ import PickerTag from '../PickerTag'; import { TimePickerLocale } from '../../time-picker'; import generateSinglePicker from './generateSinglePicker'; import generateRangePicker from './generateRangePicker'; +import { tuple } from '../../_util/type'; export const Components = { button: PickerButton, rangeItem: PickerTag }; @@ -27,13 +28,18 @@ function toArray(list: T | T[]): T[] { return Array.isArray(list) ? list : [list]; } -export function getTimeProps( - props: { format?: string; picker?: PickerMode } & SharedTimeProps, +export function getTimeProps( + props: { format?: string; picker?: PickerMode } & Omit< + SharedTimeProps, + 'disabledTime' + > & { + disabledTime?: DisabledTime; + }, ) { const { format, picker, showHour, showMinute, showSecond, use12Hours } = props; const firstFormat = toArray(format)[0]; - const showTimeObj: SharedTimeProps = { ...props }; + const showTimeObj = { ...props }; if (firstFormat && typeof firstFormat === 'string') { if (!firstFormat.includes('s') && showSecond === undefined) { @@ -64,16 +70,16 @@ export function getTimeProps( showTime: showTimeObj, }; } +const DataPickerPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight'); +type DataPickerPlacement = typeof DataPickerPlacements[number]; type InjectDefaultProps = Omit< Props, - | 'locale' - | 'generateConfig' - | 'hideHeader' - | 'components' + 'locale' | 'generateConfig' | 'hideHeader' | 'components' > & { locale?: PickerLocale; size?: SizeType; + placement?: DataPickerPlacement; bordered?: boolean; }; diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index aaaac1ea19..b20a3333fc 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -69,6 +69,7 @@ The following APIs are shared by DatePicker, RangePicker. | panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 | | picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 | | placeholder | The placeholder of date input | string \| \[string,string] | - | | +| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | | popupStyle | To customize the style of the popup calendar | CSSProperties | {} | | | prevIcon | The custom prev icon | ReactNode | - | 4.17.0 | | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 43c9f44432..fd7294a8d3 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -70,6 +70,7 @@ import locale from 'antd/lib/locale/zh_CN'; | panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 | | picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 | | placeholder | 输入框提示文字 | string \| \[string, string] | - | | +| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | | popupStyle | 额外的弹出日历样式 | CSSProperties | {} | | | prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 | | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | | diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts index 0643a0842a..2f54342943 100644 --- a/components/date-picker/util.ts +++ b/components/date-picker/util.ts @@ -1,4 +1,6 @@ import { PickerMode } from 'rc-picker/lib/interface'; +import { DirectionType } from '../config-provider'; +import { SelectCommonPlacement } from '../_util/motion'; import { PickerLocale } from './generatePicker'; export function getPlaceholder( @@ -51,3 +53,56 @@ export function getRangePlaceholder( } return locale.lang.rangePlaceholder; } + +export function transPlacement2DropdownAlign( + direction: DirectionType, + placement?: SelectCommonPlacement, +) { + const overflow = { + adjustX: 1, + adjustY: 1, + }; + switch (placement) { + case 'bottomLeft': { + return { + points: ['tl', 'bl'], + offset: [0, 4], + overflow, + }; + } + case 'bottomRight': { + return { + points: ['tr', 'br'], + offset: [0, 4], + overflow, + }; + } + case 'topLeft': { + return { + points: ['bl', 'tl'], + offset: [0, -4], + overflow, + }; + } + case 'topRight': { + return { + points: ['br', 'tr'], + offset: [0, -4], + overflow, + }; + } + default: { + return direction === 'rtl' + ? { + points: ['tr', 'br'], + offset: [0, 4], + overflow, + } + : { + points: ['tl', 'bl'], + offset: [0, 4], + overflow, + }; + } + } +} diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap index 7ba1062ede..7bb2346334 100644 --- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -220,7 +220,7 @@ Array [ type="button" > - bottomCenter + bottom ,
@@ -860,7 +860,1291 @@ Array [ type="button" > - topCenter + top + + , +
+
+
+ +