Merge branch 'master' into feature-3.9.0

2025-01-18 22:36:31 +08:00 · 2018-09-01 13:22:06 +08:00 · 2018-09-01 13:22:06 +08:00 · 207bad7b47
commit 207bad7b47
parent 1bfbefb8e1 53304d3b5a
25 changed files with 106 additions and 43 deletions
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@ -2,6 +2,8 @@ import * as React from 'react';
 import { findDOMNode } from 'react-dom';
 import TransitionEvents from 'css-animation/lib/Event';

+let styleForPesudo: HTMLStyleElement | null;
+
 export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
  private instance?: {
    cancel: () => void;
@ -9,7 +11,6 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {

  private extraNode: HTMLDivElement;
  private clickWaveTimeoutId: number;
-  private styleForPesudo: HTMLStyleElement | null;

  isNotGrey(color: string) {
    const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/);
@ -31,6 +32,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
    node.removeAttribute(attributeName);
    node.setAttribute(attributeName, 'true');
    // Not white or transparnt or grey
+    styleForPesudo = styleForPesudo || document.createElement('style');
    if (waveColor &&
        waveColor !== '#ffffff' &&
        waveColor !== 'rgb(255, 255, 255)' &&
@ -38,10 +40,11 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
        !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) &&  // any transparent rgba color
        waveColor !== 'transparent') {
      extraNode.style.borderColor = waveColor;
-      this.styleForPesudo = document.createElement('style');
-      this.styleForPesudo.innerHTML =
+      styleForPesudo.innerHTML =
        `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`;
-      document.body.appendChild(this.styleForPesudo);
+      if (!document.body.contains(styleForPesudo)) {
+        document.body.appendChild(styleForPesudo);
+      }
    }
    if (insertExtraNode) {
      node.appendChild(extraNode);
@ -104,9 +107,8 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
  }

  removeExtraStyleNode() {
-    if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
-      document.body.removeChild(this.styleForPesudo);
-      this.styleForPesudo = null;
+    if (styleForPesudo) {
+      styleForPesudo.innerHTML = '';
    }
  }

--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -7,6 +7,10 @@ title: Avatar

 用来代表用户或事物，支持图片、图标或字符展示。

+## 设计师专属
+
+安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本.
+
 ## API

 | 参数 | 说明 | 类型 | 默认值 |
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -49,6 +49,7 @@ export interface BaseButtonProps {
  className?: string;
  ghost?: boolean;
  block?: boolean;
+  children?: React.ReactNode;
 }

 export type AnchorButtonProps = {
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@ -17,7 +17,11 @@ A basic card containing a title, content and an extra corner content.
 import { Card } from 'antd';

 ReactDOM.render(
-  <Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
+  <Card
+    title="Card title"
+    extra={<a href="#">More</a>}
+    style={{ width: 300 }}
+  >
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -33,19 +33,19 @@
    .clearfix;
    margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
    min-height: @card-head-height;
+    font-size: @font-size-lg;
+    color: @card-head-color;
+    font-weight: 500;

    &-wrapper {
      display: flex;
    }

    &-title {
-      font-size: @font-size-lg;
      padding: @card-head-padding 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
-      color: @card-head-color;
-      font-weight: 500;
      display: inline-block;
      flex: 1;
    }
@ -53,6 +53,9 @@
    .@{ant-prefix}-tabs {
      margin-bottom: -17px;
      clear: both;
+      font-size: @font-size-base;
+      color: @text-color;
+      font-weight: normal;

      &-bar {
        border-bottom: @border-width-base @border-style-base @border-color-split;
@ -63,6 +66,9 @@
  &-extra {
    float: right;
    padding: @card-head-padding + 1.5px 0;
+    font-size: @font-size-base;
+    color: @text-color;
+    font-weight: normal;
    text-align: right;
    // https://stackoverflow.com/a/22429853/3040605
    margin-left: auto;
@ -73,7 +79,7 @@
    .clearfix;
  }

-  &-contain-grid:not(&-loading) {
+  &-contain-grid:not(&-loading) &-body {
    margin: -1px 0 0 -1px;
    padding: 0;
  }
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@ -74,6 +74,8 @@ export type GetFieldDecoratorOptions = {
  trigger?: string;
  /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
  getValueFromEvent?: (...args: any[]) => any;
+  /** Get the component props according to field value. */
+  getValueProps?: (value: any) => any;
  /** 校验子节点值的时机 */
  validateTrigger?: string | string[];
  /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -156,6 +156,7 @@ After wrapped by `getFieldDecorator`, `value`(or other property defined by `valu
 | -------- | ----------- | ---- | ------------- |
 | id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string |  |
 | options.getValueFromEvent | Specify how to get value from event or other onChange arguments | function(..args) | [reference](https://github.com/react-component/form#option-object) |
+| options.getValueProps | Get the component props according to field value. | function(value): any | [reference](https://github.com/react-component/form#option-object)
 | options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internaly, we recommend to use vairable as `initialValue`, instead of literal) |  | n/a |
 | options.normalize | Normalize value to form component, [a select-all example](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |
 | options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object\[] | n/a |
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -8,9 +8,9 @@ toc: false

 语义化的矢量图形。

-## 设计师专属 🌟
+## 设计师专属

-安装 [Kitchen Sketch](https://kitchen.alipay.com) 插件，就可以一键拖拽使用 Ant Design 和 Iconfont 官方的海量图标，还可以关联自己的项目哦！
+安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。

 ## 图标的命名规范

--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@ -272,7 +272,7 @@
    }

    // https://github.com/ant-design/ant-design/issues/11863
-    & > span > .@{inputClass} {
+    & > span:not(:last-child) > .@{inputClass} {
      border-right-width: 0;
    }

--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@ -14,7 +14,7 @@ interface ConfirmDialogProps extends ModalFuncProps {
 const IS_REACT_16 = !!ReactDOM.createPortal;

 const ConfirmDialog = (props: ConfirmDialogProps) => {
-  const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard, getContainer } = props;
+  const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard, centered, getContainer } = props;
  const iconType = props.iconType || 'question-circle';
  const okType = props.okType || 'primary';
  const prefixCls = props.prefixCls || 'ant-confirm';
@ -57,6 +57,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
      zIndex={zIndex}
      afterClose={afterClose}
      keyboard={keyboard}
+      centered={centered}
      getContainer={getContainer}
    >
      <div className={`${prefixCls}-body-wrapper`}>
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@ -25,7 +25,7 @@
@steps-small-icon-size: 24px;
@steps-dot-size: 8px;
@steps-current-dot-size: 10px;
-@steps-desciption-max-width: 150px;
+@steps-desciption-max-width: 140px;

 .@{steps-prefix-cls} {
  .reset-component;
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -343,6 +343,7 @@
 // Table
 // --
@table-header-bg: @background-color-light;
+@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
--- a/components/table/demo/edit-cell.md
+++ b/components/table/demo/edit-cell.md
@ -141,7 +141,7 @@ class EditableTable extends React.Component {
      dataIndex: 'operation',
      render: (text, record) => {
        return (
-          this.state.dataSource.length > 1
+          this.state.dataSource.length >= 1
            ? (
              <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                <a href="javascript:;">Delete</a>
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -8,9 +8,9 @@ subtitle: 表格

 展示行列数据。

-## 设计师专属 🌟
+## 设计师专属

-还在用 Sketch 手动画表格吗？现在安装 [Kitchen Sketch](https://kitchen.alipay.com/) 插件，两步就可以自动生成 Ant Design 表格组件啦！
+安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com/)，两步就可以自动生成 Ant Design 表格组件。

 ## 何时使用

--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@ -33,7 +33,7 @@
    background: @table-header-bg;
    transition: background .3s ease;
    text-align: left;
-    color: @heading-color;
+    color: @table-header-color;
    font-weight: 500;
    border-bottom: @border-width-base @border-style-base @border-color-split;

--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@ -108,7 +108,7 @@ export default class Tabs extends React.Component<TabsProps, any> {

    warning(
      !(type.indexOf('card') >= 0 && (size === 'small' || size === 'large')),
-      'Tabs[type=card|editable-card] doesn\'t have small or large size, it\'s by designed.',
+      'Tabs[type=card|editable-card] doesn\'t have small or large size, it\'s by design.',
    );
    const cls = classNames(className, {
      [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@ -198,20 +198,26 @@
    }
  }

-  &-large &-nav-container {
-    font-size: @tabs-title-font-size-lg;
+  &-large {
+    > .@{tab-prefix-cls}-bar {
+        .@{tab-prefix-cls}-nav-container {
+          font-size: @tabs-title-font-size-lg;
+        }
+        .@{tab-prefix-cls}-tab {
+          padding: 16px;
+        }
+    }
  }

-  &-large &-tab {
-    padding: 16px;
-  }
-
-  &-small &-nav-container {
-    font-size: @tabs-title-font-size-sm;
-  }
-
-  &-small &-tab {
-    padding: 8px 16px;
+  &-small {
+    > .@{tab-prefix-cls}-bar {
+        .@{tab-prefix-cls}-nav-container {
+          font-size: @tabs-title-font-size-sm;
+        }
+        .@{tab-prefix-cls}-tab {
+          padding: 8px 16px;
+        }
+    }
  }

  &:not(&-vertical) {
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@ -296,6 +296,9 @@
  }

  &-picture-card {
+    // https://github.com/ant-design/ant-design/issues/11183
+    float: left;
+
    &.@{upload-prefix-cls}-list:after {
      display: none;
    }
--- a/docs/spec/colors.zh-CN.md
+++ b/docs/spec/colors.zh-CN.md
@ -10,10 +10,9 @@ Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品

 ---

-## 设计师专属 🌟
-
-安装 [Kitchen Sketch](https://kitchen.alipay.com) 插件，不但可以使用 Ant Design 官方色板库，还可以管理自己的专属色板哦！
+## 设计师专属

+安装 [Kitchen Sketch 插件  💎](https://kitchen.alipay.com)，不但可以使用 Ant Design 官方色板库，还可以管理自己的专属色板。

 ## 色彩模型

--- a/docs/spec/download.en-US.md
+++ b/docs/spec/download.en-US.md
@ -48,7 +48,10 @@ Please find below some of the design resources and tools about Ant Design that w
      <img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ATYZYtJhchhONKObIwXT.png">
    </div>
    <div class="resource-card-content">
-      <span class="resource-card-title">Kitchen</span>
+      <span class="resource-card-title">
+        Kitchen
+        <span class="resource-card-hot-badge">HOT</span>
+      </span>
      <span class="resource-card-description">A Sketch plugin with a collection of great tools</span>
    </div>
  </a>
--- a/docs/spec/download.zh-CN.md
+++ b/docs/spec/download.zh-CN.md
@ -48,7 +48,10 @@ title: 设计资源
      <img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ATYZYtJhchhONKObIwXT.png">
    </div>
    <div class="resource-card-content">
-      <span class="resource-card-title">Kitchen</span>
+      <span class="resource-card-title">
+        Kitchen
+        <span class="resource-card-hot-badge">HOT</span>
+      </span>
      <span class="resource-card-description">Sketch 工具集</span>
    </div>
  </a>
--- a/docs/spec/icon.zh-CN.md
+++ b/docs/spec/icon.zh-CN.md
@ -11,6 +11,10 @@ title: 图标

 ---

+## 设计师专属
+
+安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。
+
 ## 系统图标

 <img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png">
--- a/docs/spec/work-with-us.zh-CN.md
+++ b/docs/spec/work-with-us.zh-CN.md
@ -25,8 +25,8 @@ title: 加入我们
 - 岗位职责：
  - 参与金融云、数据服务、人工智能以及金融核心等业务领域的设计工作；
  - 参与 Ant Design 的打磨，将其建设成全球卓越的设计体系。
- One More Thing：
-  - 你们总是为世界带去美好，但总是忘却你们也需要美好。我们正在努力打造[Kitchen](https://kitchen.alipay.com/)、[语雀画板](https://yuque.com/)等专属设计师的产品，让设计真正变成财富。期待志同道合的你，一道给设计行业带来「微小而美好的改变」。
+- One More Thing ❤️ ：
+  - 你们总是为世界带去美好，但总是忘却你们也需要美好。我们正在努力打造 [🍳 Kitchen：一款为设计师提效的 Sketch 工具集](https://kitchen.alipay.com/)、[语雀画板](https://yuque.com/) 等专属设计师的产品，让设计真正变成财富。期待志同道合的你，一道给设计行业带来「微小而美好的改变」。

 ## 前端工程师

--- a/site/theme/static/resource.less
+++ b/site/theme/static/resource.less
@ -64,6 +64,17 @@
  margin-bottom: 6px;
 }

+.resource-card-hot-badge {
+  background: #f50;
+  border-radius: 2px;
+  padding: 0 3px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 20px;
+  margin-left: 2px;
+  vertical-align: top;
+}
+
 .resource-card-description {
  display: block;
  color: #697b8c;
--- a/site/theme/template/Home/Page3.jsx
+++ b/site/theme/template/Home/Page3.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col } from 'antd';
+import { Row, Col, Tag } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 import { Link } from 'bisheng/router';
@ -25,6 +25,7 @@ const page3Data = [
    content: <FormattedMessage id="app.home.tool-kitchen-content" />,
    img: 'https://gw.alipayobjects.com/zos/rmsportal/vUxYuDdsbBBcMDxSGmwc.svg',
    link: 'http://kitchen.alipay.com/',
+    hot: true,
  },
 ];

@ -41,6 +42,7 @@ const svgBg = [
  <rect id="Rectangle-14" stroke="#CED4D9" transform="translate(111.673081, 158.673081) rotate(30.000000) translate(-111.673081, -158.673081) " x="107.288047" y="254.288047" width="8.77006914" height="8.77006914" rx="1" />,
 ];
 const svgChildren = svgBgToParallax(svgBg);
+
 export default function Page3({ locale }) {
  const isZhCN = locale === 'zh-CN';
  const children = page3Data.map((item, i) => {
@ -49,7 +51,17 @@ export default function Page3({ locale }) {
        <img src={item.img} alt="icon" />
      </div>,
      <div className="page3-text-wrapper" key="a">
-        <h3>{item.title}</h3>
+        <h3>
+          {item.title}
+          {item.hot ? (
+            <Tag
+              style={{ marginLeft: 8, position: 'relative', top: -3, height: 18, lineHeight: '16px', padding: '0 2px' }}
+              color="#f50"
+            >
+              HOT
+            </Tag>
+          ) : null}
+        </h3>
        <p>{item.content}</p>
      </div>,
    ];