@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
297 lines (296 loc) • 11.4 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("@storybook/react");
var PaginatedTable_1 = __importDefault(require("./PaginatedTable"));
var placement_1 = require("../../../utils/placement");
var addon_knobs_1 = require("@storybook/addon-knobs");
var stories = (0, react_1.storiesOf)("PaginatedTable", module);
/**
* Columns to configure the table against.
*/
var columns = [
{ name: "name", label: "Member Name", isSortable: true, mods: "u-size1of2" },
{ name: "gender", label: "Gender", isSortable: true, mods: "u-size1of2" },
{ name: "age", label: "Age", isSortable: true, mods: "u-size1of2" },
{
name: "programs",
label: "Active Programs",
isSortable: true,
mods: "u-size1of2",
},
];
/**
* This mock promise data will likely be replaced with an HTTP request in real world applications.
*/
var data = [
{
name: "Brad",
gender: "m",
age: 12,
position: "Goalie",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Dustin",
gender: "m",
age: 56,
position: "Coach",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Fred",
gender: "m",
age: 56,
position: "Coach",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Bobby",
gender: "m",
age: 56,
position: "Coach",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Christie",
gender: "f",
age: 56,
position: "Coach",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Jenna",
gender: "f",
age: 56,
position: "Coach",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Stacy",
gender: "f",
age: 56,
position: "Coach",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Joey",
gender: "m",
age: 12,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "William",
gender: "m",
age: 13,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Sharron",
gender: "f",
age: 14,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Brenda",
gender: "f",
age: 13,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Nathan",
gender: "m",
age: 12,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Jimmy",
gender: "m",
age: 13,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Lester",
gender: "m",
age: 14,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Justine",
gender: "F",
age: 13,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Cassie",
gender: "f",
age: 14,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
{
name: "Jessica",
gender: "f",
age: 12,
position: "Player",
activePrograms: [
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
{ name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
],
},
];
/**
* This function is where all of your server calls should occur. Commonly likely just make a
* server call and return the list of items. However, this is also a good place where you can
* inspect the request and determine how many items the server has for this search.
* @param page - the table's current page
* @param itemsPerPage - the table's current number of items per page
* @param sortBy - the key that the table is sorting by
* @param sortAsc boolean - true if ascending, false if not.
*/
function loadData(_a) {
var page = _a.page, itemsPerPage = _a.itemsPerPage, sortBy = _a.sortBy, sortAsc = _a.sortAsc, filter = _a.filter;
var startIndex = itemsPerPage * page - itemsPerPage;
return new Promise(function (resolve) {
setTimeout(function () { return resolve(data); }, 500);
}).then(function (items) {
console.log("filter load", filter);
var endIndex = Math.min(items.length, startIndex + itemsPerPage);
return items.slice(startIndex, endIndex);
});
}
/**
* This function is where all of your server calls should occur. Commonly likely just make a
* server call and return the list of items. However, this is also a good place where you can
* inspect the request and determine how many items the server has for this search.
* @param page - the table's current page
* @param itemsPerPage - the table's current number of items per page
* @param sortBy - the key that the table is sorting by
* @param sortAsc boolean - true if ascending, false if not.
* @param filter objec - extra info to provide custom search.
*/
function loadSearchData(_a) {
var page = _a.page, itemsPerPage = _a.itemsPerPage, sortBy = _a.sortBy, sortAsc = _a.sortAsc, filter = _a.filter;
var startIndex = itemsPerPage * page - itemsPerPage;
return new Promise(function (resolve) {
setTimeout(function () { return resolve(data); }, 500);
}).then(function (items) {
items = items
.filter(function (item) { return item.gender == filter.gender || filter.gender == ""; })
.filter(function (item) { return item.name.search(new RegExp(filter.searchTerm, "i")) > -1; });
var endIndex = Math.min(items.length, startIndex + itemsPerPage);
return items.slice(startIndex, endIndex);
});
}
/**
* this function is defined to map a single data item into a single row item.
* It is passed in to the paginated table below.
* @param item the data item to be mapped to row data
*/
function mapData(item) {
return {
id: item.name,
name: (React.createElement("div", null,
React.createElement("div", null, item.name),
React.createElement("div", null, item.position))),
gender: item.gender,
age: "" + item.age,
programs: item.activePrograms.map(function (p, idx) { return (React.createElement("div", { key: idx }, p.name)); }),
};
}
stories.add("Default", function () { return (React.createElement(PaginatedTable_1.default, { columns: columns, mapDataToRow: mapData, loadData: loadData, defaultItemsPerPage: 2, totalItems: data.length, paginationPlacement: placement_1.Placement.Bottom })); });
stories.add("Selectable Rows", function () { return (React.createElement(PaginatedTable_1.default, { columns: columns, rowsAreSelectable: true, bulkActions: [
{
label: "Log Selected",
onSelected: function (selected) {
console.log(selected);
},
},
{
label: "Alert Selected IDs",
onSelected: function (selected) {
console.log(alert(selected.map(function (e) { return e.id; }).join(",")));
},
},
], mapDataToRow: mapData, loadData: loadData, includeBasicSearch: true, searchPlaceholder: "Search members by name", defaultItemsPerPage: 2, totalItems: data.length })); });
stories.add("Basic Search", function () { return (React.createElement(PaginatedTable_1.default, { columns: columns, mapDataToRow: mapData, loadData: loadSearchData, defaultItemsPerPage: 2, totalItems: data.length, customFilter: { gender: (0, addon_knobs_1.text)("Gender Filter", "") }, includeBasicSearch: true, searchPlaceholder: "Search members by name" })); });