@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
43 lines • 2.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Foundation_1 = require("../../Foundation");
/* eslint-disable deprecation/deprecation */
/** @deprecated */
exports.useToggleState = function (props) {
var toggleButtonRef = React.useRef(null);
var _a = Foundation_1.useControlledState(props, 'checked', {
defaultPropName: 'defaultChecked',
defaultPropValue: false,
}), checked = _a[0], setChecked = _a[1];
React.useImperativeHandle(props.componentRef, function () { return ({
focus: function () {
toggleButtonRef.current && toggleButtonRef.current.focus();
},
}); });
var disabled = props.disabled, onChange = props.onChange;
var _onClick = React.useCallback(function (ev) {
if (!disabled) {
// Only update the state if the user hasn't provided it.
setChecked(!checked);
if (onChange) {
onChange(ev, !checked);
}
}
}, [checked, disabled, onChange, setChecked]);
// TODO: can this be structured with helpers to reduce changes for bugs? (overriding controlled props in output, etc.)
// TODO: easy ways to minimize unnecessary recreations of viewProps? memoize helper for updating props?
var viewProps = tslib_1.__assign(tslib_1.__assign({}, props), { checked: checked,
toggleButtonRef: toggleButtonRef, onClick: _onClick });
// Derived state should be performed on otherwise finalized viewProps.
// TODO: Uses of propsTransform must be called after viewProps it depends on are finalized.
// Are there any helper ways of doing this to reduce changes of bugs?
// Something that would let state functions safely write whatever they want into viewProps without fear:
// Return array from here including list of controlled props?
// List of controlled props as createComponent option?
// updateViewProps functional arg that takes in partial view props and optional controlled prop list?
viewProps.text = Foundation_1.getControlledDerivedProps(viewProps, 'text', viewProps.checked ? viewProps.onText : viewProps.offText);
return viewProps;
};
//# sourceMappingURL=Toggle.state.js.map