wix-style-react
Version:
wix-style-react
67 lines • 3.51 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Radio.st.css';
import Text from '../Text';
import { generateDataAttr } from '../utils/generateDataAttr';
import { generateID } from '../utils/generateId';
import { dataHooks } from './constants';
import { withFocusable } from '../common/Focusable';
const Radio = ({ dataHook, checked = false, disabled = false, label, id, name, value, focusableOnFocus, focusableOnBlur, onChange = () => null, onMouseEnter = () => null, onMouseLeave = () => null, alignItems = 'center', className, style, }) => {
const defaultId = generateID();
const _onClick = event => {
if (!disabled && !checked) {
onChange({ value, ...event });
}
};
const _onMouseEnter = event => {
if (!disabled) {
onMouseEnter(event);
}
};
const _onMouseLeave = event => {
if (!disabled) {
onMouseLeave(event);
}
};
const renderLabel = useMemo(() => {
return (React.createElement(Text, { tagName: "div", size: "medium", weight: "thin", secondary: true }, label));
}, [label]);
const radioId = id || defaultId;
return (React.createElement("div", { className: st(classes.root, {
checked,
disabled,
alignItems,
}, 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 }),
React.createElement("span", { className: classes.icon, "data-hook": dataHooks.icon }),
label && (React.createElement("label", { className: classes.label, "data-hook": dataHooks.label, htmlFor: radioId, onClick: e => e.stopPropagation() }, renderLabel))));
};
Radio.displayName = 'Radio';
Radio.propTypes = {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Specifies whether a radio is selected */
checked: PropTypes.bool,
/** Specifies whether radio should be disabled */
disabled: PropTypes.bool,
/** Sets the label on the right side of a radio. The default accepted value is a text string, but it can be overridden to any other component. */
label: PropTypes.node,
/** Sets a unique name for the radio */
name: PropTypes.node,
/** Assigns an unique identifier for the radio */
id: PropTypes.string,
/** Sets the value that the radio represents */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Defines a callback function which is called when radio is selected */
onChange: PropTypes.func,
/** Defines a callback function which is called when cursor enters radio */
onMouseEnter: PropTypes.func,
/** Defines a callback function which is called when cursor leaves radio */
onMouseLeave: PropTypes.func,
/** Control radio alignment with a label */
alignItems: PropTypes.oneOf(['top', 'center']),
};
export default withFocusable(Radio);
//# sourceMappingURL=Radio.js.map