Merge pull request #29929 from ant-design/master

chore: feature merge master
ant-design · Mar 29, 2021 · 1a3c8f2 · 1a3c8f2
2 parents d9885c7 + 7fe8f04
commit 1a3c8f2
Show file tree

Hide file tree

Showing 27 changed files with 214 additions and 128 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,7 @@ module.exports = {
   extends: [
     'airbnb',
     'prettier',
+    'plugin:compat/recommended',
     'plugin:jest/recommended',
     'plugin:react/recommended',
     'plugin:import/typescript',
@@ -18,6 +19,7 @@ module.exports = {
     react: {
       version: '16.9',
     },
+    polyfills: ['Promise', 'URL'],
   },
   parser: '@typescript-eslint/parser',
   plugins: ['react', 'babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'],
@@ -61,19 +63,20 @@ module.exports = {
       },
       rules: {
         indent: 0,
+        'default-case': 0,
+        'eol-last': 0,
         'no-console': 0,
         'no-plusplus': 0,
-        'eol-last': 0,
         'no-script-url': 0,
-        'default-case': 0,
         'prefer-rest-params': 0,
+        'compat/compat': 0,
         'react/no-access-state-in-setstate': 0,
         'react/destructuring-assignment': 0,
         'react/no-multi-comp': 0,
         'react/no-array-index-key': 0,
         'jsx-a11y/href-no-hash': 0,
-        'import/no-extraneous-dependencies': 0,
         'jsx-a11y/control-has-associated-label': 0,
+        'import/no-extraneous-dependencies': 0,
       },
     },
   ],

diff --git a/components/_util/__tests__/wave.test.js b/components/_util/__tests__/wave.test.js
@@ -56,7 +56,7 @@ describe('Wave component', () => {
     );
     wrapper.find('button').getDOMNode().click();
     await sleep(0);
-    const styles = document.getElementsByTagName('style');
+    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
     expect(styles.length).toBe(0);
     wrapper.unmount();
   });
