@sankhyalabs/core 0.0.0-bugfix-dev-KB-17130.1 → 0.0.0-bugfix-dev-KB-35840.0

package/src/utils/OverflowWatcher/index.ts

@@ -0,0 +1,151 @@
+import { JSUtils } from "../JSUtils.js";
+import { OverflowDirection } from "./types/overflow-direction.js"
+import { OnOverflowCallBack } from "./types/overflow-callback.js"
+
+export * from "./types/overflow-direction.js";
+export * from "./types/overflow-callback.js";
+
+export default class OverflowWatcher {
+    private _onResize:OnOverflowCallBack;
+    private _resizeObserver:ResizeObserver;
+    private _lastContentRect:DOMRectReadOnly|undefined = undefined;
+    private _scrollDirection = OverflowDirection.HORIZONTAL;
+    private _propSize:string;
+    private _hiddenItems:Element[] = [];
+    private _deltaSize:number;
+
+    /**
+     * 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.
+     */ 
+    constructor(element:HTMLElement, 
+                callback:OnOverflowCallBack, 
+                overFlowDirection:OverflowDirection = OverflowDirection.HORIZONTAL,
+                deltaSize:number = 10){
+        this._onResize = callback;
+        this._scrollDirection = overFlowDirection;
+        this._resizeObserver = new ResizeObserver(JSUtils.debounce((entries: ResizeObserverEntry[]) => this.handleResize(entries), 200));
+        this._resizeObserver.observe(element);  
+        this._propSize = this.getPropSizeByDirection();   
+        this._deltaSize = deltaSize;   
+    }
+
+    public destroy(){
+        this._resizeObserver.disconnect();
+    }
+
+    private handleResize(entries: ResizeObserverEntry[]){
+
+        if(!entries || entries.length === 0){
+            return;
+        }
+
+        const resizeItem = entries[0];
+        const contentRect:any = resizeItem.contentRect;
+
+        if(this.isChangedSize(contentRect)){
+            const children:Element[] = Array.from(resizeItem.target.children);
+            this.proccessElements(contentRect[this._propSize], children);
+            this._lastContentRect = contentRect;
+        }
+    }
+
+    private isChangedSize(newContentRect:DOMRectReadOnly):boolean{
+        if(this._lastContentRect == undefined){
+            return true;
+        }
+        return Math.abs((newContentRect as any)[this._propSize] - (this._lastContentRect as any)[this._propSize]) >= this._deltaSize;
+    }
+
+
+    private getPropSizeByDirection():string{
+        if(OverflowDirection.HORIZONTAL === this._scrollDirection){
+            return "width"
+        }
+
+        return "height";
+    }
+
+    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.proccessElementsWithoutOverFlow(diff);
+            return;
+        }
+
+        this.proccessElementsOverFlow(children, diff);
+    }
+
+    private proccessElementsWithoutOverFlow(diff:number){
+        this._hiddenItems.forEach((item:any) => {
+                
+            if(item.getBoundingClientRect().width < diff){
+                this._hiddenItems.pop();
+            }
+        
+        });
+
+        this._onResize(this._hiddenItems);
+    }
+
+    private proccessElementsOverFlow(children:Element[], diff:number){
+        const elementsOverflow = [];
+        let sumRemovedItems = 0;
+
+        while(elementsOverflow.length < children.length && sumRemovedItems < (diff * -1) ) {
+            const itemToRemove = children.pop();
+            
+            if(itemToRemove != undefined && (itemToRemove as any).style.display === 'none'){
+                continue;
+            }
+
+            if(itemToRemove != undefined){
+                elementsOverflow.push(itemToRemove);
+                sumRemovedItems += (itemToRemove.getBoundingClientRect() as any)[this._propSize];
+            }
+        }
+
+        
+        this._hiddenItems = elementsOverflow;
+        this._onResize(elementsOverflow);
+
+    }
+
+    private calcChildrenSize(children:Element[]):number{
+        let sumChildren = 0;
+
+        Array.from(children).forEach(el => {
+            sumChildren += (el.getBoundingClientRect() as any)[this._propSize];
+            sumChildren += this.calcMarginSize(el);
+        });
+
+        if(sumChildren > 0){
+            sumChildren += this._deltaSize;
+        }
+
+        return sumChildren;
+    }
+
+    private calcMarginSize(el:Element){
+        const computedStyle = getComputedStyle(el);
+
+        if(OverflowDirection.HORIZONTAL === this._scrollDirection){            
+           return (parseInt(computedStyle.marginLeft || '0') + parseInt(computedStyle.marginRight || '0'));
+        }
+
+        return (parseInt(computedStyle.marginTop || '0') + parseInt(computedStyle.marginBottom || '0'));
+    }
+
+}

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/SearchUtils.ts

