@aivenio/aquarium 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_variables.scss +20 -2
- package/dist/_variables_timescale.scss +20 -2
- package/dist/atoms.cjs +37 -11
- package/dist/atoms.mjs +29 -9
- package/dist/src/common/Banner/Banner.js +7 -4
- package/dist/src/common/DataList/DataList.d.ts +24 -0
- package/dist/src/common/DataList/DataList.js +54 -0
- package/dist/src/common/DropdownMenu/DropdownMenu.d.ts +3 -1
- package/dist/src/common/DropdownMenu/DropdownMenu.js +5 -3
- package/dist/src/common/Table/Table.d.ts +8 -3
- package/dist/src/common/Table/Table.js +20 -10
- package/dist/src/components/Carousel/Carousel.d.ts +16 -0
- package/dist/src/components/Carousel/Carousel.js +89 -0
- package/dist/src/components/Chip/Chip.d.ts +1 -0
- package/dist/src/components/Chip/Chip.js +2 -2
- package/dist/src/components/DataList/DataList.d.ts +13 -0
- package/dist/src/components/DataList/DataList.js +24 -0
- package/dist/src/components/DataTable/DataTable.d.ts +5 -92
- package/dist/src/components/DataTable/DataTable.js +9 -28
- package/dist/src/components/Dropdown/Dropdown.js +1 -1
- package/dist/src/components/DropdownMenu/DropdownMenu.d.ts +8 -0
- package/dist/src/components/DropdownMenu/DropdownMenu.js +18 -15
- package/dist/src/components/Section/Section.js +2 -2
- package/dist/src/components/Table/Table.js +2 -2
- package/dist/src/components/Template/Template.d.ts +6 -1
- package/dist/src/components/Template/Template.js +7 -2
- package/dist/src/components/index.d.ts +6 -1
- package/dist/src/components/index.js +7 -2
- package/dist/src/utils/Blueprint.d.ts +6 -1
- package/dist/src/utils/Blueprint.js +4 -2
- package/dist/src/utils/table/types.d.ts +129 -0
- package/dist/src/utils/table/types.js +6 -0
- package/dist/src/utils/table/useScrollTarget.d.ts +2 -0
- package/dist/src/utils/table/useScrollTarget.js +16 -0
- package/dist/src/{common/Table/Table.utils.d.ts → utils/table/useTableSelect.d.ts} +0 -3
- package/dist/src/utils/table/useTableSelect.js +27 -0
- package/dist/src/utils/table/useTableSort.d.ts +2 -0
- package/dist/src/utils/table/useTableSort.js +19 -0
- package/dist/styles.css +63 -6
- package/dist/styles_timescaledb.css +63 -6
- package/dist/system.cjs +937 -675
- package/dist/system.mjs +931 -673
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/dist/types/ActionType.d.ts +2 -0
- package/dist/types/tailwindGenerated.d.ts +1 -1
- package/dist/types/utils.d.ts +3 -0
- package/package.json +3 -3
- package/dist/src/common/Table/Table.utils.js +0 -41
@@ -0,0 +1,89 @@
|
|
1
|
+
import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
|
2
|
+
import { tw } from '../../../src/utils/tailwind';
|
3
|
+
import { IconButton } from '../../../src/components/Button/Button';
|
4
|
+
import { Typography } from '../../../src/components/Typography/Typography';
|
5
|
+
import chevronLeft from '../../../src/icons/chevronLeft';
|
6
|
+
import chevronRight from '../../../src/icons/chevronRight';
|
7
|
+
import { Flexbox } from '../../../src/components/Flexbox/Flexbox';
|
8
|
+
export const Carousel = ({ defaultPage = 1, currentPage: currentPageProp, onPageChange, children, }) => {
|
9
|
+
const containerRef = useRef(null);
|
10
|
+
const scrollbarContainerRef = useRef(null);
|
11
|
+
const items = React.Children.toArray(children);
|
12
|
+
const [width, setWidth] = useState(0);
|
13
|
+
const [isUpdating, setIsUpdating] = useState(false); // waiting for activePage update scrollTo to be done first (controlled mode)
|
14
|
+
const [currentPage, setCurrentPage] = useState(currentPageProp !== null && currentPageProp !== void 0 ? currentPageProp : defaultPage);
|
15
|
+
useLayoutEffect(() => {
|
16
|
+
const updateContainerWidth = () => {
|
17
|
+
var _a;
|
18
|
+
const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
|
19
|
+
if (containerWidth !== undefined && width !== containerWidth) {
|
20
|
+
setWidth(containerWidth);
|
21
|
+
}
|
22
|
+
};
|
23
|
+
updateContainerWidth();
|
24
|
+
window.addEventListener('resize', updateContainerWidth); // update width when user resizes window's size
|
25
|
+
return () => {
|
26
|
+
window.removeEventListener('resize', updateContainerWidth);
|
27
|
+
};
|
28
|
+
}, [containerRef.current]);
|
29
|
+
// case: controlled mode
|
30
|
+
if (typeof currentPageProp === 'number' && currentPageProp !== currentPage && onPageChange && width !== 0) {
|
31
|
+
setCurrentPage(currentPageProp);
|
32
|
+
}
|
33
|
+
useEffect(() => {
|
34
|
+
var _a, _b;
|
35
|
+
if (width === 0) {
|
36
|
+
return;
|
37
|
+
}
|
38
|
+
const currentPageX = (currentPage - 1) * width;
|
39
|
+
if (((_a = scrollbarContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== currentPageX) {
|
40
|
+
setIsUpdating(true); // this will prevent scroll event listener to work when we are updating scrollTo() programatically which are 1) when clicking on next/back button 2) when scroll based on "currentPageProp" changes. Since when we set scrollTo() programatically, it also triggers scroll event listener at the same time.
|
41
|
+
(_b = scrollbarContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({ left: currentPageX, behavior: 'smooth' });
|
42
|
+
}
|
43
|
+
}, [currentPage, scrollbarContainerRef.current]);
|
44
|
+
const handleNavigationClick = (direction) => {
|
45
|
+
const nextItem = currentPage + (direction === 'left' ? -1 : 1);
|
46
|
+
// case: uncontrolled mode
|
47
|
+
!onPageChange && setCurrentPage(nextItem);
|
48
|
+
// case: controlled mode
|
49
|
+
onPageChange && onPageChange(nextItem);
|
50
|
+
};
|
51
|
+
const handleScroll = () => {
|
52
|
+
var _a, _b;
|
53
|
+
const currentPageX = (currentPage - 1) * width;
|
54
|
+
// when currentPageProp is updated, as controlled mode, we programatically scroll it by scrollTo() which will also trigger the scroll event and this "handleScroll" callback will also be triggered.
|
55
|
+
// Due to the above reason, while the previous scroll isn't done yet, "scrollLeft" here might be different than the targeted x position of the previous scroll action
|
56
|
+
// for example we pass `currentPageProp=4` and then update it to `currentPageProp=2`, it will have to scroll from 4 back to 2 which will also pass 3. So in the UI, it will show like 4->2, then 4->3, and then 3->2 which causes UI glitch.
|
57
|
+
// but this will have no problem if user navigates through `handleNavigationClick` since it is only -1/+1 item at a time.
|
58
|
+
// to fix the above issue, we will not trigger any action in this callback if "isUpdating === true"
|
59
|
+
// this should be inside a scroll event handle since it is checking when scrolling to x destination is done.
|
60
|
+
// once it arrives to "x" as expected when "currentPage" changes. Resume everything back, so defult scroll event works as usual.
|
61
|
+
if (isUpdating && ((_a = scrollbarContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === currentPageX) {
|
62
|
+
setIsUpdating(false);
|
63
|
+
}
|
64
|
+
const scrollBarX = (_b = scrollbarContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft;
|
65
|
+
if (typeof scrollBarX === 'number' && scrollBarX % width === 0 && currentPageX !== scrollBarX && !isUpdating) {
|
66
|
+
const newPage = scrollBarX / width + 1;
|
67
|
+
// case: uncontrolled mode
|
68
|
+
!onPageChange && setCurrentPage(newPage);
|
69
|
+
// case: controlled mode
|
70
|
+
onPageChange && onPageChange(newPage);
|
71
|
+
}
|
72
|
+
};
|
73
|
+
return items.length > 0 ? (React.createElement("div", { className: tw('w-full flex flex-col'), ref: containerRef },
|
74
|
+
containerRef !== null && (React.createElement("ul", { ref: scrollbarContainerRef, tabIndex: 0, onScroll: handleScroll,
|
75
|
+
// use items-strech here, so that every carousel items are the same height in case there are some items that taller than others
|
76
|
+
className: tw('grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-70') }, width !== 0 &&
|
77
|
+
React.Children.map(children, (child, index) => (React.createElement(CarouselItem, { key: index, width: width, ariaHidden: index + 1 === currentPage ? undefined : true }, child))))),
|
78
|
+
React.createElement(Flexbox, { direction: "row", justifyContent: "flex-end", alignItems: "center" },
|
79
|
+
React.createElement(IconButton, { "aria-label": "Previous", onClick: () => handleNavigationClick('left'), icon: chevronLeft, disabled: currentPage === 1 }),
|
80
|
+
React.createElement(Typography.Caption, null, `${currentPage}/${React.Children.count(children)}`),
|
81
|
+
React.createElement(IconButton, { "aria-label": "Next", onClick: () => handleNavigationClick('right'), icon: chevronRight, disabled: currentPage === items.length })))) : null;
|
82
|
+
};
|
83
|
+
const CarouselItem = ({ width, children, ariaHidden }) => {
|
84
|
+
return (
|
85
|
+
// let height to be auto
|
86
|
+
// if a carousel item doesn't fit the width of the container nicely, it will be aligned center within the container
|
87
|
+
React.createElement("li", { style: { width }, "aria-hidden": ariaHidden, className: tw('flex justify-center snap-start') }, children));
|
88
|
+
};
|
89
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2Fyb3VzZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9DYXJvdXNlbC9DYXJvdXNlbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxNQUFNLEVBQUUsZUFBZSxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDNUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDbEUsT0FBTyxXQUFXLE1BQU0sdUJBQXVCLENBQUM7QUFDaEQsT0FBTyxZQUFZLE1BQU0sd0JBQXdCLENBQUM7QUFDbEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBbUJ6RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQTRCLENBQUMsRUFDaEQsV0FBVyxHQUFHLENBQUMsRUFDZixXQUFXLEVBQUUsZUFBZSxFQUM1QixZQUFZLEVBQ1osUUFBUSxHQUNULEVBQUUsRUFBRTtJQUNILE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7SUFDbEQsTUFBTSxxQkFBcUIsR0FBRyxNQUFNLENBQW1CLElBQUksQ0FBQyxDQUFDO0lBQzdELE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBRS9DLE1BQU0sQ0FBQyxLQUFLLEVBQUUsUUFBUSxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3RDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsYUFBYSxDQUFDLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsNEVBQTRFO0lBQ2pJLE1BQU0sQ0FBQyxXQUFXLEVBQUUs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
|
@@ -46,7 +46,7 @@ export const Chip = (_a) => {
|
|
46
46
|
onClose && (React.createElement(InlineIcon, { role: "button", "aria-hidden": false, icon: crossIcon, className: tw({ 'cursor-pointer': onClose !== undefined }), onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose() })),
|
47
47
|
locked && React.createElement(InlineIcon, { icon: lockIcon })));
|
48
48
|
};
|
49
|
-
const ChipSkeleton = ({ dense = false }) => (React.createElement(Skeleton, { width:
|
49
|
+
const ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => (React.createElement(Skeleton, { width: width, height: dense ? 20 : 28 }));
|
50
50
|
Chip.Skeleton = ChipSkeleton;
|
51
51
|
export const StatusChip = React.forwardRef((_a, ref) => {
|
52
52
|
var { UNSAFE_icon: icon, text, dense = false, status } = _a, rest = __rest(_a, ["UNSAFE_icon", "text", "dense", "status"]);
|
@@ -60,4 +60,4 @@ export const ChipContainer = ({ dense, children }) => (React.createElement("div"
|
|
60
60
|
}) }, React.Children.map(children, (child) => isComponentType(child, Chip) || isComponentType(child, StatusChip)
|
61
61
|
? React.cloneElement(child, { dense })
|
62
62
|
: undefined)));
|
63
|
-
//# sourceMappingURL=data:application/json;base64,
|
63
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxRQUFRLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFFNUQsT0FBTyxFQUFFLElBQUksSUFBSSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQXVDOUMsTUFBTSxtQkFBbUIsR0FBRyxDQUFDLFNBQXFCLFNBQVMsRUFBVSxFQUFFO0lBQ3JFLFFBQVEsTUFBTSxFQUFFO1FBQ2QsS0FBSyxNQUFNO1lBQ1QsT0FBTyxFQUFFLENBQUMseUJBQXlCLENBQUMsQ0FBQztRQUV2QyxLQUFLLFNBQVM7WUFDWixPQUFPLEVBQUUsQ0FBQyxrQ0FBa0MsQ0FBQyxDQUFDO1FBRWhELEtBQUssUUFBUTtZQUNYLE9BQU8sRUFBRSxDQUFDLDJCQUEyQixDQUFDLENBQUM7UUFFekMsS0FBSyxTQUFTO1lBQ1osT0FBTyxFQUFFLENBQUMsK0JBQStCLENBQUMsQ0FBQztRQUU3QyxLQUFLLFNBQVMsQ0FBQztRQUNmO1lBQ0UsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUMsQ0FBQztLQUN2QztBQUNILENBQUMsQ0FBQztBQUVG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
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { DataTableRow, DataListColumn } from '../../../src/utils/table/types';
|
3
|
+
export declare type DataListProps<R extends DataTableRow> = {
|
4
|
+
/**
|
5
|
+
* Array of column definitions that correspond to the data rows.
|
6
|
+
*/
|
7
|
+
columns: Array<DataListColumn<R>>;
|
8
|
+
/**
|
9
|
+
* Array of data rows to be displayed.
|
10
|
+
*/
|
11
|
+
rows: R[];
|
12
|
+
};
|
13
|
+
export declare const DataList: <R extends DataTableRow>({ columns, rows }: DataListProps<R>) => JSX.Element;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { toSortDirection, cellProps } from '../../../src/utils/table/types';
|
3
|
+
import { DataList as DataListBase } from '../../../src/common/DataList/DataList';
|
4
|
+
import { Item } from '../../../src/common/Table/Table';
|
5
|
+
import { StatusChip } from '../../../src/components/Chip/Chip';
|
6
|
+
import { Template } from '../../../src/components/Template/Template';
|
7
|
+
import { SecondaryButton } from '../../../src/components/Button/Button';
|
8
|
+
import { renameProperty } from '../../../src/utils/object';
|
9
|
+
import orderBy from 'lodash/orderBy';
|
10
|
+
import { List } from '../../../src/components';
|
11
|
+
import { useTableSort } from '../../../src/utils/table/useTableSort';
|
12
|
+
export const DataList = ({ columns, rows }) => {
|
13
|
+
const [sort, updateSort] = useTableSort();
|
14
|
+
const sortedRows = orderBy(rows, [sort === null || sort === void 0 ? void 0 : sort.key], [toSortDirection(sort === null || sort === void 0 ? void 0 : sort.direction)]);
|
15
|
+
const templateColumns = columns.map((column) => { var _a; return (_a = column.width) !== null && _a !== void 0 ? _a : 'auto'; });
|
16
|
+
return (React.createElement(Template, { columns: templateColumns },
|
17
|
+
columns.map((column) => (column.type === 'text' || column.type === 'number') && column.sortable ? (React.createElement(DataListBase.SortCell, Object.assign({ direction: sort && sort.key === column.field ? sort.direction : 'none', onClick: () => updateSort(column.field) }, cellProps(column)), column.headerName)) : (React.createElement(DataListBase.HeadCell, Object.assign({}, cellProps(column)), column.headerName))),
|
18
|
+
React.createElement(List, { items: sortedRows, renderItem: (row, index) => (React.createElement(DataListBase.Row, { key: row.id },
|
19
|
+
React.createElement(List, { items: columns, renderItem: (column) => column.type === 'status' ? (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)),
|
20
|
+
React.createElement(StatusChip, Object.assign({ dense: true }, column.status(row, index, sortedRows))))) : column.type === 'action' ? (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)),
|
21
|
+
React.createElement(SecondaryButton, Object.assign({ dense: true }, renameProperty('text', 'children', column.action(row, index, sortedRows)))))) : column.type === 'custom' ? (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows))) : column.type === 'item' ? (React.createElement(DataListBase.Cell, null,
|
22
|
+
React.createElement(Item, Object.assign({}, column.item(row, index, sortedRows))))) : (React.createElement(DataListBase.Cell, Object.assign({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])) }))) })));
|
23
|
+
};
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0YUxpc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9EYXRhTGlzdC9EYXRhTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBZ0MsZUFBZSxFQUFFLFNBQVMsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ2pHLE9BQU8sRUFBRSxRQUFRLElBQUksWUFBWSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDeEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzlDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNsRCxPQUFPLE9BQU8sTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBYzVELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxDQUF5QixFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQW9CLEVBQWUsRUFBRTtJQUNuRyxNQUFNLENBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQyxHQUFHLFlBQVksRUFBSyxDQUFDO0lBQzdDLE1BQU0sVUFBVSxHQUFHLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUUsR0FBRyxDQUFDLEVBQUUsQ0FBQyxlQUFlLENBQUMsSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLFNBQVMsQ0FBQyxDQUFDLENBQVEsQ0FBQztJ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
|
@@ -1,96 +1,15 @@
|
|
1
|
-
|
1
|
+
/// <reference types="react" />
|
2
2
|
import { TableProps } from '../../../src/components/Table/Table';
|
3
|
-
import {
|
4
|
-
|
5
|
-
import { ActionType } from '../../../types/ActionType';
|
6
|
-
declare type Column = {
|
7
|
-
/**
|
8
|
-
* Type of the column.
|
9
|
-
*/
|
10
|
-
type: 'text' | 'number' | 'action' | 'custom' | 'status';
|
11
|
-
/**
|
12
|
-
* Display name for the column.
|
13
|
-
*/
|
14
|
-
headerName: string;
|
15
|
-
/**
|
16
|
-
* Width of the column. Number for pixels and string for percentages
|
17
|
-
*/
|
18
|
-
width?: number | `${number}%`;
|
19
|
-
};
|
20
|
-
declare type Formatter<T, K extends keyof T, V = T[K]> = (value: V, row: T, index: number, rows: T[]) => string;
|
21
|
-
declare type FieldColumn<T, K extends keyof T = keyof T> = K extends keyof T ? Column & {
|
22
|
-
/**
|
23
|
-
* Name of the property field that this column represents in the data rows.
|
24
|
-
*/
|
25
|
-
field: K;
|
26
|
-
/**
|
27
|
-
* When true, user will be able to sort data rows by clicking this column header.
|
28
|
-
*/
|
29
|
-
sortable?: boolean;
|
30
|
-
/**
|
31
|
-
* Formatter function. Use for example for formatting dates or capitalizing words.
|
32
|
-
* Sorting will still be based on the unformatted value.
|
33
|
-
*/
|
34
|
-
formatter?: Formatter<T, K>;
|
35
|
-
} : never;
|
36
|
-
declare type TextColumn<T> = FieldColumn<T>;
|
37
|
-
declare type NumberColumn<T> = FieldColumn<T> & {
|
38
|
-
/**
|
39
|
-
* Type of the column.
|
40
|
-
*/
|
41
|
-
type: 'number';
|
42
|
-
};
|
43
|
-
declare type ActionColumn<T> = Column & {
|
44
|
-
/**
|
45
|
-
* Type of the column.
|
46
|
-
*/
|
47
|
-
type: 'action';
|
48
|
-
/**
|
49
|
-
* Callback function that resolves to Button props.
|
50
|
-
*/
|
51
|
-
action: (row: T, index: number, rows: T[]) => ActionType;
|
52
|
-
};
|
53
|
-
declare type CustomColumn<T> = Column & {
|
54
|
-
/**
|
55
|
-
* Type of the column.
|
56
|
-
*/
|
57
|
-
type: 'custom';
|
58
|
-
/**
|
59
|
-
* Unsafe render method. Consider consulting the designer instead of using this.
|
60
|
-
* Using render callback will also disallow sorting on that column.
|
61
|
-
*/
|
62
|
-
UNSAFE_render: (row: T, index: number, rows: T[]) => React.ReactNode;
|
63
|
-
};
|
64
|
-
declare type StatusColumn<T> = Column & {
|
65
|
-
/**
|
66
|
-
* Type of the column.
|
67
|
-
*/
|
68
|
-
type: 'status';
|
69
|
-
/**
|
70
|
-
* Callback function that resolves to StatusChip props
|
71
|
-
*/
|
72
|
-
status: (row: T, index: number, rows: T[]) => {
|
73
|
-
status: ChipStatus;
|
74
|
-
text: string | number;
|
75
|
-
};
|
76
|
-
};
|
77
|
-
export declare type DataTableColumn<T extends DataTableRow> = TextColumn<T> | CustomColumn<T> | StatusColumn<T> | NumberColumn<T> | ActionColumn<T>;
|
78
|
-
export declare type DataTableRow = Record<string, any> & {
|
79
|
-
/**
|
80
|
-
* Assigned ID for each data row.
|
81
|
-
* Used as a key. Use something unqiue derived from the data, not index.
|
82
|
-
*/
|
83
|
-
id: string | number;
|
84
|
-
};
|
85
|
-
export declare type DataTableProps<T extends DataTableRow> = {
|
3
|
+
import { DataTableRow, DataTableColumn } from '../../../src/utils/table/types';
|
4
|
+
export declare type DataTableProps<R extends DataTableRow> = {
|
86
5
|
/**
|
87
6
|
* Array of column definitions that correspond to the data rows.
|
88
7
|
*/
|
89
|
-
columns: Array<DataTableColumn<
|
8
|
+
columns: Array<DataTableColumn<R>>;
|
90
9
|
/**
|
91
10
|
* Array of data rows to be displayed.
|
92
11
|
*/
|
93
|
-
rows:
|
12
|
+
rows: R[];
|
94
13
|
/**
|
95
14
|
* When true, sets column whitespace to nowrap. Defaults to false.
|
96
15
|
* Use when you dont want text to wrap due to 100% width column for example.
|
@@ -101,10 +20,4 @@ export declare type DataTableProps<T extends DataTableRow> = {
|
|
101
20
|
*/
|
102
21
|
layout?: 'auto' | 'fixed';
|
103
22
|
} & Pick<TableProps, 'ariaLabel' | 'onNext' | 'onPrev'>;
|
104
|
-
declare type Sort<T extends DataTableRow> = {
|
105
|
-
key: keyof T;
|
106
|
-
direction: SortDirection;
|
107
|
-
};
|
108
|
-
export declare const useTableSort: <T extends DataTableRow>() => [Sort<T> | undefined, (field: keyof T) => void];
|
109
23
|
export declare const DataTable: <T extends DataTableRow>({ columns, rows, noWrap, layout, ...rest }: DataTableProps<T>) => JSX.Element;
|
110
|
-
export {};
|
@@ -12,34 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
12
12
|
import React from 'react';
|
13
13
|
import { tw } from '../../../src/utils/tailwind';
|
14
14
|
import { Table } from '../../../src/components/Table/Table';
|
15
|
+
import { Item } from '../../../src/common/Table/Table';
|
15
16
|
import { StatusChip } from '../../../src/components/Chip/Chip';
|
16
17
|
import { SecondaryButton } from '../../../src/components/Button/Button';
|
17
18
|
import { renameProperty } from '../../../src/utils/object';
|
18
19
|
import orderBy from 'lodash/orderBy';
|
19
20
|
import { List } from '../../../src/components';
|
20
|
-
|
21
|
-
|
22
|
-
const isNumberColumn = (column) => column.type === 'number';
|
23
|
-
const isStatusColumn = (column) => column.type === 'status';
|
24
|
-
const isActionColumn = (column) => column.type === 'action';
|
25
|
-
const isCustomColumn = (column) => column.type === 'custom';
|
26
|
-
export const useTableSort = () => {
|
27
|
-
const [sort, setSort] = React.useState();
|
28
|
-
const handleSortClick = (field) => {
|
29
|
-
if ((sort === null || sort === void 0 ? void 0 : sort.key) === field) {
|
30
|
-
if (sort.direction === 'ascending') {
|
31
|
-
setSort({ key: field, direction: 'descending' });
|
32
|
-
}
|
33
|
-
else {
|
34
|
-
setSort(undefined);
|
35
|
-
}
|
36
|
-
}
|
37
|
-
else {
|
38
|
-
setSort({ key: field, direction: 'ascending' });
|
39
|
-
}
|
40
|
-
};
|
41
|
-
return [sort, handleSortClick];
|
42
|
-
};
|
21
|
+
import { toSortDirection, cellProps } from '../../../src/utils/table/types';
|
22
|
+
import { useTableSort } from '../../../src/utils/table/useTableSort';
|
43
23
|
export const DataTable = (_a) => {
|
44
24
|
var { columns, rows, noWrap = false, layout = 'auto' } = _a, rest = __rest(_a, ["columns", "rows", "noWrap", "layout"]);
|
45
25
|
const [sort, updateSort] = useTableSort();
|
@@ -49,13 +29,14 @@ export const DataTable = (_a) => {
|
|
49
29
|
'table-auto': layout === 'auto',
|
50
30
|
'table-fixed': layout === 'fixed',
|
51
31
|
}) }),
|
52
|
-
React.createElement(Table.Head, null, columns.map((column) =>
|
32
|
+
React.createElement(Table.Head, null, columns.map((column) => (column.type === 'text' || column.type === 'number') && column.sortable ? (React.createElement(Table.SortCell, Object.assign({ direction: sort && sort.key === column.field ? sort.direction : 'none', onClick: () => updateSort(column.field), style: { width: column.width } }, cellProps(column)), column.headerName)) : (React.createElement(Table.Cell, Object.assign({}, cellProps(column), { style: { width: column.width } }), column.headerName)))),
|
53
33
|
React.createElement(Table.Body, null,
|
54
34
|
React.createElement(List, { items: sortedRows, renderItem: (row, index) => (React.createElement(Table.Row, { key: row.id },
|
55
|
-
React.createElement(List, { items: columns, renderItem: (column) =>
|
56
|
-
React.createElement(StatusChip, Object.assign({ dense: true }, column.status(row, index, sortedRows))))) :
|
57
|
-
React.createElement(SecondaryButton, Object.assign({ dense: true }, renameProperty('text', 'children', column.action(row, index, sortedRows)))))) :
|
35
|
+
React.createElement(List, { items: columns, renderItem: (column) => column.type === 'status' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)),
|
36
|
+
React.createElement(StatusChip, Object.assign({ dense: true }, column.status(row, index, sortedRows))))) : column.type === 'action' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)),
|
37
|
+
React.createElement(SecondaryButton, Object.assign({ dense: true }, renameProperty('text', 'children', column.action(row, index, sortedRows)))))) : column.type === 'custom' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows))) : column.type === 'item' ? (React.createElement(Table.Cell, Object.assign({}, cellProps(column)),
|
38
|
+
React.createElement(Item, Object.assign({}, column.item(row, index, sortedRows))))) : (React.createElement(Table.Cell, Object.assign({}, cellProps(column)), column.formatter
|
58
39
|
? column.formatter(row[column.field], row, index, sortedRows)
|
59
40
|
: row[column.field])) }))) }))));
|
60
41
|
};
|
61
|
-
//# sourceMappingURL=data:application/json;base64,
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0YVRhYmxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRGF0YVRhYmxlL0RhdGFUYWJsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxLQUFLLEVBQWMsTUFBTSw0QkFBNEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDOUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDbEQsT0FBTyxPQUFPLE1BQU0sZ0JBQWdCLENBQUM7QUFDckMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3RDLE9BQU8sRUFBaUMsZUFBZSxFQUFFLFNBQVMsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ2xHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQXlCNUQsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLENBQXlCLEVBTTlCLEVBQWUsRUFBRTtRQU5hLEVBQ2hELE9BQU8sRUFDUCxJQUFJLEVBQ0osTUFBTSxHQUFHLEtBQUssRUFDZCxNQUFNLEdBQUcsTUFBTSxPQUVHLEVBRGYsSUFBSSxjQUx5Qyx1Q0FNakQsQ0FEUTtJQUVQLE1BQU0sQ0FBQyxJQUFJLEVBQUUsVUFBVSxDQUFDLEdBQUcsWUFBWSxFQUFLLENBQUM7SUFDN0MsTUFBTSxVQUFVLEdBQUcsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxHQUFH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
|
@@ -84,4 +84,4 @@ const DropdownItem = (_a) => {
|
|
84
84
|
};
|
85
85
|
Dropdown.Menu = DropdownMenu;
|
86
86
|
Dropdown.Item = DropdownItem;
|
87
|
-
//# sourceMappingURL=data:application/json;base64,
|
87
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJvcGRvd24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ecm9wZG93bi9Ecm9wZG93bi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxPQUFPLEVBQWdCLE1BQU0sZ0NBQWdDLENBQUM7QUFDdkUsT0FBTyxFQUFFLE9BQU8sRUFBb0IsTUFBTSxnQ0FBZ0MsQ0FBQztBQUMzRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQXlCMUUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUdqQixDQUFDLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxTQUFTLEdBQUcsYUFBYSxFQUFFLEVBQUUsRUFBRTtJQUN2RCxPQUFPLENBQ0wsb0JBQUMsT0FBTyxJQUFDLElBQUksRUFBQyxNQUFNLEVBQUMsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsSUFBSTtRQUN4RCxvQkFBQyxPQUFPLENBQUMsT0FBTyxRQUFFLFFBQVEsQ0FBbUI7UUFDN0Msb0JBQUMsT0FBTyxDQUFDLEtBQUssUUFBRSxPQUFPLENBQWlCLENBQ2hDLENBQ1gsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGOztHQUVHO0FBQ0gsTUFBTSxZQUFZLEdBQWdDLENBQUMsRUFDakQsS0FBSyxFQUNMLFFBQVEsRUFDUixTQUFTLEVBQ1QsU0FBUyxFQUNULFFBQVEsR0FBRyxHQUFHLEVBQUUsQ0FBQyxTQUFTLEdBQzNCLEVBQUUsRUFBRTtJQUNILE1BQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQW1CLElBQUksQ0FBQyxDQUFDO0lBQ3JELEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ25CLE1BQU0sRUFBRSxHQUFHLFVBQVUsQ0FB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
|
@@ -89,6 +89,14 @@ export declare type DropdownMenuProps = {
|
|
89
89
|
* Max width for menu.
|
90
90
|
*/
|
91
91
|
maxWidth?: number;
|
92
|
+
/**
|
93
|
+
* Optional header which is displayed at the top of menu.
|
94
|
+
*/
|
95
|
+
header?: React.ReactNode;
|
96
|
+
/**
|
97
|
+
* Optional footer which is displayed at the bottom of menu.
|
98
|
+
*/
|
99
|
+
footer?: React.ReactNode;
|
92
100
|
/**
|
93
101
|
* Dropdown menu items.
|
94
102
|
*/
|
@@ -26,7 +26,7 @@ import { isComponentType } from '../../../types/utils';
|
|
26
26
|
import { SearchInput } from '../../../src/components/Input/Input';
|
27
27
|
import { filterCollection } from './utils';
|
28
28
|
export const DropdownMenu = (_a) => {
|
29
|
-
var { onAction, selectionMode, selection, onSelectionChange, placement = 'bottom-left', minWidth, maxWidth, searchable = false, emptyState, children } = _a, props = __rest(_a, ["onAction", "selectionMode", "selection", "onSelectionChange", "placement", "minWidth", "maxWidth", "searchable", "emptyState", "children"]);
|
29
|
+
var { onAction, selectionMode, selection, onSelectionChange, placement = 'bottom-left', minWidth, maxWidth, searchable = false, emptyState, header, footer, children } = _a, props = __rest(_a, ["onAction", "selectionMode", "selection", "onSelectionChange", "placement", "minWidth", "maxWidth", "searchable", "emptyState", "header", "footer", "children"]);
|
30
30
|
const triggerRef = React.useRef(null);
|
31
31
|
const overlayRef = React.useRef(null);
|
32
32
|
const [trigger, items] = extractTriggerAndItems(children);
|
@@ -43,7 +43,7 @@ export const DropdownMenu = (_a) => {
|
|
43
43
|
React.createElement(PressResponder, Object.assign({ ref: triggerRef, onPress: () => state.toggle() }, menuTriggerProps),
|
44
44
|
React.createElement(TriggerWrapper, null, trigger.props.children)),
|
45
45
|
React.createElement(PopoverWrapper, Object.assign({ ref: overlayRef, isDismissable: true, autoFocus: true, containFocus: true, isOpen: state.isOpen, onClose: state.close }, overlayProps),
|
46
|
-
React.createElement(MenuWrapper, Object.assign({ onAction: onAction, selectionMode: selectionMode, selection: selection, onSelectionChange: onSelectionChange, searchable: searchable, emptyState: emptyState, minWidth: minWidth, maxWidth: maxWidth }, menuProps), items.props.children))));
|
46
|
+
React.createElement(MenuWrapper, Object.assign({ onAction: onAction, selectionMode: selectionMode, selection: selection, onSelectionChange: onSelectionChange, searchable: searchable, emptyState: emptyState, minWidth: minWidth, maxWidth: maxWidth, header: header, footer: footer }, menuProps), items.props.children))));
|
47
47
|
};
|
48
48
|
const MenuTrigger = () => null;
|
49
49
|
const MenuItems = () => null;
|
@@ -66,7 +66,7 @@ const TriggerWrapper = (_a) => {
|
|
66
66
|
const isSectionNode = (item) => item.type === 'section';
|
67
67
|
const isItemNode = (item) => item.type === 'item';
|
68
68
|
const MenuWrapper = (_a) => {
|
69
|
-
var { selection: selectedKeys, minWidth, maxWidth, searchable, emptyState } = _a, props = __rest(_a, ["selection", "minWidth", "maxWidth", "searchable", "emptyState"]);
|
69
|
+
var { selection: selectedKeys, minWidth, maxWidth, searchable, emptyState, header, footer } = _a, props = __rest(_a, ["selection", "minWidth", "maxWidth", "searchable", "emptyState", "header", "footer"]);
|
70
70
|
const ref = React.useRef(null);
|
71
71
|
const disabledKeys = getDisabledItemKeys(props.children);
|
72
72
|
const state = useTreeState(Object.assign({ disabledKeys,
|
@@ -76,17 +76,20 @@ const MenuWrapper = (_a) => {
|
|
76
76
|
const [search, setSearch] = React.useState('');
|
77
77
|
const filteredCollection = React.useMemo(() => (searchable ? filterCollection(state.collection, search, contains) : state.collection), [state.collection, search, contains]);
|
78
78
|
return (React.createElement(Base, { minWidth: minWidth !== undefined ? `${minWidth}px` : undefined, maxWidth: maxWidth !== undefined ? `${maxWidth}px` : undefined },
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
79
|
+
header,
|
80
|
+
React.createElement(Base.ContentContainer, null,
|
81
|
+
searchable && (React.createElement(SearchInput, { "aria-label": "search", value: search, onChange: (e) => setSearch(e.target.value), className: tw('mb-5') })),
|
82
|
+
filteredCollection.size === 0 && emptyState && (React.createElement(Base.EmptyStateContainer, null, emptyState)),
|
83
|
+
React.createElement(Base.List, Object.assign({ ref: ref }, menuProps), Array.from(filteredCollection).map((item) => {
|
84
|
+
// For some reason the inverse of this typeguard is not working hence the specfic check.
|
85
|
+
if (isSectionNode(item)) {
|
86
|
+
return React.createElement(SectionWrapper, { key: item.key, section: item, state: state });
|
87
|
+
}
|
88
|
+
else if (isItemNode(item)) {
|
89
|
+
return React.createElement(ItemWrapper, { key: item.key, item: item, state: state });
|
90
|
+
}
|
91
|
+
}))),
|
92
|
+
footer));
|
90
93
|
};
|
91
94
|
const ItemWrapper = ({ item, state }) => {
|
92
95
|
const ref = React.useRef(null);
|
@@ -138,4 +141,4 @@ const getDisabledItemKeys = (children) => {
|
|
138
141
|
});
|
139
142
|
return keys.flat().filter((key) => key !== null);
|
140
143
|
};
|
141
|
-
//# sourceMappingURL=data:application/json;base64,
|
144
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJvcGRvd25NZW51LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRHJvcGRvd25NZW51L0Ryb3Bkb3duTWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDM0QsT0FBTyxFQUFFLFlBQVksRUFBYSxNQUFNLHFCQUFxQixDQUFDO0FBQzlELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBVzFELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxjQUFjLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxjQUFjLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUN4RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDckQsT0FBTyxFQUFFLFFBQVEsRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDL0MsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUN2RSxPQUFPLEVBQUUsWUFBWSxJQUFJLElBQUksRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFOUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBR3pELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQWtJ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
|
@@ -19,7 +19,7 @@ export const Section = ({ title, subtitle, actions, children }) => (React.create
|
|
19
19
|
React.createElement(BaseSection.Header, null,
|
20
20
|
React.createElement(BaseSection.TitleContainer, null,
|
21
21
|
React.createElement(BaseSection.Title, null, title),
|
22
|
-
React.createElement(BaseSection.Subtitle, null, subtitle)),
|
22
|
+
subtitle && React.createElement(BaseSection.Subtitle, null, subtitle)),
|
23
23
|
React.createElement(BaseSection.Actions, null, actions &&
|
24
24
|
castArray(actions)
|
25
25
|
.filter(Boolean)
|
@@ -29,4 +29,4 @@ export const Section = ({ title, subtitle, actions, children }) => (React.create
|
|
29
29
|
}))),
|
30
30
|
React.createElement(Divider, null))),
|
31
31
|
React.createElement(BaseSection.Body, null, children)));
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NlY3Rpb24vU2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE9BQU8sSUFBSSxXQUFXLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDL0QsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRXpELE9BQU8sU0FBUyxNQUFNLGtCQUFrQixDQUFDO0FBcUJ6QyxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQTJCLENBQUMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDekYsb0JBQUMsV0FBVztJQUNULEtBQUssSUFBSSxDQUNSO1FBQ0Usb0JBQUMsV0FBVyxDQUFDLE1BQU07WUFDakIsb0JBQUMsV0FBVyxDQUFDLGNBQWM7Z0JBQ3pCLG9CQUFDLFdBQVcsQ0FBQyxLQUFLLFFBQUUsS0FBSyxDQUFxQjtnQkFDN0MsUUFBUSxJQUFJLG9CQUFDLFdBQVcsQ0FBQyxRQUFRLFFBQUUsUUFBUSxDQUF3QixDQUN6QztZQUM3QixvQkFBQyxXQUFXLENBQUMsT0FBTyxRQUNqQixPQUFPO2dCQUNOLFNBQVMsQ0FBQyxPQUFPLENBQUM7cUJBQ2YsTUFBTSxDQUFDLE9BQU8sQ0FBQztxQkFDZixHQUFHLENBQUMsQ0FBQyxFQUFtQixFQUFFLEVBQUU7d0JBQXZCLEVBQUUsSUFBSSxPQUFhLEVBQVIsTUFBTSxjQUFqQixRQUFtQixDQUFGO29CQUFPLE9BQUEsQ0FDNUIsb0JBQUMsZUFBZSxrQkFBQyxHQUFHLEVBQUUsSUFBSSxJQUFNLE1BQU0sR0FDbkMsSUFBSSxDQUNXLENBQ25CLENBQUE7aUJBQUEsQ0FBQyxDQUNjLENBQ0g7UUFDckIsb0JBQUMsT0FBTyxPQUFHLENBQ1YsQ0FDSjtJQUNELG9CQUFDLFdBQVcsQ0FBQyxJQUFJLFFBQUUsUUFBUSxDQUFvQixDQUNuQyxDQUNmLENBQUMifQ==
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
12
12
|
import React from 'react';
|
13
13
|
import { tw } from '../../../src/utils/tailwind';
|
14
14
|
import { Table as BaseTable } from '../../../src/common/Table/Table';
|
15
|
-
import { useScrollTarget } from '../../../src/
|
15
|
+
import { useScrollTarget } from '../../../src/utils/table/useScrollTarget';
|
16
16
|
export const Table = (_a) => {
|
17
17
|
var { children, onPrev, onNext } = _a, rest = __rest(_a, ["children", "onPrev", "onNext"]);
|
18
18
|
const bottomRef = useScrollTarget(onNext);
|
@@ -28,4 +28,4 @@ Table.Row = BaseTable.Row;
|
|
28
28
|
Table.Cell = BaseTable.Cell;
|
29
29
|
Table.SortCell = BaseTable.SortCell;
|
30
30
|
Table.SelectCell = BaseTable.SelectCell;
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFibGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9UYWJsZS9UYWJsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxLQUFLLElBQUksU0FBUyxFQUFnQyxNQUFNLHdCQUF3QixDQUFDO0FBQzFGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQU9sRSxNQUFNLENBQUMsTUFBTSxLQUFLLEdBT2QsQ0FBQyxFQUFxQyxFQUFFLEVBQUU7UUFBekMsRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLE1BQU0sT0FBVyxFQUFOLElBQUksY0FBbkMsZ0NBQXFDLENBQUY7SUFDdEMsTUFBTSxTQUFTLEdBQUcsZUFBZSxDQUFpQixNQUFNLENBQUMsQ0FBQztJQUMxRCxNQUFNLE1BQU0sR0FBRyxlQUFlLENBQWlCLE1BQU0sQ0FBQyxDQUFDO0lBQ3ZELE9BQU8sQ0FDTCw2QkFBSyxTQUFTLEVBQUUsaUJBQWlCO1FBQy9CLDZCQUFLLEdBQUcsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLEVBQUUsQ0FBQyxpREFBaUQsQ0FBQyxHQUFJO1FBQ3RGLG9CQUFDLFNBQVMsb0JBQUssSUFBSSxHQUFHLFFBQVEsQ0FBYTtRQUMzQyw2QkFBSyxHQUFHLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxFQUFFLENBQUMsb0RBQW9ELENBQUMsR0FBSSxDQUN4RixDQUNQLENBQUM7QUFDSixDQUFDLENBQUM7QUFFRixLQUFLLENBQUMsSUFBSSxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUM7QUFDNUIsS0FBSyxDQUFDLElBQUksR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDO0FBQzVCLEtBQUssQ0FBQyxHQUFHLEdBQUcsU0FBUyxDQUFDLEdBQUcsQ0FBQztBQUMxQixLQUFLLENBQUMsSUFBSSxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUM7QUFDNUIsS0FBSyxDQUFDLFFBQVEsR0FBRyxTQUFTLENBQUMsUUFBUSxDQUFDO0FBQ3BDLEtBQUssQ0FBQyxVQUFVLEdBQUcsU0FBUyxDQUFDLFVBQVUsQ0FBQyJ9
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import twTheme from '../../../tailwind.theme.json';
|
3
|
-
declare type Weight = `${number}` | 'auto';
|
3
|
+
export declare type Weight = `${number}` | 'auto';
|
4
4
|
declare type TemplateProps = {
|
5
5
|
/**
|
6
6
|
* Provide a number for amount of columns. Columns created this way have equal weight.
|
@@ -10,9 +10,14 @@ declare type TemplateProps = {
|
|
10
10
|
* Array value of Weight is considered as a weight in relation to other columns.
|
11
11
|
*/
|
12
12
|
columns: Array<Weight | number> | number;
|
13
|
+
alignContent?: React.CSSProperties['alignContent'];
|
14
|
+
alignSelf?: React.CSSProperties['alignSelf'];
|
15
|
+
alignItems?: React.CSSProperties['alignItems'];
|
16
|
+
justifySelf?: React.CSSProperties['justifySelf'];
|
13
17
|
gap?: keyof typeof twTheme['gap'];
|
14
18
|
columnGap?: keyof typeof twTheme['gap'];
|
15
19
|
rowGap?: keyof typeof twTheme['gap'];
|
20
|
+
fullHeight?: boolean;
|
16
21
|
};
|
17
22
|
export declare const Template: React.FC<TemplateProps>;
|
18
23
|
export {};
|