Merge pull request #19103 from ant-design/merge-to-feature

chore: merge master to feature
2024-11-26 04:00:13 +08:00 · 2019-10-06 12:09:59 +08:00 · 2019-10-06 12:09:59 +08:00 · 391aab44e8
commit 391aab44e8
parent 71b53b7175 c4283e4fff
24 changed files with 185 additions and 69 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -70,6 +70,7 @@ const eslintrc = {
    'import/no-cycle': 0,
    'react/no-find-dom-node': 0,
    'no-underscore-dangle': 0,
+    'react/sort-comp': 0,
    // label-has-for has been deprecated
    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
    'jsx-a11y/label-has-for': 0,
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,12 @@ timeline: true

 ---

+## 3.23.6
+
+`2019-10-05`
+
+- 🐞 Fix Typography `ref` warning of React. [#19074](https://github.com/ant-design/ant-design/pull/19074)
+
 ## 3.23.5

 `2019-09-29`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,12 @@ timeline: true

 ---

+## 3.23.6
+
+`2019-10-05`
+
+- 🐞 修复 Typography 提示获取不到 `ref` 的错误信息。[#19074](https://github.com/ant-design/ant-design/pull/19074)
+
 ## 3.23.5

 `2019-09-29`
--- a/components/_util/ref.ts
+++ b/components/_util/ref.ts
@ -0,0 +1,17 @@
+import React from 'react';
+
+export function fillRef<T>(ref: React.Ref<T>, node: T) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (typeof ref === 'object' && ref && 'current' in ref) {
+    (ref as any).current = node;
+  }
+}
+
+export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
+  return (node: T) => {
+    refs.forEach(ref => {
+      fillRef(ref, node);
+    });
+  };
+}
--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@ -206,6 +206,7 @@ describe('Button', () => {
  it('should merge text if children using variable', () => {
    const wrapper = mount(
      <Button>
+        {/* eslint-disable-next-line react/jsx-curly-brace-presence */}
        This {'is'} a test {1}
      </Button>,
    );
--- a/components/collapse/tests/snapshots/demo.test.js.snap
+++ b/components/collapse/tests/snapshots/demo.test.js.snap
@ -638,7 +638,9 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
    </div>
  </div>
  <br />
-  Expand Icon Position: 
+  <span>
+    Expand Icon Position: 
+  </span>
  <div
    class="ant-select ant-select-enabled"
  >
--- a/components/collapse/demo/extra.md
+++ b/components/collapse/demo/extra.md
@ -68,7 +68,7 @@ class Demo extends React.Component {
          </Panel>
        </Collapse>
        <br />
-        Expand Icon Position:{' '}
+        <span>Expand Icon Position: </span>
        <Select value={expandIconPosition} onChange={this.onPositionChange}>
          <Option value="left">left</Option>
          <Option value="right">right</Option>
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@ -104,7 +104,7 @@ class App extends React.Component {
          <p style={pStyle}>Personal</p>
          <Row>
            <Col span={12}>
-              <DescriptionItem title="Full Name" content="Lily" />{' '}
+              <DescriptionItem title="Full Name" content="Lily" />
            </Col>
            <Col span={12}>
              <DescriptionItem title="Account" content="AntDesign@example.com" />
--- a/components/form/tests/message.test.js
+++ b/components/form/tests/message.test.js
@ -39,6 +39,7 @@ describe('Form', () => {
        pattern: /^$/,
        message: (
          <span>
+            {/* eslint-disable-next-line react/jsx-curly-brace-presence */}
            Account does not exist,{' '}
            <a rel="noopener noreferrer" href="https://www.alipay.com/" target="_blank">
              Forgot account?
--- a/components/result/tests/snapshots/demo.test.js.snap
+++ b/components/result/tests/snapshots/demo.test.js.snap
@ -1159,7 +1159,7 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
            />
          </svg>
        </i>
-         Your account has been frozen 
+         Your account has been frozen
        <a>
          Thaw immediately &gt;
        </a>
--- a/components/result/demo/error.md
+++ b/components/result/demo/error.md
@ -42,7 +42,7 @@ ReactDOM.render(
        </Text>
      </Paragraph>
      <Paragraph>
-        <Icon style={{ color: 'red' }} type="close-circle" /> Your account has been frozen{' '}
+        <Icon style={{ color: 'red' }} type="close-circle" /> Your account has been frozen 
        <a>Thaw immediately &gt;</a>
      </Paragraph>
      <Paragraph>
--- a/components/select/demo/option-label-prop.md
+++ b/components/select/demo/option-label-prop.md
@ -33,25 +33,25 @@ ReactDOM.render(
  >
    <Option value="china" label="China">
      <span role="img" aria-label="China">
-        🇨🇳{' '}
+        🇨🇳
      </span>
      China (中国)
    </Option>
    <Option value="usa" label="USA">
      <span role="img" aria-label="USA">
-        🇺🇸{' '}
+        🇺🇸
      </span>
      USA (美国)
    </Option>
    <Option value="japan" label="Japan">
      <span role="img" aria-label="Japan">
-        🇯🇵{' '}
+        🇯🇵
      </span>
      Japan (日本)
    </Option>
    <Option value="korea" label="Korea">
      <span role="img" aria-label="Korea">
-        🇰🇷{' '}
+        🇰🇷
      </span>
      Korea (韩国)
    </Option>
@ -59,3 +59,9 @@ ReactDOM.render(
  mountNode,
 );
 ```
+
+````css
+span[role="img"] {
+  margin-right: 6px;
+}
+````
--- a/components/table/tests/Table.test.js
+++ b/components/table/tests/Table.test.js
@ -37,6 +37,7 @@ describe('Table', () => {
          <Column title="Last Name" dataIndex="lastName" key="lastName" />
        </ColumnGroup>
        <Column title="Age" dataIndex="age" key="age" />
+        {/* eslint-disable-next-line react/jsx-curly-brace-presence */}
        {'invalid child'}
      </Table>,
    );
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
 import toArray from 'rc-util/lib/Children/toArray';
+import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import copy from 'copy-to-clipboard';
 import omit from 'omit.js';
 import ResizeObserver from 'rc-resize-observer';
@ -297,7 +298,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
    );

    const { content, text, ellipsis } = measure(
-      this.content,
+      findDOMNode(this.content),
      rows,
      children,
      this.renderOperations(true),
@ -459,7 +460,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
                  WebkitLineClamp: cssLineClamp ? rows : null,
                }}
                component={component}
-                setContentRef={this.setContentRef}
+                ref={this.setContentRef}
                aria-label={ariaLabel}
                {...textProps}
              >
--- a/components/typography/Typography.tsx
+++ b/components/typography/Typography.tsx
@ -1,6 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import warning from '../_util/warning';
+import { composeRef } from '../_util/ref';

 export interface TypographyProps {
  id?: string;
@ -13,35 +15,68 @@ export interface TypographyProps {

 interface InternalTypographyProps extends TypographyProps {
  component?: string;
+  /** @deprecated Use `ref` directly if using React 16 */
  setContentRef?: (node: HTMLElement) => void;
 }

-const Typography: React.SFC<InternalTypographyProps> = ({
-  prefixCls: customizePrefixCls,
-  component = 'article',
-  className,
-  'aria-label': ariaLabel,
-  setContentRef,
-  children,
-  ...restProps
-}) => (
-  <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
-      const Component = component as any;
-      const prefixCls = getPrefixCls('typography', customizePrefixCls);
+const Typography: React.RefForwardingComponent<{}, InternalTypographyProps> = (
+  {
+    prefixCls: customizePrefixCls,
+    component = 'article',
+    className,
+    'aria-label': ariaLabel,
+    setContentRef,
+    children,
+    ...restProps
+  },
+  ref,
+) => {
+  let mergedRef = ref;

-      return (
-        <Component
-          className={classNames(prefixCls, className)}
-          aria-label={ariaLabel}
-          ref={setContentRef}
-          {...restProps}
-        >
-          {children}
-        </Component>
-      );
-    }}
-  </ConfigConsumer>
-);
+  if (setContentRef) {
+    warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
+    mergedRef = composeRef(ref, setContentRef);
+  }

-export default Typography;
+  return (
+    <ConfigConsumer>
+      {({ getPrefixCls }: ConfigConsumerProps) => {
+        const Component = component as any;
+        const prefixCls = getPrefixCls('typography', customizePrefixCls);
+
+        return (
+          <Component
+            className={classNames(prefixCls, className)}
+            aria-label={ariaLabel}
+            ref={mergedRef}
+            {...restProps}
+          >
+            {children}
+          </Component>
+        );
+      }}
+    </ConfigConsumer>
+  );
+};
+
+let RefTypography;
+
+if (React.forwardRef) {
+  RefTypography = React.forwardRef(Typography);
+  RefTypography.displayName = 'Typography';
+} else {
+  class TypographyWrapper extends React.Component<TypographyProps, {}> {
+    state = {};
+
+    render() {
+      return <Typography {...this.props} />;
+    }
+  }
+
+  RefTypography = TypographyWrapper;
+}
+
+// es default export should use const instead of let
+const ExportTypography = (RefTypography as unknown) as React.FC<TypographyProps>;
+
+export default ExportTypography;
--- a/components/typography/tests/snapshots/demo.test.js.snap
+++ b/components/typography/tests/snapshots/demo.test.js.snap
@ -17,7 +17,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
  <div
    class="ant-typography"
  >
-    After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to 
+    After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
    <span
      class="ant-typography"
    >
@ -131,7 +131,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
        Sketch
      </code>
    </span>
-     和 
+     和
    <span
      class="ant-typography"
    >
@ -273,7 +273,7 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
        </del>
      </code>
    </span>
-     case.Bnt Design, a design language for background applications, is refined by Ant UED Team.Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
+     case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
  </div>
 </div>
 `;
@ -397,7 +397,7 @@ exports[`renders ./components/typography/demo/paragraph-debug.md correctly 1`] =
  <div
    class="ant-typography"
  >
-    After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to 
+    After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
    <span
      class="ant-typography"
    >
@ -508,7 +508,7 @@ exports[`renders ./components/typography/demo/paragraph-debug.md correctly 1`] =
        Sketch
      </code>
    </span>
-     和 
+     和
    <span
      class="ant-typography"
    >
--- a/components/typography/tests/index.test.js
+++ b/components/typography/tests/index.test.js
@ -6,6 +6,7 @@ import Title from '../Title';
 import Paragraph from '../Paragraph';
 import Base from '../Base'; // eslint-disable-line import/no-named-as-default
 import mountTest from '../../../tests/shared/mountTest';
+import Typography from '../Typography';

 jest.mock('copy-to-clipboard');

@ -94,10 +95,13 @@ describe('Typography', () => {
      });

      it('connect children', () => {
+        const bamboo = 'Bamboo';
+        const is = ' is ';
+
        const wrapper = mount(
          <Base ellipsis component="p" editable>
-            {'Bamboo'}
-            {' is '}
+            {bamboo}
+            {is}
            <code>Little</code>
            <code>Light</code>
          </Base>,
@ -237,4 +241,13 @@ describe('Typography', () => {
      });
    });
  });
+
+  it('warning if use setContentRef', () => {
+    function refFunc() {}
+    mount(<Typography setContentRef={refFunc} />);
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
+    );
+  });
 });
--- a/components/typography/demo/basic.md
+++ b/components/typography/demo/basic.md
@ -28,7 +28,7 @@ ReactDOM.render(
    </Paragraph>
    <Paragraph>
      After massive project practice and summaries, Ant Design, a design language for background
-      applications, is refined by Ant UED Team, which aims to{' '}
+      applications, is refined by Ant UED Team, which aims to 
      <Text strong>
        uniform the user interface specs for internal background projects, lower the unnecessary
        cost of design differences and implementation and liberate the resources of design and
@ -71,7 +71,7 @@ ReactDOM.render(
    </Paragraph>
    <Title level={2}>设计资源</Title>
    <Paragraph>
-      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和{' '}
+      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和
      <Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
    </Paragraph>

--- a/components/typography/demo/ellipsis-debug.md
+++ b/components/typography/demo/ellipsis-debug.md
@ -45,26 +45,18 @@ class Demo extends React.Component {
        <Switch onChange={val => this.setState({ editable: val })} />
        <Switch onChange={val => this.setState({ expandable: val })} />
        <Slider value={rows} min={1} max={10} onChange={this.onChange} />
-
        {longText ? (
          <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
            Ant Design, a design language for background applications, is refined by Ant UED Team.
-            This is a nest sample{' '}
-            <Text code strong delete>
-              Test
-            </Text>{' '}
-            case.
-            {
-              'Bnt Design, a design language for background applications, is refined by Ant UED Team.'
-            }
+            This is a nest sample <Text code strong delete>Test</Text> case.
+            Bnt Design, a design language for background applications, is refined by Ant UED Team.
            Cnt Design, a design language for background applications, is refined by Ant UED Team.
            Dnt Design, a design language for background applications, is refined by Ant UED Team.
            Ent Design, a design language for background applications, is refined by Ant UED Team.
          </Paragraph>
        ) : (
          <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
-            {'Hello'}
-            {'World'}
+            Hello World
          </Paragraph>
        )}
      </div>
--- a/components/typography/demo/paragraph-debug.md
+++ b/components/typography/demo/paragraph-debug.md
@ -29,7 +29,7 @@ ReactDOM.render(
    </Paragraph>
    <Paragraph>
      After massive project practice and summaries, Ant Design, a design language for background
-      applications, is refined by Ant UED Team, which aims to{' '}
+      applications, is refined by Ant UED Team, which aims to 
      <Text strong>
        uniform the user interface specs for internal background projects, lower the unnecessary
        cost of design differences and implementation and liberate the resources of design and
@ -70,7 +70,7 @@ ReactDOM.render(
    </Paragraph>
    <Title level={2}>设计资源</Title>
    <Paragraph>
-      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和{' '}
+      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和
      <Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
    </Paragraph>

--- a/components/upload/tests/snapshots/uploadlist.test.js.snap
+++ b/components/upload/tests/snapshots/uploadlist.test.js.snap
@ -1342,7 +1342,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
    class="ant-upload-list ant-upload-list-picture"
  >
    <div
-      class="ant-upload-list-item ant-upload-list-item-uploading"
+      class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
    >
      <div
        class="ant-upload-list-item-info"
@ -1361,7 +1361,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
            />
          </a>
          <a
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-0"
            href="https://cdn.xxx.com/aaa"
            rel="noopener noreferrer"
            target="_blank"
@ -1369,6 +1369,9 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
          >
            image
          </a>
+          <span
+            class="ant-upload-list-item-card-actions picture"
+          />
        </span>
      </div>
      <div
@ -1376,7 +1379,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
      />
    </div>
    <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
    >
      <div
        class="ant-upload-list-item-info"
@ -1395,7 +1398,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
            />
          </a>
          <a
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
            href="https://cdn.xxx.com/aaa"
            rel="noopener noreferrer"
            target="_blank"
@ -1403,6 +1406,35 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
          >
            image
          </a>
+          <span
+            class="ant-upload-list-item-card-actions picture"
+          >
+            <a
+              title="Download file"
+            >
+              <i
+                aria-label="icon: download"
+                class="anticon anticon-download"
+                tabindex="-1"
+                title="Download file"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="download"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                  />
+                </svg>
+              </i>
+            </a>
+          </span>
        </span>
      </div>
    </div>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "3.23.5",
+  "version": "3.23.6",
  "description": "An enterprise-class UI design language and React components implementation",
  "keywords": [
    "ant",
@ -196,11 +196,11 @@
    "jsdom": "^15.1.1",
    "jsonml.js": "^0.1.0",
    "logrocket": "^1.0.0",
-    "logrocket-react": "^3.0.0",
+    "logrocket-react": "^4.0.0",
    "lz-string": "^1.4.4",
    "mockdate": "^2.0.2",
    "node-fetch": "^2.6.0",
-    "preact": "^8.4.2",
+    "preact": "^10.0.0",
    "preact-compat": "^3.18.5",
    "prettier": "^1.17.1",
    "pretty-quick": "^1.11.0",
--- a/site/theme/static/template.html
+++ b/site/theme/static/template.html
@ -4,7 +4,7 @@
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{% if title %}{{ title }}{% else %}{% endif %}</title>
+    <title>{% if title %}{{ title | safe }}{% else %}{% endif %}</title>
    {% if meta %}{{ meta | safe }}{% endif %}
    <link
      rel="icon"
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.jsx
@ -401,7 +401,9 @@ class Footer extends React.Component {
        columns={this.getColumns()}
        bottom={
          <>
-            Made with <span style={{ color: '#fff' }}>❤</span> by{' '}
+            Made with <span style={{ color: '#fff' }}>❤</span> by
+            {/* eslint-disable-next-line react/jsx-curly-brace-presence */}
+            {' '}
            <a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com">
              <FormattedMessage id="app.footer.company" />
            </a>