@wix/design-system
Version:
@wix/design-system
47 lines • 2.61 kB
JavaScript
import React, { forwardRef } from 'react';
import { classes } from './Radio.classes';
import Text from '../Text';
import { generateDataAttr } from '../utils/generateDataAttr';
import { dataHooks } from './Radio.constants';
import { withFocusable } from '../common/Focusable';
import semanticClassNames from './Radio.semanticClassNames';
import { useUniqueId } from '../providers/useCollapse/utils';
const Radio = forwardRef(({ dataHook, checked = false, disabled = false, label, id, name, value, focusableOnFocus, focusableOnBlur, onChange = () => null, onMouseEnter = () => null, onMouseLeave = () => null, alignItems = 'center', className, style, size = 'medium', }, ref) => {
const radioId = useUniqueId(id);
const prevCheckedRef = React.useRef(checked);
const hasToggledRef = React.useRef(false);
if (prevCheckedRef.current !== checked) {
hasToggledRef.current = true;
prevCheckedRef.current = checked;
}
const _onClick = (event) => {
if (!disabled && !checked) {
onChange({ value, ...event });
}
};
const _onMouseEnter = (event) => {
if (!disabled) {
onMouseEnter(event);
}
};
const _onMouseLeave = (event) => {
if (!disabled) {
onMouseLeave(event);
}
};
return (React.createElement("div", { className: classes.root({
checked,
disabled,
alignItems,
size,
animated: hasToggledRef.current,
}, className), ...generateDataAttr({ checked, disabled }, ['checked', 'disabled']), style: style, "data-hook": dataHook, onClick: _onClick, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, "aria-checked": !!checked },
React.createElement("input", { type: "radio", className: classes.input(), "data-hook": dataHooks.input, disabled: disabled, checked: checked, value: value, name: name, id: radioId, onChange: () => null, onFocus: focusableOnFocus, onBlur: focusableOnBlur, ref: ref }),
React.createElement("span", { className: classes.dotContainer({}, semanticClassNames.icon), "data-hook": dataHooks.icon },
React.createElement("span", { className: classes.dot() })),
label && (React.createElement("label", { className: classes.label(), "data-hook": dataHooks.label, htmlFor: radioId, onClick: e => e.stopPropagation() },
React.createElement(Text, { className: classes.labelText(), tagName: "div", size: size, weight: "thin" }, label)))));
});
Radio.displayName = 'Radio';
export default withFocusable(Radio);
//# sourceMappingURL=Radio.js.map