@douyinfe/semi-ui 2.8.2 → 2.9.0

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/slider/_story/slider.stories.js

@@ -254,14 +254,15 @@ SliderInScrollContainer.story = {
 
 class ControlledSlider extends Component {
   state = {
-    value: 50,
-    rangeValue: undefined,
+    value: 30,
+    rangeValue: [10, 30],
   };
   changeValue = () => {
     this.setState({ value: this.state.value + 10 });
+    const [start, end] = this.state.rangeValue;
+    this.setState({ rangeValue: [start - 10, end + 10]})
   };
   changeRangeValue = rangeValue => {
-    console.log('rangeValue' + rangeValue);
     this.setState({ rangeValue: rangeValue });
   };
   render() {
@@ -269,21 +270,42 @@ class ControlledSlider extends Component {
     return (
       <div>
         <Button onClick={() => this.changeValue()}>点击改变value</Button>
-        <div style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+        <div data-cy="horizontalNoChangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+          <Slider
+            value={30}
+            onChange={value => {
+              console.log('value改变了' + value);
+            }}
+          ></Slider>
+        </div>
+        <div data-cy="horizontalOnChangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
           <Slider
             value={value}
             onChange={value => {
               console.log('value改变了' + value);
+              this.setState({value: value});
             }}
           ></Slider>
         </div>
-        <div style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+        <div data-cy="horizontalNoChangeRangeSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
           <Slider
             value={rangeValue}
-            onChange={rangeValue => this.changeRangeValue(rangeValue)}
+            onChange={rangeValue => {
+              console.log('value改变了' + rangeValue);
+            }}
             range
           ></Slider>
         </div>
+        <div data-cy="horizontalNoChangeVerticalSlider" style={{ width: 800, marginLeft: 20, marginTop: 40 }}>
+          <Slider
+            value={40}
+            vertical
+            onChange={value => {
+              console.log('value改变了' + value);
+            }}
+            style={{height: '300px'}}
+          ></Slider>
+        </div>
       </div>
     );
   }

package/slider/index.tsx

@@ -195,29 +195,33 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
                 this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
             },
-            onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false): boolean | void => {
+            onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false, outPutValue): boolean | void => {
 
                 const sliderDOMIsInRenderTree = this.foundation.checkAndUpdateIsInRenderTreeState();
                 if (!sliderDOMIsInRenderTree) {
                     return;
                 }
 
-                const { value, onChange } = this.props;
-                const moveValue = this.foundation.transPosToValue(mousePos, isMin);
-                if (moveValue === false) {
-                    return;
+                const { value } = this.props;
+                
+
+                let finalOutPutValue = outPutValue;
+                if (finalOutPutValue === undefined) {
+                    const moveValue = this.foundation.transPosToValue(mousePos, isMin);
+                    if (moveValue === false) {
+                        return;
+                    }
+                    finalOutPutValue = this.foundation.outPutValue(moveValue);
                 }
 
-                const outPutValue = this.foundation.outPutValue(moveValue);
                 const { currentValue } = this.state;
-                if (!isEqual(this.foundation.outPutValue(currentValue), outPutValue)) {
-                    onChange(outPutValue);
+                if (!isEqual(this.foundation.outPutValue(currentValue), finalOutPutValue)) {
                     if (!clickTrack && this.foundation.valueFormatIsCorrect(value)) {
                         // still require afterChangeCallback when click on the track directly, need skip here
                         return false;
                     }
                     this.setState({
-                        currentValue: outPutValue,
+                        currentValue: finalOutPutValue,
                     }, stateChangeCallback);
                 }
             },
@@ -307,7 +311,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             'aria-labelledby': ariaLabelledby,
             'aria-disabled': disabled
         };
-        vertical && Object.assign(commonAria, {'aria-orientation': 'vertical'});
+        vertical && Object.assign(commonAria, { 'aria-orientation': 'vertical' });
 
         const handleContents = !range ? (
             <Tooltip
@@ -494,6 +498,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         });
                         const markPercent = (Number(mark) - min) / (max - min);
                         return activeResult ? (
+                            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                             <span
                                 key={mark}
                                 onClick={e => this.foundation.handleWrapClick(e)}

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'
+};

package/tooltip/_story/tooltip.stories.js

@@ -404,6 +404,115 @@ AdjustPosition.story = {
   name: '自适应',
 };
 
+export const AdjustPosIfNeed = () => {
+  const tops = [
+        ['topLeft', 'TL'],
+        ['top', 'Top'],
+        ['topRight', 'TR'],
+    ];
+    const lefts = [
+        ['leftTop', 'LT'],
+        ['left', 'Left'],
+        ['leftBottom', 'LB'],
+    ];
+    const rights = [
+        ['rightTop', 'RT'],
+        ['right', 'Right'],
+        ['rightBottom', 'RB'],
+    ];
+    const bottoms = [
+        ['bottomLeft', 'BL'],
+        ['bottom', 'Bottom'],
+        ['bottomRight', 'BR'],
+    ];
+
+     return (
+        <div style={{ paddingLeft: 40 }}>
+            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
+                {tops.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag 
+                          style={{ marginRight: '8px' }}
+                          data-cy={Array.isArray(pos) ? pos[0] : pos}
+                        >
+                          {Array.isArray(pos) ? pos[1] : pos}
+                        </Tag>
+                    </Tooltip>
+                ))}
+            </div>
+            <div style={{ width: 40, float: 'left' }}>
+                {lefts.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag data-cy={Array.isArray(pos) ? pos[0] : pos} style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                    </Tooltip>
+                ))}
+            </div>
+            <div style={{ width: 40, marginLeft: 180 }}>
+                {rights.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag data-cy={Array.isArray(pos) ? pos[0] : pos} style={{ marginBottom: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                    </Tooltip>
+                ))}
+            </div>
+            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
+                {bottoms.map((pos, index) => (
+                    <Tooltip
+                        showArrow
+                        arrowPointAtCenter
+                        content={
+                            <article>
+                                Hi ByteDancer, this is a tooltip.
+                                <br /> We have 2 lines.
+                            </article>
+                        }
+                        position={Array.isArray(pos) ? pos[0] : pos}
+                        key={index}
+                    >
+                        <Tag data-cy={Array.isArray(pos) ? pos[0] : pos} position={Array.isArray(pos) ? pos[0] : pos} style={{ marginRight: '8px' }}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+                    </Tooltip>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+AdjustPosIfNeed.story = {
+  name: '自适应位置',
+};
+
 export const CompositeComponent = () => (
   <div
     style={{
@@ -764,7 +873,7 @@ export const leftTopOverDemo = () => {
     content,
     trigger: 'click',
     showArrow: false,
-    visible,
+    visible:true,
     trigger: 'custom',
     motion: false,
   };
@@ -774,34 +883,37 @@ export const leftTopOverDemo = () => {
 
   return (
     <div data-cy="wrapper">
-      <Button onClick={() => setVisible(!visible)}>toggle visible</Button>
-      <div style={{ paddingTop: 200 }}>
+      <Button onClick={() => setVisible(!visible)} data-cy="toggleVisible">toggle visible</Button>
+      <div style={{ paddingTop: 110 }}>
         <Space spacing={80}>
-          <Tooltip {...commonProps} position="leftTopOver">
-            <Button data-cy="leftTopOver" style={buttonStyle}>
-              leftTopOver
-            </Button>
-          </Tooltip>
-          <Tooltip {...commonProps} position="leftBottomOver">
+          <Tooltip {...commonProps} position="leftBottomOver" trigger="click">
             <Button data-cy="leftBottomOver" style={buttonStyle}>
               leftBottomOver
             </Button>
           </Tooltip>
-          <Tooltip {...commonProps} position="rightTopOver">
-            <Button data-cy="rightTopOver" style={buttonStyle}>
-              rightTopOver
-            </Button>
-          </Tooltip>
-          <Tooltip {...commonProps} position="rightBottomOver">
+          <Tooltip {...commonProps} position="rightBottomOver" trigger="click">
             <Button data-cy="rightBottomOver" style={buttonStyle}>
               rightBottomOver
             </Button>
           </Tooltip>
         </Space>
       </div>
+      <Space spacing={80}>
+        <Tooltip {...commonProps} position="leftTopOver" trigger="click">
+          <Button data-cy="leftTopOver" style={buttonStyle}>
+            leftTopOver
+          </Button>
+        </Tooltip>
+        <Tooltip {...commonProps} position="rightTopOver" trigger="click">
+          <Button data-cy="rightTopOver" style={buttonStyle}>
+            rightTopOver
+          </Button>
+        </Tooltip>
+      </Space>
     </div>
   );
 };
+
 leftTopOverDemo.storyName = `leftTopOver visible`;
 leftTopOverDemo.parameters = {
   chromatic: {

package/transfer/index.tsx

@@ -60,6 +60,8 @@ export interface SourcePanelProps {
     filterData: Array<DataItem>;
     /* All items */
     sourceData: Array<DataItem>;
+    /* transfer props' dataSource */
+    propsDataSource: DataSource,
     /* Whether to select all */
     allChecked: boolean;
     /* Number of filtered results */
@@ -359,7 +361,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
     renderLeft(locale: Locale['Transfer']) {
         const { data, selectedItems, inputValue, searchResult } = this.state;
-        const { loading, type, emptyContent, renderSourcePanel } = this.props;
+        const { loading, type, emptyContent, renderSourcePanel, dataSource } = this.props;
         const totalToken = locale.total;
         const inSearchMode = inputValue !== '';
         const showNumber = inSearchMode ? searchResult.size : data.length;
@@ -423,6 +425,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             noMatch,
             filterData,
             sourceData: data,
+            propsDataSource: dataSource,
             allChecked: !leftContainesNotInSelected,
             showNumber,
             inputValue,

package/typography/__test__/typography.test.js

@@ -24,6 +24,7 @@ describe(`Typography`, () => {
         const typographyParagraph = mount(<Typography.Paragraph {...props}>Semi Design</Typography.Paragraph>)
         const p = typographyParagraph.find('div.semi-typography-paragraph');
         expect(p.length).toEqual(1);
+        typographyParagraph.unmount();
     });
 
     it('typography copyable', () => {

package/upload/__test__/upload.test.js

@@ -564,6 +564,7 @@ describe('Upload', () => {
         requests[0].respond(200, { 'Content-Type': 'application/json' }, 'success');
         const previewContent = upload.find(`.${BASE_CLASS_PREFIX}-upload-file-card-preview`);
         expect(previewContent.contains(specificContent)).toEqual(true);
+        upload.unmount();
     });
 
     it('afterUpload', () => {
@@ -642,6 +643,7 @@ describe('Upload', () => {
         ).toEqual(true);
         expect(stateFileList.every(item => item.name !== 'remove.jpg')).toEqual(true);
         expect(stateFileList[3].status === 'uploadFail' && stateFileList[3].name === rename).toEqual(true);
+        upload.unmount();
     });
 
     it('uploadTrigger', () => {

package/upload/_story/upload.stories.js

@@ -572,8 +572,8 @@ export const Draggable = () => (
     <Upload
       {...commonProps}
       draggable={true}
-      disabled
-      accept="application/pdf,.jpeg"
+      // disabled
+      accept="application/image/*,.md"
       dragMainText={'点击上传文件或拖拽文件到这里'}
       dragSubText="支持的文件类型：.jpg、.pdf"
     ></Upload>