Merge remote-tracking branch 'upstream/feature' into feat-anchor-getCurrentAnchor

components/_util/transButton.tsx

@@ -7,6 +7,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 
 interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+  noStyle?: boolean;
 }
 
 const inlineStyle: React.CSSProperties = {
@@ -53,7 +54,8 @@ class TransButton extends React.Component<TransButtonProps> {
   }
 
   render() {
-    const { style } = this.props;
+    const { style, noStyle } = this.props;
+
     return (
       <div
         role="button"
@@ -62,7 +64,7 @@ class TransButton extends React.Component<TransButtonProps> {
         {...this.props}
         onKeyDown={this.onKeyDown}
         onKeyUp={this.onKeyUp}
-        style={{ ...inlineStyle, ...style }}
+        style={{ ...(!noStyle ? inlineStyle : null), ...style }}
       />
     );
   }

components/calendar/locale/ms_MY.tsx

@@ -0,0 +1,2 @@
+import ms_MY from '../../date-picker/locale/ms_MY';
+export default ms_MY;

components/collapse/index.zh-CN.md

@@ -35,6 +35,6 @@ cols: 1
 | disabled    | 禁用后的面板展开与否将无法通过用户交互改变 | boolean           | false  |        |
 | forceRender | 被隐藏时是否渲染 DOM 结构                  | boolean           | false  | 3.2.0  |
 | header      | 面板头内容                                 | string\|ReactNode | 无     |        |
-| key         | 对应 activeKey                             | string\|number            | 无     |        |
+| key         | 对应 activeKey                             | string\|number    | 无     |        |
 | showArrow   | 是否展示当前面板上的箭头                   | boolean           | `true` | 3.13.0 |
 | extra       | 自定义渲染每个面板右上角的内容             | ReactNode         | -      | 3.14.0 |

components/date-picker/locale/ms_MY.tsx

@@ -0,0 +1,19 @@
+import CalendarLocale from 'rc-calendar/lib/locale/ms_MY';
+import TimePickerLocale from '../../time-picker/locale/ms_MY';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Pilih tarikh',
+    rangePlaceholder: ['Tarikh mula', 'Tarikh akhir'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

components/descriptions/Col.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { DescriptionsItemProps } from './index';
+
+interface ColProps {
+  child: React.ReactElement<DescriptionsItemProps>;
+  bordered: boolean;
+  colon: boolean;
+  type?: 'label' | 'content';
+  layout?: 'horizontal' | 'vertical';
+}
+
+const Col: React.SFC<ColProps> = props => {
+  const { child, bordered, colon, type, layout } = props;
+  const { prefixCls, label, className, children, span = 1 } = child.props;
+  const labelProps: any = {
+    className: classNames(`${prefixCls}-item-label`, className, {
+      [`${prefixCls}-item-colon`]: colon,
+      [`${prefixCls}-item-no-label`]: !label,
+    }),
+    key: 'label',
+  };
+  if (layout === 'vertical') {
+    labelProps.colSpan = span * 2 - 1;
+  }
+
+  if (bordered) {
+    if (type === 'label') {
+      return <th {...labelProps}>{label}</th>;
+    }
+    return (
+      <td
+        className={classNames(`${prefixCls}-item-content`, className)}
+        key="content"
+        colSpan={span * 2 - 1}
+      >
+        {children}
+      </td>
+    );
+  }
+  if (layout === 'vertical') {
+    if (type === 'content') {
+      return (
+        <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
+          <span className={`${prefixCls}-item-content`} key="content">
+            {children}
+          </span>
+        </td>
+      );
+    }
+    return (
+      <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
+        <span
+          className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
+          key="label"
+        >
+          {label}
+        </span>
+      </td>
+    );
+  }
+  return (
+    <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
+      <span {...labelProps}>{label}</span>
+      <span className={`${prefixCls}-item-content`} key="content">
+        {children}
+      </span>
+    </td>
+  );
+};
+
+export default Col;

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

@@ -22,7 +22,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               UserName
             </span>
@@ -37,7 +37,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Telephone
             </span>
@@ -52,7 +52,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Live
             </span>
@@ -71,7 +71,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Remark
             </span>
@@ -86,7 +86,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="2"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Address
             </span>
@@ -121,7 +121,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Product
           </th>
@@ -132,7 +132,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             Cloud Database
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Billing Mode
           </th>
@@ -143,7 +143,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             Prepaid
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Automatic Renewal
           </th>
@@ -158,7 +158,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Order time
           </th>
@@ -169,7 +169,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             2018-04-24 18:00:00
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Usage Time
           </th>
@@ -184,7 +184,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Status
           </th>
@@ -210,7 +210,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Negotiated Amount
           </th>
@@ -221,7 +221,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             $80.00
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Discount
           </th>
@@ -232,7 +232,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             $20.00
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Official Receipts
           </th>
@@ -247,7 +247,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Config Info
           </th>
@@ -294,7 +294,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Product
             </th>
@@ -305,7 +305,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               Cloud Database
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Billing
             </th>
@@ -316,7 +316,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               Prepaid
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               time
             </th>
@@ -331,7 +331,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Amount
             </th>
@@ -342,7 +342,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               $80.00
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Discount
             </th>
@@ -353,7 +353,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               $20.00
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Official
             </th>
@@ -368,7 +368,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Config Info
             </th>
@@ -479,7 +479,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Product
             </th>
@@ -490,7 +490,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               Cloud Database
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Billing
             </th>
@@ -501,7 +501,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               Prepaid
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               time
             </th>
@@ -516,7 +516,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Amount
             </th>
@@ -527,7 +527,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               $80.00
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Discount
             </th>
@@ -538,7 +538,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               $20.00
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Official
             </th>
@@ -553,7 +553,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Config Info
             </th>
@@ -604,7 +604,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               UserName
             </span>
@@ -614,7 +614,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Telephone
             </span>
@@ -624,7 +624,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Live
             </span>
@@ -672,7 +672,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Remark
             </span>
@@ -682,7 +682,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="2"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Address
             </span>
@@ -735,24 +735,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Product
-          </td>
+          </th>
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Billing Mode
-          </td>
+          </th>
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Automatic Renewal
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -779,18 +779,18 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Order time
-          </td>
+          </th>
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Usage Time
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -811,12 +811,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Status
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -842,24 +842,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Negotiated Amount
-          </td>
+          </th>
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Discount
-          </td>
+          </th>
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Official Receipts
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -886,12 +886,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Config Info
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"

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

@@ -1,5 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Descriptions Descriptions support colon 1`] = `
+<Descriptions
+  colon={false}
+  column={
+    Object {
+      "lg": 3,
+      "md": 3,
+      "sm": 2,
+      "xl": 3,
+      "xs": 1,
+      "xxl": 3,
+    }
+  }
+  size="default"
+>
+  <div
+    className="ant-descriptions"
+  >
+    <div
+      className="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            className="ant-descriptions-row"
+            key="0"
+          >
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={false}
+              key="label-0"
+              layout="horizontal"
+              type="label"
+            >
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
+              >
+                <span
+                  className="ant-descriptions-item-label"
+                  key="label"
+                >
+                  Product
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</Descriptions>
+`;
+
 exports[`Descriptions Descriptions support style 1`] = `
 <Descriptions
   column={
@@ -36,21 +105,37 @@ exports[`Descriptions Descriptions support style 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label ant-descriptions-item-no-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
-              />
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
               >
-                Cloud Database
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon ant-descriptions-item-no-label"
-            </td>
+                  key="label"
+                />
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -85,23 +170,41 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
+            <Col
-              className="ant-descriptions-item my-class"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  className="my-class"
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item my-class"
-                key="label"
+                colSpan={1}
               >
-                Product
+                <span
-              </span>
+                  className="ant-descriptions-item-label my-class ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  Product
-              >
+                </span>
-                Cloud Database
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -127,81 +230,144 @@ exports[`Descriptions column is number 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
-              key=".$.0"
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Product
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  Product
-              >
+                </span>
-                Cloud Database
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
-            <td
+                >
-              className="ant-descriptions-item"
+                  Cloud Database
-              colSpan={1}
+                </span>
-              key=".$.1"
+              </td>
+            </Col>
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-1"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Billing
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  Billing
-              >
+                </span>
-                Prepaid
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
-            <td
+                >
-              className="ant-descriptions-item"
+                  Prepaid
-              colSpan={1}
+                </span>
+              </td>
+            </Col>
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-2"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                time
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  time
-              >
+                </span>
-                18:00:00
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  18:00:00
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="1"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={3}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={3}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={3}
               >
-                Amount
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  Amount
-              >
+                </span>
-                $80.00
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  $80.00
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -237,129 +403,259 @@ exports[`Descriptions vertical layout 1`] = `
             className="ant-descriptions-row"
             key="label-0"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Product
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-            </td>
+                  key="label"
+                >
+                  Product
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-0"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
+              <td
-                className="ant-descriptions-item-content"
+                className="ant-descriptions-item"
-                key="content"
+                colSpan={1}
               >
-                Cloud Database
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="label-1"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Billing
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-            </td>
+                  key="label"
+                >
+                  Billing
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-1"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
+              <td
-                className="ant-descriptions-item-content"
+                className="ant-descriptions-item"
-                key="content"
+                colSpan={1}
               >
-                Prepaid
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  Prepaid
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="label-2"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                time
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-            </td>
+                  key="label"
+                >
+                  time
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-2"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
+              <td
-                className="ant-descriptions-item-content"
+                className="ant-descriptions-item"
-                key="content"
+                colSpan={1}
               >
-                18:00:00
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  18:00:00
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="label-3"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Amount
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-            </td>
+                  key="label"
+                >
+                  Amount
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-3"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
+              <td
-                className="ant-descriptions-item-content"
+                className="ant-descriptions-item"
-                key="content"
+                colSpan={1}
               >
-                $80.00
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  $80.00
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -394,89 +690,154 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Product
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  Product
-              >
+                </span>
-                Cloud Database
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="1"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Billing
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  Billing
-              >
+                </span>
-                Prepaid
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  Prepaid
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="2"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                time
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  time
-              >
+                </span>
-                18:00:00
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  18:00:00
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="3"
           >
-            <td
+            <Col
-              className="ant-descriptions-item"
+              bordered={false}
-              colSpan={1}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
+              <td
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item"
-                key="label"
+                colSpan={1}
               >
-                Amount
+                <span
-              </span>
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
-              <span
+                  key="label"
-                className="ant-descriptions-item-content"
+                >
-                key="content"
+                  Amount
-              >
+                </span>
-                $80.00
+                <span
-              </span>
+                  className="ant-descriptions-item-content"
-            </td>
+                  key="content"
+                >
+                  $80.00
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>

components/descriptions/__tests__/index.test.js

@@ -152,6 +152,15 @@ describe('Descriptions', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('Descriptions support colon', () => {
+    const wrapper = mount(
+      <Descriptions colon={false}>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('Descriptions support style', () => {
     const wrapper = mount(
       <Descriptions style={{ backgroundColor: '#e8e8e8' }}>

components/descriptions/index.en-US.md

@@ -22,6 +22,7 @@ Commonly displayed on the details page.
 | column | the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | 3.19.0 |
 | size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false | 3.19.0 |
 | layout | Define description layout | `horizontal | vertical` | `horizontal` | 3.19.8 |
+| colon | change default props `colon` value of `Descriptions.Item` | boolean | true | 3.21.0 |
 
 ### DescriptionItem
 

components/descriptions/index.tsx

@@ -7,6 +7,7 @@ import ResponsiveObserve, {
   responsiveArray,
 } from '../_util/responsiveObserve';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import Col from './Col';
 
 export interface DescriptionsItemProps {
   prefixCls?: string;
@@ -29,6 +30,7 @@ export interface DescriptionsProps {
   title?: React.ReactNode;
   column?: number | Partial<Record<Breakpoint, number>>;
   layout?: 'horizontal' | 'vertical';
+  colon?: boolean;
 }
 
 /**
@@ -69,96 +71,13 @@ const generateChildrenRows = (
   return childrenArray;
 };
 
-/**
- * This code is for handling react15 does not support returning an array,
- * It can convert a children into th and td
- * @param child DescriptionsItem
- * @returns
- * <>
- *   <th>{DescriptionsItem.label}</th>
- *   <td>{DescriptionsItem.children}</td>
- * </>
- */
-const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
-  const { prefixCls, label, className, children, span = 1 } = child.props;
-  if (bordered) {
-    return [
-      <th
-        className={classNames(`${prefixCls}-item-label`, className, {
-          [`${prefixCls}-item-no-label`]: !label,
-        })}
-        key="label"
-      >
-        {label}
-      </th>,
-      <td
-        className={classNames(`${prefixCls}-item-content`, className)}
-        key="content"
-        colSpan={span * 2 - 1}
-      >
-        {children}
-      </td>,
-    ];
-  }
-  return (
-    <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
-      <span
-        className={classNames(`${prefixCls}-item-label`, {
-          [`${prefixCls}-item-no-label`]: !label,
-        })}
-        key="label"
-      >
-        {label}
-      </span>
-      <span className={`${prefixCls}-item-content`} key="content">
-        {children}
-      </span>
-    </td>
-  );
-};
-
-const renderLabelCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
-  const { prefixCls, label, span = 1 } = child.props;
-  if (bordered) {
-    return (
-      <td className={`${prefixCls}-item-label`} key="label" colSpan={span * 2 - 1}>
-        {label}
-      </td>
-    );
-  }
-  return (
-    <td colSpan={span} className={`${prefixCls}-item`}>
-      <span className={`${prefixCls}-item-label`} key="label">
-        {label}
-      </span>
-    </td>
-  );
-};
-
-const renderContentCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
-  const { prefixCls, children, span = 1 } = child.props;
-  if (bordered) {
-    return (
-      <td className={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
-        {children}
-      </td>
-    );
-  }
-  return (
-    <td colSpan={span} className={`${prefixCls}-item`}>
-      <span className={`${prefixCls}-item-content`} key="content">
-        {children}
-      </span>
-    </td>
-  );
-};
-
 const renderRow = (
   children: React.ReactElement<DescriptionsItemProps>[],
   index: number,
   { prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean },
   bordered: boolean,
-  layout: string,
+  layout: 'horizontal' | 'vertical',
+  colon: boolean,
 ) => {
   // copy children,prevent changes to incoming parameters
   const childrenArray = [...children];
@@ -169,41 +88,51 @@ const renderRow = (
       span,
     });
   }
+  childrenArray.push(lastChildren);
+
+  const renderCol = (
+    childrenItem: React.ReactElement<DescriptionsItemProps>,
+    type: 'label' | 'content',
+    idx: number,
+  ) => (
+    <Col
+      child={childrenItem}
+      bordered={bordered}
+      colon={colon}
+      type={type}
+      key={`${type}-${idx}`}
+      layout={layout}
+    />
+  );
+
+  const cloneChildren: JSX.Element[] = [];
+  const cloneContentChildren: JSX.Element[] = [];
+  React.Children.forEach(
+    childrenArray,
+    (childrenItem: React.ReactElement<DescriptionsItemProps>, idx: number) => {
+      cloneChildren.push(renderCol(childrenItem, 'label', idx));
+      if (layout === 'vertical') {
+        cloneContentChildren.push(renderCol(childrenItem, 'content', idx));
+      } else if (bordered) {
+        cloneChildren.push(renderCol(childrenItem, 'content', idx));
+      }
+    },
+  );
 
   if (layout === 'vertical') {
-    const cloneLabelChildren = React.Children.map(
-      childrenArray,
-      (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-        return renderLabelCol(childrenItem, bordered);
-      },
-    );
-    const cloneContentChildren = React.Children.map(
-      childrenArray,
-      (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-        return renderContentCol(childrenItem, bordered);
-      },
-    );
     return [
       <tr className={`${prefixCls}-row`} key={`label-${index}`}>
-        {cloneLabelChildren}
+        {cloneChildren}
-        {renderLabelCol(lastChildren, bordered)}
       </tr>,
       <tr className={`${prefixCls}-row`} key={`content-${index}`}>
         {cloneContentChildren}
-        {renderContentCol(lastChildren, bordered)}
       </tr>,
     ];
   }
-  const cloneChildren = React.Children.map(
+
-    childrenArray,
-    (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-      return renderCol(childrenItem, bordered);
-    },
-  );
   return (
     <tr className={`${prefixCls}-row`} key={index}>
       {cloneChildren}
-      {renderCol(lastChildren, bordered)}
     </tr>
   );
 };
@@ -281,6 +210,7 @@ class Descriptions extends React.Component<
             children,
             bordered = false,
             layout = 'horizontal',
+            colon = true,
             style,
           } = this.props;
           const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
@@ -324,6 +254,7 @@ class Descriptions extends React.Component<
                         },
                         bordered,
                         layout,
+                        colon,
                       ),
                     )}
                   </tbody>

components/descriptions/index.zh-CN.md

@@ -23,6 +23,7 @@ cols: 1
 | column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | 3.19.0 |
 | size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false | 3.19.0 |
 | layout | 描述布局 | `horizontal | vertical` | `horizontal` | 3.19.8 |
+| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | 3.21.0 |
 
 ### DescriptionItem
 

components/descriptions/style/index.less

@@ -47,6 +47,12 @@
       position: relative;
       top: -0.5px;
       margin: 0 8px 0 2px;
+      content: ' ';
+    }
+  }
+
+  &-item-colon {
+    &::after {
       content: ':';
     }
   }

components/locale-provider/__tests__/index.test.js

@@ -41,6 +41,7 @@ import knIN from '../kn_IN';
 import koKR from '../ko_KR';
 import kuIQ from '../ku_IQ';
 import mnMN from '../mn_MN';
+import msMY from '../ms_MY';
 import nbNO from '../nb_NO';
 import neNP from '../ne-NP';
 import nlBE from '../nl_BE';
@@ -87,6 +88,7 @@ const locales = [
   knIN,
   koKR,
   kuIQ,
+  msMY,
   mnMN,
   nbNO,
   neNP,

components/locale-provider/default.tsx

@@ -19,6 +19,8 @@ export default {
     selectAll: 'Select current page',
     selectInvert: 'Invert current page',
     sortTitle: 'Sort',
+    expand: 'Expand row',
+    collapse: 'Collapse row',
   },
   Modal: {
     okText: 'OK',

components/locale-provider/fr_BE.tsx

@@ -31,4 +31,10 @@ export default {
   Empty: {
     description: 'Aucune donnée',
   },
+  Text: {
+    edit: 'éditer',
+    copy: 'copier',
+    copied: 'copie effectuée',
+    expand: 'développer',
+  },
 };

components/locale-provider/fr_FR.tsx

@@ -31,4 +31,10 @@ export default {
   Empty: {
     description: 'Aucune donnée',
   },
+  Text: {
+    edit: 'éditer',
+    copy: 'copier',
+    copied: 'copie effectuée',
+    expand: 'développer',
+  },
 };

components/locale-provider/ms_MY.tsx

@@ -0,0 +1,62 @@
+import Pagination from 'rc-pagination/lib/locale/ms_MY';
+import DatePicker from '../date-picker/locale/ms_MY';
+import TimePicker from '../time-picker/locale/ms_MY';
+import Calendar from '../calendar/locale/ms_MY';
+
+export default {
+  locale: 'ms-my',
+  Pagination,
+  DatePicker,
+  TimePicker,
+  Calendar,
+  global: {
+    placeholder: 'Sila pilih',
+  },
+  PageHeader: {
+    back: 'Kembali',
+  },
+  Text: {
+    edit: 'Sunting',
+    copy: 'Salin',
+    copied: 'Berjaya menyalin',
+    expand: 'Kembang',
+  },
+  Empty: {
+    description: 'Tiada data',
+  },
+  Table: {
+    filterTitle: 'Cari dengan tajuk',
+    filterConfirm: 'Ok',
+    filterReset: 'Menetapkan semula',
+    emptyText: 'Tiada data',
+    selectAll: 'Pilih semua',
+    selectInvert: 'Terbalikkan',
+  },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Batal',
+    justOkText: 'OK',
+  },
+  Popconfirm: {
+    okText: 'OK',
+    cancelText: 'Batal',
+  },
+  Transfer: {
+    notFoundContent: 'Tidak dijumpai',
+    searchPlaceholder: 'Carian di sini',
+    itemUnit: 'item',
+    itemsUnit: 'item',
+  },
+  Icon: {
+    icon: 'ikon',
+  },
+  Select: {
+    notFoundContent: 'Tidak Dijumpai',
+  },
+  Upload: {
+    uploading: 'Sedang memuat naik...',
+    removeFile: 'Buang fail',
+    uploadError: 'Masalah muat naik',
+    previewFile: 'Tengok fail',
+  },
+};

components/locale-provider/zh_CN.tsx

@@ -20,6 +20,8 @@ export default {
     selectAll: '全选当页',
     selectInvert: '反选当页',
     sortTitle: '排序',
+    expand: '展开行',
+    collapse: '关闭行',
   },
   Modal: {
     okText: '确定',

components/menu/index.en-US.md

@@ -16,12 +16,12 @@ More layouts with navigation: [layout](/components/layout).
 ## API
 
 ```html
-<Menu>
+<menu>
   <Menu.Item>Menu</Menu.Item>
   <SubMenu title="SubMenu">
     <Menu.Item>SubMenuItem</Menu.Item>
   </SubMenu>
-</Menu>
+</menu>
 ```
 
 ### Menu

components/menu/index.zh-CN.md

@@ -17,12 +17,12 @@ subtitle: 导航菜单
 ## API
 
 ```html
-<Menu>
+<menu>
   <Menu.Item>菜单项</Menu.Item>
   <SubMenu title="子菜单">
     <Menu.Item>子菜单项</Menu.Item>
   </SubMenu>
-</Menu>
+</menu>
 ```
 
 ### Menu

components/menu/style/index.less

@@ -160,7 +160,7 @@
     .@{iconfont-css-prefix} {
       min-width: 14px;
       margin-right: 10px;
-      font-size: @font-size-base;
+      font-size: @menu-icon-size;
       transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
       + span {
         opacity: 1;
@@ -418,7 +418,7 @@
       }
       .@{iconfont-css-prefix} {
         margin: 0;
-        font-size: 16px;
+        font-size: @menu-icon-size-lg;
         line-height: @menu-item-height;
         + span {
           display: inline-block;

components/style/themes/default.less

@@ -384,6 +384,8 @@
 @menu-item-active-bg: @item-active-bg;
 @menu-item-active-border-width: 3px;
 @menu-item-group-title-color: @text-color-secondary;
+@menu-icon-size: @font-size-base;
+@menu-icon-size-lg: @font-size-lg;
 
 // dark theme
 @menu-dark-color: @text-color-secondary-dark;

components/table/Table.tsx

@@ -30,11 +30,13 @@ import {
   TableRowSelection,
   PaginationConfig,
   PrepareParamsArgumentsReturn,
+  ExpandIconProps,
 } from './interface';
 import Pagination from '../pagination';
 import Icon from '../icon';
 import Spin, { SpinProps } from '../spin';
 import { RadioChangeEvent } from '../radio';
+import TransButton from '../_util/transButton';
 import { CheckboxChangeEvent } from '../checkbox';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
@@ -83,6 +85,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     locale: PropTypes.object,
     dropdownPrefixCls: PropTypes.string,
     sortDirections: PropTypes.array,
+    getPopupContainer: PropTypes.func,
   };
 
   static defaultProps = {
@@ -760,18 +763,24 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     return recordKey === undefined ? index : recordKey;
   };
 
-  getPopupContainer = () => {
+  generatePopupContainerFunc = (getPopupContainer: TableProps<T>['getPopupContainer']) => {
-    return ReactDOM.findDOMNode(this) as HTMLElement;
-  };
-
-  generatePopupContainerFunc = () => {
     const { scroll } = this.props;
-
+    if (getPopupContainer) {
+      return getPopupContainer;
+    }
     // Use undefined to let rc component use default logic.
-    return scroll ? this.getPopupContainer : undefined;
+    return scroll ? () => ReactDOM.findDOMNode(this) as HTMLElement : undefined;
   };
 
-  renderRowSelection(prefixCls: string, locale: TableLocale) {
+  renderRowSelection({
+    prefixCls,
+    locale,
+    getPopupContainer,
+  }: {
+    prefixCls: string;
+    locale: TableLocale;
+    getPopupContainer: TableProps<T>['getPopupContainer'];
+  }) {
     const { rowSelection } = this.props;
     const columns = this.columns.concat();
     if (rowSelection) {
@@ -811,7 +820,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
             onSelect={this.handleSelectRow}
             selections={rowSelection.selections}
             hideDefaultSelections={rowSelection.hideDefaultSelections}
-            getPopupContainer={this.generatePopupContainerFunc()}
+            getPopupContainer={this.generatePopupContainerFunc(getPopupContainer)}
           />
         );
       }
@@ -851,12 +860,19 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     return this.getColumnKey(sortColumn) === this.getColumnKey(column);
   }
 
-  renderColumnsDropdown(
+  renderColumnsDropdown({
-    prefixCls: string,
+    prefixCls,
-    dropdownPrefixCls: string,
+    dropdownPrefixCls,
-    columns: ColumnProps<T>[],
+    columns,
-    locale: TableLocale,
+    locale,
-  ) {
+    getPopupContainer,
+  }: {
+    prefixCls: string;
+    dropdownPrefixCls: string;
+    columns: ColumnProps<T>[];
+    locale: TableLocale;
+    getPopupContainer: TableProps<T>['getPopupContainer'];
+  }) {
     const { sortOrder, filters } = this.state;
     return treeMap(columns, (column, i) => {
       const key = this.getColumnKey(column, i) as string;
@@ -874,7 +890,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
             confirmFilter={this.handleFilter}
             prefixCls={`${prefixCls}-filter`}
             dropdownPrefixCls={dropdownPrefixCls || 'ant-dropdown'}
-            getPopupContainer={this.generatePopupContainerFunc()}
+            getPopupContainer={this.generatePopupContainerFunc(getPopupContainer)}
             key="filter-dropdown"
           />
         );
@@ -1146,16 +1162,61 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     };
   }
 
-  renderTable = (
+  renderExpandIcon = (prefixCls: string) => ({
-    prefixCls: string,
+    expandable,
-    renderEmpty: RenderEmptyHandler,
+    expanded,
-    dropdownPrefixCls: string,
+    needIndentSpaced,
-    contextLocale: TableLocale,
+    record,
-  ) => {
+    onExpand,
-    const { style, className, showHeader, locale, ...restProps } = this.props;
+  }: ExpandIconProps<T>) => {
+    if (expandable) {
+      return (
+        <LocaleReceiver componentName="Table" defaultLocale={defaultLocale.Table}>
+          {(locale: TableLocale) => (
+            <TransButton
+              className={classNames(`${prefixCls}-row-expand-icon`, {
+                [`${prefixCls}-row-collapsed`]: !expanded,
+                [`${prefixCls}-row-expanded`]: expanded,
+              })}
+              onClick={event => {
+                onExpand(record, event);
+              }}
+              aria-label={expanded ? locale.collapse : locale.expand}
+              noStyle
+            />
+          )}
+        </LocaleReceiver>
+      );
+    }
+
+    if (needIndentSpaced) {
+      return <span className={`${prefixCls}-row-expand-icon ${prefixCls}-row-spaced`} />;
+    }
+
+    return null;
+  };
+
+  renderTable = ({
+    prefixCls,
+    renderEmpty,
+    dropdownPrefixCls,
+    contextLocale,
+    getPopupContainer: contextGetPopupContainer,
+  }: {
+    prefixCls: string;
+    renderEmpty: RenderEmptyHandler;
+    dropdownPrefixCls: string;
+    contextLocale: TableLocale;
+    getPopupContainer: TableProps<T>['getPopupContainer'];
+  }) => {
+    const { style, className, showHeader, locale, getPopupContainer, ...restProps } = this.props;
     const data = this.getCurrentPageData();
     const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
 
+    // use props.getPopupContainer first
+    const realGetPopupContainer = getPopupContainer || contextGetPopupContainer;
+
+    // Merge too locales
     const mergedLocale = { ...contextLocale, ...locale };
     if (!locale || !locale.emptyText) {
       mergedLocale.emptyText = renderEmpty('Table');
@@ -1168,13 +1229,23 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       [`${prefixCls}-without-column-header`]: !showHeader,
     });
 
-    let columns = this.renderRowSelection(prefixCls, mergedLocale);
+    const columnsWithRowSelection = this.renderRowSelection({
-    columns = this.renderColumnsDropdown(prefixCls, dropdownPrefixCls, columns, mergedLocale);
+      prefixCls,
-    columns = columns.map((column, i) => {
+      locale: mergedLocale,
+      getPopupContainer: realGetPopupContainer,
+    });
+    const columns = this.renderColumnsDropdown({
+      columns: columnsWithRowSelection,
+      prefixCls,
+      dropdownPrefixCls,
+      locale: mergedLocale,
+      getPopupContainer: realGetPopupContainer,
+    }).map((column, i) => {
       const newColumn = { ...column };
       newColumn.key = this.getColumnKey(newColumn, i);
       return newColumn;
     });
+
     let expandIconColumnIndex = columns[0] && columns[0].key === 'selection-column' ? 1 : 0;
     if ('expandIconColumnIndex' in restProps) {
       expandIconColumnIndex = restProps.expandIconColumnIndex as number;
@@ -1183,6 +1254,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     return (
       <RcTable
         key="table"
+        expandIcon={this.renderExpandIcon(prefixCls)}
         {...restProps}
         onRow={(record: T, index: number) => this.onRow(prefixCls, record, index)}
         components={this.components}
@@ -1198,7 +1270,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     );
   };
 
-  renderComponent = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
+  renderComponent = ({ getPrefixCls, renderEmpty, getPopupContainer }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
       dropdownPrefixCls: customizeDropdownPrefixCls,
@@ -1218,7 +1290,15 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls);
     const table = (
       <LocaleReceiver componentName="Table" defaultLocale={defaultLocale.Table}>
-        {locale => this.renderTable(prefixCls, renderEmpty, dropdownPrefixCls, locale)}
+        {locale =>
+          this.renderTable({
+            prefixCls,
+            renderEmpty,
+            dropdownPrefixCls,
+            contextLocale: locale,
+            getPopupContainer,
+          })
+        }
       </LocaleReceiver>
     );
 

components/table/__tests__/Table.expand.test.js

@@ -0,0 +1,41 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react';
+import { mount } from 'enzyme';
+import Table from '..';
+
+describe('Table.expand', () => {
+  it('click to expand', () => {
+    const columns = [
+      {
+        title: 'Name',
+        key: 'name',
+        dataIndex: 'name',
+      },
+    ];
+
+    const data = [
+      {
+        key: '1',
+        firstName: 'John',
+        lastName: 'Brown',
+        age: 32,
+
+        children: [
+          {
+            key: '2',
+            firstName: 'Jim',
+            lastName: 'Green',
+            age: 42,
+          },
+        ],
+      },
+    ];
+
+    const wrapper = mount(<Table columns={columns} dataSource={data} />);
+    wrapper
+      .find('.ant-table-row-expand-icon')
+      .last()
+      .simulate('click');
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});

components/table/__tests__/Table.filter.test.js

@@ -4,6 +4,7 @@ import { render, mount } from 'enzyme';
 import Table from '..';
 import Input from '../../input';
 import Button from '../../button';
+import ConfigProvider from '../../config-provider';
 
 function getDropdownWrapper(wrapper) {
   return mount(
@@ -686,4 +687,35 @@ describe('Table.filter', () => {
     dropdownWrapper2.find('.confirm').simulate('click');
     expect(onChange).toHaveBeenCalled();
   });
+
+  it('should support getPopupContainer', () => {
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...column,
+            filterDropdownVisible: true,
+          },
+        ],
+        getPopupContainer: node => node.parentNode,
+      }),
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('should support getPopupContainer from ConfigProvider', () => {
+    const wrapper = mount(
+      <ConfigProvider getPopupContainer={node => node.parentNode}>
+        {createTable({
+          columns: [
+            {
+              ...column,
+              filterDropdownVisible: true,
+            },
+          ],
+        })}
+      </ConfigProvider>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/table/__tests__/__snapshots__/Table.expand.test.js.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table.expand click to expand 1`] = `
+<div
+  class="ant-table-wrapper"
+>
+  <div
+    class="ant-spin-nested-loading"
+  >
+    <div
+      class="ant-spin-container"
+    >
+      <div
+        class="ant-table ant-table-default ant-table-scroll-position-left"
+      >
+        <div
+          class="ant-table-content"
+        >
+          <div
+            class="ant-table-body"
+          >
+            <table
+              class=""
+            >
+              <colgroup>
+                <col />
+              </colgroup>
+              <thead
+                class="ant-table-thead"
+              >
+                <tr>
+                  <th
+                    class=""
+                  >
+                    <span
+                      class="ant-table-header-column"
+                    >
+                      <div>
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
+                      </div>
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="ant-table-tbody"
+              >
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="1"
+                >
+                  <td
+                    class=""
+                  >
+                    <span
+                      class="ant-table-row-indent indent-level-0"
+                      style="padding-left: 0px;"
+                    />
+                    <div
+                      aria-label="Collapse row"
+                      class="ant-table-row-expand-icon ant-table-row-expanded"
+                      role="button"
+                      tabindex="0"
+                    />
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-1"
+                  data-row-key="2"
+                >
+                  <td
+                    class=""
+                  >
+                    <span
+                      class="ant-table-row-indent indent-level-1"
+                      style="padding-left: 20px;"
+                    />
+                    <span
+                      class="ant-table-row-expand-icon ant-table-row-spaced"
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <ul
+        class="ant-pagination ant-table-pagination"
+        unselectable="unselectable"
+      >
+        <li
+          aria-disabled="true"
+          class="ant-pagination-disabled ant-pagination-prev"
+          title="Previous Page"
+        >
+          <a
+            class="ant-pagination-item-link"
+          >
+            <i
+              aria-label="icon: left"
+              class="anticon anticon-left"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="left"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+                />
+              </svg>
+            </i>
+          </a>
+        </li>
+        <li
+          class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+          tabindex="0"
+          title="1"
+        >
+          <a>
+            1
+          </a>
+        </li>
+        <li
+          aria-disabled="true"
+          class="ant-pagination-disabled ant-pagination-next"
+          title="Next Page"
+        >
+          <a
+            class="ant-pagination-item-link"
+          >
+            <i
+              aria-label="icon: right"
+              class="anticon anticon-right"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="right"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
+                />
+              </svg>
+            </i>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -144,10 +144,6 @@ exports[`Table.filter renders filter correctly 1`] = `
                   <td
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Jack
                   </td>
                 </tr>
@@ -158,10 +154,6 @@ exports[`Table.filter renders filter correctly 1`] = `
                   <td
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Lucy
                   </td>
                 </tr>
@@ -172,10 +164,6 @@ exports[`Table.filter renders filter correctly 1`] = `
                   <td
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Tom
                   </td>
                 </tr>
@@ -186,10 +174,6 @@ exports[`Table.filter renders filter correctly 1`] = `
                   <td
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Jerry
                   </td>
                 </tr>
@@ -392,3 +376,441 @@ exports[`Table.filter renders radio filter correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Table.filter should support getPopupContainer 1`] = `
+<div
+  class="ant-table-wrapper"
+>
+  <div
+    class="ant-spin-nested-loading"
+  >
+    <div
+      class="ant-spin-container"
+    >
+      <div
+        class="ant-table ant-table-default ant-table-scroll-position-left"
+      >
+        <div
+          class="ant-table-content"
+        >
+          <div
+            class="ant-table-body"
+          >
+            <table
+              class=""
+            >
+              <colgroup>
+                <col />
+              </colgroup>
+              <thead
+                class="ant-table-thead"
+              >
+                <tr>
+                  <th
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    <span
+                      class="ant-table-header-column"
+                    >
+                      <div>
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
+                      </div>
+                    </span>
+                    <i
+                      aria-label="icon: filter"
+                      class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open"
+                      style=""
+                      tabindex="-1"
+                      title="Filter menu"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class=""
+                        data-icon="filter"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+                        />
+                      </svg>
+                    </i>
+                    <div>
+                      <div
+                        class="ant-dropdown ant-dropdown-placement-bottomRight slide-up-appear"
+                        style="left: -999px; top: -995px;"
+                      >
+                        <div
+                          class="ant-table-filter-dropdown"
+                        >
+                          <ul
+                            class="ant-dropdown-menu  ant-dropdown-menu-root ant-dropdown-menu-vertical"
+                            role="menu"
+                            tabindex="0"
+                          >
+                            <li
+                              class="ant-dropdown-menu-item"
+                              role="menuitem"
+                            >
+                              <label
+                                class="ant-checkbox-wrapper"
+                              >
+                                <span
+                                  class="ant-checkbox"
+                                >
+                                  <input
+                                    class="ant-checkbox-input"
+                                    type="checkbox"
+                                    value=""
+                                  />
+                                  <span
+                                    class="ant-checkbox-inner"
+                                  />
+                                </span>
+                              </label>
+                              <span>
+                                Boy
+                              </span>
+                            </li>
+                            <li
+                              class="ant-dropdown-menu-item"
+                              role="menuitem"
+                            >
+                              <label
+                                class="ant-checkbox-wrapper"
+                              >
+                                <span
+                                  class="ant-checkbox"
+                                >
+                                  <input
+                                    class="ant-checkbox-input"
+                                    type="checkbox"
+                                    value=""
+                                  />
+                                  <span
+                                    class="ant-checkbox-inner"
+                                  />
+                                </span>
+                              </label>
+                              <span>
+                                Girl
+                              </span>
+                            </li>
+                            <li
+                              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
+                              role="menuitem"
+                            >
+                              <div
+                                aria-expanded="false"
+                                aria-haspopup="true"
+                                class="ant-dropdown-menu-submenu-title"
+                                title="Title"
+                              >
+                                Title
+                                <i
+                                  class="ant-dropdown-menu-submenu-arrow"
+                                />
+                              </div>
+                            </li>
+                          </ul>
+                          <div
+                            class="ant-table-filter-dropdown-btns"
+                          >
+                            <a
+                              class="ant-table-filter-dropdown-link confirm"
+                            >
+                              OK
+                            </a>
+                            <a
+                              class="ant-table-filter-dropdown-link clear"
+                            >
+                              Reset
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="ant-table-tbody"
+              >
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="0"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Jack
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="1"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Lucy
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="2"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Tom
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="3"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Jerry
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] = `
+<div
+  class="ant-table-wrapper"
+>
+  <div
+    class="ant-spin-nested-loading"
+  >
+    <div
+      class="ant-spin-container"
+    >
+      <div
+        class="ant-table ant-table-default ant-table-scroll-position-left"
+      >
+        <div
+          class="ant-table-content"
+        >
+          <div
+            class="ant-table-body"
+          >
+            <table
+              class=""
+            >
+              <colgroup>
+                <col />
+              </colgroup>
+              <thead
+                class="ant-table-thead"
+              >
+                <tr>
+                  <th
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    <span
+                      class="ant-table-header-column"
+                    >
+                      <div>
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
+                      </div>
+                    </span>
+                    <i
+                      aria-label="icon: filter"
+                      class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open"
+                      style=""
+                      tabindex="-1"
+                      title="Filter menu"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class=""
+                        data-icon="filter"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+                        />
+                      </svg>
+                    </i>
+                    <div>
+                      <div
+                        class="ant-dropdown ant-dropdown-placement-bottomRight slide-up-appear"
+                        style="left: -999px; top: -995px;"
+                      >
+                        <div
+                          class="ant-table-filter-dropdown"
+                        >
+                          <ul
+                            class="ant-dropdown-menu  ant-dropdown-menu-root ant-dropdown-menu-vertical"
+                            role="menu"
+                            tabindex="0"
+                          >
+                            <li
+                              class="ant-dropdown-menu-item"
+                              role="menuitem"
+                            >
+                              <label
+                                class="ant-checkbox-wrapper"
+                              >
+                                <span
+                                  class="ant-checkbox"
+                                >
+                                  <input
+                                    class="ant-checkbox-input"
+                                    type="checkbox"
+                                    value=""
+                                  />
+                                  <span
+                                    class="ant-checkbox-inner"
+                                  />
+                                </span>
+                              </label>
+                              <span>
+                                Boy
+                              </span>
+                            </li>
+                            <li
+                              class="ant-dropdown-menu-item"
+                              role="menuitem"
+                            >
+                              <label
+                                class="ant-checkbox-wrapper"
+                              >
+                                <span
+                                  class="ant-checkbox"
+                                >
+                                  <input
+                                    class="ant-checkbox-input"
+                                    type="checkbox"
+                                    value=""
+                                  />
+                                  <span
+                                    class="ant-checkbox-inner"
+                                  />
+                                </span>
+                              </label>
+                              <span>
+                                Girl
+                              </span>
+                            </li>
+                            <li
+                              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
+                              role="menuitem"
+                            >
+                              <div
+                                aria-expanded="false"
+                                aria-haspopup="true"
+                                class="ant-dropdown-menu-submenu-title"
+                                title="Title"
+                              >
+                                Title
+                                <i
+                                  class="ant-dropdown-menu-submenu-arrow"
+                                />
+                              </div>
+                            </li>
+                          </ul>
+                          <div
+                            class="ant-table-filter-dropdown-btns"
+                          >
+                            <a
+                              class="ant-table-filter-dropdown-link confirm"
+                            >
+                              OK
+                            </a>
+                            <a
+                              class="ant-table-filter-dropdown-link clear"
+                            >
+                              Reset
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="ant-table-tbody"
+              >
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="0"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Jack
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="1"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Lucy
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="2"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Tom
+                  </td>
+                </tr>
+                <tr
+                  class="ant-table-row ant-table-row-level-0"
+                  data-row-key="3"
+                >
+                  <td
+                    class="ant-table-column-has-actions ant-table-column-has-filters"
+                  >
+                    Jerry
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/table/__tests__/__snapshots__/Table.pagination.test.js.snap

@@ -59,10 +59,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Jack
                   </td>
                 </tr>
@@ -73,10 +69,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Lucy
                   </td>
                 </tr>
@@ -87,10 +79,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Tom
                   </td>
                 </tr>
@@ -101,10 +89,6 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Jerry
                   </td>
                 </tr>
@@ -249,10 +233,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Jack
                   </td>
                 </tr>
@@ -263,10 +243,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Lucy
                   </td>
                 </tr>

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -122,10 +122,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                     <td
                       class=""
                     >
-                      <span
-                        class="ant-table-row-indent indent-level-0"
-                        style="padding-left:0px"
-                      />
                       Jack
                     </td>
                   </tr>
@@ -157,10 +153,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                     <td
                       class=""
                     >
-                      <span
-                        class="ant-table-row-indent indent-level-0"
-                        style="padding-left:0px"
-                      />
                       Lucy
                     </td>
                   </tr>
@@ -192,10 +184,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                     <td
                       class=""
                     >
-                      <span
-                        class="ant-table-row-indent indent-level-0"
-                        style="padding-left:0px"
-                      />
                       Tom
                     </td>
                   </tr>
@@ -227,10 +215,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                     <td
                       class=""
                     >
-                      <span
-                        class="ant-table-row-indent indent-level-0"
-                        style="padding-left:0px"
-                      />
                       Jerry
                     </td>
                   </tr>

components/table/__tests__/__snapshots__/Table.test.js.snap

@@ -119,10 +119,6 @@ exports[`Table renders JSX correctly 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     John
                   </td>
                   <td
@@ -143,10 +139,6 @@ exports[`Table renders JSX correctly 1`] = `
                   <td
                     class=""
                   >
-                    <span
-                      class="ant-table-row-indent indent-level-0"
-                      style="padding-left:0px"
-                    />
                     Jim
                   </td>
                   <td

components/table/filterDropdown.tsx

@@ -263,7 +263,6 @@ class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState<
         confirm: this.handleConfirm,
         clearFilters: this.handleClearFilters,
         filters: column.filters,
-        getPopupContainer: (triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement,
       });
     }
 
@@ -281,7 +280,7 @@ class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState<
           onSelect={this.setSelectedKeys}
           onDeselect={this.setSelectedKeys}
           selectedKeys={originSelectedKeys && originSelectedKeys.map(val => val.toString())}
-          getPopupContainer={(triggerNode: HTMLElement) => triggerNode.parentNode}
+          getPopupContainer={getPopupContainer}
         >
           {this.renderMenus(column.filters!)}
         </Menu>

components/table/index.en-US.md

@@ -87,6 +87,7 @@ const columns = [
 | onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) |  |  |
 | onHeaderRow | Set props on per header row | Function(column, index) | - |  |
 | onRow | Set props on per row | Function(record, index) | - |  |
+| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 3.21.0 |
 
 #### onRow usage
 

components/table/index.zh-CN.md

@@ -92,6 +92,7 @@ const columns = [
 | onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) |  |  |
 | onHeaderRow | 设置头部行属性 | Function(column, index) | - |  |
 | onRow | 设置行属性 | Function(record, index) | - |  |
+| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 3.21.0 |
 
 #### onRow 用法
 

components/table/interface.tsx

@@ -80,6 +80,8 @@ export interface TableLocale {
   selectAll?: React.ReactNode;
   selectInvert?: React.ReactNode;
   sortTitle?: string;
+  expand?: string;
+  collapse?: string;
 }
 
 export type RowSelectionType = 'checkbox' | 'radio';
@@ -122,7 +124,7 @@ export interface ExpandIconProps<T> {
   record: T;
   needIndentSpaced: boolean;
   expandable: boolean;
-  onExpand: (record: T, event: MouseEvent) => void;
+  onExpand: (record: T, event?: React.MouseEvent) => void;
 }
 
 export interface TableCurrentDataSource<T> {
@@ -188,6 +190,7 @@ export interface TableProps<T> {
   style?: React.CSSProperties;
   children?: React.ReactNode;
   sortDirections?: SortOrder[];
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 
 export interface TableStateFilters {

components/table/style/index.less

@@ -545,15 +545,25 @@
 
   &-row {
     &-expand-icon {
+      .operation-unit();
+
       display: inline-block;
       width: 17px;
       height: 17px;
+      color: inherit;
       line-height: 14px;
       text-align: center;
       background: @component-background;
       border: @border-width-base @border-style-base @border-color-split;
-      cursor: pointer;
+      outline: none;
+      transition: all 0.3s;
       user-select: none;
+
+      &:focus,
+      &:hover,
+      &:active {
+        border-color: currentColor;
+      }
     }
 
     &-expanded::after {

components/time-picker/locale/ms_MY.tsx

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Sila pilih masa',
+};
+
+export default locale;

components/timeline/TimelineItem.tsx

@@ -46,7 +46,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
           <div className={`${prefixCls}-item-tail`} />
           <div
             className={dotClassName}
-            style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }}
+            style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
           >
             {dot}
           </div>

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

@@ -270,7 +270,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
     </div>
   </li>
   <li
-    class="ant-timeline-item ant-timeline-item-last"
+    class="ant-timeline-item"
   >
     <div
       class="ant-timeline-item-tail"
@@ -292,6 +292,52 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
       </p>
     </div>
   </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-gray"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Technical testing 1
+      </p>
+      <p>
+        Technical testing 2
+      </p>
+      <p>
+        Technical testing 3 2015-09-01
+      </p>
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-gray"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Technical testing 1
+      </p>
+      <p>
+        Technical testing 2
+      </p>
+      <p>
+        Technical testing 3 2015-09-01
+      </p>
+    </div>
+  </li>
 </ul>
 `;
 

components/timeline/demo/color.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。
+圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态，灰色表示未完成或失效状态。
 
 ## en-US
 
-Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
+Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status, `gray` for unfinished or disabled status.
 
 ```jsx
 import { Timeline } from 'antd';
@@ -30,6 +30,16 @@ ReactDOM.render(
       <p>Technical testing 2</p>
       <p>Technical testing 3 2015-09-01</p>
     </Timeline.Item>
+    <Timeline.Item color="gray">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </Timeline.Item>
+    <Timeline.Item color="gray">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </Timeline.Item>
   </Timeline>,
   mountNode,
 );

components/timeline/index.en-US.md

@@ -39,6 +39,6 @@ Node of timeline
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |  |
+| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` |  |
 | dot | Customize timeline dot | string\|ReactNode | - |  |
 | position | Customize node position | `left` \| `right` | - | 3.17.0 |

components/timeline/index.zh-CN.md

@@ -38,8 +38,8 @@ title: Timeline
 
 时间轴的每一个节点。
 
-| 参数     | 说明                                            | 类型              | 默认值 | 版本   |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| -------- | ----------------------------------------------- | ----------------- | ------ | ------ |
+| --- | --- | --- | --- | --- |
-| color    | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string            | blue   |        |
+| color | 指定圆圈颜色 `blue, red, green, gray`，或自定义的色值 | string | blue |  |
-| dot      | 自定义时间轴点                                  | string\|ReactNode | -      |        |
+| dot | 自定义时间轴点 | string\|ReactNode | - |  |
-| position | 自定义节点位置                                  | `left` \| `right` | -      | 3.17.0 |
+| position | 自定义节点位置 | `left` \| `right` | - | 3.17.0 |

components/timeline/style/index.less

@@ -55,6 +55,11 @@
         color: @success-color;
         border-color: @success-color;
       }
+
+      &-gray {
+        color: @disabled-color;
+        border-color: @disabled-color;
+      }
     }
 
     &-head-custom {

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

@@ -1311,10 +1311,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content1
                             </td>
                             <td
@@ -1360,10 +1356,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content2
                             </td>
                             <td
@@ -1409,10 +1401,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content4
                             </td>
                             <td
@@ -1459,10 +1447,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content5
                             </td>
                             <td
@@ -1508,10 +1492,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content7
                             </td>
                             <td
@@ -1557,10 +1537,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content8
                             </td>
                             <td
@@ -1606,10 +1582,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content10
                             </td>
                             <td
@@ -1655,10 +1627,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content11
                             </td>
                             <td
@@ -1705,10 +1673,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content13
                             </td>
                             <td
@@ -1754,10 +1718,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content14
                             </td>
                             <td
@@ -2063,10 +2023,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content3
                             </td>
                           </tr>
@@ -2098,10 +2054,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content6
                             </td>
                           </tr>
@@ -2134,10 +2086,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content9
                             </td>
                           </tr>
@@ -2169,10 +2117,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content12
                             </td>
                           </tr>
@@ -2204,10 +2148,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content15
                             </td>
                           </tr>
@@ -2239,10 +2179,6 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
                             <td
                               class=""
                             >
-                              <span
-                                class="ant-table-row-indent indent-level-0"
-                                style="padding-left:0px"
-                              />
                               content18
                             </td>
                           </tr>

package.json

@@ -79,7 +79,7 @@
     "rc-slider": "~8.6.11",
     "rc-steps": "~3.4.1",
     "rc-switch": "~1.9.0",
-    "rc-table": "~6.6.0",
+    "rc-table": "~6.7.0",
     "rc-tabs": "~9.6.4",
     "rc-time-picker": "~3.7.1",
     "rc-tooltip": "~3.7.3",