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

package/checkbox/_story/checkbox.stories.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import Demo from './Demo';
-
-const stories = storiesOf('Checkbox', module);
-
-stories.add('Checkbox', () => <Demo />);

package/checkbox/checkbox.tsx

@@ -1,290 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { checkboxClasses as css, strings } from '@douyinfe/semi-foundation/checkbox/constants';
-import CheckboxFoundation, { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObject, BaseCheckboxProps } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
-import CheckboxInner from './checkboxInner';
-import BaseComponent from '../_base/baseComponent';
-import '@douyinfe/semi-foundation/checkbox/checkbox.scss';
-import { Context, CheckboxContextType } from './context';
-import { isUndefined, isBoolean, noop } from 'lodash';
-import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
-import { CheckboxType } from './checkboxGroup';
-export type CheckboxEvent = BasicCheckboxEvent;
-export type TargetObject = BasicTargetObject;
-
-export interface CheckboxProps extends BaseCheckboxProps {
-    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
-    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
-    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
-    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
-    'aria-required'?: React.AriaAttributes['aria-required'];
-    children?: React.ReactNode | undefined;
-    onChange?: (e: CheckboxEvent) => any;
-    // TODO, docs
-    style?: React.CSSProperties;
-    onMouseEnter?: React.MouseEventHandler<HTMLSpanElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
-    extra?: React.ReactNode;
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    role?: React.HTMLAttributes<HTMLSpanElement>['role']; // a11y: wrapper role
-    tabIndex?: number; // a11y: wrapper tabIndex
-    addonId?: string;
-    extraId?: string;
-    type?: CheckboxType;
-}
-interface CheckboxState {
-    checked: boolean;
-    addonId?: string;
-    extraId?: string;
-    focusVisible?: boolean;
-}
-class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
-    static contextType = Context;
-
-    static propTypes = {
-        'aria-describedby': PropTypes.string,
-        'aria-errormessage': PropTypes.string,
-        'aria-invalid': PropTypes.bool,
-        'aria-labelledby': PropTypes.string,
-        'aria-required': PropTypes.bool,
-        // Specifies whether it is currently selected
-        checked: PropTypes.bool,
-        // Initial check
-        defaultChecked: PropTypes.bool,
-        // Failure state
-        disabled: PropTypes.bool,
-        // Set indeterminate state, only responsible for style control
-        indeterminate: PropTypes.bool,
-        // Callback function when changing
-        onChange: PropTypes.func,
-        value: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        prefixCls: PropTypes.string,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-        extra: PropTypes.node,
-        index: PropTypes.number,
-        'aria-label': PropTypes.string,
-        tabIndex: PropTypes.number,
-        preventScroll: PropTypes.bool,
-        type: PropTypes.string,
-    };
-
-    static defaultProps = {
-        defaultChecked: false,
-        indeterminate: false,
-        onChange: noop,
-        onMouseEnter: noop,
-        onMouseLeave: noop,
-        type: 'default',
-    };
-    checkboxEntity: CheckboxInner;
-    context: CheckboxContextType;
-
-    get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState> {
-        return {
-            ...super.adapter,
-            setNativeControlChecked: checked => {
-                this.setState({ checked });
-            },
-            notifyChange: cbContent => {
-                const { onChange } = this.props;
-                onChange && onChange(cbContent);
-            },
-            getIsInGroup: () => this.isInGroup(),
-            getGroupValue: () => (this.context && this.context.checkboxGroup.value) || [],
-            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' }) });
-            },
-            setFocusVisible: (focusVisible: boolean): void => {
-                this.setState({ focusVisible });
-            },
-            focusCheckboxEntity: () => {
-                this.focus();
-            },
-        };
-    }
-
-    foundation: CheckboxFoundation;
-    constructor(props: CheckboxProps) {
-        super(props);
-
-        const checked = false;
-
-        this.state = {
-            checked: props.checked || props.defaultChecked || checked,
-            addonId: props.addonId,
-            extraId: props.extraId,
-            focusVisible: false
-        };
-
-        this.checkboxEntity = null;
-        this.foundation = new CheckboxFoundation(this.adapter);
-    }
-
-    componentDidUpdate(prevProps: CheckboxProps) {
-        if (this.props.checked !== prevProps.checked) {
-            if (isUndefined(this.props.checked)) {
-                this.foundation.setChecked(false);
-            } else if (isBoolean(this.props.checked)) {
-                this.foundation.setChecked(this.props.checked);
-            }
-        }
-    }
-
-    isInGroup() {
-        // Why do we need to determine whether there is a value in props?
-        // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
-        // it will be considered not to belong to the checkboxGroup。
-        return Boolean(this.context && this.context.checkboxGroup && ('value' in this.props));
-    }
-
-    focus() {
-        this.checkboxEntity && this.checkboxEntity.focus();
-    }
-
-    blur() {
-        this.checkboxEntity && this.checkboxEntity.blur();
-    }
-
-    handleChange: React.MouseEventHandler<HTMLSpanElement> = e => this.foundation.handleChange(e);
-
-    handleEnterPress = (e: React.KeyboardEvent<HTMLSpanElement>) => this.foundation.handleEnterPress(e);
-
-    handleFocusVisible = (event: React.FocusEvent) => {
-        this.foundation.handleFocusVisible(event);
-    }
-
-    handleBlur = (event: React.FocusEvent) => {
-        this.foundation.handleBlur();
-    }
-
-    render() {
-        const {
-            disabled,
-            style,
-            prefixCls,
-            className,
-            indeterminate,
-            children,
-            onMouseEnter,
-            onMouseLeave,
-            extra,
-            value,
-            role,
-            tabIndex,
-            id,
-            type,
-        } = this.props;
-        const { checked, addonId, extraId, focusVisible } = this.state;
-        const props: Record<string, any> = {
-            checked,
-            disabled,
-        };
-
-        const inGroup = this.isInGroup();
-        if (inGroup) {
-            if (this.context.checkboxGroup.value) {
-                const realChecked = (this.context.checkboxGroup.value || []).includes(value);
-                props.checked = realChecked;
-            }
-            if (this.context.checkboxGroup.disabled) {
-                props.disabled = this.context.checkboxGroup.disabled || this.props.disabled;
-            }
-            const { isCardType, isPureCardType } = this.context.checkboxGroup;
-            props.isCardType = isCardType;
-            props.isPureCardType = isPureCardType;
-            props['name'] = this.context.checkboxGroup.name;
-        } else {
-            props.isPureCardType = type === strings.TYPE_PURECARD;
-            props.isCardType = type === strings.TYPE_CARD || props.isPureCardType;
-        }
-
-        const prefix = prefixCls || css.PREFIX;
-
-        const focusOuter = props.isCardType || props.isPureCardType;
-
-        const wrapper = classnames(prefix, {
-            [`${prefix}-disabled`]: props.disabled,
-            [`${prefix}-indeterminate`]: indeterminate,
-            [`${prefix}-checked`]: props.checked,
-            [`${prefix}-unChecked`]: !props.checked,
-            [`${prefix}-cardType`]: props.isCardType,
-            [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
-            [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
-            [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
-            [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
-            [className]: Boolean(className),
-            [`${prefix}-focus`]: focusVisible && focusOuter,
-        });
-
-        const extraCls = classnames(`${prefix}-extra`, {
-            [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
-        });
-
-        const name = inGroup && this.context.checkboxGroup.name;
-        const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
-
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
-                        {children}
-                    </span>
-                ) : null}
-                {extra ? (
-                    <div id={extraId} className={extraCls} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
-        return (
-            // label is better than span, however span is here which is to solve gitlab issue #364
-            <span
-                role={role}
-                tabIndex={tabIndex}
-                style={style}
-                className={wrapper}
-                id={id}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-                onClick={this.handleChange}
-                onKeyPress={this.handleEnterPress}
-                aria-labelledby={this.props['aria-labelledby']}
-            >
-                <CheckboxInner
-                    {...this.props}
-                    {...props}
-                    addonId={children && addonId}
-                    extraId={extra && extraId}
-                    isPureCardType={props.isPureCardType}
-                    ref={ref => {
-                        this.checkboxEntity = ref;
-                    }}
-                    focusInner={focusVisible && !focusOuter}
-                    onInputFocus={this.handleFocusVisible}
-                    onInputBlur={this.handleBlur}
-                />
-                {
-                    props.isCardType ?
-                        <div>{renderContent()}</div> :
-                        renderContent()
-                }
-            </span>
-        );
-    }
-}
-
-
-export default Checkbox;

package/checkbox/checkboxGroup.tsx

@@ -1,197 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { checkboxGroupClasses as css, strings } from '@douyinfe/semi-foundation/checkbox/constants';
-import CheckboxGroupFoundation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/checkbox/checkboxGroupFoundation';
-import BaseComponent from '../_base/baseComponent';
-import { Context } from './context';
-import { isEqual } from 'lodash';
-import Checkbox, { CheckboxEvent } from './checkbox';
-
-export type CheckboxDirection = 'horizontal' | 'vertical';
-export type CheckboxType = 'default' | 'card' | 'pureCard';
-
-export type CheckboxGroupProps = {
-    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
-    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
-    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
-    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
-    'aria-required'?: React.AriaAttributes['aria-required'];
-    defaultValue?: any[];
-    disabled?: boolean;
-    name?: string;
-    options?: any[];
-    value?: any[];
-    onChange?: (value: any[]) => void;
-    children?: React.ReactNode | undefined;
-    prefixCls?: string;
-    direction?: CheckboxDirection;
-    style?: React.CSSProperties;
-    className?: string;
-    type?: CheckboxType;
-    id?: string;
-    'aria-label'?: React.AriaAttributes['aria-label'];
-};
-
-export type CheckboxGroupState = {
-    value?: any[];
-};
-class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState> {
-
-    static propTypes = {
-        'aria-describedby': PropTypes.string,
-        'aria-errormessage': PropTypes.string,
-        'aria-invalid': PropTypes.bool,
-        'aria-labelledby': PropTypes.string,
-        'aria-required': PropTypes.bool,
-        defaultValue: PropTypes.array,
-        disabled: PropTypes.bool,
-        name: PropTypes.string,
-        options: PropTypes.array,
-        value: PropTypes.array,
-        onChange: PropTypes.func,
-        children: PropTypes.node,
-        prefixCls: PropTypes.string,
-        direction: PropTypes.oneOf<CheckboxGroupProps['direction']>(strings.DIRECTION_SET),
-        className: PropTypes.string,
-        type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_CARD, strings.TYPE_PURECARD]),
-        style: PropTypes.object,
-    };
-
-    static defaultProps: Partial<CheckboxGroupProps> = {
-        disabled: false,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onChange: () => {},
-        type: strings.TYPE_DEFAULT,
-        defaultValue: [] as any,
-        direction: strings.DEFAULT_DIRECTION,
-    };
-
-    get adapter(): CheckboxGroupAdapter {
-        return {
-            ...super.adapter,
-            updateGroupValue: value => {
-                this.setState({ value });
-            },
-            notifyChange: evt => {
-                this.props.onChange && this.props.onChange(evt);
-            },
-        };
-    }
-
-    foundation: CheckboxGroupFoundation;
-    constructor(props: CheckboxGroupProps) {
-        super(props);
-        this.state = {
-            value: props.value || props.defaultValue,
-        };
-        this.foundation = new CheckboxGroupFoundation(this.adapter);
-        this.onChange = this.onChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.foundation.init();
-    }
-
-    componentDidUpdate(prevProps: CheckboxGroupProps) {
-        if (!isEqual(prevProps.value, this.props.value)) {
-            this.foundation.handlePropValueChange(this.props.value);
-        }
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    onChange(evt: CheckboxEvent) {
-        this.foundation.handleChange(evt);
-    }
-
-    render() {
-        const { children, options, prefixCls, direction, className, id, style, type, disabled } = this.props;
-
-        const isPureCardType = type === strings.TYPE_PURECARD;
-        const isCardType = type === strings.TYPE_CARD || isPureCardType;
-
-        const prefix = prefixCls || css.PREFIX;
-        const prefixClsDisplay = classnames({
-            [prefix as string]: true,
-            [`${prefix }-wrapper`]: true,
-            [`${prefix }-${ direction}`]: direction,
-            [`${prefix}-${direction}-cardType`]: direction && isCardType,
-        }, className);
-
-        const realValue = this.state.value.slice();
-
-        let inner;
-
-        if (options) {
-            inner = (options || []).map((option, index) => {
-                if (typeof option === 'string') {
-                    return (
-                        <Checkbox
-                            role="listitem"
-                            key={index}
-                            disabled={this.props.disabled}
-                            value={option}
-                            prefixCls={prefixCls}
-                        >
-                            {option}
-                        </Checkbox>
-                    );
-                } else {
-                    return (
-                        <Checkbox
-                            role="listitem"
-                            key={index}
-                            disabled={option.disabled || this.props.disabled}
-                            value={option.value}
-                            prefixCls={prefixCls}
-                            extra={option.extra}
-                            className={option.className}
-                            style={option.style}
-                            onChange={option.onChange}
-                        >
-                            {option.label}
-                        </Checkbox>
-                    );
-                }
-            });
-        } else if (children) {
-            inner = (React.Children.toArray(children) as React.ReactElement[]).map((itm, index) => React.cloneElement(itm, { key: index, role: 'listitem' }));
-        }
-
-        return (
-            <div
-                id={id}
-                role="list"
-                aria-label={this.props['aria-label']}
-                className={prefixClsDisplay} 
-                style={style}
-                aria-labelledby={this.props['aria-labelledby']}
-                aria-describedby={this.props['aria-describedby']}
-                // aria-errormessage={this.props['aria-errormessage']}
-                // aria-invalid={this.props['aria-invalid']}
-                // aria-required={this.props['aria-required']}
-            >
-                <Context.Provider
-                    value={{
-                        checkboxGroup: {
-                            onChange: this.onChange,
-                            value: realValue,
-                            disabled: this.props.disabled,
-                            name: this.foundation.getFormatName(),
-                            isCardType,
-                            isPureCardType,
-                        },
-                    }}
-                >
-                    {inner}
-                </Context.Provider>
-            </div>
-        );
-    }
-}
-
-export default CheckboxGroup;

package/checkbox/checkboxInner.tsx

@@ -1,129 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import React, { PureComponent } from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import { noop } from 'lodash';
-import { checkboxClasses as css } from '@douyinfe/semi-foundation/checkbox/constants';
-import { Context } from './context';
-import { IconCheckboxTick, IconCheckboxIndeterminate } from '@douyinfe/semi-icons';
-
-export interface CheckboxInnerProps {
-    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
-    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
-    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
-    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
-    'aria-required'?: React.AriaAttributes['aria-required'];
-    indeterminate?: boolean;
-    checked?: boolean;
-    disabled?: boolean;
-    prefixCls?: string;
-    name?: string;
-    isPureCardType?: boolean;
-    ref?: React.MutableRefObject<CheckboxInner> | ((ref: CheckboxInner) => void);
-    addonId?: string;
-    extraId?: string;
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    focusInner?: boolean;
-    onInputFocus?: (e: any) => void;
-    onInputBlur?: (e: any) => void;
-    preventScroll?: boolean;
-}
-
-class CheckboxInner extends PureComponent<CheckboxInnerProps> {
-    static contextType = Context;
-
-    static propTypes = {
-        'aria-describedby': PropTypes.string,
-        'aria-errormessage': PropTypes.string,
-        'aria-invalid': PropTypes.bool,
-        'aria-labelledby': PropTypes.string,
-        'aria-required': PropTypes.bool,
-        checked: PropTypes.bool,
-        disabled: PropTypes.bool,
-        onChange: PropTypes.func,
-        children: PropTypes.node,
-        grouped: PropTypes.bool,
-        value: PropTypes.any,
-        isPureCardType: PropTypes.bool,
-        addonId: PropTypes.string,
-        extraId: PropTypes.string,
-        focusInner: PropTypes.bool,
-        onInputFocus: PropTypes.func,
-        onInputBlur: PropTypes.func,
-        preventScroll: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        onChange: noop,
-    };
-    inputEntity: HTMLInputElement;
-
-    blur() {
-        this.inputEntity.blur();
-    }
-
-    focus() {
-        const { preventScroll } = this.props;
-        this.inputEntity.focus({ preventScroll });
-    }
-
-    render() {
-        const { indeterminate, checked, disabled, prefixCls, name, isPureCardType, addonId, extraId, focusInner, onInputFocus, onInputBlur } = this.props;
-        const prefix = prefixCls || css.PREFIX;
-
-        const wrapper = classnames(
-            {
-                [`${prefix}-inner`]: true,
-                [`${prefix}-inner-checked`]: Boolean(checked),
-                [`${prefix}-inner-pureCardType`]: isPureCardType,
-            },
-            css.WRAPPER
-        );
-
-        const inner = classnames({
-            [`${prefix}-inner-display`]: true,
-            [`${prefix}-focus`]: focusInner,
-            [`${prefix}-focus-border`]:  focusInner && !checked,
-        });
-
-        const icon = checked ? (
-            <IconCheckboxTick />
-        ) : indeterminate ? (
-            <IconCheckboxIndeterminate />
-        ) : null;
-
-        const inputProps: React.InputHTMLAttributes<HTMLInputElement>  = {
-            type: "checkbox",
-            'aria-label': this.props['aria-label'],
-            'aria-disabled': disabled,
-            'aria-checked': checked,
-            'aria-labelledby': addonId,
-            'aria-describedby':extraId || this.props['aria-describedby'],
-            'aria-invalid': this.props['aria-invalid'],
-            'aria-errormessage': this.props['aria-errormessage'],
-            'aria-required': this.props['aria-required'],
-            className: css.INPUT,
-            onChange: noop,
-            checked: checked,
-            disabled: disabled,
-            onFocus: onInputFocus,
-            onBlur: onInputBlur,
-        };
-        
-        name && (inputProps['name'] = name);
-
-        return (
-            <span className={wrapper}>
-                <input
-                    {...inputProps}
-                    ref={ref => {
-                        this.inputEntity = ref;
-                    }}
-                />
-                <span className={inner}>{icon}</span>
-            </span>
-        );
-    }
-}
-
-export default CheckboxInner;

package/checkbox/context.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import {  BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
-type CheckboxContextType = {
-    checkboxGroup?: {
-        onChange: (evt: BasicCheckboxEvent) => void;
-        value: any[];
-        disabled: boolean;
-        name: any;
-        isCardType: boolean;
-        isPureCardType: boolean;
-    };
-};
-const Context = React.createContext<CheckboxContextType>({});
-export { Context, CheckboxContextType };

package/checkbox/index.tsx

@@ -1,19 +0,0 @@
-import Checkbox, { CheckboxProps, CheckboxEvent } from './checkbox';
-import Group, { CheckboxGroupProps, CheckboxType, CheckboxDirection } from './checkboxGroup';
-
-export { CheckboxInnerProps } from './checkboxInner';
-class CheckboxWithGroup extends Checkbox {
-    static Group = Group;
-}
-
-export {
-    CheckboxWithGroup,
-    Checkbox,
-    CheckboxProps,
-    CheckboxGroupProps,
-    CheckboxEvent,
-    CheckboxType,
-    CheckboxDirection
-};
-
-export default CheckboxWithGroup;