@fluentui/react
Version:
Reusable React components for building web experiences.
88 lines (87 loc) • 5.59 kB
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