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

package/switch/index.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
+/* eslint-disable max-len */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -33,6 +33,7 @@ export interface SwitchProps {
 export interface SwitchState {
     nativeControlChecked: boolean;
     nativeControlDisabled: boolean;
+    focusVisible: boolean;
 }
 
 class Switch extends BaseComponent<SwitchProps, SwitchState> {
@@ -74,6 +75,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
         this.state = {
             nativeControlChecked: false,
             nativeControlDisabled: false,
+            focusVisible: false
         };
         this.switchRef = React.createRef();
         this.foundation = new SwitchFoudation(this.adapter);
@@ -105,14 +107,25 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
             setNativeControlDisabled: (nativeControlDisabled: boolean): void => {
                 this.setState({ nativeControlDisabled });
             },
+            setFocusVisible: (focusVisible: boolean): void => {
+                this.setState({ focusVisible });
+            },
             notifyChange: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>): void => {
                 this.props.onChange(checked, e);
             },
         };
     }
 
+    handleFocusVisible = (event: React.FocusEvent) => {
+        this.foundation.handleFocusVisible(event);
+    }
+
+    handleBlur = (event: React.FocusEvent) => {
+        this.foundation.handleBlur();
+    }
+
     render() {
-        const { nativeControlChecked, nativeControlDisabled } = this.state;
+        const { nativeControlChecked, nativeControlDisabled, focusVisible } = this.state;
         const { className, style, onMouseEnter, onMouseLeave, size, checkedText, uncheckedText, loading, id } = this.props;
         const wrapperCls = cls(className, {
             [cssClasses.PREFIX]: true,
@@ -121,10 +134,10 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
             [cssClasses.LARGE]: size === 'large',
             [cssClasses.SMALL]: size === 'small',
             [cssClasses.LOADING]: loading,
+            [cssClasses.FOCUS]: focusVisible,
         });
         const switchProps = {
             type: 'checkbox',
-            role: 'switch',
             className: cssClasses.NATIVE_CONTROL,
             disabled: nativeControlDisabled || loading,
             checked: nativeControlChecked || false,
@@ -157,13 +170,17 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                     {...switchProps}
                     ref={this.switchRef}
                     id={id}
+                    role='switch'
                     aria-checked={nativeControlChecked}
                     aria-invalid={this.props['aria-invalid']}
                     aria-errormessage={this.props['aria-errormessage']}
                     aria-label={this.props['aria-label']}
                     aria-labelledby={this.props['aria-labelledby']}
                     aria-describedby={this.props["aria-describedby"]}
+                    aria-disabled={this.props['disabled']}
                     onChange={e => this.foundation.handleChange(e.target.checked, e)}
+                    onFocus={e => this.handleFocusVisible(e)}
+                    onBlur={e => this.handleBlur(e)}
                 />
             </div>
         );

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/__test__/tagInput.test.js

@@ -78,7 +78,7 @@ describe('TagInput', () => {
 
     it('TagInput with defaultValue and value is undefined', () => {
         const props = {
-            defaultValue: ['tiktok', 'hotsoon'],
+            defaultValue: ['semi', 'hotsoon'],
             value: undefined,
         };
         const tagInput = getTagInput(props);
@@ -89,7 +89,7 @@ describe('TagInput', () => {
 
     it('TagInput with defaultValue and value is null', () => {
         const props = {
-            defaultValue: ['tiktok', 'hotsoon'],
+            defaultValue: ['semi', 'hotsoon'],
             value: null,
         };
         const tagInput = getTagInput(props);
@@ -123,26 +123,26 @@ describe('TagInput', () => {
         /* when separator is null */
         const props2 = {
             separator: null,
-            inputValue: 'tiktok-hotsoon'
+            inputValue: 'semi-hotsoon'
         }
         const tagInput2 = getTagInput(props2);
         tagInput2.find('input').simulate('keyDown', { keyCode: 13 });
         const tags2 = tagInput2.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
         expect(tags2.length).toEqual(1);
-        expect(tags2.at(0).getDOMNode().textContent).toEqual('tiktok-hotsoon');
+        expect(tags2.at(0).getDOMNode().textContent).toEqual('semi-hotsoon');
         tagInput2.unmount();
 
         /* when separator is number */
         const props3 = {
             separator: 1,
-            inputValue: 'tiktok1hotsoon'
+            inputValue: 'semi1design'
         }
         const tagInput3 = getTagInput(props3);
         tagInput3.find('input').simulate('keyDown', { keyCode: 13 });
         const tags3 = tagInput3.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
         expect(tags3.length).toEqual(2);
-        expect(tags3.at(0).getDOMNode().textContent).toEqual('tiktok');
-        expect(tags3.at(1).getDOMNode().textContent).toEqual('hotsoon');
+        expect(tags3.at(0).getDOMNode().textContent).toEqual('semi');
+        expect(tags3.at(1).getDOMNode().textContent).toEqual('design');
         tagInput3.unmount();
     });
 
@@ -352,10 +352,10 @@ describe('TagInput', () => {
 
     it('tagInput with set value to null  ', () => {
         const props = {
-            value: ['tiktok']
+            value: ['semi']
         };
         const tagInput = getTagInput(props);
-        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('semi');
         tagInput.setProps({ value: null });
         tagInput.update();
         const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
@@ -364,10 +364,10 @@ describe('TagInput', () => {
 
     it('tagInput with set value to null  ', () => {
         const props = {
-            value: ['tiktok']
+            value: ['semi']
         };
         const tagInput = getTagInput(props);
-        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('semi');
         tagInput.setProps({ value: undefined });
         tagInput.update();
         const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);

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/timePicker/TimePicker.tsx

@@ -475,7 +475,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
 
         const panelPrefix = classNames({
             [`${prefixCls}-panel`]: true,
-            [`${prefixCls}-panel-${ size}`]: size,
+            [`${prefixCls}-panel-${size}`]: size,
         });
 
         const inputProps = {

package/timePicker/_story/timepicker.stories.js

@@ -1,6 +1,6 @@
 import React, { Component, useState } from 'react';
 import TimePickerPanel from '../index';
-import { TimePicker as BasicTimePicker, Button } from '../../index';
+import { TimePicker as BasicTimePicker, Button, Form } from '../../index';
 import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
 import { get } from 'lodash';
 
@@ -44,6 +44,12 @@ const init = () => {
 init();
 
 export const TimePickerPanelDefault = () => {
+   const initValues = {
+    testRange: [
+      new Date("2022-04-17T15:00:00"),
+      new Date("2022-04-17T18:00:00"),
+    ],
+  };
   return (
     <div>
       <TimePicker panelHeader={'Time Select'} onChange={val => console.log(val)} />
@@ -53,6 +59,19 @@ export const TimePickerPanelDefault = () => {
         defaultOpen={true}
         scrollItemProps={{ cycled: false }}
       />
+      <TimePicker use12Hours defaultValue={"上午 10:32:33"}/>
+      <br/><br/>
+      <TimePicker type="timeRange" use12Hours format="a h:mm"  defaultValue={["下午 08:11", "上午 11:21"]} />
+      <Form initValues={initValues}>
+      <pre>{JSON.stringify(initValues)}</pre>
+      <Form.TimePicker
+        use12Hours
+        field="testRange"
+        label="Time Range"
+        type="timeRange"
+        format="a hh:mm"
+      />
+    </Form>
     </div>
   );
 };

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/tooltip/index.tsx

@@ -581,7 +581,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 }
             </TooltipTransition>
         ) : (
-            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? undefined : 'visible', ...style }}>
+            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? 'hidden' : 'visible', ...style }}>
                 {contentNode}
                 {icon}
             </div>

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>