zent/es/checkbox/Checkbox.js

一套前端设计语言和基于React的实现

import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { useCallback, useContext, useRef } from 'react';
import getWidth from '../utils/getWidth';
import GroupContext from './GroupContext';
import { DisabledContext } from '../disabled';
import CheckboxGroup from './Group';
function getDisabled(disabledCtx, groupCtx, props) {
    if (typeof props.disabled === 'boolean') {
        return props.disabled;
    }
    if (groupCtx) {
        return groupCtx.disabled;
    }
    return disabledCtx.value;
}
function getReadOnly(groupCtx, props) {
    if (typeof props.readOnly === 'boolean') {
        return props.readOnly;
    }
    if (groupCtx) {
        return groupCtx.readOnly;
    }
    return false;
}
export function Checkbox(props) {
    var disabledCtx = useContext(DisabledContext);
    var groupCtx = useContext(GroupContext);
    var propsRef = useRef(props);
    propsRef.current = props;
    var ctxOnChange = groupCtx && groupCtx.onChange;
    var onChange = useCallback(function (evt) {
        var _a = propsRef.current, value = _a.value, onChange = _a.onChange;
        if (ctxOnChange) {
            ctxOnChange(value);
            return;
        }
        else if (onChange) {
            var e = Object.create(evt);
            e.target = __assign(__assign({}, propsRef.current), { type: 'checkbox', checked: evt.target.checked });
            onChange(e);
        }
    }, [ctxOnChange]);
    var _3 = props.checked, className = props.className, style = props.style, _1 = props.disabled, _2 = props.readOnly, children = props.children, indeterminate = props.indeterminate, width = props.width, value = props.value, labelStyle = props.labelStyle, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, others = __rest(props, ["checked", "className", "style", "disabled", "readOnly", "children", "indeterminate", "width", "value", "labelStyle", "onMouseEnter", "onMouseLeave"]);
    var readOnly = getReadOnly(groupCtx, props);
    var disabled = getDisabled(disabledCtx, groupCtx, props);
    var checked;
    if (groupCtx) {
        var value_1 = groupCtx.value, isValueEqual_1 = groupCtx.isValueEqual;
        checked = value_1.findIndex(function (it) { return isValueEqual_1(it, props.value); }) !== -1;
    }
    else {
        checked = !!props.checked;
    }
    return (_jsxs("label", __assign({ className: cx('zent-checkbox-wrap', className, {
            'zent-checkbox-checked': !!checked,
            'zent-checkbox-disabled': disabled || readOnly,
            'zent-checkbox-indeterminate': indeterminate,
        }), style: __assign(__assign({}, style), getWidth(width)), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-zv": '10.0.17' }, { children: [_jsxs("span", __assign({ className: "zent-checkbox", "data-zv": '10.0.17' }, { children: [_jsx("span", { className: "zent-checkbox-inner", "data-zv": '10.0.17' }, void 0), _jsx("input", __assign({}, others, { type: "checkbox", checked: checked && !indeterminate, disabled: disabled, readOnly: readOnly, onChange: onChange, "data-zv": '10.0.17' }), void 0)] }), void 0), children !== undefined &&
                children !== null &&
                children !== true &&
                children !== false ? (_jsx("div", __assign({ className: "zent-checkbox-label", style: labelStyle, "data-zv": '10.0.17' }, { children: children }), void 0)) : null] }), void 0));
}
Checkbox.Group = CheckboxGroup;
export default Checkbox;