feat: migrate less to token for DatePicker (ant-design#42607)

* feat: migrate less to token for time-picker * feat: add component-token demo * feat:update token with API Naming rules * feat: migrate less to token for Time-pikker * chore: code clean * chore: code clean * chore: udpate * feat: picker token * chore: add comment --------- Co-authored-by: MadCcc <1075746765@qq.com>
ammar-knowledge · Aug 22, 2023 · d57c86d · d57c86d
1 parent 820a921
commit d57c86d
Show file tree

Hide file tree

Showing 10 changed files with 285 additions and 114 deletions.
diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts
@@ -1,6 +1,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { PickerPanelToken } from '../../date-picker/style';
-import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
+import type { PanelComponentToken, PickerPanelToken } from '../../date-picker/style';
+import {
+  genPanelStyle,
+  initPanelComponentToken,
+  initPickerPanelToken,
+} from '../../date-picker/style';
 import { resetComponent } from '../../style';
 import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -38,7 +42,7 @@ export interface ComponentToken {
   itemActiveBg: string;
 }
 
-interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken {
+interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken {
   calendarCls: string;
   dateValueHeight: number;
   weekHeight: number;
@@ -213,14 +217,19 @@ export default genComponentStyleHook(
   'Calendar',
   (token) => {
     const calendarCls = `${token.componentCls}-calendar`;
-    const calendarToken = mergeToken<CalendarToken>(token, initPickerPanelToken(token), {
-      calendarCls,
-      pickerCellInnerCls: `${token.componentCls}-cell-inner`,
-      dateValueHeight: token.controlHeightSM,
-      weekHeight: token.controlHeightSM * 0.75,
-      dateContentHeight:
-        (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2,
-    });
+    const calendarToken = mergeToken<CalendarToken>(
+      token,
+      initPickerPanelToken(token),
+      initPanelComponentToken(token),
+      {
+        calendarCls,
+        pickerCellInnerCls: `${token.componentCls}-cell-inner`,
+        dateValueHeight: token.controlHeightSM,
+        weekHeight: token.controlHeightSM * 0.75,
+        dateContentHeight:
+          (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2,
+      },
+    );
 
     return [genCalendarStyles(calendarToken)];
   },

diff --git a/components/date-picker/__tests__/demo-extend.test.ts b/components/date-picker/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('date-picker', { skip: ['locale.tsx'] });
+extendTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'] });
diff --git a/components/date-picker/__tests__/demo.test.tsx b/components/date-picker/__tests__/demo.test.tsx
@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 import * as React from 'react';
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
-demoTest('date-picker', { skip: ['locale.tsx'], testRootProps: false });
+demoTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'], testRootProps: false });
 
 rootPropsTest('date-picker', (DatePicker, props) => <DatePicker {...props} value={dayjs()} />, {
   findRootElements: () => document.querySelectorAll('.ant-picker, .ant-picker-dropdown'),

diff --git a/components/date-picker/demo/component-token.md b/components/date-picker/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/components/date-picker/demo/component-token.tsx b/components/date-picker/demo/component-token.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import type { DatePickerProps } from 'antd';
+import { ConfigProvider, DatePicker, 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,
+        },
+      },
+    }}
+  >
+    <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>
+);
+
+export default App;
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
@@ -35,6 +35,7 @@ By clicking the input box, you can select a date from a popup calendar.
 <code src="./demo/start-end.tsx" debug>Customized Range Picker</code>
 <code src="./demo/suffix.tsx" debug>Suffix</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
@@ -56,17 +57,17 @@ The default locale is en-US, if you need to use other languages, recommend to us
 If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json).
 
 ```jsx
-import 'dayjs/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
+import 'dayjs/locale/zh-cn';
 
 <DatePicker locale={locale} />;
 ```
 
 ```jsx
 // The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
+import locale from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import locale from 'antd/locale/zh_CN';
 
 <ConfigProvider locale={locale}>
   <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />

diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
@@ -36,6 +36,7 @@ demo:
 <code src="./demo/start-end.tsx" debug>自定义日期范围选择</code>
 <code src="./demo/suffix.tsx" debug>后缀图标</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
@@ -57,17 +58,17 @@ demo:
 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
 
 ```jsx
-import 'dayjs/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
+import 'dayjs/locale/zh-cn';
 
 <DatePicker locale={locale} />;
 ```
 
 ```jsx
 // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
+import locale from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import locale from 'antd/locale/zh_CN';
 
 <ConfigProvider locale={locale}>
   <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
@@ -245,7 +246,6 @@ export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```js
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-
 import updateLocale from 'dayjs/plugin/updateLocale';
 
 dayjs.extend(updateLocale);