@sankhyalabs/core 5.20.0-dev.5 → 5.20.0-dev.50

package/src/utils/OverflowWatcher/index.ts

@@ -0,0 +1,243 @@
+import { JSUtils } from "../JSUtils.js";
+import { OverflowDirection } from "./types/overflow-direction.js"
+import { OnOverflowCallBack } from "./types/overflow-callback.js"
+import { calcMarginSize } from '../ElementUtils.js';
+
+export * from "./types/overflow-direction.js";
+export * from "./types/overflow-callback.js";
+
+export const OVERFLOWED_CLASS_NAME = 'overflowed';
+
+export default class OverflowWatcher {
+    private _onResize:OnOverflowCallBack;
+    private _resizeObserver:ResizeObserver;
+    private _lastContainerSize:number|undefined = undefined;
+    private _lastContainerInstance: HTMLElement | undefined = undefined;
+    private _scrollDirection = OverflowDirection.HORIZONTAL;
+    private _propSize:string;
+    private _hiddenItemsProps:Map<Element, SizeProps> = new Map();
+    private _notOverFlowPros:Map<string, SizeProps> = new Map();
+    private _deltaSize:number;
+    private _notOverFlow: string[] = [];
+
+    readonly DATA_ELEMENT_ID = 'data-element-id';
+
+    /**
+     * Cria uma instancia do OverflowWatcher
+     *
+     * @param element - Elemento HTML que o overflow será observado.
+     * @param callback - Função que sera chamada quando ocorrer overflow no elemento.
+     * @param overFlowDirection - Indica direção que o overflow será monitorado.
+     * @param deltaSize - Variação de tamanho que será considerada como overflow.
+     * @param debounce - Tempo até execução do callback em milissegundos.
+     * @param notOverFlow - Lista de ids ou data-element-ids dos elementos que não devem sofrer overFlow.
+     */
+    constructor({
+                    element,
+                    callback,
+                    overFlowDirection = OverflowDirection.HORIZONTAL,
+                    debounce = 200,
+                    deltaSize = 0,
+                    notOverFlow = []
+    }: OverFlowWatcherParams){
+        this._onResize = callback;
+        this._scrollDirection = overFlowDirection;
+        this._propSize = (OverflowDirection.HORIZONTAL === overFlowDirection) ? "width" : "height";
+        this._resizeObserver = new ResizeObserver(JSUtils.debounce((entries: ResizeObserverEntry[]) => this.handleResize(entries), debounce));
+        this._resizeObserver.observe(element);
+        this._deltaSize = deltaSize;
+        this._notOverFlow = notOverFlow;
+    }
+
+    public addNotOverFlowElement(elementId: string){
+        if(!this._notOverFlow.includes(elementId)){
+            this._notOverFlow.push(elementId);
+        }
+    }
+
+    public destroy(){
+        this._resizeObserver.disconnect();
+    }
+
+    public forceUpdate(){
+        if(this._lastContainerSize && this._lastContainerInstance){
+            this.updateOverFlowedItems(this._lastContainerInstance, this._lastContainerSize);
+        }
+    }
+
+    private handleResize(entries: ResizeObserverEntry[]){
+        if(!entries || entries.length === 0) return;
+
+        const container = entries[0];
+        const containerSize:number = (container.contentRect as any)[this._propSize];
+        if(!containerSize) return;
+
+        if(this.hasChangedSize(containerSize)){
+           this.updateOverFlowedItems(container.target as HTMLElement, containerSize);
+        }
+    }
+
+    private updateOverFlowedItems(container: HTMLElement, containerSize: number){
+        const children:Element[] = Array.from(container.children);
+        this.registerNotOverflowProps(children);
+        this.proccessElements(containerSize, children);
+        this._lastContainerSize = containerSize;
+        this._lastContainerInstance = container;
+    }
+
+    private registerNotOverflowProps(children: Element[]) {
+        children.forEach(childElement => {
+            const id = childElement.id || this.getDataElementId(childElement);
+            if (this.canNotRegisterNotOverFlow(id)) return;
+            this._notOverFlowPros.set(id, this.getElementSizeProps(childElement));
+        });
+    }
+
+    private canNotRegisterNotOverFlow(id: string) {
+        return !id || !this._notOverFlow.includes(id) || this._notOverFlowPros.has(id);
+    }
+
+    private hasChangedSize(elementSize: number):boolean{
+        if(!this._lastContainerSize) return true;
+        const variation = elementSize - this._lastContainerSize;
+
+        if(variation < 0){
+            const absoluteVariation = Math.abs(variation);
+            return (absoluteVariation > this._deltaSize);
+        }
+
+        return variation > 0;
+    }
+
+    private proccessElements(elementSize:number, children:Element[]){
+        if(children.length === 0) return;
+
+        const childrenSize = this.calcChildrenSize(children);
+        let diff = Number((elementSize - childrenSize).toFixed(4));
+
+        if(diff > 0){
+            this.clearOverFlow();
+            return;
+        }
+
+        this.proccessElementsOverFlow(children, elementSize);
+    }
+
+    private clearOverFlow(){
+        this._hiddenItemsProps = new Map();
+        this._onResize([]);
+    }
+
+    private proccessElementsOverFlow(allElements:Element[], avaliableSize:number){
+        const elementsThatFit: Element[] = [];
+        const avaliableSizeConsideringDelta = (avaliableSize - this._deltaSize);
+
+        let sumElementsSize = 0;
+        for (const element of allElements) {
+            sumElementsSize += this.calcElementSize(element);
+            if(this.exceedsAvaliableSize(sumElementsSize, elementsThatFit, avaliableSizeConsideringDelta)) break;
+            elementsThatFit.push(element);
+        }
+
+        const overFlowedElements = allElements.filter(element => this.isElementOverFlowing(elementsThatFit, element));
+
+        overFlowedElements.forEach(overFlowed => {
+            if(!this._hiddenItemsProps.has(overFlowed)){
+                this.registerElementSize(overFlowed);
+            }
+        });
+
+        this._onResize(overFlowedElements);
+    }
+
+    private isElementOverFlowing(elementsThatFit: Element[], element: Element) {
+        return !elementsThatFit.includes(element) && this.canOverFlowElement(element);
+    }
+
+    private canOverFlowElement(element: Element) {
+        return !this._notOverFlow.includes(element.id)
+          && !this._notOverFlow.includes(this.getDataElementId(element));
+    }
+
+    private getDataElementId(element: Element): string {
+        return (element as HTMLElement).getAttribute('data-element-id') ?? "";
+    }
+
+    private exceedsAvaliableSize(sumElementsSize: number, elements: Element[], avaliableSize: number): boolean {
+        if(!this._notOverFlow.length) return sumElementsSize > avaliableSize
+
+        const elementIdsToCalculate = this.canNotOverFlowNotIncludedIds(elements);
+        if(!elementIdsToCalculate.length) return sumElementsSize > avaliableSize
+
+        const variation = this.calculateVariation(elementIdsToCalculate);
+        const occupiedSize = sumElementsSize + variation;
+        return occupiedSize > avaliableSize;
+    }
+
+    private calculateVariation(elementIdsToCalculate: string[]) {
+        let variation = 0
+        elementIdsToCalculate.forEach(id => {
+            const sizeProps = this._notOverFlowPros.get(id);
+            variation += sizeProps?.size ?? 0;
+            variation += sizeProps?.margin ?? 0;
+        });
+        return variation;
+    }
+
+    private canNotOverFlowNotIncludedIds(elements: Element[]): string[]{
+        const elementsIdList = elements.map(el =>  el.id || this.getDataElementId(el)).filter(id => !!id);
+        return this._notOverFlow.filter(id => !elementsIdList.includes(id));
+    }
+
+    private registerElementSize(element: Element) {
+        const sizeProps = this.getElementSizeProps(element);
+        this._hiddenItemsProps.set(element, sizeProps);
+    }
+
+    private getElementSizeProps(element: Element) {
+        const sizeProps: SizeProps = {
+            size: (element.getBoundingClientRect() as any)[this._propSize],
+            margin: calcMarginSize(element, this._scrollDirection),
+        };
+        return sizeProps;
+    }
+
+    private calcChildrenSize(children:Element[]):number{
+        let sumChildren = 0;
+        sumChildren += this._deltaSize;
+        Array.from(children).forEach(el => sumChildren += this.calcElementSize(el));
+        return sumChildren;
+    }
+
+    private calcElementSize(el: Element) {
+        let size = 0
+        if (this.isOverFlowed(el)) {
+            const sizeProps = this._hiddenItemsProps.get(el);
+            size += sizeProps?.size ?? 0;
+            size += sizeProps?.margin ?? 0;
+            return size;
+        }
+
+        size += (el.getBoundingClientRect() as any)[this._propSize];
+        size += calcMarginSize(el, this._scrollDirection);
+        return size;
+    }
+
+    private isOverFlowed(el: Element) {
+        return el.classList.contains(OVERFLOWED_CLASS_NAME);
+    }
+}
+
+export interface OverFlowWatcherParams {
+    element:HTMLElement,
+    callback:OnOverflowCallBack,
+    overFlowDirection?:OverflowDirection,
+    deltaSize?:number,
+    debounce?: number,
+    notOverFlow?: string[]
+}
+
+interface SizeProps {
+    size: number,
+    margin: number,
+}

