react-fast-masonry
Version:
A fast masonry infinite-scrolling component using the intersection api
55 lines (54 loc) • 7.19 kB
JavaScript
"use strict";
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 Card_1 = __importDefault(require("react-bootstrap/Card"));
const index_1 = __importDefault(require("../../../index"));
class RandomMasonryCards extends react_1.default.Component {
constructor(props) {
super(props);
this.randomCardItems = (n = 20) => new Array(n).fill(0).map(() => this.randomCardItem());
this.getCard = (item) => cards[item];
this.randomCardItem = () => this.randomInt(0, cards.length - 1);
this.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;
};
this.loadMore = () => {
this.setState(state => ({
items: [...state.items, ...this.randomCardItems()]
}));
};
this.state = {
items: this.randomCardItems()
};
}
render() {
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "app" }, { children: (0, jsx_runtime_1.jsx)(index_1.default, { sizes: [
{ columns: 1, gutter: 20 },
{ cq: 768, columns: 2, gutter: 20 },
{ cq: 1024, columns: 3, gutter: 20 },
{ cq: 1368, columns: 4, gutter: 20 }
], items: this.state.items, renderItem: (_, index, key) => {
const RandomCard = this.getCard(this.state.items[index]);
return (0, jsx_runtime_1.jsx)(RandomCard, { width: 300 }, key);
}, loadMore: this.loadMore, awaitMore: true, pageSize: 20, className: "masonry" }, void 0) }), void 0));
}
}
exports.default = RandomMasonryCards;
/// ignore this just random card render functions
const cards = [
({ width }) => ((0, jsx_runtime_1.jsxs)(Card_1.default, { children: [(0, jsx_runtime_1.jsx)(Card_1.default.Img, { style: { width, height: 160 }, variant: "top", src: `https://via.placeholder.com/${width}x160` }, void 0), (0, jsx_runtime_1.jsxs)(Card_1.default.Body, { children: [(0, jsx_runtime_1.jsx)(Card_1.default.Title, { children: "Card title that wraps to a new line" }, void 0), (0, jsx_runtime_1.jsx)(Card_1.default.Text, { children: "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer." }, void 0)] }, void 0)] }, void 0)),
() => ((0, jsx_runtime_1.jsx)(Card_1.default, Object.assign({ className: "p-3" }, { children: (0, jsx_runtime_1.jsxs)("blockquote", Object.assign({ className: "blockquote mb-0 card-body" }, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." }, void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ className: "blockquote-footer" }, { children: (0, jsx_runtime_1.jsxs)("small", Object.assign({ className: "text-muted" }, { children: ["Someone famous in ", (0, jsx_runtime_1.jsx)("cite", Object.assign({ title: "Source Title" }, { children: "Source Title" }), void 0)] }), void 0) }), void 0)] }), void 0) }), void 0)),
({ width }) => ((0, jsx_runtime_1.jsxs)(Card_1.default, { children: [(0, jsx_runtime_1.jsx)(Card_1.default.Img, { style: { width, height: 160 }, variant: "top", src: `https://via.placeholder.com/${width}x160` }, void 0), (0, jsx_runtime_1.jsxs)(Card_1.default.Body, { children: [(0, jsx_runtime_1.jsx)(Card_1.default.Title, { children: "Card title" }, void 0), (0, jsx_runtime_1.jsxs)(Card_1.default.Text, { children: ["This card has supporting text below as a natural lead-in to additional content.", " "] }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Card_1.default.Footer, { children: (0, jsx_runtime_1.jsx)("small", Object.assign({ className: "text-muted" }, { children: "Last updated 3 mins ago" }), void 0) }, void 0)] }, void 0)),
() => ((0, jsx_runtime_1.jsx)(Card_1.default, Object.assign({ bg: "primary", text: "white", className: "text-center p-3" }, { children: (0, jsx_runtime_1.jsxs)("blockquote", Object.assign({ className: "blockquote mb-0 card-body" }, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." }, void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ className: "blockquote-footer" }, { children: (0, jsx_runtime_1.jsxs)("small", Object.assign({ className: "text-muted" }, { children: ["Someone famous in ", (0, jsx_runtime_1.jsx)("cite", Object.assign({ title: "Source Title" }, { children: "Source Title" }), void 0)] }), void 0) }), void 0)] }), void 0) }), void 0)),
() => ((0, jsx_runtime_1.jsx)(Card_1.default, Object.assign({ className: "text-center" }, { children: (0, jsx_runtime_1.jsxs)(Card_1.default.Body, { children: [(0, jsx_runtime_1.jsx)(Card_1.default.Title, { children: "Card title" }, void 0), (0, jsx_runtime_1.jsxs)(Card_1.default.Text, { children: ["This card has supporting text below as a natural lead-in to additional content.", " "] }, void 0), (0, jsx_runtime_1.jsx)(Card_1.default.Text, { children: (0, jsx_runtime_1.jsx)("small", Object.assign({ className: "text-muted" }, { children: "Last updated 3 mins ago" }), void 0) }, void 0)] }, void 0) }), void 0)),
({ width }) => ((0, jsx_runtime_1.jsx)(Card_1.default, { children: (0, jsx_runtime_1.jsx)(Card_1.default.Img, { style: { width, height: 160 }, src: `https://via.placeholder.com/${width}x160` }, void 0) }, void 0)),
() => ((0, jsx_runtime_1.jsx)(Card_1.default, Object.assign({ className: "text-right" }, { children: (0, jsx_runtime_1.jsxs)("blockquote", Object.assign({ className: "blockquote mb-0 card-body" }, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." }, void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ className: "blockquote-footer" }, { children: (0, jsx_runtime_1.jsxs)("small", Object.assign({ className: "text-muted" }, { children: ["Someone famous in ", (0, jsx_runtime_1.jsx)("cite", Object.assign({ title: "Source Title" }, { children: "Source Title" }), void 0)] }), void 0) }), void 0)] }), void 0) }), void 0)),
() => ((0, jsx_runtime_1.jsx)(Card_1.default, { children: (0, jsx_runtime_1.jsxs)(Card_1.default.Body, { children: [(0, jsx_runtime_1.jsx)(Card_1.default.Title, { children: "Card title" }, void 0), (0, jsx_runtime_1.jsx)(Card_1.default.Text, { children: "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action." }, void 0), (0, jsx_runtime_1.jsx)(Card_1.default.Text, { children: (0, jsx_runtime_1.jsx)("small", Object.assign({ className: "text-muted" }, { children: "Last updated 3 mins ago" }), void 0) }, void 0)] }, void 0) }, void 0))
];