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

package/lib/es/carousel/interface.d.ts

@@ -0,0 +1,62 @@
+import React, { ReactNode } from "react";
+import { strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+export interface CarouselMethod {
+    next?: () => void;
+    prev?: () => void;
+    goTo?: () => void;
+    play?: () => void;
+    stop?: () => void;
+}
+export interface CarouselProps {
+    activeIndex?: number;
+    animation?: typeof strings.ANIMATION_MAP[number];
+    arrowProps?: ArrowProps;
+    autoPlay?: boolean | {
+        interval?: number;
+        hoverToPause?: boolean;
+    };
+    arrowType?: typeof strings.ARROW_MAP[number];
+    children?: ReactNode | Array<ReactNode>;
+    className?: string;
+    defaultActiveIndex?: number;
+    indicatorPosition?: typeof strings.POSITION_MAP[number];
+    indicatorSize?: typeof strings.SIZE[number];
+    theme?: typeof strings.THEME_MAP[number];
+    indicatorType?: typeof strings.TYPE_MAP[number];
+    onChange?: (index: number, preIndex: number) => void;
+    showArrow?: boolean;
+    showIndicator?: boolean;
+    slideDirection?: typeof strings.DIRECTION[number];
+    speed?: number;
+    style?: React.CSSProperties;
+    trigger?: typeof strings.TRIGGER[number];
+}
+export interface CarouselIndicatorProps {
+    activeIndex?: number;
+    className?: string;
+    defaultActiveIndex?: number;
+    position?: typeof strings.POSITION_MAP[number];
+    size?: typeof strings.SIZE[number];
+    total?: number;
+    theme?: typeof strings.THEME_MAP[number];
+    type?: typeof strings.TYPE_MAP[number];
+    onIndicatorChange?: (activeIndex: number) => void;
+    style?: React.CSSProperties;
+    trigger?: typeof strings.TRIGGER[number];
+}
+export interface CarouselArrowProps {
+    type?: typeof strings.ARROW_MAP[number];
+    theme?: typeof strings.THEME_MAP[number];
+    prev?: () => void;
+    next?: () => void;
+    arrowProps?: ArrowProps;
+    timing: number;
+}
+export interface ArrowButton {
+    props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    children?: React.ReactNode;
+}
+export interface ArrowProps {
+    leftArrow?: ArrowButton;
+    rightArrow?: ArrowButton;
+}

package/lib/es/carousel/interface.js

@@ -0,0 +1 @@
+export {};

package/lib/es/cascader/index.js

@@ -84,7 +84,7 @@ class Cascader extends BaseComponent {
               e.preventDefault();
               this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
             }
-          }, displayProp === 'label' && keyEntities[nodeKey].data.label, displayProp === 'value' && keyEntities[nodeKey].data.value);
+          }, keyEntities[nodeKey].data[displayProp]);
         }
       }
 
@@ -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/form/hoc/withField.js

