@itcase/ui 1.8.153 → 1.8.154
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -180,10 +180,10 @@ const radioConfig = {
|
|
|
180
180
|
},
|
|
181
181
|
};
|
|
182
182
|
function Radio(props) {
|
|
183
|
-
const { id,
|
|
183
|
+
const { id, appearance, className, label, desc, checked, tag: Tag = 'label', value, isActive, isDisabled, isSkeleton, onChange, } = props;
|
|
184
184
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, radioConfig, isDisabled);
|
|
185
185
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
186
|
-
const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight,
|
|
186
|
+
const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderRadioColorActiveClass, borderRadioColorActiveHoverClass, borderRadioColorClass, borderRadioColorHoverClass, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
187
187
|
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && 'radio_skeleton', sizeClass && `radio_size_${sizeClass}`, !checked || !isActive
|
|
188
188
|
? fillRadioClass && `radio_fill_${fillRadioClass}`
|
|
189
189
|
: fillRadioActiveClass && `radio_fill_active_${fillRadioActiveClass}`, !checked || !isActive
|
|
@@ -197,7 +197,7 @@ function Radio(props) {
|
|
|
197
197
|
? borderRadioColorHoverClass &&
|
|
198
198
|
`radio_border-color_hover_${borderRadioColorHoverClass}`
|
|
199
199
|
: borderRadioColorActiveHoverClass &&
|
|
200
|
-
`radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", disabled: isDisabled && 'disabled',
|
|
200
|
+
`radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
|
|
201
201
|
}
|
|
202
202
|
|
|
203
203
|
exports.Radio = Radio;
|
package/dist/components/Radio.js
CHANGED
|
@@ -178,10 +178,10 @@ const radioConfig = {
|
|
|
178
178
|
},
|
|
179
179
|
};
|
|
180
180
|
function Radio(props) {
|
|
181
|
-
const { id,
|
|
181
|
+
const { id, appearance, className, label, desc, checked, tag: Tag = 'label', value, isActive, isDisabled, isSkeleton, onChange, } = props;
|
|
182
182
|
const appearanceConfig = useAppearanceConfig(appearance, radioConfig, isDisabled);
|
|
183
183
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
184
|
-
const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight,
|
|
184
|
+
const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderRadioColorActiveClass, borderRadioColorActiveHoverClass, borderRadioColorClass, borderRadioColorHoverClass, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
185
185
|
return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && 'radio_skeleton', sizeClass && `radio_size_${sizeClass}`, !checked || !isActive
|
|
186
186
|
? fillRadioClass && `radio_fill_${fillRadioClass}`
|
|
187
187
|
: fillRadioActiveClass && `radio_fill_active_${fillRadioActiveClass}`, !checked || !isActive
|
|
@@ -195,7 +195,7 @@ function Radio(props) {
|
|
|
195
195
|
? borderRadioColorHoverClass &&
|
|
196
196
|
`radio_border-color_hover_${borderRadioColorHoverClass}`
|
|
197
197
|
: borderRadioColorActiveHoverClass &&
|
|
198
|
-
`radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item'), children: [jsx("input", { id: String(id), className: "radio__input", type: "radio", disabled: isDisabled && 'disabled',
|
|
198
|
+
`radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item'), children: [jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
export { Radio, radioAppearance, radioConfig };
|