@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/rating/index.tsx

@@ -1,345 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import BaseComponent from '../_base/baseComponent';
-import cls from 'classnames';
-import ConfigContext from '../configProvider/context';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/rating/constants';
-import PropTypes from 'prop-types';
-import { noop } from '@douyinfe/semi-foundation/utils/function';
-import Item from './item';
-import Tooltip from '../tooltip';
-import RatingFoundation, { RatingAdapter } from '@douyinfe/semi-foundation/rating/foundation';
-
-import '@douyinfe/semi-foundation/rating/rating.scss';
-
-export { RatingItemProps } from './item';
-export interface RatingProps {
-    'aria-describedby'?: string;
-    'aria-errormessage'?: string;
-    'aria-invalid'?: boolean;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-required'?: boolean;
-    disabled?: boolean;
-    value?: number;
-    defaultValue?: number;
-    count?: number;
-    allowHalf?: boolean;
-    allowClear?: boolean;
-    style?: React.CSSProperties;
-    prefixCls?: string;
-    onChange?: (value: number) => void;
-    onHoverChange?: (value: number) => void;
-    className?: string;
-    character?: React.ReactNode;
-    tabIndex?: number;
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    onClick?: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void;
-    autoFocus?: boolean;
-    size?: 'small' | 'default' | number;
-    tooltips?: string[];
-    id?: string;
-    preventScroll?: boolean;
-}
-
-export interface RatingState {
-    value: number;
-    hoverValue: number;
-    focused: boolean;
-    clearedValue: number;
-    emptyStarFocusVisible: boolean;
-}
-
-export default class Rating extends BaseComponent<RatingProps, RatingState> {
-    static contextType = ConfigContext;
-    static propTypes = {
-        'aria-describedby': PropTypes.string,
-        'aria-errormessage': PropTypes.string,
-        'aria-invalid': PropTypes.bool,
-        'aria-label': PropTypes.string,
-        'aria-labelledby': PropTypes.string,
-        'aria-required': PropTypes.bool,
-        disabled: PropTypes.bool,
-        value: PropTypes.number,
-        defaultValue: PropTypes.number,
-        count: PropTypes.number,
-        allowHalf: PropTypes.bool,
-        allowClear: PropTypes.bool,
-        style: PropTypes.object,
-        prefixCls: PropTypes.string,
-        onChange: PropTypes.func,
-        onHoverChange: PropTypes.func,
-        className: PropTypes.string,
-        character: PropTypes.node,
-        tabIndex: PropTypes.number,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        onKeyDown: PropTypes.func,
-        autoFocus: PropTypes.bool,
-        size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
-        tooltips: PropTypes.arrayOf(PropTypes.string),
-        id: PropTypes.string,
-        preventScroll: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        defaultValue: 0,
-        count: 5,
-        allowHalf: false,
-        allowClear: true,
-        style: {},
-        prefixCls: cssClasses.PREFIX,
-        onChange: noop,
-        onHoverChange: noop,
-        tabIndex: -1,
-        size: 'default' as const,
-    };
-
-    stars: Record<string, Item>;
-    rate: HTMLUListElement = null;
-
-    foundation: RatingFoundation;
-
-    constructor(props: RatingProps) {
-        super(props);
-        const value = props.value === undefined ? props.defaultValue : props.value;
-        this.stars = {};
-        this.state = {
-            value,
-            focused: false,
-            hoverValue: undefined,
-            clearedValue: null,
-            emptyStarFocusVisible: false,
-        };
-
-        this.foundation = new RatingFoundation(this.adapter);
-    }
-
-    static getDerivedStateFromProps(nextProps: RatingProps, state: RatingState) {
-        if ('value' in nextProps && nextProps.value !== undefined) {
-            return {
-                ...state,
-                value: nextProps.value,
-            };
-        }
-        return state;
-    }
-
-    get adapter(): RatingAdapter<RatingProps, RatingState> {
-        return {
-            ...super.adapter,
-            focus: () => {
-                const { disabled, count } = this.props;
-                const { value } = this.state;
-                if (!disabled) {
-                    const index = Math.ceil(value) - 1;
-                    this.stars[index < 0 ? count : index].starFocus();
-                }
-            },
-            getStarDOM: (index: number) => {
-                const instance = this.stars && this.stars[index];
-                // eslint-disable-next-line react/no-find-dom-node
-                return ReactDOM.findDOMNode(instance) as Element;
-            },
-            notifyHoverChange: (hoverValue: number, clearedValue: number) => {
-                const { onHoverChange } = this.props;
-                this.setState({
-                    hoverValue,
-                    clearedValue,
-                });
-                onHoverChange(hoverValue);
-            },
-            updateValue: (value: number) => {
-                const { onChange } = this.props;
-                if (!('value' in this.props)) {
-                    this.setState({
-                        value,
-                    });
-                }
-                onChange(value);
-            },
-            clearValue: (clearedValue: number) => {
-                this.setState({
-                    clearedValue,
-                });
-            },
-            notifyFocus: (e: React.FocusEvent) => {
-                const { onFocus } = this.props;
-                this.setState({
-                    focused: true,
-                });
-                onFocus && onFocus(e);
-            },
-            notifyBlur: (e: React.FocusEvent) => {
-                const { onBlur } = this.props;
-                this.setState({
-                    focused: false,
-                });
-                onBlur && onBlur(e);
-            },
-            notifyKeyDown: (e: React.KeyboardEvent) => {
-                const { onKeyDown } = this.props;
-                this.setState({
-                    focused: false,
-                });
-                onKeyDown && onKeyDown(e);
-            },
-            setEmptyStarFocusVisible: (focusVisible: boolean): void => {
-                this.setState({
-                    emptyStarFocusVisible: focusVisible, 
-                });
-            },
-        };
-    }
-
-    componentDidMount() {
-        this.foundation.init();
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    onHover = (event: React.MouseEvent, index: number) => {
-        this.foundation.handleHover(event, index);
-    };
-
-    onMouseLeave = () => {
-        this.foundation.handleMouseLeave();
-    };
-
-    onClick: RatingProps['onClick'] = (event, index) => {
-        this.foundation.handleClick(event, index);
-    };
-
-    onFocus: RatingProps['onFocus'] = e => {
-        this.foundation.handleFocus(e);
-    };
-
-    onBlur: RatingProps['onBlur'] = e => {
-        this.foundation.handleBlur(e);
-    };
-
-    onKeyDown: RatingProps['onKeyDown'] = event => {
-        const { value } = this.state;
-        this.foundation.handleKeyDown(event, value);
-    };
-
-    focus = () => {
-        const { disabled, preventScroll } = this.props;
-        if (!disabled) {
-            this.rate.focus({ preventScroll });
-        }
-    };
-
-    blur = () => {
-        const { disabled } = this.props;
-        if (!disabled) {
-            this.rate.blur();
-        }
-    };
-
-    saveRef = (index: number) => (node: Item) => {
-        this.stars[index] = node;
-    };
-
-    saveRate = (node: HTMLUListElement) => {
-        this.rate = node;
-    };
-
-    handleStarFocusVisible = (event: React.FocusEvent) => {
-        this.foundation.handleStarFocusVisible(event);
-    }
-
-    handleStarBlur = (event: React.FocusEvent) => {
-        this.foundation.handleStarBlur(event);
-    }
-
-    getAriaLabelPrefix = () => {
-        if (this.props['aria-label']) {
-            return this.props['aria-label'];
-        }
-        let prefix = 'star';
-        const { character } = this.props;
-        if (typeof character === 'string') {
-            prefix = character;
-        }
-        return prefix;
-    }
-
-    getItemList = (ariaLabelPrefix: string) => {
-        const { count, allowHalf, prefixCls, disabled,  character, size, tooltips } =this.props;
-        const { value, hoverValue, focused } = this.state;
-        // index == count is for Empty rating
-        const itemList = [...Array(count + 1).keys()].map(ind => {
-            const content = (
-                <Item
-                    ref={this.saveRef(ind)}
-                    index={ind}
-                    count={count}
-                    prefixCls={`${prefixCls}-star`}
-                    allowHalf={allowHalf}
-                    value={hoverValue === undefined ? value : hoverValue}
-                    onClick={disabled ? noop : this.onClick}
-                    onHover={disabled ? noop : this.onHover}
-                    key={ind}
-                    disabled={disabled}
-                    character={character}
-                    focused={focused}
-                    size={ind === count ? 0 : size}
-                    ariaLabelPrefix={ariaLabelPrefix}
-                    onFocus={disabled || count !== ind ? noop : this.handleStarFocusVisible}
-                    onBlur={disabled || count !== ind ? noop : this.handleStarBlur}
-                />
-            );
-            if (tooltips) {
-                const text = tooltips[ind] ? tooltips[ind] : '';
-                const showTips = hoverValue - 1 === ind;
-                return (
-                    <Tooltip visible={showTips} trigger="custom" content={text} key={`${ind}-${showTips}`}>
-                        {content}
-                    </Tooltip>
-                );
-            }
-            return content;
-        });
-        return itemList;
-    }
-
-    render() {
-        const { style, prefixCls, disabled, className, id, count, tabIndex } = this.props;
-        const { value, emptyStarFocusVisible } = this.state;
-        const ariaLabelPrefix = this.getAriaLabelPrefix();
-        const ariaLabel = `Rating: ${value} of ${count} ${ariaLabelPrefix}${value === 1 ? '' : 's'},`;
-        const itemList = this.getItemList(ariaLabelPrefix);
-        const listCls = cls(
-            prefixCls,
-            {
-                [`${prefixCls}-disabled`]: disabled,
-                [`${prefixCls}-focus`]: emptyStarFocusVisible,
-            },
-            className
-        );
-        return (
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-            <ul 
-                aria-label={ariaLabel}
-                aria-labelledby={this.props['aria-labelledby']}
-                aria-describedby={this.props['aria-describedby']}
-                className={listCls}
-                style={style}
-                onMouseLeave={disabled ? noop : this.onMouseLeave}
-                tabIndex={disabled ? -1 : tabIndex}
-                onFocus={disabled ? noop : this.onFocus}
-                onBlur={disabled ? noop : this.onBlur}
-                onKeyDown={disabled ? noop : this.onKeyDown}
-                ref={this.saveRate as any}
-                id={id}
-            >
-                {itemList}
-            </ul>
-        );
-    }
-}

package/rating/item.tsx

@@ -1,233 +0,0 @@
-import React, { PureComponent } from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/rating/constants';
-import '@douyinfe/semi-foundation/rating/rating.scss';
-import { IconStar } from '@douyinfe/semi-icons';
-import { RatingItemFoundation, RatingItemAdapter } from '@douyinfe/semi-foundation/rating/foundation';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-
-
-type ArrayElement<ArrayType extends readonly unknown[]> =
-  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-
-export interface RatingItemProps extends BaseProps {
-    value: number;
-    index: number;
-    prefixCls: string;
-    allowHalf: boolean;
-    onHover: (e: React.MouseEvent, index: number) => void;
-    onClick: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void;
-    character: React.ReactNode;
-    focused: boolean;
-    disabled: boolean;
-    count: number;
-    ariaLabelPrefix: string;
-    size: number | ArrayElement<typeof strings.SIZE_SET>;
-    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    preventScroll?: boolean;
-}
-
-export interface RatingItemState {
-    firstStarFocus: boolean,
-    secondStarFocus: boolean,
-}
-
-export default class Item extends BaseComponent<RatingItemProps, RatingItemState>  {
-    static propTypes = {
-        value: PropTypes.number,
-        index: PropTypes.number,
-        prefixCls: PropTypes.string,
-        allowHalf: PropTypes.bool,
-        onHover: PropTypes.func,
-        onClick: PropTypes.func,
-        character: PropTypes.node,
-        focused: PropTypes.bool,
-        disabled: PropTypes.bool,
-        count: PropTypes.number,
-        ariaLabelPrefix: PropTypes.string,
-        size: PropTypes.oneOfType([
-            PropTypes.oneOf(strings.SIZE_SET),
-            PropTypes.number,
-        ]),
-        'aria-describedby': PropTypes.string,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        preventScroll: PropTypes.bool,
-    };
-
-    foundation: RatingItemFoundation;
-
-    constructor(props: RatingItemProps) {
-        super(props);
-        this.state = {
-            firstStarFocus: false,
-            secondStarFocus: false,
-        };
-        this.foundation = new RatingItemFoundation(this.adapter);
-    }
-
-    get adapter(): RatingItemAdapter<RatingItemProps, RatingItemState> {
-        return {
-            ...super.adapter,
-            setFirstStarFocus: (value) => {
-                this.setState({
-                    firstStarFocus: value,
-                });
-            },
-            setSecondStarFocus: (value) => {
-                this.setState({
-                    secondStarFocus: value,
-                });
-            }
-        };
-    }
-
-    firstStar: HTMLDivElement = null;
-    secondStar: HTMLDivElement = null;
-
-    onHover: React.MouseEventHandler = e => {
-        const { onHover, index } = this.props;
-        onHover(e, index);
-    };
-
-    onClick: React.MouseEventHandler = e => {
-        const { onClick, index } = this.props;
-        onClick(e, index);
-    };
-
-    onFocus =  (e, star) => {
-        const { onFocus } = this.props;
-        onFocus && onFocus(e);
-        this.foundation.handleFocusVisible(e, star);
-    } 
-
-    onBlur =  (e, star) => {
-        const { onBlur } = this.props;
-        onBlur && onBlur(e);
-        this.foundation.handleBlur(e, star);
-    } 
-
-
-    onKeyDown: React.KeyboardEventHandler = e => {
-        const { onClick, index } = this.props;
-        if (e.keyCode === 13) {
-            onClick(e, index);
-        }
-    };
-
-    starFocus = () => {
-        const { value, index, preventScroll } = this.props;
-        if (value - index === 0.5) {
-            this.firstStar.focus({ preventScroll });
-        } else {
-            this.secondStar.focus({ preventScroll });
-        }
-    }
-
-    saveFirstStar = (node: HTMLDivElement) => {
-        this.firstStar = node;
-    };
-
-    saveSecondStar = (node: HTMLDivElement) => {
-        this.secondStar = node;
-    };
-
-    render() {
-        const {
-            index,
-            prefixCls,
-            character,
-            count,
-            value,
-            disabled,
-            allowHalf,
-            focused,
-            size,
-            ariaLabelPrefix,
-        } = this.props;
-        const { firstStarFocus, secondStarFocus } = this.state;
-        const starValue = index + 1;
-        const diff = starValue - value;
-        // const isHalf = allowHalf && value + 0.5 === starValue;
-        const isHalf = allowHalf && diff < 1 && diff > 0;
-        const firstWidth = 1 - diff;
-        const isFull = starValue <= value;
-        const isCustomSize = typeof size === 'number';
-        const starCls = cls(prefixCls, {
-            [`${prefixCls}-half`]: isHalf,
-            [`${prefixCls}-full`]: isFull,
-            [`${prefixCls}-${size}`]: !isCustomSize,
-        });
-        const sizeStyle = isCustomSize ? {
-            width: size,
-            height: size,
-            fontSize: size
-        } : {};
-        const iconSize = isCustomSize ? 'inherit' : (size === 'small' ? 'default' : 'extra-large');
-        const content = character ? character : <IconStar size={iconSize} style={{ display: 'block' }}/>;
-        const isEmpty = index === count;
-        const starWrapCls = cls(`${prefixCls}-wrapper`,{
-            [`${prefixCls}-disabled`]: disabled,
-            [`${cssClasses.PREFIX}-focus`]: (firstStarFocus || secondStarFocus) && value !== 0,
-        });
-        const starWrapProps = {
-            onClick: disabled ? null : this.onClick ,
-            onKeyDown: disabled ? null : this.onKeyDown,
-            onMouseMove: disabled ? null : this.onHover,
-            className: starWrapCls,
-        };
-        const AriaSetSize = allowHalf ? count * 2 + 1 : count + 1;
-        const firstStarProps = {
-            ref: this.saveFirstStar as any,
-            role:"radio",
-            'aria-checked': value === index + 0.5,
-            'aria-posinset': 2 * index + 1,
-            'aria-setsize': AriaSetSize,
-            'aria-disabled': disabled,
-            'aria-label': `${index + 0.5} ${ariaLabelPrefix}s`,
-            'aria-labelledby': this.props['aria-describedby'],
-            'aria-describedby': this.props['aria-describedby'],
-            className: cls(`${prefixCls}-first`,`${cssClasses.PREFIX}-no-focus`),
-            tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
-            onFocus: (e) => {
-                this.onFocus(e, 'first');
-            },
-            onBlur:(e) => {
-                this.onBlur(e, 'first');
-            },
-        };
-
-        const secondStarTabIndex = !disabled && ((value === index + 1) || (isEmpty && value === 0)) ? 0 : -1;
-        const secondStarProps = {
-            ref: this.saveSecondStar as any,
-            role:"radio",
-            'aria-checked': isEmpty ? value === 0 : value === index + 1,
-            'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
-            'aria-setsize': AriaSetSize, 
-            'aria-disabled': disabled,
-            'aria-label': `${isEmpty ? 0 : index + 1} ${ariaLabelPrefix}${index === 0 ? '' : 's'}`,
-            'aria-labelledby': this.props['aria-describedby'],
-            'aria-describedby': this.props['aria-describedby'],
-            className: cls(`${prefixCls}-second`,`${cssClasses.PREFIX}-no-focus`),
-            tabIndex: secondStarTabIndex,
-            onFocus: (e) => {
-                this.onFocus(e, 'second');
-            },
-            onBlur:(e) => {
-                this.onBlur(e, 'second');
-            },
-        };
-       
-        return (
-            <li className={starCls} style={{ ...sizeStyle }} key={index} >
-                <div {...(starWrapProps as any)}>
-                    {allowHalf && !isEmpty && <div {...firstStarProps} style={{ width: `${firstWidth * 100}%` }}>{content}</div>}
-                    <div {...secondStarProps} x-semi-prop="character">{content}</div>
-                </div>
-            </li>
-        );
-    }
-}

package/resizeObserver/index.tsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom';
-import PropTypes from 'prop-types';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import ResizeObserver from 'resize-observer-polyfill';
-
-/** A parallel type to `ResizeObserverEntry` (from resize-observer-polyfill). */
-export interface ResizeEntry {
-    contentRect: DOMRectReadOnly;
-    target: Element;
-}
-
-export interface ReactResizeObserverProps extends BaseProps {
-    onResize?: (entries: ResizeEntry[]) => void;
-    observeParent?: boolean;
-}
-
-export default class ReactResizeObserver extends BaseComponent<ReactResizeObserverProps> {
-    static propTypes = {
-        onResize: PropTypes.func,
-        observeParent: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        onResize: () => {}, // eslint-disable-line
-        observeParent: false,
-    };
-    observer: ResizeObserver;
-    childNode: any;
-    element: Element;
-    _parentNode: HTMLElement;
-
-    constructor(props: ReactResizeObserverProps) {
-        super(props);
-        this.observer = new ResizeObserver(props.onResize);
-    }
-
-    componentDidMount() {
-        this.observeElement();
-    }
-
-    componentDidUpdate(prevProps: ReactResizeObserverProps) {
-        this.observeElement(this.props.observeParent !== prevProps.observeParent);
-    }
-
-    componentWillUnmount() {
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
-        }
-    }
-
-    getElement = () => {
-        try {
-            // using findDOMNode for two reasons:
-            // 1. cloning to insert a ref is unwieldy and not performant.
-            // 2. ensure that we resolve to an actual DOM node (instead of any JSX ref instance).
-            // eslint-disable-next-line
-            return findDOMNode(this.childNode || this);
-        } catch (error) {
-            // swallow error if findDOMNode is run on unmounted component.
-            return null;
-        }
-    };
-
-    observeElement(force = false) {
-        const element = this.getElement();
-        if (!(element && element instanceof Element)) {
-            // stop everything if not defined
-            this.observer.disconnect();
-            return;
-        }
-
-        if (element === this.element && !force) {
-            // abort if given same element -- nothing to update (unless forced)
-            return;
-        } else {
-            // clear observer list if new element
-            this.observer.disconnect();
-            // remember element reference for next time
-            this.element = element;
-        }
-
-        // observer callback is invoked immediately when observing new elements
-        this.observer.observe(element);
-
-        if (
-            this.props.observeParent &&
-            element.parentNode &&
-            element.parentNode.ownerDocument &&
-            element.parentNode.ownerDocument.defaultView &&
-            element.parentNode instanceof element.parentNode.ownerDocument.defaultView.HTMLElement
-        ) {
-            this._parentNode = element.parentNode;
-            this.observer.observe(this._parentNode);
-        }
-    }
-
-    mergeRef = (ref: any, node: HTMLDivElement) => {
-        this.childNode = node;
-        if (typeof ref === 'function') {
-            ref(node);
-        } else if (typeof ref === 'object' && ref && 'current' in ref) {
-            ref.current = node;
-        }
-    };
-
-    render() {
-        const child = React.Children.only(this.props.children);
-        const { ref } = child as any;
-        return React.cloneElement(child as React.ReactElement, {
-            ref: (node: HTMLDivElement) => this.mergeRef(ref, node),
-        });
-    }
-}