fix: DatePicker itemHeight calculation (#47874)

* chore: init * chore: clean up * chore: clean up
ant-design · Mar 15, 2024 · 7884eba · 7884eba
1 parent 1491b0c
commit 7884eba
Show file tree

Hide file tree

Showing 5 changed files with 246 additions and 136 deletions.
diff --git a/components/date-picker/demo/component-token.tsx b/components/date-picker/demo/component-token.tsx
@@ -1,51 +1,66 @@
 import React from 'react';
-import type { DatePickerProps } from 'antd';
-import { ConfigProvider, DatePicker, Space, TimePicker } from 'antd';
+import { ConfigProvider, DatePicker, Divider, Flex, Space, TimePicker } from 'antd';
 import dayjs from 'dayjs';
 
 /** Test usage. Do not use in your production. */
 
 const { RangePicker } = DatePicker;
 
-const onChange: DatePickerProps['onChange'] = (date, dateString) => {
-  console.log(date, dateString);
-};
-
 const App: React.FC = () => (
-  <ConfigProvider
-    theme={{
-      components: {
-        DatePicker: {
-          presetsWidth: 160,
-          zIndexPopup: 888,
-          cellHoverWithRangeBg: '#f0f0f0',
-          cellActiveWithRangeBg: '#e6bbff',
-          cellRangeBorderColor: 'green',
-          timeColumnWidth: 80,
-          timeColumnHeight: 250,
-          timeCellHeight: 30,
-          cellWidth: 64,
-          cellHeight: 40,
-          textHeight: 45,
-          withoutTimeCellHeight: 70,
+  <>
+    <ConfigProvider
+      theme={{
+        components: {
+          DatePicker: {
+            presetsWidth: 160,
+            zIndexPopup: 888,
+            cellHoverWithRangeBg: '#f0f0f0',
+            cellActiveWithRangeBg: '#e6bbff',
+            cellRangeBorderColor: 'green',
+            timeColumnWidth: 80,
+            timeColumnHeight: 250,
+            timeCellHeight: 30,
+            cellWidth: 64,
+            cellHeight: 40,
+            textHeight: 45,
+            withoutTimeCellHeight: 70,
+          },
+        },
+      }}
+    >
+      <Space direction="vertical">
+        <DatePicker
+          presets={[
+            { label: 'Yesterday', value: dayjs().add(-1, 'd') },
+            { label: 'Last Week', value: dayjs().add(-7, 'd') },
+            { label: 'Last Month', value: dayjs().add(-1, 'month') },
+          ]}
+        />
+        <RangePicker />
+        <TimePicker />
+        <DatePicker picker="month" />
+      </Space>
+    </ConfigProvider>
+
+    <Divider />
+
+    <ConfigProvider
+      theme={{
+        components: {
+          DatePicker: {
+            controlHeightSM: 32,
+            controlHeight: 40,
+          },
         },
-      },
-    }}
-  >
-    <Space direction="vertical">
-      <DatePicker
-        presets={[
-          { label: 'Yesterday', value: dayjs().add(-1, 'd') },
-          { label: 'Last Week', value: dayjs().add(-7, 'd') },
-          { label: 'Last Month', value: dayjs().add(-1, 'month') },
-        ]}
-        onChange={onChange}
-      />
-      <RangePicker />
-      <TimePicker onChange={onChange} />
-      <DatePicker onChange={onChange} picker="month" />
-    </Space>
-  </ConfigProvider>
+      }}
+    >
+      <Flex vertical gap={8}>
+        <DatePicker multiple size="small" />
+        <DatePicker multiple />
+        <DatePicker multiple size="large" />
+      </Flex>
+    </ConfigProvider>
+  </>
 );
 
 export default App;
diff --git a/components/date-picker/style/multiple.ts b/components/date-picker/style/multiple.ts
@@ -1,35 +1,30 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 
-import { FIXED_ITEM_MARGIN, genSelectionStyle } from '../../select/style/multiple';
+import { genOverflowStyle, getMultipleSelectorUnit } 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, controlHeight, calc } = token;
+  const { componentCls, controlHeight } = 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 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,
-  );
+  const multipleSelectorUnit = getMultipleSelectorUnit(token);
 
   return [
-    genSelectionStyle(token, suffix),
+    // genSelectionStyle(token, suffix),
     {
       [`${componentCls}-multiple${suffixCls}`]: {
-        paddingTop,
-        paddingBottom,
-        paddingInlineStart: paddingBase,
+        paddingBlock: multipleSelectorUnit.containerPadding,
+        paddingInlineStart: multipleSelectorUnit.basePadding,
         minHeight: controlHeight,
+
+        // ======================== Selections ========================
+        [`${componentCls}-selection-item`]: {
+          height: multipleSelectorUnit.itemHeight,
+          lineHeight: unit(multipleSelectorUnit.itemLineHeight),
+        },
       },
     },
   ];
@@ -41,7 +36,7 @@ const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => {
   const smallToken = mergeToken<PickerToken>(token, {
     fontHeight: token.fontSize,
     selectHeight: token.controlHeightSM,
-    multipleSelectItemHeight: token.controlHeightXS,
+    multipleSelectItemHeight: token.multipleItemHeightSM,
     borderRadius: token.borderRadiusSM,
     borderRadiusSM: token.borderRadiusXS,
     controlHeight: token.controlHeightSM,
@@ -66,7 +61,6 @@ const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => {
     genSize(largeToken, 'large'),
 
     // ====================== Selection ======================
-    genSelectionStyle(token),
     {
       [`${componentCls}${componentCls}-multiple`]: {
         width: '100%',
@@ -81,6 +75,9 @@ const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => {
           },
         },
 
+        // ===================== Overflow ====================
+        ...genOverflowStyle(token),
+
         // ====================== Input ======================
         // Input is `readonly`, which is used for a11y only
         [`${componentCls}-multiple-input`]: {

diff --git a/components/date-picker/style/token.ts b/components/date-picker/style/token.ts
@@ -139,7 +139,9 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
 };
 
 export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => {
-  const { colorBgContainerDisabled, controlHeightSM, controlHeightLG } = token;
+  const { colorBgContainerDisabled, controlHeight, controlHeightSM, controlHeightLG, paddingXXS } =
+    token;
+
   return {
     cellHoverBg: token.controlItemBgHover,
     cellActiveWithRangeBg: token.controlItemBgActive,
@@ -155,8 +157,9 @@ export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken
     withoutTimeCellHeight: controlHeightLG * 1.65,
     multipleItemBg: token.colorFillSecondary,
     multipleItemBorderColor: 'transparent',
-    multipleItemHeight: controlHeightSM,
-    multipleItemHeightLG: token.controlHeight,
+    multipleItemHeight: controlHeight - paddingXXS * 2,
+    multipleItemHeightSM: controlHeightSM - paddingXXS * 2,
+    multipleItemHeightLG: controlHeightLG - paddingXXS * 2,
     multipleSelectorBgDisabled: colorBgContainerDisabled,
     multipleItemColorDisabled: token.colorTextDisabled,
     multipleItemBorderColorDisabled: 'transparent',