@@ -71,7 +71,7 @@ describe('Wave component', () => {
     );
     wrapper.find('button').getDOMNode().click();
     await sleep(200);
-    const styles = document.getElementsByTagName('style');
+    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: red;');
     wrapper.unmount();
@@ -85,7 +85,7 @@ describe('Wave component', () => {
     );
     wrapper.find('div').getDOMNode().click();
     await sleep(0);
-    const styles = document.getElementsByTagName('style');
+    const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: blue;');
     wrapper.unmount();
@@ -99,7 +99,7 @@ describe('Wave component', () => {
     );
     wrapper.find('div').getDOMNode().click();
     await sleep(0);
-    const styles = document.getElementsByTagName('style');
+    const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: green;');
     wrapper.unmount();
@@ -113,7 +113,7 @@ describe('Wave component', () => {
     );
     wrapper.find('div').getDOMNode().click();
     await sleep(0);
-    const styles = document.getElementsByTagName('style');
+    const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
     expect(styles.length).toBe(1);
     expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: yellow;');
     wrapper.unmount();
@@ -129,7 +129,7 @@ describe('Wave component', () => {
     );
     wrapper.find('button').getDOMNode().click();
     await sleep(0);
-    const styles = document.getElementsByTagName('style');
+    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
     expect(styles.length).toBe(0);
     wrapper.unmount();
   });
@@ -144,7 +144,7 @@ describe('Wave component', () => {
     );
     wrapper.find('button').getDOMNode().click();
     await sleep(0);
-    const styles = document.getElementsByTagName('style');
+    const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
     expect(styles[0].getAttribute('nonce')).toBe('YourNonceCode');
     wrapper.unmount();
   });

diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
@@ -88,6 +88,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     ) {
       extraNode.style.borderColor = waveColor;
 
+      const nodeRoot = node.getRootNode?.() || node.ownerDocument;
+      const nodeBody = nodeRoot instanceof Document ? nodeRoot.body : nodeRoot as HTMLElement;
       styleForPseudo = updateCSS(
         `
       [${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls(
@@ -96,7 +98,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
         --antd-wave-shadow-color: ${waveColor};
       }`,
         'antd-wave',
-        { csp: this.csp },
+        { csp: this.csp, attachTo: nodeBody },
       );
     }
     if (insertExtraNode) {

diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import debounce from 'lodash/debounce';
 import SlickCarousel, { Settings } from '@ant-design/react-slick';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
@@ -51,35 +50,6 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
       [slickRef.current],
     );
 
-    React.useEffect(() => {
-      const func = () => {
-        // Fix https://github.com/ant-design/ant-design/issues/2550
-        const { autoplay } = props;
-        if (
-          autoplay &&
-          slickRef.current &&
-          slickRef.current.innerSlider &&
-          slickRef.current.innerSlider.autoPlay
-        ) {
-          slickRef.current.innerSlider.autoPlay();
-        }
-      };
-
-      const onWindowResized = debounce(func, 500, {
-        leading: false,
-      });
-
-      if (props.autoplay) {
-        window.addEventListener('resize', onWindowResized);
-      }
-      return () => {
-        if (props.autoplay) {
-          window.removeEventListener('resize', onWindowResized);
-          (onWindowResized as any).cancel();
-        }
-      };
-    }, [slickRef.current, props.autoplay]);
-
     const prevCount = React.useRef(React.Children.count(props.children));
 
     React.useEffect(() => {

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -3671,7 +3671,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
     >
       <label
         class="ant-form-item-required-mark-optional"
-        for="requiredMark"
+        for="requiredMarkValue"
         title="Required Mark"
       >
         Required Mark
@@ -3693,7 +3693,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
         >
           <div
             class="ant-radio-group ant-radio-group-outline"
-            id="requiredMark"
+            id="requiredMarkValue"
           >
             <label
               class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"

diff --git a/components/form/demo/dynamic-form-items.md b/components/form/demo/dynamic-form-items.md
@@ -27,25 +27,25 @@ const Demo = () => {
       <Form.List name="users">
         {(fields, { add, remove }) => (
           <>
-            {fields.map(field => (
-              <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
+            {fields.map(({ key, name, fieldKey, ...restField }) => (
+              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                 <Form.Item
-                  {...field}
-                  name={[field.name, 'first']}
-                  fieldKey={[field.fieldKey, 'first']}
+                  {...restField}
+                  name={[name, 'first']}
+                  fieldKey={[fieldKey, 'first']}
                   rules={[{ required: true, message: 'Missing first name' }]}
                 >
                   <Input placeholder="First Name" />
                 </Form.Item>
                 <Form.Item
-                  {...field}
-                  name={[field.name, 'last']}
-                  fieldKey={[field.fieldKey, 'last']}
+                  {...restField}
+                  name={[name, 'last']}
+                  fieldKey={[fieldKey, 'last']}
                   rules={[{ required: true, message: 'Missing last name' }]}
                 >
                   <Input placeholder="Last Name" />
                 </Form.Item>
-                <MinusCircleOutlined onClick={() => remove(field.name)} />
+                <MinusCircleOutlined onClick={() => remove(name)} />
               </Space>
             ))}
             <Form.Item>

diff --git a/components/form/demo/required-mark.md b/components/form/demo/required-mark.md
@@ -32,11 +32,11 @@ const FormLayoutDemo = () => {
     <Form
       form={form}
       layout="vertical"
-      initialValues={{ requiredMark }}
+      initialValues={{ requiredMarkValue: requiredMark }}
       onValuesChange={onRequiredTypeChange}
       requiredMark={requiredMark}
     >
-      <Form.Item label="Required Mark" name="requiredMark">
+      <Form.Item label="Required Mark" name="requiredMarkValue">
         <Radio.Group>
           <Radio.Button value="optional">Optional</Radio.Button>
           <Radio.Button value>Required</Radio.Button>

diff --git a/components/input/Input.tsx b/components/input/Input.tsx
@@ -65,26 +65,42 @@ export function resolveOnChange(
   target: HTMLInputElement | HTMLTextAreaElement,
   e:
     | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-    | React.MouseEvent<HTMLElement, MouseEvent>,
-  onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void,
+    | React.MouseEvent<HTMLElement, MouseEvent>
+    | React.CompositionEvent<HTMLElement>,
+  onChange:
+    | undefined
+    | ((event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void),
+  targetValue?: string,
 ) {
   if (!onChange) {
     return;
   }
   let event = e;
+  const originalInputValue = target.value;
+
   if (e.type === 'click') {
     // click clear icon
     event = Object.create(e);
     event.target = target;
     event.currentTarget = target;
-    const originalInputValue = target.value;
     // change target ref value cause e.target.value should be '' when clear input
     target.value = '';
     onChange(event as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>);
     // reset target ref value
     target.value = originalInputValue;
     return;
   }
+
+  // Trigger by composition event, this means we need force change the input value
+  if (targetValue !== undefined) {
+    event = Object.create(e);
+    event.target = target;
+    event.currentTarget = target;
+
+    target.value = targetValue;
+    onChange(event as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>);
+    return;
+  }
   onChange(event as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>);
 }