pixelize-design-library 2.1.76 → 2.2.1

package/dist/Components/KaTable/KaTableProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/KaTable/SelectionCell.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { TableProps } from "./KaTable";
-declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
-    onSelectionChange: (ids: any[], type: string) => void;
-    rowKey: any;
-    selected: any;
-}) => React.JSX.Element>;
-export default _default;

package/dist/Components/KaTable/SelectionCell.js

@@ -1,38 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var KaTable_1 = require("./KaTable");
-var SelectionCell = function (_a) {
-    var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
-    var table = KaTable_1.TableFun.useTableInstance();
-    var onChangeHandle = function (event) {
-        if (event.nativeEvent.shiftKey) {
-            table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
-        }
-        else {
-            var isChecked = event.currentTarget.checked;
-            var action = isChecked ? "add" : "remove";
-            onSelectionChange(rowKeyValue, action);
-            if (isChecked) {
-                table.selectRow(rowKeyValue);
-            }
-            else {
-                table.deselectRow(rowKeyValue);
-            }
-        }
-    };
-    return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
-};
-exports.default = react_1.default.memo(SelectionCell);

package/dist/Components/KaTable/SelectionHeader.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
-export default _default;

package/dist/Components/KaTable/SelectionHeader.js

@@ -1,56 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var KaTable_1 = require("./KaTable");
-var SelectionHeader = function (_a) {
-    var onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey, selected = _a.selected;
-    var table = KaTable_1.TableFun.useTableInstance();
-    var selectAllRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        if (selectAllRef.current) {
-            selectAllRef.current.indeterminate = selected === null || selected === void 0 ? void 0 : selected.intederminate;
-        }
-    }, [selected.intederminate]);
-    var handleSelectionChange = (0, react_1.useCallback)(function (checked) {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked);
-    }, [onSelectionChange]);
-    return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: selected === null || selected === void 0 ? void 0 : selected.checked, onChange: function (event) {
-            var _a, _b;
-            var isChecked = event.currentTarget.checked;
-            // const action = isChecked ? "add" : "remove";
-            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]; })
-                : [];
-            handleSelectionChange(totalIds);
-            if (isChecked) {
-                table.selectAllFilteredRows();
-            }
-            else {
-                table.deselectAllFilteredRows();
-            }
-        }, style: { marginLeft: "40%" } }));
-};
-exports.default = react_1.default.memo(SelectionHeader);

package/dist/Components/KaTable/ka-table.css

@@ -1,27 +0,0 @@
-.ka-thead-cell {
-  padding: 7px 7px;
-}
-.ka-cell {
-  padding: 7px 0px;
-}
-
-.ka-thead-background {
-  background-color: #bfbcbc;
-  z-index: 1;
-}
-
-.ka-cell-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-left: 5%;
-}
-.ka-row {
-  box-sizing: unset;
-  border-bottom: none;
-  border-top: none;
-}
-.ka-table-wrapper {
-  border-bottom: 2px solid #d8d9db;
-  border-right: 2px solid #d8d9db;
-}

package/dist/Components/KaTable/useMergedChildComponents.d.ts

