Merge branch 'master' into select

growingio · Dec 21, 2020 · 7770c9a · 7770c9a
2 parents 4ffb226 + 6af7df1
commit 7770c9a
Show file tree

Hide file tree

Showing 39 changed files with 1,373 additions and 1,118 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gio-design/components",
-  "version": "20.12.2",
+  "version": "20.12.3",
   "description": "GrowingIO Design components",
   "author": "GrowingIO Frontend Team <eng-frontend@growingio.com>",
   "module": "./es/index.js",

diff --git a/packages/components/src/components/avatar/Avatar.tsx b/packages/components/src/components/avatar/Avatar.tsx
@@ -70,7 +70,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProp
     if (userName !== undefined && typeof userName === 'string') {
       const prefixUserName = omit && typeof userName === 'string' ? userName.trim()[0].toUpperCase() : userName.trim();
       return (
-        <span ref={childrenRef} style={childrenStyle}>
+        <span ref={childrenRef} style={childrenStyle} className={`${prefixCls}-string`}>
           {prefixUserName}
         </span>
       );

diff --git a/packages/components/src/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap b/packages/components/src/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap
@@ -5,6 +5,7 @@ exports[`Testing Avatar should be stable 1`] = `
   className="gio-avatar gio-avatar-df"
 >
   <span
+    className="gio-avatar-string"
     style={
       Object {
         "transform": "scale(1) translateX(-50%)",

diff --git a/packages/components/src/components/avatar/__tests__/__snapshots__/AvatarGroup.test.js.snap b/packages/components/src/components/avatar/__tests__/__snapshots__/AvatarGroup.test.js.snap
@@ -23,6 +23,7 @@ exports[`Testing AvatarGroup should be stable 1`] = `
     onMouseLeave={[Function]}
   >
     <span
+      className="gio-avatar-string"
       style={
         Object {
           "transform": "scale(1) translateX(-50%)",
@@ -51,6 +52,7 @@ exports[`Testing AvatarGroup should be stable 1`] = `
     onMouseLeave={[Function]}
   >
     <span
+      className="gio-avatar-string"
       style={
         Object {
           "transform": "scale(1) translateX(-50%)",
@@ -64,6 +66,7 @@ exports[`Testing AvatarGroup should be stable 1`] = `
     className="gio-avatar-rest gio-avatar gio-avatar-df"
   >
     <span
+      className="gio-avatar-string"
       style={
         Object {
           "transform": "scale(1) translateX(-50%)",

diff --git a/packages/components/src/components/avatar/style/index.less b/packages/components/src/components/avatar/style/index.less
@@ -13,13 +13,10 @@
   opacity: 1;
   user-select: none;
 
-  &:hover {
-    .@{avatar-prefix-cls}-droppable {
-      background-color: @color-background-avatar-hover-dropdown;
-
-      svg {
-        transform: scale(1);
-      }
+  &:hover &-droppable {
+    background-color: @color-background-avatar-hover-dropdown;
+    span {
+      transform: scale(1);
     }
   }
 
@@ -35,14 +32,14 @@
     cursor: pointer;
     transition: all 0.3s;
 
-    svg {
+    span {
       vertical-align: middle;
       transform: scale(0);
       transition: all 0.3s;
     }
   }
 
-  span {
+  &-string {
     position: absolute;
     left: 50%;
     transform-origin: 0 center;

diff --git a/packages/components/src/components/cascader/helper.ts b/packages/components/src/components/cascader/helper.ts
@@ -1,6 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
-import isFunction from 'lodash/isFunction';
 import findIndex from 'lodash/findIndex';
 
 import { NodeData, KeyMapping } from './menu-item';
@@ -76,25 +75,6 @@ export const dataKeyMapping = (data: NodeData, keyMapping = {} as KeyMapping) =>
   return { ...data, label: label as NodeData['label'], value: value as NodeData['value'] };
 };
 
-/**
- * 合并 ref
- */
-export const useMergeRef = <T>(
-  forwardRef: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null
-) => {
-  const innerRef = useRef<T>((null as unknown) as T);
-  useEffect(() => {
-    if (isFunction(forwardRef)) {
-      forwardRef(innerRef.current);
-    } else if (forwardRef) {
-      // eslint-disable-next-line no-param-reassign
-      forwardRef.current = innerRef.current;
-    }
-  }, [innerRef, forwardRef]);
-
-  return innerRef;
-};
-
 export const useKeyboardNav = (wrapRef: React.MutableRefObject<HTMLElement>) => {
   useEffect(() => {
     const { current: wrapper } = wrapRef;

diff --git a/packages/components/src/components/cascader/menu.tsx b/packages/components/src/components/cascader/menu.tsx
@@ -3,8 +3,9 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { Props as MenuItemProps, NodeData } from './menu-item';
-import { dataKeyMapping, toInt, useDynamicData, useKeyboardNav, useMergeRef, withPrefix } from './helper';
+import { dataKeyMapping, toInt, useDynamicData, useKeyboardNav, withPrefix } from './helper';
 import SingleMenu, { Props as SingleMenuProps } from './single-menu';
+import useMergeRef from '../../utils/hooks/useMergeRef';
 
 export type Props = SingleMenuProps;
 

diff --git a/packages/components/src/components/cascader/single-menu.tsx b/packages/components/src/components/cascader/single-menu.tsx
@@ -5,7 +5,8 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 import trim from 'lodash/trim';
 
-import { dataFilter, makeSearchParttern, mergeKeyMapping, toInt, useMergeRef, withPrefix } from './helper';
+import useMergeRef from '../../utils/hooks/useMergeRef';
+import { dataFilter, makeSearchParttern, mergeKeyMapping, toInt, withPrefix } from './helper';
 import Empty from './empty';
 import MenuItem, { Props as MenuItemProps, NodeData } from './menu-item';
 

diff --git a/...es/components/src/components/date-picker/__tests__/__snapshots__/date-picker.spec.js.snap b/...es/components/src/components/date-picker/__tests__/__snapshots__/date-picker.spec.js.snap
@@ -9,12 +9,12 @@ initialize {
     "children": Array [
       Object {
         "attribs": Object {
-          "class": "gio-input gio-input-container-middle",
+          "class": "gio-input gio-input--middle",
         },
         "children": Array [
           Object {
             "attribs": Object {
-              "class": "gio-input-content",
+              "class": "gio-input__content",
               "placeholder": "请输入…",
               "type": "text",
               "value": "2015/06/01",
@@ -81,12 +81,12 @@ initialize {
         "parent": [Circular],
         "prev": Object {
           "attribs": Object {
-            "class": "gio-input gio-input-container-middle",
+            "class": "gio-input gio-input--middle",
           },
           "children": Array [
             Object {
               "attribs": Object {
-                "class": "gio-input-content",
+                "class": "gio-input__content",
                 "placeholder": "请输入…",
                 "type": "text",
                 "value": "2015/06/01",

diff --git a/...ponents/src/components/date-picker/__tests__/__snapshots__/date-range-picker.spec.js.snap b/...ponents/src/components/date-picker/__tests__/__snapshots__/date-range-picker.spec.js.snap
@@ -14,12 +14,12 @@ initialize {
         "children": Array [
           Object {
             "attribs": Object {
-              "class": "gio-input gio-input-container-middle",
+              "class": "gio-input gio-input--middle",
             },
             "children": Array [
               Object {
                 "attribs": Object {
-                  "class": "gio-input-content",
+                  "class": "gio-input__content",
                   "placeholder": "please select",
                   "type": "text",
                   "value": "2015/06/01",
@@ -64,12 +64,12 @@ initialize {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": Object {
                 "attribs": Object {
-                  "class": "gio-input gio-input-container-middle",
+                  "class": "gio-input gio-input--middle",
                 },
                 "children": Array [
                   Object {
                     "attribs": Object {
-                      "class": "gio-input-content",
+                      "class": "gio-input__content",
                       "placeholder": "please select",
                       "type": "text",
                       "value": "2015/06/02",
@@ -162,12 +162,12 @@ initialize {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": Object {
               "attribs": Object {
-                "class": "gio-input gio-input-container-middle",
+                "class": "gio-input gio-input--middle",
               },
               "children": Array [
                 Object {
                   "attribs": Object {
-                    "class": "gio-input-content",
+                    "class": "gio-input__content",
                     "placeholder": "please select",
                     "type": "text",
                     "value": "2015/06/02",
@@ -226,12 +226,12 @@ initialize {
             "parent": [Circular],
             "prev": Object {
               "attribs": Object {
-                "class": "gio-input gio-input-container-middle",
+                "class": "gio-input gio-input--middle",
               },
               "children": Array [
                 Object {
                   "attribs": Object {
-                    "class": "gio-input-content",
+                    "class": "gio-input__content",
                     "placeholder": "please select",
                     "type": "text",
                     "value": "2015/06/01",
@@ -280,12 +280,12 @@ initialize {
           },
           Object {
             "attribs": Object {
-              "class": "gio-input gio-input-container-middle",
+              "class": "gio-input gio-input--middle",
             },
             "children": Array [
               Object {
                 "attribs": Object {
-                  "class": "gio-input-content",
+                  "class": "gio-input__content",
                   "placeholder": "please select",
                   "type": "text",
                   "value": "2015/06/02",
@@ -351,12 +351,12 @@ initialize {
               "parent": [Circular],
               "prev": Object {
                 "attribs": Object {
-                  "class": "gio-input gio-input-container-middle",
+                  "class": "gio-input gio-input--middle",
                 },
                 "children": Array [
                   Object {
                     "attribs": Object {
-                      "class": "gio-input-content",
+                      "class": "gio-input__content",
                       "placeholder": "please select",
                       "type": "text",
                       "value": "2015/06/01",
@@ -422,12 +422,12 @@ initialize {
             "parent": [Circular],
             "prev": Object {
               "attribs": Object {
-                "class": "gio-input gio-input-container-middle",
+                "class": "gio-input gio-input--middle",
               },
               "children": Array [
                 Object {
                   "attribs": Object {
-                    "class": "gio-input-content",
+                    "class": "gio-input__content",
                     "placeholder": "please select",
                     "type": "text",
                     "value": "2015/06/02",
@@ -476,12 +476,12 @@ initialize {
                 "parent": [Circular],
                 "prev": Object {
                   "attribs": Object {
-                    "class": "gio-input gio-input-container-middle",
+                    "class": "gio-input gio-input--middle",
                   },
                   "children": Array [
                     Object {
                       "attribs": Object {
-                        "class": "gio-input-content",
+                        "class": "gio-input__content",
                         "placeholder": "please select",
                         "type": "text",
                         "value": "2015/06/01",

diff --git a/packages/components/src/components/date-picker/__tests__/date-picker.spec.js b/packages/components/src/components/date-picker/__tests__/date-picker.spec.js
@@ -36,16 +36,16 @@ describe('DatePicker ui test', () => {
 
   it('should popup corretly', (done) => {
     const wrapper = mount(DatePickerInstance());
-    wrapper.find('.gio-input-content').simulate('click');
+    wrapper.find('.gio-input__content').simulate('click');
     waitComponentRender(wrapper).then(() => {
-      expect(wrapper.exists('.gio-input-content')).toBe(true);
+      expect(wrapper.exists('.gio-input__content')).toBe(true);
       done();
     });
   });
 
   it('should render corretly', () => {
     const wrapper = mount(DatePickerInstance());
-    const content = wrapper.find('.gio-input-content');
+    const content = wrapper.find('.gio-input__content');
     expect(content.html().includes('2015/05/01'));
   });
 });
@@ -80,7 +80,7 @@ describe('DatePicker action Test', () => {
       />
     );
     act(() => {
-      wrapper.find('.gio-input-content').simulate('click');
+      wrapper.find('.gio-input__content').simulate('click');
     })
     waitComponentRender(wrapper).then(() => {
       act(() => {
@@ -116,7 +116,7 @@ describe('DatePicker action Test', () => {
       />
     );
     act(() => {
-      wrapper.find('.gio-input-content').simulate('click');
+      wrapper.find('.gio-input__content').simulate('click');
     })
     waitComponentRender(wrapper).then(() => {
       act(() => {
@@ -150,7 +150,7 @@ describe('DatePicker action Test', () => {
       />
     );
     act(() => {
-      wrapper.find('.gio-input-content').simulate('click');
+      wrapper.find('.gio-input__content').simulate('click');
     })
     waitComponentRender(wrapper).then(() => {
       act(() => {

diff --git a/packages/components/src/components/date-picker/__tests__/date-range-picker.spec.js b/packages/components/src/components/date-picker/__tests__/date-range-picker.spec.js
@@ -45,16 +45,16 @@ describe('DateRangePicker ui test', () => {
 
   it('should popup corretly', (done) => {
     const wrapper = mount(DateRangePickerInstance());
-    wrapper.find('.gio-input-content').at(0).simulate('click');
+    wrapper.find('.gio-input__content').at(0).simulate('click');
     waitComponentRender(wrapper).then(() => {
-      expect(wrapper.exists('.gio-input-content')).toBe(true);
+      expect(wrapper.exists('.gio-input__content')).toBe(true);
       done();
     });
   });
 
   it('should render corretly', () => {
     const wrapper = mount(DateRangePickerInstance());
-    const content = wrapper.find('.gio-input-content').at(0);
+    const content = wrapper.find('.gio-input__content').at(0);
     expect(content.html().includes('2015/05/01'));
   });
 });
@@ -67,7 +67,7 @@ describe('DatePicker action Test', () => {
       <DateRangePicker value={VALUE} onChange={onChange} format={format} showFooter disabledDate={disabledDate} />
     );
     act(() => {
-      wrapper.find('.gio-input-content').at(0).simulate('click');
+      wrapper.find('.gio-input__content').at(0).simulate('click');
     });
     waitComponentRender(wrapper).then(() => {
       act(() => {
@@ -105,7 +105,7 @@ describe('DatePicker action Test', () => {
         />
       );
       act(() => {
-        wrapper.find('.gio-input-content').at(0).simulate('click');
+        wrapper.find('.gio-input__content').at(0).simulate('click');
       })
       waitComponentRender(wrapper).then(() => {
         act(() => {
@@ -138,7 +138,7 @@ describe('DatePicker action Test', () => {
         />
       );
       act(() => {
-        wrapper.find('.gio-input-content').at(0).simulate('click');
+        wrapper.find('.gio-input__content').at(0).simulate('click');
       })
       waitComponentRender(wrapper).then(() => {
         act(() => {