@@ -112,7 +112,8 @@ function withField(Component, opts) {
     const [cursor, setCursor, getCursor] = useStateWithGetter(0);
     const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
-    const rulesRef = useRef(rules); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const rulesRef = useRef(rules);
+    const validateRef = useRef(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -213,7 +214,7 @@ function withField(Component, opts) {
       let maybePromisedErrors; // let errorThrowSync;
 
       try {
-        maybePromisedErrors = validate(val, values);
+        maybePromisedErrors = validateRef.current(val, values);
       } catch (err) {
         // error throw by syncValidate
         maybePromisedErrors = err;
@@ -253,7 +254,7 @@ function withField(Component, opts) {
         finalVal = transform(val);
       }
 
-      if (validate) {
+      if (validateRef.current) {
         return _validate(finalVal, updater.getValue(), callOpts);
       } else if (latestRules) {
         return _validateInternal(finalVal, callOpts);
@@ -362,7 +363,8 @@ function withField(Component, opts) {
 
     useLayoutEffect(() => {
       rulesRef.current = rules;
-    }, [rules]); // exec validate once when trigger inlcude 'mount'
+      validateRef.current = validate;
+    }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
 
     useLayoutEffect(() => {
       if (validateOnMount) {

package/lib/es/index.d.ts

@@ -12,6 +12,7 @@ export { default as ButtonGroup } from './button/buttonGroup';
 export { default as Calendar } from './calendar';
 export { default as Card } from './card';
 export { default as CardGroup } from './card/cardGroup';
+export { default as Carousel } from './carousel';
 export { default as Cascader } from './cascader';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxGroup } from './checkbox/checkboxGroup';

package/lib/es/index.js

@@ -12,6 +12,7 @@ export { default as ButtonGroup } from './button/buttonGroup';
 export { default as Calendar } from './calendar';
 export { default as Card } from './card';
 export { default as CardGroup } from './card/cardGroup';
+export { default as Carousel } from './carousel';
 export { default as Cascader } from './cascader';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxGroup } from './checkbox/checkboxGroup';

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 {
@@ -172,7 +176,7 @@ export default class ScrollItem extends BaseComponent {
       } = this;
       const wrapperHeight = wrapper.offsetHeight;
       const itemHeight = this.getItmHeight(node);
-      const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+      const targetTop = (node.offsetTop || this.list.children.length * itemHeight / 2) - (wrapperHeight - itemHeight) / 2;
       this.scrollToPos(targetTop, duration);
     };
 

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

@@ -26,6 +26,7 @@ export interface SwitchProps {
 export interface SwitchState {
     nativeControlChecked: boolean;
     nativeControlDisabled: boolean;
+    focusVisible: boolean;
 }
 declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
     static propTypes: {
@@ -55,6 +56,8 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
     componentDidUpdate(prevProps: SwitchProps): void;
     componentWillUnmount(): void;
     get adapter(): SwitchAdapter<SwitchProps, SwitchState>;
+    handleFocusVisible: (event: React.FocusEvent) => void;
+    handleBlur: (event: React.FocusEvent) => void;
     render(): JSX.Element;
 }
 export default Switch;

package/lib/es/switch/index.js

@@ -1,7 +1,7 @@
 import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
-/* 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';
@@ -14,9 +14,19 @@ import Spin from '../spin';
 class Switch extends BaseComponent {
   constructor(props) {
     super(props);
+
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
     this.state = {
       nativeControlChecked: false,
-      nativeControlDisabled: false
+      nativeControlDisabled: false,
+      focusVisible: false
     };
     this.switchRef = /*#__PURE__*/React.createRef();
     this.foundation = new SwitchFoudation(this.adapter);
@@ -52,6 +62,11 @@ class Switch extends BaseComponent {
           nativeControlDisabled
         });
       },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
+      },
       notifyChange: (checked, e) => {
         this.props.onChange(checked, e);
       }
@@ -61,7 +76,8 @@ class Switch extends BaseComponent {
   render() {
     const {
       nativeControlChecked,
-      nativeControlDisabled
+      nativeControlDisabled,
+      focusVisible
     } = this.state;
     const {
       className,
@@ -80,11 +96,11 @@ class Switch extends BaseComponent {
       [cssClasses.DISABLED]: nativeControlDisabled,
       [cssClasses.LARGE]: size === 'large',
       [cssClasses.SMALL]: size === 'small',
-      [cssClasses.LOADING]: loading
+      [cssClasses.LOADING]: loading,
+      [cssClasses.FOCUS]: focusVisible
     });
     const switchProps = {
       type: 'checkbox',
-      role: 'switch',
       className: cssClasses.NATIVE_CONTROL,
       disabled: nativeControlDisabled || loading,
       checked: nativeControlChecked || false
@@ -109,13 +125,17 @@ class Switch extends BaseComponent {
     }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, 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"],
-      onChange: e => this.foundation.handleChange(e.target.checked, e)
+      "aria-disabled": this.props['disabled'],
+      onChange: e => this.foundation.handleChange(e.target.checked, e),
+      onFocus: e => this.handleFocusVisible(e),
+      onBlur: e => this.handleBlur(e)
     })));
   }
 

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/toast/toast.d.ts

@@ -41,7 +41,7 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
     close(e: React.MouseEvent): void;
     clearCloseTimer: () => void;
     startCloseTimer: () => void;
-    renderIcon(): true | React.ReactChild | React.ReactFragment;
+    renderIcon(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment;
     render(): JSX.Element;
 }
 export default Toast;

package/lib/es/tooltip/index.js

@@ -212,7 +212,7 @@ export default class Tooltip extends BaseComponent {
       }, portalEventSet, {
         "x-placement": placement,
         style: _Object$assign({
-          visibility: motion ? undefined : 'visible'
+          visibility: motion ? 'hidden' : 'visible'
         }, style)
       }), contentNode, icon);
       return /*#__PURE__*/React.createElement(Portal, {

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.10.0-beta.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.10.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.10.0-beta.0",
+        "@douyinfe/semi-foundation": "2.10.0-beta.0",
+        "@douyinfe/semi-icons": "2.10.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.10.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.10.0-beta.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": "10c5eff42fe3144451fd73d9d542a710d165d456",
     "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.10.0-beta.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;
 
@@ -326,7 +329,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         const { wrapper } = this;
         const wrapperHeight = wrapper.offsetHeight;
         const itemHeight = this.getItmHeight(node);
-        const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+        const targetTop =  (node.offsetTop || this.list.children.length * itemHeight / 2 )  - (wrapperHeight - itemHeight) / 2;
 
         this.scrollToPos(targetTop, duration);
     };