@@ -1,14 +0,0 @@
-import { KaTableProps } from "./KaTableProps";
-type MergedChildComponentsProps = Pick<KaTableProps, "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor"> & {
-    childComponents: any;
-    onSortChange: any;
-    handleSelection: any;
-    rowKey: any;
-    onRowClick: any;
-    selected: any;
-    dataLength: number;
-    columns: any;
-    sortState: any;
-};
-declare const useMergedChildComponents: ({ childComponents, onSortChange, handleSelection, rowKey, onRowClick, selected, dataLength, columns, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, sortState, }: MergedChildComponentsProps) => any;
-export default useMergedChildComponents;

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -1,224 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var CustomHeader_1 = __importDefault(require("./CustomHeader"));
-var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
-var SelectionCell_1 = __importDefault(require("./SelectionCell"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var table_1 = require("../../Utils/table");
-var useMergedChildComponents = function (_a) {
-    var childComponents = _a.childComponents, onSortChange = _a.onSortChange, handleSelection = _a.handleSelection, rowKey = _a.rowKey, onRowClick = _a.onRowClick, selected = _a.selected, dataLength = _a.dataLength, columns = _a.columns, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, sortState = _a.sortState;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var handleSortChange = (0, react_1.useCallback)(function (newState, columnKey) {
-        var newSortState = __spreadArray([], sortState, true);
-        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === columnKey; });
-        if (existingIndex === -1) {
-            newSortState.push({
-                column: columnKey,
-                direction: newState, // Default to ascending when adding a column
-            });
-        }
-        else {
-            var existingSort = newSortState[existingIndex];
-            existingSort.direction = newState;
-        }
-        var column = columns.find(function (col) { return col.key === columnKey; });
-        column.sortDirection = newState;
-        onSortChange(newSortState);
-    }, [sortState, onSortChange, columns]);
-    var _b = react_1.default.useState(selected), selections = _b[0], setSelections = _b[1];
-    (0, react_1.useEffect)(function () {
-        setSelections(selected);
-    }, [selected]);
-    var isAllSelected = (0, react_1.useMemo)(function () {
-        return {
-            checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
-            intederminate: (selections === null || selections === void 0 ? void 0 : selections.length) > 0 && (selections === null || selections === void 0 ? void 0 : selections.length) < dataLength,
-        };
-    }, [selections, dataLength]);
-    var cellSelectionHandle = (0, react_1.useCallback)(function (values, type) {
-        if (type === "add") {
-            setSelections(__spreadArray(__spreadArray([], selections, true), [values], false));
-            handleSelection(__spreadArray(__spreadArray([], selections, true), [values], false));
-        }
-        else if (type === "remove") {
-            setSelections(selections.filter(function (value) { return value !== values; }));
-            handleSelection(selections.filter(function (value) { return value !== values; }));
-        }
-        else {
-            handleSelection(selections.filter(function (value) { return value !== values; }));
-        }
-    }, [selections, handleSelection]);
-    var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
-        setSelections(values);
-        handleSelection(values);
-    }, [handleSelection]);
-    return (0, react_1.useMemo)(function () {
-        return __assign(__assign({}, childComponents), { dataRow: {
-                elementAttributes: function (props) {
-                    var _a, _b;
-                    var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                    var attributes = existingElementAttributes
-                        ? existingElementAttributes(props)
-                        : {};
-                    var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
-                    var className = "".concat(attributes.className || "", " ").concat(isSelected ? "ka-row-selected" : "", " ka-row-hover").trim();
-                    // const className =
-                    //   `${attributes.className || ""} ${isSelected ? "ka-row-selected" : ""}`.trim();
-                    return __assign(__assign({}, attributes), { className: className, style: __assign(__assign({}, (attributes.style || {})), { backgroundColor: isSelected
-                                ? theme.colors.backgroundColor.subtle
-                                : undefined, border: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[200]) }) });
-                },
-            }, headCell: {
-                content: function (props) {
-                    var _a, _b, _c;
-                    var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
-                    if (existingContent) {
-                        var result = existingContent(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    var column = props.column;
-                    if (column.sortable || column.filter) {
-                        return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: handleSortChange, menuItems: (_b = column === null || column === void 0 ? void 0 : column.menu) !== null && _b !== void 0 ? _b : [], isSort: props.column.sortable, sortDirection: (_c = props.column.sortDirection) !== null && _c !== void 0 ? _c : "none" })));
-                    }
-                    if (props.column.key === "select-cell") {
-                        return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
-                    }
-                    return null;
-                },
-                elementAttributes: function (props) {
-                    var _a, _b, _c, _d, _e, _f;
-                    var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                    if (existingElementAttributes) {
-                        var result = existingElementAttributes(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    if (props.column.columnFreeze) {
-                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
-                        return {
-                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600] }),
-                        };
-                    }
-                    return {
-                        style: {
-                            backgroundColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : (_d = theme.colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.subtle,
-                            color: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600],
-                            border: "1px solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]),
-                        },
-                    };
-                },
-            }, cell: {
-                elementAttributes: function (props) {
-                    var _a, _b, _c, _d, _e;
-                    var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                    if (existingElementAttributes) {
-                        var result = existingElementAttributes(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    if (props.column.columnFreeze) {
-                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
-                        return {
-                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], fontWeight: 600 }),
-                        };
-                    }
-                    return {
-                        style: {
-                            color: (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600],
-                            fontWeight: 500,
-                            border: "1px solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[200]),
-                        },
-                        onClick: function () {
-                            if (onRowClick) {
-                                onRowClick(props.rowData, props.column.key);
-                            }
-                        },
-                    };
-                },
-            }, tableWrapper: {
-                elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
-            }, cellText: {
-                content: function (props) {
-                    var _a;
-                    var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
-                    if (existingContent) {
-                        var result = existingContent(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    if (props.column.key === "select-cell") {
-                        var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
-                        return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
-                    }
-                },
-            } });
-    }, [
-        childComponents,
-        rowKey,
-        onRowClick,
-        selections,
-        columns,
-        cellSelectionHandle,
-        headerSelectionHandle,
-        isAllSelected,
-        theme.colors,
-        headerBgColor,
-        headerTextColor,
-        freezedBgColor,
-        freezedTextColor,
-        handleSortChange,
-    ]);
-};
-exports.default = useMergedChildComponents;

package/dist/Components/Table/Table.css

@@ -1,16 +0,0 @@
-.table_wrapper {
-  width: 100%;
-  border-collapse: collapse;
-  /* table-layout: fixed; */
-}
-
-.table_wrapper th .resize-handle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 8px;
-  height: 100%;
-  cursor: col-resize;
-  background-color: transparent;
-  z-index: 999;
-}

package/dist/Layout.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const Layout: () => React.JSX.Element;
-export default Layout;