@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/radio/_story/radio.stories.tsx

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,244 @@
+/* eslint-disable prefer-destructuring */
+import React from 'react';
+import PropTypes from 'prop-types';
+import cls from 'classnames';
+import { noop } 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 '@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;
+    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;
+};
+
+export interface RadioState {
+    hover?: 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
+    };
+
+    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;
+
+    constructor(props: RadioProps) {
+        super(props);
+        this.state = {
+            hover: false,
+        };
+        this.foundation = new RadioFoundation(this.adapter);
+        this.radioEntity = null;
+    }
+
+    get adapter(): RadioAdapter {
+        return {
+            ...super.adapter,
+            setHover: (hover: boolean) => {
+                this.setState({ hover });
+            }
+        };
+    }
+
+    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);
+        }
+        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);
+    };
+
+    render() {
+        const {
+            addonClassName,
+            addonStyle,
+            checked,
+            disabled,
+            style,
+            className,
+            prefixCls,
+            displayMode,
+            children,
+            extra,
+            mode,
+            type,
+            value: propValue
+        } = this.props;
+
+        let realChecked,
+            isDisabled,
+            realMode,
+            isButtonRadioGroup,
+            isCardRadioGroup,
+            isPureCardRadioGroup,
+            isButtonRadioComponent,
+            buttonSize,
+            realPrefixCls;
+        const isHover = this.state.hover;
+        let props = {};
+
+        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, disabled: isDisabled };
+        } else {
+            realChecked = checked;
+            isDisabled = disabled;
+            realMode = mode;
+            isButtonRadioComponent = type === 'button';
+            realPrefixCls = prefixCls;
+        }
+        const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
+
+        const prefix = realPrefixCls || css.PREFIX;
+
+        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_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
+            [className]: Boolean(className),
+        });
+
+        const name = 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,
+        }, addonClassName);
+        const renderContent = () => (
+            <>
+                {children ? <span className={addonCls} style={addonStyle}>{children}</span> : null}
+                {extra && !isButtonRadio ? <div className={`${prefix}-extra`}>{extra}</div> : null}
+            </>
+        );
+        return (
+            <label
+                style={style}
+                className={wrapper}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+            >
+                <RadioInner
+                    {...this.props}
+                    {...props}
+                    mode={realMode}
+                    name={name}
+                    isButtonRadio={isButtonRadio}
+                    isPureCardRadioGroup={isPureCardRadioGroup}
+                    onChange={this.onChange}
+                    ref={(ref: RadioInner) => {
+                        this.radioEntity = ref;
+                    }}
+                />
+                {
+                    isCardRadioGroup ?
+                        <div className={`${prefix}-isCardRadioGroup_content`}>{renderContent()}</div> :
+                        renderContent()
+                }
+            </label>
+        );
+    }
+}
+
+export default Radio;

package/radio/radioGroup.tsx

@@ -0,0 +1,204 @@
+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;
+    style?: React.CSSProperties;
+    direction?: ArrayElement<typeof strings.DIRECTION_SET>;
+    mode?: RadioMode;
+    type?: RadioType;
+    buttonSize?: RadioGroupButtonSize;
+    prefixCls?: 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)
+    };
+
+    static defaultProps: Partial<RadioGroupProps> = {
+        disabled: false,
+        onChange: noop,
+        direction: strings.DEFAULT_DIRECTION,
+        mode: '',
+        type: strings.TYPE_DEFAULT,
+        buttonSize: 'middle'
+    };
+
+    constructor(props: RadioGroupProps) {
+        super(props);
+        this.state = {
+            value: undefined,
+        };
+        this.foundation = new RadioGroupFoundation(this.adapter);
+    }
+
+    componentDidMount() {
+        this.foundation.init();
+    }
+
+    componentDidUpdate(prevProps: RadioGroupProps) {
+        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
+        } = 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}>
+                <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;

package/radio/radioInner.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RadioInnerFoundation, { RadioChangeEvent, RadioInnerAdapter } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import { radioClasses as css } from '@douyinfe/semi-foundation/radio/constants';
+import Context from './context';
+import classnames from 'classnames';
+import { IconRadio } from '@douyinfe/semi-icons';
+import { noop } from 'lodash';
+
+export type RadioInnerMode = 'advanced' | '';
+export interface RadioInnerProps extends BaseProps {
+    checked?: boolean;
+    disabled?: boolean;
+    isButtonRadio?: boolean;
+    onChange?: (e: RadioChangeEvent) => void;
+    mode?: RadioInnerMode;
+    autoFocus?: boolean;
+    name?: string;
+    prefixCls?: string;
+    ref?: React.MutableRefObject<RadioInner> | ((instance: RadioInner) => void);
+    isPureCardRadioGroup?: boolean;
+}
+
+interface RadioInnerState {
+    checked?: boolean;
+}
+
+class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
+    static contextType = Context;
+
+    static propTypes = {
+        checked: PropTypes.bool,
+        disabled: PropTypes.bool,
+        isButtonRadio: PropTypes.bool,
+        onChange: PropTypes.func,
+        mode: PropTypes.oneOf(['advanced', '']),
+    };
+
+    static defaultProps = {
+        onChange: noop,
+        isButtonRadio: false
+    };
+
+
+    inputEntity!: HTMLInputElement;
+    constructor(props: RadioInnerProps) {
+        super(props);
+        this.state = {
+            checked: false
+        };
+        this.foundation = new RadioInnerFoundation(this.adapter);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    get adapter(): RadioInnerAdapter {
+        return {
+            ...super.adapter,
+            setNativeControlChecked: (checked: boolean) => {
+                this.setState({ checked });
+            },
+            notifyChange: (e: RadioChangeEvent) => {
+                this.props.onChange(e);
+            }
+        };
+    }
+
+    componentDidMount() {
+        this.foundation.init();
+    }
+
+    componentDidUpdate(prevProps: RadioInnerProps) {
+        if (prevProps.checked !== this.props.checked) {
+            this.foundation.setChecked(this.props.checked);
+        }
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+    }
+
+    blur() {
+        this.inputEntity.blur();
+    }
+
+    focus() {
+        this.inputEntity.focus();
+    }
+
+    onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        this.foundation.handleChange(e);
+    }
+
+    render() {
+        const { disabled, mode, autoFocus, name, isButtonRadio, isPureCardRadioGroup } = this.props;
+        const { checked } = this.state;
+
+        const prefix = this.props.prefixCls || css.PREFIX;
+
+        const wrapper = classnames({
+            [`${prefix}-inner`]: true,
+            [`${prefix}-inner-checked`]: Boolean(checked),
+            [`${prefix}-inner-buttonRadio`]: isButtonRadio,
+            [`${prefix}-inner-pureCardRadio`]: isPureCardRadioGroup,
+        });
+
+        const inner = classnames({
+            [`${prefix}-inner-display`]: !isButtonRadio,
+        });
+
+        return (
+            <span className={wrapper}>
+                <input
+                    ref={ref => {
+                        this.inputEntity = ref;
+                    }}
+                    autoFocus={autoFocus}
+                    type={mode === 'advanced' ? 'checkbox' : 'radio'}
+                    checked={Boolean(checked)}
+                    disabled={disabled}
+                    onChange={this.onChange}
+                    name={name}
+                />
+                <span className={inner}>{checked ? <IconRadio /> : null}</span>
+            </span>
+        );
+    }
+}
+
+export default RadioInner;