beautiful-grid 1.0.0-rc.1

package/cjs/components/CellEditorIcon.js

@@ -0,0 +1,209 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellEditorIcon = CellEditorIcon;
+var React = __importStar(require("react"));
+var store_1 = require("../store");
+function CellEditorIcon(_a) {
+    var _this = this;
+    var _b, _c;
+    var hostCell = _a.hostCell, index = _a.index, columnIndex = _a.columnIndex, column = _a.column, item = _a.item, value = _a.value, editing = _a.editing;
+    var config = column.editorIcon;
+    var active = (0, store_1.useAppStore)(function (state) { var _a, _b; return ((_a = state.activeCell) === null || _a === void 0 ? void 0 : _a.rowIndex) === index && ((_b = state.activeCell) === null || _b === void 0 ? void 0 : _b.columnIndex) === columnIndex; });
+    var interactionSession = (0, store_1.useAppStore)(function (s) { return s.cellInteractionSession; });
+    var beginCellEdit = (0, store_1.useAppStore)(function (s) { return s.beginCellEdit; });
+    var beginEditorIconInteraction = (0, store_1.useAppStore)(function (s) { return s.beginEditorIconInteraction; });
+    var cancelCellInteraction = (0, store_1.useAppStore)(function (s) { return s.cancelCellInteraction; });
+    var handleGridClick = (0, store_1.useAppStore)(function (s) { return s.handleClick; });
+    var requestCellCommit = (0, store_1.useAppStore)(function (s) { return s.requestCellCommit; });
+    var isCellInteractionSessionActive = (0, store_1.useAppStore)(function (s) { return s.isCellInteractionSessionActive; });
+    var callbackSessionIdRef = React.useRef(undefined);
+    var cleanupRef = React.useRef(undefined);
+    var runCleanup = React.useCallback(function () {
+        var cleanup = cleanupRef.current;
+        cleanupRef.current = undefined;
+        if (!cleanup)
+            return;
+        try {
+            cleanup();
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('[BGrid] editorIcon cleanup failed.', error);
+            }
+        }
+    }, []);
+    React.useEffect(function () {
+        var sessionId = callbackSessionIdRef.current;
+        if (sessionId === undefined || (interactionSession === null || interactionSession === void 0 ? void 0 : interactionSession.id) === sessionId)
+            return;
+        callbackSessionIdRef.current = undefined;
+        runCleanup();
+    }, [interactionSession === null || interactionSession === void 0 ? void 0 : interactionSession.id, runCleanup]);
+    React.useEffect(function () { return function () {
+        var sessionId = callbackSessionIdRef.current;
+        if (sessionId !== undefined)
+            cancelCellInteraction(sessionId);
+        runCleanup();
+    }; }, [cancelCellInteraction, runCleanup]);
+    if (!config)
+        return null;
+    var params = {
+        column: column,
+        index: index,
+        columnIndex: columnIndex,
+        item: item,
+        values: item.values,
+        value: value,
+        active: active,
+    };
+    var ariaLabel = typeof config.ariaLabel === 'function'
+        ? config.ariaLabel(params)
+        : (_b = config.ariaLabel) !== null && _b !== void 0 ? _b : (typeof column.label === 'string' ? "".concat(column.label, " \uD3B8\uC9D1") : '셀 편집');
+    var isOwnIconSession = (interactionSession === null || interactionSession === void 0 ? void 0 : interactionSession.kind) === 'editorIcon' &&
+        interactionSession.cell.rowIndex === index &&
+        interactionSession.cell.columnIndex === columnIndex;
+    var hiddenWhileEditing = editing && !config.onClick;
+    var activate = function () { return __awaiter(_this, void 0, void 0, function () {
+        var session, terminal, cancel, cleanup, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handleGridClick(index, columnIndex);
+                    if (!config.onClick) {
+                        beginCellEdit(hostCell, 'preserve', 'editorIcon');
+                        return [2 /*return*/];
+                    }
+                    session = beginEditorIconInteraction(hostCell);
+                    if (!session)
+                        return [2 /*return*/];
+                    callbackSessionIdRef.current = session.id;
+                    terminal = false;
+                    cancel = function () {
+                        if (terminal)
+                            return;
+                        terminal = true;
+                        cancelCellInteraction(session.id);
+                    };
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, config.onClick(__assign(__assign({}, params), { commit: function (changes, options) {
+                                if (terminal)
+                                    return Promise.resolve();
+                                terminal = true;
+                                return requestCellCommit({
+                                    sessionId: session.id,
+                                    source: 'editorIcon',
+                                    changes: changes,
+                                    options: options,
+                                });
+                            }, cancel: cancel }))];
+                case 2:
+                    cleanup = _a.sent();
+                    if (typeof cleanup === 'function') {
+                        if (isCellInteractionSessionActive(session.id))
+                            cleanupRef.current = cleanup;
+                        else
+                            cleanup();
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    cancel();
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.warn('[BGrid] editorIcon onClick failed.', error_1);
+                    }
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React.createElement("button", { type: 'button', className: 'bgrid-editor-icon', "data-visibility": (_c = config.visibility) !== null && _c !== void 0 ? _c : 'always', "data-active": active ? 'true' : undefined, "data-busy": isOwnIconSession ? 'true' : undefined, "aria-label": ariaLabel, "aria-busy": isOwnIconSession || undefined, tabIndex: active && hostCell.rowIndex === index ? 0 : -1, hidden: hiddenWhileEditing || isOwnIconSession, onPointerDown: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }, onClick: function (event) {
+            event.stopPropagation();
+            void activate();
+        } },
+        React.createElement("span", { className: 'bgrid-editor-icon-content', "aria-hidden": 'true' }, typeof config.render === 'function' ? config.render(params) : config.render)));
+}

