@douyinfe/semi-ui 2.9.0-beta.1 → 2.9.0

package/input/__test__/input.test.js

@@ -113,9 +113,18 @@ describe('Input', () => {
   });
 
   it('input password mode', () => {
-    const inputMode = mount(<Input mode="password" />);
-    const input = inputMode.find('input');
-    expect(input.instance().type).toEqual('password');
+    const inputMode = mount(<Input />);
+    expect(inputMode.find('input').instance().type).toEqual('text');
+    inputMode.setProps({ mode: 'password' }) ;
+    expect(inputMode.find('input').instance().type).toEqual('password');
+    inputMode.setProps({ mode: '' }) ;
+    expect(inputMode.find('input').instance().type).toEqual('text');
+  });
+
+  it('input password click eyes icon', () => {
+    const inputMode = mount(<Input mode='password' defaultValue="123456" autofocus/>);
+    inputMode.simulate('mouseEnter', {}).find(`.${BASE_CLASS_PREFIX}-input-modebtn`).simulate('click');
+    expect(inputMode.find('input').instance().type).toEqual('text');
   });
 
   it('input controlled mode', () => {

package/input/__test__/textArea.test.js

@@ -116,4 +116,57 @@ describe('TextArea', () => {
         const counter2 = textarea.find(`.${BASE_CLASS_PREFIX}-input-textarea-counter`);
         expect(counter2.hasClass('semi-input-textarea-counter-exceed')).toEqual(false);
     });
+
+    it('test minLength', () => {
+        let inputValue = '💖💖💖';
+        let inputValue1 = '💖💖💖💖';
+        let minLength = 4;
+        let event = { target: { value: inputValue } };
+        let event1 = { target: { value: inputValue1 } };
+
+        let onChange = value => {
+        console.log(value);
+        };
+        let spyOnChange = sinon.spy(onChange);
+        const textArea = mount(<TextArea onChange={spyOnChange} minLength={minLength} getValueLength={getValueLength} />);
+        const textAreaDom = textArea.find('textarea');
+
+        textAreaDom.simulate('change', event);
+        expect(spyOnChange.calledOnce).toBe(true);
+        expect(spyOnChange.calledWithMatch(textAreaDom)).toBe(true);
+        expect(textAreaDom.instance().minLength).toEqual(inputValue.length + (minLength - getValueLength(inputValue)));
+
+        textAreaDom.simulate('change', event1);
+        expect(spyOnChange.calledWithMatch(textAreaDom)).toBe(true);
+        expect(textAreaDom.instance().minLength).toEqual(minLength)
+    });
+
+    it('test maxLength + truncateValue', () => {
+        function truncateValue(inputValue, maxLength, getValueLength) {
+            let event = { target: { value: inputValue } };
+            let onChange = value => {
+                console.log(value);
+            };
+
+            let spyOnChange = sinon.spy(onChange);
+            const textArea = mount(<TextArea onChange={spyOnChange} maxLength={maxLength} getValueLength={getValueLength} />);
+            const textAreaDom = textArea.find('textarea');
+            textAreaDom.simulate('change', event);
+            expect(spyOnChange.calledOnce).toBe(true);
+            return textAreaDom.instance().value;
+        }
+
+        const testCases = [
+        // 自定义valueLength
+            ['Semi', 5, getValueLength, 'Semi'],
+            ['Semi Design', 4, getValueLength, 'Semi'],
+            ['💖💖💖💖💖💖💖💖💖💖👨👩👧👦', 10, getValueLength, '💖💖💖💖💖💖💖💖💖💖'],
+            ['💖', -1, getValueLength, ''],
+            ['🆗', 1, getValueLength, '🆗'],
+        ];
+
+        for (let [value, length, fc, result] of testCases) {
+            expect(truncateValue(value, length, fc)).toBe(result);
+        }
+  })
 })

package/lib/cjs/cascader/index.js

