@primer/react
Version:
An implementation of GitHub's Primer Design System using React
319 lines (309 loc) • 10.7 kB
JavaScript
;
var reactCompilerRuntime = require('react-compiler-runtime');
var React = require('react');
var sorting = require('./sorting.js');
function useTable(t0) {
const $ = reactCompilerRuntime.c(26);
const {
columns,
data,
initialSortColumn,
initialSortDirection,
getRowId
} = t0;
const [rowOrder, setRowOrder] = React.useState(data);
const [prevData, setPrevData] = React.useState(data);
const [prevColumns, setPrevColumns] = React.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] = React.useState(t1);
const {
gridTemplateColumns
} = useTableLayout(columns);
if (columns !== prevColumns) {
setPrevColumns(columns);
if (sortByColumn) {
const column_0 = 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;
});
if (!column_0) {
setSortByColumn(null);
}
}
}
let headers;
let sortBy;
if ($[4] !== columns || $[5] !== data || $[6] !== prevData || $[7] !== sortByColumn) {
let t2;
if ($[10] !== sortByColumn) {
t2 = 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 === undefined) {
throw new Error("Expected either an `id` or `field` to be defined for a Column");
}
const sortable = column_1.sortBy !== undefined && 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 sorting.SortDirection.NONE;
}
};
};
$[10] = sortByColumn;
$[11] = t2;
} else {
t2 = $[11];
}
headers = columns.map(t2);
if (data !== prevData) {
setPrevData(data);
setRowOrder(data);
if (sortByColumn) {
sortRows(sortByColumn);
}
}
sortBy = function sortBy(header) {
const sortState = {
id: header.id,
direction: sortByColumn && sortByColumn.id === header.id ? sorting.transition(sortByColumn.direction) : sorting.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 === undefined) {
throw new Error("The column for this header is not sortable");
}
const sortMethod = header_1.column.sortBy === true ? sorting.strategies.basic : typeof header_1.column.sortBy === "string" ? sorting.strategies[header_1.column.sortBy] : header_1.column.sortBy;
setRowOrder(rowOrder_0 => rowOrder_0.slice().sort((a, b) => {
if (header_1.column.field === undefined) {
return 0;
}
if (typeof header_1.column.sortBy === "function") {
if (state.direction === sorting.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);
if (valueA && valueB) {
if (state.direction === sorting.SortDirection.ASC) {
return sortMethod(valueA, valueB);
}
return sortMethod(valueB, valueA);
}
if (valueA) {
return -1;
}
if (valueB) {
return 1;
}
return 0;
}));
}
$[4] = columns;
$[5] = data;
$[6] = prevData;
$[7] = sortByColumn;
$[8] = headers;
$[9] = sortBy;
} else {
headers = $[8];
sortBy = $[9];
}
let t2;
if ($[12] !== getRowId || $[13] !== headers || $[14] !== rowOrder) {
let t3;
if ($[16] !== getRowId || $[17] !== headers) {
t3 = 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 !== undefined) {
return get(row, header_2.column.field);
}
throw new Error(`Unable to get value for column header ${header_2.id}`);
}
};
});
}
};
};
$[16] = getRowId;
$[17] = headers;
$[18] = t3;
} else {
t3 = $[18];
}
t2 = rowOrder.map(t3);
$[12] = getRowId;
$[13] = headers;
$[14] = rowOrder;
$[15] = t2;
} else {
t2 = $[15];
}
let t3;
if ($[19] !== sortBy) {
t3 = {
sortBy
};
$[19] = sortBy;
$[20] = t3;
} else {
t3 = $[20];
}
let t4;
if ($[21] !== gridTemplateColumns || $[22] !== headers || $[23] !== t2 || $[24] !== t3) {
t4 = {
headers,
rows: t2,
actions: t3,
gridTemplateColumns
};
$[21] = gridTemplateColumns;
$[22] = headers;
$[23] = t2;
$[24] = t3;
$[25] = t4;
} else {
t4 = $[25];
}
return t4;
}
function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
if (initialSortColumn !== undefined) {
const column = columns.find(column => {
return column.id === initialSortColumn || column.field === initialSortColumn;
});
if (column === undefined) {
if (process.env.NODE_ENV !== "production") {
// eslint-disable-next-line no-console
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 === undefined) {
if (process.env.NODE_ENV !== "production") {
// eslint-disable-next-line no-console
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 : sorting.DEFAULT_SORT_DIRECTION
};
}
if (initialSortDirection !== undefined) {
var _column$id2;
const column = columns.find(column => {
return column.sortBy !== false && column.sortBy !== undefined;
});
if (!column) {
if (process.env.NODE_ENV !== "production") {
// eslint-disable-next-line no-console
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 === undefined) {
if (process.env.NODE_ENV !== "production") {
// eslint-disable-next-line no-console
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';
}
// Setting a min-width of 'max-content' ensures that the column will grow to fit the widest cell's content.
// However, If the column has a max width, we can't set the min width to `max-content` because
// the widest cell's content might overflow the container.
if (columnWidth === 'grow' && !column.maxWidth) {
minWidth = 'max-content';
}
// Column widths set to "growCollapse" don't need a min width unless one is explicitly provided.
if (columnWidth === 'growCollapse') {
minWidth = '0';
}
// If a consumer passes `minWidth` or `maxWidth`, we need to override whatever we set above.
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 a consumer is passing one of the shorthand widths or doesn't pass a width at all, we use the
// min and max width calculated above to create a minmax() column template value.
if (typeof columnWidth !== 'number' && ['grow', 'growCollapse', 'auto'].includes(columnWidth)) {
return minWidth === maxWidth ? minWidth : `minmax(${minWidth}, ${maxWidth})`;
}
// If we reach this point, the consumer is passing an explicit width value.
return typeof columnWidth === 'number' ? `${columnWidth}px` : columnWidth;
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function get(object, path) {
return path.split('.').reduce((value, key) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return value[key];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
}, object);
}
exports.getGridTemplateFromColumns = getGridTemplateFromColumns;
exports.useTable = useTable;
exports.useTableLayout = useTableLayout;