package/src/utils/OverflowWatcher/types/overflow-callback.ts

@@ -0,0 +1,6 @@
+/**
+ * Callback que será chamado quando o overflow de um elemento for alterado.
+ * 
+ * @param elementsOverFlow - Conjunto de elementos filhos que estão causando overflow no elemento pai.
+ */
+export type OnOverflowCallBack = (elementsOverFlow:Array<Element>) => void;

package/src/utils/OverflowWatcher/types/overflow-direction.ts

@@ -0,0 +1,7 @@
+/**
+ * Define em qual direção o overflow será observado
+ */
+export enum OverflowDirection {
+    'VERTICAL',
+    'HORIZONTAL'
+}

package/src/utils/SortingUtils.ts

@@ -0,0 +1,30 @@
+import DataUnit from "../dataunit/DataUnit.js";
+import { FieldDescriptor, Sort, SortMode } from "../dataunit/metadata/UnitMetadata.js";
+import { FieldComparator } from "../dataunit/sorting/FieldComparator.js";
+import { Record } from '../dataunit/DataUnit.js';
+
+/**
+ * `SortingUtils`: Utilizado para auxiliar na ordenacao de registros.
+ */
+export default class SortingUtils {    
+
+    public static getSortingFunction(dataUnit: DataUnit, sorting?: Array<Sort>): ((recordA: Record, recordB: Record) => number) | undefined {
+
+        if (sorting == undefined || sorting.length == 0) {
+            return undefined;
+        }
+
+        return (recordA, recordB) => {
+            for (const sort of sorting) {
+                if (sort.field){
+                    const result = FieldComparator.compare(dataUnit.getField(sort.field) as FieldDescriptor, recordA, recordB, sort.mode === SortMode.ASC);
+                    if (result != 0) {
+                        return result;
+                    }
+                }
+            }
+            return 0;
+        };
+    }
+    
+}

