@itwin/itwinui-react
Version:
A react component library for iTwinUI
650 lines (649 loc) • 16.5 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', {
value: true,
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _index = require('../core/Table/index.js');
const _react = /*#__PURE__*/ _interop_require_default._(require('react'));
const _index1 = require('../index.js');
() => {
let columns = [
{
Header: 'Header 1',
accessor: 'header1',
},
{
Header: 'Header 2',
accessor: 'header2',
},
];
let data = [
{
header1: 'row1',
header2: 'row1',
},
{
header1: 'row2',
header2: 'row2',
},
];
return _react.default.createElement(_index.Table, {
columns: columns,
data: data,
emptyTableContent: 'No data.',
});
};
() => {
let columns = [
{
Header: 'Header 1',
accessor: 'header1',
columns: [
{
Header: 'Header 2',
accessor: 'header2',
},
],
},
];
};
() => {
let cellRenderer = _react.default.useCallback(
(props) =>
_react.default.createElement(
'div',
null,
props.cellProps.row.original.header1,
),
[],
);
let columns = [
{
Header: 'Header 1',
accessor: 'header1',
cellRenderer: cellRenderer,
},
{
Header: 'Header 2',
accessor: 'header2',
Cell: (props) =>
_react.default.createElement('div', null, props.row.original.header2),
},
];
let data = [
{
header1: 'row1',
header2: 'row1',
},
{
header1: 'row2',
header2: 'row2',
},
];
return _react.default.createElement(_index.Table, {
columns: columns,
data: data,
emptyTableContent: 'No data.',
});
};
() => {
let Cell = _react.default.useCallback(
(props) =>
_react.default.createElement('div', null, props.row.original.header1),
[],
);
let columns = [
{
Header: 'Header 1',
accessor: 'header1',
Cell: Cell,
},
{
Header: 'Header 2',
accessor: 'header2',
},
];
let data = [
{
header1: 'row1',
header2: 'row1',
},
{
header1: 'row2',
header2: 'row2',
},
];
return _react.default.createElement(_index.Table, {
columns: columns,
data: data,
emptyTableContent: 'No data.',
});
};
() => {
let columns = _react.default.useMemo(
() => [
{
id: 'name',
Header: 'Name',
Filter: _index.tableFilters.TextFilter(),
accessor: 'name',
},
{
id: 'description',
Header: 'Description',
accessor: 'description',
maxWidth: 200,
},
],
[],
);
let data = _react.default.useMemo(
() => [
{
name: 'Name1',
description: 'description',
},
{
name: 'Name2',
description: 'description',
},
{
name: 'Name3',
description: 'description',
},
],
[],
);
return _react.default.createElement(_index.Table, {
columns: columns,
emptyTableContent: 'No data.',
data: data,
});
};
() => {
let translatedLabels = _react.default.useMemo(
() => ({
filter: 'Filter',
clear: 'Clear',
from: 'From',
to: 'To',
}),
[],
);
let formatter = _react.default.useMemo(
() =>
new Intl.DateTimeFormat('en-us', {
month: 'short',
day: 'numeric',
year: 'numeric',
}),
[],
);
let formatDate = _react.default.useCallback(
(date) => formatter.format(date),
[formatter],
);
let menuItems = _react.default.useCallback(
(close) => [
_react.default.createElement(
_index1.MenuItem,
{
key: 1,
onClick: () => close(),
},
'Edit',
),
_react.default.createElement(
_index1.MenuItem,
{
key: 2,
onClick: () => close(),
},
'Delete',
),
],
[],
);
let isRowDisabled = _react.default.useCallback(
(rowData) => 'Name2' === rowData.name,
[],
);
let isCheckboxDisabled = _react.default.useCallback(
(rowData) => 'Name1' === rowData.name,
[],
);
let isExpanderDisabled = _react.default.useCallback(
(rowData) => 'Name2' === rowData.name,
[],
);
let isCellDisabled = _react.default.useCallback(
(rowData) => 'Name3' === rowData.name,
[],
);
let onCellEdit = _react.default.useCallback((columnId, value, rowData) => {
console.log({
columnId,
value,
rowData,
});
}, []);
let cellRenderer = _react.default.useCallback(
(props) =>
_react.default.createElement(
_react.default.Fragment,
null,
isRowDisabled(props.cellProps.row.original) ||
'Fetching...' === props.cellProps.value
? _react.default.createElement(_index.DefaultCell, {
...props,
status:
'Fetching...' === props.cellProps.value ? void 0 : 'positive',
isDisabled: (rowData) =>
isCellDisabled(rowData) || isRowDisabled(rowData),
})
: _react.default.createElement(_index.EditableCell, {
...props,
onCellEdit: onCellEdit,
}),
),
[isCellDisabled, isRowDisabled, onCellEdit],
);
let expandedSubComponent = _react.default.useCallback(
(row) =>
_react.default.createElement(
'div',
{
style: {
padding: 16,
},
},
_react.default.createElement(
_index1.Text,
{
variant: 'leading',
},
'Extra information',
),
_react.default.createElement(
'pre',
null,
_react.default.createElement(
'code',
null,
JSON.stringify(
{
values: row.values,
},
null,
2,
),
),
),
),
[],
);
let onClickHandler = _react.default.useCallback(
(props) => console.log(props.row.original.name),
[],
);
let columns = _react.default.useMemo(
() => [
(0, _index.SelectionColumn)({
isDisabled: isCheckboxDisabled,
}),
(0, _index.ExpanderColumn)({
subComponent: expandedSubComponent,
isDisabled: isExpanderDisabled,
}),
{
id: 'index',
Header: '#',
accessor: 'index',
width: 80,
fieldType: 'number',
Filter: _index.tableFilters.NumberRangeFilter(translatedLabels),
filter: 'between',
disableToggleVisibility: true,
sticky: 'left',
},
{
id: 'name',
Header: 'Name',
accessor: 'name',
fieldType: 'text',
cellRenderer,
Filter: _index.tableFilters.TextFilter(translatedLabels),
disableReordering: true,
},
{
id: 'description',
Header: 'Description',
accessor: 'description',
fieldType: 'text',
Filter: _index.tableFilters.TextFilter(translatedLabels),
maxWidth: 200,
},
{
id: 'ids',
Header: 'IDs (enter one of the IDs in the filter)',
accessor: 'ids',
Cell: (props) =>
_react.default.createElement(
_react.default.Fragment,
null,
props.row.original.ids.join(', '),
),
Filter: _index.tableFilters.TextFilter(translatedLabels),
filter: 'includes',
minWidth: 200,
},
{
id: 'startDate',
Header: 'Start date',
accessor: 'startDate',
Cell: (props) =>
_react.default.createElement(
_react.default.Fragment,
null,
formatDate(props.row.original.startDate),
),
Filter: _index.tableFilters.DateRangeFilter({
translatedLabels,
}),
filter: 'betweenDate',
},
{
id: 'endDate',
Header: 'End date',
accessor: (rowData) => new Date(rowData.endDate),
Cell: (props) =>
_react.default.createElement(
_react.default.Fragment,
null,
formatDate(new Date(props.row.original.endDate)),
),
Filter: _index.tableFilters.DateRangeFilter({
translatedLabels,
}),
filter: 'betweenDate',
},
{
id: 'click-me',
Header: 'Click',
width: 100,
Cell: (props) =>
_react.default.createElement(
_index1.Anchor,
{
as: 'button',
onClick: (e) => {
e.stopPropagation();
console.log(props.row.original.name);
onClickHandler(props);
},
},
'Click me!',
),
disableResizing: true,
},
{
...(0, _index.ActionColumn)({
columnManager: true,
}),
Cell: (props) =>
_react.default.createElement(
_index1.DropdownMenu,
{
menuItems: menuItems,
},
_react.default.createElement(
_index1.IconButton,
{
styleType: 'borderless',
onClick: (e) => e.stopPropagation(),
disabled: isRowDisabled(props.row.original),
label: 'Column manager',
},
_react.default.createElement('svg', null),
),
),
sticky: 'right',
},
],
[
isCheckboxDisabled,
expandedSubComponent,
isExpanderDisabled,
translatedLabels,
cellRenderer,
formatDate,
onClickHandler,
menuItems,
isRowDisabled,
],
);
let data = _react.default.useMemo(
() => [
{
index: 1,
name: 'Name1',
description: 'Description1',
ids: ['1'],
startDate: new Date('May 1, 2021'),
endDate: '2021-05-31T21:00:00.000Z',
subRows: [
{
index: 11,
name: 'Name11',
description: 'Description11',
ids: ['11'],
startDate: new Date('May 11, 2021'),
endDate: '2021-05-31T21:00:00.000Z',
subRows: [
{
index: 111,
name: 'Name111',
description: 'Description111',
ids: ['111'],
startDate: new Date('May 11, 2021'),
endDate: '2021-05-31T21:00:00.000Z',
subRows: [],
},
],
},
],
},
{
index: 2,
name: 'Name2',
description: 'Description2',
ids: ['2', '3', '4'],
startDate: new Date('May 2, 2021'),
endDate: '2021-06-01T21:00:00.000Z',
subRows: [
{
index: 21,
name: 'Name21',
description: 'Description21',
ids: ['21'],
startDate: new Date('May 21, 2021'),
endDate: '2021-06-01T21:00:00.000Z',
subRows: [],
},
{
index: 22,
name: 'Name22',
description: 'Description22',
ids: ['22'],
startDate: new Date('May 22, 2021'),
endDate: '2021-06-01T21:00:00.000Z',
subRows: [],
},
],
},
{
index: 3,
name: 'Name3',
description: 'Description3',
ids: ['3', '4'],
startDate: new Date('May 3, 2021'),
endDate: '2021-06-02T21:00:00.000Z',
subRows: [],
},
],
[],
);
let onFilter = _react.default.useCallback((filters, state, filteredData) => {
let rowInfo = '[';
filteredData?.forEach((row) => {
rowInfo += `${JSON.stringify(row.original)},`;
});
rowInfo = rowInfo.slice(0, rowInfo.length - 1);
rowInfo += ']';
console.log(
`Filter changed. Filters: ${JSON.stringify(
filters,
)}, State: ${JSON.stringify(state)}, Rows: ${rowInfo}`,
);
}, []);
let onSelect = _react.default.useCallback(
(rows, state) =>
console.log(
`Selected rows: ${JSON.stringify(rows)}, Table state: ${JSON.stringify(
state,
)}`,
),
[],
);
let onRowClick = _react.default.useCallback(
(event, row) => console.log(`Row clicked: ${JSON.stringify(row.original)}`),
[],
);
let onSort = _react.default.useCallback(
(state) =>
console.log(`Sort changed. Table state: ${JSON.stringify(state)}`),
[],
);
let onExpand = _react.default.useCallback(
(rows, state) =>
console.log(
`Expanded rows: ${JSON.stringify(rows)}. Table state: ${JSON.stringify(
state,
)}`,
),
[],
);
let onRowInViewport = _react.default.useCallback((rowData) => {
console.log(`Row in view: ${JSON.stringify(rowData)}`);
}, []);
let rowProps = _react.default.useCallback(
(row) => ({
onMouseEnter: () => {
console.log(`Hovered over ${row.original.name}`);
setHoveredRowIndex(row.index);
},
ref: (el) => {
if (el)
setRowRefMap((r) => {
r[row.index] = el;
return r;
});
},
}),
[],
);
let pageSizeList = _react.default.useMemo(() => [10, 25, 50], []);
let paginator = _react.default.useCallback(
(props) =>
_react.default.createElement(_index.TablePaginator, {
...props,
pageSizeList: pageSizeList,
localization: {
pageSizeLabel: (size) => `${size} per localized page`,
rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
isLoading
? `${startIndex}-${endIndex} localized`
: `${startIndex}-${endIndex} of localized ${totalRows}`,
previousPage: 'Previous localized page',
nextPage: 'Next localized page',
goToPageLabel: (page) => `Go to localized page ${page}`,
rowsPerPageLabel: 'Rows per localized page',
rowsSelectedLabel: (totalSelectedRowsCount) =>
`${totalSelectedRowsCount} localized ${
1 === totalSelectedRowsCount ? 'row' : 'rows'
} selected`,
},
}),
[pageSizeList],
);
let [globalFilter, setGlobalFilter] = _react.default.useState('');
let tableInstance = _react.default.useRef(void 0);
let [hoveredRowIndex, setHoveredRowIndex] = _react.default.useState(0);
let [rowRefMap, setRowRefMap] = _react.default.useState({});
return _react.default.createElement(
'div',
null,
_react.default.createElement(_index1.Input, {
placeholder: 'Search...',
value: globalFilter,
onInput: (e) => setGlobalFilter(e.target.value),
}),
_react.default.createElement(_index.Table, {
columns: columns,
data: data,
emptyTableContent: 'No data.',
onFilter: onFilter,
globalFilterValue: globalFilter,
onSelect: onSelect,
isSelectable: true,
isSortable: true,
isResizable: true,
enableColumnReordering: true,
onSort: onSort,
onRowClick: onRowClick,
onExpand: onExpand,
subComponent: expandedSubComponent,
onRowInViewport: onRowInViewport,
selectionMode: 'multi',
isRowDisabled: isRowDisabled,
initialState: {
filters: [
{
id: 'name',
value: '1',
},
],
selectedRowIds: {
0: true,
1: true,
4: true,
5: true,
},
},
stateReducer: _react.default.useCallback(
(newState, action, prevState, instance) => {
tableInstance.current = instance;
return newState;
},
[],
),
rowProps: rowProps,
paginatorRenderer: paginator,
density: 'condensed',
autoResetFilters: false,
autoResetSortBy: false,
columnResizeMode: 'expand',
styleType: 'zebra-rows',
enableVirtualization: true,
scrollToRow: _react.default.useCallback(
(rows, data) => rows.findIndex((row) => 1 === row.original.index),
[],
),
}),
_react.default.createElement(_index1.Tooltip, {
reference: rowRefMap[hoveredRowIndex],
content: `Hovered over ${data[hoveredRowIndex].name}.`,
placement: 'bottom',
}),
);
};