@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 8.05 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/resizable-box/resize-tooltip/utils.ts"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\nconst noop = () => {};\nexport const POSITIONS = {\n bottom: 'bottom',\n corner: 'corner'\n};\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel({\n axis,\n fadeTimeout = 180,\n onResize = noop,\n position = POSITIONS.bottom,\n showPx = false\n}) {\n /*\n * The width/height values derive from this special useResizeObserver hook.\n * This custom hook uses the ResizeObserver API to listen for resize events.\n */\n const [resizeListener, sizes] = useResizeObserver();\n\n /*\n * Indicates if the x/y axis is preferred.\n * If set, we will avoid resetting the moveX and moveY values.\n * This will allow for the preferred axis values to persist in the label.\n */\n const isAxisControlled = !!axis;\n\n /*\n * The moveX and moveY values are used to track whether the label should\n * display width, height, or width x height.\n */\n const [moveX, setMoveX] = useState(false);\n const [moveY, setMoveY] = useState(false);\n\n /*\n * Cached dimension values to check for width/height updates from the\n * sizes property from useResizeAware()\n */\n const {\n width,\n height\n } = sizes;\n const heightRef = useRef(height);\n const widthRef = useRef(width);\n\n /*\n * This timeout is used with setMoveX and setMoveY to determine of\n * both width and height values have changed at (roughly) the same time.\n */\n const moveTimeoutRef = useRef(undefined);\n const debounceUnsetMoveXY = useCallback(() => {\n const unsetMoveXY = () => {\n /*\n * If axis is controlled, we will avoid resetting the moveX and moveY values.\n * This will allow for the preferred axis values to persist in the label.\n */\n if (isAxisControlled) {\n return;\n }\n setMoveX(false);\n setMoveY(false);\n };\n if (moveTimeoutRef.current) {\n window.clearTimeout(moveTimeoutRef.current);\n }\n moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);\n }, [fadeTimeout, isAxisControlled]);\n useEffect(() => {\n /*\n * On the initial render of useResizeAware, the height and width values are\n * null. They are calculated then set using via an internal useEffect hook.\n */\n const isRendered = width !== null || height !== null;\n if (!isRendered) {\n return;\n }\n const didWidthChange = width !== widthRef.current;\n const didHeightChange = height !== heightRef.current;\n if (!didWidthChange && !didHeightChange) {\n return;\n }\n\n /*\n * After the initial render, the useResizeAware will set the first\n * width and height values. We'll sync those values with our\n * width and height refs. However, we shouldn't render our Tooltip\n * label on this first cycle.\n */\n if (width && !widthRef.current && height && !heightRef.current) {\n widthRef.current = width;\n heightRef.current = height;\n return;\n }\n\n /*\n * After the first cycle, we can track width and height changes.\n */\n if (didWidthChange) {\n setMoveX(true);\n widthRef.current = width;\n }\n if (didHeightChange) {\n setMoveY(true);\n heightRef.current = height;\n }\n onResize({\n width,\n height\n });\n debounceUnsetMoveXY();\n }, [width, height, onResize, debounceUnsetMoveXY]);\n const label = getSizeLabel({\n axis,\n height,\n moveX,\n moveY,\n position,\n showPx,\n width\n });\n return {\n label,\n resizeListener\n };\n}\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel({\n axis,\n height,\n moveX = false,\n moveY = false,\n position = POSITIONS.bottom,\n showPx = false,\n width\n}) {\n if (!moveX && !moveY) {\n return undefined;\n }\n\n /*\n * Corner position...\n * We want the label to appear like width x height.\n */\n if (position === POSITIONS.corner) {\n return `${width} x ${height}`;\n }\n\n /*\n * Other POSITIONS...\n * The label will combine both width x height values if both\n * values have recently been changed.\n *\n * Otherwise, only width or height will be displayed.\n * The `PX` unit will be added, if specified by the `showPx` prop.\n */\n const labelUnit = showPx ? ' px' : '';\n if (axis) {\n if (axis === 'x' && moveX) {\n return `${width}${labelUnit}`;\n }\n if (axis === 'y' && moveY) {\n return `${height}${labelUnit}`;\n }\n }\n if (moveX && moveY) {\n return `${width} x ${height}`;\n }\n if (moveX) {\n return `${width}${labelUnit}`;\n }\n if (moveY) {\n return `${height}${labelUnit}`;\n }\n return undefined;\n}"],
"mappings": "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",
"names": []
}