package/src/utils/test/objectUtils.spec.ts

@@ -0,0 +1,109 @@
+import ObjectUtils from '../ObjectUtils'
+
+describe("ObjectUtils", () => {
+    describe('hasEquivalentValues', () => {
+        it('should return true if both objects have the same property value', () => {
+            const obj1 = { value: 10 };
+            const obj2 = { value: 10 };
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(true);
+        });
+
+        it('should return false if both objects have different property values', () => {
+            const obj1 = { value: 10 };
+            const obj2 = { value: 20 };
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(false);
+        });
+
+        it('should return true if both objects are equivalent with custom property to compare', () => {
+            const obj1 = { customProp: 'hello' };
+            const obj2 = { customProp: 'hello' };
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2, 'customProp')).toBe(true);
+        });
+
+        it('should return false if both objects are not equivalent with custom property to compare', () => {
+            const obj1 = { customProp: 'hello' };
+            const obj2 = { customProp: 'world' };
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2, 'customProp')).toBe(false);
+        });
+
+        it('should return false if one object does not have the property', () => {
+            const obj1 = { value: 10 };
+            const obj2 = { anotherProp: 10 };
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(false);
+        });
+
+        it('should return true if comparing primitive values directly', () => {
+            const obj1 = 5;
+            const obj2 = 5;
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(true);
+        });
+
+        it('should return false if comparing different primitive values', () => {
+            const obj1 = 5;
+            const obj2 = 10;
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(false);
+        });
+
+        it('should return true when comparing object with a null value', () => {
+            const obj1 = null;
+            const obj2 = null;
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(true);
+        });
+
+        it('should return false when comparing object with null and non-null value', () => {
+            const obj1 = null;
+            const obj2 = { value: 5 };
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(false);
+        });
+
+        it('should return true when comparing non-object values that are equal', () => {
+            const obj1 = 'same';
+            const obj2 = 'same';
+            expect(ObjectUtils.hasEquivalentProps(obj1, obj2)).toBe(true);
+        });
+
+    });
+
+
+    it("should get an object value based on its path", async () => {
+        const obj = {
+            food: {
+                fruits: {
+                    apple: 1,
+                    banana: 2
+                }
+            }
+        };
+
+        const value = ObjectUtils.getProp(obj, "food.fruits.banana");
+        expect(value).toBe(2);
+    });
+
+    it("should get an object value based on its path", async () => {
+        const food = {
+            fruits: {
+                apple: 1,
+                banana: 2
+            }
+        }
+
+        const obj = { food };
+
+        const value = ObjectUtils.getProp(obj, "food");
+        expect(JSON.stringify(value)).toBe(JSON.stringify(food));
+    });
+
+    it("should return undefined if the path doesn't exist in the object", async () => {
+        const obj = {
+            food: {
+                fruits: {
+                    apple: 1,
+                    banana: 2
+                }
+            }
+        };
+
+        const value = ObjectUtils.getProp(obj, "vegetables");
+        expect(value).toBe(undefined);
+    });
+});

