UNPKG

3.03 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3import * as React from 'react';
4import PropTypes from 'prop-types';
5import FormGroup from '../FormGroup';
6import useForkRef from '../utils/useForkRef';
7import useControlled from '../utils/useControlled';
8import RadioGroupContext from './RadioGroupContext';
9import useId from '../utils/unstable_useId';
10const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
11 const {
12 // private
13 // eslint-disable-next-line react/prop-types
14 actions,
15 children,
16 name: nameProp,
17 value: valueProp,
18 onChange
19 } = props,
20 other = _objectWithoutPropertiesLoose(props, ["actions", "children", "name", "value", "onChange"]);
21
22 const rootRef = React.useRef(null);
23 const [value, setValue] = useControlled({
24 controlled: valueProp,
25 default: props.defaultValue,
26 name: 'RadioGroup'
27 });
28 React.useImperativeHandle(actions, () => ({
29 focus: () => {
30 let input = rootRef.current.querySelector('input:not(:disabled):checked');
31
32 if (!input) {
33 input = rootRef.current.querySelector('input:not(:disabled)');
34 }
35
36 if (input) {
37 input.focus();
38 }
39 }
40 }), []);
41 const handleRef = useForkRef(ref, rootRef);
42
43 const handleChange = event => {
44 setValue(event.target.value);
45
46 if (onChange) {
47 onChange(event, event.target.value);
48 }
49 };
50
51 const name = useId(nameProp);
52 return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
53 value: {
54 name,
55 onChange: handleChange,
56 value
57 }
58 }, /*#__PURE__*/React.createElement(FormGroup, _extends({
59 role: "radiogroup",
60 ref: handleRef
61 }, other), children));
62});
63process.env.NODE_ENV !== "production" ? RadioGroup.propTypes = {
64 // ----------------------------- Warning --------------------------------
65 // | These PropTypes are generated from the TypeScript type definitions |
66 // | To update them edit the d.ts file and run "yarn proptypes" |
67 // ----------------------------------------------------------------------
68
69 /**
70 * The content of the component.
71 */
72 children: PropTypes.node,
73
74 /**
75 * The default `input` element value. Use when the component is not controlled.
76 */
77 defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
78
79 /**
80 * The name used to reference the value of the control.
81 * If you don't provide this prop, it falls back to a randomly generated name.
82 */
83 name: PropTypes.string,
84
85 /**
86 * Callback fired when a radio button is selected.
87 *
88 * @param {object} event The event source of the callback.
89 * You can pull out the new value by accessing `event.target.value` (string).
90 */
91 onChange: PropTypes.func,
92
93 /**
94 * Value of the selected radio button. The DOM API casts this to a string.
95 */
96 value: PropTypes.any
97} : void 0;
98export default RadioGroup;
\No newline at end of file