@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
23 lines • 1.01 kB
JavaScript
import { getLimitedValue } from '../../../split-panel/utils/size-utils';
import { useKeyboardEvents } from '../../utils/use-keyboard-events';
import { usePointerEvents } from '../../utils/use-pointer-events';
export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize }) {
const onResizeHandler = (newWidth) => {
const size = getLimitedValue(minWidth, newWidth, maxWidth);
if (maxWidth >= minWidth) {
onResize(size);
}
};
const sizeControlProps = {
position: 'side',
panelRef,
handleRef,
onResize: onResizeHandler,
};
const clampedWidth = getLimitedValue(minWidth, currentWidth, maxWidth);
const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;
const onPointerDown = usePointerEvents(sizeControlProps);
const onKeyDown = useKeyboardEvents(sizeControlProps);
return { onKeyDown, onPointerDown, relativeSize };
}
//# sourceMappingURL=use-resize.js.map