lowcode-engine/packages/material-parser/test/fixtures/fusion-next-component/es/checkbox/checkbox.js

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';

var _class, _temp;

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import UIState from '../mixin-ui-state';
import ConfigProvider from '../config-provider';
import Icon from '../icon';
import { obj, func } from '../util';

var noop = func.noop;
function isChecked(selectedValue, value) {
    return selectedValue.indexOf(value) > -1;
}
/**
 * Checkbox
 * @order 1
 */
var Checkbox = (_temp = _class = function (_UIState) {
    _inherits(Checkbox, _UIState);

    function Checkbox(props, context) {
        _classCallCheck(this, Checkbox);

        var _this = _possibleConstructorReturn(this, _UIState.call(this, props));

        var checked = void 0,
            indeterminate = void 0;

        if ('checked' in props) {
            checked = props.checked;
        } else {
            checked = props.defaultChecked;
        }

        if ('indeterminate' in props) {
            indeterminate = props.indeterminate;
        } else {
            indeterminate = props.defaultIndeterminate;
        }
        if (context.__group__) {
            checked = isChecked(context.selectedValue, props.value);
        }
        _this.state = {
            checked: checked,
            indeterminate: indeterminate
        };

        _this.disabled = props.disabled || context.__group__ && 'disabled' in context && context.disabled;
        _this.onChange = _this.onChange.bind(_this);
        return _this;
    }

    Checkbox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps, nextContext) {
        if (nextContext.__group__) {
            if ('selectedValue' in nextContext) {
                this.setState({
                    checked: isChecked(nextContext.selectedValue, nextProps.value)
                });
            }

            this.disabled = nextProps.disabled || 'disabled' in nextContext && nextContext.disabled;
        } else {
            if ('checked' in nextProps) {
                this.setState({
                    checked: nextProps.checked
                });
            }
            this.disabled = nextProps.disabled;
        }

        if ('indeterminate' in nextProps) {
            this.setState({
                indeterminate: nextProps.indeterminate
            });
        }
    };

    Checkbox.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState, nextContext) {
        var shallowEqual = obj.shallowEqual;

        return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState) || !shallowEqual(this.context, nextContext);
    };

    Checkbox.prototype.onChange = function onChange(e) {
        var checked = e.target.checked;
        var value = this.props.value;

        if (this.disabled) {
            return;
        }
        if (this.context.__group__) {
            this.context.onChange(value, e);
        } else {
            if (!('checked' in this.props)) {
                this.setState({
                    checked: checked
                });
            }

            if (!('indeterminate' in this.props)) {
                this.setState({
                    indeterminate: false
                });
            }
            this.props.onChange(checked, e);
        }
    };

    Checkbox.prototype.render = function render() {
        var _classnames;

        /* eslint-disable no-unused-vars */
        var _props = this.props,
            id = _props.id,
            className = _props.className,
            children = _props.children,
            style = _props.style,
            label = _props.label,
            onMouseEnter = _props.onMouseEnter,
            onMouseLeave = _props.onMouseLeave,
            rtl = _props.rtl,
            isPreview = _props.isPreview,
            renderPreview = _props.renderPreview,
            value = _props.value,
            name = _props.name,
            otherProps = _objectWithoutProperties(_props, ['id', 'className', 'children', 'style', 'label', 'onMouseEnter', 'onMouseLeave', 'rtl', 'isPreview', 'renderPreview', 'value', 'name']);

        var checked = !!this.state.checked;
        var disabled = this.disabled;
        var indeterminate = !!this.state.indeterminate;
        var prefix = this.context.prefix || this.props.prefix;

        var others = obj.pickOthers(Checkbox.propTypes, otherProps);
        var othersData = obj.pickAttrsWith(others, 'data-');
        if (otherProps.title) {
            othersData.title = otherProps.title;
        }

        var childInput = React.createElement('input', _extends({}, obj.pickOthers(Checkbox.propTypes, otherProps), {
            id: id,
            value: value,
            name: name,
            disabled: disabled,
            checked: checked,
            type: 'checkbox',
            onChange: this.onChange,
            'aria-checked': indeterminate ? 'mixed' : checked,
            className: prefix + 'checkbox-input'
        }));

        // disable 无状态操作
        if (!disabled) {
            childInput = this.getStateElement(childInput);
        }
        var cls = classnames((_classnames = {}, _classnames[prefix + 'checkbox-wrapper'] = true, _classnames[className] = !!className, _classnames.checked = checked, _classnames.disabled = disabled, _classnames.indeterminate = indeterminate, _classnames[this.getStateClassName()] = true, _classnames));
        var labelCls = prefix + 'checkbox-label';
        var type = indeterminate ? 'semi-select' : 'select';

        if (isPreview) {
            var previewCls = classnames(className, prefix + 'form-preview');
            if ('renderPreview' in this.props) {
                return React.createElement(
                    'div',
                    _extends({
                        id: id,
                        dir: rtl ? 'rtl' : undefined
                    }, othersData, {
                        className: previewCls
                    }),
                    renderPreview(checked, this.props)
                );
            }

            return React.createElement(
                'p',
                _extends({
                    id: id,
                    dir: rtl ? 'rtl' : undefined
                }, othersData, {
                    className: previewCls
                }),
                checked && (children || label || this.state.value)
            );
        }

        return React.createElement(
            'label',
            _extends({}, othersData, {
                className: cls,
                style: style,
                dir: rtl ? 'rtl' : undefined,
                onMouseEnter: onMouseEnter,
                onMouseLeave: onMouseLeave
            }),
            React.createElement(
                'span',
                { className: prefix + 'checkbox' },
                React.createElement(
                    'span',
                    { className: prefix + 'checkbox-inner' },
                    React.createElement(Icon, {
                        type: type,
                        size: 'xs',
                        className: indeterminate ? 'zoomIn' : ''
                    })
                ),
                childInput
            ),
            [label, children].map(function (item, i) {
                return [undefined, null].indexOf(item) === -1 ? React.createElement(
                    'span',
                    { key: i, className: labelCls },
                    item
                ) : null;
            })
        );
    };

    return Checkbox;
}(UIState), _class.displayName = 'Checkbox', _class.propTypes = _extends({}, ConfigProvider.propTypes, {
    prefix: PropTypes.string,
    rtl: PropTypes.bool,
    /**
     * 自定义类名
     */
    className: PropTypes.string,
    /**
     * checkbox id, 挂载在input上
     */
    id: PropTypes.string,
    /**
     * 自定义内敛样式
     */
    style: PropTypes.object,
    /**
     * 选中状态
     */
    checked: PropTypes.bool,
    /**
     * 默认选中状态
     */
    defaultChecked: PropTypes.bool,
    /**
     * 禁用
     */
    disabled: PropTypes.bool,
    /**
     * 通过属性配置label，
     */
    label: PropTypes.node,
    /**
     * Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性
     */
    indeterminate: PropTypes.bool,
    /**
     *  Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性
     */
    defaultIndeterminate: PropTypes.bool,
    /**
     * 状态变化时触发的事件
     * @param {Boolean} checked 是否选中
     * @param {Event} e Dom 事件对象
     */
    onChange: PropTypes.func,
    /**
     * 鼠标进入enter事件
     * @param {Event} e Dom 事件对象
     */
    onMouseEnter: PropTypes.func,
    /**
     * 鼠标离开Leave事件
     * @param {Event} e Dom 事件对象
     */
    onMouseLeave: PropTypes.func,
    /**
     * checkbox 的value
     */
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /**
     * name
     */
    name: PropTypes.string,
    /**
     * 是否为预览态
     */
    isPreview: PropTypes.bool,
    /**
     * 预览态模式下渲染的内容
     * @param {number} value 评分值
     */
    renderPreview: PropTypes.func
}), _class.defaultProps = {
    defaultChecked: false,
    defaultIndeterminate: false,
    onChange: noop,
    onMouseEnter: noop,
    onMouseLeave: noop,
    prefix: 'next-',
    isPreview: false
}, _class.contextTypes = {
    onChange: PropTypes.func,
    __group__: PropTypes.bool,
    selectedValue: PropTypes.array,
    disabled: PropTypes.bool,
    prefix: PropTypes.string
}, _temp);


export default ConfigProvider.config(Checkbox);