Stefan Hacker
118 lines
5.2 KiB
JavaScript
118 lines
5.2 KiB
JavaScript
import { __assign } from "tslib";
|
|
import * as React from 'react';
|
|
import { useControllableValue, useId, useWarnings } from '@fluentui/react-hooks';
|
|
import { classNamesFunction, getNativeProps, inputProperties, useFocusRects } from '@fluentui/utilities';
|
|
import { Label } from '../Label/Label';
|
|
var getClassNames = classNamesFunction();
|
|
var COMPONENT_NAME = 'Toggle';
|
|
export var 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 = 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 = useId(COMPONENT_NAME, props.id);
|
|
var labelId = "".concat(id, "-label");
|
|
var stateTextId = "".concat(id, "-stateText");
|
|
var stateText = checked ? onText : offText;
|
|
var toggleNativeProps = getNativeProps(props, 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);
|
|
useFocusRects(toggleButton);
|
|
useComponentRef(props, checked, toggleButton);
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional
|
|
useWarnings({
|
|
name: COMPONENT_NAME,
|
|
props: props,
|
|
deprecations: {
|
|
offAriaLabel: undefined,
|
|
onAriaLabel: 'ariaLabel',
|
|
onChanged: 'onChange',
|
|
},
|
|
mutuallyExclusive: { checked: 'defaultChecked' },
|
|
});
|
|
}
|
|
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: __assign(__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, __assign({ ref: forwardedRef }, slotProps.root),
|
|
label && React.createElement(Label, __assign({}, slotProps.label)),
|
|
React.createElement("div", __assign({}, slotProps.container),
|
|
React.createElement("button", __assign({}, slotProps.pill),
|
|
React.createElement("span", __assign({}, slotProps.thumb))),
|
|
((checked && onText) || offText) && React.createElement(Label, __assign({}, slotProps.stateText)))));
|
|
});
|
|
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
|