funda-ui 1.0.272

package/lib/esm/SearchBar/index.tsx

@@ -0,0 +1,181 @@
+import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type SearchBarProps = {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    appearance?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    name?: string;
+    maxLength?: any;
+    disabled?: any;
+    required?: any;
+    placeholder?: string;
+    icon?: React.ReactNode | string;
+    btnId?: string;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    autoComplete?: string;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    onClick?: (e: any) => void;
+    onChange?: (e: any, param: any) => void;
+    onBlur?: (e: any, param: any) => void;
+    onFocus?: (e: any, param: any) => void;
+};
+
+const SearchBar = forwardRef((props: SearchBarProps, ref: any) => {
+    const {
+        wrapperClassName,
+        controlClassName,
+        appearance,
+        disabled,
+        required,
+        placeholder,
+        value,
+        label,
+        name,
+        btnId,
+        id,
+        maxLength,
+        icon,
+        autoComplete,
+        style,
+        tabIndex,
+        onClick,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const [changedVal, setChangedVal] = useState<string>(value || '');
+
+
+    const [onComposition, setOnComposition] = useState(false);
+
+    function handleComposition(event: any) {
+        if (event.type === 'compositionstart') {
+            setOnComposition(true);
+        }
+        if (event.type === 'compositionend') {
+            setOnComposition(false);
+        }
+    }
+
+
+    function handleSubmit(event: any) {
+
+        //
+        onClick?.(event);
+    }
+
+    function handleFocus(event: any) {
+        rootRef.current.classList.add('focus');
+
+        //
+        onFocus?.(event, onComposition);
+    }
+
+    function handleChange(event: any) {
+        const val = event.target.value;
+
+        setChangedVal(val);
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onChange?.(event, onComposition);
+    }
+
+    function handleBlur(event: any) {
+        const el = event.target;
+        const val = event.target.value;
+
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onBlur?.(event, onComposition);
+    }
+
+
+    useEffect(() => {
+
+        // update default value
+        //--------------
+        setChangedVal(value || '');
+
+    }, [value]);
+
+
+    return (
+        <>
+
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                {label ? <><label htmlFor={idRes} className="form-label">{label}</label></> : null}
+
+                <div className="input-group">
+                    <input
+                        ref={ref}
+                        tabIndex={tabIndex || 0}
+                        type={appearance === 'pill' ? 'input' : 'search'}
+                        className={appearance === 'pill' ? `${(controlClassName || controlClassName === '' ? controlClassName : "form-control")} border rounded-pill` : (controlClassName || controlClassName === '' ? controlClassName : "form-control")}
+                        id={idRes}
+                        name={name}
+                        placeholder={placeholder || ''}
+                        value={changedVal}
+                        maxLength={maxLength || null}
+                        autoComplete={autoComplete ? 'on' : 'off'}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        onChange={handleChange}
+                        onCompositionStart={handleComposition}
+                        onCompositionUpdate={handleComposition}
+                        onCompositionEnd={handleComposition}
+                        disabled={disabled || null}
+                        required={required || null}
+                        style={style}
+                        {...attributes}
+                    />
+
+                    {icon || icon !== '' ? <>
+                        <span className={appearance === 'pill' ? 'position-absolute end-0' : 'input-group-text m-0 p-0 border-start-0'} style={appearance === 'pill' ? { zIndex: 5 } : {}}>
+                            <button id={btnId} type="button" className={appearance === 'pill' ? 'btn border-end-0 rounded-pill' : 'btn btn-sm'} onClick={handleSubmit}>
+                                {icon ? <>{icon}</> : <><svg width="1.2em" height="1.2em" fill="#333" viewBox="0 0 16 16">
+                                    <path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" />
+                                </svg></>}
+                            </button>
+
+                        </span>
+                    </> : null}
+
+                </div>
+            </div>
+
+
+        </>
+    )
+});
+
+export default SearchBar;

package/lib/esm/Select/index.tsx

@@ -0,0 +1,276 @@
+import React, { useId, useEffect, useState, useRef, forwardRef } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+interface OptionConfig {
+    [propName: string]: string | number;
+}
+
+
+
+type SelectOptionChangeFnType = (arg1: any, arg2: any) => void;
+
+
+type SelectProps = {
+    wrapperClassName?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    name?: string;
+    disabled?: any;
+    required?: any;
+    options?: OptionConfig[] | string;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    fetchFuncAsync?: any;
+    fetchFuncMethod?: string;
+    fetchFuncMethodParams?: any[];
+    fetchCallback?: (data: any) => void;
+    onFetch?: (data: any) => void;
+    onChange?: SelectOptionChangeFnType | null;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+};
+
+const Select = forwardRef((props: SelectProps, ref: any) => {
+    const {
+        wrapperClassName,
+        disabled,
+        required,
+        value,
+        label,
+        name,
+        id,
+        options,
+        style,
+        tabIndex,
+        fetchFuncAsync,
+        fetchFuncMethod,
+        fetchFuncMethodParams,
+        fetchCallback,
+        onFetch,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const selectRef = useRef<any>(null);
+    const optionsRes = options ? isJSON( options ) ? JSON.parse( options as string ) : options : '';
+
+    // return a array of options
+    let optionsDataInit: OptionConfig[] = []; 
+    const optionKeys = Object.keys(optionsRes);
+    const optionValues = Object.values(optionsRes).map((item: any) => item.toString() );
+    
+    optionsDataInit = optionKeys.map((item: any, index: number) => {
+        return {
+            label: optionKeys[index],
+            value: optionValues[index]
+        }
+    });
+
+
+    //
+    const [dataInit, setDataInit] = useState<OptionConfig[]>(optionsDataInit);
+    const [hasErr, setHasErr] = useState<boolean>(false);
+    const [controlValue, setControlValue] = useState<string | undefined>('');
+  
+
+    async function fetchData(params: any) {
+        
+        // set default value
+        if (typeof value !== 'undefined' && value !== '') selectRef.current.dataset.value = value;
+
+        //
+        if ( typeof fetchFuncAsync === 'object' ) {
+
+            const response: any = await fetchFuncAsync[`${fetchFuncMethod}`](...params.split(','));
+            let _ORGIN_DATA = response.data;
+  
+            // reset data structure
+            if (typeof (fetchCallback) === 'function') {
+                _ORGIN_DATA = fetchCallback(_ORGIN_DATA);
+            }
+
+            // Determine whether the data structure matches
+            if ( _ORGIN_DATA.length > 0 && typeof _ORGIN_DATA[0].value === 'undefined' ) {
+                console.warn( 'The data structure does not match, please refer to the example in the component documentation.' );
+                setHasErr(true);
+                _ORGIN_DATA = [];
+            }
+
+            //
+            setControlValue(value); // value must be initialized
+
+
+            //
+            setDataInit(_ORGIN_DATA); // data must be initialized
+
+            //
+            onFetch?.(_ORGIN_DATA);
+    
+            return _ORGIN_DATA;
+        } else {
+
+            //
+            setControlValue(value); // value must be initialized
+            
+            //
+            setDataInit(optionsDataInit); // data must be initialized
+
+            //
+            onFetch?.(optionsDataInit);
+
+            return optionsDataInit;
+        }
+
+
+    }
+
+    
+	// Determine whether it is in JSON format
+	function isJSON( str: any ){
+		
+		if ( typeof(str) === 'string' && str.length > 0 ) {
+
+			if ( str.replace( /\"\"/g, '' ).replace( /\,/g, '' ) == '[{}]' ) {
+				return false;
+			} else {
+
+				if (/^[\],:{}\s]*$/.test( str.replace(/\\["\\\/bfnrtu]/g, '@' ).
+				replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
+				replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+					return true;
+
+				}else{
+					return false;
+				}	
+
+			}
+
+		} else {
+			
+			if ( 
+				typeof(str) === 'object' && 
+				Object.prototype.toString.call(str) === '[object Object]' &&
+			    ! str.length
+			   ) {
+				return true;
+			} else {
+				return false;
+			}
+			
+		}
+
+	} 
+
+
+    //
+    function handleFocus(event: any) {
+        rootRef.current.classList.add('focus');
+
+        //
+        onFocus?.(event);    
+    }
+
+    function handleChange(event: any) {
+        const val = event.target.value;
+
+       
+        //----
+        // update value
+        setControlValue(val);
+
+
+        //----
+        //remove focus style
+        rootRef.current.classList.remove('focus');
+
+        //
+		if ( typeof(onChange) === 'function' ) {
+			onChange(event, dataInit[event.target.selectedIndex]);
+
+            event.target.blur();
+		}
+
+    }
+
+    function handleBlur(event: any) {
+
+        //----
+        //remove focus style
+        rootRef.current.classList.remove('focus');
+
+        //
+        onBlur?.(event);
+    }
+
+    
+    // Generate list of options
+    const selectOptionsList = dataInit.map((item: any, index: number) => {
+        return <option key={index} value={item.value as string}>{item.label}</option>;
+        
+    });
+
+
+
+    useEffect(() => {
+
+        // data init
+        //--------------
+        const _params: any[] = fetchFuncMethodParams || [];
+        fetchData((_params).join(','));
+
+    }, [value, options]);
+
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                {label ? <><label htmlFor={idRes} className="form-label">{label}</label></> : null}
+                <select  
+                        ref={(node) => {
+                            selectRef.current = node;
+                            if (typeof ref === 'function') {
+                                ref(node);
+                            } else if (ref) {
+                                ref.current = node;
+                            }
+                        }}
+                        tabIndex={tabIndex || 0}
+                        className="form-select"
+                        id={idRes}
+                        name={name}
+                        value={controlValue}  // do not use `defaultValue`
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        onChange={handleChange}
+                        disabled={disabled || null}
+                        required={required || null}
+                        style={style}
+                        {...attributes}
+					>
+			           {!hasErr ? selectOptionsList : null}
+					</select>
+
+            </div>
+
+
+        </>
+    )
+});
+
+export default Select;

package/lib/esm/ShowMoreLess/index.scss

@@ -0,0 +1,27 @@
+/* ======================================================
+    <!-- Show More Less -->
+/* ====================================================== */
+
+.show-more-less__wrapper {
+	position: relative;
+	height: 8.5rem;
+	overflow: hidden;
+
+	.show-more-less__mask {
+		display: block;
+		content: "...";
+		text-align: right;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 2em;
+		overflow: hidden;
+	}
+
+
+	/* Actived status */
+	&.active .show-more-less__mask {
+		display: none;
+	}
+}

package/lib/esm/ShowMoreLess/index.tsx

@@ -0,0 +1,144 @@
+import React, { useId, useState, useRef, useCallback } from 'react';
+
+
+// Adapt the easing parameters of CSS3
+enum EasingList {
+    linear = 'linear',
+    easeIn = 'ease-in',
+    easeOut = 'ease-out',
+    easeInOut = 'ease-in-out'
+}
+
+
+type ShowMoreLessProps = {
+    /** Speed of scrolling up. Amount of time measured in milliseconds. */
+    speed?: number;
+    /** Types of easing animation */
+    easing: string;
+    /** Set a default height to hide the remaining content. Please include the length unit, such as `em`, `px` */
+    defaultHeight?: string;
+    /** /////  */
+    /** Specify a class for the show trigger. */
+    triggerShowClassName?: string;
+    /** Specify a class for the hide trigger. */
+    triggerHideClassName?: string;
+    /** Set a piece of text or HTML code for the show trigger */
+    triggerShowContent?: React.ReactNode;
+    /** Set a piece of text or HTML code for the hide trigger */
+    triggerHideContent?: React.ReactNode;
+    /** Specifies the color effect of the mask */
+    maskColor?: string;
+    /** Set the opacity of the mask */
+    maskOpacity?: number;
+    /** Specifies the height of the mask */
+    maskHeight?: string;
+    /** -- */
+    id?: string;
+    tabIndex?: number;
+    children: React.ReactNode;
+};
+
+
+const ShowMoreLess = (props: ShowMoreLessProps) => {
+    const {
+        speed,
+        easing,
+        defaultHeight,
+        triggerShowClassName,
+        triggerHideClassName,
+        triggerShowContent,
+        triggerHideContent,
+        maskColor,
+        maskOpacity,
+        maskHeight,
+        id,
+        tabIndex,
+        children
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+
+    const color: string = maskColor ? maskColor.replace(/\,/g, ''): '255 255 255';
+    const opacity: number = maskOpacity ? parseFloat(maskOpacity as never): 100;
+    const duration: number = speed ? speed / 1000 : 0.5;
+    const ease: string = EasingList[easing as never];
+    const initHeight: number | string = defaultHeight ? defaultHeight : '8.5rem';
+
+    const [displayEnabled, setDisplayEnabled] = useState<boolean>(false);
+    const [height, setHeight] = useState<number | string>(initHeight);
+
+
+    const handleChange = useCallback((e: any) => {
+        e.preventDefault();
+
+        setDisplayEnabled(!displayEnabled);
+
+        if (height !== "auto") {
+            setHeight(rootRef.current!.scrollHeight);
+        } else {
+
+            // If the height value is `auto` when hiding the content, there needs to be a delay 
+            // (at least 1 millisecond), otherwise, the transition effect of translate cannot be presented
+            setHeight(rootRef.current!.scrollHeight);
+            setTimeout(() => setHeight(initHeight), 1); 
+            
+        }
+        
+      }, [height]);
+
+
+    // Handling events when the animation execution is complete
+    function updateAfterTransition() {
+        if (displayEnabled) {
+            setHeight('auto');
+        }
+    }
+
+
+    return (
+        <>
+
+            <div
+                ref={rootRef}
+                id={idRes}
+                onTransitionEnd={() => updateAfterTransition()}
+                className={`show-more-less__wrapper ${displayEnabled ? 'active' : ''}`}
+                style={{
+                    height: height,
+                    overflow: "hidden",
+                    transition: `all ${duration}s ${ease} 0s`,
+                }}
+            >
+                {children}
+
+
+                {maskOpacity !== 0 ? <span className="show-more-less__mask" style={{ background: `linear-gradient(to bottom, rgb(${color} / 0%), rgb(${color} / ${opacity}%))`, height: maskHeight ? maskHeight : '2em' }}></span> : null}
+
+            </div>
+
+     
+            {!displayEnabled ? <>
+                {triggerShowContent ? <>
+                    <a tabIndex={tabIndex || 0} href="#" className={triggerShowClassName ? `${triggerShowClassName}` : `d-inline w-auto`} onClick={handleChange}>{triggerShowContent}</a>
+                </> : null}
+
+            </> : <>
+                {triggerHideContent ? <>
+                    <a tabIndex={tabIndex || 0} href="#" className={triggerHideClassName ? `${triggerHideClassName}` : `d-inline w-auto`} onClick={handleChange}>{triggerHideContent}</a>
+                </> : null}
+            </>}
+
+
+
+
+
+
+        </>
+    )
+};
+
+
+export default ShowMoreLess;