package/cjs/components/CellNavigationDomSync.js

@@ -0,0 +1,117 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellNavigationDomSync = CellNavigationDomSync;
+var React = __importStar(require("react"));
+/**
+ * Keeps the compatibility classes/data attributes on rendered table cells and
+ * axes without making every body/header subscribe to navigation state.
+ * Selection geometry itself is rendered by the lightweight overlay layer.
+ */
+function CellNavigationDomSync(_a) {
+    var containerRef = _a.containerRef, activeCell = _a.activeCell, cellSelectionRanges = _a.cellSelectionRanges, hasMultiCellSelection = _a.hasMultiCellSelection, rowCount = _a.rowCount, columnCount = _a.columnCount;
+    React.useLayoutEffect(function () {
+        var container = containerRef.current;
+        if (!container)
+            return;
+        container
+            .querySelectorAll('[data-bgrid-cell-active="true"], [data-bgrid-cell-active-multi-selection="true"]')
+            .forEach(function (cell) {
+            cell.classList.remove('bgrid-cell-active', 'bgrid-cell-active-multi-selection');
+            cell.removeAttribute('data-bgrid-cell-active');
+            cell.removeAttribute('data-bgrid-cell-active-multi-selection');
+        });
+        if (activeCell) {
+            container
+                .querySelectorAll("td[data-bgrid-cell=\"true\"][data-bgrid-logical-row-index=\"".concat(activeCell.rowIndex, "\"][data-column-index=\"").concat(activeCell.columnIndex, "\"]"))
+                .forEach(function (cell) {
+                cell.classList.add('bgrid-cell-active');
+                cell.setAttribute('data-bgrid-cell-active', 'true');
+                if (hasMultiCellSelection) {
+                    cell.classList.add('bgrid-cell-active-multi-selection');
+                    cell.setAttribute('data-bgrid-cell-active-multi-selection', 'true');
+                }
+            });
+        }
+        var coversEveryColumn = cellSelectionRanges.some(function (range) { return coversCompleteAxis(range.startColumnIndex, range.endColumnIndex, columnCount); });
+        var coversEveryRow = cellSelectionRanges.some(function (range) { return coversCompleteAxis(range.startRowIndex, range.endRowIndex, rowCount); });
+        var wholeRowSelection = coversEveryColumn && !coversEveryRow;
+        var wholeColumnSelection = coversEveryRow && !coversEveryColumn;
+        container.querySelectorAll('.bgrid-line-number-cell[data-row-index]').forEach(function (cell) {
+            var rowIndex = Number(cell.dataset.rowIndex);
+            var active = !wholeColumnSelection &&
+                Number.isFinite(rowIndex) &&
+                isRowAxisActive(rowIndex, activeCell, cellSelectionRanges);
+            cell.classList.toggle('bgrid-row-axis-active', active);
+            if (active)
+                cell.setAttribute('data-bgrid-row-axis-active', 'true');
+            else
+                cell.removeAttribute('data-bgrid-row-axis-active');
+        });
+        container.querySelectorAll('[data-header-cell-type][data-column-index]').forEach(function (cell) {
+            var columnIndex = Number(cell.dataset.columnIndex);
+            var active = cell.dataset.headerCellType === 'column' &&
+                !wholeRowSelection &&
+                Number.isFinite(columnIndex) &&
+                isColumnAxisActive(columnIndex, activeCell, cellSelectionRanges);
+            cell.classList.toggle('bgrid-column-axis-active', active);
+            if (active)
+                cell.setAttribute('data-bgrid-column-axis-active', 'true');
+            else
+                cell.removeAttribute('data-bgrid-column-axis-active');
+        });
+    });
+    return null;
+}
+function coversCompleteAxis(first, second, length) {
+    return length > 0 && Math.min(first, second) === 0 && Math.max(first, second) === length - 1;
+}
+function isRowAxisActive(rowIndex, activeCell, ranges) {
+    if ((activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowIndex) === rowIndex)
+        return true;
+    return ranges.some(function (range) { return isWithin(rowIndex, range.startRowIndex, range.endRowIndex); });
+}
+function isColumnAxisActive(columnIndex, activeCell, ranges) {
+    if ((activeCell === null || activeCell === void 0 ? void 0 : activeCell.columnIndex) === columnIndex)
+        return true;
+    return ranges.some(function (range) {
+        var rangeStart = Math.min(range.startColumnIndex, range.endColumnIndex);
+        var rangeEnd = Math.max(range.startColumnIndex, range.endColumnIndex);
+        return columnIndex >= rangeStart && columnIndex <= rangeEnd;
+    });
+}
+function isWithin(value, first, second) {
+    return value >= Math.min(first, second) && value <= Math.max(first, second);
+}