@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
203 lines (202 loc) • 11 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var Button_1 = require("../Button");
var types_1 = require("../../types");
var Panel_1 = require("../Panel");
var PanelHeader_1 = require("../PanelHeader");
var PanelBody_1 = require("../PanelBody");
var PanelRow_1 = require("../PanelRow");
var Field_1 = require("../Field");
var ListToggle_1 = require("../ListToggle");
var helpers_1 = require("../../utils/helpers");
var ToggleCheckboxList = function (_a) {
var className = _a.className, mods = _a.mods, label = _a.label, list = _a.list, activeRows = _a.activeRows, headerStatus = _a.headerStatus, setActiveRows = _a.setActiveRows, setHeaderStatus = _a.setHeaderStatus;
// Dynamically create refs outside of the mapping below for performance reasons
var bodyRefs = React.useRef([]);
bodyRefs.current = list.map(function (_, i) { var _a; return (_a = bodyRefs.current[i]) !== null && _a !== void 0 ? _a : React.createRef(); });
var getFullChildCount = function (items) { return items.reduce(function (acc, curr) { return acc + curr.rows.length; }, 0); };
var getChildren = function (idx) {
return bodyRefs.current[idx].current && bodyRefs.current[idx].current.children[0].childNodes;
};
var toggleAllRows = function () {
var headers;
var divisions;
var currHeaderStatus;
if (activeRows.length === 0 ||
(activeRows.length > 0 && activeRows.length < getFullChildCount(list))) {
divisions = list
.map(function (row) {
var _a;
var heading = row.heading, subheading = row.subheading, rows = row.rows;
var headerName = heading + "-" + subheading;
headers = __assign(__assign({}, headers), (_a = {}, _a[headerName] = {
activeCount: rows.length,
status: true,
}, _a));
currHeaderStatus = __assign(__assign({}, headerStatus), headers);
return rows.map(function (division) { return heading + "-" + subheading + "-" + division; });
})
.reduce(function (curr, next) { return __spreadArray(__spreadArray([], curr), next); }, []);
}
else {
divisions = [];
currHeaderStatus = {};
}
setActiveRows(divisions);
setHeaderStatus(currHeaderStatus);
};
var toggleSubheadingRows = function (heading, subheading, idx) {
var _a;
var rowData = [];
var headerName = heading + "-" + subheading;
if (headerName in headerStatus && headerStatus[headerName].activeCount >= 0) {
// Remove rows which are associated with the header's naming convention
rowData = activeRows.filter(function (row) { return !row.includes(headerName); });
// Remove or filter out the header we do not want to keep
var newObject = Object.keys(headerStatus)
.filter(function (item) { return item !== headerName; })
.reduce(function (res, key) {
res[key] = headerStatus[key];
return res;
}, {});
setHeaderStatus(newObject);
}
else {
var productChildElements = getChildren(idx);
var rows = __spreadArray([], productChildElements).map(function (division) { return headerName + "-" + division.innerText; });
rowData = __spreadArray(__spreadArray([], activeRows), rows);
setHeaderStatus(__assign(__assign({}, headerStatus), (_a = {}, _a[headerName] = {
activeCount: rows.length,
status: types_1.CheckboxStates.TRUE,
}, _a)));
}
setActiveRows(rowData);
};
var onRowClick = function (heading, subheading, division, parentIdx) {
var _a;
var newActiveList = [];
var activeCount = 0;
var newStatus = types_1.CheckboxStates.FALSE;
var children = getChildren(parentIdx);
var headerName = heading + "-" + subheading;
// Row already exists, unselect it
if (activeRows.includes(division)) {
newActiveList = activeRows.filter(function (item) { return item !== division; });
activeCount = headerStatus[headerName]
? headerStatus[headerName].activeCount - 1
: headerStatus[headerName].activeCount;
if (activeCount > 0 && activeCount < children.length) {
newStatus = types_1.CheckboxStates.INDETERMINATE;
}
}
else {
// Row doesn't exists, select it
activeCount = headerStatus[headerName] ? headerStatus[headerName].activeCount + 1 : 1;
if (activeCount === children.length) {
newStatus = types_1.CheckboxStates.TRUE;
}
else {
newStatus = types_1.CheckboxStates.INDETERMINATE;
}
newActiveList = __spreadArray(__spreadArray([], activeRows), [division]);
}
var itemActiveStatus = __assign(__assign({}, headerStatus), (_a = {}, _a[headerName] = {
activeCount: activeCount,
status: newStatus,
}, _a));
setHeaderStatus(itemActiveStatus);
setActiveRows(newActiveList);
};
var buildRows = function (heading, subheading, rows, parentIdx) {
return rows.map(function (division) {
var uniqueId = heading + "-" + subheading + "-" + division;
var classes = activeRows.includes(uniqueId)
? "u-flex u-flexRow u-flexJustifyBetween Panel-row--active " + mods
: "u-flex u-flexRow u-flexJustifyBetween " + mods;
return (React.createElement(PanelRow_1.PanelRow, { key: uniqueId, mods: classes },
React.createElement("p", { className: "u-padLeftLg" }, division),
React.createElement(Field_1.Field, { isDisabled: false, name: uniqueId, type: "checkbox", formFieldProps: {
checked: activeRows.includes(uniqueId),
onClick: function () {
onRowClick(heading, subheading, uniqueId, parentIdx);
},
} })));
});
};
var buildList = function () {
return list.map(function (item, idx) {
var heading = item.heading, subheading = item.subheading, tags = item.tags, rows = item.rows;
var selected;
var headerName = heading + "-" + subheading;
if (headerStatus[headerName]) {
selected =
headerStatus[headerName].activeCount === getChildren(idx).length
? 'Panel-header--active'
: '';
}
var classes = helpers_1.getClassName('Panel-header--list u-flexJustifyBetween u-padTopLg', mods, selected);
return (React.createElement(React.Fragment, { key: "" + headerName },
React.createElement(PanelHeader_1.PanelHeader, { mods: classes },
React.createElement("div", null,
rows && rows.length > 0 && (React.createElement(ListToggle_1.ListToggle, { onClick: function () {
var _a, _b;
if ((_b = (_a = bodyRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.classList) {
bodyRefs.current[idx].current.classList.toggle('Panel-body--closed');
}
bodyRefs.current[idx].current.classList.toggle('Panel-body--open');
} })),
React.createElement("strong", { className: "u-padSidesSm" }, heading),
tags.map(function (c) { return c; })),
React.createElement("div", null,
React.createElement(Field_1.Field, { isDisabled: false, name: headerName, type: "checkbox", formFieldProps: {
checked: headerStatus[headerName] && headerStatus[headerName].status,
onClick: function () { return toggleSubheadingRows(heading, subheading, idx); },
} }))),
React.createElement("div", { ref: bodyRefs.current[idx], className: "Panel-body-wrapper Panel-body--closed" },
React.createElement(PanelBody_1.PanelBody, null, buildRows(heading, subheading, rows, idx)))));
});
};
var buttonLabel = activeRows.length === getFullChildCount(list) ? 'Clear All' : 'Select All';
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "Grid-cell u-flex u-flexJustifyBetween u-spaceEndsLg u-flexAlignItemsCenter" },
React.createElement("h4", null, label),
React.createElement(Button_1.Button, { label: buttonLabel, mods: "u-padSidesLg", isActive: activeRows.length === getFullChildCount(list), onClick: function () { return toggleAllRows(); } })),
React.createElement("div", { className: "Grid-cell" }, list.length === 0 ? (React.createElement("p", { className: "u-flex u-flexJustifyCenter u-padEndsMd" }, "You have no recipients")) : (React.createElement(Panel_1.Panel, { mods: className }, buildList())))));
};
exports.default = ToggleCheckboxList;