frc-ui/es/tabs/Tabs.js

React Web UI

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import classNames from 'classnames';
import Radio from 'antd/es/radio';
const { Group, Button } = Radio;
class Tabs extends React.PureComponent {
    constructor(props) {
        super(props);
        this.h_change = (ev) => {
            const { multi, onChange, options, showAll } = this.props;
            let stateValue = this.state.value;
            let value = ev.target.value;
            if (value === undefined)
                return;
            const disabled = options.some((o) => o.value === value && o.disabled === true);
            if (disabled)
                return;
            if (multi) {
                if (!!ev.nativeEvent.ctrlKey) {
                    if (value === 'all') {
                        value = ['all'];
                    }
                    else {
                        const sv = stateValue || [];
                        if (sv instanceof Array) {
                            if (!sv.some((va) => va === value)) {
                                value = [...sv.filter((v) => v !== 'all'), value];
                            }
                            else {
                                value = sv.filter((v) => v !== value);
                            }
                        }
                    }
                    if (showAll) {
                        const sa = options.some((o) => !o.disabled && value.indexOf(o.value) < 0);
                        if (!sa || value.length === 0) {
                            value = ['all'];
                        }
                    }
                }
                else {
                    value = [value];
                }
            }
            this.setState({ value }, () => {
                if (typeof onChange === 'function') {
                    onChange(value, ev.target.value);
                }
            });
        };
        this.f_checked = (v) => {
            const { value } = this.state;
            const vs = value || [];
            return (vs instanceof Array && vs.some((va) => va === v)) || value === v;
        };
        this.r_button = () => {
            const { showAll } = this.props;
            let options = this.props.options || [];
            if (showAll) {
                const all = { label: '全部', value: 'all' };
                options = [all, ...options];
            }
            return (options || []).map((o) => {
                const style = { minWidth: this.props.itemWidth };
                const checked = this.f_checked(o.value);
                checked && (style.background = '#FF9300');
                checked && (style.color = '#1E1E1E');
                o.width && (style.width = o.width);
                checked && o.background && (style.background = o.background);
                checked && o.color && (style.color = o.color);
                const cls = classNames({
                    ['swc-tabs-checked']: checked,
                    ['swc-tabs-disabled']: o.disabled
                });
                if (typeof o.render === 'function') {
                    const props = {
                        style,
                        className: cls,
                        children: o.label
                    };
                    return o.render(Button, props);
                }
                return (React.createElement(Button, { key: o.value, style: style, value: o.value, className: cls, checked: false }, o.label));
            });
        };
        const { showAll, multi } = props;
        let value = props.value;
        if (showAll && !value) {
            value = value || (multi ? ['all'] : 'all');
        }
        this.state = {
            value
        };
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.value !== this.props.value) {
            this.setState({ value: nextProps.value });
        }
    }
    render() {
        const _a = this.props, { className, children, label } = _a, other = __rest(_a, ["className", "children", "label"]);
        const { value } = this.state;
        delete other.onChange;
        delete other.value;
        delete other.options;
        const cls = classNames('swc-tabs', className);
        const child = (React.createElement(Group, Object.assign({}, other, { className: cls, onChange: this.h_change, value: value }), children || this.r_button()));
        if (label) {
            return (React.createElement("div", { className: 'swc-tabs-wrapper' },
                React.createElement("label", null,
                    label,
                    ":"),
                child));
        }
        return child;
    }
}
Tabs.defaultProps = {
    showAll: false,
    multi: false,
    itemWidth: 60
};
export default Tabs;