@@ -423,7 +423,7 @@ class Cascader extends _baseComponent.default {
 
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
-      this.foundation.handleClearEnterPress();
+      this.foundation.handleClearEnterPress(e);
     };
 
     this.showClearBtn = () => {

package/lib/cjs/collapse/item.js

@@ -103,9 +103,11 @@ class CollapsePanel extends _react.PureComponent {
       className,
       children,
       itemKey,
-      reCalcKey
+      reCalcKey,
+      header,
+      extra
     } = _a,
-          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey"]);
+          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra"]);
 
     const {
       keepDOM,

package/lib/cjs/modal/Modal.js

@@ -253,6 +253,9 @@ class Modal extends _baseComponent.default {
         this.props.onOk(e);
       },
       notifyClose: () => {
+        var _a, _b;
+
+        (_b = (_a = this.props.motion) === null || _a === void 0 ? void 0 : _a.didLeave) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.props.afterClose();
       },
       toggleHidden: (hidden, callback) => {

package/lib/cjs/scrollList/scrollItem.js

@@ -71,6 +71,8 @@ class ScrollItem extends _baseComponent.default {
     this._cacheSelectorNode = selector => this._cacheNode('selector', selector);
 
     this._cacheWrapperNode = wrapper => this._cacheNode('wrapper', wrapper);
+    /* istanbul ignore next */
+
 
     this._isFirst = node => {
       const {
@@ -85,6 +87,8 @@ class ScrollItem extends _baseComponent.default {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this._isLast = node => {
       const {

package/lib/cjs/tabs/TabPane.js

@@ -75,6 +75,8 @@ class TabPane extends _react.PureComponent {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this.hideScroll = () => {
       if (this.ref && this.ref.current) {
@@ -82,6 +84,8 @@ class TabPane extends _react.PureComponent {
         this.isAnimating = true;
       }
     };
+    /* istanbul ignore next */
+
 
     this.autoScroll = () => {
       if (this.ref && this.ref.current) {

package/lib/cjs/tabs/index.js

@@ -112,6 +112,8 @@ class Tabs extends _baseComponent.default {
     this.onTabClick = (activeKey, event) => {
       this.foundation.handleTabClick(activeKey, event);
     };
+    /* istanbul ignore next */
+
 
     this.rePosChildren = (children, activeKey) => {
       const newChildren = [];

package/lib/cjs/transfer/index.d.ts

@@ -39,6 +39,7 @@ export interface SourcePanelProps {
     noMatch: boolean;
     filterData: Array<DataItem>;
     sourceData: Array<DataItem>;
+    propsDataSource: DataSource;
     allChecked: boolean;
     showNumber: number;
     inputValue: string;

package/lib/cjs/transfer/index.js

@@ -296,7 +296,8 @@ class Transfer extends _baseComponent.default {
       loading,
       type,
       emptyContent,
-      renderSourcePanel
+      renderSourcePanel,
+      dataSource
     } = this.props;
     const totalToken = locale.total;
     const inSearchMode = inputValue !== '';
@@ -356,6 +357,7 @@ class Transfer extends _baseComponent.default {
       noMatch,
       filterData,
       sourceData: data,
+      propsDataSource: dataSource,
       allChecked: !leftContainesNotInSelected,
       showNumber,
       inputValue,

package/lib/es/cascader/index.js

@@ -366,7 +366,7 @@ class Cascader extends BaseComponent {
 
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
-      this.foundation.handleClearEnterPress();
+      this.foundation.handleClearEnterPress(e);
     };
 
     this.showClearBtn = () => {

package/lib/es/collapse/item.js

@@ -72,9 +72,11 @@ export default class CollapsePanel extends PureComponent {
       className,
       children,
       itemKey,
-      reCalcKey
+      reCalcKey,
+      header,
+      extra
     } = _a,
-          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey"]);
+          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra"]);
 
     const {
       keepDOM,

package/lib/es/modal/Modal.js

@@ -214,6 +214,9 @@ class Modal extends BaseComponent {
         this.props.onOk(e);
       },
       notifyClose: () => {
+        var _a, _b;
+
+        (_b = (_a = this.props.motion) === null || _a === void 0 ? void 0 : _a.didLeave) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.props.afterClose();
       },
       toggleHidden: (hidden, callback) => {

package/lib/es/scrollList/scrollItem.js

@@ -39,6 +39,8 @@ export default class ScrollItem extends BaseComponent {
     this._cacheSelectorNode = selector => this._cacheNode('selector', selector);
 
     this._cacheWrapperNode = wrapper => this._cacheNode('wrapper', wrapper);
+    /* istanbul ignore next */
+
 
     this._isFirst = node => {
       const {
@@ -55,6 +57,8 @@ export default class ScrollItem extends BaseComponent {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this._isLast = node => {
       const {

package/lib/es/tabs/TabPane.js

@@ -48,6 +48,8 @@ class TabPane extends PureComponent {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this.hideScroll = () => {
       if (this.ref && this.ref.current) {
@@ -55,6 +57,8 @@ class TabPane extends PureComponent {
         this.isAnimating = true;
       }
     };
+    /* istanbul ignore next */
+
 
     this.autoScroll = () => {
       if (this.ref && this.ref.current) {

package/lib/es/tabs/index.js

@@ -49,6 +49,8 @@ class Tabs extends BaseComponent {
     this.onTabClick = (activeKey, event) => {
       this.foundation.handleTabClick(activeKey, event);
     };
+    /* istanbul ignore next */
+
 
     this.rePosChildren = (children, activeKey) => {
       const newChildren = [];

package/lib/es/transfer/index.d.ts

@@ -39,6 +39,7 @@ export interface SourcePanelProps {
     noMatch: boolean;
     filterData: Array<DataItem>;
     sourceData: Array<DataItem>;
+    propsDataSource: DataSource;
     allChecked: boolean;
     showNumber: number;
     inputValue: string;

package/lib/es/transfer/index.js

@@ -254,7 +254,8 @@ class Transfer extends BaseComponent {
       loading,
       type,
       emptyContent,
-      renderSourcePanel
+      renderSourcePanel,
+      dataSource
     } = this.props;
     const totalToken = locale.total;
     const inSearchMode = inputValue !== '';
@@ -312,6 +313,7 @@ class Transfer extends BaseComponent {
       noMatch,
       filterData,
       sourceData: data,
+      propsDataSource: dataSource,
       allChecked: !leftContainesNotInSelected,
       showNumber,
       inputValue,

package/modal/Modal.tsx

@@ -15,6 +15,7 @@ import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } f
 import { Locale } from '../locale/interface';
 import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
+import { MotionObject } from "@douyinfe/semi-foundation/utils/type";
 
 export const destroyFns: any[] = [];
 export type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
@@ -156,6 +157,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                 this.props.onOk(e);
             },
             notifyClose: () => {
+                (this.props.motion as MotionObject)?.didLeave?.();
                 this.props.afterClose();
             },
             toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => {

package/modal/confirm.tsx

@@ -118,4 +118,4 @@ export function withConfirm(props: ModalReactProps) {
         icon: <IconHelpCircle />,
         ...props
     };
-}
+}

package/overflowList/_story/overflowList.stories.js

@@ -352,5 +352,49 @@ const LargeData = () => {
   );
 };
 
+export const OverflowListWithSlide = () =>{
+   const [width, setWidth] = useState(100);
+    const renderOverflow = items => {
+        return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
+    };
+    const renderItem = (item, ind) => {
+        return (
+            <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
+                {item.icon}
+                {item.key}
+            </Tag>
+        );
+    };
+
+    const items = [
+        { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },
+        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
+        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
+        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },
+        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },
+        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
+    ];
+
+    return (
+        <div>
+            <Slider step={1} value={width} onChange={value => setWidth(value)} />
+            <br />
+            <br />
+            <div style={{ width: `${width}%` }}>
+                <OverflowList
+                    items={items}
+                    // minVisibleItems={3}
+                    overflowRenderer={renderOverflow}
+                    visibleItemRenderer={renderItem}
+                />
+            </div>
+        </div>
+    );
+}
+
+OverflowListWithSlide.story = {
+  name: 'overflowList with slide',
+};
+
 // TODO large data will cause memory heap
 // stories.add('large amount of data', () => <LargeData />);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.9.0-beta.1",
+    "version": "2.9.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.9.0-beta.1",
-        "@douyinfe/semi-animation-react": "2.9.0-beta.1",
-        "@douyinfe/semi-foundation": "2.9.0-beta.1",
-        "@douyinfe/semi-icons": "2.9.0-beta.1",
-        "@douyinfe/semi-illustrations": "2.9.0-beta.1",
-        "@douyinfe/semi-theme-default": "2.9.0-beta.1",
+        "@douyinfe/semi-animation": "2.9.0",
+        "@douyinfe/semi-animation-react": "2.9.0",
+        "@douyinfe/semi-foundation": "2.9.0",
+        "@douyinfe/semi-icons": "2.9.0",
+        "@douyinfe/semi-illustrations": "2.9.0",
+        "@douyinfe/semi-theme-default": "2.9.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b246f204d2f33e5de4155b5d0377eace25b6456f",
+    "gitHead": "22b74e58077b068daa6b35bc8b32f47a064734a3",
     "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.9.0-beta.1",
+        "@douyinfe/semi-scss-compile": "2.9.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/scrollList/_story/SingleWheelList/index.js

@@ -0,0 +1,72 @@
+import { ScrollList, ScrollItem, Button } from '@douyinfe/semi-ui';
+import React from 'react';
+
+class SingleScrollListDemo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectIndex3: -2,
+        };
+
+        this.minutes = new Array(60).fill(0).map((itm, index) => {
+            return {
+                value: index,
+                disabled: index % 2 === 1 ? true : false,
+            };
+        });
+        this.onSelectMinute = this.onSelectMinute.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+        this.renderFooter = this.renderFooter.bind(this);
+    }
+
+
+    onSelectMinute(data) {
+        console.log('You have choose the minute for: ', data.value);
+        this.setState({
+            ['selectIndex' + data.type]: data.index,
+        });
+    }
+
+    handleClose() {
+        console.log('close');
+    }
+
+    renderFooter() {
+        return (
+            <Button size="small" type="primary" onClick={this.handleClose}>
+                Ok
+            </Button>
+        );
+    }
+
+    render() {
+        let list = this.list;
+        const scrollStyle = {
+            border: 'unset',
+            boxShadow: 'unset',
+        };
+        const commonProps = {
+            // mode: 'normal',
+            mode: 'wheel',
+            cycled: false,
+            motion: false,
+        };
+        return (
+            <div>
+                <ScrollList style={scrollStyle} header={'单个无限滚动列表'} footer={this.renderFooter()}>
+                    <ScrollItem
+                        {...commonProps}
+                        list={this.minutes}
+                        type={3}
+                        selectedIndex={this.state.selectIndex3}
+                        onSelect={this.onSelectMinute}
+                        aria-label="分钟"
+                        cycled
+                    />
+                </ScrollList>
+            </div>
+        );
+    }
+}
+
+export default SingleScrollListDemo;

package/scrollList/_story/scrolllist.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import WheelListDemo from './WheelList';
 import ScrollListDemo from './ScrollList';
+import SingleScrollListDemo from './SingleWheelList';
 
 
 export default {
@@ -24,3 +25,9 @@ export const _WheelListDemo = () => <WheelListDemo />;
 _WheelListDemo.story = {
   name: 'wheel list demo',
 };
+
+export const SingleScrollList = () => <SingleScrollListDemo />;
+
+SingleScrollList.story = {
+  name: 'single scroll list demo',
+};

package/scrollList/scrollItem.tsx

@@ -178,6 +178,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
 
     _cacheWrapperNode = (wrapper: Element) => this._cacheNode('wrapper', wrapper);
 
+    /* istanbul ignore next */
     _isFirst = (node: Element) => {
         const { list } = this;
 
@@ -191,6 +192,8 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         return false;
     };
 
+
+    /* istanbul ignore next */
     _isLast = (node: Element) => {
         const { list } = this;
 

package/table/__test__/table.test.js

@@ -109,6 +109,7 @@ describe(`Table`, () => {
             myCls,
             myClsIndex,
         });
+        demo.unmount();
     });
     it(`test object columns appearance`, async () => {
         const myCls = `my-tr-class`;

package/tabs/TabPane.tsx

@@ -53,6 +53,7 @@ class TabPane extends PureComponent<TabPaneProps> {
         return false;
     };
 
+    /* istanbul ignore next */
     hideScroll = (): void => {
         if (this.ref && this.ref.current) {
             this.ref.current.style.overflow = 'hidden';
@@ -60,6 +61,7 @@ class TabPane extends PureComponent<TabPaneProps> {
         }
     };
 
+    /* istanbul ignore next */
     autoScroll = (): void => {
         if (this.ref && this.ref.current) {
             this.ref.current.style.overflow = '';

package/tabs/_story/tabs.stories.js

@@ -795,3 +795,75 @@ export const TabSize = () => <TabSizeDemo />;
 TabSize.story = {
   name: 'tab size',
 };
+
+class TabListChangeDemo extends React.Component {
+   constructor() {
+    super();
+    this.state = {
+      itemKey: '1',
+      tabList:[
+      {
+        tab: '文档',
+        itemKey: '1',
+      },
+      {
+        tab: '快速起步',
+        itemKey: '2',
+      },
+      {
+        tab: '帮助',
+        itemKey: '3',
+      },
+      {
+        tab: '关于',
+        itemKey: '4',
+      },
+      {
+        tab: '资源工具',
+        itemKey: '5',
+      },
+    ]
+    };
+    this.onTabClick = this.onTabClick.bind(this);
+  }
+
+  onTabClick(itemKey, type) {
+    this.setState({
+      [type]: itemKey,
+      tabList: [{
+        tab: '文档',
+        itemKey: '1',
+      }]
+    });
+  }
+
+  render() {
+    const contentList = [
+      <div>文档</div>,
+      <div>快速起步</div>,
+      <div>帮助</div>,
+      <div>关于</div>,
+      <div>资源工具</div>,
+    ];
+    return (
+      <Tabs
+        style={style}
+        type="line"
+        tabList={this.state.tabList}
+        onTabClick={itemKey => {
+          this.onTabClick(itemKey, 'itemKey');
+        }}
+      >
+        {contentList[this.state.itemKey]}
+        <span>test</span>
+        <span>test2</span>
+      </Tabs>
+    );
+  }
+}
+
+export const TabListChange = () => <TabListChangeDemo />;
+
+TabListChange.story = {
+  name: 'tablist change',
+};

package/tabs/index.tsx

@@ -192,6 +192,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         this.foundation.handleTabClick(activeKey, event);
     };
 
+    /* istanbul ignore next */
     rePosChildren = (children: ReactElement[], activeKey: string): ReactElement[] => {
         const newChildren: ReactElement[] = [];
 

package/tagInput/_story/tagInput.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Toast, Icon, Button, Avatar } from '@douyinfe/semi-ui/';
+import { Toast, Icon, Button, Avatar, Form } from '@douyinfe/semi-ui/';
 import TagInput from '../index';
 import { IconGift, IconVigoLogo } from '@douyinfe/semi-icons';
 const style = {
@@ -412,3 +412,16 @@ export const PrefixSuffix = () => (
 PrefixSuffix.story = {
   name: 'prefix / suffix',
 };
+
+
+export const TagInputInForm = () => (
+  <>
+    <Form onSubmit={() => Toast.info('123')}>
+      <TagInput showClear />
+    </Form>
+  </>
+);
+
+PrefixSuffix.story = {
+  name: 'TagInputInForm'
+};