awing-library 2.1.2-dev.99 → 2.1.2-stable.2

package/lib/AWING/DataGrid/index.js

@@ -0,0 +1,280 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var Pagination_1 = __importDefault(require("../Pagination"));
+var NoData_1 = __importDefault(require("../NoData"));
+var constants_1 = require("../constants");
+var Helpers_1 = require("../../Utils/Helpers");
+var get_1 = __importDefault(require("../Form/Utils/get"));
+var lodash_1 = require("lodash");
+var Constant_1 = require("../../ACM-AXN/Common/Constant");
+var StyledTableRow = (0, styles_1.styled)(material_1.TableRow)({
+    '& .MuiTableCell-root:last-child .MuiButtonBase-root': {
+        visibility: 'hidden',
+    },
+    '&:hover': {
+        '& .MuiTableCell-root:last-child .MuiButtonBase-root': {
+            visibility: 'visible',
+        },
+    },
+});
+var SpanSortIndex = (0, styles_1.styled)('span')({
+    display: 'flex',
+    flexFlow: 'row wrap',
+    WebkitBoxPack: 'center',
+    placeContent: 'center',
+    WebkitBoxAlign: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    boxSizing: 'border-box',
+    fontWeight: 500,
+    fontSize: '0.75rem',
+    minWidth: '20px',
+    lineHeight: 1,
+    padding: '0px 6px',
+    height: '20px',
+    borderRadius: '10px',
+    zIndex: 1,
+    transition: 'transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    top: '0px',
+    right: '0px',
+    transform: 'scale(1) translate(50%, -50%)',
+    transformOrigin: '100% 0%',
+});
+var DataGrid = function (props) {
+    var columns = props.columns, rows = props.rows, _a = props.hideHeader, hideHeader = _a === void 0 ? false : _a, spanningRows = props.spanningRows, _b = props.spanningRowsPosition, spanningRowsPosition = _b === void 0 ? 'bottom' : _b, getRowId = props.getRowId, onRowClick = props.onRowClick, rowActions = props.rowActions, sortModel = props.sortModel, onSortModelChange = props.onSortModelChange, selected = props.selected, onSelectedChange = props.onSelectedChange, selectionActions = props.selectionActions, _c = props.pageIndex, pageIndex = _c === void 0 ? constants_1.PAGE_INDEX_DEFAULT : _c, _d = props.pageSize, pageSize = _d === void 0 ? constants_1.PAGE_SIZE_DEFAULT : _d, _e = props.totalOfRows, totalOfRows = _e === void 0 ? rows.length : _e, _f = props.rowsPerPageOptions, rowsPerPageOptions = _f === void 0 ? [10, 20, 30] : _f, onPageIndexChange = props.onPageIndexChange, onPageSizeChange = props.onPageSizeChange;
+    var createSortHandler = function (fieldName) { return function (event) {
+        var _a, _b, _c;
+        if (onSortModelChange) {
+            if (event.ctrlKey || event.shiftKey) {
+                var oldSortModel = (_a = sortModel === null || sortModel === void 0 ? void 0 : sortModel.slice()) !== null && _a !== void 0 ? _a : [];
+                var newSortModel = [];
+                var sortIndex = oldSortModel.findIndex(function (x) { return x.field === fieldName; });
+                if (sortIndex === -1) {
+                    newSortModel = newSortModel.concat(oldSortModel, {
+                        field: fieldName,
+                        sort: 'asc',
+                    });
+                }
+                else {
+                    var currentSort = (_b = oldSortModel.find(function (x) { return x.field === fieldName; })) === null || _b === void 0 ? void 0 : _b.sort;
+                    if (currentSort === 'desc') {
+                        newSortModel = oldSortModel.filter(function (x) { return x.field !== fieldName; });
+                    }
+                    else if (sortIndex === 0) {
+                        newSortModel = newSortModel.concat({
+                            field: fieldName,
+                            sort: 'desc',
+                        }, oldSortModel.slice(1));
+                    }
+                    else if (sortIndex === oldSortModel.length - 1) {
+                        newSortModel = newSortModel.concat(oldSortModel.slice(0, -1), {
+                            field: fieldName,
+                            sort: 'desc',
+                        });
+                    }
+                    else if (sortIndex > 0) {
+                        newSortModel = newSortModel.concat(oldSortModel.slice(0, sortIndex), {
+                            field: fieldName,
+                            sort: 'desc',
+                        }, oldSortModel.slice(sortIndex + 1));
+                    }
+                }
+                onSortModelChange(newSortModel);
+            }
+            else {
+                var currentSort = (_c = sortModel === null || sortModel === void 0 ? void 0 : sortModel.find(function (x) { return x.field === fieldName; })) === null || _c === void 0 ? void 0 : _c.sort;
+                if (currentSort !== 'desc')
+                    onSortModelChange([
+                        {
+                            field: fieldName,
+                            sort: currentSort ? 'desc' : 'asc',
+                        },
+                    ]);
+                else
+                    onSortModelChange([]);
+            }
+        }
+    }; };
+    var getId = function (row) {
+        if (getRowId) {
+            return getRowId(row);
+        }
+        else if (row.hasOwnProperty('id')) {
+            return row['id'];
+        }
+        else {
+            return undefined;
+        }
+    };
+    var handleSelectAll = function () {
+        if (selected && onSelectedChange) {
+            if (selected.length > 0) {
+                onSelectedChange([]);
+            }
+            else {
+                onSelectedChange(rows.map(function (r) { return getId(r); }));
+            }
+        }
+    };
+    var handleSelect = function (id) {
+        if (selected && onSelectedChange) {
+            if (selected.includes(id)) {
+                onSelectedChange(selected.filter(function (x) { return x !== id; }));
+            }
+            else {
+                var newSelected = selected.slice();
+                newSelected.push(id);
+                onSelectedChange(newSelected);
+            }
+        }
+    };
+    var handleRowClick = function (id, event) {
+        if (selected && onSelectedChange && selected.length) {
+            handleSelect(id);
+        }
+        else {
+            if (onRowClick)
+                onRowClick(id, event);
+        }
+    };
+    var calcOrder = function (index) { return pageIndex * pageSize + 1 + index; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleAction = react_1.default.useCallback((0, lodash_1.debounce)(function (rowAction, id) {
+        rowAction.action(id);
+    }, Constant_1.Constants.DEBOUNCE_TIME_300), []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableContainer, { component: material_1.Paper, children: [(0, jsx_runtime_1.jsxs)(material_1.Table, { "aria-label": "simple table", style: { tableLayout: 'fixed' }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [selected && onSelectedChange && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: selected.length > 0 &&
+                                                    selected.length < rows.length, checked: selected.length > 0 &&
+                                                    selected.length === rows.length, onChange: function () { return handleSelectAll(); }, inputProps: {
+                                                    'aria-label': 'select all desserts',
+                                                } }) })), selected &&
+                                            onSelectedChange &&
+                                            selected.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { colSpan: columns.length, style: { padding: '4px' }, children: selectionActions &&
+                                                selectionActions.map(function (actionDef, actIdx) { return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: actionDef.tooltipTitle, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: function () {
+                                                            return actionDef.action();
+                                                        }, style: {
+                                                            marginLeft: '4px',
+                                                            marginRight: '4px',
+                                                        }, children: actionDef.icon }) }, actIdx)); }) })) : (columns.map(function (col) {
+                                            var _a, _b, _c, _d;
+                                            return ((0, jsx_runtime_1.jsx)(material_1.TableCell, __assign({ sortDirection: (_b = (_a = sortModel === null || sortModel === void 0 ? void 0 : sortModel.find(function (x) { return x.field === col.field; })) === null || _a === void 0 ? void 0 : _a.sort) !== null && _b !== void 0 ? _b : false, style: __assign(__assign({}, (col.width && {
+                                                    width: col.width,
+                                                })), { fontWeight: 'bold' }) }, col.TableCellProps, { children: col.sortable ? ((0, jsx_runtime_1.jsxs)(material_1.TableSortLabel, { active: sortModel
+                                                        ? sortModel.some(function (x) {
+                                                            return x.field ===
+                                                                col.field;
+                                                        })
+                                                        : false, direction: (_d = (_c = sortModel === null || sortModel === void 0 ? void 0 : sortModel.find(function (x) {
+                                                        return x.field ===
+                                                            col.field;
+                                                    })) === null || _c === void 0 ? void 0 : _c.sort) !== null && _d !== void 0 ? _d : 'asc', onClick: createSortHandler(col.field), children: [col.headerName, sortModel &&
+                                                            sortModel.length > 1 &&
+                                                            sortModel.some(function (x) {
+                                                                return x.field ===
+                                                                    col.field;
+                                                            }) && ((0, jsx_runtime_1.jsx)(SpanSortIndex, { children: 1 +
+                                                                sortModel.findIndex(function (x) {
+                                                                    return x.field ===
+                                                                        col.field;
+                                                                }) }))] })) : (col.headerName) }), col.field));
+                                        })), rowActions && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { style: {
+                                                width: 48 * rowActions.length,
+                                            } }))] }) })), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [spanningRowsPosition == 'top' && spanningRows, rows.map(function (row, idx) {
+                                        var _a;
+                                        var id = (_a = getId(row)) !== null && _a !== void 0 ? _a : idx;
+                                        return ((0, jsx_runtime_1.jsxs)(StyledTableRow, __assign({ "data-row": id === idx ? 'sub-row' : 'row', hover: true }, ((onRowClick ||
+                                            (selected &&
+                                                onSelectedChange &&
+                                                selected.length)) && {
+                                            onClick: function (e) { return handleRowClick(id, e); },
+                                        }), (selected &&
+                                            onSelectedChange && {
+                                            role: 'checkbox',
+                                            tabIndex: -1,
+                                            selected: selected.includes(id),
+                                        }), { style: __assign({}, ((onRowClick ||
+                                                (selected &&
+                                                    onSelectedChange &&
+                                                    selected.length)) && {
+                                                cursor: 'pointer',
+                                            })), children: [selected && onSelectedChange && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: selected.includes(id), onClick: function (e) {
+                                                            return e.stopPropagation();
+                                                        }, onChange: function () {
+                                                            return handleSelect(id);
+                                                        }, inputProps: {
+                                                            'aria-labelledby': "enhanced-table-checkbox-".concat(id),
+                                                        } }) })), columns.map(function (col) {
+                                                    var displayValue = col.valueGetter
+                                                        ? col.valueGetter(row, idx, calcOrder(idx))
+                                                        : col.type === 'number'
+                                                            ? (0, Helpers_1.formatNumber)(row[col.field])
+                                                            : (0, get_1.default)(row, col.field);
+                                                    var dynamicStyle = col.dynamicTableCellProps
+                                                        ? col.dynamicTableCellProps(row)
+                                                        : {};
+                                                    return ((0, jsx_runtime_1.jsx)(material_1.TableCell, __assign({}, col.TableCellProps, dynamicStyle, { children: displayValue }), col.field));
+                                                }), rowActions && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "none", align: "right", children: rowActions.map(function (actionDef, actIdx) {
+                                                        var isShouldHide = actionDef.isShouldHideActions &&
+                                                            actionDef.isShouldHideActions(row);
+                                                        return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: isShouldHide
+                                                                ? false
+                                                                : undefined, title: actionDef.tooltipTitle, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: function (e) {
+                                                                    if (!isShouldHide) {
+                                                                        e.stopPropagation();
+                                                                        handleAction(actionDef, id);
+                                                                    }
+                                                                }, style: {
+                                                                    marginLeft: '4px',
+                                                                    marginRight: '4px',
+                                                                    opacity: isShouldHide
+                                                                        ? 0
+                                                                        : 1,
+                                                                }, sx: __assign(__assign({}, actionDef.sx), { borderRadius: '15%' }), children: typeof actionDef.icon ===
+                                                                    'function'
+                                                                    ? actionDef.icon({
+                                                                        id: id,
+                                                                        row: row,
+                                                                        idx: idx,
+                                                                        order: calcOrder(idx),
+                                                                    })
+                                                                    : actionDef.icon }) }, "".concat(id, "-").concat(actIdx)));
+                                                    }) }))] }), id));
+                                    }), spanningRowsPosition == 'bottom' && spanningRows] })] }), !rows.length && (0, jsx_runtime_1.jsx)(NoData_1.default, {})] }), onPageIndexChange && onPageSizeChange && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { rowsPerPageOptions: rowsPerPageOptions, colSpan: 3, count: totalOfRows, rowsPerPage: pageSize, page: pageIndex, onPageChange: function (e, page) { return onPageIndexChange(page); }, onRowsPerPageChange: function (e) {
+                    return onPageSizeChange(parseInt(e.target.value, 10));
+                } }))] }));
+};
+exports.DataGrid = DataGrid;
+exports.default = exports.DataGrid;
+__exportStar(require("./interface"), exports);

