@douyinfe/semi-ui 2.7.0-beta.0 → 2.7.0

package/form/hooks/useFormApi.tsx

@@ -1,6 +1,7 @@
+import { BaseFormApi } from '@douyinfe/semi-foundation/form/interface';
 import React, { useContext } from 'react';
 import { FormApiContext } from '../context';
  
-export default function useFormApi() {
-    return useContext(FormApiContext);
+export default function useFormApi<T extends Record<string, any> = any>() {
+    return useContext<BaseFormApi<T>>(FormApiContext);
 }

package/lib/cjs/form/hooks/useFormApi.d.ts

@@ -1 +1,2 @@
-export default function useFormApi(): import("@douyinfe/semi-foundation/lib/cjs/form/interface").BaseFormApi<any>;
+import { BaseFormApi } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
+export default function useFormApi<T extends Record<string, any> = any>(): BaseFormApi<T>;

package/lib/cjs/radio/radioGroup.js

@@ -55,6 +55,12 @@ class RadioGroup extends _baseComponent.default {
   }
 
   componentDidUpdate(prevProps) {
+    if (typeof prevProps.value === 'number' && isNaN(prevProps.value) && typeof this.props.value === 'number' && isNaN(this.props.value)) {
+      // `NaN === NaN` returns false, and this will fail the next if check
+      // therefore triggering an infinite loop
+      return;
+    }
+
     if (prevProps.value !== this.props.value) {
       this.foundation.handlePropValueChange(this.props.value);
     }

package/lib/cjs/select/index.js

@@ -742,7 +742,9 @@ class Select extends _baseComponent.default {
       });
     }
 
-    const tags = (0, _map2.default)(selectedItems).call(selectedItems, (item, i) => {
+    const mapItems = maxTagCount ? (0, _slice.default)(selectedItems).call(selectedItems, 0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
+
+    const tags = (0, _map2.default)(mapItems).call(mapItems, (item, i) => {
       const label = item[0];
       const {
         value
@@ -800,12 +802,13 @@ class Select extends _baseComponent.default {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/_react.default.createElement("span", {
       className: spanCls
     }, placeholder) : null;
-    const n = tags.length > maxTagCount ? maxTagCount : undefined;
+    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
     const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
     const tagContent = NotOneLine ? tags : /*#__PURE__*/_react.default.createElement(_group.default, {
       tagList: tags,
       maxTagCount: n,
+      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
       size: "large",
       mode: "custom"
     });

package/lib/cjs/tag/group.d.ts

@@ -7,6 +7,7 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
@@ -26,6 +27,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         maxTagCount: PropTypes.Requireable<number>;
+        restCount: PropTypes.Requireable<number>;
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;

package/lib/cjs/tag/group.js

@@ -77,9 +77,10 @@ class TagGroup extends _react.PureComponent {
   renderMergeTags(tags) {
     const {
       maxTagCount,
-      tagList
+      tagList,
+      restCount
     } = this.props;
-    const n = tagList.length - maxTagCount;
+    const n = restCount ? restCount : tagList.length - maxTagCount;
     let renderTags = tags;
     const normalTags = (0, _slice.default)(tags).call(tags, 0, maxTagCount);
     const restTags = (0, _slice.default)(tags).call(tags, maxTagCount);
@@ -156,6 +157,7 @@ TagGroup.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   maxTagCount: _propTypes.default.number,
+  restCount: _propTypes.default.number,
   tagList: _propTypes.default.array,
   size: _propTypes.default.oneOf(tagSize),
   mode: _propTypes.default.string,

package/lib/cjs/tree/nodeList.js

@@ -49,6 +49,7 @@ class NodeList extends _react.PureComponent {
     super(props);
 
     this.onMotionEnd = () => {
+      typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });

package/lib/cjs/treeSelect/index.js

@@ -955,6 +955,10 @@ class TreeSelect extends _baseComponent.default {
     this.clickOutsideHandler = null;
     this.foundation = new _foundation.default(this.adapter);
     this.treeSelectID = (0, _slice.default)(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 

package/lib/es/form/hooks/useFormApi.d.ts

@@ -1 +1,2 @@
-export default function useFormApi(): import("@douyinfe/semi-foundation/lib/es/form/interface").BaseFormApi<any>;
+import { BaseFormApi } from '@douyinfe/semi-foundation/lib/es/form/interface';
+export default function useFormApi<T extends Record<string, any> = any>(): BaseFormApi<T>;

package/lib/es/radio/radioGroup.js

@@ -32,6 +32,12 @@ class RadioGroup extends BaseComponent {
   }
 
   componentDidUpdate(prevProps) {
+    if (typeof prevProps.value === 'number' && isNaN(prevProps.value) && typeof this.props.value === 'number' && isNaN(this.props.value)) {
+      // `NaN === NaN` returns false, and this will fail the next if check
+      // therefore triggering an infinite loop
+      return;
+    }
+
     if (prevProps.value !== this.props.value) {
       this.foundation.handlePropValueChange(this.props.value);
     }

package/lib/es/select/index.js

@@ -688,7 +688,9 @@ class Select extends BaseComponent {
       });
     }
 
-    const tags = _mapInstanceProperty(selectedItems).call(selectedItems, (item, i) => {
+    const mapItems = maxTagCount ? _sliceInstanceProperty(selectedItems).call(selectedItems, 0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
+
+    const tags = _mapInstanceProperty(mapItems).call(mapItems, (item, i) => {
       const label = item[0];
       const {
         value
@@ -747,12 +749,13 @@ class Select extends BaseComponent {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/React.createElement("span", {
       className: spanCls
     }, placeholder) : null;
-    const n = tags.length > maxTagCount ? maxTagCount : undefined;
+    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
     const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
     const tagContent = NotOneLine ? tags : /*#__PURE__*/React.createElement(TagGroup, {
       tagList: tags,
       maxTagCount: n,
+      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
       size: "large",
       mode: "custom"
     });

package/lib/es/tag/group.d.ts

@@ -7,6 +7,7 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
@@ -26,6 +27,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         maxTagCount: PropTypes.Requireable<number>;
+        restCount: PropTypes.Requireable<number>;
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;

package/lib/es/tag/group.js

@@ -46,9 +46,10 @@ export default class TagGroup extends PureComponent {
   renderMergeTags(tags) {
     const {
       maxTagCount,
-      tagList
+      tagList,
+      restCount
     } = this.props;
-    const n = tagList.length - maxTagCount;
+    const n = restCount ? restCount : tagList.length - maxTagCount;
     let renderTags = tags;
 
     const normalTags = _sliceInstanceProperty(tags).call(tags, 0, maxTagCount);
@@ -128,6 +129,7 @@ TagGroup.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   maxTagCount: PropTypes.number,
+  restCount: PropTypes.number,
   tagList: PropTypes.array,
   size: PropTypes.oneOf(tagSize),
   mode: PropTypes.string,

package/lib/es/tree/nodeList.js

@@ -22,6 +22,7 @@ export default class NodeList extends PureComponent {
     super(props);
 
     this.onMotionEnd = () => {
+      typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });

package/lib/es/treeSelect/index.js

@@ -901,6 +901,10 @@ class TreeSelect extends BaseComponent {
     this.clickOutsideHandler = null;
     this.foundation = new TreeSelectFoundation(this.adapter);
     this.treeSelectID = _sliceInstanceProperty(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.7.0-beta.0",
+    "version": "2.7.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.7.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.7.0-beta.0",
-        "@douyinfe/semi-foundation": "2.7.0-beta.0",
-        "@douyinfe/semi-icons": "2.7.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.7.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.7.0-beta.0",
+        "@douyinfe/semi-animation": "2.7.0",
+        "@douyinfe/semi-animation-react": "2.7.0",
+        "@douyinfe/semi-foundation": "2.7.0",
+        "@douyinfe/semi-icons": "2.7.0",
+        "@douyinfe/semi-illustrations": "2.7.0",
+        "@douyinfe/semi-theme-default": "2.7.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "51cc4f6fa52f3275728d2112a98446ba54619c5b",
+    "gitHead": "b6e4e0a1e22d4dabe68cbf7e3d2cfd0202da0424",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.7.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.7.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/__test__/radioGroup.test.jsx

@@ -196,4 +196,12 @@ describe('RadioGroup', () => {
         expect(middleRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-middle`)).toEqual(true);
         expect(largeRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-large`)).toEqual(true);
     });
-});
+
+    it('does not trigger Maximum update exceeded when setting radio-group\'s value to NaN', () => {
+        const radioGroup = mount(
+            createRadioGroup({ value: NaN }),
+        );
+
+        expect(radioGroup.exists(`${BASE_CLASS_PREFIX}-radio-checked`)).toEqual(false);
+    });
+});

package/radio/_story/radio.stories.js

@@ -865,4 +865,25 @@ export const FixWithFieldLossRef = () => {
     </Form>
   );
 }
-FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';
+FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';
+
+
+export const SwitchValueToNaN = () => {
+  const [val, setVal] = useState(1);
+
+  return (
+    <>
+      <RadioGroup direction="vertical" aria-label="单选组合示例" value={val}>
+          <Radio value={1}>A</Radio>
+          <Radio value={2}>B</Radio>
+          <Radio value={3}>C</Radio>
+          <Radio value={4}>D</Radio>
+      </RadioGroup>
+      <Space>
+        <Button onClick={() => setVal(NaN)}>NaN</Button>
+        <Button onClick={() => setVal(2)}>2</Button>
+      </Space>
+    </>
+  );
+}
+SwitchValueToNaN.storyName = 'SwitchValueToNaN';

package/radio/radioGroup.tsx

@@ -97,6 +97,15 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
     }
 
     componentDidUpdate(prevProps: RadioGroupProps) {
+        if (typeof prevProps.value === 'number'
+            && isNaN(prevProps.value)
+            && typeof this.props.value === 'number'
+            && isNaN(this.props.value)
+        ) {
+            // `NaN === NaN` returns false, and this will fail the next if check
+            // therefore triggering an infinite loop
+            return;
+        }
         if (prevProps.value !== this.props.value) {
             this.foundation.handlePropValueChange(this.props.value);
         }

package/select/_story/select.stories.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 
 import './select.scss';
-import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space } from '../../index';
+import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag } from '../../index';
 import CustomTrigger from './CustomTrigger';
 import classNames from 'classnames';
 import { getHighLightTextHTML } from '../../_utils/index';
@@ -2903,4 +2903,75 @@ export const AutoClearSearchValue = () => {
 
 SelectInputPropsDemo.story = {
   name: 'AutoClearSearchValue',
-};
+};
+
+
+export const RenderSelectedItemCallCount = () => {
+      const list = [
+        { "name": "夏可漫", "email": "xiakeman@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+        { "name": "申悦", "email": "shenyue@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+        { "name": "曲晨一", "email": "quchenyi@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/8bd8224511db085ed74fea37205aede5.jpg" },
+        { "name": "文嘉茂", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+        { "name": "文嘉茂2", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+        { "name": "文嘉茂3", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+    ]
+
+    const renderMultipleWithCustomTag = (optionNode, { onClose }) => {
+        console.count('rerender')
+        const content = (
+            <Tag
+                avatarSrc={optionNode.avatar}
+                avatarShape='circle'
+                closable={true}
+                onClose={onClose}
+                size='large'
+            >
+                {optionNode.name}
+            </Tag>
+        );
+        return {
+            isRenderInTag: false,
+            content
+        };
+    }
+
+    const renderCustomOption = (item, index) => {
+        const optionStyle = {
+            display: 'flex',
+            paddingLeft: 24,
+            paddingTop: 10,
+            paddingBottom: 10
+        }
+        return (
+            <Select.Option key={index} value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
+                <Avatar size="small" src={item.avatar} />
+                <div style={{ marginLeft: 8 }}>
+                    <div style={{ fontSize: 14 }}>{item.name}</div>
+                    <div style={{ color: 'var(--color-text-2)', fontSize: 12, lineHeight: '16px', fontWeight: 'normal' }}>{item.email}</div>
+                </div>
+            </Select.Option>
+        )
+    }
+
+    return (
+        <>
+            <Select
+                placeholder='请选择'
+                showClear
+                multiple
+                maxTagCount={2}
+                style={{ width: 280, height: 40 }}
+                onChange={v => console.log(v)}
+                defaultValue={'夏可漫'}
+                renderSelectedItem={renderMultipleWithCustomTag}
+            >
+                {list.map((item, index) => renderCustomOption(item, index))}
+            </Select>
+        </>
+    );
+}
+
+
+RenderSelectedItemCallCount.story = {
+  name: 'RenderSelectedItemCallCount',
+};

package/select/index.tsx

@@ -898,8 +898,10 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 content: optionNode.label,
             });
         }
+        
+        const mapItems = maxTagCount ? selectedItems.slice(0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
 
-        const tags = selectedItems.map((item, i) => {
+        const tags = mapItems.map((item, i) => {
             const label = item[0];
             const { value } = item[1];
             const disabled = item[1].disabled || selectDisabled;
@@ -939,11 +941,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             // [prefixcls + '-selection-text-inactive']: !inputValue && !tags.length,
         });
         const placeholderText = placeholder && !inputValue ? <span className={spanCls}>{placeholder}</span> : null;
-        const n = tags.length > maxTagCount ? maxTagCount : undefined;
+        const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
 
         const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
-        const tagContent = NotOneLine ? tags : <TagGroup tagList={tags} maxTagCount={n} size="large" mode="custom" />;
+        const tagContent = NotOneLine ? tags : <TagGroup tagList={tags} maxTagCount={n} restCount={maxTagCount ? selectedItems.length - maxTagCount : undefined} size="large" mode="custom" />;
 
         return (
             <>

package/tag/group.tsx

@@ -14,12 +14,13 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
-    mode?: string; // TODO: This API is not in the check file
+    mode?: string;
 }
 
 export default class TagGroup extends PureComponent<TagGroupProps> {
@@ -35,6 +36,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.object,
         className: PropTypes.string,
         maxTagCount: PropTypes.number,
+        restCount: PropTypes.number,
         tagList: PropTypes.array,
         size: PropTypes.oneOf(tagSize),
         mode: PropTypes.string,
@@ -77,8 +79,8 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
     }
 
     renderMergeTags(tags: (Tag | React.ReactNode)[]) {
-        const { maxTagCount, tagList } = this.props;
-        const n = tagList.length - maxTagCount;
+        const { maxTagCount, tagList, restCount } = this.props;
+        const n = restCount ? restCount : tagList.length - maxTagCount;
         let renderTags: (Tag | React.ReactNode)[] = tags;
 
         const normalTags: (Tag | React.ReactNode)[] = tags.slice(0, maxTagCount);

package/tree/nodeList.tsx

@@ -55,6 +55,7 @@ export default class NodeList extends PureComponent<NodeListProps, NodeListState
     }
 
     onMotionEnd = () => {
+        typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
         this.setState({ transitionNodes: [] });
     };
 

package/treeSelect/index.tsx

@@ -331,6 +331,9 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.clickOutsideHandler = null;
         this.foundation = new TreeSelectFoundation(this.adapter);
         this.treeSelectID = Math.random().toString(36).slice(2);
+        this.onMotionEnd = () => {
+            this.adapter.rePositionDropdown();
+        };
     }
 
     // eslint-disable-next-line max-lines-per-function