Skip to content

Commit

Permalink
refactor: the hotkeys for the grid (#554)
Browse files Browse the repository at this point in the history
  • Loading branch information
Sky-FE authored Apr 9, 2024
1 parent a8184c9 commit e3c7a4b
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 220 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const GridViewBase = () => {
const ssrRecords = useSSRRecords();
const ssrRecord = useSSRRecord();
const isTouchDevice = useIsTouchDevice();
const { selection, setSelection, openStatisticMenu } = useGridViewStore();
const { setSelection, openStatisticMenu } = useGridViewStore();
const { columns: originalColumns, cellValue2GridDisplay } = useGridColumns();
const { columns, onColumnResize } = useGridColumnResize(originalColumns);
const { columnStatistics } = useGridColumnStatistics(columns);
Expand Down Expand Up @@ -195,22 +195,6 @@ export const GridViewBase = () => {
[columns, openStatisticMenu]
);

useEffect(() => {
if (!selection) {
return;
}
const handleFocus = (event: FocusEvent) => {
const target = event.target as Node;
if (container.current && !container.current.contains(target)) {
gridRef.current?.resetState();
}
};
document.addEventListener('focus', handleFocus, true);
return () => {
document.removeEventListener('focus', handleFocus, true);
};
}, [selection]);

return (
<div ref={container} className="relative size-full overflow-hidden">
{prepare ? (
Expand Down
16 changes: 0 additions & 16 deletions apps/nextjs-app/src/features/app/blocks/view/grid/GridViewBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -605,22 +605,6 @@ export const GridViewBase: React.FC<IGridViewProps> = (props: IGridViewProps) =>
gridRef.current?.resetState();
});

useEffect(() => {
if (!selection) {
return;
}
const handleFocus = (event: FocusEvent) => {
const target = event.target as Node;
if (containerRef.current && !containerRef.current.contains(target)) {
gridRef.current?.resetState();
}
};
document.addEventListener('focus', handleFocus, true);
return () => {
document.removeEventListener('focus', handleFocus, true);
};
}, [selection]);

useScrollFrameRate(gridRef.current?.scrollBy);

return (
Expand Down
3 changes: 1 addition & 2 deletions packages/sdk/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@
"@teable/icons": "workspace:*",
"@teable/openapi": "workspace:*",
"@teable/ui-lib": "workspace:*",
"@types/mousetrap": "1.6.15",
"antlr4ts": "0.5.0-alpha.4",
"axios": "1.6.8",
"class-transformer": "0.5.1",
Expand All @@ -71,9 +70,9 @@
"lodash": "4.17.21",
"lru-cache": "10.2.0",
"lucide-react": "0.363.0",
"mousetrap": "1.6.5",
"react-day-picker": "8.10.0",
"react-hammerjs": "1.0.1",
"react-hotkeys-hook": "4.5.0",
"react-textarea-autosize": "8.5.3",
"react-use": "17.5.0",
"reconnecting-websocket": "4.4.0",
Expand Down
3 changes: 1 addition & 2 deletions packages/sdk/src/components/expand-record/ExpandRecorder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,7 @@ export const ExpandRecorder = (props: IExpandRecorderProps) => {
};

return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div id={`${tableId}-${recordId}`} onKeyDown={(e) => e.stopPropagation()}>
<div id={`${tableId}-${recordId}`}>
<Wrap tableId={tableId}>
<ExpandRecord
visible
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
import { clamp } from 'lodash';
import type { CSSProperties, ForwardRefRenderFunction } from 'react';
import { useEffect, useRef, useMemo, useImperativeHandle, forwardRef } from 'react';
import { HotkeysProvider } from 'react-hotkeys-hook';
import type { IGridTheme } from '../../configs';
import { useKeyboardSelection } from '../../hooks';
import { GRID_HOTKEY_SCOPE, useKeyboardSelection } from '../../hooks';
import type { IInteractionLayerProps } from '../../InteractionLayer';
import type { IActiveCellBound, ICellItem, IRectangle, IScrollState } from '../../interface';
import type { CombinedSelection } from '../../managers';
Expand Down Expand Up @@ -270,22 +271,24 @@ export const EditorContainerBase: ForwardRefRenderFunction<
};

return (
<div className="click-outside-ignore pointer-events-none absolute left-0 top-0 w-full">
<div
className="absolute z-10"
style={{
top: rect.y,
left: rect.x,
minWidth: width,
minHeight: height,
}}
onKeyDown={onKeyDown}
onPaste={onPasteInner}
>
{EditorRenderer}
<input className="opacity-0" ref={defaultFocusRef} />
<HotkeysProvider initiallyActiveScopes={[GRID_HOTKEY_SCOPE]}>
<div className="click-outside-ignore pointer-events-none absolute left-0 top-0 w-full">
<div
className="absolute z-10"
style={{
top: rect.y,
left: rect.x,
minWidth: width,
minHeight: height,
}}
onKeyDown={onKeyDown}
onPaste={onPasteInner}
>
{EditorRenderer}
<input className="opacity-0" ref={defaultFocusRef} />
</div>
</div>
</div>
</HotkeysProvider>
);
};

Expand Down
1 change: 0 additions & 1 deletion packages/sdk/src/components/grid/hooks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,3 @@ export * from './useVisibleRegion';
export * from './useResizeObserver';
export * from './useScrollFrameRate';
export * from './useKeyboardSelection';
export * from './useKeyboardNavigation';
37 changes: 0 additions & 37 deletions packages/sdk/src/components/grid/hooks/useKeyboardNavigation.ts

This file was deleted.

Loading

0 comments on commit e3c7a4b

Please sign in to comment.