1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.ChoiceGroupBase = void 0;
|
4 | var tslib_1 = require("tslib");
|
5 | var React = require("react");
|
6 | var Label_1 = require("../../Label");
|
7 | var Utilities_1 = require("../../Utilities");
|
8 | var index_1 = require("./ChoiceGroupOption/index");
|
9 | var react_hooks_1 = require("@fluentui/react-hooks");
|
10 | var getClassNames = Utilities_1.classNamesFunction();
|
11 | var getOptionId = function (option, id) {
|
12 | return id + "-" + option.key;
|
13 | };
|
14 | var findOption = function (options, key) {
|
15 | return key === undefined ? undefined : Utilities_1.find(options, function (value) { return value.key === key; });
|
16 | };
|
17 | var focusSelectedOption = function (options, keyChecked, id) {
|
18 | var optionToFocus = findOption(options, keyChecked) || options.filter(function (option) { return !option.disabled; })[0];
|
19 | var elementToFocus = optionToFocus && document.getElementById(getOptionId(optionToFocus, id));
|
20 | if (elementToFocus) {
|
21 | elementToFocus.focus();
|
22 | Utilities_1.setFocusVisibility(true, elementToFocus);
|
23 | }
|
24 | };
|
25 | var focusFromFocusTrapZone = function (evt) {
|
26 | return evt.relatedTarget instanceof HTMLElement && evt.relatedTarget.dataset.isFocusTrapZoneBumper === 'true';
|
27 | };
|
28 | var useComponentRef = function (options, keyChecked, id, componentRef) {
|
29 | React.useImperativeHandle(componentRef, function () { return ({
|
30 | get checkedOption() {
|
31 | return findOption(options, keyChecked);
|
32 | },
|
33 | focus: function () {
|
34 | focusSelectedOption(options, keyChecked, id);
|
35 | },
|
36 | }); }, [options, keyChecked, id]);
|
37 | };
|
38 | var COMPONENT_NAME = 'ChoiceGroup';
|
39 | exports.ChoiceGroupBase = React.forwardRef(function (props, forwardedRef) {
|
40 | var className = props.className, theme = props.theme, styles = props.styles, _a = props.options, options = _a === void 0 ? [] : _a, label = props.label, required = props.required, disabled = props.disabled, name = props.name, defaultSelectedKey = props.defaultSelectedKey, componentRef = props.componentRef, onChange = props.onChange;
|
41 | var id = react_hooks_1.useId('ChoiceGroup');
|
42 | var labelId = react_hooks_1.useId('ChoiceGroupLabel');
|
43 | var divProps = Utilities_1.getNativeProps(props, Utilities_1.divProperties, [
|
44 | 'onChange',
|
45 | 'className',
|
46 | 'required',
|
47 | ]);
|
48 | var classNames = getClassNames(styles, {
|
49 | theme: theme,
|
50 | className: className,
|
51 | optionsContainIconOrImage: options.some(function (option) { return !!(option.iconProps || option.imageSrc); }),
|
52 | });
|
53 | var ariaLabelledBy = props.ariaLabelledBy || (label ? labelId : props['aria-labelledby']);
|
54 | var _b = react_hooks_1.useControllableValue(props.selectedKey, defaultSelectedKey), keyChecked = _b[0], setKeyChecked = _b[1];
|
55 | var _c = React.useState(), keyFocused = _c[0], setKeyFocused = _c[1];
|
56 | var rootRef = React.useRef(null);
|
57 | var mergedRootRefs = react_hooks_1.useMergedRefs(rootRef, forwardedRef);
|
58 | useDebugWarnings(props);
|
59 | useComponentRef(options, keyChecked, id, componentRef);
|
60 | Utilities_1.useFocusRects(rootRef);
|
61 | var onFocus = React.useCallback(function (ev, option) {
|
62 | var _a;
|
63 | if (option) {
|
64 | setKeyFocused(option.itemKey);
|
65 | (_a = option.onFocus) === null || _a === void 0 ? void 0 : _a.call(option, ev);
|
66 | }
|
67 | }, []);
|
68 | var onBlur = React.useCallback(function (ev, option) {
|
69 | var _a;
|
70 | setKeyFocused(undefined);
|
71 | (_a = option === null || option === void 0 ? void 0 : option.onBlur) === null || _a === void 0 ? void 0 : _a.call(option, ev);
|
72 | }, []);
|
73 | var onOptionChange = React.useCallback(function (evt, option) {
|
74 | var _a;
|
75 | if (!option) {
|
76 | return;
|
77 | }
|
78 | setKeyChecked(option.itemKey);
|
79 | (_a = option.onChange) === null || _a === void 0 ? void 0 : _a.call(option, evt);
|
80 | onChange === null || onChange === void 0 ? void 0 : onChange(evt, findOption(options, option.itemKey));
|
81 | }, [onChange, options, setKeyChecked]);
|
82 | var onRadioFocus = React.useCallback(function (evt) {
|
83 |
|
84 | if (focusFromFocusTrapZone(evt)) {
|
85 | focusSelectedOption(options, keyChecked, id);
|
86 | }
|
87 | }, [options, keyChecked, id]);
|
88 | return (React.createElement("div", tslib_1.__assign({ className: classNames.root }, divProps, { ref: mergedRootRefs }),
|
89 | React.createElement("div", tslib_1.__assign({ role: "radiogroup" }, (ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }), { onFocus: onRadioFocus }),
|
90 | label && (React.createElement(Label_1.Label, { className: classNames.label, required: required, id: labelId, disabled: disabled }, label)),
|
91 | React.createElement("div", { className: classNames.flexContainer }, options.map(function (option) {
|
92 | return (React.createElement(index_1.ChoiceGroupOption, tslib_1.__assign({ itemKey: option.key }, option, { key: option.key, onBlur: onBlur, onFocus: onFocus, onChange: onOptionChange, focused: option.key === keyFocused, checked: option.key === keyChecked, disabled: option.disabled || disabled, id: getOptionId(option, id), labelId: option.labelId || labelId + "-" + option.key, name: name || id, required: required })));
|
93 | })))));
|
94 | });
|
95 | exports.ChoiceGroupBase.displayName = COMPONENT_NAME;
|
96 | function useDebugWarnings(props) {
|
97 | if (process.env.NODE_ENV !== 'production') {
|
98 |
|
99 | react_hooks_1.useWarnings({
|
100 | name: COMPONENT_NAME,
|
101 | props: props,
|
102 | mutuallyExclusive: {
|
103 | selectedKey: 'defaultSelectedKey',
|
104 | },
|
105 | });
|
106 | }
|
107 | }
|
108 |
|
\ | No newline at end of file |