react-fast-masonry
Version:
A fast masonry infinite-scrolling component using the intersection api
57 lines (56 loc) • 2.24 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const index_1 = __importDefault(require("../../../index"));
const defaultStyles = {
display: "flex",
justifyContent: "center",
alignItems: "center",
color: "white",
fontSize: "24px",
fontWeight: "bold",
fontFamily: `"Helvetica Neue", Helvetica, Arial, sans-serif`
};
const colors = [
"cornflowerblue",
"tomato",
"steelblue",
"slategrey",
"turquoise",
"teal",
"darkcyan",
"darkseagreen",
"coral"
];
const randomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
// The maximum is inclusive and the minimum is inclusive
return Math.floor(Math.random() * (max - min + 1)) + min;
};
const randomItems = (n = 20) => new Array(n).fill(0).map(() => ({
width: 300,
height: randomInt(100, 1000),
backgroundColor: colors[randomInt(0, colors.length - 1)]
}));
const concatRandomItems = (items, type = "append") => {
const randomItemList = randomItems();
return type === "append"
? [...items, ...randomItemList]
: [...randomItemList, ...items];
};
function MyMasonry() {
const [items, setItems] = react_1.default.useState([]);
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(index_1.default, { sizes: [
{ columns: 1, gutter: 0, columnWidth: "100%" },
{ cq: 768, columns: 2, gutter: 20, columnWidth: 300 },
{ cq: 1024, columns: 3, gutter: 20, columnWidth: 400 }
], items: items, renderItem: ({ columnWidth }, index, key) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: Object.assign(Object.assign(Object.assign({}, items[index]), defaultStyles), { width: columnWidth }) }, { children: index }), key)), loadMore: () => {
setItems([...items, ...randomItems()]);
}, awaitMore: true, pageSize: 20, className: "masonry" }, void 0) }, void 0));
}
exports.default = MyMasonry;