funda-ui 4.4.35 → 4.5.12

package/lib/esm/Textarea/index.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef, forwardRef, KeyboardEvent, useImperativeHandle } from 'react';
 
 
-
 import useComId from 'funda-utils/dist/cjs/useComId';
 import useAutosizeTextArea from 'funda-utils/dist/cjs/useAutosizeTextArea';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
+import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalculation';
+import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
 
 export type TextareaProps = {
@@ -31,6 +31,13 @@ export type TextareaProps = {
     autoSize?: boolean;
     iconLeft?: React.ReactNode | string;
     iconRight?: React.ReactNode | string;
+    aiPredict?: boolean;
+    aiPredictRemainingTextRGB?: number[];
+    aiPredictConfirmKey?: Array<string[]>;
+    aiPredictFetchFuncAsync?: any;
+    aiPredictFetchFuncMethod?: string;
+    aiPredictFetchFuncMethodParams?: any[];
+    aiPredictFetchCallback?: (data: any) => void;
 	/** -- */
 	id?: string;
     style?: React.CSSProperties;
@@ -64,6 +71,13 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
         autoSize,
         iconLeft,
         iconRight,
+        aiPredict = false,
+        aiPredictRemainingTextRGB = [153, 153, 153],
+        aiPredictConfirmKey = [['Enter'],['Tab'],['Shift', ' ']],
+        aiPredictFetchFuncAsync,
+        aiPredictFetchFuncMethod,
+        aiPredictFetchFuncMethodParams,
+        aiPredictFetchCallback,
         readOnly,
         defaultValue,
         value,
@@ -93,6 +107,173 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
     const valRef = useRef<any>(null);
     const [changedVal, setChangedVal] = useState<string>(value || '');
 
+
+    //================================================================
+    // AI Predict
+    //================================================================    
+    const [currentSuggestion, setCurrentSuggestion] = useState<string>('');
+    const [tempMatchedSuggestion, setTempMatchedSuggestion] = useState<string[]>([]);
+    const [textWidth, setTextWidth] = useState<number>(0);
+    const aiInputRef = useRef<any>(null);
+    const originInputComputedStyle = useRef<Record<string, any>>({
+        fontSize: 16,
+        fontFamily: 'inherit',
+        letterSpacing: 'normal',
+        textTop: 10
+    });
+    const [hasErr, setHasErr] = useState<boolean>(false);
+    const currentSuggestionIndex = useRef<number>(0);
+
+    
+    
+    // A list of suggestions
+    //----------------
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+    
+    //performance
+    const handleChangeSuggestionsFetchSafe = useDebounce((e: any, curVal: string) => {
+        const _oparams: any[] = aiPredictFetchFuncMethodParams || [];
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : curVal);
+        fetchSuggestionsData((_params).join(',')).then((resSuggestions: string[]) => {
+            handleInputAiPredictChange(curVal, resSuggestions);
+        });
+    }, 350, []);
+
+    async function fetchSuggestionsData(params: any) {
+
+        if (typeof aiPredictFetchFuncAsync === 'object') {
+
+            const response: any = await aiPredictFetchFuncAsync[`${aiPredictFetchFuncMethod}`](...params.split(','));
+            let _ORGIN_DATA = response.data;
+
+            // reset data structure
+            if (typeof (aiPredictFetchCallback) === 'function') {
+                _ORGIN_DATA = aiPredictFetchCallback(_ORGIN_DATA);
+            }
+
+            // Determine whether the data structure matches
+            if (!Array.isArray(_ORGIN_DATA)) {
+                console.warn('The data structure does not match, please refer to the example in the component documentation.');
+                setHasErr(true);
+                _ORGIN_DATA = [];
+            }
+
+            //
+            setSuggestions(_ORGIN_DATA);
+        
+            return _ORGIN_DATA;
+        } else {
+            return [];
+        }
+
+
+    }
+
+
+
+    // Calculates the width of the input text
+    //----------------
+    const calculateTextWidth = (text: string) => {
+        if (valRef.current) {
+            const canvas = document.createElement('canvas');
+            const context: any = canvas.getContext('2d');
+            context.font = `${originInputComputedStyle.current.fontSize}px ${originInputComputedStyle.current.fontFamily}`;
+            return context.measureText(text).width;
+        }
+        return 0;
+    };
+
+
+
+    // Get the rest of the suggested text
+    //----------------
+    const getRemainingText = (fullSuggestion: string) => {
+        if (!changedVal || !fullSuggestion) return '';
+       
+
+        // Only the parts of the suggested text that were not entered are returned
+        const lastInputChar = changedVal[changedVal.length - 1];
+        const lastCharIndex = fullSuggestion.toLowerCase().lastIndexOf(lastInputChar.toLowerCase());
+        return fullSuggestion.slice(lastCharIndex + 1);
+
+    };
+
+    // Match exactly from the start
+    //----------------
+    const preciseMatch = (input: any, suggestions: string[]) => {
+        if (!input) return '';
+
+        const filtered = suggestions.filter(s =>
+            s.toLowerCase().startsWith(input.toLowerCase())
+        );
+
+        setTempMatchedSuggestion(filtered);
+        return filtered;
+    };
+
+
+    // Fuzzy matching
+    //----------------
+    const fuzzyMatch = (input: any, suggestions: string[]) => {
+        if (!input) return '';
+
+        // Convert input to a regular expression pattern with support for arbitrary position matching
+        const pattern = input.split('').map((char: string) =>
+            char.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        ).join('.*');
+        const regex = new RegExp(pattern, 'i');
+
+        // Find the first matching suggestion (multiple matches)
+        const filtered = suggestions.filter((suggestion: string) => regex.test(suggestion));
+        setTempMatchedSuggestion(filtered);
+        return filtered;
+    };
+
+    // Handle input variations
+    //----------------
+    const handleInputAiPredictChange = (newValue: string, curSuggestions: string[]) => {
+        setTextWidth(calculateTextWidth(newValue));
+
+        // Match results
+        const matchedSuggestion = fuzzyMatch(newValue, curSuggestions);
+        setCurrentSuggestion(matchedSuggestion[0] || '');
+
+    };
+
+
+
+
+    // Calculate the color shade of the prompt text
+    //----------------
+    const calculateOpacity = () => {
+        // Transparency is calculated based on the input length
+        const baseOpacity = 0.5;
+        const inputLength = changedVal.length;
+        return Math.max(0.2, baseOpacity - (inputLength * 0.05));
+    };
+
+    
+    // Confirm
+    //----------------
+    const handleAiPredictKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+        // Prevents the default behavior of the enter key
+        e.preventDefault();
+
+        const remainingText = getRemainingText(currentSuggestion);
+        if (remainingText) {
+            // Only the second half of the text is added
+            setChangedVal(changedVal + remainingText);
+            setCurrentSuggestion('');
+        }
+    };
+
+    //
+    const remainingText = getRemainingText(currentSuggestion);
+
+
+    //================================================================
+    // General
+    //================================================================  
     // exposes the following methods
     useImperativeHandle(
         contentRef,
@@ -121,6 +302,12 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
             onResize?.(valRef.current, res);
         }
     });
