@nutui/nutui-react/dist/es/packages/radio/radio.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useContext } from "react";
import { CheckChecked, CheckDisabled, CheckNormal } from "@nutui/icons-react";
import classNames from "classnames";
import RadioContext from "../radiogroup/context";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    disabled: false,
    shape: 'round',
    value: '',
    labelPosition: 'right',
    icon: null,
    activeIcon: null,
    onChange: function(checked) {}
});
export var Radio = function(props) {
    var classPrefix = 'nut-radio';
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, className = _ref.className, style = _ref.style, checked = _ref.checked, defaultChecked = _ref.defaultChecked, shape = _ref.shape, value = _ref.value, icon = _ref.icon, activeIcon = _ref.activeIcon, onChange = _ref.onChange, others = _object_without_properties(_ref, [
        "children",
        "className",
        "style",
        "checked",
        "defaultChecked",
        "shape",
        "value",
        "icon",
        "activeIcon",
        "onChange"
    ]);
    // eslint-disable-next-line prefer-const
    var labelPosition = others.labelPosition, disabled = others.disabled, rest = _object_without_properties(others, [
        "labelPosition",
        "disabled"
    ]);
    // eslint-disable-next-line prefer-const
    var _usePropsValue = _sliced_to_array(usePropsValue({
        value: checked,
        defaultValue: defaultChecked,
        finalValue: false,
        onChange: onChange
    }), 2), checkedStatement = _usePropsValue[0], setCheckedStatement = _usePropsValue[1];
    var context = useContext(RadioContext);
    if (context) {
        checkedStatement = context.value === value;
        if (context.labelPosition !== undefined) {
            labelPosition = context.labelPosition;
        }
        if (context.disabled !== undefined) {
            disabled = context.disabled;
        }
        setCheckedStatement = function(value) {
            if (value) {
                context.check(props.value === undefined ? '' : props.value);
            } else {
                context.uncheck();
            }
        };
    }
    var color = function() {
        var _obj;
        return _obj = {}, _define_property(_obj, "".concat(classPrefix, "-icon-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-icon"), !checkedStatement), _define_property(_obj, "".concat(classPrefix, "-icon-checked"), checkedStatement), _obj;
    };
    var renderIcon = function() {
        var icon = props.icon, activeIcon = props.activeIcon;
        if (disabled && !checkedStatement) {
            return /*#__PURE__*/ React.createElement(CheckDisabled, {
                className: classNames(color())
            });
        }
        if (checkedStatement) {
            return /*#__PURE__*/ React.isValidElement(activeIcon) ? /*#__PURE__*/ React.cloneElement(activeIcon, _object_spread_props(_object_spread({}, activeIcon.props), {
                className: classNames(color())
            })) : /*#__PURE__*/ React.createElement(CheckChecked, {
                className: classNames(color())
            });
        }
        return /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
            className: classNames(color())
        })) : /*#__PURE__*/ React.createElement(CheckNormal, {
            className: classNames(color())
        });
    };
    var renderLabel = function() {
        var labelcls = classNames("".concat(classPrefix, "-label"), _define_property({}, "".concat(classPrefix, "-label-disabled"), disabled));
        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), /*#__PURE__*/ React.createElement("div", {
            className: labelcls
        }, children));
    };
    var renderButton = function() {
        var _obj;
        var buttoncls = classNames("".concat(classPrefix, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), _define_property(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj));
        return /*#__PURE__*/ React.createElement("div", {
            className: buttoncls
        }, children);
    };
    var renderByShape = function(shape) {
        return shape === 'button' ? renderButton() : renderLabel();
    };
    var renderRadioItem = function() {
        return renderByShape(context && context.shape ? context.shape : shape);
    };
    var handleClick = function(e) {
        if (disabled || checkedStatement) return;
        setCheckedStatement(!checkedStatement);
    };
    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className);
    return /*#__PURE__*/ React.createElement("div", _object_spread({
        className: cls,
        style: style,
        onClick: handleClick
    }, rest), renderRadioItem());
};
Radio.displayName = 'NutRadio';