merge feature into master-to-merge-feature

components/__tests__/__snapshots__/index.test.js.snap

@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",

components/_util/getRenderPropValue.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export type RenderFunction = () => React.ReactNode;
+
+export const getRenderPropValue = (
+  propValue?: React.ReactNode | RenderFunction,
+): React.ReactNode => {
+  if (!propValue) {
+    return null;
+  }
+
+  const isRenderFunction = typeof propValue === 'function';
+  if (isRenderFunction) {
+    return (propValue as RenderFunction)();
+  }
+
+  return propValue;
+};

components/breadcrumb/BreadcrumbItem.tsx

@@ -10,6 +10,7 @@ export interface BreadcrumbItemProps {
   separator?: React.ReactNode;
   href?: string;
   overlay?: DropDownProps['overlay'];
+  dropdownProps?: DropDownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
 }
 
@@ -58,10 +59,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
    * Wrap a DropDown
    */
   renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
-    const { overlay } = this.props;
+    const { overlay, dropdownProps } = this.props;
     if (overlay) {
       return (
-        <DropDown overlay={overlay} placement="bottomCenter">
+        <DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />

components/breadcrumb/index.en-US.md

@@ -30,6 +30,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | href | Target of hyperlink | string | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
 | onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - |  |
+| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 
 ### Breadcrumb.Separator
 

components/breadcrumb/index.zh-CN.md

@@ -26,11 +26,12 @@ title: Breadcrumb
 
 ### Breadcrumb.Item
 
-| 参数    | 说明           | 类型                                   | 默认值 | 版本 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ------- | -------------- | -------------------------------------- | ------ | ---- |
+| --- | --- | --- | --- | --- |
-| href    | 链接的目的地   | string                                 | -      |      |
+| href | 链接的目的地 | string | - |  |
-| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      |      |
+| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
-| onClick | 单击事件       | (e:MouseEvent)=>void                   | -      |      |
+| onClick | 单击事件 | (e:MouseEvent)=>void | - |  |
+| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 
 ### Breadcrumb.Separator
 

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -204,9 +204,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-10-30"
@@ -327,9 +325,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-06"
@@ -450,9 +446,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-13"
@@ -573,9 +567,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-20"
@@ -696,9 +688,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-27"
@@ -819,9 +809,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-12-04"
@@ -1157,9 +1145,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-10-30"
@@ -1280,9 +1266,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-06"
@@ -1403,9 +1387,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-13"
@@ -1526,9 +1508,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-20"
@@ -1649,9 +1629,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-27"
@@ -1772,9 +1750,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-12-04"
@@ -2136,9 +2112,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-10-30"
@@ -2259,9 +2233,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-06"
@@ -2382,9 +2354,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-13"
@@ -2505,9 +2475,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-20"
@@ -2628,9 +2596,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2016-11-27"
@@ -2751,9 +2717,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2016-12-04"
@@ -3087,9 +3051,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-10-30"
@@ -3238,9 +3200,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-06"
@@ -3461,9 +3421,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-13"
@@ -3697,9 +3655,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-20"
@@ -3848,9 +3804,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2016-11-27"
@@ -3999,9 +3953,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2016-12-04"
@@ -4448,9 +4400,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-01"
@@ -4571,9 +4521,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-08"
@@ -4694,9 +4642,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-15"
@@ -4817,9 +4763,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-22"
@@ -4940,9 +4884,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2017-01-29"
@@ -5063,9 +5005,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2017-02-05"

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -206,9 +206,7 @@ exports[`Calendar Calendar should support locale 1`] = `
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-01"
@@ -329,9 +327,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-08"
@@ -452,9 +448,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-15"
@@ -575,9 +569,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-22"
@@ -698,9 +690,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2018-10-29"
@@ -821,9 +811,7 @@ exports[`Calendar Calendar should support locale 1`] = `
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2018-11-05"
@@ -1156,9 +1144,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
             </tr>
           </thead>
           <tbody>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2000-08-27"
@@ -1279,9 +1265,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-03"
@@ -1402,9 +1386,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-10"
@@ -1525,9 +1507,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-17"
@@ -1648,9 +1628,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell ant-picker-cell-in-view"
                 title="2000-09-24"
@@ -1771,9 +1749,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
                 </div>
               </td>
             </tr>
-            <tr
+            <tr>
-              class=""
-            >
               <td
                 class="ant-picker-cell"
                 title="2000-10-01"

components/card/__tests__/index.test.js

@@ -67,4 +67,22 @@ describe('Card', () => {
     );
     expect(wrapper.find('.ant-card-actions').length).toBe(0);
   });
+
+  it('with tab props', () => {
+    const wrapper = mount(
+      <Card
+        title="Card title"
+        tabList={[
+          {
+            key: 'key',
+            tab: 'tab',
+          },
+        ]}
+        tabProps={{ size: 'small' }}
+      >
+        <p>Card content</p>
+      </Card>,
+    );
+    expect(wrapper.find('Tabs').get(0).props.size).toBe('small');
+  });
 });

components/card/index.en-US.md

@@ -37,6 +37,7 @@ A card can be used to display content related to a single subject. The content c
 | title | Card title | string\|ReactNode | - |  |
 | type | Card style type, can be set to `inner` or not set | string | - |  |
 | onTabChange | Callback when tab is switched | (key) => void | - |  |
