@fluentui/react
Version:
Reusable React components for building web experiences.
98 lines • 5.43 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
import { useControllableValue, useId, useMergedRefs, useWarnings } from '@fluentui/react-hooks';
import { useFocusRects, classNamesFunction } from '@fluentui/utilities';
import { Icon } from '../Icon/Icon';
var getClassNames = classNamesFunction();
export var 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 = useId('checkbox-', props.id);
var rootRef = React.useRef(null);
var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);
var inputRef = React.useRef(null);
var _b = useControllableValue(props.checked, props.defaultChecked, props.onChange), isChecked = _b[0], setIsChecked = _b[1];
var _c = useControllableValue(props.indeterminate, props.defaultIndeterminate), isIndeterminate = _c[0], setIsIndeterminate = _c[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 = __assign(__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", __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, __assign({ iconName: "CheckMark" }, checkmarkIconProps, { className: classNames.checkmark }))),
onRenderLabel(props, defaultLabelRenderer))));
});
CheckboxBase.displayName = 'CheckboxBase';
function useDebugWarning(props) {
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional
useWarnings({
name: 'Checkbox',
props: props,
mutuallyExclusive: {
checked: 'defaultChecked',
indeterminate: 'defaultIndeterminate',
},
});
}
}
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