@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
131 lines (130 loc) • 6.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Radio", {
enumerable: true,
get: function() {
return Radio;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _iconsreact = require("@nutui/icons-react");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _context = /*#__PURE__*/ _interop_require_default._(require("../radiogroup/context"));
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
disabled: false,
shape: 'round',
value: '',
labelPosition: 'right',
icon: null,
activeIcon: null,
onChange: function onChange(checked) {}
});
var Radio = function Radio(props) {
var classPrefix = 'nut-radio';
var _ref = (0, _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 = (0, _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 = (0, _object_without_properties._)(others, [
"labelPosition",
"disabled"
]);
// eslint-disable-next-line prefer-const
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: checked,
defaultValue: defaultChecked,
finalValue: false,
onChange: onChange
}), 2), checkedStatement = _usePropsValue[0], setCheckedStatement = _usePropsValue[1];
var context = (0, _react.useContext)(_context.default);
if (context) {
checkedStatement = context.value === value;
if (context.labelPosition !== undefined) {
labelPosition = context.labelPosition;
}
if (context.disabled !== undefined) {
disabled = context.disabled;
}
setCheckedStatement = function setCheckedStatement(value) {
if (value) {
context.check(props.value === undefined ? '' : props.value);
} else {
context.uncheck();
}
};
}
var color = function color() {
var _obj;
return _obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-icon-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-icon"), !checkedStatement), (0, _define_property._)(_obj, "".concat(classPrefix, "-icon-checked"), checkedStatement), _obj;
};
var renderIcon = function renderIcon() {
var icon = props.icon, activeIcon = props.activeIcon;
if (disabled && !checkedStatement) {
return /*#__PURE__*/ _react.default.createElement(_iconsreact.CheckDisabled, {
className: (0, _classnames.default)(color())
});
}
if (checkedStatement) {
return /*#__PURE__*/ _react.default.isValidElement(activeIcon) ? /*#__PURE__*/ _react.default.cloneElement(activeIcon, (0, _object_spread_props._)((0, _object_spread._)({}, activeIcon.props), {
className: (0, _classnames.default)(activeIcon.props.className, color())
})) : /*#__PURE__*/ _react.default.createElement(_iconsreact.CheckChecked, {
className: (0, _classnames.default)(color())
});
}
return /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.cloneElement(icon, (0, _object_spread_props._)((0, _object_spread._)({}, icon.props), {
className: (0, _classnames.default)(icon.props.className, color())
})) : /*#__PURE__*/ _react.default.createElement(_iconsreact.CheckNormal, {
className: (0, _classnames.default)(color())
});
};
var renderLabel = function renderLabel() {
var labelcls = (0, _classnames.default)("".concat(classPrefix, "-label"), (0, _define_property._)({}, "".concat(classPrefix, "-label-disabled"), disabled));
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), /*#__PURE__*/ _react.default.createElement("div", {
className: labelcls
}, children));
};
var renderButton = function renderButton() {
var _obj;
var buttoncls = (0, _classnames.default)("".concat(classPrefix, "-button"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), (0, _define_property._)(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj));
return /*#__PURE__*/ _react.default.createElement("div", {
className: buttoncls
}, children);
};
var renderByShape = function renderByShape(shape) {
return shape === 'button' ? renderButton() : renderLabel();
};
var renderRadioItem = function renderRadioItem() {
return renderByShape(context && context.shape ? context.shape : shape);
};
var handleClick = function handleClick(e) {
if (disabled || checkedStatement) return;
setCheckedStatement(!checkedStatement);
};
var cls = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className);
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: cls,
style: style,
onClick: handleClick
}, rest), renderRadioItem());
};
Radio.displayName = 'NutRadio';