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/_util/statusUtils.tsx b/components/_util/statusUtils.tsx new file mode 100644 index 0000000000..25153ba93f --- /dev/null +++ b/components/_util/statusUtils.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; +import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; +import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; +import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; +import classNames from 'classnames'; +import { ValidateStatus } from '../form/FormItem'; +import { tuple } from './type'; + +const InputStatuses = tuple('warning', 'error', ''); +export type InputStatus = typeof InputStatuses[number]; + +const iconMap = { + success: CheckCircleFilled, + warning: ExclamationCircleFilled, + error: CloseCircleFilled, + validating: LoadingOutlined, +}; + +export const getFeedbackIcon = (prefixCls: string, status?: ValidateStatus) => { + const IconNode = status && iconMap[status]; + return IconNode ? ( + + + + ) : null; +}; + +export function getStatusClassNames( + prefixCls: string, + status?: ValidateStatus, + hasFeedback?: boolean, +) { + return classNames({ + [`${prefixCls}-status-success`]: status === 'success', + [`${prefixCls}-status-warning`]: status === 'warning', + [`${prefixCls}-status-error`]: status === 'error', + [`${prefixCls}-status-validating`]: status === 'validating', + [`${prefixCls}-has-feedback`]: hasFeedback, + }); +} + +export const getMergedStatus = (contextStatus?: ValidateStatus, customStatus?: InputStatus) => + customStatus || contextStatus; diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap index 6bedc29b73..08fcb1420c 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -107,7 +107,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md extend cont class="ant-select-selection-search" > `; +exports[`renders ./components/auto-complete/demo/status.md extend context correctly 1`] = ` +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+`; + exports[`renders ./components/auto-complete/demo/uncertain-category.md extend context correctly 1`] = `
`; +exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = ` +
+
+
+
+ + + + +
+
+
+
+
+
+ + + + +
+
+
+
+`; + exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
({ + value: str.repeat(repeat), +}); +const ValidateInputs: React.FC = () => { + const [options, setOptions] = useState<{ value: string }[]>([]); + + const onSearch = (searchText: string) => { + setOptions( + !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)], + ); + }; + + return ( + + + + + ); +}; + +ReactDOM.render(, mountNode); +``` diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index b8de0d0676..1069b3e07f 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -38,6 +38,7 @@ The differences with Select are: | open | Controlled open state of dropdown | boolean | - | | | options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | | | placeholder | The placeholder of input | string | - | | +| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | | value | Selected option | string | - | | | onBlur | Called when leaving the component | function() | - | | | onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | | @@ -48,10 +49,10 @@ The differences with Select are: ## Methods -| Name | Description | Version | -| --- | --- | --- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| ------- | ------------ | ------- | +| blur() | Remove focus | | +| focus() | Get focus | | ## FAQ diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 71ae87dc9f..c358e115b1 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -20,6 +20,7 @@ import Select, { import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import devWarning from '../_util/devWarning'; import { isValidElement } from '../_util/reactNode'; +import { InputStatus } from '../_util/statusUtils'; const { Option } = Select; @@ -37,6 +38,7 @@ export interface AutoCompleteProps< 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue' > { dataSource?: DataSourceItemType[]; + status?: InputStatus; } function isSelectOptionOrSelectOptGroup(child: any): Boolean { diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 0dc26c27e2..6e87c01e26 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -40,6 +40,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg | open | 是否展开下拉菜单 | boolean | - | | | options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | | | placeholder | 输入框提示 | string | - | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | | value | 指定当前选中的条目 | string | - | | | onBlur | 失去焦点时的回调 | function() | - | | | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | | @@ -50,10 +51,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg ## 方法 -| 名称 | 描述 | 版本 | -| --- | --- | --- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| ------- | -------- | ---- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | ## FAQ 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..9119817610 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`] = `
+
+
+
+ + + + + Error + +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ + Warning multiple + +
+
+
+
+
+ +
+
+
+
+
+
+
+`; + exports[`renders ./components/cascader/demo/suffix.md extend context correctly 1`] = ` Array [
`; +exports[`renders ./components/cascader/demo/placement.md correctly 1`] = ` +Array [ +
+ + + + +
, +
, +
, +
+
+ + + + + Please select + +
+ +
, +] +`; + exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
+
+
+
+ + + + + Error + +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ + Warning multiple + +
+
+
+
+`; + exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = ` Array [
{ 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/demo/status.md b/components/cascader/demo/status.md new file mode 100644 index 0000000000..694e092cd3 --- /dev/null +++ b/components/cascader/demo/status.md @@ -0,0 +1,28 @@ +--- +order: 16 +version: 4.19.0 +title: + zh-CN: 自定义状态 + en-US: Status +--- + +## zh-CN + +使用 `status` 为 Cascader 添加状态，可选 `error` 或者 `warning`。 + +## en-US + +Add status to Cascader with `status`, which could be `error` or `warning`. + +```tsx +import { Cascader, Space } from 'antd'; + +const Validation: React.FC = () => ( + + + + +); + +ReactDOM.render(, mountNode); +``` diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index 9b2fe4cb5b..89acf95517 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -42,9 +42,10 @@ 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` | - | | +| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | | style | The additional style | CSSProperties | - | | | suffixIcon | The custom suffix icon | ReactNode | - | | | tagRender | Customize tag render when `multiple` | (props) => ReactNode | - | 4.17.0 | diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 2269820a1a..89f8caa1af 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -13,12 +13,15 @@ import omit from 'rc-util/lib/omit'; import RightOutlined from '@ant-design/icons/RightOutlined'; import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import LeftOutlined from '@ant-design/icons/LeftOutlined'; +import { useContext } from 'react'; import devWarning from '../_util/devWarning'; 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'; +import { FormItemStatusContext } from '../form/context'; +import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; // Align the design since we use `rc-select` in root. This help: // - List search content will show all content @@ -94,10 +97,11 @@ export type CascaderProps = UnionCascaderProps & { multiple?: boolean; size?: SizeType; bordered?: boolean; - + placement?: SelectCommonPlacement; suffixIcon?: React.ReactNode; options?: DataNodeType[]; -} + status?: InputStatus; +}; export interface CascaderRef { focus: () => void; @@ -116,11 +120,14 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref, 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 ); }) as (( diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 1d5d722e35..92988351cd 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -43,9 +43,10 @@ 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` | - | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | | style | 自定义样式 | CSSProperties | - | | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | tagRender | 自定义 tag 内容，多选时生效 | (props) => ReactNode | - | 4.17.0 | diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index e07deeea0a..b4e1b0338a 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -4,3 +4,5 @@ import './index.less'; // style dependencies import '../../empty/style'; import '../../select/style'; + +// deps-lint-skip: form diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index 8fb2f1be13..8a2afdd3c4 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -13367,7 +13367,7 @@ exports[`ConfigProvider components Form configProvider 1`] = ` class="config-form-item-control-input-content" > @@ -13405,7 +13405,7 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] = class="config-form-item-control-input-content" > @@ -13443,7 +13443,7 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`] class="config-form-item-control-input-content" > @@ -13481,7 +13481,7 @@ exports[`ConfigProvider components Form configProvider virtual and dropdownMatch class="ant-form-item-control-input-content" > @@ -13519,7 +13519,7 @@ exports[`ConfigProvider components Form normal 1`] = ` class="ant-form-item-control-input-content" > @@ -13557,7 +13557,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = ` class="prefix-Form-item-control-input-content" > @@ -13744,7 +13744,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`] value="" /> @@ -21904,14 +21904,14 @@ exports[`ConfigProvider components Skeleton prefixCls 1`] = ` exports[`ConfigProvider components Slider configProvider 1`] = `
@@ -21950,22 +21950,19 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
-
`; exports[`ConfigProvider components Slider configProvider componentSize large 1`] = `
@@ -22004,22 +22001,19 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
-
`; exports[`ConfigProvider components Slider configProvider componentSize middle 1`] = `
@@ -22058,22 +22052,19 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
-
`; exports[`ConfigProvider components Slider configProvider virtual and dropdownMatchSelectWidth 1`] = `
@@ -22112,22 +22103,19 @@ exports[`ConfigProvider components Slider configProvider virtual and dropdownMat
-
`; exports[`ConfigProvider components Slider normal 1`] = `
@@ -22166,22 +22154,19 @@ exports[`ConfigProvider components Slider normal 1`] = `
-
`; exports[`ConfigProvider components Slider prefixCls 1`] = `
@@ -22220,9 +22205,6 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
-
`; 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__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js index 26a347abef..de0249f790 100644 --- a/components/date-picker/__tests__/RangePicker.test.js +++ b/components/date-picker/__tests__/RangePicker.test.js @@ -5,6 +5,7 @@ import DatePicker from '..'; import { setMockDate, resetMockDate } from '../../../tests/utils'; import { openPicker, selectCell, closePicker } from './utils'; import focusTest from '../../../tests/shared/focusTest'; +import enUS from '../locale/en_US'; const { RangePicker } = DatePicker; @@ -96,4 +97,10 @@ describe('RangePicker', () => { expect(wrapper.find('input').first().props().placeholder).toEqual('Start date'); expect(wrapper.find('input').last().props().placeholder).toEqual('End date'); }); + + it('RangePicker picker quarter placeholder', () => { + const wrapper = mount(); + expect(wrapper.find('input').at(0).props().placeholder).toEqual('Start quarter'); + expect(wrapper.find('input').at(1).props().placeholder).toEqual('End quarter'); + }); }); 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..b690f01b3e 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`] = `
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+ + + + + + + + + +
+
+ Q1 +
+ 		+
+ Q2 +
+ 		+
+ Q3 +
+ 		+
+ Q4 +
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+ + + + + + + + + +
+
+ Q1 +
+ 		+
+ Q2 +
+ 		+
+ Q3 +
+ 		+
+ Q4 +
+
+
+
+
+
+
+
+
+
+
@@ -45044,6 +47204,1211 @@ exports[`renders ./components/date-picker/demo/start-end.md extend context corre
`; +exports[`renders ./components/date-picker/demo/status.md extend context correctly 1`] = ` +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 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 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+`; + exports[`renders ./components/date-picker/demo/suffix.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`] = `
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
@@ -3432,6 +3728,103 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
`; +exports[`renders ./components/date-picker/demo/status.md correctly 1`] = ` +
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+`; + exports[`renders ./components/date-picker/demo/suffix.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/demo/range-picker.md b/components/date-picker/demo/range-picker.md index 2fcb48c006..10d8f3ee7d 100644 --- a/components/date-picker/demo/range-picker.md +++ b/components/date-picker/demo/range-picker.md @@ -24,6 +24,7 @@ ReactDOM.render( + , mountNode, diff --git a/components/date-picker/demo/status.md b/components/date-picker/demo/status.md new file mode 100644 index 0000000000..cb8ebe7db3 --- /dev/null +++ b/components/date-picker/demo/status.md @@ -0,0 +1,28 @@ +--- +order: 19 +version: 4.19.0 +title: + zh-CN: 自定义状态 + en-US: Status +--- + +## zh-CN + +使用 `status` 为 DatePicker 添加状态，可选 `error` 或者 `warning`。 + +## en-US + +Add status to DatePicker with `status`, which could be `error` or `warning`. + +```tsx +import { DatePicker, Space } from 'antd'; + +const Status: React.FC = () => ( + + + + +); + +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..852e62145a 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'; @@ -21,9 +21,18 @@ import { Components, } from '.'; import { PickerComponentClass } from './interface'; +import { FormItemStatusContext } from '../../form/context'; +import { + getFeedbackIcon, + getMergedStatus, + getStatusClassNames, + InputStatus, +} from '../../_util/statusUtils'; export default function generatePicker(generateConfig: GenerateConfig) { - type DatePickerProps = PickerProps; + type DatePickerProps = PickerProps & { + status?: InputStatus; + }; function getPicker( picker?: PickerMode, @@ -59,6 +68,23 @@ export default function generatePicker(generateConfig: GenerateConfig< } }; + renderFeedback = (prefixCls: string) => ( + + {({ hasFeedback, status: contextStatus }) => { + const { status: customStatus } = this.props; + const status = getMergedStatus(contextStatus, customStatus); + return hasFeedback && getFeedbackIcon(prefixCls, status); + }} + + ); + + renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => ( + <> + {mergedPicker === 'time' ? : } + {this.renderFeedback(prefixCls)} + + ); + renderPicker = (contextLocale: PickerLocale) => { const locale = { ...contextLocale, ...this.props.locale }; const { getPrefixCls, direction, getPopupContainer } = this.context; @@ -68,7 +94,9 @@ export default function generatePicker(generateConfig: GenerateConfig< className, size: customizeSize, bordered = true, + placement, placeholder, + status: customStatus, ...restProps } = this.props; const { format, showTime } = this.props as any; @@ -99,36 +127,44 @@ export default function generatePicker(generateConfig: GenerateConfig< const mergedSize = customizeSize || size; return ( - - ref={this.pickerRef} - placeholder={getPlaceholder(mergedPicker, locale, placeholder)} - suffixIcon={ - mergedPicker === 'time' ? : - } - clearIcon={} - prevIcon={} - nextIcon={} - superPrevIcon={} - superNextIcon={} - allowClear - transitionName={`${rootPrefixCls}-slide-up`} - {...additionalProps} - {...restProps} - {...additionalOverrideProps} - locale={locale!.lang} - className={classNames( - { - [`${prefixCls}-${mergedSize}`]: mergedSize, - [`${prefixCls}-borderless`]: !bordered, - }, - className, + + {({ hasFeedback, status: contextStatus }) => ( + + ref={this.pickerRef} + placeholder={getPlaceholder(mergedPicker, locale, placeholder)} + suffixIcon={this.renderSuffix(prefixCls, mergedPicker)} + dropdownAlign={transPlacement2DropdownAlign(direction, placement)} + clearIcon={} + prevIcon={} + nextIcon={} + superPrevIcon={} + superNextIcon={} + allowClear + transitionName={`${rootPrefixCls}-slide-up`} + {...additionalProps} + {...restProps} + {...additionalOverrideProps} + locale={locale!.lang} + className={classNames( + { + [`${prefixCls}-${mergedSize}`]: mergedSize, + [`${prefixCls}-borderless`]: !bordered, + }, + getStatusClassNames( + prefixCls, + getMergedStatus(contextStatus, customStatus), + hasFeedback, + ), + className, + )} + prefixCls={prefixCls} + getPopupContainer={customizeGetPopupContainer || getPopupContainer} + generateConfig={generateConfig} + components={Components} + direction={direction} + /> )} - prefixCls={prefixCls} - getPopupContainer={customizeGetPopupContainer || getPopupContainer} - generateConfig={generateConfig} - components={Components} - direction={direction} - /> + ); }} diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 26e14c4bc8..643a848f61 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; }; @@ -96,6 +102,7 @@ export type AdditionalPickerLocaleLangProps = { monthPlaceholder?: string; weekPlaceholder?: string; rangeYearPlaceholder?: [string, string]; + rangeQuarterPlaceholder?: [string, string]; rangeMonthPlaceholder?: [string, string]; rangeWeekPlaceholder?: [string, string]; rangePlaceholder?: [string, string]; diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index aaaac1ea19..48e299d6b9 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -69,9 +69,11 @@ 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` | - | | +| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | | style | To customize the style of the input box | CSSProperties | {} | | | suffixIcon | The custom suffix icon | ReactNode | - | | | superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 43c9f44432..3e718c202c 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -70,9 +70,11 @@ 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` | - | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | | style | 自定义输入框样式 | CSSProperties | {} | | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 | diff --git a/components/date-picker/locale/en_GB.tsx b/components/date-picker/locale/en_GB.tsx index 15cb6161b2..5e278f58c0 100644 --- a/components/date-picker/locale/en_GB.tsx +++ b/components/date-picker/locale/en_GB.tsx @@ -12,6 +12,7 @@ const locale: PickerLocale = { weekPlaceholder: 'Select week', rangePlaceholder: ['Start date', 'End date'], rangeYearPlaceholder: ['Start year', 'End year'], + rangeQuarterPlaceholder: ['Start quarter', 'End quarter'], rangeMonthPlaceholder: ['Start month', 'End month'], rangeWeekPlaceholder: ['Start week', 'End week'], ...CalendarLocale, diff --git a/components/date-picker/locale/en_US.tsx b/components/date-picker/locale/en_US.tsx index 47b57b9eeb..358216edd7 100644 --- a/components/date-picker/locale/en_US.tsx +++ b/components/date-picker/locale/en_US.tsx @@ -12,6 +12,7 @@ const locale: PickerLocale = { weekPlaceholder: 'Select week', rangePlaceholder: ['Start date', 'End date'], rangeYearPlaceholder: ['Start year', 'End year'], + rangeQuarterPlaceholder: ['Start quarter', 'End quarter'], rangeMonthPlaceholder: ['Start month', 'End month'], rangeWeekPlaceholder: ['Start week', 'End week'], ...CalendarLocale, diff --git a/components/date-picker/locale/zh_CN.tsx b/components/date-picker/locale/zh_CN.tsx index bb3181123d..41df329de6 100644 --- a/components/date-picker/locale/zh_CN.tsx +++ b/components/date-picker/locale/zh_CN.tsx @@ -13,6 +13,7 @@ const locale: PickerLocale = { rangePlaceholder: ['开始日期', '结束日期'], rangeYearPlaceholder: ['开始年份', '结束年份'], rangeMonthPlaceholder: ['开始月份', '结束月份'], + rangeQuarterPlaceholder: ['开始季度', '结束季度'], rangeWeekPlaceholder: ['开始周', '结束周'], ...CalendarLocale, }, diff --git a/components/date-picker/locale/zh_TW.tsx b/components/date-picker/locale/zh_TW.tsx index 663e943802..f0bcf20c1e 100644 --- a/components/date-picker/locale/zh_TW.tsx +++ b/components/date-picker/locale/zh_TW.tsx @@ -13,6 +13,7 @@ const locale: PickerLocale = { rangePlaceholder: ['開始日期', '結束日期'], rangeYearPlaceholder: ['開始年份', '結束年份'], rangeMonthPlaceholder: ['開始月份', '結束月份'], + rangeQuarterPlaceholder: ['開始季度', '結束季度'], rangeWeekPlaceholder: ['開始周', '結束周'], ...CalendarLocale, }, diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 4fc64c1976..3b6d3a08e4 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -1,6 +1,7 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; +@import './status'; @picker-prefix-cls: ~'@{ant-prefix}-picker'; @@ -13,7 +14,7 @@ } .@{picker-prefix-cls} { - @arrow-size: 10px; + @arrow-size: @popover-arrow-width; .reset-component(); .picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base); @@ -106,6 +107,8 @@ } &-suffix { + display: flex; + flex: none; align-self: center; margin-left: (@padding-xs / 2); color: @disabled-color; @@ -114,6 +117,10 @@ > * { vertical-align: top; + + &:not(:last-child) { + margin-right: 8px; + } } } @@ -221,17 +228,17 @@ &-placement-bottomLeft { .@{picker-prefix-cls}-range-arrow { - top: (@arrow-size / 2) - (@arrow-size / 3); + top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px; display: block; - transform: rotate(-45deg); + transform: rotate(-135deg) translateY(1px); } } &-placement-topLeft { .@{picker-prefix-cls}-range-arrow { - bottom: (@arrow-size / 2) - (@arrow-size / 3); + bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px; display: block; - transform: rotate(135deg); + transform: rotate(45deg); } } @@ -311,19 +318,14 @@ width: @arrow-size; height: @arrow-size; margin-left: @input-padding-horizontal-base * 1.5; - box-shadow: 2px -2px 6px fade(@black, 6%); + background: linear-gradient( + 135deg, + transparent 40%, + @calendar-bg 40% + ); // Use linear-gradient to prevent arrow from covering text + box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover transition: left @animation-duration-slow ease-out; - - &::after { - position: absolute; - top: @border-width-base; - right: @border-width-base; - width: @arrow-size; - height: @arrow-size; - border: (@arrow-size / 2) solid @border-color-split; - border-color: @calendar-bg @calendar-bg transparent transparent; - content: ''; - } + .roundedArrow(@arrow-size, 5px, @calendar-bg); } &-panel-container { diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index cc4424295a..18447e360f 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -3,3 +3,5 @@ import './index.less'; // style dependencies import '../../tag/style'; import '../../button/style'; + +// deps-lint-skip: form diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less new file mode 100644 index 0000000000..be3adba330 --- /dev/null +++ b/components/date-picker/style/status.less @@ -0,0 +1,52 @@ +@import '../../input/style/mixin'; + +@picker-prefix-cls: ~'@{ant-prefix}-picker'; + +.picker-status-color( + @text-color: @input-color; + @border-color: @input-border-color; + @background-color: @input-bg; + @hoverBorderColor: @primary-color-hover; + @outlineColor: @primary-color-outline; +) { + &.@{picker-prefix-cls} { + &, + &:not([disabled]):hover { + background-color: @background-color; + border-color: @border-color; + } + + &-focused, + &:focus { + .active(@text-color, @hoverBorderColor, @outlineColor); + } + } + + .@{picker-prefix-cls}-feedback-icon { + color: @text-color; + } +} + +.@{picker-prefix-cls} { + &-status-error { + .picker-status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline); + } + + &-status-warning { + .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); + } + + &-status-validating { + .@{picker-prefix-cls}-feedback-icon { + display: inline-block; + color: @primary-color; + } + } + + &-status-success { + .@{picker-prefix-cls}-feedback-icon { + color: @success-color; + animation-name: diffZoomIn1 !important; + } + } +} diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts index 0643a0842a..c2dbc6c501 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( @@ -40,6 +42,9 @@ export function getRangePlaceholder( if (picker === 'year' && locale.lang.yearPlaceholder) { return locale.lang.rangeYearPlaceholder; } + if (picker === 'quarter' && locale.lang.quarterPlaceholder) { + return locale.lang.rangeQuarterPlaceholder; + } if (picker === 'month' && locale.lang.monthPlaceholder) { return locale.lang.rangeMonthPlaceholder; } @@ -51,3 +56,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 ff41a07fd6..0496324905 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 + + , +
+
+
+ +
@@ -20538,7 +20780,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc class="ant-form-item-control-input-content" > + + + + +
- - - - -
@@ -20625,7 +20867,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc class="ant-form-item-control-input-content" > - + + + + + + +
- - - - -
- +
+
+
+
+ +
+
+
+`; diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap index 8440ca56a2..2e2c58f457 100644 --- a/components/mentions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap @@ -206,3 +206,39 @@ Array [
, ] `; + +exports[`renders ./components/mentions/demo/status.md correctly 1`] = ` +
+
+
+ +
+
+
+
+ +
+
+
+`; diff --git a/components/mentions/demo/status.md b/components/mentions/demo/status.md new file mode 100644 index 0000000000..5d64166744 --- /dev/null +++ b/components/mentions/demo/status.md @@ -0,0 +1,51 @@ +--- +order: 8 +title: + zh-CN: 自定义状态 + en-US: Status +--- + +## zh-CN + +使用 `status` 为 Mentions 添加状态。可选 `error` 或者 `warning`。 + +## en-US + +Add status to Mentions with `status`, which could be `error` or `warning`。 + +```jsx +import { Mentions, Space } from 'antd'; + +const { Option } = Mentions; + +function onChange(value) { + console.log('Change:', value); +} + +function onSelect(option) { + console.log('select', option); +} + +const MentionsStatuses = () => { + const options = ( + <> + + + + + ); + + return ( + + + {options} + + + {options} + + + ); +}; + +ReactDOM.render(, mountNode); +``` diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md index bc3f4295c4..ccdfc7ca61 100644 --- a/components/mentions/index.en-US.md +++ b/components/mentions/index.en-US.md @@ -21,32 +21,33 @@ When you need to mention someone or something. ### Mention -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| autoFocus | Auto get focus when component mounted | boolean | false | -| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | -| defaultValue | Default value | string | - | -| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - | -| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - | -| notFoundContent | Set mentions content when not match | ReactNode | `Not Found` | -| placement | Set popup placement | `top` \| `bottom` | `bottom` | -| prefix | Set trigger prefix keyword | string \| string\[] | `@` | -| split | Set split string before and after selected mention | string | ` ` | -| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | -| value | Set value of mentions | string | - | -| onBlur | Trigger when mentions lose focus | () => void | - | -| onChange | Trigger when value changed | (text: string) => void | - | -| onFocus | Trigger when mentions get focus | () => void | - | -| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - | -| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | -| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| autoFocus | Auto get focus when component mounted | boolean | false | | +| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | | +| defaultValue | Default value | string | - | | +| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - | | +| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - | | +| notFoundContent | Set mentions content when not match | ReactNode | `Not Found` | | +| placement | Set popup placement | `top` \| `bottom` | `bottom` | | +| prefix | Set trigger prefix keyword | string \| string\[] | `@` | | +| split | Set split string before and after selected mention | string | ` ` | | +| status | Set validation status | 'error' \| 'warning' \| 'success' \| 'validating' | - | 4.19.0 | +| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | | +| value | Set value of mentions | string | - | | +| onBlur | Trigger when mentions lose focus | () => void | - | | +| onChange | Trigger when value changed | (text: string) => void | - | | +| onFocus | Trigger when mentions get focus | () => void | - | | +| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - | | +| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | | +| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | | ### Mention methods -| Name | Description | -| --- | --- | -| blur() | Remove focus | -| focus() | Get focus | +| Name | Description | +| ------- | ------------ | +| blur() | Remove focus | +| focus() | Get focus | ### Option diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index aa2e3d97b3..cff2ba6317 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -5,6 +5,13 @@ import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions'; import { composeRef } from 'rc-util/lib/ref'; import Spin from '../spin'; import { ConfigContext } from '../config-provider'; +import { FormItemStatusContext } from '../form/context'; +import { + getFeedbackIcon, + getMergedStatus, + getStatusClassNames, + InputStatus, +} from '../_util/statusUtils'; export const { Option } = RcMentions; @@ -22,6 +29,7 @@ export interface OptionProps { export interface MentionProps extends RcMentionsProps { loading?: boolean; + status?: InputStatus; } export interface MentionState { @@ -53,6 +61,7 @@ const InternalMentions: React.ForwardRefRenderFunction = filterOption, children, notFoundContent, + status: customStatus, ...restProps }, ref, @@ -61,6 +70,8 @@ const InternalMentions: React.ForwardRefRenderFunction = const innerRef = React.useRef(); const mergedRef = composeRef(ref, innerRef); const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext); + const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext); + const mergedStatus = getMergedStatus(contextStatus, customStatus); const onFocus: React.FocusEventHandler = (...args) => { if (restProps.onFocus) { @@ -112,10 +123,11 @@ const InternalMentions: React.ForwardRefRenderFunction = [`${prefixCls}-focused`]: focused, [`${prefixCls}-rtl`]: direction === 'rtl', }, - className, + getStatusClassNames(prefixCls, mergedStatus), + !hasFeedback && className, ); - return ( + const mentions = ( = {getOptions()} ); + + if (hasFeedback) { + return ( +
+ {mentions} + {getFeedbackIcon(prefixCls, mergedStatus)} +
+ ); + } + + return mentions; }; const Mentions = React.forwardRef(InternalMentions) as CompoundedComponent; diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index 7876603712..d303d5b9e3 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -22,36 +22,37 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg ### Mentions -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| autoFocus | 自动获得焦点 | boolean | false | -| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | -| defaultValue | 默认值 | string | - | -| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - | -| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - | -| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` | -| placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` | -| prefix | 设置触发关键字 | string \| string\[] | `@` | -| split | 设置选中项前后分隔符 | string | ` ` | -| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - | -| value | 设置值 | string | - | -| onBlur | 失去焦点时触发 | () => void | - | -| onChange | 值改变时触发 | (text: string) => void | - | -| onFocus | 获得焦点时触发 | () => void | - | -| onResize | resize 回调 | function({ width, height }) | - | -| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - | -| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| autoFocus | 自动获得焦点 | boolean | false | | +| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | | +| defaultValue | 默认值 | string | - | | +| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - | | +| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - | | +| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` | | +| placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` | | +| prefix | 设置触发关键字 | string \| string\[] | `@` | | +| split | 设置选中项前后分隔符 | string | ` ` | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | +| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - | | +| value | 设置值 | string | - | | +| onBlur | 失去焦点时触发 | () => void | - | | +| onChange | 值改变时触发 | (text: string) => void | - | | +| onFocus | 获得焦点时触发 | () => void | - | | +| onResize | resize 回调 | function({ width, height }) | - | | +| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - | | +| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - | | ### Mentions 方法 -| 名称 | 描述 | -| --- | --- | -| blur() | 移除焦点 | +| 名称 | 描述 | +| ------- | -------- | +| blur() | 移除焦点 | | focus() | 获取焦点 | ### Option -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| children | 选项内容 | ReactNode | - | -| value | 选择时填充的值 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | -------------- | --------- | ------ | +| children | 选项内容 | ReactNode | - | +| value | 选择时填充的值 | string | - | diff --git a/components/mentions/style/index.less b/components/mentions/style/index.less index c18683fca6..489a7ad40f 100644 --- a/components/mentions/style/index.less +++ b/components/mentions/style/index.less @@ -1,6 +1,7 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; +@import './status'; @mention-prefix-cls: ~'@{ant-prefix}-mentions'; diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx index 5fa72cf4f6..b39860748d 100644 --- a/components/mentions/style/index.tsx +++ b/components/mentions/style/index.tsx @@ -3,3 +3,5 @@ import './index.less'; // style dependencies import '../../empty/style'; import '../../spin/style'; + +// deps-lint-skip: form diff --git a/components/mentions/style/status.less b/components/mentions/style/status.less new file mode 100644 index 0000000000..83cbb3ab8e --- /dev/null +++ b/components/mentions/style/status.less @@ -0,0 +1,43 @@ +@import '../../input/style/mixin'; + +@mention-prefix-cls: ~'@{ant-prefix}-mentions'; +@input-prefix-cls: ~'@{ant-prefix}-input'; + +.@{mention-prefix-cls} { + &-status-error { + .status-color(@mention-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline); + .status-color-common(@input-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline); + } + + &-status-warning { + .status-color(@mention-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); + .status-color-common(@input-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); + } + + &-affix-wrapper { + position: relative; + + .@{mention-prefix-cls}-feedback-icon { + position: absolute; + top: 0; + right: @input-padding-horizontal-base; + bottom: 0; + z-index: 1; + display: inline-flex; + align-items: center; + margin: auto; + } + + &-status-error { + .@{mention-prefix-cls}-feedback-icon { + color: @error-color; + } + } + + &-has-warning { + .@{mention-prefix-cls}-feedback-icon { + color: @warning-color; + } + } + } +} diff --git a/components/menu/SubMenu.tsx b/components/menu/SubMenu.tsx index 6268b5cd79..97d49ed7fb 100644 --- a/components/menu/SubMenu.tsx +++ b/components/menu/SubMenu.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { SubMenu as RcSubMenu, useFullPath } from 'rc-menu'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; -import MenuContext from './MenuContext'; +import MenuContext, { MenuTheme } from './MenuContext'; import { isValidElement, cloneElement } from '../_util/reactNode'; interface TitleEventEntity { @@ -23,10 +23,11 @@ export interface SubMenuProps { popupOffset?: [number, number]; popupClassName?: string; children?: React.ReactNode; + theme?: MenuTheme; } function SubMenu(props: SubMenuProps) { - const { popupClassName, icon, title } = props; + const { popupClassName, icon, title, theme } = props; const context = React.useContext(MenuContext); const { prefixCls, inlineCollapsed, antdMenuTheme } = context; @@ -71,7 +72,11 @@ function SubMenu(props: SubMenuProps) { ); diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap index c5f320fc10..96a13c9541 100644 --- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3801,6 +3801,369 @@ Array [ ] `; +exports[`renders ./components/menu/demo/submenu-theme.md extend context correctly 1`] = ` +Array [ + , +
, +
, + , +