funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/File/index.tsx

@@ -1,477 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import {
-    base64ToArrayBuffer,
-    arrayBufferToUint8Array
-} from 'funda-utils/dist/cjs/buffer';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-export type FileProps = {
-    contentRef?: React.ForwardedRef<any>;
-    wrapperClassName?: string;
-    controlClassName?: string;
-    controlExClassName?: string;
-    labelClassName?: string;
-    labelHoverClassName?: string;
-    accept?: string;
-    inline?: boolean;
-    autoSubmit?: boolean;
-    fetchUrl?: string;
-    fetchMethod?: string;
-    fetchParams?: any;
-    multiple?: boolean;
-    submitLabel?: React.ReactNode | string;
-    submitClassName?: string;
-    progressLabel?: React.ReactNode | string;
-    progressClassName?: string;
-    value?: string;
-    requiredLabel?: React.ReactNode | 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, e: any, e2: any) => void;
-
-};
-
-
-const File = forwardRef((props: FileProps, externalRef: any) => {
-    const {
-        contentRef,
-        wrapperClassName,
-        controlClassName,
-        controlExClassName,
-        labelClassName,
-        labelHoverClassName,
-        accept,
-        inline,
-        autoSubmit,
-        fetchUrl,
-        fetchMethod,
-        fetchParams,
-        multiple,
-        submitLabel,
-        submitClassName,
-        progressLabel,
-        progressClassName,
-        disabled,
-        required,
-        value,
-        requiredLabel,
-        label,
-        name,
-        id,
-        data,
-        tabIndex,
-        fetchFuncAsync,
-        fetchFuncMethod,
-        fetchFuncMethodParams,
-        onChange,
-        onComplete,
-        onProgress,
-        ...attributes
-    } = props;
-
-
-    const uniqueID = useComId();
-    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);
-
-    const [progressing, setProgressing] = useState<boolean>(false);
-
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            upload: (val: boolean) => {
-                handleSubmit(null);
-            }
-        }),
-        [contentRef],
-    );
-
-    const getExt = (filename: string) => {
-        const ext = /^.+\.([^.]+)$/.exec(filename);
-        return ext == null ? "" : ext[1];
-    };
-
-    function resetDefaultVal() {
-        setDefaultValue(undefined);
-        fileInputRef.current.value = '';
-    }
-
-    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 + '?' + new URLSearchParams(fetchParams as any), {
-                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) {
-        if (event) event.preventDefault();
-
-
-        const curFiles = fileInputRef.current.files;
-
-        const interceptRequests: any = onProgress?.(curFiles, fileInputRef.current, submitRef.current);
-        
-
-         // interceptor
-        //----------------------------------------------------------------
-        if (interceptRequests === false) return;
-
-        setProgressing(true);
-
-
-        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?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
-                setProgressing(false);
-
-                // update default value
-                resetDefaultVal();
-
-            });
-        } else {
-
-
-            if (typeof fetchFuncAsync === 'object') {
-                // Using custom request structure of class
-                //----------------------------------------------------------------
-                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).then((res: any) => {
-                            onComplete?.(fileInputRef.current, submitRef.current, res, incomingData);
-                            setProgressing(false);
-
-                            // update default value
-                            resetDefaultVal();
-                        });
-
-                    });
-                })();
-
-            } else {
-                // Using ReadableStream
-                //----------------------------------------------------------------
-                (async () => {
-
-
-                    // setFilesData
-                    [].slice.call(curFiles).forEach((file: any) => {
-
-                        const size = file.size;
-                        const mimeType = file.type;
-                        const name = file.name;
-                        const ext = getExt(name);
-
-
-                        // get file content
-                        const reader = new FileReader();
-                        reader.addEventListener('load', (event) => {
-                            const b64string = (event.currentTarget as any).result;
-                            const arrayBufferData = base64ToArrayBuffer(b64string);
-                            const uint8ArrayData = arrayBufferToUint8Array(arrayBufferData);
-
-                            // console.log('b64string: ', b64string);
-                            // console.log('arrayBufferData: ', arrayBufferData);
-                            // console.log('uint8ArrayData: ', uint8ArrayData);
-
-                            //send 
-                            const jsonData = {
-                                fileData: {
-                                    size,
-                                    mimeType,
-                                    name,
-                                    ext
-                                },
-                                b64string,
-                                arrayBufferData,
-                                uint8ArrayData
-                            };
-                            onComplete?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
-                            setProgressing(false);
-
-                            // update default value
-                            resetDefaultVal();
-
-
-                        });
-                        reader.readAsDataURL(file);
-
-                    });
-
-
-
-                })();
-
-            }
-
-        }
-
-    }
-
-    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?.(fileInputRef.current, submitRef.current, fileInputRef.current.files);
-
-        // Enable automatic upload
-        if (autoSubmit) {
-            handleSubmit(null);
-        }
-    }
-
-    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={clsWrite(wrapperClassName, 'mb-3 position-relative upload-control')} ref={rootRef}>
-                
-
-                <div className={combinedCls(
-                    'upload-control-group d-flex',
-                    typeof inline === 'undefined' || inline === false ? 'flex-column' : 'flex-row'
-                )}>
-                    <div className="upload-control-group__control">
-                        {/* INPUT */}
-                        <label
-                            ref={labelRef}
-                            onMouseEnter={handleLabelEnter}
-                            onMouseLeave={handleLabelLeave}
-                            style={{ cursor: 'pointer', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.5 : 1 }}
-                            htmlFor={idRes}
-                            data-label="1"
-                            data-input-id={idRes}
-                            className="form-label d-inline"
-                        >
-                            <button className={clsWrite(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 ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="text-danger">*</span>}</> : ''}</button>
-                        </label>
-                        
-                        <div className="input-group">
-                            <div className="upload-control-group__control-inner" style={{ display: 'none' }}>
-                                <input
-                                    ref={(node) => {
-                                        fileInputRef.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}
-                                    type="file"
-                                    accept={accept}
-                                    // 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}
-                                    {...attributes}
-                                />
-                            </div>
-                        </div>
-                        {/* /INPUT */}
-                    </div>
-                    <div className={combinedCls(
-                        'upload-control-group__btn',
-                        {
-                            'd-none': autoSubmit
-                        }
-                    )}>
-                        {/* BUTTON */}
-                        {progressing ? <>
-                            <button ref={submitRef} className={combinedCls(
-                                clsWrite(progressClassName, clsWrite(submitClassName, 'btn btn-primary mt-2')),
-                                {
-                                    'disabled': disabled
-                                }
-                            )} type="button" onClick={handleSubmit}>{progressLabel ? progressLabel : submitLabel}</button>
-                        </> : <>
-                            <button ref={submitRef} className={combinedCls(
-                                clsWrite(submitClassName, 'btn btn-primary mt-2'),
-                                {
-                                    'disabled': disabled
-                                }
-                            )} type="button" onClick={handleSubmit}>{submitLabel ? submitLabel : null}</button>
-                        </>}
-
-                        {/* BUTTON */}
-                    </div>
-                </div>
-
-                {/* RESULT */}
-                <div className="pload-control-result">
-                    <small>
-                        {typeof defaultValue !== 'undefined' ? fileNames() : null}
-                        {defaultValue}
-                    </small>
-                </div>
-                {/* /RESULT */}
-
-
-                
-
-
-            </div>
-
-
-        </>
-    )
-});
-
-export default File;

