office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
28 lines • 1.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var Stack_1 = require("office-ui-fabric-react/lib/Stack");
// Used to add spacing between example checkboxes
var stackTokens = { childrenGap: 10 };
exports.CheckboxIndeterminateExample = function () {
// Only used for the controlled checkbox (the last one)
var _a = React.useState(true), isIndeterminate = _a[0], setIsIndeterminate = _a[1];
var _b = React.useState(false), isChecked = _b[0], setIsChecked = _b[1];
var onChange = React.useCallback(function (ev, newChecked) {
if (isIndeterminate) {
// If the checkbox was indeterminate, the first click should remove the indeterminate state
// without affecting the checked state
setIsIndeterminate(false);
}
else {
setIsChecked(newChecked);
}
}, [isIndeterminate]);
return (React.createElement(Stack_1.Stack, { tokens: stackTokens },
React.createElement(Checkbox_1.Checkbox, { label: "Indeterminate checkbox (uncontrolled)", defaultIndeterminate: true }),
React.createElement(Checkbox_1.Checkbox, { label: "Indeterminate checkbox which defaults to true when clicked (uncontrolled)", defaultIndeterminate: true, defaultChecked: true }),
React.createElement(Checkbox_1.Checkbox, { label: "Disabled indeterminate checkbox", disabled: true, defaultIndeterminate: true }),
React.createElement(Checkbox_1.Checkbox, { label: "Indeterminate checkbox (controlled)", indeterminate: isIndeterminate, checked: isChecked, onChange: onChange })));
};
//# sourceMappingURL=Checkbox.Indeterminate.Example.js.map