Skip to content

feat: support boolean for resizable #538

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

Merged
merged 2 commits into from
Sep 22, 2025
Merged

feat: support boolean for resizable #538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2aaae24
feat: support boolean for resizable
Sep 22, 2025
3f75e07
Update src/DrawerPopup.tsx
afc163 Sep 22, 2025
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
14 changes: 8 additions & 6 deletions src/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,14 @@ export interface DrawerProps
maxSize?: number;
/** Default size for uncontrolled resizable drawer */
defaultSize?: number | string;
/** Resizable configuration - object with optional callbacks */
resizable?: {
onResize?: (size: number) => void;
onResizeStart?: () => void;
onResizeEnd?: () => void;
};
/** Resizable configuration - boolean to enable/disable or object with optional callbacks */
resizable?:
| boolean
| {
onResize?: (size: number) => void;
onResizeStart?: () => void;
onResizeEnd?: () => void;
};
}

const Drawer: React.FC<DrawerProps> = props => {
Expand Down
23 changes: 14 additions & 9 deletions src/DrawerPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,13 @@ export interface DrawerPopupProps
// resizable
/** Default size for uncontrolled resizable drawer */
defaultSize?: number | string;
resizable?: {
onResize?: (size: number) => void;
onResizeStart?: () => void;
onResizeEnd?: () => void;
};
resizable?:
| boolean
| {
onResize?: (size: number) => void;
onResizeStart?: () => void;
onResizeEnd?: () => void;
};
}

const DrawerPopup: React.ForwardRefRenderFunction<
Expand Down Expand Up @@ -319,9 +321,12 @@ const DrawerPopup: React.ForwardRefRenderFunction<
// =========================== Resize ===========================
const wrapperRef = React.useRef<HTMLDivElement>(null);

const isResizable = !!resizable;
const resizeConfig = (typeof resizable === 'object' && resizable) || {};

Comment on lines +324 to +326
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

运行时判断简洁，但 TS 类型不安全（严格模式下会报错）

resizeConfig 目前推断为 {}，后续访问 resizeConfig.onResize 可能触发 “Property 'onResize' does not exist on type '{}'” 的编译错误。建议显式标注类型并 useMemo 避免每次 render 生成新对象：

-  const isResizable = !!resizable;
-  const resizeConfig = (typeof resizable === 'object' && resizable) || {};
+  const isResizable = Boolean(resizable);
+  type ResizeCfg = Exclude<NonNullable<DrawerPopupProps['resizable']>, boolean>;
+  const resizeConfig: Partial<ResizeCfg> = React.useMemo(
+    () => (typeof resizable === 'object' && resizable) ? resizable : {},
+    [resizable],
+  );

如已在 inter.ts 抽出 ResizeConfig，则将 ResizeCfg 替换为 ResizeConfig 更清晰。

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const isResizable = !!resizable;
const resizeConfig = (typeof resizable === 'object' && resizable) || {};
const isResizable = Boolean(resizable);
type ResizeCfg = Exclude<NonNullable<DrawerPopupProps['resizable']>, boolean>;
const resizeConfig: Partial<ResizeCfg> = React.useMemo(
() => (typeof resizable === 'object' && resizable) ? resizable : {},
[resizable],
);
🤖 Prompt for AI Agents 
In src/DrawerPopup.tsx around lines 324-326, the runtime checks set resizeConfig
to {} which TypeScript infers as an empty object and can cause "Property
'onResize' does not exist on type '{}'" errors in strict mode; change the
declaration to an explicitly typed constant (use the ResizeConfig type exported
from inter.ts or rename ResizeCfg → ResizeConfig) and wrap the computed value in
useMemo so you return either the provided object or a typed empty object without
recreating it each render (e.g., const resizeConfig: ResizeConfig = useMemo(()
=> (typeof resizable === 'object' && resizable) || {}, [resizable])).

const onInternalResize = useEvent((size: number) => {
setCurrentSize(size);
resizable?.onResize?.(size);
resizeConfig.onResize?.(size);
});

const { dragElementProps, isDragging } = useDrag({
Expand All @@ -333,8 +338,8 @@ const DrawerPopup: React.ForwardRefRenderFunction<
containerRef: wrapperRef,
currentSize: mergedSize,
onResize: onInternalResize,
onResizeStart: resizable?.onResizeStart,
onResizeEnd: resizable?.onResizeEnd,
onResizeStart: resizeConfig.onResizeStart,
onResizeEnd: resizeConfig.onResizeEnd,
});

// =========================== Events ===========================
Expand Down Expand Up @@ -394,7 +399,7 @@ const DrawerPopup: React.ForwardRefRenderFunction<
}}
{...pickAttrs(props, { data: true })}
>
{resizable && <div {...dragElementProps} />}
{isResizable && <div {...dragElementProps} />}
{drawerRender ? drawerRender(content) : content}
</div>
);
Expand Down