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

package/carousel/index.tsx

@@ -0,0 +1,294 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import  React, { ReactNode, Children, ReactChild, ReactFragment, ReactPortal } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import BaseComponent from "../_base/baseComponent";
+import { CarouselProps } from './interface';
+import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/carousel/constants';
+import CarouselFoundation, { CarouselAdapter } from '@douyinfe/semi-foundation/carousel/foundation';
+import CarouselIndicator from './CarouselIndicator';
+import CarouselArrow from './CarouselArrow';
+import '@douyinfe/semi-foundation/carousel/carousel.scss';
+import { debounce } from 'lodash';
+import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
+
+export interface CarouselState {
+    activeIndex: number;
+    children: (ReactChild | ReactFragment | ReactPortal)[];
+    preIndex: number;
+    isReverse: boolean;
+    isInit: boolean;
+}
+
+class Carousel extends BaseComponent<CarouselProps, CarouselState> {
+    static propTypes = {
+        activeIndex: PropTypes.number,
+        animation:PropTypes.oneOf(strings.ANIMATION_MAP),
+        arrowProps: PropTypes.object, 
+        autoPlay: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+        className: PropTypes.string,
+        defaultActiveIndex: PropTypes.number,
+        indicatorPosition: PropTypes.oneOf(strings.POSITION_MAP),
+        indicatorSize: PropTypes.oneOf(strings.SIZE),
+        indicatorType: PropTypes.oneOf(strings.TYPE_MAP),
+        theme: PropTypes.oneOf(strings.THEME_MAP),
+        onChange: PropTypes.func,
+        arrowType: PropTypes.oneOf(strings.ARROW_MAP),
+        showArrow: PropTypes.bool,
+        showIndicator: PropTypes.bool,
+        slideDirection: PropTypes.oneOf(strings.DIRECTION),
+        speed: PropTypes.number,
+        style: PropTypes.object,
+        trigger: PropTypes.oneOf(strings.TRIGGER)
+    };
+
+    static defaultProps: CarouselProps = {
+        children: [],
+        animation: 'slide',
+        autoPlay: true,
+        arrowType: 'always',
+        defaultActiveIndex: numbers.DEFAULT_ACTIVE_INDEX,
+        indicatorPosition: 'center',
+        indicatorSize: 'small',
+        indicatorType: 'dot',
+        theme: 'light',
+        onChange: () => undefined,
+        showArrow: true,
+        showIndicator: true,
+        slideDirection: 'left',
+        speed: numbers.DEFAULT_SPEED,
+        trigger: 'click'
+    };
+
+    foundation: CarouselFoundation;
+
+    constructor(props: CarouselProps) {
+        super(props);
+
+        this.foundation = new CarouselFoundation(this.adapter);
+        const defaultActiveIndex = this.foundation.getDefaultActiveIndex();
+
+        this.state = {
+            activeIndex: defaultActiveIndex,
+            children: this.getChildren(),
+            preIndex: defaultActiveIndex,
+            isReverse: false,
+            isInit: true
+        };
+    }
+
+    get adapter(): CarouselAdapter<CarouselProps, CarouselState> {
+        return {
+            ...super.adapter,
+            notifyChange: (activeIndex: number, preIndex: number): void => {
+                this.props.onChange(activeIndex, preIndex);
+            },
+            setNewActiveIndex: (activeIndex: number): void => {
+                this.setState({ activeIndex });
+            },
+            setPreActiveIndex: (preIndex: number): void => {
+                this.setState({ preIndex });
+            },
+            setIsReverse: (isReverse: boolean): void => {
+                this.setState({ isReverse });
+            },
+            setIsInit: (isInit: boolean): void => {
+                this.setState({ isInit });
+            }
+        };
+    }
+
+    static getDerivedStateFromProps(props: CarouselProps, state: CarouselState): Partial<CarouselState> {
+        const states: Partial<CarouselState> = {};
+        if (!isNullOrUndefined(props.activeIndex) && props.activeIndex !== state.activeIndex) {
+            states.activeIndex = props.activeIndex;
+        }
+        return states;
+    }
+
+    componentDidMount(): void {
+        this.handleAutoPlay();
+    }
+
+    componentWillUnmount(): void {
+        this.foundation.destroy();
+    }
+
+    play = (): void => {
+        return this.foundation.handleAutoPlay();
+    }
+
+    stop = (): void => {
+        return this.foundation.stop();
+    };
+
+    goTo = ( targetIndex: number): void => {
+        return this.foundation.goTo(targetIndex);
+    };
+
+    prev = (): void => {
+        return this.foundation.prev();
+    };
+
+    next = (): void => {
+        return this.foundation.next();
+    };
+    
+    handleAutoPlay = (): void => {
+        if (!this.foundation.getIsControledComponent()){
+            this.foundation.handleAutoPlay();
+        }
+    }
+
+    handleMouseEnter = (): void => {
+        const { autoPlay } = this.props;
+        if (typeof autoPlay !== 'object' || autoPlay.hoverToPause){
+            this.foundation.stop();
+        }
+    }
+
+    handleMouseLeave = (): void => {
+        const { autoPlay } = this.props;
+        if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControledComponent()){
+            this.foundation.handleAutoPlay();
+        }
+    }
+
+    onIndicatorChange = (activeIndex: number): void => {
+        return this.foundation.throttleChange(activeIndex);
+    };
+
+    getChildren  = (): (ReactChild | ReactFragment | ReactPortal)[] => {
+        const { children: originChildren } = this.props;
+        return Children.toArray(originChildren).filter(child=>{
+            return React.isValidElement(child);
+        });
+    }
+
+    getValidIndex = (activeIndex: number): number => {
+        return this.foundation.getValidIndex(activeIndex);
+    };
+
+
+    renderChildren = () => {
+        const { speed, animation } = this.props;
+        const { activeIndex, children, preIndex, isInit } = this.state;
+
+        return (
+            <>
+                {children.map((child: any, index: number) => {
+                    const isCurrent = index === activeIndex;
+                    const isPrev = index === this.getValidIndex(activeIndex - 1);
+                    const isNext = index === this.getValidIndex(activeIndex + 1); 
+
+                    const animateStyle = {
+                        transitionTimingFunction: 'ease',
+                        transitionDuration: `${speed}ms`,
+                        animationTimingFunction: 'ease',
+                        animationDuration: `${speed}ms`,
+                    };
+
+                    return React.cloneElement(child, {
+                        style: {
+                            ...child.props.style,
+                            ...animateStyle,
+                        },
+                        className: cls(child.props.className, {
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-prev`]: isPrev,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-next`]: isNext,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-current`]: isCurrent,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item`]: true,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-active`]: isCurrent,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-in`]:animation === 'slide' && !isInit && isCurrent,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-out`]:animation === 'slide'  && !isInit && index === preIndex,
+                        })
+                    });
+                })}
+            </>
+        );
+    }
+
+    renderIndicator = () => {
+        const { children, activeIndex } = this.state;
+        const { showIndicator, indicatorType, theme, indicatorPosition, indicatorSize, trigger } = this.props;
+
+        const carouselIndicatorCls = cls({
+            [cssClasses.CAROUSEL_INDICATOR]: true
+        });
+
+        if (showIndicator && children.length > 1){
+            return (
+                <div className={carouselIndicatorCls}>
+                    <CarouselIndicator
+                        type={indicatorType}
+                        total={children.length}
+                        activeIndex={activeIndex}
+                        position={indicatorPosition}
+                        trigger={trigger}
+                        size={indicatorSize}
+                        theme={theme}
+                        onIndicatorChange={this.onIndicatorChange}
+                    />
+                </div>
+            );
+        }
+        return null;
+    }
+
+    renderArrow = () => {
+        const { children } = this.state;
+        const { showArrow, arrowType, theme, arrowProps } = this.props;
+        const timing = this.foundation.getSwitchingTime();
+
+        if (showArrow && children.length > 1){
+            return (
+                <CarouselArrow 
+                    type={arrowType} 
+                    theme={theme} 
+                    prev={this.prev} 
+                    next={this.next}
+                    timing={timing}
+                    arrowProps={arrowProps}
+                />
+            );
+        }
+        return null;
+    };
+
+
+    render(): ReactNode {
+        const { animation, className, style, slideDirection } = this.props;
+        const { isReverse } = this.state;
+
+        const carouselWrapperCls = cls(className, {
+            [cssClasses.CAROUSEL]: true
+        });
+
+        return (
+            <div 
+                // role='listbox'
+                // tabIndex={0}
+                className={carouselWrapperCls} 
+                style={style} 
+                onMouseEnter={debounce(this.handleMouseEnter, 400)}
+                onMouseLeave={debounce(this.handleMouseLeave, 400)}
+                // onMouseEnter={this.handleMouseEnter}
+                // onMouseLeave={this.handleMouseLeave}
+                // onKeyDown={e => this.foundation.handleKeyDown(e)}
+            >
+                <div 
+                    className={cls([`${cssClasses.CAROUSEL_CONTENT}-${animation}`], {
+                        [`${cssClasses.CAROUSEL_CONTENT}`]: true,
+                        [`${cssClasses.CAROUSEL_CONTENT}-reverse`]: slideDirection === 'left' ? isReverse : !isReverse,
+                    })}
+                >
+                    {this.renderChildren()}
+                </div>
+                {this.renderIndicator()}
+                {this.renderArrow()}
+            </div>
+        );
+    }
+}
+
+export default Carousel;

package/carousel/interface.ts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from "react";
+import { strings } from '@douyinfe/semi-foundation/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/cascader/_story/cascader.stories.js

@@ -697,7 +697,8 @@ export const ShowClear = () => {
       <Cascader
         style={{ marginLeft: 700, width: 300 }}
         treeData={treeData1}
-        placeholder="Please select"
+        placeholder="Please select when multiple"
+        multiple
         showClear
       />
       <br />
@@ -1434,4 +1435,18 @@ export const DynamicTreeData = () => {
           <br />
       </div>
   );
-}
+}
+
+
+export const SuperLongList = () => {
+    let treeData = new Array(100).fill().map(() => ({ label: '浙江省', value: 'zhejiang' }));
+    treeData.push({ label: '到底啦', value: 'bottom' })
+    return (
+        <Cascader
+            style={{ width: 300 }}
+            treeData={treeData}
+            placeholder="请选择所在地区"
+            onListScroll={()=>{console.log(123)}}
+        />
+    );
+};

package/cascader/index.tsx

@@ -508,8 +508,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                             this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
                         }}
                     >
-                        {displayProp === 'label' && keyEntities[nodeKey].data.label}
-                        {displayProp === 'value' && keyEntities[nodeKey].data.value}
+                        {keyEntities[nodeKey].data[displayProp]}
                     </Tag>
                 );
             }
@@ -828,7 +827,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
      */
     handleClearEnterPress = (e: KeyboardEvent) => {
         e && e.stopPropagation();
-        this.foundation.handleClearEnterPress();
+        this.foundation.handleClearEnterPress(e);
     };
 
     showClearBtn = () => {

package/checkbox/_story/checkbox.stories.js

@@ -754,7 +754,7 @@ export const CheckboxGroupCardStyle = () => (
       >
         多选框标题
       </Checkbox>
-    </CheckboxGroup> */}
+    </CheckboxGroup>
   </>
 );
 

package/collapse/item.tsx

@@ -89,6 +89,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             children,
             itemKey,
             reCalcKey,
+            header,
+            extra,
             ...restProps
         } = this.props;
         const {

package/datePicker/_story/datePicker.stories.js

@@ -814,3 +814,40 @@ export const FixTriggerRenderClosePanel = () => {
 };
 FixTriggerRenderClosePanel.storyName = "fix triggerRender close bug"
 
+export const A11yKeyboardDemo = () => {
+  const [value, setValue] = useState(new Date('2022-08-08 00:00'));
+  const [rangeValue, setRangeValue] = useState([new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]);
+
+  const handleChange = v => {
+    console.log('change', v);
+    setValue(v);
+  };
+
+   const handleRangeChange = v => {
+    console.log('change', v);
+    setRangeValue(v);
+  };
+
+  return (
+    <Space vertical align='start' data-cy="space">
+      <div  data-cy="dateRange">
+        <DatePicker
+          value={rangeValue}
+          type="dateRange"
+          onChange={handleRangeChange}
+          showClear
+        />
+      </div>
+      <div data-cy="date">
+        <DatePicker
+          onChange={handleChange}
+          showClear
+          multiple
+        />
+      </div>
+    </Space>
+  );
+};
+
+A11yKeyboardDemo.storyName = "a11y keyboard demo"
+