@react-md/utils
Version:
General utils for react-md.
145 lines • 5.17 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { createContext, useCallback, useContext, useState } from "react";
import cn from "classnames";
import { useResizeObserver } from "../sizing/useResizeObserver";
import { useEnsuredRef } from "../useEnsuredRef";
import { scrollbarSize } from "./scrollbarSize";
/**
* This is the css variable that is used store the current size of each cell.
*/
export var CELL_SIZE_VAR = "--rmd-cell-size";
/**
* This is the css variable that is used store the current margin of each cell.
*/
export var CELL_MARGIN_VAR = "--rmd-cell-margin";
/**
* @remarks \@since 2.3.0
*/
export var DEFAULT_GRID_LIST_MAX_CELL_SIZE = 150;
/**
* @remarks \@since 2.3.0
*/
export var DEFAULT_GRID_LIST_PADDING = 16;
var context = createContext({
columns: -1,
cellWidth: -1,
});
/**
* @remarks \@since 2.3.0
*/
export var GridListSizeProvider = context.Provider;
if (process.env.NODE_ENV !== "production") {
context.displayName = "GridListSizeProvider";
}
/**
* Gets the current size of each cell within the `GridList` component. If this
* is used without a parent `GridList` component, `-1` is returned instead.
*
* @remarks \@since 2.3.0
*/
export function useGridListSize() {
return useContext(context);
}
/**
* The `useGridList` hook allows you to get all the grid and sizing
* functionality of the `GridList` component without needing to wrap your
* children in a `<div>` element.
*
* Example:
*
* ```tsx
* const [gridListProps] = useGridList({
* cellMargin: 16,
* maxCellSize: 300,
* containerPadding: 4,
* });
*
* return <div {...gridListProps}>{children}</div>;
* ```
*
* Note: You must manually provide the `gridSize` to the `GridListSizeProvider`
* component that was added in 2.3.0 if you want to use the `useGridSize` hook.
*
* Example:
*
* ```tsx
* const [gridListProps, gridSize] = useGridList()
*
* return (
* <GridListSizeProvider value={gridSize}>
* <MyComponent {...gridListProps} />
* </GridListSizeProvider>
* );
* ```
*
* @remarks \@since 2.3.0
*/
export function useGridList(_a) {
var _b;
var _c = _a === void 0 ? {} : _a, propRef = _c.ref, style = _c.style, className = _c.className, cellMargin = _c.cellMargin, defaultSize = _c.defaultSize, _d = _c.maxCellSize, maxCellSize = _d === void 0 ? DEFAULT_GRID_LIST_MAX_CELL_SIZE : _d, _e = _c.disableHeight, disableHeight = _e === void 0 ? false : _e, _f = _c.disableWidth, disableWidth = _f === void 0 ? false : _f, _g = _c.containerPadding, containerPadding = _g === void 0 ? DEFAULT_GRID_LIST_PADDING : _g;
var _h = __read(useEnsuredRef(propRef), 2), ref = _h[0], mergedRef = _h[1];
var _j = __read(useState(defaultSize || { columns: -1, cellWidth: maxCellSize }), 2), gridSize = _j[0], setGridSize = _j[1];
var recalculate = useCallback(function () {
var target = ref.current;
if (!target) {
return;
}
// need to use rect instead of offsetWidth since we need decimal precision
// for the width since offsetWidth is basically Math.ceil(width). the
// calculations for max columns will be off on high-pixel-density monitors
// or some zoom levels.
var width = target.getBoundingClientRect().width;
width -= containerPadding;
// just need to see if there is a scrollbar visible and subtract that width.
// don't need decimal precision here since both values will be rounded
if (target.offsetHeight < target.scrollHeight) {
width -= scrollbarSize("width");
}
var columns = Math.ceil(width / maxCellSize);
setGridSize({ cellWidth: width / columns, columns: columns });
}, [containerPadding, maxCellSize, ref]);
var _k = __read(useResizeObserver(recalculate, {
ref: mergedRef,
disableHeight: disableHeight,
disableWidth: disableWidth,
}), 2), refHandler = _k[1];
var mergedStyle = __assign(__assign({}, style), (_b = {}, _b[CELL_SIZE_VAR] = "".concat(gridSize.cellWidth, "px"), _b));
if (cellMargin) {
mergedStyle[CELL_MARGIN_VAR] = cellMargin;
}
return [
{
ref: refHandler,
style: mergedStyle,
className: cn("rmd-grid-list", className),
},
gridSize,
];
}
//# sourceMappingURL=useGridList.js.map