+    
+
+    const propExist = (p: any) => {
+        return typeof p !== 'undefined' && p !== null && p !== '';
+    };
+
 
     function handleFocus(event: any) {
         const el = event.target;
@@ -130,6 +317,7 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
         onFocus?.(event, valRef.current);     
     }
 
+    
     function handleChange(event: any) {
         const val = event.target.value;
 
@@ -186,6 +374,49 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
             onPressEnter?.(event, valRef.current);
         }
 
+        // AI Predict
+        //----
+        if (aiPredict && currentSuggestion !== '') {
+            const keyBindings: Array<string[]> = aiPredictConfirmKey;
+            // The parameter 'registerKeyEvents' is an array, and each element is an object
+            // eg. { keys: ["Control", "S"], action: () => { console.log("Ctrl+S"); } }
+            const registerKeyEvents: Record<string, any>[] = keyBindings.map((s: string[]) => {
+                return {
+                    keys: s,
+                    action: () => {
+                        handleAiPredictKeyDown(event);
+                    },
+                };
+            });
+
+            registerKeyEvents.forEach((binding: Record<string, any>) => {
+                const keysPressed = binding.keys.every((key: string) =>
+                    key === "Shift" ? event.shiftKey :
+                        key === "Control" ? event.ctrlKey :
+                            key === "Alt" ? event.altKey :
+                                key === "Meta" ? event.metaKey :
+                                    event.key === key
+                );
+
+                if (keysPressed) {
+                    binding.action();
+                }
+            });
+
+      
+            // switch result of suggestions
+            if (event.code === 'ArrowUp') {
+                currentSuggestionIndex.current = (currentSuggestionIndex.current - 1 + tempMatchedSuggestion.length) % tempMatchedSuggestion.length;
+            }
+    
+            if (event.code === 'ArrowDown') {
+                currentSuggestionIndex.current = (currentSuggestionIndex.current + 1) % tempMatchedSuggestion.length;
+            } 
+            setCurrentSuggestion(tempMatchedSuggestion[currentSuggestionIndex.current] || '');
+
+        }
+
+
     }
 
 
