@primer/react
Version:
An implementation of GitHub's Primer Design System using React
223 lines (222 loc) • 8.12 kB
JavaScript
import { DEFAULT_SORT_DIRECTION, SortDirection, strategies, transition } from "./sorting.js";
import { c } from "react-compiler-runtime";
import { useState } from "react";
//#region src/DataTable/useTable.ts
function useTable(t0) {
const $ = c(21);
const { columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId } = t0;
const [rowOrder, setRowOrder] = useState(data);
const [prevData, setPrevData] = useState(data);
const [prevColumns, setPrevColumns] = useState(columns);
let t1;
if ($[0] !== columns || $[1] !== initialSortColumn || $[2] !== initialSortDirection) {
t1 = () => getInitialSortState(columns, initialSortColumn, initialSortDirection);
$[0] = columns;
$[1] = initialSortColumn;
$[2] = initialSortDirection;
$[3] = t1;
} else t1 = $[3];
const [sortByColumn, setSortByColumn] = useState(t1);
const { gridTemplateColumns } = useTableLayout(columns);
if (columns !== prevColumns) {
setPrevColumns(columns);
if (sortByColumn) {
if (!columns.find((column) => {
var _column$id;
const id = (_column$id = column.id) !== null && _column$id !== void 0 ? _column$id : column.field;
return sortByColumn.id === id;
})) setSortByColumn(null);
}
}
let t2;
let t3;
let t4;
if ($[4] !== columns || $[5] !== data || $[6] !== externalSorting || $[7] !== getRowId || $[8] !== prevData || $[9] !== rowOrder || $[10] !== sortByColumn) {
let t5;
if ($[14] !== sortByColumn) {
t5 = (column_1) => {
var _column_1$id;
const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
if (id_0 === void 0) throw new Error("Expected either an `id` or `field` to be defined for a Column");
const sortable = column_1.sortBy !== void 0 && column_1.sortBy !== false;
return {
id: id_0,
column: column_1,
isSortable() {
return sortable;
},
getSortDirection() {
if (sortByColumn && sortByColumn.id === id_0) return sortByColumn.direction;
return SortDirection.NONE;
}
};
};
$[14] = sortByColumn;
$[15] = t5;
} else t5 = $[15];
const headers = columns.map(t5);
if (data !== prevData) {
setPrevData(data);
setRowOrder(data);
if (sortByColumn) sortRows(sortByColumn);
}
const sortBy = function sortBy(header) {
const sortState = {
id: header.id,
direction: sortByColumn && sortByColumn.id === header.id ? transition(sortByColumn.direction) : DEFAULT_SORT_DIRECTION
};
setSortByColumn(sortState);
sortRows(sortState);
};
function sortRows(state) {
const header_1 = headers.find((header_0) => header_0.id === state.id);
if (!header_1) throw new Error(`Unable to find header with id: ${state.id}`);
if (header_1.column.sortBy === false || header_1.column.sortBy === void 0) throw new Error("The column for this header is not sortable");
if (externalSorting) return;
const sortMethod = header_1.column.sortBy === true ? strategies.basic : typeof header_1.column.sortBy === "string" ? strategies[header_1.column.sortBy] : header_1.column.sortBy;
setRowOrder((rowOrder_0) => rowOrder_0.slice().sort((a, b) => {
if (header_1.column.field === void 0) return 0;
if (typeof header_1.column.sortBy === "function") {
if (state.direction === SortDirection.ASC) return sortMethod(a, b);
return sortMethod(b, a);
}
const valueA = get(a, header_1.column.field);
const valueB = get(b, header_1.column.field);
const valueAIsBlank = isBlankValue(valueA);
const valueBIsBlank = isBlankValue(valueB);
if (!valueAIsBlank && !valueBIsBlank) {
if (state.direction === SortDirection.ASC) return sortMethod(valueA, valueB);
return sortMethod(valueB, valueA);
}
if (!valueAIsBlank) return -1;
if (!valueBIsBlank) return 1;
return 0;
}));
}
t2 = headers;
t3 = rowOrder.map((row) => {
const rowId = getRowId(row);
return {
id: `${rowId}`,
getValue() {
return row;
},
getCells() {
return headers.map((header_2) => {
var _header_2$column$rowH;
return {
id: `${rowId}:${header_2.id}`,
column: header_2.column,
rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
getValue() {
if (header_2.column.field !== void 0) return get(row, header_2.column.field);
throw new Error(`Unable to get value for column header ${header_2.id}`);
}
};
});
}
};
});
t4 = { sortBy };
$[4] = columns;
$[5] = data;
$[6] = externalSorting;
$[7] = getRowId;
$[8] = prevData;
$[9] = rowOrder;
$[10] = sortByColumn;
$[11] = t2;
$[12] = t3;
$[13] = t4;
} else {
t2 = $[11];
t3 = $[12];
t4 = $[13];
}
let t5;
if ($[16] !== gridTemplateColumns || $[17] !== t2 || $[18] !== t3 || $[19] !== t4) {
t5 = {
headers: t2,
rows: t3,
actions: t4,
gridTemplateColumns
};
$[16] = gridTemplateColumns;
$[17] = t2;
$[18] = t3;
$[19] = t4;
$[20] = t5;
} else t5 = $[20];
return t5;
}
function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
if (initialSortColumn !== void 0) {
const column = columns.find((column) => {
return column.id === initialSortColumn || column.field === initialSortColumn;
});
if (column === void 0) {
console.warn(`Warning: Unable to find a column with id or field set to: ${initialSortColumn}. Please provide a value to \`initialSortColumn\` which corresponds to a \`id\` or \`field\` value in a column.`);
return null;
}
if (column.sortBy === false || column.sortBy === void 0) {
console.warn(`Warning: The column specified by initialSortColumn={${initialSortColumn}} is not sortable. Please set \`sortBy\` to true or provide a sort strategy.`);
return null;
}
return {
id: `${initialSortColumn}`,
direction: initialSortDirection !== null && initialSortDirection !== void 0 ? initialSortDirection : DEFAULT_SORT_DIRECTION
};
}
if (initialSortDirection !== void 0) {
var _column$id2;
const column = columns.find((column) => {
return column.sortBy !== false && column.sortBy !== void 0;
});
if (!column) {
console.warn(`Warning: An initialSortDirection value was provided but no columns are sortable. Please set \`sortBy\` to true or provide a sort strategy to a column.`);
return null;
}
const id = (_column$id2 = column.id) !== null && _column$id2 !== void 0 ? _column$id2 : column.field;
if (id === void 0) {
console.warn(`Warning: Unable to find an \`id\` or \`field\` for the column: ${column}. Please set one of these properties on the column.`);
return null;
}
return {
id,
direction: initialSortDirection
};
}
return null;
}
function useTableLayout(columns) {
return { gridTemplateColumns: getGridTemplateFromColumns(columns).join(" ") };
}
function getGridTemplateFromColumns(columns) {
return columns.map((column) => {
var _column$width;
const columnWidth = (_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : "grow";
let minWidth = "auto";
let maxWidth = "1fr";
if (columnWidth === "auto") maxWidth = "auto";
if (columnWidth === "grow" && !column.maxWidth) minWidth = "max-content";
if (columnWidth === "growCollapse") minWidth = "0";
if (column.minWidth) minWidth = typeof column.minWidth === "number" ? `${column.minWidth}px` : column.minWidth;
if (column.maxWidth) maxWidth = typeof column.maxWidth === "number" ? `${column.maxWidth}px` : column.maxWidth;
if (typeof columnWidth !== "number" && [
"grow",
"growCollapse",
"auto"
].includes(columnWidth)) return minWidth === maxWidth ? minWidth : `minmax(${minWidth}, ${maxWidth})`;
return typeof columnWidth === "number" ? `${columnWidth}px` : columnWidth;
});
}
function get(object, path) {
return path.split(".").reduce((value, key) => {
return value[key];
}, object);
}
function isBlankValue(value) {
return value === null || value === void 0 || value === "";
}
//#endregion
export { getGridTemplateFromColumns, useTable, useTableLayout };