mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Refactor: e -> event or error, err -> error, p -> pointer (#831)
* Refactor: e -> event or error, err -> error, p -> pointer * simplify
This commit is contained in:
parent
d2827aa40b
commit
097c5dfad7
14 changed files with 190 additions and 185 deletions
|
@ -45,25 +45,25 @@ const Picker = function({
|
|||
}
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === KEYS.TAB) {
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === KEYS.TAB) {
|
||||
const { activeElement } = document;
|
||||
if (e.shiftKey) {
|
||||
if (event.shiftKey) {
|
||||
if (activeElement === firstItem.current) {
|
||||
colorInput.current?.focus();
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
}
|
||||
} else {
|
||||
if (activeElement === colorInput.current) {
|
||||
firstItem.current?.focus();
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
e.key === KEYS.ARROW_RIGHT ||
|
||||
e.key === KEYS.ARROW_LEFT ||
|
||||
e.key === KEYS.ARROW_UP ||
|
||||
e.key === KEYS.ARROW_DOWN
|
||||
event.key === KEYS.ARROW_RIGHT ||
|
||||
event.key === KEYS.ARROW_LEFT ||
|
||||
event.key === KEYS.ARROW_UP ||
|
||||
event.key === KEYS.ARROW_DOWN
|
||||
) {
|
||||
const { activeElement } = document;
|
||||
const index = Array.prototype.indexOf.call(
|
||||
|
@ -73,30 +73,30 @@ const Picker = function({
|
|||
if (index !== -1) {
|
||||
const length = gallery!.current!.children.length;
|
||||
const nextIndex =
|
||||
e.key === KEYS.ARROW_RIGHT
|
||||
event.key === KEYS.ARROW_RIGHT
|
||||
? (index + 1) % length
|
||||
: e.key === KEYS.ARROW_LEFT
|
||||
: event.key === KEYS.ARROW_LEFT
|
||||
? (length + index - 1) % length
|
||||
: e.key === KEYS.ARROW_DOWN
|
||||
: event.key === KEYS.ARROW_DOWN
|
||||
? (index + 5) % length
|
||||
: e.key === KEYS.ARROW_UP
|
||||
: event.key === KEYS.ARROW_UP
|
||||
? (length + index - 5) % length
|
||||
: index;
|
||||
(gallery!.current!.children![nextIndex] as any).focus();
|
||||
}
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
} else if (
|
||||
keyBindings.includes(e.key.toLowerCase()) &&
|
||||
!isWritableElement(e.target)
|
||||
keyBindings.includes(event.key.toLowerCase()) &&
|
||||
!isWritableElement(event.target)
|
||||
) {
|
||||
const index = keyBindings.indexOf(e.key.toLowerCase());
|
||||
const index = keyBindings.indexOf(event.key.toLowerCase());
|
||||
(gallery!.current!.children![index] as any).focus();
|
||||
e.preventDefault();
|
||||
} else if (e.key === KEYS.ESCAPE || e.key === KEYS.ENTER) {
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
} else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
e.nativeEvent.stopImmediatePropagation();
|
||||
event.nativeEvent.stopImmediatePropagation();
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -193,15 +193,15 @@ const ColorInput = React.forwardRef(
|
|||
spellCheck={false}
|
||||
className="color-picker-input"
|
||||
aria-label={label}
|
||||
onChange={e => {
|
||||
const value = e.target.value.toLowerCase();
|
||||
onChange={event => {
|
||||
const value = event.target.value.toLowerCase();
|
||||
if (value.match(colorRegex)) {
|
||||
onChange(value === "transparent" ? "transparent" : `#${value}`);
|
||||
}
|
||||
setInnerValue(value);
|
||||
}}
|
||||
value={(innerValue || "").replace(/^#/, "")}
|
||||
onPaste={e => onChange(e.clipboardData.getData("text"))}
|
||||
onPaste={event => onChange(event.clipboardData.getData("text"))}
|
||||
onBlur={() => setInnerValue(color)}
|
||||
ref={inputRef}
|
||||
/>
|
||||
|
|
|
@ -24,7 +24,10 @@ function ContextMenu({ options, onCloseRequest, top, left }: Props) {
|
|||
left={left}
|
||||
fitInViewport={true}
|
||||
>
|
||||
<ul className="context-menu" onContextMenu={e => e.preventDefault()}>
|
||||
<ul
|
||||
className="context-menu"
|
||||
onContextMenu={event => event.preventDefault()}
|
||||
>
|
||||
{options.map((option, idx) => (
|
||||
<li key={idx} onClick={onCloseRequest}>
|
||||
<ContextMenuOption {...option} />
|
||||
|
|
|
@ -89,22 +89,22 @@ function ExportModal({
|
|||
pngButton.current?.focus();
|
||||
}, []);
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === KEYS.TAB) {
|
||||
function handleKeyDown(event: React.KeyboardEvent) {
|
||||
if (event.key === KEYS.TAB) {
|
||||
const { activeElement } = document;
|
||||
if (e.shiftKey) {
|
||||
if (event.shiftKey) {
|
||||
if (activeElement === pngButton.current) {
|
||||
closeButton.current?.focus();
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
}
|
||||
} else {
|
||||
if (activeElement === closeButton.current) {
|
||||
pngButton.current?.focus();
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
}
|
||||
if (activeElement === onlySelectedInput.current) {
|
||||
closeButton.current?.focus();
|
||||
e.preventDefault();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -186,7 +186,9 @@ function ExportModal({
|
|||
<input
|
||||
type="checkbox"
|
||||
checked={exportSelected}
|
||||
onChange={e => setExportSelected(e.currentTarget.checked)}
|
||||
onChange={event =>
|
||||
setExportSelected(event.currentTarget.checked)
|
||||
}
|
||||
ref={onlySelectedInput}
|
||||
/>{" "}
|
||||
{t("labels.onlySelected")}
|
||||
|
|
|
@ -12,9 +12,9 @@ export function Modal(props: {
|
|||
}) {
|
||||
const modalRoot = useBodyRoot();
|
||||
|
||||
const handleKeydown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === KEYS.ESCAPE) {
|
||||
e.nativeEvent.stopImmediatePropagation();
|
||||
const handleKeydown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === KEYS.ESCAPE) {
|
||||
event.nativeEvent.stopImmediatePropagation();
|
||||
props.onCloseRequest();
|
||||
}
|
||||
};
|
||||
|
|
|
@ -40,8 +40,8 @@ export function Popover({
|
|||
<div
|
||||
className="cover"
|
||||
onClick={onCloseRequest}
|
||||
onContextMenu={e => {
|
||||
e.preventDefault();
|
||||
onContextMenu={event => {
|
||||
event.preventDefault();
|
||||
if (onCloseRequest) {
|
||||
onCloseRequest();
|
||||
}
|
||||
|
|
|
@ -10,25 +10,25 @@ type Props = {
|
|||
};
|
||||
|
||||
export class ProjectName extends Component<Props> {
|
||||
private handleFocus = (e: React.FocusEvent<HTMLElement>) => {
|
||||
selectNode(e.currentTarget);
|
||||
private handleFocus = (event: React.FocusEvent<HTMLElement>) => {
|
||||
selectNode(event.currentTarget);
|
||||
};
|
||||
|
||||
private handleBlur = (e: React.FocusEvent<HTMLElement>) => {
|
||||
const value = e.currentTarget.innerText.trim();
|
||||
private handleBlur = (event: React.FocusEvent<HTMLElement>) => {
|
||||
const value = event.currentTarget.innerText.trim();
|
||||
if (value !== this.props.value) {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
removeSelection();
|
||||
};
|
||||
|
||||
private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
if (e.nativeEvent.isComposing || e.keyCode === 229) {
|
||||
private handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
if (event.nativeEvent.isComposing || event.keyCode === 229) {
|
||||
return;
|
||||
}
|
||||
e.currentTarget.blur();
|
||||
event.currentTarget.blur();
|
||||
}
|
||||
};
|
||||
private makeEditable = (editable: HTMLSpanElement | null) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue