@douyinfe/semi-ui 2.10.0-alpha.0 → 2.10.1

package/carousel/index.tsx

@@ -0,0 +1,292 @@
+/* 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.onIndicatorChange(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;
+
+        if (showArrow && children.length > 1){
+            return (
+                <CarouselArrow 
+                    type={arrowType} 
+                    theme={theme} 
+                    prev={this.prev} 
+                    next={this.next}
+                    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,63 @@
+import React, { ReactNode } from "react";
+import { strings } from '@douyinfe/semi-foundation/carousel/constants';
+
+export interface CarouselMethod {
+    next?: () => void;
+    prev?: () => void;
+    goTo?: (tagetIndex: number) => 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;
+}
+
+export interface ArrowButton {
+    props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    children?: React.ReactNode;
+}
+export interface ArrowProps {
+    leftArrow?: ArrowButton;
+    rightArrow?: ArrowButton;
+}

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>
                 );
             }

package/checkbox/checkbox.tsx

@@ -29,13 +29,9 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     role?: React.HTMLAttributes<HTMLSpanElement>['role']; // a11y: wrapper role
     tabIndex?: number; // a11y: wrapper tabIndex
-    addonId?: string;
-    extraId?: string;
 }
 interface CheckboxState {
     checked: boolean;
-    addonId?: string;
-    extraId?: string;
 }
 class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType = Context;
@@ -93,13 +89,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             notifyGroupChange: cbContent => {
                 this.context.checkboxGroup.onChange(cbContent);
             },
-            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled),
-            setAddonId: () => {
-                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
-            },
-            setExtraId: () => {
-                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
-            }
+            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled)
         };
     }
 
@@ -113,11 +103,11 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         this.state = {
             checked: props.checked || props.defaultChecked || checked,
-            addonId: props.addonId,
-            extraId: props.extraId,
         };
 
         this.checkboxEntity = null;
+        this.addonId = getUuidShort({ prefix: 'addon' });
+        this.extraId = getUuidShort({ prefix: 'extra' });
         this.foundation = new CheckboxFoundation(this.adapter);
     }
 
@@ -163,7 +153,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             tabIndex,
             id
         } = this.props;
-        const { checked, addonId, extraId } = this.state;
+        const { checked } = this.state;
         const props: Record<string, any> = {
             checked,
             disabled,
@@ -206,8 +196,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         const renderContent = () => (
             <>
-                {children ? <span id={addonId} className={`${prefix}-addon`}>{children}</span> : null}
-                {extra ? <div id={extraId} className={extraCls}>{extra}</div> : null}
+                {children ? <span id={this.addonId} className={`${prefix}-addon`}>{children}</span> : null}
+                {extra ? <div id={this.extraId} className={extraCls}>{extra}</div> : null}
             </>
         );
         return (
@@ -228,8 +218,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                 <CheckboxInner
                     {...this.props}
                     {...props}
-                    addonId={children && addonId}
-                    extraId={extra && extraId}
+                    addonId={children && this.addonId}
+                    extraId={extra && this.extraId}
                     name={name}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {

package/datePicker/monthsGrid.tsx

@@ -10,7 +10,7 @@ import { format as formatFn, addMonths, isSameDay } from 'date-fns';
 
 import MonthsGridFoundation, { MonthInfo, MonthsGridAdapter, MonthsGridDateAdapter, MonthsGridFoundationProps, MonthsGridFoundationState, MonthsGridRangeAdapter, PanelType } from '@douyinfe/semi-foundation/datePicker/monthsGridFoundation';
 import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/datePicker/constants';
-import { compatiableParse } from '@douyinfe/semi-foundation/datePicker/_utils/parser';
+import { compatibleParse } from '@douyinfe/semi-foundation/datePicker/_utils/parser';
 import { noop, stubFalse } from 'lodash';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import Navigation from './navigation';
@@ -476,8 +476,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
             rangeStart &&
             rangeEnd &&
             isSameDay(
-                (startDate = compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale)),
-                (endDate = compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale))
+                (startDate = compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale)),
+                (endDate = compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale))
             )
         ) {
             if (panelType === strings.PANEL_TYPE_RIGHT) {
@@ -550,10 +550,10 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
         if (panelType === strings.PANEL_TYPE_LEFT) {
             panelDetail = monthLeft;
-            dateText = rangeStart ? formatFn(compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+            dateText = rangeStart ? formatFn(compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
         } else {
             panelDetail = monthRight;
-            dateText = rangeEnd ? formatFn(compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+            dateText = rangeEnd ? formatFn(compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
         }
 
         const { isTimePickerOpen, showDate } = panelDetail;
@@ -561,7 +561,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
         const timeText = showDate ? formatFn(showDate, formatTimePicker) : '';
 
-        const showSwithIcon = ['default'].includes(density);
+        const showSwitchIcon = ['default'].includes(density);
 
         const switchCls = classnames(`${prefixCls}-switch`);
         const dateCls = classnames({
@@ -583,7 +583,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                     className={dateCls}
                     onClick={e => this.foundation.showDatePanel(panelType)}
                 >
-                    {showSwithIcon && <IconCalendar aria-hidden />}
+                    {showSwitchIcon && <IconCalendar aria-hidden />}
                     <span className={textCls}>{dateText || monthText}</span>
                 </div>
                 <div
@@ -592,7 +592,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                     className={timeCls}
                     onClick={e => this.foundation.showTimePicker(panelType, true)}
                 >
-                    {showSwithIcon && <IconClock aria-hidden />}
+                    {showSwitchIcon && <IconClock aria-hidden />}
                     <span className={textCls}>{timeText}</span>
                 </div>
             </div>