@@ -234,6 +465,19 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
             }
         }
 
+        // AI Predict initalization
+        //--------------
+        if (aiPredict && valRef.current !== null) {
+            originInputComputedStyle.current = {
+                fontSize: actualPropertyValue(valRef.current as HTMLInputElement, 'fontSize'),
+                fontFamily: actualPropertyValue(valRef.current as HTMLInputElement, 'fontFamily'),
+                letterSpacing: actualPropertyValue(valRef.current as HTMLInputElement, 'letterSpacing'),
+                textTop: getTextTop(valRef.current)
+            };
+        }
+
+
+
     }, []);
 
     return (
@@ -242,45 +486,94 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
             <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 
-                <div className={clsWrite(controlGroupWrapperClassName, 'input-group')}>
-                    {typeof iconLeft !== 'undefined' && iconLeft !== null && iconLeft !== '' ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconLeft}</span></>: null}
-                    
+
+                <div className={combinedCls(
+                    'position-relative z-1',
+                    clsWrite(controlGroupWrapperClassName, 'input-group'),
+                    {
+                        'has-left-content': propExist(iconLeft),
+                        'has-right-content': propExist(iconRight)
+                    }
+                )}>
+                    {propExist(iconLeft) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconLeft}</span></> : null}
+
+                    <div className="input-group-control-container flex-fill position-relative">
                     <textarea  