@@ -0,0 +1,18 @@
+import { StringUtils } from "./StringUtils.js";
+
+/**
+ * `Search`: Utilizado para manipulação de do objeto de pesquisa.
+ */
+export class SearchUtils {
+
+    public static buildDetails(argument: String, fields: any, item: any) {
+        let details:any = {};
+        for (let index = 0; (index < fields.length); index++) {
+          const field = fields[index];
+          const itemValue = item[field.fieldName];
+          const optionValue = field.options ? field.options[itemValue] || itemValue : itemValue;
+          details[field.description] = StringUtils.highlightValue(argument, item['__matchFields'], optionValue, fields, true);
+        }
+        return details;
+    }
+}

package/src/utils/StringUtils.ts

@@ -1,4 +1,6 @@
 import { v4 as uuid } from "uuid";
+import ArrayUtils from "./ArrayUtils.js";
+import { JSUtils } from "./JSUtils.js";
 
 /**
  * `StringUtils`: Utilizado para manipulação de Strings.
@@ -414,4 +416,126 @@ export class StringUtils {
     static getOppositeCase(original: string): string {
         return this.isLowerCase(original) ? original.toUpperCase() : original.toLowerCase()
     }
+
+    public static replaceToSpace(source: string, replaceList: string[] = []) {
+        if (source == undefined) {
+          return source;
+        }
+    
+        replaceList.forEach((word: string) => {
+          const wordAux = new RegExp(word, 'g');
+          let whiteSpace = '';
+          for (let i = 0; i < word.length; i++) {
+            whiteSpace += ' ';
+          }
+          source = String(source).replace(wordAux, whiteSpace);
+        });
+    
+        return source;
+    }
+
+    public static replaceAccentuatedCharsHtmlEntities(source: string) {
+        const charsWithoutAccentuation = "AEIOU_AO_AEIOU_AEIOU_U_C_aeiou_ao_aeiou_aeiou_u_c";
+        if (source == undefined) {
+          return source;
+        }
+    
+        const replaceList = ['&amp;', '&lt;', '&gt;', '&quot;'];
+        const sourceAux = StringUtils.replaceToSpace(source, replaceList);
+    
+        return sourceAux.replace(/[^\w ]/g, (char: string) => {
+            let index = charsWithoutAccentuation.indexOf(char);
+    
+            if (index > -1) {
+                char = charsWithoutAccentuation.charAt(index);
+            }
+    
+            return char || '';
+        });
+    }
+
+    public static getSpecialCharacters(str: string) {
+        const specialCharsRegex = /[[.\-\$\+\*,_\&\(\)%\/\\#@!:\|\=\'\"]/gmi;
+        let match: any;
+        let charList = [];
+        while ((match = specialCharsRegex.exec(str))) {
+          charList.push(str[match.index]);
+        }
+        return charList;
+    }
+
+    public static replaceAll(str: string, strFrom: string, strTo: string) {
+        let pos = (str != undefined ? str : '').indexOf(strFrom);
+        while (pos > -1) {
+          str = str.replace(strFrom, strTo);
+          pos = str.indexOf(strFrom);
+        }
+        return (str);
+    }
+
+    public static removeSpecialCharacters(str: string) {
+        let specialChars = StringUtils.getSpecialCharacters(str);
+        specialChars.forEach((ch: string) => {
+          str = StringUtils.replaceAll(str, ch, '');
+        });
+    
+        return str;
+    }
+
+    public static getArgumentNumber(argument: String) {
+        return Number(argument || undefined);
+      }
+
+    public static highlightValue(argument: String, matchFields: any, value: string, fieldMD: any, forceMatch: boolean) {
+        const startHighlightTag = "<span class='card-item__highlight'>";
+        const endHighlightTag = "</span>";
+        let valueAux = JSUtils.replaceHtmlEntities(value);
+    
+        if (argument && (forceMatch || ArrayUtils.isIn(matchFields, fieldMD.fieldName))) {
+          const argumentNumber = StringUtils.getArgumentNumber(argument);
+    
+          let replacements = (isNaN(argumentNumber) ? argument : argumentNumber.toString()).split(/%|,|\s+/);
+          let lastMatchIndex = 0;
+          let cleanText = StringUtils.replaceAccentuatedCharsHtmlEntities(valueAux);
+    
+          replacements.forEach((r: string) => {
+            if (r) {
+              r = StringUtils.replaceAccentuatedCharsHtmlEntities(r);
+    
+              let specialChars = StringUtils.getSpecialCharacters(r);
+    
+              if (specialChars != undefined && specialChars.length > 0) {
+                r = StringUtils.removeSpecialCharacters(r);
+              }
+    
+              if (fieldMD.mask || fieldMD.uiType === 'CGC_CPF' || fieldMD.uiType === 'Phone') {
+                //Fazemos isso para descondirerar os caracteres especiais de formatação da string
+                r = r.split('').join('\\.?\\-?\\/?\\(?\\)?');
+              }
+    
+              let regex = new RegExp(r, "ig");
+              regex.lastIndex = lastMatchIndex;
+              let match = regex.exec(cleanText);
+    
+              if (match && match.length > 0) {
+                lastMatchIndex = match.index;
+                let sizeMatch = match[0].length;
+    
+                let txtToColor = valueAux.substring(lastMatchIndex, lastMatchIndex + sizeMatch);
+                let txtColored = txtToColor?.trim() ? startHighlightTag + txtToColor + endHighlightTag : '';
+    
+                let start = valueAux.substring(0, lastMatchIndex);
+                let end = valueAux.substring(lastMatchIndex + sizeMatch);
+    
+                valueAux = start + txtColored + end;
+                lastMatchIndex = lastMatchIndex + txtColored.length;
+    
+                cleanText = StringUtils.replaceAccentuatedCharsHtmlEntities(valueAux);
+              }
+            }
+          });
+        }
+      
+        return valueAux;
+    }
 }

package/test/util/OverflowWatcher.spec.ts

@@ -0,0 +1,118 @@
+import OverFlowWatcher, { OnOverflowCallBack, OverflowDirection } from '../../src/utils/OverflowWatcher';
+
+describe('OverflowWatcher', function () {
+
+    let element: HTMLElement;
+    let callbackHorizontalDirection: OnOverflowCallBack;
+    let watcherHorizontalDirection: OverFlowWatcher;
+    let callbackVerticalDirection: OnOverflowCallBack;
+    let watcherVerticallDirection: OverFlowWatcher;
+    let child1:HTMLDivElement;
+    let child2:HTMLDivElement;
+
+    beforeEach(() => {
+        
+        global.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        }))
+        
+        element = document.createElement('div');
+
+        //Horizontal
+        callbackHorizontalDirection = jest.fn();
+        watcherHorizontalDirection = new OverFlowWatcher(element, callbackHorizontalDirection);
+
+
+        //Vertical
+        callbackVerticalDirection = jest.fn();
+        watcherVerticallDirection = new OverFlowWatcher(element, callbackVerticalDirection, OverflowDirection.VERTICAL);
+
+        child1 = document.createElement('div');
+        child2 = document.createElement('div');
+        
+        child1.style.width = '50px';
+        child2.style.width = '100px';
+        child1.style.height = '50px';
+        child2.style.height = '100px';
+
+        //TODO: No futuro utilizar JSDOM para não precisar fazer mock dessas coisas
+        child1['getBoundingClientRect'] = () => {            
+            return  {
+                width: 50,
+                height: 50,
+            } as DOMRect;
+        }
+        
+        child2['getBoundingClientRect'] = () => {            
+            return  {
+                width: 100,
+                height: 100,
+            } as DOMRect;
+        }
+        
+        element.appendChild(child1);
+        element.appendChild(child2);
+    });
+
+    afterEach(() => {
+        watcherHorizontalDirection.destroy();
+        watcherVerticallDirection.destroy();
+    });
+
+    test('constructor initializes properties correctly', () => {
+        expect(watcherHorizontalDirection['_onResize']).toBe(callbackHorizontalDirection);
+        expect(watcherHorizontalDirection['_scrollDirection']).toBe(OverflowDirection.HORIZONTAL);
+        expect(watcherHorizontalDirection['_deltaSize']).toBe(10);
+    });
+
+   test('handleResize horizontal calls callback with hidden items', () => {
+        const entries: any[] = [{
+          contentRect: {
+            width: 120
+          },
+          target: element
+        }];
+    
+        watcherHorizontalDirection['handleResize'](entries);
+    
+        expect(callbackHorizontalDirection).toHaveBeenCalledWith([child2]);
+        
+        entries[0].contentRect.width = 100;
+        watcherHorizontalDirection['handleResize'](entries);
+
+        expect(callbackHorizontalDirection).toHaveBeenCalledWith([child2]);
+    });
+    
+    test('handleResize vertical calls callback with hidden items', () => {
+        const entries: any[] = [{
+          contentRect: {
+            height: 120
+          },
+          target: element
+        }];
+    
+        watcherVerticallDirection['handleResize'](entries);
+    
+        expect(callbackVerticalDirection).toHaveBeenCalledWith([child2]);
+    });
+
+    test('isChangedSize returns true if no previous size', () => {
+        const newContentRect: DOMRectReadOnly = { width: 100 } as DOMRectReadOnly;
+        watcherHorizontalDirection['_lastContentRect'] = undefined;
+    
+        const result = watcherHorizontalDirection['isChangedSize'](newContentRect);
+    
+        expect(result).toBe(true);
+    });
+
+    test('prevent resize without entries', () => {
+        const entries: any[] = [];
+      
+          watcherHorizontalDirection['handleResize'](entries);
+      
+          expect(callbackHorizontalDirection).toHaveBeenCalledTimes(0);
+    });
+    
+});

package/.docs/.nojekyll

@@ -1 +0,0 @@
-TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.