1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports["default"] = void 0;
|
7 |
|
8 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9 |
|
10 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11 |
|
12 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
13 |
|
14 | var _core = require("@emotion/core");
|
15 |
|
16 | var _autoId = require("@reach/auto-id");
|
17 |
|
18 | var _react = require("react");
|
19 |
|
20 | var _Box = _interopRequireDefault(require("../Box"));
|
21 |
|
22 | var _utils = require("../utils");
|
23 |
|
24 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
25 |
|
26 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
27 |
|
28 | var RadioButtonGroup = function RadioButtonGroup(_ref) {
|
29 | var name = _ref.name,
|
30 | children = _ref.children,
|
31 | defaultValue = _ref.defaultValue,
|
32 | controlledValue = _ref.value,
|
33 | onChange = _ref.onChange,
|
34 | _ref$spacing = _ref.spacing,
|
35 | spacing = _ref$spacing === void 0 ? "12px" : _ref$spacing,
|
36 | isInline = _ref.isInline,
|
37 | rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["name", "children", "defaultValue", "value", "onChange", "spacing", "isInline"]);
|
38 | var isControlled = controlledValue != null;
|
39 |
|
40 | var _useState = (0, _react.useState)(defaultValue || null),
|
41 | value = _useState[0],
|
42 | setValue = _useState[1];
|
43 |
|
44 | var _value = isControlled ? controlledValue : value;
|
45 |
|
46 | var allNodes = (0, _react.useRef)([]);
|
47 | var validChildren = (0, _utils.cleanChildren)(children);
|
48 | var focusableValues = validChildren.map(function (child) {
|
49 | return child.props.isDisabled === true ? null : child.props.value;
|
50 | }).filter(function (val) {
|
51 | return val != null;
|
52 | });
|
53 | var allValues = validChildren.map(function (child) {
|
54 | return child.props.value;
|
55 | });
|
56 |
|
57 | var updateIndex = function updateIndex(index) {
|
58 | var childValue = focusableValues[index];
|
59 |
|
60 | var _index = allValues.indexOf(childValue);
|
61 |
|
62 | allNodes.current[_index].focus();
|
63 |
|
64 | !isControlled && setValue(childValue);
|
65 | onChange && onChange(childValue);
|
66 | };
|
67 |
|
68 | var handleKeyDown = function handleKeyDown(event) {
|
69 | if (event.key === "Tab") {
|
70 | return;
|
71 | }
|
72 |
|
73 |
|
74 | event.preventDefault();
|
75 | var count = focusableValues.length;
|
76 | var enabledCheckedIndex = focusableValues.indexOf(_value);
|
77 |
|
78 | if (enabledCheckedIndex === -1) {
|
79 | enabledCheckedIndex = 0;
|
80 | }
|
81 |
|
82 | switch (event.key) {
|
83 | case "ArrowRight":
|
84 | case "ArrowDown":
|
85 | {
|
86 | var nextIndex = (enabledCheckedIndex + 1) % count;
|
87 | updateIndex(nextIndex);
|
88 | break;
|
89 | }
|
90 |
|
91 | case "ArrowLeft":
|
92 | case "ArrowUp":
|
93 | {
|
94 | var _nextIndex = (enabledCheckedIndex - 1 + count) % count;
|
95 |
|
96 | updateIndex(_nextIndex);
|
97 | break;
|
98 | }
|
99 |
|
100 | default:
|
101 | break;
|
102 | }
|
103 | };
|
104 |
|
105 | var fallbackName = "radio-" + (0, _autoId.useId)();
|
106 |
|
107 | var _name = name || fallbackName;
|
108 |
|
109 | var clones = validChildren.map(function (child, index) {
|
110 | var isLastChild = validChildren.length === index + 1;
|
111 | var isFirstChild = index === 0;
|
112 | var spacingProps = isInline ? {
|
113 | mr: spacing
|
114 | } : {
|
115 | mb: spacing
|
116 | };
|
117 | var isChecked = child.props.value === _value;
|
118 |
|
119 | var handleClick = function handleClick() {
|
120 | !isControlled && setValue(child.props.value);
|
121 | onChange && onChange(child.props.value);
|
122 | };
|
123 |
|
124 | var getTabIndex = function getTabIndex() {
|
125 |
|
126 | if (_value == null) {
|
127 | return isFirstChild ? 0 : -1;
|
128 | } else {
|
129 | return isChecked ? 0 : -1;
|
130 | }
|
131 | };
|
132 |
|
133 | return (0, _react.cloneElement)(child, _objectSpread({
|
134 | key: index,
|
135 | ref: function ref(node) {
|
136 | return allNodes.current[index] = node;
|
137 | },
|
138 | name: _name,
|
139 | onClick: handleClick,
|
140 | tabIndex: getTabIndex(),
|
141 | isChecked: isChecked
|
142 | }, !isLastChild && spacingProps));
|
143 | });
|
144 | return (0, _core.jsx)(_Box["default"], (0, _extends2["default"])({
|
145 | role: "radiogroup",
|
146 | onKeyDown: handleKeyDown
|
147 | }, rest), clones);
|
148 | };
|
149 |
|
150 | RadioButtonGroup.displayName = "RadioButtonGroup";
|
151 | var _default = RadioButtonGroup;
|
152 | exports["default"] = _default; |
\ | No newline at end of file |