Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make element types more accurate #252

Merged
merged 6 commits into from
Dec 31, 2023
Merged

feat: make element types more accurate #252

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7c9ebcc
feat: widen HTMLDivElement to HTMLElement
psychedelicious Dec 30, 2023
5fe1e84
feat: narrow `tagName` type
psychedelicious Dec 30, 2023
c59e150
chore: prettier
psychedelicious Dec 30, 2023
ac5e2d7
chore: remove unused imports
psychedelicious Dec 30, 2023
bf98d65
fix: add explicit return types to components
psychedelicious Dec 30, 2023
53ef56e
fix: revert extraneous type definition
psychedelicious Dec 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions packages/react-resizable-panels/src/Panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { PanelGroupContext } from "./PanelGroupContext";
import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
import useUniqueId from "./hooks/useUniqueId";
import {
ElementType,
ForwardedRef,
HTMLAttributes,
PropsWithChildren,
ReactNode,
createElement,
forwardRef,
useContext,
Expand Down Expand Up @@ -54,7 +54,10 @@ export type ImperativePanelHandle = {
resize: (size: number) => void;
};

export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
export type PanelProps = Omit<
HTMLAttributes<keyof HTMLElementTagNameMap>,
"id" | "onResize"
> &
PropsWithChildren<{
className?: string;
collapsedSize?: number | undefined;
Expand All @@ -68,7 +71,7 @@ export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> &
onResize?: PanelOnResize;
order?: number;
style?: object;
tagName?: ElementType;
tagName?: keyof HTMLElementTagNameMap;
}>;

export function PanelWithForwardedRef({
Expand All @@ -90,7 +93,7 @@ export function PanelWithForwardedRef({
...rest
}: PanelProps & {
forwardedRef: ForwardedRef<ImperativePanelHandle>;
}) {
}): ReactNode {
Comment on lines -93 to +96
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I added keyof HTMLElementTagNameMap, declaration generation failed despite tsc being happy. The error message was a red herring - the components just need an explicit return type. Not sure what to make of that.

Maybe just ReactElement is more appropriate?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's interesting. Not sure why that is, but I think ReactNode makes sense as the return type 👍🏼

const context = useContext(PanelGroupContext);
if (context === null) {
throw Error(
Expand Down
10 changes: 6 additions & 4 deletions packages/react-resizable-panels/src/PanelGroup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ import { validatePanelConstraints } from "./utils/validatePanelConstraints";
import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
import {
CSSProperties,
ElementType,
ForwardedRef,
HTMLAttributes,
PropsWithChildren,
ReactNode,
createElement,
forwardRef,
useCallback,
Expand Down Expand Up @@ -68,7 +68,9 @@ const defaultStorage: PanelGroupStorage = {
},
};

export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
type HTMLElementTagName = keyof HTMLElementTagNameMap;

export type PanelGroupProps = Omit<HTMLAttributes<HTMLElementTagName>, "id"> &
PropsWithChildren<{
autoSaveId?: string | null;
className?: string;
Expand All @@ -78,7 +80,7 @@ export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
onLayout?: PanelGroupOnLayout | null;
storage?: PanelGroupStorage;
style?: CSSProperties;
tagName?: ElementType;
tagName?: HTMLElementTagName;
}>;

const debounceMap: {
Expand All @@ -100,7 +102,7 @@ function PanelGroupWithForwardedRef({
...rest
}: PanelGroupProps & {
forwardedRef: ForwardedRef<ImperativePanelGroupHandle>;
}) {
}): ReactNode {
const groupId = useUniqueId(idFromProps);

const [dragState, setDragState] = useState<DragState | null>(null);
Expand Down
29 changes: 17 additions & 12 deletions packages/react-resizable-panels/src/PanelResizeHandle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import useUniqueId from "./hooks/useUniqueId";
import {
createElement,
CSSProperties,
ElementType,
HTMLAttributes,
PropsWithChildren,
MouseEvent as ReactMouseEvent,
ReactNode,
TouchEvent,
useCallback,
useContext,
Expand All @@ -25,15 +25,20 @@ import { getCursorStyle } from "./utils/cursor";

export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;

export type PanelResizeHandleProps = Omit<HTMLAttributes<ElementType>, "id"> &
type HTMLElementTagName = keyof HTMLElementTagNameMap;

export type PanelResizeHandleProps = Omit<
HTMLAttributes<HTMLElementTagName>,
"id"
> &
PropsWithChildren<{
className?: string;
disabled?: boolean;
id?: string | null;
onDragging?: PanelResizeHandleOnDragging;
style?: CSSProperties;
tabIndex?: number;
tagName?: ElementType;
tagName?: HTMLElementTagName;
}>;

export function PanelResizeHandle({
Expand All @@ -46,8 +51,8 @@ export function PanelResizeHandle({
tabIndex = 0,
tagName: Type = "div",
...rest
}: PanelResizeHandleProps) {
const divElementRef = useRef<HTMLDivElement>(null);
}: PanelResizeHandleProps): ReactNode {
const elementRef = useRef<HTMLElement>(null);

// Use a ref to guard against users passing inline props
const callbacksRef = useRef<{
Expand Down Expand Up @@ -85,9 +90,9 @@ export function PanelResizeHandle({
const stopDraggingAndBlur = useCallback(() => {
// Clicking on the drag handle shouldn't leave it focused;
// That would cause the PanelGroup to think it was still active.
const divElement = divElementRef.current;
assert(divElement);
divElement.blur();
const element = elementRef.current;
assert(element);
element.blur();

stopDragging();

Expand Down Expand Up @@ -119,10 +124,10 @@ export function PanelResizeHandle({
resizeHandler(event);
};

const divElement = divElementRef.current;
assert(divElement);
const element = elementRef.current;
assert(element);

const targetDocument = divElement.ownerDocument;
const targetDocument = element.ownerDocument;

targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
targetDocument.body.addEventListener("mousemove", onMove);
Expand Down Expand Up @@ -186,7 +191,7 @@ export function PanelResizeHandle({
onDragging(true);
}
},
ref: divElementRef,
ref: elementRef,
role: "separator",
style: {
...style,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function useWindowSplitterResizeHandlerBehavior({
? index + 1
: 0;

const nextHandle = handles[nextIndex] as HTMLDivElement;
const nextHandle = handles[nextIndex] as HTMLElement;
nextHandle.focus();

break;
Expand Down
4 changes: 2 additions & 2 deletions packages/react-resizable-panels/src/utils/dom/getPanelElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export function getPanelElement(id: string): HTMLDivElement | null {
export function getPanelElement(id: string): HTMLElement | null {
const element = document.querySelector(`[data-panel-id="${id}"]`);
if (element) {
return element as HTMLDivElement;
return element as HTMLElement;
}
return null;
}
2 changes: 1 addition & 1 deletion packages/react-resizable-panels/src/utils/dom/getPanelElementsForGroup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export function getPanelElementsForGroup(groupId: string): HTMLDivElement[] {
export function getPanelElementsForGroup(groupId: string): HTMLElement[] {
return Array.from(
document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`)
);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export function getPanelGroupElement(id: string): HTMLDivElement | null {
export function getPanelGroupElement(id: string): HTMLElement | null {
const element = document.querySelector(
`[data-panel-group][data-panel-group-id="${id}"]`
);
if (element) {
return element as HTMLDivElement;
return element as HTMLElement;
}
return null;
}
4 changes: 2 additions & 2 deletions packages/react-resizable-panels/src/utils/dom/getResizeHandleElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export function getResizeHandleElement(id: string): HTMLDivElement | null {
export function getResizeHandleElement(id: string): HTMLElement | null {
const element = document.querySelector(
`[data-panel-resize-handle-id="${id}"]`
);
if (element) {
return element as HTMLDivElement;
return element as HTMLElement;
}
return null;
}
2 changes: 1 addition & 1 deletion packages/react-resizable-panels/src/utils/dom/getResizeHandleElementsForGroup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export function getResizeHandleElementsForGroup(
groupId: string
): HTMLDivElement[] {
): HTMLElement[] {
return Array.from(
document.querySelectorAll(
`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`
Expand Down