demo: update demo (#44864)

* demo: update demo

* fix: fix snap

* update demo

components/date-picker/demo/cell-render.tsx

@@ -1,43 +1,33 @@
 import React from 'react';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space, theme } from 'antd';
+import type { Dayjs } from 'dayjs';
+import type { CellRenderInfo } from 'rc-picker/es/interface';
 
-const { RangePicker } = DatePicker;
-
-const App: React.FC = () => (
-  <Space direction="vertical" size={12}>
-    <DatePicker
-      cellRender={(current, info) => {
-        if (info.type !== 'date') return info.originNode;
-        if (typeof current === 'number') {
-          return <div className="ant-picker-cell-inner">{current}</div>;
-        }
-        return (
-          <div
-            className="ant-picker-cell-inner"
-            style={current.date() === 1 ? { border: '1px solid #1677ff', borderRadius: '50%' } : {}}
-          >
-            {current.date()}
-          </div>
-        );
-      }}
-    />
-    <RangePicker
-      cellRender={(current, info) => {
-        if (info.type !== 'date') return info.originNode;
-        if (typeof current === 'number') {
-          return <div className="ant-picker-cell-inner">{current}</div>;
-        }
-        return (
-          <div
-            className="ant-picker-cell-inner"
-            style={current.date() === 1 ? { border: '1px solid #1677ff', borderRadius: '50%' } : {}}
-          >
-            {current.date()}
-          </div>
-        );
-      }}
-    />
-  </Space>
-);
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  const style: React.CSSProperties = {
+    border: `1px solid ${token.colorPrimary}`,
+    borderRadius: '50%',
+  };
+  const cellRender = React.useCallback((current: number | Dayjs, info: CellRenderInfo<Dayjs>) => {
+    if (info.type !== 'date') {
+      return info.originNode;
+    }
+    if (typeof current === 'number') {
+      return <div className="ant-picker-cell-inner">{current}</div>;
+    }
+    return (
+      <div className="ant-picker-cell-inner" style={current.date() === 1 ? style : {}}>
+        {current.date()}
+      </div>
+    );
+  }, []);
+  return (
+    <Space size={12} direction="vertical">
+      <DatePicker cellRender={cellRender} />
+      <DatePicker.RangePicker cellRender={cellRender} />
+    </Space>
+  );
+};
 
 export default App;

components/date-picker/index.ts

@@ -1,5 +1,6 @@
 import type { Dayjs } from 'dayjs';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
+
 import genPurePanel from '../_util/PurePanel';
 import type {
   RangePickerProps as BaseRangePickerProps,

components/time-picker/index.en-US.md

@@ -56,7 +56,6 @@ dayjs.extend(customParseFormat)
 | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
 | className | The className of picker | string | - |  |
 | clearIcon | The custom clear icon | ReactNode | - |  |
-| clearText | The clear tooltip of icon | string | clear |  |
 | defaultValue | To set default time | [dayjs](http://day.js.org/) | - |  |
 | disabled | Determine whether the TimePicker is disabled | boolean | false |  |
 | disabledTime | To specify the time that cannot be selected | [DisabledTime](#disabledtime) | - | 4.19.0 |

components/time-picker/index.zh-CN.md

@@ -56,7 +56,6 @@ dayjs.extend(customParseFormat)
 | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
 | className | 选择器类名 | string | - |  |
 | clearIcon | 自定义的清除图标 | ReactNode | - |  |
-| clearText | 清除按钮的提示文案 | string | clear |  |
 | defaultValue | 默认时间 | [dayjs](http://day.js.org/) | - |  |
 | disabled | 禁用全部操作 | boolean | false |  |
 | disabledTime | 不可选择的时间 | [DisabledTime](#disabledtime) | - | 4.19.0 |