funda-ui 1.0.272

package/lib/esm/File/index.tsx

@@ -0,0 +1,302 @@
+import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type FileProps = {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    labelClassName?: string;
+    labelHoverClassName?: string;
+    fetchUrl?: string;
+    fetchMethod?: string;
+    multiple?: boolean;
+    submitLabel?: React.ReactNode | string;
+    submitClassName?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    name?: string;
+    disabled?: any;
+    required?: any;
+    /** Incoming data, you can set the third parameter of `onComplete` */
+    data?: any;
+    /** -- */
+    id?: string;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    fetchFuncAsync?: any;
+    fetchFuncMethod?: string;
+    fetchFuncMethodParams?: any[];
+    onChange?: (e: any, e2: any, value: any) => void;
+    onComplete?: (e: any, e2: any, callback: any, incomingData: string | null | undefined) => void;
+    onProgress?: (files: any, e2: any) => void;
+
+};
+
+
+const File = forwardRef((props: FileProps, ref: any) => {
+    const {
+        wrapperClassName,
+        controlClassName,
+        labelClassName,
+        labelHoverClassName,
+        fetchUrl,
+        fetchMethod,
+        multiple,
+        submitLabel,
+        submitClassName,
+        disabled,
+        required,
+        value,
+        label,
+        name,
+        id,
+        data,
+        tabIndex,
+        fetchFuncAsync,
+        fetchFuncMethod,
+        fetchFuncMethodParams,
+        onChange,
+        onComplete,
+        onProgress,
+        ...attributes
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const fileInputRef = useRef<any>(null);
+    const labelRef = useRef<any>(null);
+    const submitRef = useRef<any>(null);
+    const [forceUpdate, setForceUpdate] = useState<Boolean>(false);
+    const [defaultValue, setDefaultValue] = useState<any>(null);
+    const [incomingData, setIncomingData] = useState<string | null | undefined>(null);
+
+    function handleFileInput(event: any) {
+        if (fileInputRef.current.nextSibling.contains(document.activeElement)) {
+            // Bind space to trigger clicking of the button when focused
+            if (event.keyCode === 32) {
+                fileInputRef.current.click();
+            }
+        }
+    }
+
+    async function fetchData(params: any, data: any) {
+
+        if (typeof fetchFuncAsync === 'object') {
+            const response: any = await fetchFuncAsync[`${fetchFuncMethod}`](...params.split(','), data);
+            return response.data;
+        } else {
+            return null;
+        }
+
+    }
+
+    async function fetchDataDefault(url: string, data: any = {}, methord: string = 'GET', ...rest: any) {
+
+        let res = {};
+        if (typeof window === 'undefined') return res;
+
+        try {
+            const response = await fetch(url, {
+                method: methord,
+                body: data,
+                ...rest
+            });
+
+            res = await response.json();
+
+        } catch (error) {
+            res = {
+                'error': error
+            }
+        }
+
+        return res;
+
+    }
+
+
+    function handleLabelEnter(event: any) {
+        event.currentTarget.getElementsByTagName('button')[0].className = labelHoverClassName ? labelHoverClassName : 'btn btn-primary';
+    }
+
+    function handleLabelLeave(event: any) {
+        event.currentTarget.getElementsByTagName('button')[0].className = labelClassName ? labelClassName : 'btn btn-outline-secondary';
+    }
+
+
+
+    function handleSubmit(event: any) {
+        event.preventDefault();
+
+        
+        const curFiles = fileInputRef.current.files;
+
+        onProgress?.(curFiles, submitRef.current);
+
+        if (fetchUrl) {
+
+            const formData = new FormData();
+            formData.append('action', 'upload_plug_action');
+
+            for (let i = 0; i < curFiles.length; i++) {
+                formData.append("clientFiles", curFiles[i]);
+            }
+
+            fetchDataDefault(fetchUrl, formData, fetchMethod ? fetchMethod : 'POST', {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            }).then(function (response: any) {
+                const jsonData = response.data;
+                onComplete?.(event, submitRef.current, jsonData, incomingData);
+
+                // update default value
+                setDefaultValue(undefined);
+                fileInputRef.current.value = '';
+
+            });
+        } else {
+
+            const streamToText = async (blob: any) => {
+                const readableStream = await blob.getReader();
+                const chunk = await readableStream.read();
+
+                return new TextDecoder('utf-8').decode(chunk.value);
+            };
+
+
+            (async () => {
+
+                const allFiles: any[] = [];
+                for (let i = 0; i < curFiles.length; i++) {
+
+                    const file = curFiles[i];
+                    const fileSliceBlob = file.slice(0, file.length);
+                    const fileSliceBlobStream = await fileSliceBlob.stream();
+                    allFiles.push(await streamToText(fileSliceBlobStream));
+
+                }
+
+                //send 
+                Promise.all(allFiles).then((values) => {
+                    const _params: any[] = fetchFuncMethodParams || [];
+                    fetchData((_params).join(','), values);
+
+                });
+            })();
+
+
+        }
+
+    }
+
+    function handleChange(event: any) {
+        const val = event.target.value;
+
+        setForceUpdate(!forceUpdate);
+
+
+        // update default value
+        setDefaultValue(null);
+
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onChange?.(event, submitRef.current, fileInputRef.current.files);
+    }
+
+    function fileNames() {
+
+        const { current } = fileInputRef;
+
+        if (current && current.files.length > 0) {
+            let messages: string[] = [];
+            for (let file of current.files) {
+                messages = messages.concat(file.name);
+            }
+            return messages.join(',');
+        }
+        return null;
+    }
+
+
+    useEffect(() => {
+
+        // update incoming data
+        //------------------------------------------
+        setIncomingData(data);       
+
+        // update default value
+        //--------------
+        setDefaultValue(value);
+
+    }, [data]);
+
+
+
+    return (
+        <>
+
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative upload-control"} ref={rootRef}>
+                <label
+                    ref={labelRef}
+                    onMouseEnter={handleLabelEnter}
+                    onMouseLeave={handleLabelLeave}
+                    style={{ cursor: 'pointer', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.5 : 1 }}
+                    htmlFor={idRes}
+                    className="form-label d-inline"
+                ><button className={labelClassName ? labelClassName : 'btn btn-outline-secondary'} type="button" style={{ pointerEvents: 'none' }}>{label ? label : <svg width="25px" height="25px" viewBox="0 0 1024 1024"><path d="M512 256l144.8 144.8-36.2 36.2-83-83v311.6h-51.2V354l-83 83-36.2-36.2L512 256zM307.2 716.8V768h409.6v-51.2H307.2z" fill="#000000" fillRule="evenodd" /></svg>} {required ? <><span className="text-danger">*</span></> : ''}</button></label>
+
+
+                <div className="input-group">
+                    <input
+                        ref={(node) => {
+                            fileInputRef.current = node;
+                            if (typeof ref === 'function') {
+                                ref(node);
+                            } else if (ref) {
+                                ref.current = node;
+                            }
+                        }}
+                        tabIndex={tabIndex || 0}
+                        className={controlClassName || controlClassName === '' ? controlClassName : "form-control"}
+                        id={idRes}
+                        type="file"
+                        // The onChange should trigger updates whenever
+                        // the value changes?
+                        // Try to select a file, then try selecting another one.
+                        multiple={multiple || false}
+                        name={name}
+                        onKeyUp={handleFileInput}
+                        onChange={handleChange}
+                        disabled={disabled || null}
+                        required={required || null}
+                        style={{ display: 'none' }}
+                        {...attributes}
+                    />
+                    {typeof defaultValue !== 'undefined' ? fileNames() : null}
+                    {defaultValue}
+
+                </div>
+
+                <button ref={submitRef} className={submitClassName ? submitClassName + ` ${disabled ? 'disabled' : ''}` : 'btn btn-primary mt-2' + ` ${disabled ? 'disabled' : ''}`} type="button" onClick={handleSubmit}>{submitLabel ? submitLabel : null}</button>
+
+
+            </div>
+
+
+        </>
+    )
+});
+
+export default File;

package/lib/esm/Input/index.tsx

@@ -0,0 +1,233 @@
+import React, { useId, useState, useEffect, useRef, forwardRef, ChangeEvent, CompositionEvent } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type InputProps = {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    type?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    units?: string;
+    name?: string;
+    step?: any;
+	min?: any;
+	max?: any;
+    src?: any;
+    size?: any;
+    minLength?: any;
+    maxLength?: any;
+    alt?: any;
+    disabled?: any;
+    required?: any;
+    readOnly?: any;
+    placeholder?: string;
+    pattern?: any;
+    iconLeft?: React.ReactNode | string;
+    iconRight?: React.ReactNode | string;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    autoComplete?: string;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    onChangeCallback?: (e: any) => void;
+    onChange?: (e: any, param: any) => void;
+    onBlur?: (e: any, param: any) => void;
+    onFocus?: (e: any, param: any) => void;
+
+};
+
+
+const Input = forwardRef((props: InputProps, ref: any) => {
+    const {
+        wrapperClassName,
+        controlClassName,
+        type,
+        disabled,
+        required,
+        placeholder,
+        pattern,
+        readOnly,
+        value,
+        label,
+        units,
+        name,
+        step,
+        min,
+        max,
+        src,
+        size,
+        minLength,
+        maxLength,
+        alt,
+        id,
+        iconLeft,
+        iconRight,
+        autoComplete,
+        style,
+        tabIndex,
+        onChangeCallback,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const valRef = useRef<any>(null);
+    const typeRes = typeof (type) === 'undefined' ? 'text' : type;
+    const [onComposition, setOnComposition] = useState(false);
+    const [changedVal, setChangedVal] = useState<string>(value || '');
+
+    function handleComposition(event: CompositionEvent<HTMLInputElement>) {
+        if (event.type === 'compositionstart') {
+            setOnComposition(true);
+        }
+        if (event.type === 'compositionend') {
+            setOnComposition(false);
+        }
+    }
+
+
+    function handleFocus(event: ChangeEvent<HTMLInputElement>) {
+        rootRef.current.classList.add('focus');
+
+        //
+        onFocus?.(event, onComposition);    
+    }
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+        const val = event.target.value;
+
+        setChangedVal(val);
+
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onChange?.(event, onComposition);
+        if (typeof (onChangeCallback) === 'function') {
+            const newData: any = onChangeCallback(event);
+            setChangedVal(newData);
+        }
+
+    }
+
+    function handleBlur(event: ChangeEvent<HTMLInputElement>) {
+        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 || '');
+
+        // If you use the dynamic form assignment (such as document.getElementById(xxx).value), 
+        // you need to judge the value of the input obtained by using the macrotask "setInterval()"
+        let timer: any = null;
+        let initTimes: number = 0;
+        let hasValue: boolean = false;
+        timer = setInterval( () => {
+            if ( initTimes > 5 || hasValue ) {
+                clearInterval(timer);
+            } else {
+                if ( valRef.current !== null && valRef.current.value !== '' && ( typeof value === 'undefined' || value === '' ) ) {
+                    setChangedVal(valRef.current.value);
+                    hasValue = true;
+                }
+                initTimes++;
+
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(timer);
+        }
+
+    }, [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">
+                    {iconLeft ? <><span className="input-group-text">{iconLeft}</span></>: null}
+                    <input
+                        ref={(node) => {
+                            valRef.current = node;
+                            if (typeof ref === 'function') {
+                                ref(node);
+                            } else if (ref) {
+                                ref.current = node;
+                            }
+                        }}
+                        tabIndex={tabIndex || 0}
+                        type={typeRes}
+                        className={controlClassName || controlClassName === '' ? controlClassName : "form-control"}
+                        id={idRes}
+                        name={name}
+                        step={step || null}
+                        min={min || null}
+                        max={max || null}
+                        src={src || null}
+                        size={size || null}
+                        alt={alt || null}
+                        pattern={pattern || null}
+                        placeholder={placeholder || ''}
+                        value={changedVal}
+                        minLength={minLength || null}
+                        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}
+                        readOnly={readOnly || null}
+                        style={style}
+                        {...attributes}
+                    />
+                    {units ? <><span className="input-group-text">{units}</span></>: null}
+                    {iconRight ? <><span className="input-group-text">{iconRight}</span></>: null}
+                </div>
+                {required ? <><span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span></> : ''}
+
+            </div>
+
+
+        </>
+    )
+});
+
+export default Input;