pixel-react 1.20.18 → 1.20.19

package/lib/components/Excel/ExcelFile/ExcelFile.js

@@ -1,597 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from 'react';
-import Spreadsheet from './ExcelFileComponents/index';
-import './ExcelFile.scss';
-import Tooltip from '../../Tooltip';
-import Icon from '../../Icon';
-import Toastify from '../../Toastify';
-import { toast } from '../../Toastify/Toastify';
-import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
-import Typography from '../../Typography';
-import { convertStyleToBackend, convertStyleToFrontend, } from '../dataConversion';
-import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
-import { debounce } from '../../../utils/debounce/debounce';
-import classNames from 'classnames';
-import { EmptyCell } from './ExcelFileComponents/util';
-import MenuOption from '../../MenuOption';
-import { isTextTruncated, truncateText, } from '../../../utils/truncateText/truncateText';
-const ExcelFile = ({ excelData, contextOption, toolbar = 'show', sheetBar = 'show', rowCount = 26, colCount = 26, sheetHeight = '100%', editable = true, contextHeightPositioning = 0, contextWidthPositioning = 0, onSave = () => Promise.resolve(), onSaveInfoChange, attachmentAction = {
-    addAttachment: () => Promise.resolve(''),
-    deleteAttachment: () => Promise.resolve(''),
-    viewAttachment: () => Promise.resolve(),
-}, onSaveDelay = 3000, scroller = false, columnContextEnable = true, rowContextEnable = true, sheetBarContextEnable = true, minimumColumnWidth = 100, disableDeleteOption = false, maxRowLimit = Infinity, maxColLimit = Infinity, maxSheetLimit = Infinity, getActiveCell = () => { }, }) => {
-    const menuRef = useRef(null);
-    const [sheetNames, setSheetNames] = useState([]);
-    const [saveInfo, setSaveInfo] = useState('');
-    const [contextMenu, setContextMenu] = React.useState({
-        open: false,
-        contextType: null,
-        options: [
-            {
-                label: '',
-                value: '',
-                iconName: '',
-                action: () => { },
-                disableTooltip: '',
-                disable: false,
-                visible: false,
-            },
-        ],
-    });
-    const [selectedSheet, setSelectedSheet] = useState({ name: 'defaultSheet', index: 0 });
-    const [worksheetsData, setWorksheetsData] = useState({ defaultSheet: [[EmptyCell]] });
-    const [selectedSheetData, setSelectedSheetData] = useState([[EmptyCell]]);
-    const [headerOldNew, setHeaderOldNew] = useState(onSave.length > 1 ? {} : {});
-    const [position, setPosition] = useState({
-        x: 0,
-        y: 0,
-    });
-    const pageRef = useRef('');
-    const workRef = useRef(null);
-    const sheetRef = useRef(null);
-    const spreadsheetRef = useRef(null);
-    const checkVal = (val) => {
-        if (val === undefined || val === null) {
-            return null;
-        }
-        return val;
-    };
-    useEffect(() => {
-        const payload = excelData;
-        if (payload) {
-            const sheetNames = payload.map((e) => e.sheetName);
-            setSheetNames(sheetNames);
-            if (!checkEmpty(sheetNames.length)) {
-                pageRef.current = sheetNames[0] || ''; // Ternary is required, must use ''
-                setSelectedSheet({
-                    name: sheetNames[0] || '', // Ternary is required, must use ''
-                    index: 0,
-                });
-            }
-            const newWorksheetsData = {};
-            const newHeaderOldNew = {};
-            payload.forEach((sheet) => {
-                const sheetName = sheet.sheetName;
-                const json = sheet.data;
-                const maxRows = Math.max(rowCount, json.length);
-                const maxCols = Math.max(colCount, Math.max(...json.map((row) => row.length)));
-                let spreadsheetData = Array.from({ length: maxRows }, () => Array(maxCols).fill({
-                    value: '',
-                    style: EmptyCell.style,
-                    readOnly: false,
-                    inputType: undefined,
-                }));
-                json.forEach((row, rowIndex) => {
-                    row.forEach((cell, colIndex) => {
-                        if (rowIndex < maxRows && colIndex < maxCols) {
-                            if (!spreadsheetData[rowIndex]) {
-                                spreadsheetData[rowIndex] = [];
-                            }
-                            spreadsheetData[rowIndex][colIndex] = {
-                                value: checkVal(cell.value),
-                                style: checkEmpty(cell?.style)
-                                    ? EmptyCell.style
-                                    : convertStyleToFrontend(cell?.style),
-                                readOnly: cell?.readOnly ? cell?.readOnly : false,
-                                inputType: cell?.inputType ?? undefined,
-                                contextDisable: cell.contextDisable,
-                            };
-                        }
-                    });
-                });
-                const readOnlyCells = new Set([
-                    ...(sheet?.rows?.readOnly
-                        ? sheet.rows.readOnly.map((r) => `r${r}`)
-                        : []),
-                    ...(sheet?.columns?.readOnly
-                        ? sheet.columns.readOnly.map((c) => `c${c}`)
-                        : []),
-                    ...(sheet?.cells?.readOnly
-                        ? sheet.cells.readOnly.map(([r, c]) => `${r},${c}`)
-                        : []),
-                ]);
-                const getInputTypeForCell = (rowIndex, colIndex, cell) => {
-                    if (cell?.inputType) {
-                        return cell.inputType;
-                    }
-                    const inputTypeConfig = sheet?.rows?.inputType?.[rowIndex + 1] ||
-                        sheet?.columns?.inputType?.[colIndex + 1] ||
-                        sheet?.cells?.inputType?.[`${rowIndex + 1},${colIndex + 1}`];
-                    return inputTypeConfig || { type: 'text' };
-                };
-                spreadsheetData.forEach((row, rowIndex) => {
-                    row.forEach((cell, colIndex) => {
-                        if (!spreadsheetData[rowIndex]) {
-                            spreadsheetData[rowIndex] = [];
-                        }
-                        const isReadOnly = readOnlyCells.has(`r${rowIndex + 1}`) ||
-                            readOnlyCells.has(`c${colIndex + 1}`) ||
-                            readOnlyCells.has(`${rowIndex + 1},${colIndex + 1}`);
-                        const inputType = getInputTypeForCell(rowIndex, colIndex, cell || EmptyCell);
-                        spreadsheetData[rowIndex][colIndex] = {
-                            ...cell,
-                            value: cell?.value ?? '',
-                            readOnly: cell?.readOnly ? cell.readOnly : isReadOnly,
-                            inputType: inputType,
-                            contextDisable: cell?.contextDisable,
-                        };
-                    });
-                });
-                newWorksheetsData[sheetName] = spreadsheetData;
-                // Only set headerOldNew if onSave expects two arguments
-                if (onSave.length > 1) {
-                    const firstRow = json[0] || [];
-                    newHeaderOldNew[sheetName] = Array.from({ length: maxCols }, (_, col) => ({
-                        newData: '',
-                        oldData: firstRow[col]?.value || '',
-                    }));
-                }
-            });
-            setWorksheetsData(newWorksheetsData);
-            if (onSave.length > 1) {
-                setHeaderOldNew(newHeaderOldNew);
-            }
-            const firstSheetName = Object.keys(newWorksheetsData)[0];
-            if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-                setSelectedSheetData(newWorksheetsData[firstSheetName]);
-            }
-        }
-    }, [excelData]);
-    useEffect(() => {
-        if (onSaveInfoChange) {
-            onSaveInfoChange(saveInfo);
-        }
-        if (saveInfo === 'File saved') {
-            setTimeout(() => {
-                setSaveInfo('');
-            }, 2000);
-        }
-    }, [saveInfo]);
-    useEffect(() => {
-        setSaveInfo('Saving...');
-        debounceDispatch(handleSaveData());
-    }, [worksheetsData, pageRef.current]);
-    const debounceDispatch = React.useCallback(debounce((val) => {
-        if (onSave.length > 1) {
-            const updatedHeader = { ...headerOldNew };
-            sheetNames.forEach((sheetName, index) => {
-                const firstRow = val[index].data[0] || [];
-                const currentHeaders = firstRow.map((cell) => cell?.value || '');
-                updatedHeader[sheetName] = (updatedHeader[sheetName] || []).map((h, i) => ({
-                    ...h,
-                    newData: currentHeaders[i] || '',
-                }));
-            });
-            setHeaderOldNew(updatedHeader);
-            const headerOldNewData = sheetNames.map((sheetName) => ({
-                sheetName,
-                headers: updatedHeader[sheetName] || [],
-            }));
-            onSave(val, headerOldNewData);
-        }
-        else {
-            onSave(val);
-        }
-        setSaveInfo('File saved');
-    }, onSaveDelay), [onSave, headerOldNew, sheetNames]);
-    const handleSave = React.useCallback((event) => {
-        if (event.ctrlKey && event.key === 's') {
-            event.preventDefault();
-            event.stopPropagation();
-            debounceDispatch(handleSaveData());
-        }
-    }, [onSave]);
-    React.useEffect(() => {
-        document.addEventListener('keydown', handleSave);
-        return () => {
-            document.removeEventListener('keydown', handleSave);
-        };
-    }, [handleSave]);
-    const handleSaveData = () => {
-        return sheetNames.map((sheetName) => {
-            const sheetData = worksheetsData[sheetName]?.map((row) => {
-                const lastIndex = row.reduce((lastIdx, cell, i) => {
-                    const value = cell?.value ?? '';
-                    const hasValue = String(value).trim() !== '';
-                    return hasValue ? i : lastIdx;
-                }, -1);
-                const filteredRow = row
-                    .map((cell, index) => {
-                    if (cell && cell.style && index <= lastIndex) {
-                        return {
-                            value: cell.value,
-                            style: convertStyleToBackend(cell.style),
-                            readOnly: cell.readOnly,
-                            inputType: cell.inputType,
-                            contextDisable: cell.contextDisable,
-                        };
-                    }
-                    return null;
-                })
-                    .filter((cell) => cell !== null);
-                return filteredRow.length > 0 ? filteredRow : [];
-            }) || [];
-            const finalData = sheetData.filter((row, index) => {
-                const isNextRowNotEmpty = sheetData
-                    .slice(index + 1)
-                    .some((nextRow) => nextRow.length > 0);
-                return row.length > 0 || isNextRowNotEmpty;
-            });
-            return {
-                sheetName: sheetName,
-                data: checkEmpty(finalData.length) ? [[]] : finalData,
-            };
-        });
-    };
-    const onEvaluateChange = (data) => {
-        setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-    };
-    const [editingSheet, setEditingSheet] = useState(null);
-    const addSheetIconDisable = () => sheetNames.length >= maxSheetLimit;
-    const handleAddSheet = () => {
-        if (addSheetIconDisable())
-            return;
-        const generateUniqueSheetName = (baseName, existingNames) => {
-            const lowerExisting = existingNames.map((n) => n.toLowerCase());
-            let newName = `${baseName}1`;
-            let counter = 2;
-            while (lowerExisting.includes(newName.toLowerCase())) {
-                newName = `${baseName}${counter}`;
-                counter++;
-            }
-            return newName;
-        };
-        const baseName = 'Sheet';
-        const existingSheetNames = sheetNames;
-        const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
-        const newSheetData = Array.from({ length: rowCount }, () => Array.from({ length: colCount }, () => EmptyCell));
-        setSheetNames((prev) => [...prev, newSheetName]);
-        setSelectedSheet({ index: sheetNames?.length, name: newSheetName });
-        setWorksheetsData({ ...worksheetsData, [newSheetName]: newSheetData });
-        setSelectedSheetData(newSheetData);
-        if (onSave.length > 1) {
-            setHeaderOldNew((prev) => ({
-                ...prev,
-                [newSheetName]: Array.from({ length: colCount }, () => ({
-                    newData: '',
-                    oldData: '',
-                })),
-            }));
-        }
-        pageRef.current = newSheetName;
-    };
-    const handleToSetSelectedSheetData = (selectedData = [[EmptyCell]]) => {
-        setSelectedSheetData(selectedData);
-    };
-    const handleDeleteSheet = (name, index) => {
-        if (sheetNames.length > 1) {
-            let updatedSheetNames = sheetNames.slice();
-            updatedSheetNames.splice(index, 1);
-            const updatedWorksheetsData = { ...worksheetsData };
-            delete updatedWorksheetsData[name];
-            const newIndex = Math.min(index, updatedSheetNames.length - 1);
-            setSheetNames(updatedSheetNames);
-            setWorksheetsData(updatedWorksheetsData);
-            if (onSave.length > 1) {
-                setHeaderOldNew((prev) => {
-                    const newPrev = { ...prev };
-                    delete newPrev[name];
-                    return newPrev;
-                });
-            }
-            const sheetName = updatedSheetNames[newIndex]
-                ? updatedSheetNames[newIndex]
-                : '';
-            setSelectedSheet({
-                index: newIndex,
-                name: sheetName,
-            });
-            handleToSetSelectedSheetData(updatedWorksheetsData?.[sheetName]);
-            pageRef.current = sheetName;
-        }
-        else {
-            toast.warning('Cannot delete the last sheet.');
-        }
-    };
-    const handleNameChange = (event, index, name) => {
-        const target = event.target;
-        if (!target || target?.textContent?.trim() === name?.trim()) {
-            setEditingSheet(null);
-            return;
-        }
-        const updatedSheetValue = (target.textContent || '').trim();
-        if (!updatedSheetValue) {
-            toast.warning('Sheet name cannot be empty.');
-            target.textContent = selectedSheet.name;
-            setEditingSheet(null);
-            return;
-        }
-        if (updatedSheetValue.length > 50) {
-            toast.warning('The sheet name cannot be greater than 50 characters');
-            target.textContent = selectedSheet.name;
-            setEditingSheet(null);
-            return;
-        }
-        if (sheetNames
-            .map((name) => name.toLowerCase())
-            .includes(updatedSheetValue.toLowerCase()) &&
-            name.trim()?.toLowerCase() !== updatedSheetValue?.toLowerCase()) {
-            toast.warning('Sheet name already exists');
-            target.textContent = selectedSheet.name;
-            setEditingSheet(null);
-            return;
-        }
-        let updatedSheetNames = sheetNames;
-        handleToSetSelectedSheetData(worksheetsData?.[name]);
-        updatedSheetNames.splice(index, 1, updatedSheetValue);
-        let remainingSheets = worksheetsData;
-        const updatedData = replaceKeyValueByKeyName(remainingSheets, name, updatedSheetValue);
-        pageRef.current = updatedSheetValue;
-        setSelectedSheet((prev) => ({ ...prev, name: updatedSheetValue }));
-        setWorksheetsData(updatedData);
-        if (onSave.length > 1) {
-            setHeaderOldNew((prev) => {
-                const newPrev = { ...prev };
-                const headers = newPrev[name];
-                delete newPrev[name];
-                newPrev[updatedSheetValue] = headers ?? [];
-                return newPrev;
-            });
-        }
-        setEditingSheet(null);
-    };
-    function replaceKeyValueByKeyName(obj, oldKey, newKey) {
-        if (!(oldKey in obj)) {
-            throw new Error(`Key "${oldKey}" not found in object`);
-        }
-        const { [oldKey]: oldValue, ...rest } = obj;
-        return {
-            ...rest,
-            [newKey]: oldValue ?? [],
-        };
-    }
-    const handleSheetChange = (name, index) => {
-        if (name === selectedSheet.name || index === selectedSheet.index) {
-            return;
-        }
-        setSelectedSheet({ index, name });
-        setSheetNames((prev) => {
-            const updatedSheetNames = [...prev];
-            updatedSheetNames[index] = name;
-            return updatedSheetNames;
-        });
-        handleToSetSelectedSheetData(worksheetsData[name]);
-        pageRef.current = name;
-    };
-    const setCursorToEnd = (element) => {
-        const range = document.createRange();
-        const selection = window.getSelection();
-        range.selectNodeContents(element);
-        range.collapse(false);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-    };
-    const handleClickOutside = React.useCallback((event, isLeftClick = false) => {
-        const target = event.target;
-        if (!(target.closest('.ff-excel-tab-list') ||
-            target.closest('.ff-excel-sheet')) ||
-            isLeftClick) {
-            if (contextMenu.open) {
-                setContextMenu({
-                    open: false,
-                    contextType: null,
-                    options: [
-                        {
-                            label: '',
-                            value: '',
-                            iconName: '',
-                            action: () => { },
-                            disableTooltip: '',
-                            visible: false,
-                            disable: false,
-                        },
-                    ],
-                });
-                if (!isLeftClick) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-            }
-        }
-    }, [contextMenu.open]);
-    React.useEffect(() => {
-        document.addEventListener('contextmenu', handleClickOutside);
-        document.addEventListener('click', (e) => handleClickOutside(e, true));
-        return () => {
-            document.removeEventListener('contextmenu', handleClickOutside);
-            document.removeEventListener('click', (e) => handleClickOutside(e, true));
-        };
-    }, [handleClickOutside]);
-    const contextClick = (event, name, index) => {
-        event.preventDefault();
-        const options = [
-            {
-                label: 'Add Sheet',
-                value: 'Add Sheet',
-                iconName: 'plus_icon',
-                action: () => handleAddSheet(),
-                disableTooltip: 'Sheet limit reached',
-                visible: false,
-                disable: addSheetIconDisable(),
-            },
-            ...(!disableDeleteOption
-                ? [
-                    {
-                        label: 'Delete Sheet',
-                        value: 'Delete Sheet',
-                        iconName: 'delete',
-                        action: () => handleDeleteSheet(name, index),
-                        disableTooltip: '',
-                        visible: false,
-                        disable: false,
-                    },
-                ]
-                : []),
-        ];
-        setContextMenu((prev) => ({
-            ...prev,
-            open: true,
-            contextType: 'sheet',
-            options,
-        }));
-    };
-    const setContextPosition = (event) => {
-        event.preventDefault();
-        const rect = sheetRef.current?.parentElement?.getBoundingClientRect();
-        const xOffset = window.scrollX;
-        const yOffset = window.scrollY;
-        let sheetRefX = event.clientX - (rect?.left || 0) + xOffset;
-        let sheetRefY = event.clientY - (rect?.top || 0) + yOffset;
-        const menuWidth = 300;
-        const menuHeight = 200;
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-        const spaceOnRight = windowWidth - event.clientX;
-        const spaceOnLeft = event.clientX;
-        const spaceBelow = windowHeight - event.clientY;
-        const spaceAbove = event.clientY;
-        // Horizontal positioning: left if no space on right
-        if (spaceOnRight < menuWidth && spaceOnLeft >= menuWidth) {
-            sheetRefX = event.clientX - (rect?.left || 0) + xOffset - 150;
-        }
-        else {
-            sheetRefX += 2;
-        }
-        // Vertical positioning: above if no space below
-        if (spaceBelow < menuHeight && spaceAbove >= menuHeight) {
-            sheetRefY = event.clientY - (rect?.top || 0) + yOffset - 20;
-        }
-        else {
-            sheetRefY += 2;
-        }
-        if (event.target.classList.contains('ff-excel-tab-list')) {
-            setPosition({
-                x: sheetRefX,
-                y: sheetRefY - (disableDeleteOption ? 32 : 65),
-            });
-            return;
-        }
-        // Ensure menu stays within window bounds
-        if (sheetRefX + menuWidth > windowWidth) {
-            sheetRefX = windowWidth - menuWidth - 2;
-        }
-        if (sheetRefX < 0) {
-            sheetRefX = 2; // Prevent clipping off left edge
-        }
-        setPosition({
-            x: sheetRefX + contextWidthPositioning,
-            y: sheetRefY + contextHeightPositioning,
-        });
-    };
-    const unsetContextPosition = (e) => {
-        e.stopPropagation();
-        if (contextMenu.open) {
-            setContextMenu({
-                open: false,
-                contextType: null,
-                options: [
-                    {
-                        label: '',
-                        value: '',
-                        iconName: '',
-                        action: () => { },
-                        disableTooltip: '',
-                        visible: false,
-                        disable: false,
-                    },
-                ],
-            });
-        }
-    };
-    const handleAddColumn = (column, isLeft) => {
-        if (onSave.length > 1) {
-            setHeaderOldNew((prev) => {
-                const sheetName = selectedSheet.name;
-                const arr = [...(prev[sheetName] || [])];
-                const pos = isLeft ? column : column + 1;
-                arr.splice(pos, 0, { newData: '', oldData: '' });
-                return { ...prev, [sheetName]: arr };
-            });
-        }
-    };
-    const handleDeleteColumn = (column) => {
-        if (onSave.length > 1) {
-            setHeaderOldNew((prev) => {
-                const sheetName = selectedSheet.name;
-                const arr = [...(prev[sheetName] || [])];
-                arr.splice(column, 1);
-                return { ...prev, [sheetName]: arr };
-            });
-        }
-    };
-    useEffect(() => {
-        spreadsheetRef.current?.removeSelect();
-    }, [selectedSheet.name]);
-    const options = (sheetNames) => {
-        return sheetNames.map((sheetName, index) => {
-            const isMatchWithSheet = selectedSheet?.name === sheetName;
-            return {
-                label: (_jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [isMatchWithSheet ? (_jsx(Icon, { height: 16, width: 16, name: "tick" })) : (_jsx("div", { style: { height: '16px', width: '24px' } })), _jsx(Tooltip, { title: isTextTruncated(sheetName, 20, 'count') ? sheetName : '', children: _jsx(Typography, { children: truncateText(sheetName, 20, 'count') }) })] })),
-                name: index,
-                value: sheetName,
-            };
-        });
-    };
-    const handleOptionClick = (option) => {
-        const { value, name: index = '' } = option;
-        handleSheetChange(value, parseInt(index));
-    };
-    return (_jsx(_Fragment, { children: sheetNames.length > 0 && (_jsxs("div", { ref: workRef, className: "ff-excel", onContextMenu: setContextPosition, onClick: unsetContextPosition, children: [_jsx("div", { ref: sheetRef, className: "ff-excel-sheet", children: _jsx(Spreadsheet, { ref: spreadsheetRef, editable: editable, attachmentAction: attachmentAction, toolbar: toolbar, sheetHeight: sheetHeight, setContextMenu: setContextMenu, contextOption: contextOption, data: selectedSheetData, columnContextEnable: columnContextEnable, rowContextEnable: rowContextEnable, minimumColumnWidth: minimumColumnWidth, onEvaluatedDataChange: onEvaluateChange, workRef: workRef, scroller: scroller, maxRowLimit: maxRowLimit, maxColLimit: maxColLimit, disableDeleteOption: disableDeleteOption, contextMenu: contextMenu, getActiveCell: getActiveCell, onAddColumn: handleAddColumn, onDeleteColumn: handleDeleteColumn }, selectedSheet.name) }), sheetBar !== 'hide' && (_jsxs("div", { className: "ff-excel-sheet-bar", children: [sheetBar === 'show' && (_jsxs("div", { className: "ff-excel-add-sheet-set", children: [_jsx(Tooltip, { title: addSheetIconDisable()
-                                        ? 'Sheet limit reached'
-                                        : 'Add Sheet', placement: "top", children: _jsx(Icon, { disabled: !editable || addSheetIconDisable(), className: "ff-excel-add-sheet-icon", hoverEffect: true, onClick: handleAddSheet, name: "plus_icon", height: 20, width: 20 }) }), _jsx(MenuOption, { options: options(sheetNames), targetRef: menuRef, onOptionClick: handleOptionClick, dropdownPlacement: "top", iconName: "show_script", tooltipTitle: "All Sheets", tooltipPlacement: "top", dropdownHeight: 215, selectedValue: selectedSheet.name })] })), _jsx("div", { className: "ff-excel-tab-container", children: sheetNames.map((name, index) => (_jsx(Typography, { lineHeight: "16px", children: _jsx("div", { onContextMenu: (event) => {
-                                        handleSheetChange(name, index);
-                                        if (sheetBarContextEnable) {
-                                            contextClick(event, name, index);
-                                        }
-                                    }, className: classNames('ff-excel-tab-list', {
-                                        active: name === selectedSheet.name,
-                                    }), onClick: () => {
-                                        handleSheetChange(name, index);
-                                    }, suppressContentEditableWarning: editingSheet === index, onDoubleClick: (e) => {
-                                        if (sheetBar === 'show') {
-                                            setEditingSheet(index);
-                                            if (editingSheet === null) {
-                                                setTimeout(() => setCursorToEnd(e.target), 0);
-                                            }
-                                        }
-                                    }, contentEditable: editable && editingSheet === index, onBlur: (e) => {
-                                        handleNameChange(e, index, name);
-                                    }, onKeyDown: (e) => {
-                                        if (e.key === 'Enter') {
-                                            e.preventDefault();
-                                            handleNameChange(e, index, name);
-                                        }
-                                    }, children: name }) }, name))) })] })), contextMenu.open && (_jsx(ExcelContextMenu, { contextMenu: contextMenu, position: position, editable: editable })), _jsx(Toastify, {})] })) }));
-};
-export default ExcelFile;
-//# sourceMappingURL=ExcelFile.js.map
+import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l,{useRef as o,useState as a,useEffect as i}from"react";import r from"./ExcelFileComponents/Spreadsheet.js";import{EmptyCell as s}from"./ExcelFileComponents/util.js";import"./ExcelFileComponents/EditableCell.js";import c from"../../../_virtual/index.js";import m from"../../Icon/Icon.js";import{checkEmpty as d}from"../../../utils/checkEmpty/checkEmpty.js";import u from"../../Tooltip/Tooltip.js";import{truncateText as p,isTextTruncated as h}from"../../../utils/truncateText/truncateText.js";import"./ExcelFile.scss.js";import{Toastify as f,toast as x}from"../../Toastify/Toastify.js";import v from"../ExcelContextMenu/ExcelContextMenu.js";import y from"../../Typography/Typography.js";import{convertStyleToFrontend as g,convertStyleToBackend as b}from"../dataConversion.js";import{debounce as w}from"../../../utils/debounce/debounce.js";import C from"../../MenuOption/MenuOption.js";const E=({excelData:E,contextOption:T,toolbar:D="show",sheetBar:S="show",rowCount:O=26,colCount:k=26,sheetHeight:A="100%",editable:j=!0,contextHeightPositioning:L=0,contextWidthPositioning:N=0,onSave:$=()=>Promise.resolve(),onSaveInfoChange:M,attachmentAction:P={addAttachment:()=>Promise.resolve(""),deleteAttachment:()=>Promise.resolve(""),viewAttachment:()=>Promise.resolve()},onSaveDelay:R=3e3,scroller:F=!1,columnContextEnable:H=!0,rowContextEnable:W=!0,sheetBarContextEnable:X=!0,minimumColumnWidth:Y=100,disableDeleteOption:B=!1,maxRowLimit:I=1/0,maxColLimit:_=1/0,maxSheetLimit:K=1/0,getActiveCell:V=()=>{}})=>{const q=o(null),[z,G]=a([]),[J,Q]=a(""),[U,Z]=l.useState({open:!1,contextType:null,options:[{label:"",value:"",iconName:"",action:()=>{},disableTooltip:"",disable:!1,visible:!1}]}),[ee,te]=a({name:"defaultSheet",index:0}),[ne,le]=a({defaultSheet:[[s]]}),[oe,ae]=a([[s]]),[ie,re]=a(($.length,{})),[se,ce]=a({x:0,y:0}),me=o(""),de=o(null),ue=o(null),pe=o(null);i(()=>{const e=E;if(e){const t=e.map(e=>e.sheetName);G(t),d(t.length)||(me.current=t[0]||"",te({name:t[0]||"",index:0}));const n={},l={};e.forEach(e=>{const t=e.sheetName,o=e.data,a=Math.max(O,o.length),i=Math.max(k,Math.max(...o.map(e=>e.length)));let r=Array.from({length:a},()=>Array(i).fill({value:"",style:s.style,readOnly:!1,inputType:void 0}));o.forEach((e,t)=>{e.forEach((e,n)=>{var l;t<a&&n<i&&(r[t]||(r[t]=[]),r[t][n]={value:(l=e.value,null==l?null:l),style:d(e?.style)?s.style:g(e?.style),readOnly:!!e?.readOnly&&e?.readOnly,inputType:e?.inputType??void 0,contextDisable:e.contextDisable})})});const c=new Set([...e?.rows?.readOnly?e.rows.readOnly.map(e=>`r${e}`):[],...e?.columns?.readOnly?e.columns.readOnly.map(e=>`c${e}`):[],...e?.cells?.readOnly?e.cells.readOnly.map(([e,t])=>`${e},${t}`):[]]);if(r.forEach((t,n)=>{t.forEach((t,l)=>{r[n]||(r[n]=[]);const o=c.has(`r${n+1}`)||c.has(`c${l+1}`)||c.has(`${n+1},${l+1}`),a=((t,n,l)=>l?.inputType?l.inputType:e?.rows?.inputType?.[t+1]||e?.columns?.inputType?.[n+1]||e?.cells?.inputType?.[`${t+1},${n+1}`]||{type:"text"})(n,l,t||s);r[n][l]={...t,value:t?.value??"",readOnly:t?.readOnly?t.readOnly:o,inputType:a,contextDisable:t?.contextDisable}})}),n[t]=r,$.length>1){const e=o[0]||[];l[t]=Array.from({length:i},(t,n)=>({newData:"",oldData:e[n]?.value||""}))}}),le(n),$.length>1&&re(l);const o=Object.keys(n)[0];o&&void 0!==n[o]&&ae(n[o])}},[E]),i(()=>{M&&M(J),"File saved"===J&&setTimeout(()=>{Q("")},2e3)},[J]),i(()=>{Q("Saving..."),he(xe())},[ne,me.current]);const he=l.useCallback(w(e=>{if($.length>1){const t={...ie};z.forEach((n,l)=>{const o=(e[l].data[0]||[]).map(e=>e?.value||"");t[n]=(t[n]||[]).map((e,t)=>({...e,newData:o[t]||""}))}),re(t);const n=z.map(e=>({sheetName:e,headers:t[e]||[]}));$(e,n)}else $(e);Q("File saved")},R),[$,ie,z]),fe=l.useCallback(e=>{e.ctrlKey&&"s"===e.key&&(e.preventDefault(),e.stopPropagation(),he(xe()))},[$]);l.useEffect(()=>(document.addEventListener("keydown",fe),()=>{document.removeEventListener("keydown",fe)}),[fe]);const xe=()=>z.map(e=>{const t=ne[e]?.map(e=>{const t=e.reduce((e,t,n)=>""!==String(t?.value??"").trim()?n:e,-1),n=e.map((e,n)=>e&&e.style&&n<=t?{value:e.value,style:b(e.style),readOnly:e.readOnly,inputType:e.inputType,contextDisable:e.contextDisable}:null).filter(e=>null!==e);return n.length>0?n:[]})||[],n=t.filter((e,n)=>{const l=t.slice(n+1).some(e=>e.length>0);return e.length>0||l});return{sheetName:e,data:d(n.length)?[[]]:n}}),[ve,ye]=a(null),ge=()=>z.length>=K,be=()=>{if(ge())return;const e=((e,t)=>{const n=t.map(e=>e.toLowerCase());let l=`${e}1`,o=2;for(;n.includes(l.toLowerCase());)l=`${e}${o}`,o++;return l})("Sheet",z),t=Array.from({length:O},()=>Array.from({length:k},()=>s));G(t=>[...t,e]),te({index:z?.length,name:e}),le({...ne,[e]:t}),ae(t),$.length>1&&re(t=>({...t,[e]:Array.from({length:k},()=>({newData:"",oldData:""}))})),me.current=e},we=(e=[[s]])=>{ae(e)},Ce=(e,t,n)=>{const l=e.target;if(!l||l?.textContent?.trim()===n?.trim())return void ye(null);const o=(l.textContent||"").trim();if(!o)return x.warning("Sheet name cannot be empty."),l.textContent=ee.name,void ye(null);if(o.length>50)return x.warning("The sheet name cannot be greater than 50 characters"),l.textContent=ee.name,void ye(null);if(z.map(e=>e.toLowerCase()).includes(o.toLowerCase())&&n.trim()?.toLowerCase()!==o?.toLowerCase())return x.warning("Sheet name already exists"),l.textContent=ee.name,void ye(null);let a=z;we(ne?.[n]),a.splice(t,1,o);const i=function(e,t,n){if(!(t in e))throw new Error(`Key "${t}" not found in object`);const{[t]:l,...o}=e;return{...o,[n]:l??[]}}(ne,n,o);me.current=o,te(e=>({...e,name:o})),le(i),$.length>1&&re(e=>{const t={...e},l=t[n];return delete t[n],t[o]=l??[],t}),ye(null)};const Ee=(e,t)=>{e!==ee.name&&t!==ee.index&&(te({index:t,name:e}),G(n=>{const l=[...n];return l[t]=e,l}),we(ne[e]),me.current=e)},Te=l.useCallback((e,t=!1)=>{const n=e.target;(!n.closest(".ff-excel-tab-list")&&!n.closest(".ff-excel-sheet")||t)&&U.open&&(Z({open:!1,contextType:null,options:[{label:"",value:"",iconName:"",action:()=>{},disableTooltip:"",visible:!1,disable:!1}]}),t||(e.preventDefault(),e.stopPropagation()))},[U.open]);l.useEffect(()=>(document.addEventListener("contextmenu",Te),document.addEventListener("click",e=>Te(e,!0)),()=>{document.removeEventListener("contextmenu",Te),document.removeEventListener("click",e=>Te(e,!0))}),[Te]);const De=(e,t,n)=>{e.preventDefault();const l=[{label:"Add Sheet",value:"Add Sheet",iconName:"plus_icon",action:()=>be(),disableTooltip:"Sheet limit reached",visible:!1,disable:ge()},...B?[]:[{label:"Delete Sheet",value:"Delete Sheet",iconName:"delete",action:()=>((e,t)=>{if(z.length>1){let n=z.slice();n.splice(t,1);const l={...ne};delete l[e];const o=Math.min(t,n.length-1);G(n),le(l),$.length>1&&re(t=>{const n={...t};return delete n[e],n});const a=n[o]?n[o]:"";te({index:o,name:a}),we(l?.[a]),me.current=a}else x.warning("Cannot delete the last sheet.")})(t,n),disableTooltip:"",visible:!1,disable:!1}]];Z(e=>({...e,open:!0,contextType:"sheet",options:l}))};i(()=>{pe.current?.removeSelect()},[ee.name]);return e(t,{children:z.length>0&&n("div",{ref:de,className:"ff-excel",onContextMenu:e=>{e.preventDefault();const t=ue.current?.parentElement?.getBoundingClientRect(),n=window.scrollX,l=window.scrollY;let o=e.clientX-(t?.left||0)+n,a=e.clientY-(t?.top||0)+l;const i=300,r=window.innerWidth,s=window.innerHeight,c=r-e.clientX,m=e.clientX,d=s-e.clientY,u=e.clientY;c<i&&m>=i?o=e.clientX-(t?.left||0)+n-150:o+=2,d<200&&u>=200?a=e.clientY-(t?.top||0)+l-20:a+=2,e.target.classList.contains("ff-excel-tab-list")?ce({x:o,y:a-(B?32:65)}):(o+i>r&&(o=r-i-2),o<0&&(o=2),ce({x:o+N,y:a+L}))},onClick:e=>{e.stopPropagation(),U.open&&Z({open:!1,contextType:null,options:[{label:"",value:"",iconName:"",action:()=>{},disableTooltip:"",visible:!1,disable:!1}]})},children:[e("div",{ref:ue,className:"ff-excel-sheet",children:e(r,{ref:pe,editable:j,attachmentAction:P,toolbar:D,sheetHeight:A,setContextMenu:Z,contextOption:T,data:oe,columnContextEnable:H,rowContextEnable:W,minimumColumnWidth:Y,onEvaluatedDataChange:e=>{le(t=>({...t,[me.current]:e}))},workRef:de,scroller:F,maxRowLimit:I,maxColLimit:_,disableDeleteOption:B,contextMenu:U,getActiveCell:V,onAddColumn:(e,t)=>{$.length>1&&re(n=>{const l=ee.name,o=[...n[l]||[]],a=t?e:e+1;return o.splice(a,0,{newData:"",oldData:""}),{...n,[l]:o}})},onDeleteColumn:e=>{$.length>1&&re(t=>{const n=ee.name,l=[...t[n]||[]];return l.splice(e,1),{...t,[n]:l}})}},ee.name)}),"hide"!==S&&n("div",{className:"ff-excel-sheet-bar",children:["show"===S&&n("div",{className:"ff-excel-add-sheet-set",children:[e(u,{title:ge()?"Sheet limit reached":"Add Sheet",placement:"top",children:e(m,{disabled:!j||ge(),className:"ff-excel-add-sheet-icon",hoverEffect:!0,onClick:be,name:"plus_icon",height:20,width:20})}),e(C,{options:(t=>t.map((t,l)=>({label:n("div",{style:{display:"flex",gap:"8px"},children:[ee?.name===t?e(m,{height:16,width:16,name:"tick"}):e("div",{style:{height:"16px",width:"24px"}}),e(u,{title:h(t,20,"count")?t:"",children:e(y,{children:p(t,20,"count")})})]}),name:l,value:t})))(z),targetRef:q,onOptionClick:e=>{const{value:t,name:n=""}=e;Ee(t,parseInt(n))},dropdownPlacement:"top",iconName:"show_script",tooltipTitle:"All Sheets",tooltipPlacement:"top",dropdownHeight:215,selectedValue:ee.name})]}),e("div",{className:"ff-excel-tab-container",children:z.map((t,n)=>e(y,{lineHeight:"16px",children:e("div",{onContextMenu:e=>{Ee(t,n),X&&De(e,t,n)},className:c("ff-excel-tab-list",{active:t===ee.name}),onClick:()=>{Ee(t,n)},suppressContentEditableWarning:ve===n,onDoubleClick:e=>{"show"===S&&(ye(n),null===ve&&setTimeout(()=>(e=>{const t=document.createRange(),n=window.getSelection();t.selectNodeContents(e),t.collapse(!1),n?.removeAllRanges(),n?.addRange(t)})(e.target),0))},contentEditable:j&&ve===n,onBlur:e=>{Ce(e,n,t)},onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),Ce(e,n,t))},children:t})},t))})]}),U.open&&e(v,{contextMenu:U,position:se,editable:j}),e(f,{})]})})};export{E as default};