package/test/dataunit/formatting/PrettyFormatter.spec.ts

@@ -0,0 +1,177 @@
+import { getFormattedValue } from '../../../src/dataunit/formatting/PrettyFormatter';
+import { DataType, FieldDescriptor, UserInterface } from '../../../src';
+
+/**
+ * É preciso importart o utilitário DateUtils para que seus métodos
+ * estáticos sejam executados no ambiente de testes
+ */
+
+import { DateUtils } from '../../../src';
+
+describe('getFormattedValue', () => {
+  it('should return empty string when value is null', () => {
+    const value = null;
+    const descriptor = getFileFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('');
+  });
+
+  it('should return empty string when value is not an array', () => {
+    const value = 'not an array';
+    const descriptor = getFileFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('');
+  });
+
+  it('should return empty string when value is an empty array', () => {
+    const value: any[] = [];
+    const descriptor  = getFileFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('0 arquivos');
+  });
+
+  it('should return file name when value is an array with one file object', () => {
+    const value = [{ name: 'file1.txt' }];
+    const descriptor = getFileFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('file1.txt');
+  });
+
+  it('should return file count when value is an array with multiple file objects', () => {
+    const value = [{ name: 'file1.txt' }, { name: 'file2.txt' }];
+    const descriptor = getFileFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('2 arquivos');
+  });
+
+  it('should return empty string for undefined file', () => {
+    const value = undefined;
+    const descriptor = { userInterface: UserInterface.FILE } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('');
+  });
+
+  it('should handle OBJECT type with value field', () => {
+    const value = { value: 'code', label: 'label' };
+    const descriptor = { dataType: DataType.OBJECT, userInterface: UserInterface.SEARCH } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('code - label');
+  });
+
+  it('should return empty string when value is undefined', () => {
+    const value = undefined;
+    const descriptor = getObjectFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('');
+  });
+
+  it('should return value as string when value is not an object', () => {
+    const value = 12345;
+    const descriptor = getObjectFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('12345');
+  });
+
+  it('should return value.toString() when value is an object without value property', () => {
+    const value = { someProperty: 'someValue' };
+    const descriptor = getObjectFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe(value.toString());
+  });
+
+  it('should handle BOOLEAN type', () => {
+    expect(getFormattedValue(true, { dataType: DataType.BOOLEAN } as FieldDescriptor)).toBe('Sim');
+    expect(getFormattedValue(false, { dataType: DataType.BOOLEAN } as FieldDescriptor)).toBe('Não');
+  });
+
+  it('should format numbers correctly', () => {
+    const value = 1234.567;
+    const descriptor = {
+      dataType: DataType.NUMBER,
+      properties: { precision: 2, prettyPrecision: 2 },
+    } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('1.234,57');
+  });
+
+  it('should format dates correctly', () => {
+    const value = new Date('2023-07-01T14:30:00');
+    const descriptor = { userInterface: UserInterface.DATE } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('01/07/2023');
+  });
+
+  it('should format times correctly', () => {
+    const value = new Date('2023-07-01T14:30:00');
+    const descriptor = { userInterface: UserInterface.TIME } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('14:30');
+  });
+
+  it('should format datetime correctly', () => {
+    const value = new Date('2023-07-01T14:30:00');
+    const descriptor = { userInterface: UserInterface.DATETIME } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('01/07/2023 14:30');
+  });
+
+  it('should call toString with correct parameters', () => {
+    const value = 123;
+    const descriptor = { dataType: DataType.NUMBER } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('123,00');
+  });
+
+  it('should handle undefined descriptor gracefully', () => {
+    const value = 123;
+    expect(getFormattedValue(value)).toBe('123');
+  });
+
+  it('should format value correctly with OPTIONSELECTOR and matching option', () => {
+    const value = 'option1';
+    const descriptor = buildOptionSelectorFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('option1');
+  });
+
+  it('should return value with OPTIONSELECTOR and no matching option', () => {
+    const value = 'option2';
+    const descriptor = buildOptionSelectorFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('option2');
+  });
+
+  it('should format value correctly with OPTIONSELECTOR and value as object', () => {
+    const value = { value: 'option1' };
+    const descriptor = buildOptionSelectorFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('option1');
+  });
+
+  it('should return empty string with OPTIONSELECTOR and value as null', () => {
+    const value = null;
+    const descriptor = buildOptionSelectorFieldDescriptor();
+    expect(getFormattedValue(value, descriptor)).toBe('');
+  });
+
+  it('should format value correctly with OPTIONSELECTOR and options as JSON string', () => {
+    const value = 'option1';
+    const descriptor: FieldDescriptor = {
+      userInterface: UserInterface.OPTIONSELECTOR,
+      properties: { options: JSON.stringify([{ label: 'Option 1', value: 'option1' }]) },
+    } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('option1');
+  });
+
+  it('should return value with OPTIONSELECTOR and options as empty array', () => {
+    const value = 'option1';
+    const descriptor: FieldDescriptor = {
+      userInterface: UserInterface.OPTIONSELECTOR,
+      properties: { options: [] },
+    } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('option1');
+  });
+
+  it('should format masked values correctly', () => {
+    const value = '12345678901';
+    const descriptor = { properties: { mask: 'cpf' } } as FieldDescriptor;
+    expect(getFormattedValue(value, descriptor)).toBe('123.456.789-01');
+  });
+});
+
+function buildOptionSelectorFieldDescriptor(): FieldDescriptor {
+  return {
+    userInterface: UserInterface.OPTIONSELECTOR,
+    properties: { options: [{ label: 'Option 1', value: 'option1' }] },
+  } as FieldDescriptor;
+}
+
+function getFileFieldDescriptor(): FieldDescriptor{
+  return { userInterface: UserInterface.FILE } as FieldDescriptor;
+}
+
+function getObjectFieldDescriptor(): FieldDescriptor{
+  return { dataType: DataType.OBJECT } as FieldDescriptor;
+}

package/test/util/ElementUtils.spec.ts

@@ -0,0 +1,34 @@
+import { calcMarginSize } from '../../src/utils/ElementUtils';
+import { OverflowDirection } from '../../src';
+
+describe('calcMarginSize', () => {
+  it('should calculate correctly the size of horizontal margin', () => {
+    const element = document.createElement('div');
+    element.style.marginLeft = '10px';
+    element.style.marginRight = '15px';
+    document.body.appendChild(element);
+
+    const size = calcMarginSize(element, OverflowDirection.HORIZONTAL);
+    expect(size).toBe(25);
+  });
+
+  it('should calculate correctly the size of vertical margin', () => {
+    const element = document.createElement('div');
+    element.style.marginTop = '5px';
+    element.style.marginBottom = '20px';
+    document.body.appendChild(element);
+
+    const size = calcMarginSize(element, OverflowDirection.VERTICAL);
+    expect(size).toBe(25);
+  });
+
+  it('should threat values defined as zero', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+
+    const horizontalSize = calcMarginSize(element, OverflowDirection.HORIZONTAL);
+    const verticalSize = calcMarginSize(element, OverflowDirection.VERTICAL);
+    expect(horizontalSize).toBe(0);
+    expect(verticalSize).toBe(0);
+  });
+});