@agilant/toga-blox 1.0.38 → 1.0.40
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SortArrowsProps } from "./types";
|
|
2
|
-
declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, }: SortArrowsProps<T> & {
|
|
2
|
+
declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, directionContainerClassNames, }: SortArrowsProps<T> & {
|
|
3
3
|
getFontAwesomeIconFn?: (iconName: string, iconStyle: string) => React.ReactElement | null;
|
|
4
4
|
}) => JSX.Element | null;
|
|
5
5
|
export default SortArrows;
|
|
@@ -10,7 +10,7 @@ const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSort
|
|
|
10
10
|
numberClassNames: "absolute text-xs top-1.5 right-0 left-0",
|
|
11
11
|
iconClassNames: "text-lg text-blue-400 relative hover:text-red-400",
|
|
12
12
|
numberSize: "text-xl",
|
|
13
|
-
}, }) => {
|
|
13
|
+
}, directionContainerClassNames = "z-[9989] bg-white rounded flex flex-col border-1 absolute top-6 w-32", }) => {
|
|
14
14
|
const containerRef = useRef(null);
|
|
15
15
|
const { showArrowContainer, handleParentClick, handleResetSort, handleClick, isActive, activeDirection, sortOrderNumber, setShowArrowContainer, } = useSortArrowsViewModel({
|
|
16
16
|
columnId: String(column.accessor),
|
|
@@ -26,7 +26,7 @@ const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSort
|
|
|
26
26
|
setShowArrowContainer(false);
|
|
27
27
|
onRequestClose?.();
|
|
28
28
|
};
|
|
29
|
-
return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${counterIcon.numberClassNames}`, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className:
|
|
29
|
+
return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${counterIcon.numberClassNames} ${activeDirection === "desc" && " pb-0.5"}`, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `${directionContainerClassNames} ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
|
|
30
30
|
renderPortalOverlay &&
|
|
31
31
|
renderPortalOverlay(handleClose)] }));
|
|
32
32
|
};
|
|
@@ -36,6 +36,6 @@ export const WithOverlayAndIndexCount = {
|
|
|
36
36
|
numberClassNames: " absolute bottom-1.5 left-[10px] text-xs",
|
|
37
37
|
iconClassNames: "text-green-500 hover:text-red-400 text-2xl",
|
|
38
38
|
numberSize: " text-red-500 top-0",
|
|
39
|
-
}, column: column, setSortColumn: setSortColumn, slug: "products", renderPortalOverlay: (onClose) => (_jsx("div", { className: "absolute top-0 left-0 w-[300px] h-[300px] bg-black bg-opacity-50 flex items-center justify-center", onClick: onClose })) }) }));
|
|
39
|
+
}, column: column, setSortColumn: setSortColumn, slug: "products", renderPortalOverlay: (onClose) => (_jsx("div", { className: "absolute top-0 left-0 w-[300px] h-[300px] bg-black bg-opacity-50 flex items-center justify-center", onClick: onClose })), directionContainerClassNames: "absolute top-6 w-32 bg-white rounded flex flex-col border-1 z-[9989]" }) }));
|
|
40
40
|
},
|
|
41
41
|
};
|
|
@@ -15,6 +15,7 @@ export interface SortArrowsProps<T extends object> {
|
|
|
15
15
|
iconClassNames?: string;
|
|
16
16
|
numberSize?: string;
|
|
17
17
|
};
|
|
18
|
+
directionContainerClassNames?: string;
|
|
18
19
|
}
|
|
19
20
|
export interface CustomColumnInstance<T extends object> extends ColumnInstance<T> {
|
|
20
21
|
accessor: string | number | symbol | ((row: T) => any);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agilant/toga-blox",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.40",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -40,7 +40,6 @@
|
|
|
40
40
|
"react-select": "^5.10.0",
|
|
41
41
|
"react-table": "^7.8.0",
|
|
42
42
|
"react-table-sticky": "^1.1.3",
|
|
43
|
-
"sass": "^1.83.4",
|
|
44
43
|
"storybook-addon-react-router-v6": "^2.0.15",
|
|
45
44
|
"tslib": "^2.3.0"
|
|
46
45
|
},
|
|
@@ -70,6 +69,7 @@
|
|
|
70
69
|
"postcss": "^8.4.32",
|
|
71
70
|
"react-hook-form": "^7.43.9",
|
|
72
71
|
"react-router-dom": "^6.16.0",
|
|
72
|
+
"sass": "^1.84.0",
|
|
73
73
|
"storybook": "^7.6.6",
|
|
74
74
|
"tailwindcss": "^3.4.0",
|
|
75
75
|
"typescript": "^5.7.3",
|