@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
42 lines • 2.67 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useState } from 'react';
import PanelResizeHandle from '../../internal/components/panel-resize-handle';
import { getLimitedValue } from '../../split-panel/utils/size-utils';
import { useKeyboardEvents } from './use-keyboard-events';
import { usePointerEvents } from './use-pointer-events';
import testutilStyles from '../test-classes/styles.css.js';
function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDrawerResize, drawersRefs, isToolsOpen, drawersMinWidth, drawersMaxWidth, }) {
var _a, _b;
const [relativeSize, setRelativeSize] = useState(0);
const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;
useEffect(() => {
// effects are called inside out in the components tree
// wait one frame to allow app-layout to complete its calculations
const handle = requestAnimationFrame(() => {
const maxSize = drawersMaxWidth;
setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);
});
return () => cancelAnimationFrame(handle);
}, [drawerSize, drawersMaxWidth, drawersMinWidth]);
const setSidePanelWidth = (width) => {
const maxWidth = drawersMaxWidth;
const size = getLimitedValue(drawersMinWidth, width, maxWidth);
const id = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
if (id && maxWidth >= drawersMinWidth) {
onActiveDrawerResize({ size, id });
}
};
const sizeControlProps = {
position: 'side',
panelRef: drawerRefObject,
handleRef: drawersRefs.slider,
onResize: setSidePanelWidth,
};
const onSliderPointerDown = usePointerEvents(sizeControlProps);
const { onKeyDown, onDirectionClick } = useKeyboardEvents(sizeControlProps);
const resizeHandle = (React.createElement(PanelResizeHandle, { ref: drawersRefs.slider, position: "side", ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, tooltipText: (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandleTooltipText, ariaValuenow: relativeSize, className: testutilStyles['drawers-slider'], onKeyDown: onKeyDown, onDirectionClick: onDirectionClick, onPointerDown: onSliderPointerDown }));
return { resizeHandle, drawerSize };
}
export default useResize;
//# sourceMappingURL=use-resize.js.map