slick-table 1.0.17 → 1.1.0

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/WithTableStyles.style.ts

@@ -0,0 +1,157 @@
+import { Box, styled } from "@mui/material";
+
+import { wink } from "../keyframes";
+
+const Wrapper = styled(Box)(({ theme }) => ({
+	"& .slick-container": {
+		userSelect: "none",
+		maxWidth: "100%",
+		height: "100%",
+		maxHeight: "100%",
+		color: theme.palette.text.primary,
+		borderColor: theme.palette.background.paper,
+		fontFamily: "inherit",
+		fontSize: "0.75rem",
+
+		"& .slick-header-column": {
+			"&.filter-active .slick-header-button::after": {
+				width: "7px",
+				height: "7px",
+				content: "''",
+				backgroundColor: "#2196f3",
+				position: "absolute",
+				borderRadius: "50%",
+				border: "2px solid #f8f8f8",
+				top: "3px",
+				right: "3px",
+			},
+			"&:not([data-id=_checkbox_selector]):not([data-id=isEdited])": {
+				"& .slick-column-name": {
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					maxWidth: "calc(100% - 16px)",
+				},
+			},
+			"&.slick-state-hover": {
+				"&.filter-active .slick-header-button::after": {
+					border: "2px solid #e8e8e8",
+				},
+				"& .slick-header-button": {
+					"&::before": {
+						backgroundColor: "#e8e8e8",
+					},
+				},
+			},
+			"& .slick-header-button": {
+				width: "19px",
+				height: "12px",
+				"&::before": {
+					position: "absolute",
+					content: "''",
+					width: "19px",
+					height: "12px",
+					top: "6px",
+					right: "5px",
+					backgroundImage:
+						"repeating-linear-gradient(0deg, #808080, #808080 2px, transparent 2px, transparent 4px)",
+					clipPath: "polygon(0% 0%, 100% 0%, 50% 110%)",
+					backgroundColor: "#f8f8f8",
+				},
+			},
+		},
+		"& .slick-viewport": {
+			backgroundColor: theme.palette.background.paper,
+			"& .grid-canvas": {
+				"& .ui-widget-content.slick-row": {
+					"&.even": {
+						backgroundColor: theme.palette.background.default,
+					},
+					// "&.odd": {
+					// 	backgroundColor: theme.palette.background.secondary,
+					// },
+					// "&:hover": {
+					// 	backgroundColor: theme.palette.background.row_hover,
+					// },
+					// "&.active": {
+					// 	backgroundColor: theme.palette.background.row_hover,
+					// },
+					"& .slick-cell": {
+						"&.active": {
+							// backgroundColor: theme.palette.background.row_hover,
+							borderColor: "#007bff",
+							"& input": {
+								// backgroundColor: theme.palette.background.row_hover,
+								color: theme.palette.text.primary,
+							},
+						},
+						"&.selected": {
+							// backgroundColor: theme.palette.background.cell_selected,
+							color: theme.palette.text.primary,
+						},
+						"&.text-right": {
+							textAlign: "right",
+						},
+						"&.bold": {
+							fontWeight: "bold",
+						},
+						"&.wink": {
+							animation: `${wink} infinite 0.5s linear`,
+							"& input": {
+								animation: `${wink} infinite 0.5s linear`,
+							},
+						},
+						"& input.editor-text": {
+							textAlign: "inherit",
+						},
+						"& select": {
+							color: theme.palette.text.primary,
+							backgroundColor: theme.palette.background.default,
+						},
+						"& #autocomplete": {
+							margin: 0,
+							padding: 0,
+							maxHeight: "300px",
+							width: "100%",
+							overflow: "auto",
+							backgroundColor: theme.palette.background.default,
+							fontSize: "12px",
+							boxShadow: "0 0 5px 1px gray",
+							"& div": {
+								"&:hover": {
+									// backgroundColor: theme.palette.background.row_hover,
+									cursor: "pointer",
+								},
+								"&.active": {
+									// backgroundColor: theme.palette.background.row_hover,
+								},
+								"& strong": {
+									color: "#007bff",
+								},
+							},
+						},
+					},
+				},
+			},
+		},
+
+		"& .slick-footerrow": {
+			backgroundColor: theme.palette.background.default,
+			borderTop: "1px solid silver",
+			"& .slick-footerrow-column": {
+				height: "100%",
+				display: "flex",
+				justifyContent: "flex-end",
+				alignItems: "center",
+				paddingRight: "5px",
+				borderBottom: "none",
+				fontWeight: "bold",
+				"&:last-child": {
+					borderRight: "none",
+				},
+			},
+		},
+	},
+}));
+
+export default { Wrapper };

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/WithTableStyles.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from "react";
+
+import Styled from "./WithTableStyles.style";
+
+export const WithTableStyles: FC<IProps> = ({ children }) => {
+	return <Styled.Wrapper>{children}</Styled.Wrapper>;
+};
+
+interface IProps {
+	children: ReactNode;
+}

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/index.ts

@@ -0,0 +1 @@
+export { WithTableStyles } from "./WithTableStyles";

package/src/shared/lib/slickgrid/ui/styles/index.ts

@@ -0,0 +1 @@
+export { WithTableStyles } from "./WithTableStyles";

package/src/shared/lib/slickgrid/ui/styles/keyframes/index.ts

@@ -0,0 +1 @@
+export { wink } from "./wink";

package/src/shared/lib/slickgrid/ui/styles/keyframes/wink.ts

@@ -0,0 +1,7 @@
+import { keyframes } from "@mui/material";
+
+export const wink = keyframes`
+  50% {
+    background-color: #ffb1b1;
+  }
+`;

package/src/shared/lib/sorting/Sort.ts

@@ -0,0 +1,31 @@
+import { getTime } from "../datetime";
+
+class Sort implements ISort {
+	emptyValue = "1/1/1970";
+	dates(a: string, b: string): number {
+		const value1 = getTime(a || this.emptyValue);
+		const value2 = getTime(b || this.emptyValue);
+		return value1 - value2;
+	}
+	numbers(a?: string | number | null, b?: string | number | null): number {
+		return Number(a || 0) - Number(b || 0);
+	}
+	strings(a?: string, b?: string): number {
+		if ((a || "").toLowerCase() > (b || "").toLowerCase()) return 1;
+		if ((a || "").toLowerCase() < (b || "").toLowerCase()) return -1;
+		return 0;
+	}
+	numbersWithSymbols(a?: string, b?: string): number {
+		const value1 = Number((a || "0").match(/^\d+/g)?.[0] || 0);
+		const value2 = Number((b || "0").match(/^\d+/g)?.[0] || 0);
+		return value2 - value1;
+	}
+}
+
+export const sort = new Sort();
+
+interface ISort {
+	strings(): number;
+	numbers(a?: string | number | null, b?: string | number | null): number;
+	dates(a: string, b: string): number;
+}

package/src/shared/lib/sorting/index.ts

@@ -0,0 +1 @@
+export { sort } from "./Sort";

package/src/shared/lib/stringCalculator/index.ts

@@ -0,0 +1,2 @@
+// @ts-ignore
+export { stringCalculator } from "./stringCalculator";