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

package/radio/_story/radio.stories.tsx

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

package/radio/context.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
-import { strings } from '@douyinfe/semi-foundation/radio/constants';
-import { ArrayElement } from '../_base/base';
-
-export type RadioGroupButtonSize = ArrayElement<typeof strings.BUTTON_SIZE>;
-export type RadioMode = ArrayElement<typeof strings.MODE>;
-export interface RadioContextValue {
-    mode?: RadioMode;
-    radioGroup?: {
-        value?: string | number;
-        isButtonRadio?: any;
-        disabled?: boolean;
-        prefixCls?: string;
-        name?: string;
-        onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: RadioGroupButtonSize;
-        isCardRadio?: boolean;
-        isPureCardRadio?: boolean;
-    };
-}
-
-const Context = React.createContext<RadioContextValue>(null);
-
-export default Context;

package/radio/index.tsx

@@ -1,12 +0,0 @@
-import Group from './radioGroup';
-import Radio from './radio';
-
-class RadioWithGroup extends Radio {
-    static Group = Group;
-}
-
-export default RadioWithGroup;
-export { RadioWithGroup, Radio };
-export { RadioInnerMode, RadioInnerProps } from './radioInner';
-export { RadioGroupProps, OptionItem } from './radioGroup';
-export { RadioDisplayMode, RadioType, RadioProps, RadioChangeEvent } from './radio';

package/radio/radio.tsx