package/lib/AWING/DataGrid/interface.d.ts

@@ -0,0 +1,142 @@
+import { ReactNode } from 'react';
+import { TableCellProps, SxProps, Theme } from '@mui/material';
+import { DataObject } from '../interface';
+export * from '../interface';
+export type GridSortDirection = 'asc' | 'desc';
+export interface GridSortModel {
+    field: string;
+    sort: GridSortDirection;
+}
+interface DataGridColumnDefinitionBase {
+    /**
+     * Tên trường
+     */
+    field: string;
+    /**
+     * Nội dung hiển thị ở header
+     */
+    headerName: ReactNode;
+    /**
+     * Nếu bằng true thì sẽ cho phép sort theo trường này
+     */
+    sortable?: boolean;
+    options?: any[];
+    /**
+     * Hàm kiểm tra giá trị điền khi sửa trực tiếp trường này
+     *
+     * @param value Giá trị
+     */
+    checkValid?(value: any): boolean;
+    /**
+     * Kiểu dữ liệu của trường
+     */
+    type?: 'text' | 'number';
+    /**
+     * Cách lấy nội dung hiển thị khác, nếu có
+     *
+     * @param row Một đối tượng trong danh sách hiển thị
+     * @param idx Số thứ tự của đối tượng trong danh sách
+     */
+    valueGetter?(row: any, idx: number, stt: number): ReactNode;
+    /**
+     * Độ rộng của cột
+     */
+    width?: string | number;
+    TableCellProps?: TableCellProps;
+    dynamicTableCellProps?: (row: any) => TableCellProps;
+}
+export interface DataGridColumnDefinition extends DataGridColumnDefinitionBase {
+    /**
+     * Tên trường
+     */
+    field: string;
+    /**
+     * Nội dung hiển thị ở header
+     */
+    headerName: ReactNode;
+    /**
+     * Nếu bằng true thì sẽ cho phép sort theo trường này
+     */
+    sortable?: boolean;
+    options?: any[];
+    /**
+     * Hàm kiểm tra giá trị điền khi sửa trực tiếp trường này
+     *
+     * @param value Giá trị
+     */
+    checkValid?(value: any): boolean;
+    /**
+     * Kiểu dữ liệu của trường
+     */
+    type?: 'text' | 'number';
+    /**
+     * Cách lấy nội dung hiển thị khác, nếu có
+     *
+     * @param row Một đối tượng trong danh sách hiển thị
+     * @param idx Số thứ tự của đối tượng trong danh sách
+     */
+    valueGetter?(row: any, idx: number, stt: number): ReactNode;
+    /**
+     * Độ rộng của cột
+     */
+    width?: string | number;
+    TableCellProps?: TableCellProps;
+    dynamicTableCellProps?: (row: any) => TableCellProps;
+}
+export interface RowActionDefinition {
+    /**
+     * Icon của button action
+     */
+    icon: ReactNode | React.FunctionComponent<{
+        id: string;
+        row: DataObject;
+        idx: number;
+        order: number;
+    }>;
+    /**
+     * Nội dung hiển thị trên tooltip
+     */
+    tooltipTitle: string;
+    /**
+     * Hành động thực hiện khi nhấn nút
+     */
+    action(id: any): void;
+    isShouldHideActions?: (row: any) => boolean;
+    sx?: SxProps<Theme>;
+}
+export interface SelectionActionDefinition {
+    /**
+     * Icon của button action
+     */
+    icon: ReactNode;
+    /**
+     * Nội dung hiển thị trên tooltip
+     */
+    tooltipTitle: string;
+    /**
+     * Hành động thực hiện khi nhấn nút
+     */
+    action(ids?: Array<string>): void;
+    disabled?: boolean;
+}
+export interface DataGridProps {
+    columns: DataGridColumnDefinition[];
+    rows: DataObject[];
+    hideHeader?: boolean;
+    spanningRows?: React.ReactElement;
+    spanningRowsPosition?: 'top' | 'bottom';
+    getRowId?(obj: DataObject): any;
+    onRowClick?(id: any, event?: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+    rowActions?: RowActionDefinition[];
+    sortModel?: GridSortModel[];
+    onSortModelChange?(model: GridSortModel[]): void;
+    selected?: any[];
+    onSelectedChange?(ids: any[]): void;
+    selectionActions?: SelectionActionDefinition[];
+    pageIndex?: number;
+    pageSize?: number;
+    totalOfRows?: number;
+    rowsPerPageOptions?: number[];
+    onPageIndexChange?(pageIndex: number): void;
+    onPageSizeChange?(pageIndex: number): void;
+}

package/lib/AWING/DataGrid/interface.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../interface"), exports);

package/lib/AWING/DataGridGroup/ControlPanel.d.ts

@@ -0,0 +1,10 @@
+interface GroupHeader {
+    id: string;
+    label: string;
+}
+interface ControlPanelProps {
+    groupHeaders: GroupHeader[];
+    onQueryData: (groupByValues: string[]) => void;
+}
+declare const ControlPanel: (props: ControlPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ControlPanel;

package/lib/AWING/DataGridGroup/ControlPanel.js

@@ -0,0 +1,117 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var react_i18next_1 = require("react-i18next");
+var styles_1 = require("@mui/styles");
+var material_1 = require("@mui/material");
+var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    groupBy: {
+        display: "flex",
+        justifyContent: "flex-start",
+        flexWrap: "wrap",
+        listStyle: "none",
+        paddingTop: "8px",
+        margin: "0",
+        position: "relative",
+        "&.MuiPaper-elevation1": {
+            boxShadow: "none",
+            border: "1px solid #ccc",
+        },
+        minHeight: "30px",
+        "&:hover": {
+            "&.MuiPaper-elevation1": {
+                boxShadow: "none",
+                border: "1px solid #263238",
+            },
+        },
+    },
+    chip: {
+        marginLeft: "8px",
+    },
+    label: {
+        position: "absolute",
+        top: "-3px",
+        left: "16px",
+        backgroundColor: "#FFFFFF",
+        paddingRight: "4px",
+        paddingLeft: "4px",
+    },
+    outlinedInput: {
+        "& .MuiOutlinedInput-input": {
+            padding: "10.5px !important",
+        },
+        "& .MuiFormControl-marginNormal": {
+            margin: "0px",
+        },
+        "& .MuiOutlinedInput-adornedEnd": {
+            paddingRight: "4px",
+        },
+        "& .MuiIconButton-root": {
+            padding: "8px",
+        },
+        "& .MuiAutocomplete-inputRoot": {
+            padding: "2px",
+        },
+        "& .MuiAutocomplete-endAdornment": {
+            top: "calc(50% - 19px)",
+        },
+    },
+    buttonStyle: {
+        height: "40px",
+    },
+    loadingButton: {
+        marginLeft: 0,
+        right: "auto",
+        position: "absolute",
+    },
+}); });
+var ControlPanel = function (props) {
+    var classes = useStyles();
+    var groupHeaders = props.groupHeaders, onQueryData = props.onQueryData;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = react_1.default.useState([]), groupByValues = _a[0], setGroupByValues = _a[1];
+    var handleDelete = function (groupId) { return function () {
+        setGroupByValues(function (old) { return old.filter(function (x) { return x !== groupId; }); });
+    }; };
+    var handleDragStart = function (e) {
+        var groupId = e.target.id;
+        e.dataTransfer.setData("text", groupId);
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        var dragNodeId = e.dataTransfer.getData("text");
+        var dropNodeId = e.target.parentNode.id;
+        if (dragNodeId === dropNodeId)
+            return;
+        if (groupByValues.some(function (x) { return x === dragNodeId; })) {
+            var dropIndex = groupByValues.findIndex(function (grp) { return grp === dropNodeId; });
+            var dragIndex = groupByValues.findIndex(function (grp) { return grp === dragNodeId; });
+            var newGroupBy_1 = __spreadArray([], groupByValues, true);
+            newGroupBy_1.splice(dragIndex, 1, dropNodeId || "");
+            newGroupBy_1.splice(dropIndex, 1, dragNodeId || "");
+            setGroupByValues(function (old) { return newGroupBy_1; });
+        }
+        else {
+            if (groupHeaders.some(function (x) { return x.id === dragNodeId; }))
+                setGroupByValues(function (old) { return __spreadArray(__spreadArray([], old, true), [dragNodeId], false); });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { id: "group-panel", item: true, xs: 11, style: { paddingLeft: "16px", position: "relative" }, children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { component: "div", className: classes.groupBy, onDragOver: function (e) { return e.preventDefault(); }, onDrop: function (e) { return handleDrop(e); }, children: groupByValues.map(function (grpId) {
+                            var head = groupHeaders.find(function (x) { return x.id === grpId; });
+                            return ((0, jsx_runtime_1.jsx)(material_1.Chip, { id: grpId, label: head === null || head === void 0 ? void 0 : head.label, onDelete: handleDelete((head === null || head === void 0 ? void 0 : head.id) || ""), size: "small", className: classes.chip, draggable: true, onDragStart: handleDragStart }, grpId));
+                        }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "textSecondary", className: classes.label, children: (0, jsx_runtime_1.jsx)("span", { children: t("Schedule.DragAndDropLabel") }) })] }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, children: (0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.buttonStyle, variant: "contained", color: "primary", onClick: function () { return onQueryData(groupByValues); }, children: t("Common.View") }) })] }));
+};
+exports.default = ControlPanel;

package/lib/AWING/DataGridGroup/DataGridGroup.d.ts

@@ -0,0 +1,2 @@
+import { DataGridGroupProps } from "./interface";
+export default function DataGridGroup(props: DataGridGroupProps): import("react/jsx-runtime").JSX.Element;