package/publish/lib/esm/HorizontalScrollContent/index.scss

@@ -1,87 +0,0 @@
-/* ======================================================
-    <!-- Horizontal Scroll Content -->
-/* ====================================================== */
-
-.horizontal-scroll-content__wrapper {
-
-    --hs-content-scrollbar-color: rgba(0, 0, 0, 0.2);
-    --hs-content-scrollbar-h: 3px;
-    --hs-content-btn-radius: 50%;
-    --hs-content-btn-size: 20px;
-    --hs-content-btn-bg: rgba(255, 255, 255, 0.4);
-    --hs-content-btn-svg-bg: #333;
-
-
-
-    position: relative;
-    text-align: center;
-    width: auto;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    ul {
-        display: flex;
-        align-items: center;
-        list-style: none;
-        max-width: 100%;
-        overflow-x: scroll;
-        scroll-behavior: smooth;
-        margin: 0;
-        padding: 0;
-
-        &::-webkit-scrollbar {
-            height: var(--hs-content-scrollbar-h);
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: var(--hs-content-scrollbar-color);
-        }
-
-        >li {
-            margin: 0;
-            padding: 0;
-            white-space: nowrap;
-
-            /* custom style */
-        }
-    }
-
-    .horizontal-scroll-content__btn {
-        width: var(--hs-content-btn-size);
-        height: var(--hs-content-btn-size);
-        position: absolute;
-        border: 0;
-        outline: none;
-        margin: 0;
-        padding: 0;
-        background: none;
-        margin: 0 .25rem;
-        z-index: 1;
-
-        /* custom style */
-        background: var(--hs-content-btn-bg);
-        border-radius: var(--hs-content-btn-radius);
-        backdrop-filter: blur(2px);
-
-        svg {
-            fill: var(--hs-content-btn-svg-bg);
-            margin-top: 5px;
-
-            width: calc(var(--hs-content-btn-size) * 0.75);
-            height: calc(var(--hs-content-btn-size) * 0.75);
-        }
-
-        &.invalid {
-            display: none;
-        }
-
-        &.horizontal-scroll-content__prev {
-            left: 0;
-        }
-
-        &.horizontal-scroll-content__next {
-            right: 0;
-        }
-    }
-}