+| tabProps | [Tabs](https://ant.design/components/tabs/#Tabs) | - | - |  |
 
 ### Card.Grid
 

components/card/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import Grid from './Grid';
 import Meta from './Meta';
-import Tabs from '../tabs';
+import Tabs, { TabsProps } from '../tabs';
 import Row from '../row';
 import Col from '../col';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -54,6 +54,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   onTabChange?: (key: string) => void;
   activeTabKey?: string;
   defaultActiveTabKey?: string;
+  tabProps?: TabsProps;
 }
 
 export default class Card extends React.Component<CardProps, {}> {
@@ -97,6 +98,7 @@ export default class Card extends React.Component<CardProps, {}> {
       defaultActiveTabKey,
       tabBarExtraContent,
       hoverable,
+      tabProps = {},
       ...others
     } = this.props;
 
@@ -152,6 +154,7 @@ export default class Card extends React.Component<CardProps, {}> {
 
     const hasActiveTabKey = activeTabKey !== undefined;
     const extraProps = {
+      ...tabProps,
       [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
         ? activeTabKey
         : defaultActiveTabKey,
@@ -162,9 +165,9 @@ export default class Card extends React.Component<CardProps, {}> {
     const tabs =
       tabList && tabList.length ? (
         <Tabs
+          size="large"
           {...extraProps}
           className={`${prefixCls}-head-tabs`}
-          size="large"
           onChange={this.onTabChange}
         >
           {tabList.map(item => (

components/card/index.zh-CN.md

@@ -38,6 +38,7 @@ cols: 1
 | title | 卡片标题 | string\|ReactNode | - |  |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |  |
 | onTabChange | 页签切换的回调 | (key) => void | - |  |
+| tabProps | [Tabs](https://ant.design/components/tabs-cn/#Tabs) | - | - |  |
 
 ### Card.Grid
 

components/carousel/__tests__/index.test.js

@@ -126,4 +126,18 @@ describe('Carousel', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('dots precise control by plain object', () => {
+    it('use dots to provide dotsClasse', () => {
+      const wrapper = mount(
+        <Carousel dots={{ className: 'customDots' }}>
+          <div>1</div>
+          <div>2</div>
+          <div>3</div>
+        </Carousel>,
+      );
+      wrapper.update();
+      expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy();
+    });
+  });
 });

components/carousel/index.en-US.md

@@ -20,7 +20,7 @@ A carousel component. Scales with its container.
 | autoplay | Whether to scroll automatically | boolean | `false` |  |
 | beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom |  |
-| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |  |
+| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?:string } | `true` |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
 

components/carousel/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import isPlainObject from 'lodash/isPlainObject';
 import debounce from 'lodash/debounce';
 import { Settings } from '@ant-design/react-slick';
 import classNames from 'classnames';
@@ -14,13 +15,18 @@ export type CarouselEffect = 'scrollx' | 'fade';
 export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
 
 // Carousel
-export interface CarouselProps extends Settings {
+export interface CarouselProps extends Omit<Settings, 'dots' | 'dotsClass'> {
   effect?: CarouselEffect;
   style?: React.CSSProperties;
   prefixCls?: string;
   slickGoTo?: number;
   dotPosition?: DotPosition;
   children?: React.ReactNode;
+  dots?:
+    | boolean
+    | {
+        className?: string;
+      };
 }
 
 export default class Carousel extends React.Component<CarouselProps, {}> {
@@ -106,7 +112,13 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
     const dotsClass = 'slick-dots';
     const dotPosition = this.getDotPosition();
     props.vertical = dotPosition === 'left' || dotPosition === 'right';
-    props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`;
+
+    const enableDots = props.dots === true || isPlainObject(props.dots);
+    const dsClass = classNames(
+      dotsClass,
+      `${dotsClass}-${dotPosition || 'bottom'}`,
+      typeof props.dots === 'boolean' ? false : props.dots?.className,
+    );
 
     const className = classNames(prefixCls, {
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -115,7 +127,7 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
 
     return (
       <div className={className}>
-        <SlickCarousel ref={this.saveSlick} {...props} />
+        <SlickCarousel ref={this.saveSlick} {...props} dots={enableDots} dotsClass={dsClass} />
       </div>
     );
   };

components/carousel/index.zh-CN.md

@@ -21,7 +21,7 @@ subtitle: 走马灯
 | autoplay | 是否自动切换 | boolean | false |  |  |
 | beforeChange | 切换面板的回调 | function(from, to) | 无 |  |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom |  |
-| dots | 是否显示面板指示点 | boolean | true |  |  |
+| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?:string } | true |  |  |
 | easing | 动画效果 | string | linear |  |  |
 | effect | 动画效果函数，可取 scrollx, fade | string | scrollx |  |  |
 

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -1255,9 +1255,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell"
                   title="2000-08-27"
@@ -1378,9 +1376,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view config-picker-cell-selected"
                   title="2000-09-03"
@@ -1501,9 +1497,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view"
                   title="2000-09-10"
@@ -1624,9 +1618,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view"
                   title="2000-09-17"
@@ -1747,9 +1739,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell config-picker-cell-in-view"
                   title="2000-09-24"
@@ -1870,9 +1860,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="config-picker-cell"
                   title="2000-10-01"
@@ -2262,7 +2250,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
                   </div>
                 </td>
                 <td
-                  class="config-picker-cell config-picker-cell-selected config-picker-cell-in-view"
+                  class="config-picker-cell config-picker-cell-in-view config-picker-cell-selected"
                   title="2000-09"
                 >
                   <div
@@ -2546,9 +2534,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2000-08-27"
@@ -2669,9 +2655,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
                   title="2000-09-03"
@@ -2792,9 +2776,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2000-09-10"
@@ -2915,9 +2897,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2000-09-17"
@@ -3038,9 +3018,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell ant-picker-cell-in-view"
                   title="2000-09-24"
@@ -3161,9 +3139,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="ant-picker-cell"
                   title="2000-10-01"
@@ -3553,7 +3529,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
                   </div>
                 </td>
                 <td
-                  class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view"
+                  class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
                   title="2000-09"
                 >
                   <div
@@ -3837,9 +3813,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
               </tr>
             </thead>
             <tbody>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell"
                   title="2000-08-27"
@@ -3960,9 +3934,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view prefix-Calendar-cell-selected"
                   title="2000-09-03"
@@ -4083,9 +4055,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
                   title="2000-09-10"
@@ -4206,9 +4176,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
                   title="2000-09-17"
@@ -4329,9 +4297,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell prefix-Calendar-cell-in-view"
                   title="2000-09-24"
@@ -4452,9 +4418,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
               </tr>
-              <tr
+              <tr>
-                class=""
-              >
                 <td
                   class="prefix-Calendar-cell"
                   title="2000-10-01"
@@ -4844,7 +4808,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
                   </div>
                 </td>
                 <td
-                  class="prefix-Calendar-cell prefix-Calendar-cell-selected prefix-Calendar-cell-in-view"
+                  class="prefix-Calendar-cell prefix-Calendar-cell-in-view prefix-Calendar-cell-selected"
                   title="2000-09"
                 >
                   <div
@@ -9271,57 +9235,55 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
           class="config-popover-inner"
           role="tooltip"
         >
-          <div>
+          <div
+            class="config-popover-inner-content"
+          >
             <div
-              class="config-popover-inner-content"
+              class="config-popover-message"
             >
-              <div
+              <span
-                class="config-popover-message"
+                aria-label="exclamation-circle"
+                class="anticon anticon-exclamation-circle"
+                role="img"
               >
-                <span
+                <svg
-                  aria-label="exclamation-circle"
+                  aria-hidden="true"
-                  class="anticon anticon-exclamation-circle"
+                  class=""
-                  role="img"
+                  data-icon="exclamation-circle"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
+                  <path
-                    aria-hidden="true"
+                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    class=""
+                  />
-                    data-icon="exclamation-circle"
+                </svg>
-                    fill="currentColor"
+              </span>
-                    focusable="false"
+              <div
-                    height="1em"
+                class="config-popover-message-title"
-                    viewBox="64 64 896 896"
+              />
-                    width="1em"
+            </div>
-                  >
+            <div
-                    <path
+              class="config-popover-buttons"
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+            >
-                    />
+              <button
-                  </svg>
+                class="config-btn config-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
                 </span>
-                <div
+              </button>
-                  class="config-popover-message-title"
+              <button
-                />
+                class="config-btn config-btn-primary config-btn-sm"
-              </div>
+                type="button"
-              <div
-                class="config-popover-buttons"
               >
-                <button
+                <span>
-                  class="config-btn config-btn-sm"
+                  OK
-                  type="button"
+                </span>
-                >
+              </button>
-                  <span>
-                    Cancel
-                  </span>
-                </button>
-                <button
-                  class="config-btn config-btn-primary config-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    OK
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -9353,57 +9315,55 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
           class="ant-popover-inner"
           role="tooltip"
         >
-          <div>
+          <div
+            class="ant-popover-inner-content"
+          >
             <div
-              class="ant-popover-inner-content"
+              class="ant-popover-message"
             >
-              <div
+              <span
-                class="ant-popover-message"
+                aria-label="exclamation-circle"
+                class="anticon anticon-exclamation-circle"
+                role="img"
               >
-                <span
+                <svg
-                  aria-label="exclamation-circle"
+                  aria-hidden="true"
-                  class="anticon anticon-exclamation-circle"
+                  class=""
-                  role="img"
+                  data-icon="exclamation-circle"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
+                  <path
-                    aria-hidden="true"
+                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    class=""
+                  />
-                    data-icon="exclamation-circle"
+                </svg>
-                    fill="currentColor"
+              </span>
-                    focusable="false"
+              <div
-                    height="1em"
+                class="ant-popover-message-title"
-                    viewBox="64 64 896 896"
+              />
-                    width="1em"
+            </div>
-                  >
+            <div
-                    <path
+              class="ant-popover-buttons"
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+            >
-                    />
+              <button
-                  </svg>
+                class="ant-btn ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
                 </span>
-                <div
+              </button>
-                  class="ant-popover-message-title"
+              <button
-                />
+                class="ant-btn ant-btn-primary ant-btn-sm"
-              </div>
+                type="button"
-              <div
-                class="ant-popover-buttons"
               >
-                <button
+                <span>
-                  class="ant-btn ant-btn-sm"
+                  OK
-                  type="button"
+                </span>
-                >
+              </button>
-                  <span>
-                    Cancel
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    OK
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -9435,57 +9395,55 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
           class="prefix-Popconfirm-inner"
           role="tooltip"
         >
-          <div>
+          <div
+            class="prefix-Popconfirm-inner-content"
+          >
             <div
-              class="prefix-Popconfirm-inner-content"
+              class="prefix-Popconfirm-message"
             >
-              <div
+              <span
-                class="prefix-Popconfirm-message"
+                aria-label="exclamation-circle"
+                class="anticon anticon-exclamation-circle"
+                role="img"
               >
-                <span
+                <svg
-                  aria-label="exclamation-circle"
+                  aria-hidden="true"
-                  class="anticon anticon-exclamation-circle"
+                  class=""
-                  role="img"
+                  data-icon="exclamation-circle"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
+                  <path
-                    aria-hidden="true"
+                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    class=""
+                  />
-                    data-icon="exclamation-circle"
+                </svg>
-                    fill="currentColor"
+              </span>
-                    focusable="false"
+              <div
-                    height="1em"
+                class="prefix-Popconfirm-message-title"
-                    viewBox="64 64 896 896"
+              />
-                    width="1em"
+            </div>
-                  >
+            <div
-                    <path
+              class="prefix-Popconfirm-buttons"
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+            >
-                    />
+              <button
-                  </svg>
+                class="ant-btn ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
                 </span>
-                <div
+              </button>
-                  class="prefix-Popconfirm-message-title"
+              <button
-                />
+                class="ant-btn ant-btn-primary ant-btn-sm"
-              </div>
+                type="button"
-              <div
-                class="prefix-Popconfirm-buttons"
               >
-                <button
+                <span>
-                  class="ant-btn ant-btn-sm"
+                  OK
-                  type="button"
+                </span>
-                >
+              </button>
-                  <span>
-                    Cancel
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    OK
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -9517,11 +9475,9 @@ exports[`ConfigProvider components Popover configProvider 1`] = `
           class="config-popover-inner"
           role="tooltip"
         >
-          <div>
+          <div
-            <div
+            class="config-popover-inner-content"
-              class="config-popover-inner-content"
+          />
-            />
-          </div>
         </div>
       </div>
     </div>
@@ -9551,11 +9507,9 @@ exports[`ConfigProvider components Popover normal 1`] = `
           class="ant-popover-inner"
           role="tooltip"
         >
-          <div>
+          <div
-            <div
+            class="ant-popover-inner-content"
-              class="ant-popover-inner-content"
+          />
-            />
-          </div>
         </div>
       </div>
     </div>
@@ -9585,11 +9539,9 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
           class="prefix-Popover-inner"
           role="tooltip"
         >
-          <div>
+          <div
-            <div
+            class="prefix-Popover-inner-content"
-              class="prefix-Popover-inner-content"
+          />
-            />
-          </div>
         </div>
       </div>
     </div>
@@ -11811,16 +11763,23 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                               <div
                                 class="config-table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="config-table-filter-dropdown-link confirm"
+                                  class="config-btn config-btn-link config-btn-sm"
+                                  disabled=""
+                                  type="button"
                                 >
-                                  OK
+                                  <span>
-                                </a>
+                                    Reset
-                                <a
+                                  </span>
-                                  class="config-table-filter-dropdown-link clear"
+                                </button>
+                                <button
+                                  class="config-btn config-btn-primary config-btn-sm"
+                                  type="button"
                                 >
-                                  Reset
+                                  <span>
-                                </a>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -12150,16 +12109,23 @@ exports[`ConfigProvider components Table normal 1`] = `
                               <div
                                 class="ant-table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="ant-table-filter-dropdown-link confirm"
+                                  class="ant-btn ant-btn-link ant-btn-sm"
+                                  disabled=""
+                                  type="button"
                                 >
-                                  OK
+                                  <span>
-                                </a>
+                                    Reset
-                                <a
+                                  </span>
-                                  class="ant-table-filter-dropdown-link clear"
+                                </button>
+                                <button
+                                  class="ant-btn ant-btn-primary ant-btn-sm"
+                                  type="button"
                                 >
-                                  Reset
+                                  <span>
-                                </a>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>
@@ -12489,16 +12455,23 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                               <div
                                 class="prefix-Table-filter-dropdown-btns"
                               >
-                                <a
+                                <button
-                                  class="prefix-Table-filter-dropdown-link confirm"
+                                  class="ant-btn ant-btn-link ant-btn-sm"
+                                  disabled=""
+                                  type="button"
                                 >
-                                  OK
+                                  <span>
-                                </a>
+                                    Reset
-                                <a
+                                  </span>
-                                  class="prefix-Table-filter-dropdown-link clear"
+                                </button>
+                                <button
+                                  class="ant-btn ant-btn-primary ant-btn-sm"
+                                  type="button"
                                 >
-                                  Reset
+                                  <span>
-                                </a>
+                                    OK
+                                  </span>
+                                </button>
                               </div>
                             </div>
                           </div>

components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -146,9 +146,7 @@ Array [
                   </tr>
                 </thead>
                 <tbody>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled"
                       title="2016-10-30"
@@ -220,9 +218,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
                       title="2016-11-06"
@@ -294,9 +290,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
                       title="2016-11-13"
@@ -368,9 +362,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-disabled ant-picker-cell-in-view"
                       title="2016-11-20"
@@ -442,9 +434,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2016-11-27"
@@ -516,9 +506,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell"
                       title="2016-12-04"
@@ -780,9 +768,7 @@ Array [
                   </tr>
                 </thead>
                 <tbody>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell"
                       title="1999-12-27"
@@ -854,9 +840,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-03"
@@ -928,9 +912,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-10"
@@ -1002,9 +984,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-17"
@@ -1076,9 +1056,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-24"
@@ -1150,9 +1128,7 @@ Array [
                       </div>
                     </td>
                   </tr>
-                  <tr
+                  <tr>
-                    class=""
-                  >
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
                       title="2000-01-31"

components/date-picker/__tests__/__snapshots__/other.test.js.snap

@@ -53,7 +53,7 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
               <tbody>
                 <tr>
                   <td
-                    class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view"
+                    class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-selected"
                     title="2000-01"
                   >
                     <div

components/date-picker/generatePicker.tsx

@@ -13,7 +13,7 @@ import {
   RangePickerDateProps as RCRangePickerDateProps,
   RangePickerTimeProps as RCRangePickerTimeProps,
 } from 'rc-picker/lib/RangePicker';
-import { PickerMode } from 'rc-picker/lib/interface';
+import { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
 import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
@@ -24,6 +24,7 @@ import { getPlaceholder, getRangePlaceholder } from './util';
 import PickerButton from './PickerButton';
 import PickerTag from './PickerTag';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import { TimePickerLocale } from '../time-picker';
 
 const Components = { button: PickerButton, rangeItem: PickerTag };
 
@@ -78,11 +79,34 @@ type InjectDefaultProps<Props> = Omit<
   | 'hideHeader'
   | 'components'
 > & {
-  locale?: typeof enUS;
+  locale?: PickerLocale;
   size?: SizeType;
   bordered?: boolean;
 };
 
+export type PickerLocale = {
+  lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
+  timePickerLocale: TimePickerLocale;
+} & AdditionalPickerLocaleProps;
+
+export type AdditionalPickerLocaleProps = {
+  dateFormat?: string;
+  dateTimeFormat?: string;
+  weekFormat?: string;
+  monthFormat?: string;
+};
+
+export type AdditionalPickerLocaleLangProps = {
+  placeholder: string;
+  yearPlaceholder?: string;
+  monthPlaceholder?: string;
+  weekPlaceholder?: string;
+  rangeYearPlaceholder?: [string, string];
+  rangeMonthPlaceholder?: [string, string];
+  rangeWeekPlaceholder?: [string, string];
+  rangePlaceholder?: [string, string];
+};
+
 // Picker Props
 export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
 export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
@@ -140,12 +164,12 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
         };
         result.lang = {
           ...result.lang,
-          ...((locale || {}) as any).lang,
+          ...((locale || {}) as PickerLocale).lang,
         };
         return result;
       };
 
-      renderPicker = (locale: any) => {
+      renderPicker = (locale: PickerLocale) => {
         const { getPrefixCls, direction } = this.context;
         const {
           prefixCls: customizePrefixCls,
@@ -263,12 +287,12 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
       };
       result.lang = {
         ...result.lang,
-        ...((locale || {}) as any).lang,
+        ...((locale || {}) as PickerLocale).lang,
       };
       return result;
     };
 
-    renderPicker = (locale: any) => {
+    renderPicker = (locale: PickerLocale) => {
       const { getPrefixCls, direction } = this.context;
       const {
         prefixCls: customizePrefixCls,

components/date-picker/locale/ar_EG.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/ar_EG';
 import TimePickerLocale from '../../time-picker/locale/ar_EG';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'اختيار التاريخ',
     rangePlaceholder: ['البداية', 'النهاية'],

components/date-picker/locale/az_AZ.tsx

@@ -1,7 +1,8 @@
 import CalendarLocale from 'rc-picker/lib/locale/az_AZ';
 import TimePickerLocale from '../../time-picker/locale/az_AZ';
+import { PickerLocale } from '../generatePicker';
 
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Tarix seçin',
     rangePlaceholder: ['Başlama tarixi', 'Bitmə tarixi'],

components/date-picker/locale/bg_BG.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/bg_BG';
 import TimePickerLocale from '../../time-picker/locale/bg_BG';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Избор на дата',
     rangePlaceholder: ['Начална', 'Крайна'],

components/date-picker/locale/ca_ES.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/ca_ES';
 import TimePickerLocale from '../../time-picker/locale/ca_ES';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Seleccionar data',
     rangePlaceholder: ['Data inicial', 'Data final'],

components/date-picker/locale/cs_CZ.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/cs_CZ';
 import TimePickerLocale from '../../time-picker/locale/cs_CZ';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Vybrat datum',
     rangePlaceholder: ['Od', 'Do'],

components/date-picker/locale/da_DK.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/da_DK';
 import TimePickerLocale from '../../time-picker/locale/da_DK';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Vælg dato',
     rangePlaceholder: ['Startdato', 'Slutdato'],

components/date-picker/locale/de_DE.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/de_DE';
 import TimePickerLocale from '../../time-picker/locale/de_DE';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Datum auswählen',
     rangePlaceholder: ['Startdatum', 'Enddatum'],

components/date-picker/locale/el_GR.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/el_GR';
 import TimePickerLocale from '../../time-picker/locale/el_GR';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Επιλέξτε ημερομηνία',
     rangePlaceholder: ['Αρχική ημερομηνία', 'Τελική ημερομηνία'],

components/date-picker/locale/en_GB.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/en_GB';
 import TimePickerLocale from '../../time-picker/locale/en_GB';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Select date',
     rangePlaceholder: ['Start date', 'End date'],

components/date-picker/locale/en_US.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/en_US';
 import TimePickerLocale from '../../time-picker/locale/en_US';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Select date',
     yearPlaceholder: 'Select year',

components/date-picker/locale/es_ES.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/es_ES';
 import TimePickerLocale from '../../time-picker/locale/es_ES';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Seleccionar fecha',
     rangePlaceholder: ['Fecha inicial', 'Fecha final'],

components/date-picker/locale/et_EE.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/et_EE';
 import TimePickerLocale from '../../time-picker/locale/et_EE';
+import { PickerLocale } from '../generatePicker';
 
 // 统一合并为完整的 Locale
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Vali kuupäev',
     rangePlaceholder: ['Algus kuupäev', 'Lõpu kuupäev'],

components/date-picker/locale/fa_IR.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/fa_IR';
 import TimePickerLocale from '../../time-picker/locale/fa_IR';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'انتخاب تاریخ',
     rangePlaceholder: ['تاریخ شروع', 'تاریخ پایان'],

components/date-picker/locale/fi_FI.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/fi_FI';
 import TimePickerLocale from '../../time-picker/locale/fi_FI';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Valitse päivä',
     rangePlaceholder: ['Alku päivä', 'Loppu päivä'],

components/date-picker/locale/fr_BE.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/fr_BE';
 import TimePickerLocale from '../../time-picker/locale/fr_BE';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Sélectionner une date',
     rangePlaceholder: ['Date de début', 'Date de fin'],

components/date-picker/locale/fr_FR.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/fr_FR';
 import TimePickerLocale from '../../time-picker/locale/fr_FR';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Sélectionner une date',
     yearPlaceholder: 'Sélectionner une année',

components/date-picker/locale/he_IL.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/he_IL';
 import TimePickerLocale from '../../time-picker/locale/he_IL';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'בחר תאריך',
     rangePlaceholder: ['תאריך התחלה', 'תאריך סיום'],

components/date-picker/locale/hi_IN.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/hi_IN';
 import TimePickerLocale from '../../time-picker/locale/hi_IN';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'तारीख़ चुनें',
     rangePlaceholder: ['प्रारंभ तिथि', 'समाप्ति तिथि'],

components/date-picker/locale/hr_HR.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/hr_HR';
 import TimePickerLocale from '../../time-picker/locale/hr_HR';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Odaberite datum',
     rangePlaceholder: ['Početni datum', 'Završni datum'],

components/date-picker/locale/hu_HU.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/hu_HU';
 import TimePickerLocale from '../../time-picker/locale/hu_HU';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Válasszon dátumot',
     rangePlaceholder: ['Kezdő dátum', 'Befejezés dátuma'],

components/date-picker/locale/id_ID.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/id_ID';
 import TimePickerLocale from '../../time-picker/locale/id_ID';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Pilih tanggal',
     rangePlaceholder: ['Mulai tanggal', 'Tanggal akhir'],

components/date-picker/locale/is_IS.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/is_IS';
 import TimePickerLocale from '../../time-picker/locale/is_IS';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Veldu dag',
     rangePlaceholder: ['Upphafsdagur', 'Lokadagur'],

components/date-picker/locale/it_IT.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/it_IT';
 import TimePickerLocale from '../../time-picker/locale/it_IT';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Selezionare la data',
     rangePlaceholder: ["Data d'inizio", 'Data di fine'],

components/date-picker/locale/ja_JP.tsx

@@ -1,7 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/ja_JP';
 import TimePickerLocale from '../../time-picker/locale/ja_JP';
+import { PickerLocale } from '../generatePicker';
 
-const locale = {
+// Merge into a locale object
+const locale: PickerLocale = {
   lang: {
     placeholder: '日付を選択',
     rangePlaceholder: ['開始日付', '終了日付'],

components/date-picker/locale/kn_IN.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/kn_IN';
 import TimePickerLocale from '../../time-picker/locale/kn_IN';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'ದಿನಾಂಕ ಆಯ್ಕೆಮಾಡಿ',
     rangePlaceholder: ['ಪ್ರಾರಂಭ ದಿನಾಂಕ', 'ಅಂತಿಮ ದಿನಾಂಕ'],

components/date-picker/locale/ko_KR.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/ko_KR';
 import TimePickerLocale from '../../time-picker/locale/ko_KR';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: '날짜 선택',
     rangePlaceholder: ['시작일', '종료일'],

components/date-picker/locale/ku_IQ.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/ku_IQ';
 import TimePickerLocale from '../../time-picker/locale/ku_IQ';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Dîrok hilbijêre',
     rangePlaceholder: ['Dîroka destpêkê', 'Dîroka dawîn'],

components/date-picker/locale/lv_LV.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/lv_LV';
 import TimePickerLocale from '../../time-picker/locale/lv_LV';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Izvēlieties datumu',
     rangePlaceholder: ['Sākuma datums', 'Beigu datums'],

components/date-picker/locale/mk_MK.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/mk_MK';
 import TimePickerLocale from '../../time-picker/locale/mk_MK';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Избери датум',
     rangePlaceholder: ['Од датум', 'До датум'],

components/date-picker/locale/mn_MN.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/mn_MN';
 import TimePickerLocale from '../../time-picker/locale/mn_MN';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Огноо сонгох',
     rangePlaceholder: ['Эхлэх огноо', 'Дуусах огноо'],

components/date-picker/locale/ms_MY.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/ms_MY';
 import TimePickerLocale from '../../time-picker/locale/ms_MY';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Pilih tarikh',
     rangePlaceholder: ['Tarikh mula', 'Tarikh akhir'],

components/date-picker/locale/nb_NO.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/nb_NO';
 import TimePickerLocale from '../../time-picker/locale/nb_NO';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Velg dato',
     rangePlaceholder: ['Startdato', 'Sluttdato'],

components/date-picker/locale/nl_BE.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/nl_BE';
 import TimePickerLocale from '../../time-picker/locale/nl_BE';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Selecteer datum',
     rangePlaceholder: ['Begin datum', 'Eind datum'],

components/date-picker/locale/nl_NL.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/nl_NL';
 import TimePickerLocale from '../../time-picker/locale/nl_NL';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Selecteer datum',
     rangePlaceholder: ['Begin datum', 'Eind datum'],

components/date-picker/locale/pl_PL.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/pl_PL';
 import TimePickerLocale from '../../time-picker/locale/pl_PL';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Wybierz datę',
     rangePlaceholder: ['Data początkowa', 'Data końcowa'],

components/date-picker/locale/pt_BR.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/pt_BR';
 import TimePickerLocale from '../../time-picker/locale/pt_BR';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Selecionar data',
     rangePlaceholder: ['Data inicial', 'Data final'],

components/date-picker/locale/pt_PT.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/pt_PT';
 import TimePickerLocale from '../../time-picker/locale/pt_PT';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     ...CalendarLocale,
     placeholder: 'Data',

components/date-picker/locale/ro_RO.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/ro_RO';
 import TimePickerLocale from '../../time-picker/locale/ro_RO';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Selectează data',
     rangePlaceholder: ['Data start', 'Data sfârșit'],

components/date-picker/locale/ru_RU.tsx

@@ -4,8 +4,10 @@
 
 import CalendarLocale from 'rc-picker/lib/locale/ru_RU';
 import TimePickerLocale from '../../time-picker/locale/ru_RU';
+import { PickerLocale } from '../generatePicker';
 
-const locale = {
+// Merge into a locale object
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Выберите дату',
     rangePlaceholder: ['Начальная дата', 'Конечная дата'],

components/date-picker/locale/sk_SK.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/sk_SK';
 import TimePickerLocale from '../../time-picker/locale/sk_SK';
+import { PickerLocale } from '../generatePicker';
 
 // 统一合并为完整的 Locale
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Vybrať dátum',
     rangePlaceholder: ['Od', 'Do'],

components/date-picker/locale/sl_SI.tsx

@@ -1,7 +1,8 @@
 import TimePickerLocale from '../../time-picker/locale/sl_SI';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     locale: 'sl',
     placeholder: 'Izberite datum',

components/date-picker/locale/sr_RS.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/sr_RS';
 import TimePickerLocale from '../../time-picker/locale/sr_RS';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Izaberite datum',
     rangePlaceholder: ['Početni datum', 'Krajnji datum'],

components/date-picker/locale/sv_SE.tsx

@@ -1,7 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/sv_SE';
 import TimePickerLocale from '../../time-picker/locale/sv_SE';
+import { PickerLocale } from '../generatePicker';
 
-const locale = {
+// Merge into a locale object
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Välj datum',
     rangePlaceholder: ['Startdatum', 'Slutdatum'],

components/date-picker/locale/ta_IN.tsx

@@ -1,9 +1,10 @@
 // Tamil Locale added to rc-calendar
 import CalendarLocale from 'rc-picker/lib/locale/ta_IN';
 import TimePickerLocale from '../../time-picker/locale/ta_IN';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'தேதியைத் தேர்ந்தெடுக்கவும்',
     rangePlaceholder: ['தொடக்க தேதி', 'கடைசி தேதி'],

components/date-picker/locale/th_TH.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/th_TH';
 import TimePickerLocale from '../../time-picker/locale/th_TH';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'เลือกวันที่',
     rangePlaceholder: ['วันเริ่มต้น', 'วันสิ้นสุด'],

components/date-picker/locale/tr_TR.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/tr_TR';
 import TimePickerLocale from '../../time-picker/locale/tr_TR';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Tarih Seç',
     rangePlaceholder: ['Başlangıç Tarihi', 'Bitiş Tarihi'],

components/date-picker/locale/uk_UA.tsx

@@ -1,7 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/uk_UA';
 import TimePickerLocale from '../../time-picker/locale/uk_UA';
+import { PickerLocale } from '../generatePicker';
 
-const locale = {
+// Merge into a locale object
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Оберіть дату',
     rangePlaceholder: ['Початкова дата', 'Кінцева дата'],

components/date-picker/locale/vi_VN.tsx

@@ -1,8 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/vi_VN';
 import TimePickerLocale from '../../time-picker/locale/vi_VN';
+import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object
-const locale = {
+const locale: PickerLocale = {
   lang: {
     placeholder: 'Chọn thời điểm',
     rangePlaceholder: ['Ngày bắt đầu', 'Ngày kết thúc'],

components/date-picker/locale/zh_CN.tsx

@@ -1,7 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/zh_CN';
 import TimePickerLocale from '../../time-picker/locale/zh_CN';
+import { PickerLocale } from '../generatePicker';
 
-const locale = {
+// 统一合并为完整的 Locale
+const locale: PickerLocale = {
   lang: {
     placeholder: '请选择日期',
     yearPlaceholder: '请选择年份',

components/date-picker/locale/zh_TW.tsx

@@ -1,7 +1,9 @@
 import CalendarLocale from 'rc-picker/lib/locale/zh_TW';
 import TimePickerLocale from '../../time-picker/locale/zh_TW';
+import { PickerLocale } from '../generatePicker';
 
-const locale = {
+// 统一合并为完整的 Locale
+const locale: PickerLocale = {
   lang: {
     placeholder: '請選擇日期',
     rangePlaceholder: ['開始日期', '結束日期'],

components/date-picker/util.ts

@@ -1,6 +1,7 @@
 import { PickerMode } from 'rc-picker/lib/interface';
+import { PickerLocale } from './generatePicker';
 
-export function getPlaceholder(picker: PickerMode | undefined, locale: any): string {
+export function getPlaceholder(picker: PickerMode | undefined, locale: PickerLocale): string {
   if (picker === 'year' && locale.lang.yearPlaceholder) {
     return locale.lang.yearPlaceholder;
   }
@@ -16,7 +17,7 @@ export function getPlaceholder(picker: PickerMode | undefined, locale: any): str
   return locale.lang.placeholder;
 }
 
-export function getRangePlaceholder(picker: PickerMode | undefined, locale: any): [string, string] {
+export function getRangePlaceholder(picker: PickerMode | undefined, locale: PickerLocale) {
   if (picker === 'year' && locale.lang.yearPlaceholder) {
     return locale.lang.rangeYearPlaceholder;
   }

components/form/FormItem.tsx

@@ -77,6 +77,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
     validateStatus,
     children,
     required,
+    label,
     trigger = 'onChange',
     validateTrigger = 'onChange',
     ...restProps
@@ -235,9 +236,15 @@ function FormItem(props: FormItemProps): React.ReactElement {
     return renderLayout(children);
   }
 
+  const variables: Record<string, string> = {};
+  if (typeof label === 'string') {
+    variables.label = label;
+  }
+
   return (
     <Field
       {...props}
+      messageVariables={variables}
       trigger={trigger}
       validateTrigger={validateTrigger}
       onReset={() => {

components/form/__tests__/index.test.js

@@ -596,6 +596,28 @@ describe('Form', () => {
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
+  it('`label` support template', async () => {
+    const wrapper = mount(
+      // eslint-disable-next-line no-template-curly-in-string
+      <Form validateMessages={{ required: '${label} is good!' }}>
+        <Form.Item name="test" label="Bamboo" rules={[{ required: true }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    wrapper.find('form').simulate('submit');
+    await delay(50);
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('.ant-form-item-explain')
+        .first()
+        .text(),
+    ).toEqual('Bamboo is good!');
+  });
+
   it('return same form instance', () => {
     const instances = new Set();
 

components/form/demo/nest-messages.md

@@ -22,13 +22,13 @@ const layout = {
 };
 
 const validateMessages = {
-  required: 'This field is required!',
+  required: '${label} is required!',
   types: {
-    email: 'Not a validate email!',
+    email: '${label} is not validate email!',
-    number: 'Not a validate number!',
+    number: '${label} is not a validate number!',
   },
   number: {
-    range: 'Must be between ${min} and ${max}',
+    range: '${label} must be between ${min} and ${max}',
   },
 };
 

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -1226,3 +1226,15 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
+<div
+  class="ant-row"
+>
+  <div
+    class="ant-col"
+  >
+    Current break point: 
+  </div>
+</div>
+`;

components/grid/__tests__/index.test.js

@@ -3,6 +3,7 @@ import { render, mount } from 'enzyme';
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import useBreakpoint from '../hooks/useBreakpoint';
 
 describe('Grid', () => {
   mountTest(Row);
@@ -90,4 +91,26 @@ describe('Grid', () => {
       marginBottom: 10,
     });
   });
+
+  // By jsdom mock, actual jsdom not implemented matchMedia
+  // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+  it('should work with useBreakpoint', () => {
+    function Demo() {
+      const screens = useBreakpoint();
+
+      return JSON.stringify(screens);
+    }
+    const wrapper = mount(<Demo />);
+
+    expect(wrapper.text()).toEqual(
+      JSON.stringify({
+        xs: true,
+        sm: false,
+        md: false,
+        lg: false,
+        xl: false,
+        xxl: false,
+      }),
+    );
+  });
 });

components/grid/demo/useBreakpoint.md

@@ -0,0 +1,36 @@
+---
+order: 10
+title: useBreakpoint Hook
+---
+
+## zh-CN
+
+使用 `useBreakpoint` Hook 个性化布局。
+
+## en-US
+
+Use `useBreakpoint` Hook povide personalized layout.
+
+```jsx
+import { Row, Col, Grid } from 'antd';
+
+const { useBreakpoint } = Grid;
+
+function UseBreakpointDemo() {
+  const screens = useBreakpoint();
+
+  return (
+    <Row>
+      <Col>
+        Current break point:&nbsp;
+        {Object.entries(screens)
+          .filter(screen => !!screen[1])
+          .map(screen => screen[0])
+          .join(' ')}
+      </Col>
+    </Row>
+  );
+}
+
+ReactDOM.render(<UseBreakpointDemo />, mountNode);
+```

components/grid/hooks/useBreakpoint.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
+
+function useBreakpoint(): ScreenMap {
+  const [screens, setScreens] = useState<ScreenMap>({});
+
+  useEffect(() => {
+    const token = ResponsiveObserve.subscribe(supportScreens => {
+      setScreens(supportScreens);
+    });
+
+    return () => ResponsiveObserve.unsubscribe(token);
+  }, []);
+
+  return screens;
+}
+
+export default useBreakpoint;

components/grid/index.tsx

@@ -1,7 +1,10 @@
 import Row from './row';
 import Col from './col';
+import useBreakpoint from './hooks/useBreakpoint';
 
 export { RowProps } from './row';
 export { ColProps, ColSize } from './col';
 
 export { Row, Col };
+
+export default { useBreakpoint };

components/index.tsx

@@ -66,6 +66,8 @@ export { default as Empty } from './empty';
 
 export { default as Form } from './form';
 
+export { default as Grid } from './grid';
+
 export { default as Input } from './input';
 
 export { default as InputNumber } from './input-number';

components/list/__tests__/__snapshots__/pagination.test.js.snap

@@ -372,7 +372,7 @@ exports[`List.pagination should change page size work 2`] = `
       <div>
         <div
           class="ant-select-dropdown"
-          style="width: 0px; opacity: 0;"
+          style="min-width: 0; opacity: 0;"
         >
           <div>
             <div

components/locale-provider/index.tsx

@@ -1,22 +1,35 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { ModalLocale, changeConfirmLocale } from '../modal/locale';
 import warning from '../_util/warning';
 
+import { ModalLocale, changeConfirmLocale } from '../modal/locale';
+import { TransferLocale as TransferLocaleForEmpty } from '../empty';
+import { PaginationLocale } from '../pagination/Pagination';
+import { TableLocale } from '../table/interface';
+import { PopconfirmLocale } from '../popconfirm';
+import { UploadLocale } from '../upload/interface';
+import { TransferLocale } from '../transfer';
+import { PickerLocale as DatePickerLocale } from '../date-picker/generatePicker';
+
 export const ANT_MARK = 'internalMark';
 
 export interface Locale {
   locale: string;
-  Pagination?: Object;
+  Pagination?: PaginationLocale;
-  DatePicker?: Object;
+  DatePicker?: DatePickerLocale;
   TimePicker?: Object;
   Calendar?: Object;
-  Table?: Object;
+  Table?: TableLocale;
   Modal?: ModalLocale;
-  Popconfirm?: Object;
+  Popconfirm?: PopconfirmLocale;
-  Transfer?: Object;
+  Transfer?: Partial<TransferLocale>;
   Select?: Object;
-  Upload?: Object;
+  Upload?: UploadLocale;
+  Empty?: TransferLocaleForEmpty;
+  global?: Object;
+  PageHeader?: Object;
+  Icon?: Object;
+  Text?: Object;
 }
 
 export interface LocaleProviderProps {

components/locale/ar_EG.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ar_EG';
 import DatePicker from '../date-picker/locale/ar_EG';
 import TimePicker from '../time-picker/locale/ar_EG';
 import Calendar from '../calendar/locale/ar_EG';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ar',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'لا توجد بيانات',
   },
 };
+
+export default localeValues;

components/locale/az_AZ.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/az_AZ';
 import DatePicker from '../date-picker/locale/az_AZ';
 import TimePicker from '../time-picker/locale/az_AZ';
 import Calendar from '../calendar/locale/az_AZ';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'az',
   Pagination,
   DatePicker,
@@ -43,3 +44,5 @@ export default {
     previewFile: 'Fayla önbaxış',
   },
 };
+
+export default localeValues;

components/locale/bg_BG.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/bg_BG';
 import DatePicker from '../date-picker/locale/bg_BG';
 import TimePicker from '../time-picker/locale/bg_BG';
 import Calendar from '../calendar/locale/bg_BG';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'bg',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Няма данни',
   },
 };
+
+export default localeValues;

components/locale/ca_ES.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/ca_ES';
 import DatePicker from '../date-picker/locale/ca_ES';
 import TimePicker from '../time-picker/locale/ca_ES';
 import Calendar from '../calendar/locale/ca_ES';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'ca',
   Pagination,
   DatePicker,
@@ -39,3 +40,5 @@ export default {
     description: 'Sense dades',
   },
 };
+
+export default localeValues;

components/locale/cs_CZ.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/cs_CZ';
 import DatePicker from '../date-picker/locale/cs_CZ';
 import TimePicker from '../time-picker/locale/cs_CZ';
 import Calendar from '../calendar/locale/cs_CZ';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'cs',
   Pagination,
   DatePicker,
@@ -39,3 +40,5 @@ export default {
     description: 'Žádná data',
   },
 };
+
+export default localeValues;

components/locale/da_DK.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/da_DK';
 import DatePicker from '../date-picker/locale/da_DK';
 import TimePicker from '../time-picker/locale/da_DK';
 import Calendar from '../calendar/locale/da_DK';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'da',
   DatePicker,
   TimePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Ingen data',
   },
 };
+
+export default localeValues;

components/locale/de_DE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/de_DE';
 import DatePicker from '../date-picker/locale/de_DE';
 import TimePicker from '../time-picker/locale/de_DE';
 import Calendar from '../calendar/locale/de_DE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'de',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Keine Daten',
   },
 };
+
+export default localeValues;

components/locale/default.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/en_US';
 import DatePicker from '../date-picker/locale/en_US';
 import TimePicker from '../time-picker/locale/en_US';
 import Calendar from '../calendar/locale/en_US';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'en',
   Pagination,
   DatePicker,
@@ -22,6 +23,9 @@ export default {
     sortTitle: 'Sort',
     expand: 'Expand row',
     collapse: 'Collapse row',
+    triggerDesc: 'Click sort by descend',
+    triggerAsc: 'Click sort by ascend',
+    cancelSort: 'Click to cancel sort',
   },
   Modal: {
     okText: 'OK',
@@ -61,3 +65,5 @@ export default {
     back: 'Back',
   },
 };
+
+export default localeValues;

components/locale/el_GR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/el_GR';
 import DatePicker from '../date-picker/locale/el_GR';
 import TimePicker from '../time-picker/locale/el_GR';
 import Calendar from '../calendar/locale/el_GR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'el',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Δεν υπάρχουν δεδομένα',
   },
 };
+
+export default localeValues;

components/locale/en_GB.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/en_GB';
 import DatePicker from '../date-picker/locale/en_GB';
 import TimePicker from '../time-picker/locale/en_GB';
 import Calendar from '../calendar/locale/en_GB';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'en-gb',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'No data',
   },
 };
+
+export default localeValues;

components/locale/es_ES.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/es_ES';
 import DatePicker from '../date-picker/locale/es_ES';
 import TimePicker from '../time-picker/locale/es_ES';
 import Calendar from '../calendar/locale/es_ES';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'es',
   Pagination,
   DatePicker,
@@ -57,3 +58,5 @@ export default {
     back: 'volver',
   },
 };
+
+export default localeValues;

components/locale/et_EE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/et_EE';
 import DatePicker from '../date-picker/locale/et_EE';
 import TimePicker from '../time-picker/locale/et_EE';
 import Calendar from '../calendar/locale/et_EE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'et',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'Andmed puuduvad',
   },
 };
+
+export default localeValues;

components/locale/fa_IR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fa_IR';
 import DatePicker from '../date-picker/locale/fa_IR';
 import TimePicker from '../time-picker/locale/fa_IR';
 import Calendar from '../calendar/locale/fa_IR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fa',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'داده‌ای موجود نیست',
   },
 };
+
+export default localeValues;

components/locale/fi_FI.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fi_FI';
 import DatePicker from '../date-picker/locale/fi_FI';
 import TimePicker from '../time-picker/locale/fi_FI';
 import Calendar from '../calendar/locale/fi_FI';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fi',
   Pagination,
   DatePicker,
@@ -42,3 +43,5 @@ export default {
     description: 'Ei kohteita',
   },
 };
+
+export default localeValues;

components/locale/fr_BE.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fr_BE';
 import DatePicker from '../date-picker/locale/fr_BE';
 import TimePicker from '../time-picker/locale/fr_BE';
 import Calendar from '../calendar/locale/fr_BE';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fr',
   Pagination,
   DatePicker,
@@ -45,3 +46,5 @@ export default {
     expand: 'développer',
   },
 };
+
+export default localeValues;

components/locale/fr_FR.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/fr_FR';
 import DatePicker from '../date-picker/locale/fr_FR';
 import TimePicker from '../time-picker/locale/fr_FR';
 import Calendar from '../calendar/locale/fr_FR';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'fr',
   Pagination,
   DatePicker,
@@ -45,3 +46,5 @@ export default {
     expand: 'développer',
   },
 };
+
+export default localeValues;

components/locale/he_IL.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/he_IL';
 import DatePicker from '../date-picker/locale/he_IL';
 import TimePicker from '../time-picker/locale/he_IL';
 import Calendar from '../calendar/locale/he_IL';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'he',
   Pagination,
   DatePicker,
@@ -41,3 +42,5 @@ export default {
     description: 'אין מידע',
   },
 };
+
+export default localeValues;

components/locale/hi_IN.tsx

@@ -2,8 +2,9 @@ import Pagination from 'rc-pagination/lib/locale/hi_IN';
 import DatePicker from '../date-picker/locale/hi_IN';
 import TimePicker from '../time-picker/locale/hi_IN';
 import Calendar from '../calendar/locale/hi_IN';
+import { Locale } from '../locale-provider';
 
-export default {
+const localeValues: Locale = {
   locale: 'hi',
   Pagination,
   DatePicker,
@@ -49,3 +50,5 @@ export default {
     downloadFile: 'फ़ाइल डाउनलोड करें',
   },
 };
+
+export default localeValues;