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.

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

Polish ResizableBox and convert it to TypeScript. #35062

Merged
merged 3 commits into from
Oct 13, 2021
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Revise JSDocs.
  • Loading branch information
ZebulanStanphill committed Oct 7, 2021
commit 2cee4f215425e6dcad982f159a7220db6c3eafd4
35 changes: 14 additions & 21 deletions packages/components/src/resizable-box/resize-tooltip/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,28 +27,24 @@ interface UseResizeLabelProps {
resizeListener: JSX.Element;
}

/**
* Custom hook that manages resize listener events. It also provides a label
* based on current resize width x height values.
*/
interface UseResizeLabelArgs {
/** Only shows the label corresponding to the axis. */
axis?: Axis;
/** Duration (ms) before deactivating the resize label. */
fadeTimeout: number;
/** Callback when a resize occurs. Provides { width, height } callback. */
onResize( data: { width: number | null; height: number | null } ): void;
/** Adjusts label value. */
position: Position;
/** Whether to add `PX` to the label. */
showPx: boolean;
}

/**
* Custom hook that manages resize listener events. It also provides a label
* based on current resize width x height values.
*
* @param {UseResizeLabelArgs} props
* @param props
* @param props.axis Only shows the label corresponding to the axis.
* @param props.fadeTimeout Duration (ms) before deactivating the resize label.
* @param props.onResize Callback when a resize occurs. Provides { width, height } callback.
* @param props.position Adjusts label value.
* @param props.showPx Whether to add `PX` to the label.
*
* @return Properties for hook.
*/
Expand Down Expand Up @@ -171,30 +167,27 @@ export function useResizeLabel( {
};
}

/**
* Gets the resize label based on width and height values (as well as recent changes).
*/
interface GetSizeLabelArgs {
/** Only shows the label corresponding to the axis. */
axis?: Axis;
/** Height value. */
height: number | null;
/** Recent width (x axis) changes. */
moveX: boolean;
/** Recent width (y axis) changes. */
moveY: boolean;
/** Adjusts label value. */
position: Position;
/** Whether to add `PX` to the label. */
showPx: boolean;
/** Width value. */
width: number | null;
}

/**
* Gets the resize label based on width and height values (as well as recent changes).
*
* @param {GetSizeLabelArgs} props
* @param props
* @param props.axis Only shows the label corresponding to the axis.
* @param props.height Height value.
* @param props.moveX Recent width (x axis) changes.
* @param props.moveY Recent width (y axis) changes.
* @param props.position Adjusts label value.
* @param props.showPx Whether to add `PX` to the label.
* @param props.width Width value.
*
* @return The rendered label.
*/
Expand Down