fix: Typography `icons` should ignore React.Fragment (#30869)

* feat: fix-text * feat: 优化代码 * chore: add test * chore: 打算重构 test * chore: 重构 test * chore: 重构 test * chore: 重构 test * feat: review * feat: review * feat: add test * feat: add test * fix: test * fix: tsx * fix: 优化 * fix: 优化 * fix: map 当前处理 * fix: getNode function * fix: 优化方法 * fix: ci * fix: aria-label
4 years ago · f288aff9fe
2 changed files with 218 additions and 10 deletions
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@ -93,6 +93,13 @@ function wrapperDecorations(
  return currentContent;
 }

+function getNode(dom: React.ReactNode, defaultNode: React.ReactNode, needDom?: boolean) {
+  if (dom === true || dom === undefined) {
+    return defaultNode;
+  }
+  return dom || (needDom && defaultNode);
+}
+
 interface InternalBlockProps extends BlockProps {
  component: string;
 }
@ -391,23 +398,27 @@ class Base extends React.Component<InternalBlockProps, BaseState> {

    const prefixCls = this.getPrefixCls();

-    const { tooltips } = copyable as CopyConfig;
-    let tooltipNodes = toArray(tooltips) as React.ReactNode[];
-    if (tooltipNodes.length === 0) {
-      tooltipNodes = [this.copyStr, this.copiedStr];
-    }
-    const title = copied ? tooltipNodes[1] : tooltipNodes[0];
-    const ariaLabel = typeof title === 'string' ? title : '';
-    const icons = toArray((copyable as CopyConfig).icon);
+    const { tooltips, icon } = copyable as CopyConfig;
+
+    const tooltipNodes = Array.isArray(tooltips) ? tooltips : [tooltips];
+    const iconNodes = Array.isArray(icon) ? icon : [icon];
+
+    const title = copied
+      ? getNode(tooltipNodes[1], this.copiedStr)
+      : getNode(tooltipNodes[0], this.copyStr);
+    const systemStr = copied ? this.copiedStr : this.copyStr;
+    const ariaLabel = typeof title === 'string' ? title : systemStr;

    return (
-      <Tooltip key="copy" title={tooltips === false ? '' : title}>
+      <Tooltip key="copy" title={title}>
        <TransButton
          className={classNames(`${prefixCls}-copy`, copied && `${prefixCls}-copy-success`)}
          onClick={this.onCopyClick}
          aria-label={ariaLabel}
        >
-          {copied ? icons[1] || <CheckOutlined /> : icons[0] || <CopyOutlined />}
+          {copied
+            ? getNode(iconNodes[1], <CheckOutlined />, true)
+            : getNode(iconNodes[0], <CopyOutlined />, true)}
        </TransButton>
      </Tooltip>
    );
--- a/components/typography/tests/copy.test.tsx
+++ b/components/typography/tests/copy.test.tsx
@ -0,0 +1,197 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { SmileOutlined, LikeOutlined } from '@ant-design/icons';
+
+import Base from '../Base';
+
+describe('Typography copy', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  describe('Base', () => {
+    describe('copyable', () => {
+      function copyTest({
+        name,
+        icon,
+        tooltips,
+        iconClassNames = [],
+        iconTexts = [],
+        tooltipTexts = [],
+        tooltipLength,
+      }: {
+        name: string;
+        icon?: boolean | React.ReactNode;
+        tooltips?: boolean | React.ReactNode;
+        iconClassNames?: string[];
+        iconTexts?: string[];
+        tooltipTexts?: string[];
+        tooltipLength?: number;
+      }) {
+        it(name, async () => {
+          jest.useFakeTimers();
+          const wrapper = mount(
+            <Base component="p" copyable={{ icon, tooltips }}>
+              test copy
+            </Base>,
+          );
+          if (iconClassNames[0] !== undefined) {
+            expect(wrapper.exists(iconClassNames[0])).toBeTruthy();
+          }
+          if (iconTexts[0] !== undefined) {
+            expect(wrapper.find('.ant-typography-copy').at(0).text()).toBe(iconTexts[0]);
+          }
+
+          wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
+          jest.runAllTimers();
+          wrapper.update();
+
+          if (tooltipTexts[0] !== undefined) {
+            expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltipTexts[0]);
+          }
+
+          if (tooltipLength !== undefined) {
+            expect(wrapper.find('.ant-tooltip-inner').length).toBe(tooltipLength);
+          }
+
+          wrapper.find('.ant-typography-copy').first().simulate('click');
+          jest.useRealTimers();
+          if (iconClassNames[1] !== undefined) {
+            expect(wrapper.exists(iconClassNames[1])).toBeTruthy();
+          }
+          wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
+          wrapper.update();
+
+          wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
+
+          if (tooltipTexts[1] !== undefined) {
+            expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltipTexts[1]);
+          }
+
+          if (iconTexts[1] !== undefined) {
+            expect(wrapper.find('.ant-typography-copy').at(0).text()).toBe(iconTexts[1]);
+          }
+
+          jest.useFakeTimers();
+          wrapper.find('.ant-typography-copy').first().simulate('click');
+          jest.runAllTimers();
+          wrapper.update();
+
+          wrapper.unmount();
+          jest.useRealTimers();
+        });
+      }
+      const dom = (
+        <>
+          <span>1</span>2
+        </>
+      );
+      const dom2 = (
+        <>
+          <span>3</span>4
+        </>
+      );
+      const copy = '.anticon-copy';
+      const check = '.anticon-check';
+
+      copyTest({
+        name: 'icon basic copy',
+        iconClassNames: [copy, check],
+        tooltipTexts: ['Copy', 'Copied'],
+      });
+      copyTest({ name: 'icon true', icon: true, iconClassNames: [copy, check] });
+      copyTest({ name: 'icon two true', icon: [true, true], iconClassNames: [copy, check] });
+      copyTest({ name: 'icon false', icon: false, iconClassNames: [copy, check] });
+      copyTest({ name: 'icon custom text', icon: ['a', 'b'], iconTexts: ['a', 'b'] });
+      copyTest({ name: 'icon custom element', icon: [dom, dom2], iconTexts: ['12', '34'] });
+      copyTest({
+        name: 'icon custom icon',
+        icon: <SmileOutlined />,
+        iconClassNames: ['.anticon-smile', check],
+      });
+      copyTest({
+        name: 'icon custom icon2',
+        icon: [<SmileOutlined key="a" />, <LikeOutlined key="b" />],
+        iconClassNames: ['.anticon-smile', '.anticon-like'],
+      });
+      copyTest({
+        name: 'icon custom icon3',
+        icon: [
+          <>
+            <SmileOutlined />
+            <SmileOutlined />
+          </>,
+          <LikeOutlined key="b" />,
+        ],
+        iconClassNames: ['.anticon-smile', '.anticon-like'],
+      });
+      copyTest({
+        name: 'icon custom icon4',
+        icon: (
+          <>
+            <SmileOutlined />
+            <LikeOutlined />
+          </>
+        ),
+        iconClassNames: ['.anticon-smile', check],
+      });
+      copyTest({
+        name: 'icon custom icon5',
+        icon: (
+          <>
+            <SmileOutlined />
+            <LikeOutlined />
+          </>
+        ),
+        iconClassNames: ['.anticon-like', check],
+      });
+      copyTest({
+        name: 'tooltips true',
+        tooltips: true,
+        tooltipLength: 1,
+        tooltipTexts: ['Copy', 'Copied'],
+      });
+      copyTest({ name: 'tooltips false', tooltips: false, tooltipLength: 0 });
+      copyTest({
+        name: 'tooltips custom text',
+        tooltips: ['a', 'b'],
+        tooltipLength: 1,
+        tooltipTexts: ['a', 'b'],
+      });
+      copyTest({
+        name: 'tooltips custom element ',
+        tooltips: [dom, dom2],
+        tooltipTexts: ['12', '34'],
+      });
+      copyTest({
+        name: 'tooltips first empty',
+        tooltips: ['', 'xxx'],
+        tooltipLength: 0,
+      });
+      copyTest({
+        name: 'tooltips first empty 2',
+        tooltips: [''],
+        tooltipLength: 0,
+      });
+
+      copyTest({
+        name: 'tooltips true true',
+        tooltips: [true, true],
+        tooltipTexts: ['Copy', 'Copied'],
+      });
+      copyTest({
+        name: 'tooltips true false',
+        tooltips: [true, false],
+        tooltipTexts: ['Copy', ''],
+      });
+
+      copyTest({
+        name: 'tooltips false true',
+        tooltips: [false, true],
+        tooltipLength: 0,
+      });
+    });
+  });
+});