1
This commit is contained in:
+1
@@ -0,0 +1 @@
|
||||
export default function useDelay(callback: VoidFunction): () => void;
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = useDelay;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _util = require("@rc-component/util");
|
||||
var _raf = _interopRequireDefault(require("@rc-component/util/lib/raf"));
|
||||
function useDelay(callback) {
|
||||
const idRef = React.useRef(0);
|
||||
const clearRaf = () => {
|
||||
_raf.default.cancel(idRef.current);
|
||||
};
|
||||
React.useEffect(() => clearRaf, []);
|
||||
const triggerFn = (0, _util.useEvent)(() => {
|
||||
clearRaf();
|
||||
idRef.current = (0, _raf.default)(callback);
|
||||
});
|
||||
return triggerFn;
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import type { Key } from 'react';
|
||||
export type ItemHeightData = [key: Key, height: number, column?: number];
|
||||
export type ItemPositions = Map<Key, {
|
||||
column: number;
|
||||
top: number;
|
||||
}>;
|
||||
/**
|
||||
* Auto arrange the items in the masonry layout.
|
||||
* Always get stable positions by order
|
||||
* instead of dynamic adjust for next item height.
|
||||
*/
|
||||
export default function usePositions(itemHeights: ItemHeightData[], columnCount: number, verticalGutter: number): readonly [ItemPositions, number];
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = usePositions;
|
||||
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
// Disabled the rule since `fill` is safe here
|
||||
// but `Array.from` will increase bundle size.
|
||||
/* eslint-disable unicorn/no-new-array */
|
||||
|
||||
/**
|
||||
* Auto arrange the items in the masonry layout.
|
||||
* Always get stable positions by order
|
||||
* instead of dynamic adjust for next item height.
|
||||
*/
|
||||
function usePositions(itemHeights, columnCount, verticalGutter) {
|
||||
// ==================== Auto Order ====================
|
||||
const [orderItemPositions, orderTotalHeight] = React.useMemo(() => {
|
||||
const columnHeights = new Array(columnCount).fill(0);
|
||||
const itemPositions = new Map();
|
||||
for (let i = 0; i < itemHeights.length; i += 1) {
|
||||
const [itemKey, itemHeight, itemColumn] = itemHeights[i];
|
||||
let targetColumnIndex = itemColumn ?? columnHeights.indexOf(Math.min.apply(Math, (0, _toConsumableArray2.default)(columnHeights)));
|
||||
targetColumnIndex = Math.min(targetColumnIndex, columnCount - 1);
|
||||
const top = columnHeights[targetColumnIndex];
|
||||
itemPositions.set(itemKey, {
|
||||
column: targetColumnIndex,
|
||||
top
|
||||
});
|
||||
columnHeights[targetColumnIndex] += itemHeight + verticalGutter;
|
||||
}
|
||||
return [itemPositions, Math.max(0, Math.max.apply(Math, (0, _toConsumableArray2.default)(columnHeights)) - verticalGutter)];
|
||||
}, [columnCount, itemHeights, verticalGutter]);
|
||||
// ====================== Return ======================
|
||||
return [orderItemPositions, orderTotalHeight];
|
||||
}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import * as React from 'react';
|
||||
export default function useRefs(): readonly [(key: React.Key, element: HTMLDivElement | null) => void, (key: React.Key) => HTMLDivElement | null | undefined];
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = useRefs;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
function useRefs() {
|
||||
const ref = React.useRef(null);
|
||||
if (ref.current === null) {
|
||||
ref.current = new Map();
|
||||
}
|
||||
const setRef = (key, element) => {
|
||||
ref.current.set(key, element);
|
||||
};
|
||||
const getRef = key => ref.current.get(key);
|
||||
return [setRef, getRef];
|
||||
}
|
||||
Reference in New Issue
Block a user