@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
61 lines • 2.38 kB
JavaScript
import handleKey from '../../internal/utils/handle-key';
const KEYBOARD_SINGLE_STEP_SIZE = 10;
const KEYBOARD_MULTIPLE_STEPS_SIZE = 60;
const getCurrentSize = (panelRef) => {
if (!panelRef || !panelRef.current) {
return {
panelHeight: 0,
panelWidth: 0,
};
}
return {
panelHeight: panelRef.current.clientHeight,
panelWidth: panelRef.current.clientWidth,
};
};
export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
return (event) => {
let currentSize;
let maxSize;
const { panelHeight, panelWidth } = getCurrentSize(panelRef);
if (position === 'side') {
currentSize = panelWidth;
// don't need the exact max size as it's constrained in the set size function
maxSize = window.innerWidth;
}
else {
currentSize = panelHeight;
// don't need the exact max size as it's constrained in the set size function
maxSize = window.innerHeight;
}
let isEventHandled = true;
const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);
const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);
const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);
const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);
handleKey(event, {
onBlockStart: () => {
position === 'bottom' ? singleStepUp() : singleStepDown();
},
onBlockEnd: () => {
position === 'bottom' ? singleStepDown() : singleStepUp();
},
onInlineEnd: () => {
position === 'bottom' ? singleStepUp() : singleStepDown();
},
onInlineStart: () => {
position === 'bottom' ? singleStepDown() : singleStepUp();
},
onPageDown: () => multipleStepDown(),
onPageUp: () => multipleStepUp(),
onHome: () => onResize(maxSize),
onEnd: () => onResize(0),
onDefault: () => (isEventHandled = false),
});
if (isEventHandled) {
event.preventDefault();
event.stopPropagation();
}
};
};
//# sourceMappingURL=use-keyboard-events.js.map