@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
140 lines (139 loc) • 6.08 kB
JavaScript
import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React__default, { useCallback, useContext } from "react";
import { CheckDisabled, CheckChecked, CheckNormal } from "@nutui/icons-react-taro";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
const RadioContext = React__default.createContext(null);
const defaultProps$1 = {
labelPosition: "right",
onChange: (value) => {
},
direction: "vertical",
options: []
};
const classPrefix = "nut-radiogroup";
const RadioGroup = React__default.forwardRef((props, ref) => {
const _a = Object.assign(Object.assign({}, defaultProps$1), props), { children, className, value, defaultValue, onChange, shape, labelPosition, direction, options, disabled } = _a, rest = __rest(_a, ["children", "className", "value", "defaultValue", "onChange", "shape", "labelPosition", "direction", "options", "disabled"]);
const cls = classNames(classPrefix, {
[`${classPrefix}-${props.direction}`]: props.direction
}, className);
const [val2State, setVal2State] = usePropsValue({
defaultValue: props.defaultValue,
value: props.value,
finalValue: "",
onChange
});
const renderOptionsChildren = useCallback(() => {
return options === null || options === void 0 ? void 0 : options.map((_a2) => {
var { label, value: value2, disabled: disabled2, onChange: onChange2 } = _a2, rest2 = __rest(_a2, ["label", "value", "disabled", "onChange"]);
return React__default.createElement(Radio, Object.assign({}, rest2, { key: value2 === null || value2 === void 0 ? void 0 : value2.toString(), children: label, value: value2, disabled: disabled2, onChange: onChange2, labelPosition, checked: value2 === val2State }));
});
}, [options, labelPosition, val2State]);
return React__default.createElement(
RadioContext.Provider,
{ value: {
labelPosition: labelPosition || "right",
disabled,
shape,
value: val2State,
check: (value2) => {
setVal2State(value2);
},
uncheck: () => {
setVal2State("");
}
} },
React__default.createElement("div", Object.assign({ className: cls }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children)
);
});
RadioGroup.displayName = "NutRadioGroup";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { disabled: false, shape: "round", value: "", labelPosition: "right", icon: null, activeIcon: null, onChange: (checked) => {
} });
const Radio = (props) => {
const classPrefix2 = "nut-radio";
const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, style, checked, defaultChecked, shape, value, icon, activeIcon, onChange } = _a, others = __rest(_a, ["children", "className", "style", "checked", "defaultChecked", "shape", "value", "icon", "activeIcon", "onChange"]);
let { labelPosition, disabled } = others, rest = __rest(
others,
["labelPosition", "disabled"]
);
let [checkedStatement, setCheckedStatement] = usePropsValue({
value: checked,
defaultValue: defaultChecked,
finalValue: false,
onChange
});
const context = useContext(RadioContext);
if (context) {
checkedStatement = context.value === value;
if (context.labelPosition !== void 0) {
labelPosition = context.labelPosition;
}
if (context.disabled !== void 0) {
disabled = context.disabled;
}
setCheckedStatement = (value2) => {
if (value2) {
context.check(props.value === void 0 ? "" : props.value);
} else {
context.uncheck();
}
};
}
const color = () => {
return {
[`${classPrefix2}-icon-disabled`]: disabled,
[`${classPrefix2}-icon`]: !checkedStatement,
[`${classPrefix2}-icon-checked`]: checkedStatement
};
};
const renderIcon = () => {
const { icon: icon2, activeIcon: activeIcon2 } = props;
if (disabled && !checkedStatement) {
return React__default.createElement(CheckDisabled, { className: classNames(color()) });
}
if (checkedStatement) {
return React__default.isValidElement(activeIcon2) ? React__default.cloneElement(activeIcon2, Object.assign(Object.assign({}, activeIcon2.props), { className: classNames(color()) })) : React__default.createElement(CheckChecked, { className: classNames(color()) });
}
return React__default.isValidElement(icon2) ? React__default.cloneElement(icon2, Object.assign(Object.assign({}, icon2.props), { className: classNames(color()) })) : React__default.createElement(CheckNormal, { className: classNames(color()) });
};
const renderLabel = () => {
const labelcls = classNames(`${classPrefix2}-label`, {
[`${classPrefix2}-label-disabled`]: disabled
});
return React__default.createElement(
React__default.Fragment,
null,
renderIcon(),
React__default.createElement("div", { className: labelcls }, children)
);
};
const renderButton = () => {
const buttoncls = classNames(`${classPrefix2}-button`, {
[`${classPrefix2}-button-active`]: checkedStatement,
[`${classPrefix2}-button-disabled`]: disabled
});
return React__default.createElement("div", { className: buttoncls }, children);
};
const renderByShape = (shape2) => {
return shape2 === "button" ? renderButton() : renderLabel();
};
const renderRadioItem = () => {
return renderByShape(context && context.shape ? context.shape : shape);
};
const handleClick = (e) => {
if (disabled || checkedStatement)
return;
setCheckedStatement(!checkedStatement);
};
const cls = classNames(classPrefix2, {
[`${classPrefix2}-reverse`]: labelPosition === "left"
}, className);
return React__default.createElement("div", Object.assign({ className: cls, style, onClick: handleClick }, rest), renderRadioItem());
};
Radio.displayName = "NutRadio";
Radio.Group = RadioGroup;
export {
Radio as R,
RadioGroup as a
};