Stefan Hacker
88 lines
5.5 KiB
JavaScript
88 lines
5.5 KiB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/react-hooks", "@fluentui/utilities", "../Icon/Icon"], function (require, exports, tslib_1, React, react_hooks_1, utilities_1, Icon_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.CheckboxBase = void 0;
|
|
var getClassNames = (0, utilities_1.classNamesFunction)();
|
|
exports.CheckboxBase = React.forwardRef(function (props, forwardedRef) {
|
|
var disabled = props.disabled, required = props.required, inputProps = props.inputProps, name = props.name, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, ariaPositionInSet = props.ariaPositionInSet, ariaSetSize = props.ariaSetSize, title = props.title, checkmarkIconProps = props.checkmarkIconProps, styles = props.styles, theme = props.theme, className = props.className, _a = props.boxSide, boxSide = _a === void 0 ? 'start' : _a;
|
|
var id = (0, react_hooks_1.useId)('checkbox-', props.id);
|
|
var rootRef = React.useRef(null);
|
|
var mergedRootRefs = (0, react_hooks_1.useMergedRefs)(rootRef, forwardedRef);
|
|
var inputRef = React.useRef(null);
|
|
var _b = (0, react_hooks_1.useControllableValue)(props.checked, props.defaultChecked, props.onChange), isChecked = _b[0], setIsChecked = _b[1];
|
|
var _c = (0, react_hooks_1.useControllableValue)(props.indeterminate, props.defaultIndeterminate), isIndeterminate = _c[0], setIsIndeterminate = _c[1];
|
|
(0, utilities_1.useFocusRects)(rootRef);
|
|
useDebugWarning(props);
|
|
var classNames = getClassNames(styles, {
|
|
theme: theme,
|
|
className: className,
|
|
disabled: disabled,
|
|
indeterminate: isIndeterminate,
|
|
checked: isChecked,
|
|
reversed: boxSide !== 'start',
|
|
isUsingCustomLabelRender: !!props.onRenderLabel,
|
|
});
|
|
var onChange = React.useCallback(function (event) {
|
|
if (isIndeterminate) {
|
|
// If indeterminate, clicking the checkbox *only* removes the indeterminate state (or if
|
|
// controlled, lets the consumer know to change it by calling onChange). It doesn't
|
|
// change the checked state.
|
|
setIsChecked(!!isChecked, event);
|
|
setIsIndeterminate(false);
|
|
}
|
|
else {
|
|
setIsChecked(!isChecked, event);
|
|
}
|
|
}, [setIsChecked, setIsIndeterminate, isIndeterminate, isChecked]);
|
|
var defaultLabelRenderer = React.useCallback(function (checkboxProps) {
|
|
if (!checkboxProps) {
|
|
return null;
|
|
}
|
|
return checkboxProps.label ? (React.createElement("span", { className: classNames.text, title: checkboxProps.title }, checkboxProps.label)) : null;
|
|
}, [classNames.text]);
|
|
var setNativeIndeterminate = React.useCallback(function (indeterminate) {
|
|
if (!inputRef.current) {
|
|
return;
|
|
}
|
|
var value = !!indeterminate;
|
|
inputRef.current.indeterminate = value;
|
|
setIsIndeterminate(value);
|
|
}, [setIsIndeterminate]);
|
|
useComponentRef(props, isChecked, isIndeterminate, setNativeIndeterminate, inputRef);
|
|
React.useEffect(function () { return setNativeIndeterminate(isIndeterminate); }, [setNativeIndeterminate, isIndeterminate]);
|
|
var onRenderLabel = props.onRenderLabel || defaultLabelRenderer;
|
|
var ariaChecked = isIndeterminate
|
|
? 'mixed'
|
|
: undefined;
|
|
var mergedInputProps = tslib_1.__assign(tslib_1.__assign({ className: classNames.input, type: 'checkbox' }, inputProps), { checked: !!isChecked, disabled: disabled, required: required, name: name, id: id, title: title, onChange: onChange, 'aria-disabled': disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-posinset': ariaPositionInSet, 'aria-setsize': ariaSetSize, 'aria-checked': ariaChecked });
|
|
return (React.createElement("div", { className: classNames.root, title: title, ref: mergedRootRefs },
|
|
React.createElement("input", tslib_1.__assign({}, mergedInputProps, { ref: inputRef, title: title, "data-ktp-execute-target": true })),
|
|
React.createElement("label", { className: classNames.label, htmlFor: id },
|
|
React.createElement("div", { className: classNames.checkbox, "data-ktp-target": true },
|
|
React.createElement(Icon_1.Icon, tslib_1.__assign({ iconName: "CheckMark" }, checkmarkIconProps, { className: classNames.checkmark }))),
|
|
onRenderLabel(props, defaultLabelRenderer))));
|
|
});
|
|
exports.CheckboxBase.displayName = 'CheckboxBase';
|
|
function useDebugWarning(props) {
|
|
|
|
}
|
|
function useComponentRef(props, isChecked, isIndeterminate, setIndeterminate, checkBoxRef) {
|
|
React.useImperativeHandle(props.componentRef, function () { return ({
|
|
get checked() {
|
|
return !!isChecked;
|
|
},
|
|
get indeterminate() {
|
|
return !!isIndeterminate;
|
|
},
|
|
set indeterminate(indeterminate) {
|
|
setIndeterminate(indeterminate);
|
|
},
|
|
focus: function () {
|
|
if (checkBoxRef.current) {
|
|
checkBoxRef.current.focus();
|
|
}
|
|
},
|
|
}); }, [checkBoxRef, isChecked, isIndeterminate, setIndeterminate]);
|
|
}
|
|
});
|
|
//# sourceMappingURL=Checkbox.base.js.map
|