Skip to content

Commit

Permalink
Clean up initial implementation of resize callbacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@davismcphee
davismcphee committed Sep 14, 2022
1 parent 8b9b59f commit 879c4bc
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 60 deletions.
20 changes: 3 additions & 17 deletions src/components/resizable_container/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ interface Params {
initialState: EuiResizableContainerState;
containerRef: React.RefObject<HTMLDivElement>;
onPanelWidthChange?: ({}: { [key: string]: number }) => any;
onResizeStart: (trigger: 'pointer' | 'key') => any;
onResizeEnd: (trigger: 'pointer' | 'key') => any;
}

function isMouseEvent(
Expand Down Expand Up @@ -120,8 +118,6 @@ export const useContainerCallbacks = ({
initialState,
containerRef,
onPanelWidthChange,
onResizeStart,
onResizeEnd,
}: Params): [EuiResizableContainerActions, EuiResizableContainerState] => {
function reducer(
state: EuiResizableContainerState,
Expand Down Expand Up @@ -204,7 +200,6 @@ export const useContainerCallbacks = ({
};
}
case 'EUI_RESIZABLE_DRAG_START': {
onResizeStart('pointer');
const { position, prevPanelId, nextPanelId } = action.payload;
return {
...state,
Expand Down Expand Up @@ -261,7 +256,7 @@ export const useContainerCallbacks = ({
return state;
}
case 'EUI_RESIZABLE_KEY_MOVE': {
const { prevPanelId, nextPanelId, direction, repeat } = action.payload;
const { prevPanelId, nextPanelId, direction } = action.payload;
const prevPanel = state.panels[prevPanelId];
const nextPanel = state.panels[nextPanelId];

Expand All @@ -283,9 +278,6 @@ export const useContainerCallbacks = ({
);

if (prevPanelSize >= prevPanelMin && nextPanelSize >= nextPanelMin) {
if (!repeat) {
onResizeStart('key');
}
return withSideEffect({
...state,
isDragging: false,
Expand All @@ -305,10 +297,7 @@ export const useContainerCallbacks = ({

return state;
}
case 'EUI_RESIZABLE_KEY_UP': {
onResizeEnd('key');
return state;
}

case 'EUI_RESIZABLE_TOGGLE': {
const { options, panelId: currentPanelId } = action.payload;
const currentPanel = state.panels[currentPanelId];
Expand Down Expand Up @@ -522,7 +511,6 @@ export const useContainerCallbacks = ({
};
}
case 'EUI_RESIZABLE_RESET': {
onResizeEnd('pointer');
return {
...initialState,
panels: state.panels,
Expand Down Expand Up @@ -597,13 +585,11 @@ export const useContainerCallbacks = ({
prevPanelId,
nextPanelId,
direction,
repeat,
}: ActionKeyMove['payload']) =>
dispatch({
type: 'EUI_RESIZABLE_KEY_MOVE',
payload: { prevPanelId, nextPanelId, direction, repeat },
payload: { prevPanelId, nextPanelId, direction },
}),
keyUp: () => dispatch({ type: 'EUI_RESIZABLE_KEY_UP' }),
togglePanel: (
panelId: ActionToggle['payload']['panelId'],
options: ActionToggle['payload']['options']
Expand Down
80 changes: 44 additions & 36 deletions src/components/resizable_container/resizable_container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ const containerDirections = {
horizontal: 'horizontal',
};

type ResizeTrigger = 'pointer' | 'key';

export interface EuiResizableContainerProps
extends HTMLAttributes<HTMLDivElement>,
CommonProps {
Expand All @@ -72,11 +74,11 @@ export interface EuiResizableContainerProps
/**
* Called when resizing starts
*/
onResizeStart?: (trigger: 'pointer' | 'key') => any;
onResizeStart?: (trigger: ResizeTrigger) => any;
/**
* Called when resizing ends
*/
onResizeEnd?: (trigger: 'pointer' | 'key') => any;
onResizeEnd?: (trigger: ResizeTrigger) => any;
style?: CSSProperties;
}

Expand Down Expand Up @@ -112,23 +114,10 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
className
);

const [resizeTrigger, setResizeTrigger] = useState<'pointer' | 'key'>();
const [actions, reducerState] = useContainerCallbacks({
initialState: { ...initialState, isHorizontal },
containerRef,
onPanelWidthChange,
onResizeStart: (trigger) => {
setResizeTrigger(trigger);
if (onResizeStart) {
onResizeStart(trigger);
}
},
onResizeEnd: (trigger) => {
setResizeTrigger(undefined);
if (onResizeEnd) {
onResizeEnd(trigger);
}
},
});

const containerSize = useResizeObserver(
Expand All @@ -146,6 +135,24 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
}
}, [initialize, containerSize]);

const resizeTrigger = useRef<ResizeTrigger>();
const resizeStart = useCallback(
(trigger: ResizeTrigger) => {
console.log('onResizeStart', trigger);
onResizeStart?.(trigger);
resizeTrigger.current = trigger;
},
[onResizeStart]
);
const resizeEnd = useCallback(
(trigger: ResizeTrigger) => {
console.log('onResizeEnd', trigger);
onResizeEnd?.(trigger);
resizeTrigger.current = undefined;
},
[onResizeEnd]
);

const onMouseDown = useCallback(
(event: EuiResizableButtonMouseEvent) => {
const currentTarget = event.currentTarget;
Expand All @@ -155,9 +162,10 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
const prevPanelId = prevPanel!.id;
const nextPanelId = nextPanel!.id;
const position = getPosition(event, isHorizontal);
resizeStart('pointer');
actions.dragStart({ position, prevPanelId, nextPanelId });
},
[actions, isHorizontal]
[actions, isHorizontal, resizeStart]
);

const onMouseMove = useCallback(
Expand Down Expand Up @@ -185,16 +193,16 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
);

const getDirection = useCallback(
(event: EuiResizableButtonKeyEvent) => {
(key: string) => {
let direction: 'forward' | 'backward' | null = null;
if (
(isHorizontal && event.key === keys.ARROW_LEFT) ||
(!isHorizontal && event.key === keys.ARROW_UP)
(isHorizontal && key === keys.ARROW_LEFT) ||
(!isHorizontal && key === keys.ARROW_UP)
) {
direction = 'backward';
} else if (
(isHorizontal && event.key === keys.ARROW_RIGHT) ||
(!isHorizontal && event.key === keys.ARROW_DOWN)
(isHorizontal && key === keys.ARROW_RIGHT) ||
(!isHorizontal && key === keys.ARROW_DOWN)
) {
direction = 'forward';
}
Expand All @@ -205,38 +213,38 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps

const onKeyDown = useCallback(
(event: EuiResizableButtonKeyEvent) => {
const direction = getDirection(event);
const { currentTarget } = event;
const { key, currentTarget } = event;
const direction = getDirection(key);
const prevPanelId = currentTarget.previousElementSibling!.id;
const nextPanelId = currentTarget.nextElementSibling!.id;

if (direction && prevPanelId && nextPanelId) {
if (!event.repeat) {
resizeStart('key');
}
event.preventDefault();
actions.keyMove({
direction,
prevPanelId,
nextPanelId,
repeat: event.repeat,
});
}
},
[actions, getDirection]
[actions, getDirection, resizeStart]
);

const onKeyUp = useCallback(
(event: EuiResizableButtonKeyEvent) => {
if (getDirection(event)) {
actions.keyUp();
}
},
[actions, getDirection]
);
const onKeyUp = useCallback(() => {
if (resizeTrigger.current === 'key') {
resizeEnd('key');
}
}, [resizeEnd]);

const onMouseUp = useCallback(() => {
if (resizeTrigger === 'pointer') {
actions.reset();
if (resizeTrigger.current === 'pointer') {
resizeEnd('pointer');
}
}, [actions, resizeTrigger]);
actions.reset();
}, [actions, resizeEnd]);

// eslint-disable-next-line react-hooks/exhaustive-deps
const EuiResizableButton = useCallback(
Expand Down
7 changes: 0 additions & 7 deletions src/components/resizable_container/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,14 +83,9 @@ export interface ActionKeyMove {
prevPanelId: string;
nextPanelId: string;
direction: 'forward' | 'backward';
repeat: boolean;
};
}

export interface ActionKeyUp {
type: 'EUI_RESIZABLE_KEY_UP';
}

export interface ActionResize {
type: 'EUI_RESIZABLE_RESIZE';
payload: {};
Expand Down Expand Up @@ -156,7 +151,6 @@ export type EuiResizableContainerAction =
| ActionDragStart
| ActionDragMove
| ActionKeyMove
| ActionKeyUp
| ActionResize
| ActionToggle
| ActionFocus
Expand Down Expand Up @@ -185,7 +179,6 @@ export interface EuiResizableContainerActions {
nextPanelId,
direction,
}: ActionKeyMove['payload']) => void;
keyUp: () => void;
resizerFocus: (resizerId: ActionFocus['payload']['resizerId']) => void;
resizerBlur: () => void;
togglePanel: (
Expand Down

0 comments on commit 879c4bc

Please sign in to comment.