Merge pull request #27421 from shaodahong/merge-to-feature

chore: merge master to feature
2024-11-29 21:59:41 +08:00 · 2020-10-28 17:09:39 +08:00 · 2020-10-28 17:09:39 +08:00 · 4ec9e23b3c
commit 4ec9e23b3c
parent 7c0e88839c e9163b3eae
9 changed files with 90 additions and 31 deletions
--- a/Dockerfile.ui-test
+++ b/Dockerfile.ui-test
@ -2,6 +2,5 @@ FROM buildkite/puppeteer:v3.0.4
 RUN mkdir /app
 WORKDIR /app
 COPY package.json ./
-RUN npm install
 ENV  PATH="${PATH}:/app/node_modules/.bin"
 COPY . .
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@ -1,7 +1,11 @@
 name: Ant Design

-trigger: none
+trigger:
+  branches:
+    exclude:
+      - gh-pages

+# https://developercommunity.visualstudio.com/comments/949241/view.html
 pr:
  autoCancel: true
  branches:
@ -13,6 +17,7 @@ pool:

 stages:
  - stage: site
+    condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))
    jobs:
      - job: Build_Site
        steps:
@ -59,11 +64,21 @@ stages:
          - script: |
              node ./scripts/azure-github-comment.js "[<img width="534" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://dev.azure.com/ant-design/ant-design/_build/results?buildId=$(Build.BuildId))"
            displayName: 'Comment on github'
+
  - stage: ui
+    variables:
+      ${{ if startsWith(variables['Build.SourceBranch'], 'refs/heads/') }}:
+        branchName: $[ replace(variables['Build.SourceBranch'], 'refs/heads/', '') ]
+        commitId: $(Build.SourceVersion)
+      ${{ if startsWith(variables['Build.SourceBranch'], 'refs/pull/') }}:
+        branchName: $[ replace(variables['Build.SourceBranch'], 'refs/', '') ]
+        commitId: $(System.PullRequest.SourceCommitId)
    dependsOn: []
    jobs:
      - job: UI_Test
        steps:
+          - script: |
+              echo $(commitId)
          - checkout: self
            displayName: 'Checkout'
            clean: true
@ -76,5 +91,5 @@ stages:
            displayName: 'Install modules'
          - script: npm run test-image
            displayName: 'UI Test'
-          - script: npm run argos -- --token $ARGOS_TOKEN --branch $(Build.SourceBranch) --commit $(Build.SourceVersion)
+          - script: npm run argos -- --token $ARGOS_TOKEN --branch $(branchName) --commit $(commitId)
            displayName: 'Upload to argos-ci'
--- a/components/steps/style/progress-dot.less
+++ b/components/steps/style/progress-dot.less
@ -47,6 +47,9 @@
        }
      }
    }
+    &-content {
+      width: @steps-desciption-max-width;
+    }
    &-process .@{steps-prefix-cls}-item-icon {
      position: relative;
      top: -1px;
@ -73,6 +76,9 @@
  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
    left: 0;
  }
+  .@{steps-prefix-cls}-item-content {
+    width: inherit;
+  }
  .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
    left: -2px;
  }
