@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
150 lines • 5.83 kB
JavaScript
import { defaultCoordinates, KeyboardCode } from '@dnd-kit/core';
import { getOwnerDocument, getWindow, isKeyboardEvent, subtract as getCoordinatesDelta, } from '@dnd-kit/utilities';
import { scrollElementIntoView } from '../../../utils/scrollable-containers';
import { defaultKeyboardCodes } from './defaults';
import { EventName } from './utilities/events';
import { Listeners } from './utilities/listeners';
import { applyScroll } from './utilities/scroll';
export class KeyboardAndUAPSensor {
constructor(props) {
this.props = props;
this.autoScrollEnabled = false;
const { event: { target }, } = props;
this.props = props;
this.listeners = new Listeners(getOwnerDocument(target));
this.windowListeners = new Listeners(getWindow(target));
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleCustomDirectionEvent = this.handleCustomDirectionEvent.bind(this);
this.handleEnd = this.handleEnd.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.attach();
}
attach() {
var _a;
this.handleStart();
this.windowListeners.add(EventName.Resize, this.handleCancel);
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
(_a = this.props.event.target) === null || _a === void 0 ? void 0 : _a.addEventListener(EventName.Blur, this.handleEnd);
setTimeout(() => {
this.listeners.add(EventName.Keydown, this.handleKeyDown);
this.listeners.add(EventName.CustomDown, this.handleCustomDirectionEvent);
this.listeners.add(EventName.CustomUp, this.handleCustomDirectionEvent);
});
}
handleStart() {
const { activeNode, onStart } = this.props;
const node = activeNode.node.current;
if (node) {
scrollElementIntoView(node);
}
onStart(defaultCoordinates);
}
handleKeyDown(event) {
if (isKeyboardEvent(event)) {
const { options } = this.props;
const { keyboardCodes = defaultKeyboardCodes } = options;
const { code } = event;
if (keyboardCodes.end.indexOf(code) !== -1) {
this.handleEnd(event);
return;
}
if (keyboardCodes.cancel.indexOf(code) !== -1) {
this.handleCancel(event);
return;
}
switch (code) {
case KeyboardCode.Up:
this.handleDirectionalMove(event, 'up');
break;
case KeyboardCode.Down:
this.handleDirectionalMove(event, 'down');
break;
}
}
}
handleCustomDirectionEvent(event) {
switch (event.type) {
case EventName.CustomUp:
this.handleDirectionalMove(event, 'up');
break;
case EventName.CustomDown:
this.handleDirectionalMove(event, 'down');
break;
}
}
handleDirectionalMove(event, direction) {
const { active, context, options } = this.props;
const { coordinateGetter } = options;
const { collisionRect } = context.current;
const currentCoordinates = collisionRect ? { x: collisionRect.left, y: collisionRect.top } : defaultCoordinates;
if (!this.referenceCoordinates) {
this.referenceCoordinates = currentCoordinates;
}
const newCoordinates = coordinateGetter(event, {
active,
context: context.current,
currentCoordinates,
});
if (newCoordinates) {
const { scrollableAncestors } = context.current;
const scrolled = applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors });
if (!scrolled) {
this.handleMove(event, getCoordinatesDelta(newCoordinates, this.referenceCoordinates));
}
}
}
handleMove(event, coordinates) {
const { onMove } = this.props;
event.preventDefault();
onMove(coordinates);
}
handleEnd(event) {
const { onEnd } = this.props;
event.preventDefault();
this.detach();
onEnd();
}
handleCancel(event) {
const { onCancel } = this.props;
if (event.type !== EventName.Blur) {
event.preventDefault();
}
this.detach();
onCancel();
}
detach() {
var _a;
(_a = this.props.event.target) === null || _a === void 0 ? void 0 : _a.removeEventListener(EventName.Blur, this.handleCancel);
this.listeners.removeAll();
this.windowListeners.removeAll();
}
}
KeyboardAndUAPSensor.activators = [
{
eventName: 'onKeyDown',
handler: (event, { keyboardCodes = defaultKeyboardCodes, onActivation }, { active }) => {
const { code } = event.nativeEvent;
if (keyboardCodes.start.indexOf(code) !== -1) {
const activator = active.activatorNode.current;
if (activator && event.target !== activator) {
return false;
}
event.preventDefault();
onActivation === null || onActivation === void 0 ? void 0 : onActivation({ event: event.nativeEvent });
return true;
}
return false;
},
},
{
eventName: 'onClick',
handler: ({ nativeEvent: event }, { onActivation }) => {
if (event.button !== 0) {
return false;
}
onActivation === null || onActivation === void 0 ? void 0 : onActivation({ event });
return true;
},
},
];
//# sourceMappingURL=index.js.map