@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
54 lines • 2.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var Foundation_1 = require("../../Foundation");
var Utilities_1 = require("../../Utilities");
exports.useCollapsibleSectionState = function (props) {
var titleElementRef = react_1.useRef(null);
var _a = Foundation_1.useControlledState(props, 'collapsed', {
defaultPropName: 'defaultCollapsed',
defaultPropValue: false,
}), collapsed = _a[0], setCollapsed = _a[1];
react_1.useImperativeHandle(props.componentRef, function () { return ({
focus: function () {
titleElementRef.current && titleElementRef.current.focus();
},
}); });
var _onClick = react_1.useCallback(function (ev) {
setCollapsed(!collapsed);
ev.preventDefault();
ev.stopPropagation();
}, [collapsed, setCollapsed]);
var _onKeyDown = react_1.useCallback(function (ev) {
var collapseKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.right : Utilities_1.KeyCodes.left;
var expandKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.left : Utilities_1.KeyCodes.right;
if (ev.which === collapseKey && !collapsed) {
setCollapsed(true);
ev.preventDefault();
ev.stopPropagation();
}
else if (ev.which === expandKey && collapsed) {
setCollapsed(false);
ev.preventDefault();
ev.stopPropagation();
}
}, [collapsed, setCollapsed]);
var _onRootKeyDown = react_1.useCallback(function (ev) {
var rootKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.right : Utilities_1.KeyCodes.left;
// If left/right keypress originates from text input or text area inside collapsible section,
// ignore the event.
if (ev.which === rootKey &&
ev.target !== titleElementRef.current &&
titleElementRef.current &&
!(ev.target instanceof HTMLTextAreaElement) &&
!(ev.target instanceof HTMLInputElement && ev.target.type === 'text')) {
titleElementRef.current.focus();
ev.preventDefault();
ev.stopPropagation();
}
}, []);
var viewProps = tslib_1.__assign(tslib_1.__assign({}, props), { collapsed: collapsed, onClick: _onClick, onKeyDown: _onKeyDown, onRootKeyDown: _onRootKeyDown, titleElementRef: titleElementRef });
return viewProps;
};
//# sourceMappingURL=CollapsibleSection.state.js.map