--- a/components/table/tests/Table.pagination.test.js
+++ b/components/table/tests/Table.pagination.test.js
@ -39,7 +39,7 @@ describe('Table.pagination', () => {

  it('not crash when pageSize is undefined', () => {
    expect(() => {
-      mount(createTable({ pagination: { pageSIze: undefined } }));
+      mount(createTable({ pagination: { pageSize: undefined } }));
    }).not.toThrow();
  });

@ -285,7 +285,7 @@ describe('Table.pagination', () => {
    expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length);
  });

-  it('select by checkbox to trigger stopPropagation', () => {
+  it('onShowSizeChange should trigger once', () => {
    jest.useFakeTimers();
    const onShowSizeChange = jest.fn();
    const onChange = jest.fn();
@ -304,7 +304,8 @@ describe('Table.pagination', () => {
    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    expect(wrapper.find('.ant-select-item-option').length).toBe(4);
    dropdownWrapper.find('.ant-select-item-option').at(3).simulate('click');
-    expect(onShowSizeChange).toHaveBeenCalled();
+    expect(onShowSizeChange).toHaveBeenCalledTimes(1);
+    expect(onShowSizeChange).toHaveBeenLastCalledWith(1, 100);
    expect(onChange).toHaveBeenCalled();
    jest.useRealTimers();
  });
@ -409,4 +410,36 @@ describe('Table.pagination', () => {
    });
    expect(wrapper.find('.ant-pagination')).toHaveLength(2);
  });
+
+  it('showTotal should hide when removed', () => {
+    const Demo = () => {
+      const [p, setP] = React.useState({
+        showTotal: t => `>${t}<`,
+        total: 200,
+        current: 1,
+        pageSize: 10,
+      });
+
+      return (
+        <Table
+          data={[]}
+          columns={[]}
+          pagination={p}
+          onChange={pg => {
+            setP({
+              ...pg,
+              total: 23,
+            });
+          }}
+        />
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+    expect(wrapper.find('.ant-pagination-total-text').text()).toEqual('>200<');
+
+    // Should hide
+    wrapper.find('.ant-pagination-item-2').simulate('click');
+    expect(wrapper.find('.ant-pagination-total-text')).toHaveLength(0);
+  });
 });
--- a/components/table/hooks/usePagination.ts
+++ b/components/table/hooks/usePagination.ts
@ -50,7 +50,10 @@ export default function usePagination(
  const { total: paginationTotal = 0, ...paginationObj } =
    pagination && typeof pagination === 'object' ? pagination : {};

-  const [innerPagination, setInnerPagination] = useState<TablePaginationConfig>(() => {
+  const [innerPagination, setInnerPagination] = useState<{
+    current?: number;
+    pageSize?: number;
+  }>(() => {
    return {
      current: 'defaultCurrent' in paginationObj ? paginationObj.defaultCurrent : 1,
      pageSize:
@ -77,7 +80,6 @@ export default function usePagination(

  const refreshPagination = (current: number = 1, pageSize?: number) => {
    setInnerPagination({
-      ...mergedPagination,
      current,
      pageSize: pageSize || mergedPagination.pageSize,
    });
@ -87,7 +89,6 @@ export default function usePagination(
    const paginationPageSize = mergedPagination?.pageSize;
    if (pageSize && pageSize !== paginationPageSize) {
      current = 1;
-      if (pagination && pagination.onShowSizeChange) pagination.onShowSizeChange(current, pageSize);
    }
    if (pagination && pagination.onChange) pagination.onChange(current, pageSize);

--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -24,14 +24,14 @@ Ant Design has 3 types of Tabs for different situations.
 | --- | --- | --- | --- | --- |
 | activeKey | Current TabPane's key | string | - |  |
 | addIcon | Customize add icon | ReactNode | - | 4.4.0 |
-| animated | Whether to change tabs with animation. Only works while \`tabPosition="top" | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` |  |
+| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  |
 | centered | Centers tabs | boolean | false | 4.4.0 |
 | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - |  |
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false |  |
 | keyboard | Whether to turn on keyboard navigation | boolean | true |  |
 | renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
 | size | Preset tab bar size | `large` \| `default` \| `small` | `default` |  |
-| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - |  |
+| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
 | tabBarGutter | The gap between tabs | number | - |  |
 | tabBarStyle | Tab bar style object | object | - |  |
 | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |  |
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -23,26 +23,26 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。

 ### Tabs

-| 参数 | 说明 | 类型 | 默认值 | 版本 |  |
-| --- | --- | --- | --- | --- | --- |
-| activeKey | 当前激活 tab 面板的 key | string | - |  |  |
-| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |  |
-| animated | 是否使用动画切换 Tabs，在 \`tabPosition="top" | "bottom"\` 时有效 | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` |  |
-| centered | 标签居中展示 | boolean | false | 4.4.0 |  |
-| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |  |
-| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |  |
-| keyboard | 开启键盘切换功能 | boolean | true |  |  |
-| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |  |
-| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` |  |  |
-| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - |  |  |
-| tabBarGutter | tabs 之间的间隙 | number | - |  |  |
-| tabBarStyle | tab bar 的样式对象 | object | - |  |  |
-| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |  |
-| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |  |
-| onChange | 切换面板的回调 | function(activeKey) {} | - |  |  |
-| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - |  |  |
-| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - |  |  |
-| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |  |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| activeKey | 当前激活 tab 面板的 key | string | - |  |
+| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
+| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  |
+| centered | 标签居中展示 | boolean | false | 4.4.0 |
+| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |
+| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
+| keyboard | 开启键盘切换功能 | boolean | true |  |
+| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
+| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` |  |
+| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
+| tabBarGutter | tabs 之间的间隙 | number | - |  |
+| tabBarStyle | tab bar 的样式对象 | object | - |  |
+| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |
+| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |
+| onChange | 切换面板的回调 | function(activeKey) {} | - |  |
+| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - |  |
+| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - |  |
+| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |

 ### Tabs.TabPane

--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -5,6 +5,7 @@ services:
      context: .
      dockerfile: Dockerfile.ui-test
    volumes:
+      - './node_modules:/app/node_modules'
      - './components:/app/components'
      - './tests:/app/tests'
      - './jest-stare:/app/jest-stare'
--- a/tests/shared/imageTest.ts
+++ b/tests/shared/imageTest.ts
@ -5,6 +5,8 @@ import puppeteer, { Browser, Page } from 'puppeteer';
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import ReactDOMServer from 'react-dom/server';
 import glob from 'glob';
+import MockDate from 'mockdate';
+import moment from 'moment';

 const toMatchImageSnapshot = configureToMatchImageSnapshot({
  customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
@ -20,6 +22,7 @@ export default function imageTest(component: React.ReactElement) {
    let page: Page;

    beforeAll(async () => {
+      MockDate.set(moment('2016-11-22').valueOf());
      browser = await puppeteer.launch({
        args: [
          // Required for Docker version of Puppeteer
@ -37,6 +40,7 @@ export default function imageTest(component: React.ReactElement) {

    afterAll(() => {
      browser.close();
+      MockDate.reset();
    });

    it('component image screenshot should correct', async () => {