package/lib/components/Excel/ExcelFile/ExcelFile.scss.js

@@ -0,0 +1 @@
+import e from"../../../node_modules/style-inject/dist/style-inject.es.js";e(".ff-excel{position:relative}.ff-excel .ff-excel-sheet{max-width:100%;position:relative;top:0}.ff-excel .ff-excel-sheet-bar{align-items:center;box-shadow:0 0 4px -1px var(--toggle-strip-shadow);color:var(--brand2-color);display:flex;height:32px;margin-left:60px;max-width:100%;position:static}.ff-excel .ff-excel-sheet-bar .ff-excel-add-sheet-set{align-items:center;background-color:var(--tab-bg-color);display:flex;gap:8px;height:100%;justify-content:center;left:0;position:relative;top:0;width:80px}.ff-excel .ff-excel-sheet-bar .ff-excel-add-sheet-set .ff-excel-add-sheet-icon{padding:6px 10px}.ff-excel .ff-excel-sheet-bar .ff-excel-tab-container{align-items:center;display:flex;height:32px;overflow-x:auto;scrollbar-width:none}.ff-excel .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list{background-color:var(--hover-color);cursor:pointer;height:100%;min-width:max-content;padding:8px 9px}.ff-excel .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active{background-color:var(--excel-sheet-button-color);height:100%;padding:8px 9px}.ff-excel .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus{outline:none;text-decoration:none}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4Y2VsRmlsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFVBQ0UsaUJBQ0YsQ0FDQSwwQkFFRSxjQUFlLENBRGYsaUJBQWtCLENBRWxCLEtBQ0YsQ0FDQSw4QkFNRSxrQkFBbUIsQ0FFbkIsa0RBQXVELENBRHZELHlCQUEwQixDQUgxQixZQUFhLENBQ2IsV0FBWSxDQUZaLGdCQUFpQixDQURqQixjQUFlLENBRGYsZUFRRixDQUNBLHNEQUlFLGtCQUFtQixDQUZuQixvQ0FBcUMsQ0FDckMsWUFBYSxDQU9iLE9BQVEsQ0FEUixXQUFZLENBSlosc0JBQXVCLENBR3ZCLE1BQVMsQ0FQVCxpQkFBa0IsQ0FNbEIsS0FBTSxDQUROLFVBS0YsQ0FDQSwrRUFDRSxnQkFDRixDQUNBLHNEQUlFLGtCQUFtQixDQUZuQixZQUFhLENBRGIsV0FBWSxDQUVaLGVBQWdCLENBRWhCLG9CQUNGLENBQ0EseUVBS0UsbUNBQW9DLENBRHBDLGNBQWUsQ0FGZixXQUFZLENBQ1oscUJBQXNCLENBRnRCLGVBS0YsQ0FDQSxnRkFDRSxnREFBaUQsQ0FFakQsV0FBWSxDQURaLGVBRUYsQ0FDQSwrRUFDRSxZQUFhLENBQ2Isb0JBQ0YiLCJmaWxlIjoiRXhjZWxGaWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZmYtZXhjZWwge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG4uZmYtZXhjZWwgLmZmLWV4Y2VsLXNoZWV0IHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIHRvcDogMDtcbn1cbi5mZi1leGNlbCAuZmYtZXhjZWwtc2hlZXQtYmFyIHtcbiAgcG9zaXRpb246IHN0YXRpYztcbiAgbWF4LXdpZHRoOiAxMDAlO1xuICBtYXJnaW4tbGVmdDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAgaGVpZ2h0OiAzMnB4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBjb2xvcjogdmFyKC0tYnJhbmQyLWNvbG9yKTtcbiAgYm94LXNoYWRvdzogMHB4IDBweCA0cHggLTFweCB2YXIoLS10b2dnbGUtc3RyaXAtc2hhZG93KTtcbn1cbi5mZi1leGNlbCAuZmYtZXhjZWwtc2hlZXQtYmFyIC5mZi1leGNlbC1hZGQtc2hlZXQtc2V0IHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10YWItYmctY29sb3IpO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgd2lkdGg6IDgwcHg7XG4gIHRvcDogMDtcbiAgbGVmdDogMHB4O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGdhcDogOHB4O1xufVxuLmZmLWV4Y2VsIC5mZi1leGNlbC1zaGVldC1iYXIgLmZmLWV4Y2VsLWFkZC1zaGVldC1zZXQgLmZmLWV4Y2VsLWFkZC1zaGVldC1pY29uIHtcbiAgcGFkZGluZzogNnB4IDEwcHg7XG59XG4uZmYtZXhjZWwgLmZmLWV4Y2VsLXNoZWV0LWJhciAuZmYtZXhjZWwtdGFiLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMzJweDtcbiAgZGlzcGxheTogZmxleDtcbiAgb3ZlcmZsb3cteDogYXV0bztcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgc2Nyb2xsYmFyLXdpZHRoOiBub25lO1xufVxuLmZmLWV4Y2VsIC5mZi1leGNlbC1zaGVldC1iYXIgLmZmLWV4Y2VsLXRhYi1jb250YWluZXIgLmZmLWV4Y2VsLXRhYi1saXN0IHtcbiAgcGFkZGluZzogOHB4IDlweDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtaW4td2lkdGg6IG1heC1jb250ZW50O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWhvdmVyLWNvbG9yKTtcbn1cbi5mZi1leGNlbCAuZmYtZXhjZWwtc2hlZXQtYmFyIC5mZi1leGNlbC10YWItY29udGFpbmVyIC5mZi1leGNlbC10YWItbGlzdC5hY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1leGNlbC1zaGVldC1idXR0b24tY29sb3IpO1xuICBwYWRkaW5nOiA4cHggOXB4O1xuICBoZWlnaHQ6IDEwMCU7XG59XG4uZmYtZXhjZWwgLmZmLWV4Y2VsLXNoZWV0LWJhciAuZmYtZXhjZWwtdGFiLWNvbnRhaW5lciAuZmYtZXhjZWwtdGFiLWxpc3Q6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xuICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG59Il19 */");