feat: TimePicker support rootClassName

ant-design · Aug 6, 2023 · ecf1623 · ecf1623
1 parent 1f03d37
commit ecf1623
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 0 deletions.
diff --git a/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
@@ -1597,3 +1597,73 @@ exports[`TimePicker should support bordered 1`] = `
   </div>
 </div>
 `;
+
+exports[`TimePicker should support rootClassName 1`] = `
+<div
+  class="ant-picker ant-picker-borderless custom-class-name"
+>
+  <div
+    class="ant-picker-input"
+  >
+    <input
+      autocomplete="off"
+      placeholder="Select time"
+      readonly=""
+      size="10"
+      title="00:00:00"
+      value="00:00:00"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="clock-circle"
+        class="anticon anticon-clock-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="clock-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+          <path
+            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+          />
+        </svg>
+      </span>
+    </span>
+    <span
+      class="ant-picker-clear"
+      role="button"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
diff --git a/components/time-picker/__tests__/index.test.tsx b/components/time-picker/__tests__/index.test.tsx
@@ -98,4 +98,15 @@ describe('TimePicker', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
+  it('should support rootClassName', () => {
+    const { container } = render(
+      <TimePicker
+        rootClassName="custom-class-name"
+        defaultValue={dayjs('2000-01-01 00:00:00')}
+        bordered={false}
+      />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(container.querySelector('.custom-class-name')).toBeTruthy();
+  });
 });
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
@@ -47,6 +47,7 @@ dayjs.extend(customParseFormat)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| rootClassName | ClassName on the root element | string | - | 5.9.0 |
 | allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |

diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
@@ -27,6 +27,7 @@ export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'>
   addon?: () => React.ReactNode;
   status?: InputStatus;
   popupClassName?: string;
+  rootClassName?: string;
 }
 
 const TimePicker = React.forwardRef<any, TimePickerProps>(

diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
@@ -47,6 +47,7 @@ dayjs.extend(customParseFormat)
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| rootClassName | 添加在组件最外层的 className | string | - | 5.9.0 |
 | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | bordered | 是否有边框 | boolean | true |  |