@parkassist/pa-ui-library
Version:
INX Platform elements
57 lines • 2.02 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import useKeyboardJs from 'react-use/lib/useKeyboardJs';
const defaultProps = {
actions: [],
style: {},
children: null,
onCtrl: () => null,
onShift: () => null,
onAlt: () => null,
onMeta: () => null
};
export function KeyBoardArea(props = defaultProps) {
const {
actions,
style,
children,
onShift,
onCtrl,
onAlt,
onMeta
} = props;
const [isHover, setIsHover] = useState(false);
const result = useKeyboardJs('');
useEffect(() => {
if (isHover) {
const pressed = result[0];
const eventKey = result[1];
if (eventKey === null || eventKey === void 0 ? void 0 : eventKey.altKey) {
onAlt && onAlt(pressed);
}
if (eventKey === null || eventKey === void 0 ? void 0 : eventKey.shiftKey) {
onShift && onShift(pressed);
}
if ((eventKey === null || eventKey === void 0 ? void 0 : eventKey.ctrlKey) || (eventKey === null || eventKey === void 0 ? void 0 : eventKey.key) === "Control") {
onCtrl && onCtrl(pressed);
}
if ((eventKey === null || eventKey === void 0 ? void 0 : eventKey.metaKey) || (eventKey === null || eventKey === void 0 ? void 0 : eventKey.key) === "Meta") {
onMeta && onMeta(pressed);
}
if (eventKey === null || eventKey === void 0 ? void 0 : eventKey.key) {
const selectedAction = actions.find(action => (eventKey === null || eventKey === void 0 ? void 0 : eventKey.key.toLowerCase()) === action.key.toLowerCase() || (eventKey === null || eventKey === void 0 ? void 0 : eventKey.code.toLowerCase()) === action.key.toLowerCase());
selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.action(pressed);
}
}
}, [result]);
return _jsx("div", {
style: Object.assign({}, style),
onMouseOver: () => {
setIsHover(true);
},
onMouseOut: () => {
setIsHover(false);
},
children: children
});
}