-                        ref={(node) => {
-                            valRef.current = node;
-                            if (typeof externalRef === 'function') {
-                                externalRef(node);
-                            } else if (externalRef) {
-                                externalRef.current = node;
-                            }
-                        }}
-                      tabIndex={tabIndex || 0}
-					  className={combinedCls(
-                        clsWrite(controlClassName, 'form-control'),
-                        controlExClassName
-                      )}
-			          id={idRes}
-					  name={name}
-					  placeholder={placeholder || ''}
-                      defaultValue={defaultValue}
-					  value={changedVal}
-                      minLength={minLength || null}
-					  maxLength={maxLength || null}
-			          onFocus={handleFocus}
-					  onBlur={handleBlur}
-			          onChange={handleChange}
-                      onKeyDown={handleKeyPressed}
-			          disabled={disabled || null}
-					  required={required || null}
-                      readOnly={readOnly || null}
-					  cols={cols || 20}
-					  rows={rows || 2}
-                      style={style}
-                      {...attributes}
-					/>
-                     {typeof iconRight !== 'undefined' && iconRight !== null && iconRight !== '' ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconRight}</span></>: null}
+                            ref={(node) => {
+                                valRef.current = node;
+                                if (typeof externalRef === 'function') {
+                                    externalRef(node);
+                                } else if (externalRef) {
+                                    externalRef.current = node;
+                                }
+                            }}
+                            tabIndex={tabIndex || 0}
+                            className={combinedCls(
+                                clsWrite(controlClassName, 'form-control'),
+                                controlExClassName,
+                                {
+                                    'rounded': !propExist(iconLeft) && !propExist(iconRight),
+                                    'rounded-start-0': propExist(iconLeft),
+                                    'rounded-end-0': propExist(iconRight)
+                                }
+                            )}
+                            id={idRes}
+                            name={name}
+                            placeholder={placeholder || ''}
+                            defaultValue={defaultValue}
+                            value={changedVal}
+                            minLength={minLength || null}
+                            maxLength={maxLength || null}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            onChange={(e: any) => {
+                                handleChange(e);
+
+                                // AI Predict
+                                if (aiPredict) {
+                                    handleChangeSuggestionsFetchSafe(e, e.target.value);
+                                }
+                            }}
+                            onKeyDown={handleKeyPressed}
+                            disabled={disabled || null}
+                            required={required || null}
+                            readOnly={readOnly || null}
+                            cols={cols || 20}
+                            rows={rows || 2}
+                            style={style}
+                            {...attributes}
+                        />
+    
+                        {/* AI Predict */}
+                        {aiPredict && remainingText && (
+                            <div
+                                ref={aiInputRef}
+                                className="position-absolute z-1"
+                                style={{
+                                    left: `${originInputComputedStyle.current.fontSize + textWidth}px`,
+                                    top: originInputComputedStyle.current.textTop + 'px',
+                                    color: `rgba(${aiPredictRemainingTextRGB[0]}, ${aiPredictRemainingTextRGB[1]}, ${aiPredictRemainingTextRGB[2]}, ${calculateOpacity()})`,
+                                    pointerEvents: 'none',
+                                    fontSize: originInputComputedStyle.current.fontSize + 'px',
+                                    fontFamily: originInputComputedStyle.current.fontFamily,
+                                    letterSpacing: originInputComputedStyle.current.letterSpacing
+                                }}
+                            >
+                                {remainingText}
+                            </div>
+                        )}
+
+                        {/* Required marking */}
+                        {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
+
+                    </div>
+
+                    
+                    {propExist(iconRight) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconRight}</span></> : null}
+
+
                 </div>
