pixelize-design-library 1.1.20 → 1.1.22
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/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts +6 -0
- package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts +1 -1
- package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +14 -14
- package/dist/Components/KaTable/CustomHeader.d.ts +1 -1
- package/dist/Components/KaTable/CustomHeader.js +23 -23
- package/dist/Components/KaTable/KaTable.d.ts +1 -1
- package/dist/Components/KaTable/KaTable.js +3 -2
- package/dist/Components/KaTable/KaTableProps.d.ts +1 -0
- package/dist/Components/KaTable/SelectionCell.js +9 -6
- package/dist/Components/KaTable/SelectionHeader.js +5 -4
- package/dist/Components/KaTable/useMergedChildComponents.d.ts +1 -1
- package/dist/Components/KaTable/useMergedChildComponents.js +29 -6
- package/dist/Components/MultiSelect/MultiSelect.js +6 -19
- package/dist/Components/NavigationBar/NavigationBar.js +0 -4
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +12 -10
- package/dist/Components/SelectSearch/SelectSearch.d.ts +1 -1
- package/dist/Components/SelectSearch/SelectSearch.js +499 -28
- package/dist/Components/SelectSearch/SelectSearchProps.d.ts +6 -4
- package/dist/Pages/KaTableExample.js +27 -18
- package/dist/Pages/selectSearch.d.ts +2 -2
- package/dist/Pages/selectSearch.js +36 -9
- package/dist/Theme/Default/fonts.d.ts +35 -0
- package/dist/Theme/Default/fonts.js +37 -0
- package/dist/index.d.ts +0 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/Pages/katable.d.ts +0 -3
- package/dist/Pages/katable.js +0 -194
|
@@ -10,4 +10,10 @@ export type ButtonGroupIconProps = {
|
|
|
10
10
|
size?: "lg" | "md" | "sm" | "xs";
|
|
11
11
|
variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
|
|
12
12
|
color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
|
|
13
|
+
buttonGroupStyle?: React.CSSProperties;
|
|
14
|
+
buttonGroupLeftIconStyle?: React.CSSProperties;
|
|
15
|
+
buttonGroupRightIconStyle?: React.CSSProperties;
|
|
16
|
+
buttonStyle?: React.CSSProperties;
|
|
17
|
+
onBlurLeftIcon?: () => void;
|
|
18
|
+
onBlurRightIcon?: () => void;
|
|
13
19
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
|
|
3
|
-
export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, }: ButtonGroupIconProps): React.JSX.Element;
|
|
3
|
+
export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, }: ButtonGroupIconProps): React.JSX.Element;
|
|
@@ -7,26 +7,26 @@ var react_1 = __importDefault(require("react"));
|
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
9
9
|
function ButtonGroupIcon(_a) {
|
|
10
|
-
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color;
|
|
10
|
+
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon;
|
|
11
11
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
12
|
-
return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color },
|
|
13
|
-
leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick, sx: {
|
|
12
|
+
return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle },
|
|
13
|
+
leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: {
|
|
14
14
|
backgroundColor: theme.colors.primary[500],
|
|
15
|
-
|
|
16
|
-
backgroundColor: theme.colors.primary[400]
|
|
17
|
-
}
|
|
15
|
+
"&:hover": {
|
|
16
|
+
backgroundColor: theme.colors.primary[400],
|
|
17
|
+
},
|
|
18
18
|
} })),
|
|
19
|
-
react_1.default.createElement(react_2.Button, { onClick: onButtonClick, sx: {
|
|
19
|
+
react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, sx: {
|
|
20
20
|
backgroundColor: theme.colors.primary[500],
|
|
21
|
-
|
|
22
|
-
backgroundColor: theme.colors.primary[400]
|
|
23
|
-
}
|
|
21
|
+
"&:hover": {
|
|
22
|
+
backgroundColor: theme.colors.primary[400],
|
|
23
|
+
},
|
|
24
24
|
} }, buttonText),
|
|
25
|
-
rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, sx: {
|
|
25
|
+
rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
|
|
26
26
|
backgroundColor: theme.colors.primary[500],
|
|
27
|
-
|
|
28
|
-
backgroundColor: theme.colors.primary[400]
|
|
29
|
-
}
|
|
27
|
+
"&:hover": {
|
|
28
|
+
backgroundColor: theme.colors.primary[400],
|
|
29
|
+
},
|
|
30
30
|
} }))));
|
|
31
31
|
}
|
|
32
32
|
exports.default = ButtonGroupIcon;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const CustomHeader: ({ column, onSortChange, onMenuItemClick, menuItems, }: any) => React.JSX.Element;
|
|
2
|
+
declare const CustomHeader: ({ column, onSortChange, onMenuItemClick, menuItems, columnVisibility, }: any) => React.JSX.Element;
|
|
3
3
|
export default CustomHeader;
|
|
@@ -29,7 +29,8 @@ var bs_1 = require("react-icons/bs");
|
|
|
29
29
|
var fa_1 = require("react-icons/fa");
|
|
30
30
|
var fi_1 = require("react-icons/fi");
|
|
31
31
|
var CustomHeader = function (_a) {
|
|
32
|
-
var column = _a.column, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems;
|
|
32
|
+
var column = _a.column, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, columnVisibility = _a.columnVisibility;
|
|
33
|
+
// console.log(columnVisibility, "columnVisibility");
|
|
33
34
|
var _b = (0, react_1.useState)(false), isSubmenuOpen = _b[0], setSubmenuOpen = _b[1];
|
|
34
35
|
var _c = (0, react_1.useState)(null), submenuPosition = _c[0], setSubmenuPosition = _c[1];
|
|
35
36
|
var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
|
|
@@ -80,28 +81,27 @@ var CustomHeader = function (_a) {
|
|
|
80
81
|
alignItems: "center",
|
|
81
82
|
} },
|
|
82
83
|
react_1.default.createElement(fi_1.FiInfo, null),
|
|
83
|
-
menuItems &&
|
|
84
|
-
react_1.default.createElement(react_2.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
react_1.default.createElement(react_2.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
} }, subItem.label)); })))))); })))))),
|
|
84
|
+
menuItems && (react_1.default.createElement(react_2.Menu, null,
|
|
85
|
+
isOpen && (react_1.default.createElement(react_2.MenuButton, { ref: filterButtonRef, as: react_2.IconButton, "aria-label": "More options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", sx: {
|
|
86
|
+
_hover: {
|
|
87
|
+
background: "none",
|
|
88
|
+
},
|
|
89
|
+
_active: {
|
|
90
|
+
background: "none",
|
|
91
|
+
},
|
|
92
|
+
} })),
|
|
93
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
94
|
+
react_1.default.createElement(react_2.MenuList, { sx: {
|
|
95
|
+
boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
|
|
96
|
+
borderRadius: "8px",
|
|
97
|
+
padding: "8px",
|
|
98
|
+
backgroundColor: "white",
|
|
99
|
+
}, onMouseLeave: onClose }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
|
|
100
|
+
item.submenu ? (react_1.default.createElement(react_2.MenuItem, { closeOnSelect: false, onClick: handleSubmenuToggle }, item.label)) : (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleMenuItemClick(item.action); } }, item.label)),
|
|
101
|
+
isSubmenuOpen && item.submenu && submenuPosition && (react_1.default.createElement(react_2.Box, { position: "absolute", top: submenuPosition.top, left: submenuPosition.left, zIndex: 1, boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", borderRadius: "8px", backgroundColor: "white", padding: "8px", width: "200px" },
|
|
102
|
+
react_1.default.createElement(react_2.MenuGroup, { onMouseLeave: onClose }, item.submenu.map(function (subItem, subIndex) { return (react_1.default.createElement(react_2.MenuItem, { key: subIndex, closeOnSelect: true, onClick: function () {
|
|
103
|
+
return handleMenuItemClick(subItem.action);
|
|
104
|
+
} }, subItem.label)); })))))); }))))))),
|
|
105
105
|
react_1.default.createElement(react_2.Box, { sx: { position: "absolute", right: 20, top: 0 } }, isOpen && (react_1.default.createElement(react_2.Flex, { alignItems: "center" },
|
|
106
106
|
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", backgroundColor: "white", padding: sortState === "asc" ? "1px" : "2px", borderRadius: "10px", flexDirection: "column", width: "20px", height: "20px", onClick: handleSortClick, cursor: "pointer", boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
|
|
107
107
|
react_1.default.createElement(react_2.Box, { transition: "opacity 0.2s ease-in-out", opacity: sortState === "none" ? 1 : 0, position: "absolute" },
|
|
@@ -8,6 +8,6 @@ import * as TableFun from "ka-table";
|
|
|
8
8
|
import "ka-table/style.css";
|
|
9
9
|
import "./ka-table.css";
|
|
10
10
|
import { KaTableProps } from "./KaTableProps";
|
|
11
|
-
declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, onSortChange, onMenuItemClick, menuItems, selected, }: KaTableProps) => React.JSX.Element>;
|
|
11
|
+
declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, onSortChange, onMenuItemClick, menuItems, selected, columnVisibility, }: KaTableProps) => React.JSX.Element>;
|
|
12
12
|
export default _default;
|
|
13
13
|
export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };
|
|
@@ -57,13 +57,14 @@ var KaTable = function (_a) {
|
|
|
57
57
|
// sorting,
|
|
58
58
|
format = _a.format,
|
|
59
59
|
// paging,
|
|
60
|
-
filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, selected = _a.selected;
|
|
60
|
+
filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, selected = _a.selected, columnVisibility = _a.columnVisibility;
|
|
61
61
|
if (checkSelect &&
|
|
62
62
|
!columns.some(function (column) { return column.key === "select-cell"; })) {
|
|
63
63
|
columns.unshift(selectionCellColumn);
|
|
64
64
|
}
|
|
65
65
|
var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
|
|
66
|
-
var
|
|
66
|
+
var columnVisibilitys = columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : false;
|
|
67
|
+
var mergedChildComponents = (0, useMergedChildComponents_1.default)(childComponents, onSortChange, onMenuItemClick, menuItems, onSelectionChange, rowKey, onRowClick, selected, dataLength, columns, columnVisibilitys);
|
|
67
68
|
return (react_1.default.createElement(ka_table_1.Table, { columns: columns, data: data, rowKeyField: rowKey, editingMode: Edit,
|
|
68
69
|
// sortingMode={sorting}
|
|
69
70
|
format: format,
|
|
@@ -21,13 +21,16 @@ var SelectionCell = function (_a) {
|
|
|
21
21
|
if (event.nativeEvent.shiftKey) {
|
|
22
22
|
table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
|
|
23
23
|
}
|
|
24
|
-
else if (event.currentTarget.checked) {
|
|
25
|
-
onSelectionChange(rowKeyValue, "add");
|
|
26
|
-
table.selectRow(rowKeyValue);
|
|
27
|
-
}
|
|
28
24
|
else {
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
var isChecked = event.currentTarget.checked;
|
|
26
|
+
var action = isChecked ? "add" : "remove";
|
|
27
|
+
onSelectionChange(rowKeyValue, action);
|
|
28
|
+
if (isChecked) {
|
|
29
|
+
table.selectRow(rowKeyValue);
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
table.deselectRow(rowKeyValue);
|
|
33
|
+
}
|
|
31
34
|
}
|
|
32
35
|
};
|
|
33
36
|
return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle });
|
|
@@ -39,13 +39,14 @@ var SelectionHeader = function (_a) {
|
|
|
39
39
|
}, [onSelectionChange]);
|
|
40
40
|
return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: selected === null || selected === void 0 ? void 0 : selected.checked, onChange: function (event) {
|
|
41
41
|
var _a, _b;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
var isChecked = event.currentTarget.checked;
|
|
43
|
+
var action = isChecked ? "add" : "remove";
|
|
44
|
+
var totalIds = isChecked ? (_b = (_a = table === null || table === void 0 ? void 0 : table.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row[rowKey]; }) : [];
|
|
45
|
+
handleSelectionChange(totalIds);
|
|
46
|
+
if (isChecked) {
|
|
45
47
|
table.selectAllFilteredRows();
|
|
46
48
|
}
|
|
47
49
|
else {
|
|
48
|
-
handleSelectionChange([]);
|
|
49
50
|
table.deselectAllFilteredRows();
|
|
50
51
|
}
|
|
51
52
|
} }));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const useMergedChildComponents: (childComponents: any, onSortChange: any, onMenuItemClick: any, menuItems: any, handleSelection: any, rowKey: any, onRowClick: any, selected: any, dataLength: number) => any;
|
|
1
|
+
declare const useMergedChildComponents: (childComponents: any, onSortChange: any, onMenuItemClick: any, menuItems: any, handleSelection: any, rowKey: any, onRowClick: any, selected: any, dataLength: number, columns: any, columnVisibility: boolean) => any;
|
|
2
2
|
export default useMergedChildComponents;
|
|
@@ -50,6 +50,7 @@ var react_1 = __importStar(require("react"));
|
|
|
50
50
|
var CustomHeader_1 = __importDefault(require("./CustomHeader"));
|
|
51
51
|
var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
|
|
52
52
|
var SelectionCell_1 = __importDefault(require("./SelectionCell"));
|
|
53
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
53
54
|
var getPreviousColumnWidth = function (columns, key) {
|
|
54
55
|
var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
|
|
55
56
|
if (index > 0) {
|
|
@@ -57,11 +58,15 @@ var getPreviousColumnWidth = function (columns, key) {
|
|
|
57
58
|
}
|
|
58
59
|
return 0;
|
|
59
60
|
};
|
|
60
|
-
var useMergedChildComponents = function (childComponents, onSortChange, onMenuItemClick, menuItems, handleSelection, rowKey, onRowClick, selected, dataLength) {
|
|
61
|
+
var useMergedChildComponents = function (childComponents, onSortChange, onMenuItemClick, menuItems, handleSelection, rowKey, onRowClick, selected, dataLength, columns, columnVisibility) {
|
|
61
62
|
var _a = react_1.default.useState(selected), selections = _a[0], setSelections = _a[1];
|
|
63
|
+
(0, react_1.useEffect)(function () {
|
|
64
|
+
setSelections(selected);
|
|
65
|
+
}, [selected]);
|
|
66
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
62
67
|
var isAllSelected = (0, react_1.useMemo)(function () {
|
|
63
68
|
return {
|
|
64
|
-
checked: (selections === null || selections === void 0 ? void 0 : selections.length) === dataLength,
|
|
69
|
+
checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
|
|
65
70
|
intederminate: (selections === null || selections === void 0 ? void 0 : selections.length) > 0 && (selections === null || selections === void 0 ? void 0 : selections.length) < dataLength,
|
|
66
71
|
};
|
|
67
72
|
}, [selections, dataLength]);
|
|
@@ -83,7 +88,22 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
|
|
|
83
88
|
handleSelection(values);
|
|
84
89
|
}, [selections]);
|
|
85
90
|
return (0, react_1.useMemo)(function () {
|
|
86
|
-
return __assign(__assign({}, childComponents), {
|
|
91
|
+
return __assign(__assign({}, childComponents), { dataRow: {
|
|
92
|
+
elementAttributes: function (props) {
|
|
93
|
+
var _a;
|
|
94
|
+
var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
|
|
95
|
+
var attributes = existingElementAttributes
|
|
96
|
+
? existingElementAttributes(props)
|
|
97
|
+
: {};
|
|
98
|
+
var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
|
|
99
|
+
var className = "".concat(attributes.className || "", " ").concat(isSelected ? "ka-row-selected" : "", " ka-row-hover").trim();
|
|
100
|
+
// const className =
|
|
101
|
+
// `${attributes.className || ""} ${isSelected ? "ka-row-selected" : ""}`.trim();
|
|
102
|
+
return __assign(__assign({}, attributes), { className: className, style: __assign(__assign({}, (attributes.style || {})), { backgroundColor: isSelected
|
|
103
|
+
? theme.colors.backgroundColor.subtle
|
|
104
|
+
: undefined }) });
|
|
105
|
+
},
|
|
106
|
+
}, headCell: {
|
|
87
107
|
content: function (props) {
|
|
88
108
|
var _a;
|
|
89
109
|
var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
|
|
@@ -95,7 +115,7 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
|
|
|
95
115
|
}
|
|
96
116
|
if (props.column.customHeader === undefined ||
|
|
97
117
|
props.column.customHeader === true) {
|
|
98
|
-
return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: onSortChange, onMenuItemClick: onMenuItemClick, menuItems: menuItems })));
|
|
118
|
+
return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: onSortChange, onMenuItemClick: onMenuItemClick, menuItems: menuItems, columnVisibility: columnVisibility })));
|
|
99
119
|
}
|
|
100
120
|
if (props.column.key === "select-cell") {
|
|
101
121
|
return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
|
|
@@ -111,7 +131,7 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
|
|
|
111
131
|
}
|
|
112
132
|
}
|
|
113
133
|
if (props.column.columnFreeze) {
|
|
114
|
-
var stickyLeft = getPreviousColumnWidth(
|
|
134
|
+
var stickyLeft = getPreviousColumnWidth(columns, props.column.key);
|
|
115
135
|
return {
|
|
116
136
|
style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db", textAlign: "center" }),
|
|
117
137
|
};
|
|
@@ -128,7 +148,7 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
|
|
|
128
148
|
}
|
|
129
149
|
}
|
|
130
150
|
if (props.column.columnFreeze) {
|
|
131
|
-
var stickyLeft = getPreviousColumnWidth(
|
|
151
|
+
var stickyLeft = getPreviousColumnWidth(columns, props.column.key);
|
|
132
152
|
return {
|
|
133
153
|
style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: "#d9d9db" }),
|
|
134
154
|
};
|
|
@@ -154,6 +174,7 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
|
|
|
154
174
|
}
|
|
155
175
|
}
|
|
156
176
|
if (props.column.key === "select-cell") {
|
|
177
|
+
// console.log("CELLL", selections, props.rowData[rowKey]);
|
|
157
178
|
var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
|
|
158
179
|
return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
|
|
159
180
|
}
|
|
@@ -167,6 +188,8 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
|
|
|
167
188
|
handleSelection,
|
|
168
189
|
rowKey,
|
|
169
190
|
onRowClick,
|
|
191
|
+
selections,
|
|
192
|
+
columnVisibility,
|
|
170
193
|
]);
|
|
171
194
|
};
|
|
172
195
|
exports.default = useMergedChildComponents;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
3
|
if (k2 === undefined) k2 = k;
|
|
8
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -35,17 +31,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
35
31
|
}
|
|
36
32
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
37
33
|
};
|
|
38
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
39
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
40
|
-
};
|
|
41
34
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
42
35
|
var react_1 = __importStar(require("react"));
|
|
43
|
-
var
|
|
44
|
-
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n padding: 5px;\n background-color: white;\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"], ["\n width: 100%;\n border-radius: 4px;\n padding: 5px;\n background-color: white;\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"])));
|
|
45
|
-
var SelectedItems = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"])));
|
|
46
|
-
var Chip = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n background-color: #e0e0e0;\n border-radius: 16px;\n padding: 5px 10px;\n"], ["\n display: flex;\n align-items: center;\n background-color: #e0e0e0;\n border-radius: 16px;\n padding: 5px 10px;\n"])));
|
|
47
|
-
var CloseButton = styled_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: 5px;\n cursor: pointer;\n font-weight: bold;\n"], ["\n margin-left: 5px;\n cursor: pointer;\n font-weight: bold;\n"])));
|
|
48
|
-
var Input = styled_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n border: none;\n outline: none;\n margin-left: 5px;\n"], ["\n flex: 1;\n border: none;\n outline: none;\n margin-left: 5px;\n"])));
|
|
36
|
+
var react_2 = require("@chakra-ui/react");
|
|
49
37
|
var generateUniqueId = (function () {
|
|
50
38
|
var counter = 0;
|
|
51
39
|
return function () {
|
|
@@ -89,11 +77,10 @@ function MultiSelect(_a) {
|
|
|
89
77
|
setOptions(updatedOptions);
|
|
90
78
|
onValueChange(updatedOptions);
|
|
91
79
|
};
|
|
92
|
-
return (react_1.default.createElement(
|
|
93
|
-
react_1.default.createElement(
|
|
94
|
-
option.label,
|
|
95
|
-
react_1.default.createElement(
|
|
96
|
-
react_1.default.createElement(Input, { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Type and press enter" })));
|
|
80
|
+
return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "md", padding: "2", backgroundColor: "white" },
|
|
81
|
+
react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2 }, options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", variant: "solid", colorScheme: "gray" },
|
|
82
|
+
react_1.default.createElement(react_2.TagLabel, null, option.label),
|
|
83
|
+
react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); })),
|
|
84
|
+
react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Type and press enter", marginTop: 2, marginLeft: 1 })));
|
|
97
85
|
}
|
|
98
86
|
exports.default = MultiSelect;
|
|
99
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
var react_1 = __importDefault(require("react"));
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
9
|
-
var io_1 = require("react-icons/io");
|
|
10
9
|
function NavBar(_a) {
|
|
11
10
|
var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText;
|
|
12
11
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
@@ -17,9 +16,6 @@ function NavBar(_a) {
|
|
|
17
16
|
react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 7 },
|
|
18
17
|
react_1.default.createElement(react_2.Menu, null,
|
|
19
18
|
react_1.default.createElement(react_2.Box, { mt: "0.4rem", cursor: "pointer" }, moreIcon),
|
|
20
|
-
react_1.default.createElement(react_2.Box, { mt: "0.4rem", cursor: "pointer", position: "relative" },
|
|
21
|
-
react_1.default.createElement(io_1.IoMdNotificationsOutline, { fontSize: 20 }),
|
|
22
|
-
react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", width: "8px", height: "8px", bg: theme.colors.primary[600], borderRadius: "full" })),
|
|
23
19
|
react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
|
|
24
20
|
react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
|
|
25
21
|
react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5 },
|
|
@@ -79,16 +79,18 @@ function ProfilePhotoViewer(_a) {
|
|
|
79
79
|
opacity: 0,
|
|
80
80
|
transition: "opacity 0.3s",
|
|
81
81
|
} },
|
|
82
|
-
isEditable && (react_1.default.createElement(react_2.
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
|
|
83
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(icons_1.EditIcon, null), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
|
|
84
|
+
transform: "scale(1.1)",
|
|
85
|
+
color: "blue.500",
|
|
86
|
+
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
|
|
87
|
+
} }))),
|
|
88
|
+
isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
|
|
89
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(icons_1.ViewIcon, null), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
|
|
90
|
+
transform: "scale(1.1)",
|
|
91
|
+
color: "blue.500",
|
|
92
|
+
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
|
|
93
|
+
} })))),
|
|
92
94
|
isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
|
|
93
95
|
}
|
|
94
96
|
exports.default = ProfilePhotoViewer;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SelectSearchProps } from "./SelectSearchProps";
|
|
3
|
-
export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, }: Readonly<SelectSearchProps>): React.JSX.Element;
|
|
3
|
+
export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;
|