style: new design table header action (#30406)

* docs(:sparkles:): release 4.15.6 (#30562) * fix(Collapse): end motion when set activeKey while hiding (#30555) * docs: update changelog * fix: Typography ellipsis flush when contain suffix (#30582) * fix: Typography ellipsis flush when contain suffix * update snapshot * fix Text default rows * fix Text default rows * style: refactor Collapse arrow style (#30586) close #30585 * fix: nested Table margin inside table with fixed columns (#30587) close #30564 * fix: useNotification className should work (#30588) close #30576 * fix: Space missing TS def (#30590) * docs: Update Transfer asnyc table demo close #30350 * fix: Anchor should trigger onChange when have getCurrentAnchor (#30601) * fix: Anchor should trigger onChange when have getCurrentAnchor close #30584 * test: add test case * chore: Thanks @yesmeck & @ycjcl868 (#30618) * chore(config-provider): support dynamic prefixCls (#30625) * feat: improve Table filter and sorter position * fix: edge cases of th border * fix lint * style: apply new design * fix css detail * fix stylelint * fix css error * style: sorter icon hover color * fix test cases * update snapshot * fix th padding * fix calc Co-authored-by: JuFeng Zhang <zjffun@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Kermit <kermitlx@outlook.com> Co-authored-by: chenshuai2144 <qixian.cs@outlook.com>
ant-design · May 24, 2021 · a09bf5f · a09bf5f
1 parent 368dab2
commit a09bf5f
Show file tree

Hide file tree

Showing 33 changed files with 3,351 additions and 4,020 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -15,6 +15,16 @@ timeline: true
 
 ---
 
+## 4.15.6
+
+`2021-05-18`
+
+- 🐞 Upload will ignore `accept` if it's invalidate MIME type to follow native behavior. [#30549](https://github.com/ant-design/ant-design/pull/30549)
+- 💄 Remove reset style of `th` `text-align`. [#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa)
+- 🌐 Locale
+  - 🇮🇳 Improve hi_IN locale. [#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh)
+  - 🇧🇷 Improve pt-BR locale. [#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs)
+
 ## 4.15.5
 
 `2021-05-10`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -15,6 +15,16 @@ timeline: true
 
 ---
 
+## 4.15.6
+
+`2021-05-18`
+
+- 🐞 Upload `accept` 将无视无效的 MIME 类型，以更贴近原生行为。[#30549](https://github.com/ant-design/ant-design/pull/30549)
+- 💄 移除全局样式中对 `th` 的 `text-align` 属性的重置。[#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa)
+- 🌐 国际化
+  - 🇮🇳 补充印地语国际化文案。[#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh)
+  - 🇧🇷 补充葡萄牙语（巴西）国际化文案。[#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs)
+
 ## 4.15.5
 
 `2021-05-10`

diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx
@@ -1,11 +1,12 @@
 import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
+import { MotionEvent } from 'rc-motion/lib/interface';
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
-const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
-  (event as TransitionEvent).propertyName === 'height';
+const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
+  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
 
 const collapseMotion: CSSMotionProps = {
   motionName: 'ant-motion-collapse',

diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
@@ -163,12 +163,6 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
   }
 
   getCurrentAnchor(offsetTop = 0, bounds = 5): string {
-    const { getCurrentAnchor } = this.props;
-
-    if (typeof getCurrentAnchor === 'function') {
-      return getCurrentAnchor();
-    }
-
     const linkSections: Array<Section> = [];
     const container = this.getContainer();
     this.links.forEach(link => {
@@ -229,14 +223,15 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
 
   setCurrentActiveLink = (link: string) => {
     const { activeLink } = this.state;
-    const { onChange } = this.props;
-
-    if (activeLink !== link) {
-      this.setState({
-        activeLink: link,
-      });
-      onChange?.(link);
+    const { onChange, getCurrentAnchor } = this.props;
+    if (activeLink === link) {
+      return;
     }
+    // https://github.com/ant-design/ant-design/issues/30584
+    this.setState({
+      activeLink: typeof getCurrentAnchor === 'function' ? getCurrentAnchor() : link,
+    });
+    onChange?.(link);
   };
 
   handleScroll = () => {

diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx
@@ -359,6 +359,23 @@ describe('Anchor Render', () => {
     expect(onChange).toHaveBeenCalledWith(hash2);
   });
 
+  // https://github.com/ant-design/ant-design/issues/30584
+  it('should trigger onChange when have getCurrentAnchor', async () => {
+    const hash1 = getHashUrl();
+    const hash2 = getHashUrl();
+    const onChange = jest.fn();
+    const wrapper = mount<Anchor>(
+      <Anchor onChange={onChange} getCurrentAnchor={() => hash1}>
+        <Link href={`#${hash1}`} title={hash1} />
+        <Link href={`#${hash2}`} title={hash2} />
+      </Anchor>,
+    );
+    expect(onChange).toHaveBeenCalledTimes(1);
+    wrapper.instance().handleScrollTo(hash2);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledWith(hash2);
+  });
+
   it('invalid hash', async () => {
     const wrapper = mount<Anchor>(
       <Anchor>

diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { sleep } from '../../../tests/utils';
 import { resetWarned } from '../../_util/devWarning';
 
@@ -101,4 +102,39 @@ describe('Collapse', () => {
     wrapper.find('.ant-collapse-header').simulate('click');
     expect(wrapper.find('.ant-collapse-item-active').length).toBe(0);
   });
+
+  it('should end motion when set activeKey while hiding', async () => {
+    jest.useFakeTimers();
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
+      setTimeout(cb, 16.66);
+    });
+
+    let setActiveKeyOuter;
+    const Test = () => {
+      const [activeKey, setActiveKey] = React.useState();
+      setActiveKeyOuter = setActiveKey;
+      return (
+        <div hidden>
+          <Collapse activeKey={activeKey}>
+            <Collapse.Panel header="header" key="1">
+              content
+            </Collapse.Panel>
+          </Collapse>
+        </div>
+      );
+    };
+
+    const wrapper = mount(<Test />);
+
+    await act(async () => {
+      setActiveKeyOuter('1');
+      await Promise.resolve();
+      jest.runAllTimers();
+    });
+
+    expect(wrapper.render().find('.ant-motion-collapse').length).toBe(0);
+
+    window.requestAnimationFrame.mockRestore();
+    jest.useRealTimers();
+  });
 });
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
@@ -24,25 +24,17 @@
     > .@{collapse-prefix-cls}-header {
       position: relative;
       padding: @collapse-header-padding;
-      padding-left: @collapse-header-padding-extra;
       color: @heading-color;
       line-height: @line-height-base;
       cursor: pointer;
       transition: all 0.3s, visibility 0s;
       .clearfix();
 
       .@{collapse-prefix-cls}-arrow {
-        .iconfont-mixin();
-
-        position: absolute;
-        top: ((@font-size-base * @line-height-base - @font-size-sm) / 2);
-        left: @collapse-header-arrow-left;
         display: inline-block;
-        padding: @collapse-header-padding;
-        padding-right: 0;
-        padding-bottom: 0;
-        padding-left: 0;
+        margin-right: 12px;
         font-size: @font-size-sm;
+        vertical-align: -1px;
 
         & svg {
           transition: transform 0.24s;