-                {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
+                
 
             </div>
 

package/lib/esm/Tree/TreeList.tsx

@@ -194,8 +194,9 @@ export default function TreeList(props: TreeListProps) {
     function handleCollapse(e: any) {
         if ( disableCollapse ) return;
 
-        
         e.preventDefault();
+        e.stopPropagation();
+        
         const hyperlink = e.currentTarget;
         const url = hyperlink.getAttribute('href');
         const subElement = getNextSiblings(hyperlink, 'ul');
@@ -258,6 +259,8 @@ export default function TreeList(props: TreeListProps) {
 
     function handleSelect(e: any) {
         e.preventDefault();
+        e.stopPropagation();
+        
         const hyperlink = e.currentTarget;
 
         if ( hyperlink.classList.contains('selected') ) {

package/lib/esm/Tree/index.tsx

@@ -7,6 +7,7 @@ import {
     flatData
 } from 'funda-utils/dist/cjs/object';
 
+
 import TreeList from './TreeList';
 import { initUlHeight, initAsyncItems } from './init-height';
 

package/lib/esm/Utils/libs/inputsCalculation.ts

@@ -1,4 +1,21 @@
 
+
+/**
+ * Gets the relative upside of the text
+ * @param {Element} el    - A DOM node containing one selector to match against.
+ * @returns {Number}      - Returns a pure number.
+ */
+function getTextTop(el: HTMLElement) {
+    const styles = window.getComputedStyle(el);
+    const fontSize = parseFloat(styles.fontSize);
+    const lineHeight = parseFloat(styles.lineHeight) || fontSize;
+    const paddingTop = parseFloat(styles.paddingTop);
+    const borderWidth = parseFloat(styles.borderWidth);
+
+    const textTop = paddingTop + (lineHeight - fontSize) / 2 - borderWidth*2;
+    return textTop;
+}
+
 /**
 * Get the actual value with user specific methed
 * it can be 'width', 'height', 'outerWidth', 'outerHeight'
@@ -9,14 +26,14 @@
                                     takes effect when set to true
 * @return {Number}              - Returns a pure number.
 */
-function actualPropertyValue(el: any, prop: string, config: any = undefined ) {
+function actualPropertyValue(el: any, prop: string, config: any = undefined) {
     if (el === null) return 0;
 
-    const style      = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle,
-        display    = style.display,
-        position   = style.position,
+    const style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle,
+        display = style.display,
+        position = style.position,
         visibility = style.visibility;
-        
+
     let marginWidth = 0;
     let marginHeight = 0;
 
@@ -24,55 +41,65 @@ function actualPropertyValue(el: any, prop: string, config: any = undefined ) {
     let actualVal: any;
 
 
-    if ( config && config.includeMargin === true ) {
+    if (config && config.includeMargin === true) {
         marginWidth = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
         marginHeight = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
     }
 
-    
-    if ( prop === 'width' ) {
-        maxVal = parseFloat( style.maxWidth );
+    if (prop === 'fontSize') {
+        actualVal = parseFloat(style.fontSize);
+    }
+
+    if (prop === 'fontFamily') {
+        actualVal = style.fontFamily;
+    }
+
+    if (prop === 'letterSpacing') {
+        actualVal = style.letterSpacing;
+    }
+    if (prop === 'width') {
+        maxVal = parseFloat(style.maxWidth);
 
         // if its not hidden we just return normal height
-        if(display !== 'none' && maxVal !== 0) {
+        if (display !== 'none' && maxVal !== 0) {
             return el.clientWidth;
         }
     }
-    if ( prop === 'height' ) {
-        maxVal = parseFloat( style.maxHeight );
-        if(display !== 'none' && maxVal !== 0) {
+    if (prop === 'height') {
+        maxVal = parseFloat(style.maxHeight);
+        if (display !== 'none' && maxVal !== 0) {
             return el.clientHeight;
-        } 
+        }
     }
-    
-    if ( prop === 'outerWidth' ) {
-        maxVal = parseFloat( style.maxWidth );
-        if(display !== 'none' && maxVal !== 0) {
+
+    if (prop === 'outerWidth') {
+        maxVal = parseFloat(style.maxWidth);
+        if (display !== 'none' && maxVal !== 0) {
             return el.offsetWidth + marginWidth;
         }
     }
-    if ( prop === 'outerHeight' ) {
-        maxVal = parseFloat( style.maxHeight );
-        if(display !== 'none' && maxVal !== 0) {
+    if (prop === 'outerHeight') {
+        maxVal = parseFloat(style.maxHeight);
+        if (display !== 'none' && maxVal !== 0) {
             return el.offsetHeight + marginHeight;
-        } 
+        }
     }
 
     // the element is hidden so:
     // making the el block so we can meassure its height but still be hidden
-    el.style.position   = 'absolute';
+    el.style.position = 'absolute';
     el.style.visibility = 'hidden';
-    el.style.display    = 'block';
+    el.style.display = 'block';
 
 
-    if ( prop === 'width' ) actualVal = el.clientWidth;
-    if ( prop === 'height' ) actualVal = el.clientHeight;
-    if ( prop === 'outerWidth' ) actualVal = el.offsetWidth + marginWidth;
-    if ( prop === 'outerHeight' ) actualVal = el.offsetHeight + marginHeight;
+    if (prop === 'width') actualVal = el.clientWidth;
+    if (prop === 'height') actualVal = el.clientHeight;
+    if (prop === 'outerWidth') actualVal = el.offsetWidth + marginWidth;
+    if (prop === 'outerHeight') actualVal = el.offsetHeight + marginHeight;
 
     // reverting to the original values
-    el.style.display    = display;
-    el.style.position   = position;
+    el.style.display = display;
+    el.style.position = position;
     el.style.visibility = visibility;
 
     return actualVal;
@@ -119,11 +146,13 @@ function getTextWidth(input: HTMLInputElement, fauxContainer: HTMLSpanElement, r
         _faux.textContent = input.value.substring(0, _off).replace(/\s/g, "\u00a0");
         return actualPropertyValue(_faux, 'outerWidth');
     }
-    
+
 }
 
 
 export {
+    getTextTop,
+    actualPropertyValue,
     getTextWidth
 };
 

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.4.35",
+  "version": "4.5.12",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",