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 97357686ec..49a90ec5ab 100644 --- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -42616,6 +42616,3033 @@ exports[`renders components/date-picker/demo/multiple.tsx extend context correct exports[`renders components/date-picker/demo/multiple.tsx extend context correctly 2`] = `[]`; +exports[`renders components/date-picker/demo/multiple-debug.tsx extend context correctly 1`] = ` +
+
+
+
+
+ + + 2000-01-01 + + + + + + + +
+
+ + + 2000-01-02 + + + + + + + +
+
+ + + 2000-01-03 + + + + + + + +
+
+ + + 2000-01-04 + + + + + + + +
+
+ + + 2000-01-05 + + + + + + + +
+
+ + + 2000-01-06 + + + + + + + +
+
+ + + 2000-01-07 + + + + + + + +
+
+ + + 2000-01-08 + + + + + + + +
+
+ + + 2000-01-09 + + + + + + + +
+
+ + + 2000-01-10 + + + + + + + +
+
+
+ + + + + + + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 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 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 2000-01-01 + + + + + + + +
+
+ + + 2000-01-02 + + + + + + + +
+
+ + + 2000-01-03 + + + + + + + +
+
+ + + 2000-01-04 + + + + + + + +
+
+ + + 2000-01-05 + + + + + + + +
+
+ + + 2000-01-06 + + + + + + + +
+
+ + + 2000-01-07 + + + + + + + +
+
+ + + 2000-01-08 + + + + + + + +
+
+ + + 2000-01-09 + + + + + + + +
+
+ + + 2000-01-10 + + + + + + + +
+
+
+ + + + + + + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 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 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 2000-01-01 + + + + + + + +
+
+ + + 2000-01-02 + + + + + + + +
+
+ + + 2000-01-03 + + + + + + + +
+
+ + + 2000-01-04 + + + + + + + +
+
+ + + 2000-01-05 + + + + + + + +
+
+ + + 2000-01-06 + + + + + + + +
+
+ + + 2000-01-07 + + + + + + + +
+
+ + + 2000-01-08 + + + + + + + +
+
+ + + 2000-01-09 + + + + + + + +
+
+ + + 2000-01-10 + + + + + + + +
+
+
+ + + + + + + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 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 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+
+
+
+
+
+
+
+`; + +exports[`renders components/date-picker/demo/multiple-debug.tsx extend context correctly 2`] = `[]`; + exports[`renders components/date-picker/demo/needConfirm.tsx extend context correctly 1`] = `
`; +exports[`renders components/date-picker/demo/multiple-debug.tsx correctly 1`] = ` +
+
+
+
+
+ + + 2000-01-01 + + + + + + + +
+
+ + + 2000-01-02 + + + + + + + +
+
+ + + 2000-01-03 + + + + + + + +
+
+ + + 2000-01-04 + + + + + + + +
+
+ + + 2000-01-05 + + + + + + + +
+
+ + + 2000-01-06 + + + + + + + +
+
+ + + 2000-01-07 + + + + + + + +
+
+ + + 2000-01-08 + + + + + + + +
+
+ + + 2000-01-09 + + + + + + + +
+
+ + + 2000-01-10 + + + + + + + +
+
+
+ + + + + + + + + + + +
+
+
+
+
+ + + 2000-01-01 + + + + + + + +
+
+ + + 2000-01-02 + + + + + + + +
+
+ + + 2000-01-03 + + + + + + + +
+
+ + + 2000-01-04 + + + + + + + +
+
+ + + 2000-01-05 + + + + + + + +
+
+ + + 2000-01-06 + + + + + + + +
+
+ + + 2000-01-07 + + + + + + + +
+
+ + + 2000-01-08 + + + + + + + +
+
+ + + 2000-01-09 + + + + + + + +
+
+ + + 2000-01-10 + + + + + + + +
+
+
+ + + + + + + + + + + +
+
+
+
+
+ + + 2000-01-01 + + + + + + + +
+
+ + + 2000-01-02 + + + + + + + +
+
+ + + 2000-01-03 + + + + + + + +
+
+ + + 2000-01-04 + + + + + + + +
+
+ + + 2000-01-05 + + + + + + + +
+
+ + + 2000-01-06 + + + + + + + +
+
+ + + 2000-01-07 + + + + + + + +
+
+ + + 2000-01-08 + + + + + + + +
+
+ + + 2000-01-09 + + + + + + + +
+
+ + + 2000-01-10 + + + + + + + +
+
+
+ + + + + + + + + + + +
+
+`; + exports[`renders components/date-picker/demo/needConfirm.tsx correctly 1`] = `
dayjs('2000-01-01').add(index, 'day')); + +const App: React.FC = () => ( + + + + + +); + +export default App; diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 233284f3aa..ff822b4a2e 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -19,6 +19,7 @@ By clicking the input box, you can select a date from a popup calendar. Basic Range Picker Multiple +Multiple Debug Need Confirm Switchable picker Date Format diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index e5ad61c7a9..634bfbb960 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -20,6 +20,7 @@ demo: 基本 范围选择器 多选 +多选 Debug 选择确认 切换不同的选择器 日期格式 diff --git a/components/date-picker/style/multiple.ts b/components/date-picker/style/multiple.ts index 0ef740594c..51b809ca93 100644 --- a/components/date-picker/style/multiple.ts +++ b/components/date-picker/style/multiple.ts @@ -1,19 +1,26 @@ import type { CSSInterpolation } from '@ant-design/cssinjs'; -import { genSelectionStyle } from '../../select/style/multiple'; +import { FIXED_ITEM_MARGIN, genSelectionStyle } from '../../select/style/multiple'; import { mergeToken, type GenerateStyle } from '../../theme/internal'; import type { PickerToken } from './token'; const genSize = (token: PickerToken, suffix?: string): CSSInterpolation => { - const { componentCls, selectHeight, fontHeight, lineWidth, calc } = token; + const { componentCls, selectHeight, fontHeight, lineWidth, controlHeight, calc } = token; const suffixCls = suffix ? `${componentCls}-${suffix}` : ''; const height = token.calc(fontHeight).add(2).equal(); const restHeight = () => calc(selectHeight).sub(height).sub(calc(lineWidth).mul(2)); - const paddingTop = token.max(restHeight().div(2).equal(), 0); - const paddingBottom = token.max(restHeight().sub(paddingTop).equal(), 0); + const paddingBase = token.max(restHeight().div(2).equal(), 0); + const paddingTop = token.max(token.calc(paddingBase).sub(FIXED_ITEM_MARGIN).equal(), 0); + const paddingBottom = token.max( + restHeight() + .sub(paddingTop) + .sub(FIXED_ITEM_MARGIN * 2) + .equal(), + 0, + ); return [ genSelectionStyle(token, suffix), @@ -21,7 +28,8 @@ const genSize = (token: PickerToken, suffix?: string): CSSInterpolation => { [`${componentCls}-multiple${suffixCls}`]: { paddingTop, paddingBottom, - paddingInlineStart: paddingTop, + paddingInlineStart: paddingBase, + minHeight: controlHeight, }, }, ]; @@ -36,6 +44,7 @@ const genPickerMultipleStyle: GenerateStyle = (token) => { multipleSelectItemHeight: token.controlHeightXS, borderRadius: token.borderRadiusSM, borderRadiusSM: token.borderRadiusXS, + controlHeight: token.controlHeightSM, }); const largeToken = mergeToken(token, { @@ -47,6 +56,7 @@ const genPickerMultipleStyle: GenerateStyle = (token) => { multipleSelectItemHeight: token.multipleItemHeightLG, borderRadius: token.borderRadiusLG, borderRadiusSM: token.borderRadius, + controlHeight: token.controlHeightLG, }); return [ @@ -71,11 +81,6 @@ const genPickerMultipleStyle: GenerateStyle = (token) => { }, }, - // ==================== Selection ==================== - [`${componentCls}-selection-item`]: { - marginBlock: 0, - }, - // ====================== Input ====================== // Input is `readonly`, which is used for a11y only [`${componentCls}-multiple-input`]: { diff --git a/components/select/style/multiple.ts b/components/select/style/multiple.ts index f090b86408..bd4fbe0f0a 100644 --- a/components/select/style/multiple.ts +++ b/components/select/style/multiple.ts @@ -6,7 +6,7 @@ import { mergeToken, type AliasToken } from '../../theme/internal'; import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; import type { SelectToken } from './token'; -const FIXED_ITEM_MARGIN = 2; +export const FIXED_ITEM_MARGIN = 2; type SelectItemToken = Pick< SelectToken,