@datarailsshared/dr_renderer 1.5.150 → 1.5.159

package/tests/pivot-table/freeze-panes/transform-strategy.test.js

@@ -0,0 +1,304 @@
+const transformStrategy = require('../../../src/pivot-table/freeze-panes/transform-strategy');
+const { TRANSFORM_CSS_CLASSES } = require('../../../src/pivot-table/freeze-panes/constants');
+
+describe('freeze-panes/transform-strategy', () => {
+    describe('getClassStrings', () => {
+        it('should return transform class strings when enabled', () => {
+            const result = transformStrategy.getClassStrings(true);
+
+            expect(result.horizontal).toBe(' ' + TRANSFORM_CSS_CLASSES.HORIZONTAL);
+            expect(result.vertical).toBe(' ' + TRANSFORM_CSS_CLASSES.VERTICAL);
+            expect(result.axis).toBe(' ' + TRANSFORM_CSS_CLASSES.AXIS);
+        });
+
+        it('should return empty strings when disabled', () => {
+            const result = transformStrategy.getClassStrings(false);
+
+            expect(result.horizontal).toBe('');
+            expect(result.vertical).toBe('');
+            expect(result.axis).toBe('');
+        });
+
+        it('should return class strings with leading space', () => {
+            const result = transformStrategy.getClassStrings(true);
+
+            expect(result.horizontal.startsWith(' ')).toBe(true);
+            expect(result.vertical.startsWith(' ')).toBe(true);
+            expect(result.axis.startsWith(' ')).toBe(true);
+        });
+
+        it('should return object with horizontal, vertical, and axis properties', () => {
+            const result = transformStrategy.getClassStrings(true);
+
+            expect(result).toHaveProperty('horizontal');
+            expect(result).toHaveProperty('vertical');
+            expect(result).toHaveProperty('axis');
+        });
+    });
+
+    describe('initialize', () => {
+        let container;
+
+        beforeEach(() => {
+            container = document.createElement('div');
+            document.body.appendChild(container);
+        });
+
+        afterEach(() => {
+            document.body.removeChild(container);
+        });
+
+        it('should attach scroll handler to container', () => {
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(container.onscroll).toBeInstanceOf(Function);
+        });
+
+        it('should return object with destroy function', () => {
+            const result = transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(result).toBeDefined();
+            expect(result).toHaveProperty('destroy');
+            expect(typeof result.destroy).toBe('function');
+        });
+
+        it('should reset onscroll handler when destroy is called', () => {
+            const result = transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(container.onscroll).toBeInstanceOf(Function);
+
+            result.destroy();
+
+            expect(container.onscroll).toBeNull();
+        });
+
+        it('should reset transform styles when destroy is called', () => {
+            const verticalElement = document.createElement('div');
+            verticalElement.className = TRANSFORM_CSS_CLASSES.VERTICAL;
+            container.appendChild(verticalElement);
+
+            const result = transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            // Trigger scroll to apply transform
+            container.onscroll({ target: { scrollTop: 50, scrollLeft: 0, dataset: {} } });
+            expect(verticalElement.style.transform).toBe('translate(0px, 50px)');
+
+            result.destroy();
+
+            expect(verticalElement.style.transform).toBe('');
+        });
+
+        it('should work without tableInfo parameter', () => {
+            expect(() => {
+                transformStrategy.initialize(container);
+            }).not.toThrow();
+        });
+    });
+
+    describe('scroll handler', () => {
+        let container;
+
+        beforeEach(() => {
+            container = document.createElement('div');
+            document.body.appendChild(container);
+        });
+
+        afterEach(() => {
+            document.body.removeChild(container);
+        });
+
+        function createScrollEvent(target, scrollTop, scrollLeft) {
+            // Create a mock target with scroll properties
+            const mockTarget = {
+                scrollTop: scrollTop,
+                scrollLeft: scrollLeft,
+                dataset: target.dataset || {},
+            };
+            return { target: mockTarget };
+        }
+
+        it('should transform vertical freeze pane elements on scroll', () => {
+            const verticalElement = document.createElement('div');
+            verticalElement.className = TRANSFORM_CSS_CLASSES.VERTICAL;
+            container.appendChild(verticalElement);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            container.onscroll(createScrollEvent(container, 50, 0));
+
+            expect(verticalElement.style.transform).toBe('translate(0px, 50px)');
+        });
+
+        it('should transform horizontal freeze pane elements on scroll', () => {
+            const horizontalElement = document.createElement('div');
+            // The code checks for ' horizontal-freeze-pane' (with leading space)
+            // so we add a prefix class to simulate real usage
+            horizontalElement.className = 'cell ' + TRANSFORM_CSS_CLASSES.HORIZONTAL;
+            container.appendChild(horizontalElement);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            container.onscroll(createScrollEvent(container, 0, 100));
+
+            expect(horizontalElement.style.transform).toBe('translate(100px, 0px)');
+        });
+
+        it('should transform axis freeze pane elements on scroll', () => {
+            const axisElement = document.createElement('div');
+            // The code checks for ' axis-freeze-pane' (with leading space)
+            axisElement.className = 'cell ' + TRANSFORM_CSS_CLASSES.AXIS;
+            container.appendChild(axisElement);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            container.onscroll(createScrollEvent(container, 75, 50));
+
+            expect(axisElement.style.transform).toBe('translate(50px, 75px)');
+        });
+
+        it('should handle multiple elements of different types', () => {
+            const verticalElement = document.createElement('div');
+            verticalElement.className = TRANSFORM_CSS_CLASSES.VERTICAL;
+            container.appendChild(verticalElement);
+
+            const horizontalElement = document.createElement('div');
+            // Need prefix class for horizontal/axis due to includes() check with leading space
+            horizontalElement.className = 'cell ' + TRANSFORM_CSS_CLASSES.HORIZONTAL;
+            container.appendChild(horizontalElement);
+
+            const axisElement = document.createElement('div');
+            axisElement.className = 'cell ' + TRANSFORM_CSS_CLASSES.AXIS;
+            container.appendChild(axisElement);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            container.onscroll(createScrollEvent(container, 30, 20));
+
+            expect(verticalElement.style.transform).toBe('translate(0px, 30px)');
+            expect(horizontalElement.style.transform).toBe('translate(20px, 0px)');
+            expect(axisElement.style.transform).toBe('translate(20px, 30px)');
+        });
+
+        it('should skip if target has canFreezePanes dataset', () => {
+            const verticalElement = document.createElement('div');
+            verticalElement.className = TRANSFORM_CSS_CLASSES.VERTICAL;
+            container.appendChild(verticalElement);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            // Add dataset flag
+            const mockTarget = {
+                scrollTop: 50,
+                scrollLeft: 0,
+                dataset: { canFreezePanes: 'true' },
+            };
+            container.onscroll({ target: mockTarget });
+
+            // Transform should not be applied
+            expect(verticalElement.style.transform).toBe('');
+        });
+
+        it('should handle zero scroll values', () => {
+            const axisElement = document.createElement('div');
+            axisElement.className = TRANSFORM_CSS_CLASSES.AXIS;
+            container.appendChild(axisElement);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            container.onscroll(createScrollEvent(container, 0, 0));
+
+            expect(axisElement.style.transform).toBe('translate(0px, 0px)');
+        });
+
+        it('should handle no freezable elements', () => {
+            const regularElement = document.createElement('div');
+            regularElement.className = 'some-other-class';
+            container.appendChild(regularElement);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(() => {
+                container.onscroll(createScrollEvent(container, 50, 50));
+            }).not.toThrow();
+        });
+
+        it('should handle nested elements with freeze classes', () => {
+            const wrapper = document.createElement('div');
+            const verticalElement = document.createElement('div');
+            verticalElement.className = TRANSFORM_CSS_CLASSES.VERTICAL;
+            wrapper.appendChild(verticalElement);
+            container.appendChild(wrapper);
+
+            transformStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            container.onscroll(createScrollEvent(container, 25, 0));
+
+            expect(verticalElement.style.transform).toBe('translate(0px, 25px)');
+        });
+    });
+
+    describe('selectFreezableElements', () => {
+        let container;
+
+        beforeEach(() => {
+            container = document.createElement('div');
+            document.body.appendChild(container);
+        });
+
+        afterEach(() => {
+            document.body.removeChild(container);
+        });
+
+        function createScrollEvent(scrollTop, scrollLeft) {
+            return {
+                target: {
+                    scrollTop: scrollTop,
+                    scrollLeft: scrollLeft,
+                    dataset: {},
+                },
+            };
+        }
+
+        it('should select all elements with vertical freeze class', () => {
+            const el1 = document.createElement('div');
+            el1.className = TRANSFORM_CSS_CLASSES.VERTICAL;
+            const el2 = document.createElement('div');
+            el2.className = TRANSFORM_CSS_CLASSES.VERTICAL;
+            container.appendChild(el1);
+            container.appendChild(el2);
+
+            transformStrategy.initialize(container, {});
+
+            container.onscroll(createScrollEvent(10, 0));
+
+            expect(el1.style.transform).toBe('translate(0px, 10px)');
+            expect(el2.style.transform).toBe('translate(0px, 10px)');
+        });
+
+        it('should select all elements with horizontal freeze class', () => {
+            const el = document.createElement('div');
+            // Need prefix class for horizontal due to includes() check with leading space
+            el.className = 'cell ' + TRANSFORM_CSS_CLASSES.HORIZONTAL;
+            container.appendChild(el);
+
+            transformStrategy.initialize(container, {});
+
+            container.onscroll(createScrollEvent(0, 15));
+
+            expect(el.style.transform).toBe('translate(15px, 0px)');
+        });
+
+        it('should select all elements with axis freeze class', () => {
+            const el = document.createElement('div');
+            // Need prefix class for axis due to includes() check with leading space
+            el.className = 'cell ' + TRANSFORM_CSS_CLASSES.AXIS;
+            container.appendChild(el);
+
+            transformStrategy.initialize(container, {});
+
+            container.onscroll(createScrollEvent(5, 10));
+
+            expect(el.style.transform).toBe('translate(10px, 5px)');
+        });
+    });
+});