@@ -1,320 +0,0 @@
-/* eslint-disable prefer-destructuring */
-import React from 'react';
-import PropTypes from 'prop-types';
-import cls from 'classnames';
-import { noop, isUndefined, isBoolean } from 'lodash';
-
-import RadioFoundation, { RadioAdapter } from '@douyinfe/semi-foundation/radio/radioFoundation';
-import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
-import { strings, radioClasses as css } from '@douyinfe/semi-foundation/radio/constants';
-import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
-import '@douyinfe/semi-foundation/radio/radio.scss';
-
-import BaseComponent from '../_base/baseComponent';
-import RadioInner from './radioInner';
-import Context, { RadioContextValue, RadioMode } from './context';
-
-export type RadioDisplayMode = 'vertical' | '';
-export type RadioType =
-    typeof strings.TYPE_DEFAULT |
-    typeof strings.TYPE_BUTTON |
-    typeof strings.TYPE_CARD |
-    typeof strings.TYPE_PURECARD;
-
-export type RadioProps = {
-    autoFocus?: boolean;
-    checked?: boolean;
-    children?: React.ReactNode | undefined;
-    defaultChecked?: boolean;
-    value?: string | number;
-    disabled?: boolean;
-    prefixCls?: string;
-    displayMode?: RadioDisplayMode;
-    onChange?: (e: RadioChangeEvent) => void;
-    onMouseEnter?: (e: React.MouseEvent<HTMLLabelElement>) => void;
-    onMouseLeave?: (e: React.MouseEvent<HTMLLabelElement>) => void;
-    mode?: RadioMode;
-    extra?: React.ReactNode;
-    style?: React.CSSProperties;
-    className?: string;
-    addonStyle?: React.CSSProperties;
-    addonClassName?: string;
-    type?: RadioType;
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    addonId?: string;
-    extraId?: string;
-    name?: string;
-    preventScroll?: boolean;
-};
-
-export interface RadioState {
-    hover?: boolean;
-    addonId?: string;
-    extraId?: string;
-    focusVisible?: boolean;
-    checked?: boolean;
-}
-
-export { RadioChangeEvent };
-
-class Radio extends BaseComponent<RadioProps, RadioState> {
-    static contextType = Context;
-
-    static propTypes = {
-        autoFocus: PropTypes.bool,
-        checked: PropTypes.bool,
-        defaultChecked: PropTypes.bool,
-        value: PropTypes.any, // Compare according to value to determine whether to select
-        style: PropTypes.object,
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        prefixCls: PropTypes.string,
-        displayMode: PropTypes.oneOf<RadioDisplayMode>(['vertical', '']),
-        onChange: PropTypes.func,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-        mode: PropTypes.oneOf(strings.MODE),
-        extra: PropTypes.node, // extra info
-        addonStyle: PropTypes.object,
-        addonClassName: PropTypes.string,
-        type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_BUTTON, strings.TYPE_CARD, strings.TYPE_PURECARD]), // Button style type
-        'aria-label': PropTypes.string,
-        preventScroll: PropTypes.bool,
-    };
-
-    static defaultProps: Partial<RadioProps> = {
-        autoFocus: false,
-        defaultChecked: false,
-        value: undefined as undefined,
-        style: undefined as undefined,
-        onMouseEnter: noop,
-        onMouseLeave: noop,
-        mode: '',
-        type: 'default'
-    };
-
-    radioEntity: RadioInner;
-    context!: RadioContextValue;
-    foundation: RadioFoundation;
-    addonId: string;
-    extraId: string;
-
-    constructor(props: RadioProps) {
-        super(props);
-        this.state = {
-            hover: false,
-            addonId: props.addonId,
-            extraId: props.extraId,
-            checked: props.checked || props.defaultChecked || false,
-        };
-        this.foundation = new RadioFoundation(this.adapter);
-        this.radioEntity = null;
-    }
-
-    componentDidUpdate(prevProps: RadioProps) {
-        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);
-            }
-        }
-    }
-
-    get adapter(): RadioAdapter {
-        return {
-            ...super.adapter,
-            setHover: (hover: boolean) => {
-                this.setState({ hover });
-            },
-            setAddonId: () => {
-                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
-            },
-            setChecked: (checked: boolean) => {
-                this.setState({ checked });
-            },
-            setExtraId: () => {
-                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
-            },
-            setFocusVisible: (focusVisible: boolean): void => {
-                this.setState({ focusVisible });
-            },
-        };
-    }
-
-    isInGroup() {
-        // eslint-disable-next-line react/destructuring-assignment
-        return this.context && this.context.radioGroup;
-    }
-
-    focus() {
-        this.radioEntity.focus();
-    }
-
-    blur() {
-        this.radioEntity.blur();
-    }
-
-    onChange = (e: RadioChangeEvent) => {
-        const { onChange } = this.props;
-        if (this.isInGroup()) {
-            const { radioGroup } = this.context;
-            radioGroup.onChange && radioGroup.onChange(e);
-        }
-        !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
-        onChange && onChange(e);
-    };
-
-    handleMouseEnter = (e: React.MouseEvent<HTMLLabelElement>) => {
-        this.props.onMouseEnter(e);
-        this.foundation.setHover(true);
-    };
-
-    handleMouseLeave = (e: React.MouseEvent<HTMLLabelElement>) => {
-        this.props.onMouseLeave(e);
-        this.foundation.setHover(false);
-    };
-
-    handleFocusVisible = (event: React.FocusEvent) => {
-        this.foundation.handleFocusVisible(event);
-    }
-
-    handleBlur = (event: React.FocusEvent) => {
-        this.foundation.handleBlur();
-    }
-
-    render() {
-        const {
-            addonClassName,
-            addonStyle,
-            disabled,
-            style,
-            className,
-            prefixCls,
-            displayMode,
-            children,
-            extra,
-            mode,
-            type,
-            value: propValue,
-            name
-        } = this.props;
-
-        let realChecked,
-            isDisabled,
-            realMode,
-            isButtonRadioGroup,
-            isCardRadioGroup,
-            isPureCardRadioGroup,
-            isButtonRadioComponent,
-            buttonSize,
-            realPrefixCls;
-        const { hover: isHover, addonId, extraId, focusVisible, checked, } = this.state;
-        const props: Record<string, any> = {
-            checked,
-            disabled,
-        };
-
-        if (this.isInGroup()) {
-            realChecked = this.context.radioGroup.value === propValue;
-            isDisabled = disabled || this.context.radioGroup.disabled;
-            realMode = this.context.mode;
-            isButtonRadioGroup = this.context.radioGroup.isButtonRadio;
-            isCardRadioGroup = this.context.radioGroup.isCardRadio;
-            isPureCardRadioGroup = this.context.radioGroup.isPureCardRadio;
-            buttonSize = this.context.radioGroup.buttonSize;
-            realPrefixCls = prefixCls || this.context.radioGroup.prefixCls;
-            props.checked = realChecked;
-            props.disabled = isDisabled;
-        } else {
-            realChecked = checked;
-            isDisabled = disabled;
-            realMode = mode;
-            isButtonRadioComponent = type === 'button';
-            realPrefixCls = prefixCls;
-            isButtonRadioGroup = type === strings.TYPE_BUTTON;
-            isPureCardRadioGroup = type === strings.TYPE_PURECARD;
-            isCardRadioGroup = type === strings.TYPE_CARD || isPureCardRadioGroup;
-        }
-        const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
-
-        const prefix = realPrefixCls || css.PREFIX;
-
-        const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
-
-        const wrapper = cls(prefix, {
-            [`${prefix}-disabled`]: isDisabled,
-            [`${prefix}-checked`]: realChecked,
-            [`${prefix}-${displayMode}`]: Boolean(displayMode),
-            [`${prefix}-buttonRadioComponent`]: isButtonRadioComponent,
-            [`${prefix}-buttonRadioGroup`]: isButtonRadioGroup,
-            [`${prefix}-buttonRadioGroup-${buttonSize}`]: isButtonRadioGroup && buttonSize,
-            [`${prefix}-cardRadioGroup`]: isCardRadioGroup,
-            [`${prefix}-cardRadioGroup_disabled`]: isDisabled && isCardRadioGroup,
-            [`${prefix}-cardRadioGroup_checked`]: isCardRadioGroup && realChecked && !isDisabled,
-            [`${prefix}-cardRadioGroup_checked_disabled`]: isCardRadioGroup && realChecked && isDisabled,
-            [`${prefix}-cardRadioGroup_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
-            [className]: Boolean(className),
-            [`${prefix}-focus`]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup),
-        });
-
-        const groupName = this.isInGroup() && this.context.radioGroup.name;
-        const addonCls = cls({
-            [`${prefix}-addon`]: !isButtonRadio,
-            [`${prefix}-addon-buttonRadio`]: isButtonRadio,
-            [`${prefix}-addon-buttonRadio-checked`]: isButtonRadio && realChecked,
-            [`${prefix}-addon-buttonRadio-disabled`]: isButtonRadio && isDisabled,
-            [`${prefix}-addon-buttonRadio-hover`]: isButtonRadio && !realChecked && !isDisabled && isHover,
-            [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
-            [`${prefix}-focus`]: focusVisible && isButtonRadio,
-        }, addonClassName);
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
-                        {children}
-                    </span>
-                ) : null}
-                {extra && !isButtonRadio ? (
-                    <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
-
-        return (
-            <label
-                style={style}
-                className={wrapper}
-                onMouseEnter={this.handleMouseEnter}
-                onMouseLeave={this.handleMouseLeave}
-            >
-                <RadioInner
-                    {...this.props}
-                    {...props}
-                    mode={realMode}
-                    name={name ?? groupName}
-                    isButtonRadio={isButtonRadio}
-                    isPureCardRadioGroup={isPureCardRadioGroup}
-                    onChange={this.onChange}
-                    ref={(ref: RadioInner) => {
-                        this.radioEntity = ref;
-                    }}
-                    addonId={children && addonId}
-                    extraId={extra && extraId}
-                    focusInner={focusVisible && !focusOuter}
-                    onInputFocus={this.handleFocusVisible}
-                    onInputBlur={this.handleBlur}
-                />
-                {
-                    isCardRadioGroup ?
-                        <div className={`${prefix}-isCardRadioGroup_content`}>{renderContent()}</div> :
-                        renderContent()
-                }
-            </label>
-        );
-    }
-}
-
-export default Radio;

package/radio/radioGroup.tsx

@@ -1,240 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { noop } from 'lodash';
-
-import { radioGroupClasses as css, strings } from '@douyinfe/semi-foundation/radio/constants';
-import RadioGroupFoundation, { RadioGroupAdapter } from '@douyinfe/semi-foundation/radio/radioGroupFoundation';
-import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
-
-import BaseComponent from '../_base/baseComponent';
-import { ArrayElement } from '../_base/base';
-import Radio, { RadioType } from './radio';
-import Context, { RadioGroupButtonSize, RadioMode } from './context';
-
-export interface OptionItem {
-    label?: React.ReactNode;
-    value?: string | number;
-    disabled?: boolean;
-    extra?: React.ReactNode;
-    style?: React.CSSProperties;
-    className?: string;
-}
-export type Options = string[] | Array<OptionItem>;
-
-export type RadioGroupProps = {
-    defaultValue?: string | number;
-    disabled?: boolean;
-    name?: string;
-    options?: Options;
-    value?: string | number;
-    onChange?: (event: RadioChangeEvent) => void;
-    className?: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-    direction?: ArrayElement<typeof strings.DIRECTION_SET>;
-    mode?: RadioMode;
-    type?: RadioType;
-    buttonSize?: RadioGroupButtonSize;
-    prefixCls?: string;
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    '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'];
-    id?: string;
-};
-
-export interface RadioGroupState {
-    value?: any;
-}
-
-class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
-    static propTypes = {
-        defaultValue: PropTypes.any,
-        disabled: PropTypes.bool,
-        name: PropTypes.string,
-        options: PropTypes.array,
-        buttonSize: PropTypes.oneOf(strings.BUTTON_SIZE),
-        type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_BUTTON, strings.TYPE_CARD, strings.TYPE_PURECARD]),
-        value: PropTypes.any,
-        onChange: PropTypes.func,
-        children: PropTypes.node,
-        prefixCls: PropTypes.string,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        direction: PropTypes.oneOf(strings.DIRECTION_SET),
-        mode: PropTypes.oneOf(strings.MODE),
-        'aria-label': PropTypes.string,
-        'aria-describedby': PropTypes.string,
-        'aria-errormessage': PropTypes.string,
-        'aria-invalid': PropTypes.bool,
-        'aria-labelledby': PropTypes.string,
-        'aria-required': PropTypes.bool,
-        id: PropTypes.string,
-    };
-
-    static defaultProps: Partial<RadioGroupProps> = {
-        disabled: false,
-        onChange: noop,
-        direction: strings.DEFAULT_DIRECTION,
-        mode: '',
-        type: strings.TYPE_DEFAULT,
-        buttonSize: 'middle'
-    };
-
-    foundation: RadioGroupFoundation;
-    constructor(props: RadioGroupProps) {
-        super(props);
-        this.state = {
-            value: undefined,
-        };
-        this.foundation = new RadioGroupFoundation(this.adapter);
-    }
-
-    componentDidMount() {
-        this.foundation.init();
-    }
-
-    componentDidUpdate(prevProps: RadioGroupProps) {
-        if (typeof prevProps.value === 'number'
-            && isNaN(prevProps.value)
-            && typeof this.props.value === 'number'
-            && isNaN(this.props.value)
-        ) {
-            // `NaN === NaN` returns false, and this will fail the next if check
-            // therefore triggering an infinite loop
-            return;
-        }
-        if (prevProps.value !== this.props.value) {
-            this.foundation.handlePropValueChange(this.props.value);
-        }
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    get adapter(): RadioGroupAdapter {
-        return {
-            ...super.adapter,
-            setValue: (value: any) => {
-                this.setState({ value });
-            },
-            getProps: () => this.props,
-            isInProps: (name: string) => Boolean(name in this.props),
-            notifyChange: (evt: RadioChangeEvent) => {
-                this.props.onChange && this.props.onChange(evt);
-            },
-        };
-    }
-
-    onChange = (evt: RadioChangeEvent) => {
-        this.foundation.handleChange(evt);
-    };
-
-    getFormatName = () => this.props.name || 'default';
-
-    render() {
-        const {
-            children,
-            options,
-            mode,
-            prefixCls,
-            className,
-            style,
-            direction,
-            type,
-            buttonSize,
-            id,
-        } = this.props;
-
-        const isButtonRadio = type === strings.TYPE_BUTTON;
-        const isPureCardRadio = type === strings.TYPE_PURECARD;
-        const isCardRadio = type === strings.TYPE_CARD || isPureCardRadio;
-        const isDefaultRadio = type === strings.TYPE_DEFAULT;
-
-        const prefix = prefixCls || css.PREFIX;
-        const prefixClsDisplay = classnames(className, {
-            [prefix]: true,
-            [`${prefix}-wrapper`]: true,
-            [`${prefix}-${direction}`]: direction && !isButtonRadio,
-            [`${prefix}-${direction}-default`]: direction && isDefaultRadio,
-            [`${prefix}-${direction}-card`]: direction && isCardRadio,
-            [`${prefix}-buttonRadio`]: isButtonRadio,
-        });
-
-        const realValue = this.state.value;
-
-        let inner;
-
-        if (options) {
-            inner = (options || []).map((option, index) => {
-                if (typeof option === 'string') {
-                    return (
-                        <Radio
-                            key={index}
-                            disabled={this.props.disabled}
-                            value={option}
-                        >
-                            {option}
-                        </Radio>
-                    );
-                } else {
-                    return (
-                        <Radio
-                            key={index}
-                            disabled={option.disabled || this.props.disabled}
-                            value={option.value}
-                            extra={option.extra}
-                            className={option.className}
-                            style={option.style}
-                        >
-                            {option.label}
-                        </Radio>
-                    );
-                }
-            });
-        } else if (children) {
-            inner = React.Children.map(children, (itm, index) => (React.isValidElement(itm) ?
-                React.cloneElement(itm, { key: index }) :
-                null));
-        }
-
-        return (
-            <div
-                className={prefixClsDisplay}
-                style={style}
-                id={id}
-                aria-label={this.props['aria-label']}
-                aria-invalid={this.props['aria-invalid']}
-                aria-errormessage={this.props['aria-errormessage']}
-                aria-labelledby={this.props['aria-labelledby']}
-                aria-describedby={this.props['aria-describedby']}
-                aria-required={this.props['aria-required']}
-            >
-                <Context.Provider
-                    value={{
-                        radioGroup: {
-                            onChange: this.onChange,
-                            value: realValue,
-                            disabled: this.props.disabled,
-                            name: this.getFormatName(),
-                            isButtonRadio,
-                            isCardRadio,
-                            isPureCardRadio,
-                            buttonSize,
-                            prefixCls
-                        },
-                        mode
-                    }}
-                >
-                    {inner}
-                </Context.Provider>
-            </div>
-        );
-    }
-}
-
-export default RadioGroup;