@fluentui/react
Version:
Reusable React components for building web experiences.
106 lines (105 loc) • 5.51 kB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/react-hooks", "@fluentui/utilities", "../Label/Label"], function (require, exports, tslib_1, React, react_hooks_1, utilities_1, Label_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleBase = void 0;
var getClassNames = (0, utilities_1.classNamesFunction)();
var COMPONENT_NAME = 'Toggle';
exports.ToggleBase = React.forwardRef(function (props, forwardedRef) {
var _a = props.as, RootType = _a === void 0 ? 'div' : _a, ariaLabel = props.ariaLabel, controlledChecked = props.checked, className = props.className, _b = props.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = props.disabled, inlineLabel = props.inlineLabel, label = props.label,
// eslint-disable-next-line @typescript-eslint/no-deprecated
offAriaLabel = props.offAriaLabel, offText = props.offText,
// eslint-disable-next-line @typescript-eslint/no-deprecated
onAriaLabel = props.onAriaLabel, onChange = props.onChange,
// eslint-disable-next-line @typescript-eslint/no-deprecated
onChanged = props.onChanged, onToggleClick = props.onClick, onText = props.onText, role = props.role, styles = props.styles, theme = props.theme;
var _c = (0, react_hooks_1.useControllableValue)(controlledChecked, defaultChecked, React.useCallback(function (ev, isChecked) {
onChange === null || onChange === void 0 ? void 0 : onChange(ev, isChecked);
onChanged === null || onChanged === void 0 ? void 0 : onChanged(isChecked);
}, [onChange, onChanged])), checked = _c[0], setChecked = _c[1];
var classNames = getClassNames(styles, {
theme: theme,
className: className,
disabled: disabled,
checked: checked,
inlineLabel: inlineLabel,
onOffMissing: !onText && !offText,
});
var badAriaLabel = checked ? onAriaLabel : offAriaLabel;
var id = (0, react_hooks_1.useId)(COMPONENT_NAME, props.id);
var labelId = "".concat(id, "-label");
var stateTextId = "".concat(id, "-stateText");
var stateText = checked ? onText : offText;
var toggleNativeProps = (0, utilities_1.getNativeProps)(props, utilities_1.inputProperties, [
'defaultChecked',
]);
// The following properties take priority for what Narrator should read:
// 1. ariaLabel
// 2. onAriaLabel (if checked) or offAriaLabel (if not checked)
// 3. label, if existent
var labelledById = undefined;
if (!ariaLabel && !badAriaLabel) {
if (label) {
labelledById = labelId;
}
if (stateText && !labelledById) {
labelledById = stateTextId;
}
}
var toggleButton = React.useRef(null);
(0, utilities_1.useFocusRects)(toggleButton);
useComponentRef(props, checked, toggleButton);
var onClick = function (ev) {
if (!disabled) {
setChecked(!checked, ev);
if (onToggleClick) {
onToggleClick(ev);
}
}
};
var slotProps = {
root: {
className: classNames.root,
hidden: toggleNativeProps.hidden,
},
label: {
children: label,
className: classNames.label,
htmlFor: id,
id: labelId,
},
container: {
className: classNames.container,
},
pill: tslib_1.__assign(tslib_1.__assign({}, toggleNativeProps), { 'aria-disabled': disabled, 'aria-checked': checked, 'aria-label': ariaLabel ? ariaLabel : badAriaLabel, 'aria-labelledby': labelledById, className: classNames.pill, 'data-is-focusable': true, 'data-ktp-target': true, disabled: disabled, id: id, onClick: onClick, ref: toggleButton, role: role ? role : 'switch', type: 'button' }),
thumb: {
className: classNames.thumb,
},
stateText: {
children: stateText,
className: classNames.text,
htmlFor: id,
id: stateTextId,
},
};
return (React.createElement(RootType, tslib_1.__assign({ ref: forwardedRef }, slotProps.root),
label && React.createElement(Label_1.Label, tslib_1.__assign({}, slotProps.label)),
React.createElement("div", tslib_1.__assign({}, slotProps.container),
React.createElement("button", tslib_1.__assign({}, slotProps.pill),
React.createElement("span", tslib_1.__assign({}, slotProps.thumb))),
((checked && onText) || offText) && React.createElement(Label_1.Label, tslib_1.__assign({}, slotProps.stateText)))));
});
exports.ToggleBase.displayName = COMPONENT_NAME + 'Base';
var useComponentRef = function (props, isChecked, toggleButtonRef) {
React.useImperativeHandle(props.componentRef, function () { return ({
get checked() {
return !!isChecked;
},
focus: function () {
if (toggleButtonRef.current) {
toggleButtonRef.current.focus();
}
},
}); }, [isChecked, toggleButtonRef]);
};
});
//# sourceMappingURL=Toggle.base.js.map