package/tsconfig.json

@@ -2,24 +2,21 @@
     "compilerOptions": {
         "declaration": true,
         "allowJs": true,
-        "declarationDir": "./src/types",
-        "checkJs": true,
-        "moduleResolution": "Node16",
-        "module": "Node16",
+        "declarationDir": "./src",
+        "checkJs": false,
+        "moduleResolution": "bundler",
+        "module": "es2022",
         "target": "esnext",
         "emitDeclarationOnly": true,
         "strict": true,
         "noImplicitAny": true
     },
     "include": [
+        "./src/index.js",
         "./src/graph-table-renderer.js",
         "./src/errors.js",
-        "./src/options/index.js",
-        "./src/options/constants.js",
-        "./src/options/elements.js",
-        "./src/options/builders.js",
-        "./src/options/presets.js",
-        "./src/options/helpers.js"
+        "./src/options/**/*.js",
+        "./src/pivot-table/freeze-panes/**/*.js"
     ],
     "exclude": ["node_modules"]
 }

package/src/types/index.d.ts

@@ -1,12 +0,0 @@
-// Re-export error types
-export * from './errors';
-
-// Re-export GraphTableRenderer types
-export * from './graph-table-renderer';
-
-// Re-export options module types
-export * from './options/builders';
-export * from './options/constants';
-export * from './options/elements';
-export * from './options/helpers';
-export * from './options/presets';

package/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/graph-table-renderer.js","./src/errors.js","./src/options/index.js","./src/options/constants.js","./src/options/elements.js","./src/options/builders.js","./src/options/presets.js","./src/options/helpers.js"],"version":"5.9.2"}