@cimpress/react-components/dist/src/stories/Table.stories.js

React components to support the MCP styleguide

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomCellRender = exports.LoadingNoData = exports.LoadingWithData = exports.PaginationAndSorting = exports.Default = void 0;
const React = __importStar(require("react"));
const Table_1 = require("../Table");
const meta = {
    title: 'Components/Table',
    component: Table_1.Table,
};
exports.default = meta;
function TableStory(_a) {
    var { columns } = _a, props = __rest(_a, ["columns"]);
    return React.createElement(Table_1.Table, Object.assign({ columns: columns }, props));
}
function TableSortingStory(_a) {
    var { columns, data } = _a, props = __rest(_a, ["columns", "data"]);
    const [sortKey, setSortKey] = React.useState();
    const sortedData = React.useMemo(() => {
        if (!sortKey)
            return data;
        return data.slice().sort((a, b) => (sortKey.desc ? -1 : 1) * a[sortKey.key].localeCompare(b[sortKey.key]));
    }, [data, sortKey]);
    return (React.createElement(Table_1.Table, Object.assign({}, props, { columns: columns, data: sortedData, sortedBy: sortKey, onSortingRequested: sortKey => {
            console.log(sortKey);
            setSortKey(sortKey);
        } })));
}
exports.Default = {
    render: TableStory,
    args: {
        data: [
            { title: 'The Shawshank Redemption', releaseYear: '1994', rating: 9.3 },
            { title: 'The Godfather', releaseYear: '1972', rating: 9.2 },
            { title: 'The Godfather: Part II', releaseYear: '1974', rating: 9.0 },
            { title: 'The Dark Knight', releaseYear: '2008', rating: 9.0 },
            { title: '12 Angry Men', releaseYear: '1957', rating: 8.9 },
            { title: "Schindler's List", releaseYear: '1993', rating: 8.9 },
            { title: 'The Lord of the Rings: The Return of the King', releaseYear: '2003', rating: 8.9 },
            { title: 'Pulp Fiction', releaseYear: '1994', rating: 8.9 },
            { title: 'The Lord of the Rings: The Fellowship of the Ring', releaseYear: '2001', rating: 8.8 },
            { title: 'Forrest Gump', releaseYear: '1994', rating: 8.8 },
        ],
        columns: [
            { Header: 'Title', accessor: 'title' },
            { Header: 'Release Year', accessor: 'releaseYear' },
            { Header: 'Rating', accessor: 'rating' },
        ],
    },
};
const labels = ['Interscope', 'Universal'];
exports.PaginationAndSorting = {
    name: 'Pagination and Sorting',
    render: TableSortingStory,
    args: {
        pageSize: 25,
        paginationPosition: 'bottomRight',
        data: Array(1000)
            .fill(0)
            .map((_, i, arr) => ({
            title: `Album #${i + 1}`,
            released: `July 8, ${1997 + i}`,
            label: labels[i % labels.length],
            chart: arr.length - i,
            id: crypto.randomUUID(),
        })),
        columns: [
            {
                Header: 'Title',
                accessor: 'title',
                sortable: true,
            },
            {
                Header: 'Released',
                accessor: 'released',
                sortable: true,
            },
            {
                Header: 'Label',
                accessor: 'label',
            },
            {
                Header: 'Chart Position',
                accessor: 'chart',
            },
        ],
    },
};
exports.LoadingWithData = {
    render: TableStory,
    args: {
        data: [
            { title: 'The Shawshank Redemption', releaseYear: '1994', rating: 9.3 },
            { title: 'The Godfather', releaseYear: '1972', rating: 9.2 },
            { title: 'The Godfather: Part II', releaseYear: '1974', rating: 9.0 },
            { title: 'The Dark Knight', releaseYear: '2008', rating: 9.0 },
            { title: '12 Angry Men', releaseYear: '1957', rating: 8.9 },
            { title: "Schindler's List", releaseYear: '1993', rating: 8.9 },
            { title: 'The Lord of the Rings: The Return of the King', releaseYear: '2003', rating: 8.9 },
            { title: 'Pulp Fiction', releaseYear: '1994', rating: 8.9 },
            { title: 'The Lord of the Rings: The Fellowship of the Ring', releaseYear: '2001', rating: 8.8 },
            { title: 'Forrest Gump', releaseYear: '1994', rating: 8.8 },
        ],
        columns: [
            { Header: 'Title', accessor: 'title' },
            { Header: 'Release Year', accessor: 'releaseYear' },
            { Header: 'Rating', accessor: 'rating' },
        ],
        loading: true,
    },
};
exports.LoadingNoData = {
    render: TableStory,
    args: {
        data: [],
        columns: [
            { Header: 'Title', accessor: 'title' },
            { Header: 'Release Year', accessor: 'releaseYear' },
            { Header: 'Rating', accessor: 'rating' },
        ],
        loading: true,
    },
};
exports.CustomCellRender = {
    render: TableStory,
    args: {
        data: [
            { title: 'The Shawshank Redemption', releaseYear: '1994', rating: 9.3 },
            { title: 'The Godfather', releaseYear: '1972', rating: 9.2 },
            { title: 'The Godfather: Part II', releaseYear: '1974', rating: 9.0 },
            { title: 'The Dark Knight', releaseYear: '2008', rating: 9.0 },
            { title: '12 Angry Men', releaseYear: '1957', rating: 8.9 },
            { title: "Schindler's List", releaseYear: '1993', rating: 8.9 },
            { title: 'The Lord of the Rings: The Return of the King', releaseYear: '2003', rating: 8.9 },
            { title: 'Pulp Fiction', releaseYear: '1994', rating: 8.9 },
            { title: 'The Lord of the Rings: The Fellowship of the Ring', releaseYear: '2001', rating: 8.8 },
            { title: 'Forrest Gump', releaseYear: '1994', rating: 8.8 },
        ],
        columns: [
            { Header: 'Title', accessor: 'title' },
            { Header: 'Release Year', accessor: 'releaseYear' },
            {
                Header: 'Rating',
                accessor: 'rating',
                Cell(row) {
                    return React.createElement("span", null,
                        "\u2B50\uFE0F ",
                        row.original.rating);
                },
            },
        ],
    },
};
//# sourceMappingURL=Table.stories.js.map