@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
52 lines • 2.32 kB
JavaScript
import { __assign } from "tslib";
import { useCallback, useImperativeHandle, useRef } from 'react';
import { useControlledState } from '../../Foundation';
import { getRTL, KeyCodes } from '../../Utilities';
export var useCollapsibleSectionState = function (props) {
var titleElementRef = useRef(null);
var _a = useControlledState(props, 'collapsed', {
defaultPropName: 'defaultCollapsed',
defaultPropValue: false,
}), collapsed = _a[0], setCollapsed = _a[1];
useImperativeHandle(props.componentRef, function () { return ({
focus: function () {
titleElementRef.current && titleElementRef.current.focus();
},
}); });
var _onClick = useCallback(function (ev) {
setCollapsed(!collapsed);
ev.preventDefault();
ev.stopPropagation();
}, [collapsed, setCollapsed]);
var _onKeyDown = useCallback(function (ev) {
var collapseKey = getRTL() ? KeyCodes.right : KeyCodes.left;
var expandKey = getRTL() ? KeyCodes.left : 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 = useCallback(function (ev) {
var rootKey = getRTL() ? KeyCodes.right : 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 = __assign(__assign({}, props), { collapsed: collapsed, onClick: _onClick, onKeyDown: _onKeyDown, onRootKeyDown: _onRootKeyDown, titleElementRef: titleElementRef });
return viewProps;
};
//# sourceMappingURL=CollapsibleSection.state.js.map