quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
78 lines (77 loc) • 6.76 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 __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;
};
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import Checkbox from '../../../Form/Checkbox';
import { css } from '@emotion/react';
import { TableDataContainer, formatSize } from './styles';
var TableData = function (_a) {
var children = _a.children, columns = _a.columns, rows = _a.rows, selected = _a.selected, _b = _a.selectedKey, selectedKey = _b === void 0 ? 'id' : _b, onSelectedData = _a.onSelectedData, props = __rest(_a, ["children", "columns", "rows", "selected", "selectedKey", "onSelectedData"]);
var TableContainerRef = useRef(null);
var _c = useState(new Set()), selectedData = _c[0], setSelectedData = _c[1];
var handleChangeSelect = function (key) {
var newSelectedData = new Set(selectedData);
newSelectedData.has(key) ? newSelectedData.delete(key) : newSelectedData.add(key);
setSelectedData(newSelectedData);
};
var getAbledRows = function (rows) { return rows.filter(function (_a) {
var disabled = _a.disabled;
return !disabled;
}); };
var handleChangeAllSelect = function (e) {
var currentPageAllSelectedData = new Set(getAbledRows(rows).map(function (row, rowIndex) { var _a; return (_a = row[selectedKey]) !== null && _a !== void 0 ? _a : rowIndex; }));
// setSelectedData((prev) => {
// return e.target.checked
// ? new Set([...prev, ...currentPageAllSelectedData])
// : new Set([...prev].filter((row) => !currentPageAllSelectedData.has(row as number)))
// })
};
var isAllSelected = function () {
var abledRows = getAbledRows(rows);
return abledRows.filter(function (row) { return selectedData.has(row[selectedKey]); }).length === abledRows.length;
};
useEffect(function () {
TableContainerRef.current.scrollTo(0, 0);
}, [rows]);
useEffect(function () {
onSelectedData === null || onSelectedData === void 0 ? void 0 : onSelectedData(rows.filter(function (row, rowIndex) { var _a; return selectedData.has((_a = row[selectedKey]) !== null && _a !== void 0 ? _a : rowIndex); }));
}, [selectedData]);
return (_jsx(TableDataContainer, __assign({ ref: TableContainerRef, selected: selected }, props, { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [selected && (_jsx("th", { children: _jsx("div", { className: "cell selected-cell", children: _jsx(Checkbox, { checked: isAllSelected(), onChange: handleChangeAllSelect }) }) })), columns.map(function (column, columnIndex) {
var columnSize = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n "], ["\n height: ", ";\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n "])), formatSize(column.height), formatSize(column.width), formatSize(column.minWidth), formatSize(column.maxWidth));
return (_jsxs("th", { css: columnSize, children: [_jsx("div", { className: "cell", title: column.label, children: column.label }), column.columns && (_jsx("div", { className: "multi-cell", children: column.columns.map(function (multiColumn, multiColumnIndex) { return (_jsx("div", { className: "cell", title: multiColumn.label, children: multiColumn.label }, multiColumnIndex)); }) }))] }, columnIndex));
})] }) }), _jsx("tbody", { children: rows.map(function (row, rowIndex) {
var _a, _b;
return (_jsxs("tr", { "data-disabled": row.disabled, "data-selected": selectedData.has((_a = row[selectedKey]) !== null && _a !== void 0 ? _a : rowIndex), children: [selected && (_jsx("td", { children: _jsx("div", { className: "cell selected-cell", children: _jsx(Checkbox, { disabled: row.disabled, checked: selectedData.has((_b = row[selectedKey]) !== null && _b !== void 0 ? _b : rowIndex), onChange: function () { var _a; return handleChangeSelect((_a = row[selectedKey]) !== null && _a !== void 0 ? _a : rowIndex); } }) }) })), columns.map(function (column, columnIndex) {
var columnSize = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n "], ["\n height: ", ";\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n "])), formatSize(column.height), formatSize(column.width), formatSize(column.minWidth), formatSize(column.maxWidth));
return (_jsx("td", { css: columnSize, children: column.key ? (_jsx("div", { className: "cell", title: row[column.key], children: _jsx("span", { children: row[column.key] }) })) : (column.columns && (_jsx("div", { className: "multi-cell", children: column.columns.map(function (multiColumn, multiColumnIndex) {
return multiColumn.key && (_jsx("div", { className: "cell", title: row[multiColumn.key], children: _jsx("span", { children: row[multiColumn.key] }) }, multiColumnIndex));
}) }))) }, columnIndex));
})] }, rowIndex));
}) })] }) })));
};
export default TableData;
var templateObject_1, templateObject_2;