funda-ui 4.5.712 → 4.5.713

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

@@ -1,404 +0,0 @@
-import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export type DynamicFieldsValueProps = {
-    init: React.ReactNode[];
-    tmpl: React.ReactNode;
-};
-
-
-export type DynamicFieldsProps = {
-    contentRef?: React.ForwardedRef<any>;
-    wrapperClassName?: string;
-    btnAddWrapperClassName?: string;
-    btnRemoveWrapperClassName?: string;
-    value?: string;
-    label?: React.ReactNode | string;
-    data: DynamicFieldsValueProps | null;
-    maxFields?: any;
-    confirmText?: string;
-    doNotRemoveDom?: boolean;
-    iconAddBefore?: React.ReactNode | string;
-    iconAddAfter?: React.ReactNode | string;
-    iconAdd?: React.ReactNode | string;
-    iconAddPosition?: `start` | `end`;
-    iconRemove?: React.ReactNode | string;
-    innerAppendClassName?: string;
-    innerAppendCellClassName?: string;
-    innerAppendLastCellClassName?: string;
-    innerAppendHideClassName?: string;
-    innerAppendBodyClassName?: string;
-    innerAppendHeadData?: React.ReactNode[] | string[];
-    innerAppendHeadRowShowFirst?: boolean;
-    innerAppendHeadRowClassName?: string;
-    innerAppendHeadCellClassName?: string | string[];
-    innerAppendHeadCellStyles?: React.CSSProperties[];
-    innerAppendEmptyContent?: React.ReactNode;
-    /** -- */
-    id?: string;
-    onAdd?: (items: HTMLDivElement[], rootNode: HTMLDivElement, btnNode: HTMLAnchorElement, perRowDomClassName: string) => void;
-    onRemove?: (items: HTMLDivElement[], key: number | string, index: number | string, rootNode: HTMLDivElement, btnNode: HTMLAnchorElement, perRowDomClassName: string) => void;
-    onLoad?: (addbtn: any, rootNode: HTMLDivElement, perRowDomClassName: string) => void;
-
-};
-
-const DynamicFields = (props: DynamicFieldsProps) => {
-    const {
-        contentRef,
-        wrapperClassName,
-        btnAddWrapperClassName,
-        btnRemoveWrapperClassName,
-        label,
-        data,
-        maxFields,
-        iconAddBefore,
-        iconAddAfter,
-        iconAdd,
-        iconAddPosition,
-        iconRemove,
-        doNotRemoveDom,
-        id,
-        confirmText,
-        innerAppendClassName,
-        innerAppendCellClassName,
-        innerAppendLastCellClassName,
-        innerAppendHideClassName,
-        innerAppendBodyClassName,
-        innerAppendHeadData,
-        innerAppendHeadRowShowFirst,
-        innerAppendHeadRowClassName,
-        innerAppendHeadCellClassName,
-        innerAppendHeadCellStyles,
-        innerAppendEmptyContent,
-        onAdd,
-        onRemove,
-        onLoad,
-        ...attributes
-    } = props;
-
-    
-    const ITEM_LAST_CLASSNAME = innerAppendLastCellClassName || 'last';
-    const ITEM_HIDE_CLASSNAME = innerAppendHideClassName || 'd-none';
-    const PER_ROW_DOM_STRING = '.dynamic-fields__append .dynamic-fields__data__wrapper';
-    const PER_INNER_BODY_DOM_STRING = '.dynamic-fields__append .dynamic-fields__inner__body';
-    const DO_NOT_REMOVE_DOM = typeof doNotRemoveDom === 'undefined' || doNotRemoveDom === false ? false : true;
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const fieldsRef = useRef<any>(null);
-    const addBtnRef = useRef<any>(null);
-    const emptyRef = useRef<any>(null);
-    const [val, setVal] = useState<React.ReactNode[]>([]);
-    const [tmpl, setTmpl] = useState<React.ReactNode>([]);
-    const addBtnIdRef = useRef<string>('');
-    addBtnIdRef.current = `dynamic-fields-add-${idRes}`;
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            showAddBtn: () => {
-                addBtnRef.current.style.setProperty('display', 'inline', 'important');
-            },
-            hideAddBtn: () => {
-                addBtnRef.current.style.setProperty('display', 'none', 'important');
-            },
-            appendedItemsCounter: () => {
-                return rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length;
-            }
-        }),
-        [contentRef],
-    );
-
-    function updateLastItemCls(el: HTMLDivElement, type: string) {
-        if (typeof el === 'undefined') return;
-
-        if (type === 'add') {
-            const perInnerBody = [].slice.call(rootRef.current.querySelectorAll(PER_INNER_BODY_DOM_STRING));
-            perInnerBody.forEach((el: HTMLDivElement, i: number) => {
-                el.classList.remove(ITEM_LAST_CLASSNAME);
-                (el.firstChild as HTMLDivElement)?.classList.remove(ITEM_LAST_CLASSNAME);
-            });
-
-            el.classList.add(ITEM_LAST_CLASSNAME);
-            el.parentElement?.classList.add(ITEM_LAST_CLASSNAME);
-        } else {
-            el.classList.remove(ITEM_LAST_CLASSNAME);
-            el.parentElement?.classList.remove(ITEM_LAST_CLASSNAME);
-        }
-
-    }
-
-
-    function updateHeadCls(type: string) {
-        const el: HTMLDivElement = rootRef.current.querySelector('.dynamic-fields__inner__head');
-        if (el === null) return;
-
-        if (type === 'add') {
-            el.classList.add(ITEM_HIDE_CLASSNAME);
-        } else {
-            el.classList.remove(ITEM_HIDE_CLASSNAME);
-        }
-
-    }
-
-    function emptyContentEnabled(type: string) {
-        if (innerAppendEmptyContent === '' || typeof innerAppendEmptyContent === 'undefined') return false;
-
-        if (type === 'add') {
-            emptyRef.current?.classList.add(ITEM_HIDE_CLASSNAME);
-        } else {
-            emptyRef.current?.classList.remove(ITEM_HIDE_CLASSNAME);
-        }
-        return true;
-    }
-
-
-    function checkMaxStatus() {
-        //button status
-        const _appendedItems = rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length;
-        if (_appendedItems + 1 >= parseFloat(maxFields)) {
-            addBtnRef.current.style.setProperty('display', 'none', 'important');
-        }
-    }
-
-
-    function handleClickAdd(event: any) {
-        if (event !== null && typeof event !== 'undefined') event.preventDefault();
-
-        //button status
-        checkMaxStatus();
-
-        //
-        setVal((prevState: any[]) => [...prevState, ...generateGroup(tmpl)]);
-
-
-        //
-        setTimeout(() => {
-            const perRow = [].slice.call(rootRef.current.querySelectorAll(PER_ROW_DOM_STRING));
-
-
-            // update index
-            perRow.forEach((el: HTMLDivElement, i: number) => {
-                el.dataset.index = i.toString();
-            });
-
-
-            // update last element
-            if (perRow.length > 1) {
-                updateLastItemCls(perRow[0], 'remove');
-                updateLastItemCls(perRow[perRow.length - 1], 'add');
-            }
-
-            // update inner elements
-            if (perRow.length > 0) {
-                if (!emptyContentEnabled('add')) updateHeadCls('remove');
-            }
-
-            //
-            onAdd?.(perRow, rootRef.current, addBtnRef.current, PER_ROW_DOM_STRING);
-        }, 0);
-    }
-
-
-    function handleClickRemove(e: React.MouseEvent) {
-        if (e !== null && typeof e !== 'undefined') e.preventDefault();
-
-        const $target: any = e.currentTarget.closest('.dynamic-fields__data__wrapper');
-        if ($target === null) return;
-
-        const curKey = ($target as HTMLDivElement).dataset.key;
-
-
-        if (window.confirm(confirmText || '')) {
-
-            if (rootRef.current && addBtnRef.current) {
-                //button status
-                if (rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length <= parseFloat(maxFields)) {
-                    addBtnRef.current.style.setProperty('display', 'inline', 'important');
-                }
-
-
-                const curItem = rootRef.current.querySelector(`.dynamic-fields__append [data-key="${curKey}"]`);
-
-                if (curItem !== null) {
-                    const curIndex = curItem.dataset.index;
-
-
-                    // Do not delete the parent node `innerAppendBodyClassName`, otherwise an error may be reported when 
-                    // using routing: DOMException: Failed to execute 'removeChild' on 'Node'
-                    if (!DO_NOT_REMOVE_DOM) {
-                        curItem.remove();
-                    }
-
-
-                    //
-                    setTimeout(() => {
-                        const perRow = [].slice.call(rootRef.current.querySelectorAll(PER_ROW_DOM_STRING));
-
-                        // update index
-                        perRow.forEach((el: HTMLDivElement, i: number) => {
-                            el.dataset.index = i.toString();
-                        });
-
-                        // update last element
-                        if (perRow.length === 1) {
-                            updateLastItemCls(perRow[0], 'add');
-                        } else {
-                            updateLastItemCls(perRow[perRow.length - 1], 'add');
-                        }
-
-                        // update inner elements
-                        if (perRow.length === 0) {
-                            if (!emptyContentEnabled('remove')) updateHeadCls('add');
-                        }
-
-
-                        //
-                        onRemove?.(perRow, curKey as never, curIndex as number, rootRef.current, e.currentTarget as HTMLAnchorElement, PER_ROW_DOM_STRING);
-                    }, 0);
-                }
-
-            }
-
-
-        }
-
-    }
-
-    function generateGroup(inputData: React.ReactNode[] | React.ReactNode) {
-        const isNew = !Array.isArray(inputData);
-        const _data = Array.isArray(inputData) ? inputData : [inputData];
-
-
-        return (
-            _data.map((item: any, i: number) => {
-                const removeBtyn = <><a href="#" tabIndex={-1} className={`dynamic-fields__removebtn ${btnRemoveWrapperClassName || 'align-middle'}`} onClick={handleClickRemove}>
-                    {iconRemove ? <>{iconRemove}</> : <><svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" fill="#000" /></svg></>}
-                </a></>;
-
-                return <React.Fragment key={'tmpl-' + i}>
-                    {isNew ? <>
-                        {item}
-                    </> : <><div key={'tmpl-' + i} className={`dynamic-fields__inner__body ${innerAppendBodyClassName || ''} ${i === _data.length - 1 ? ITEM_LAST_CLASSNAME : ''}`} data-body-index={i}>
-                        <div
-                            className={`dynamic-fields__data__wrapper position-relative ${innerAppendCellClassName || ''} ${i === _data.length - 1 ? ITEM_LAST_CLASSNAME : ''}`}
-                            data-key={i}
-                            data-index={i}
-                            {...attributes}
-                        >
-                            {item}
-                            {removeBtyn}
-                        </div>
-                    </div>
-                    </>}
-
-                </React.Fragment>
-
-            })
-
-        )
-
-    }
-
-    function addButton() {
-        return <div className="dynamic-fields__btns dynamic-fields__btns--end">
-            {iconAddBefore ? iconAddBefore : null}
-            <a ref={addBtnRef} id={addBtnIdRef.current} href="#" tabIndex={-1} className={`dynamic-fields__addbtn ${btnAddWrapperClassName || 'align-middle'}`} onClick={handleClickAdd}>
-                {iconAdd ? <>{iconAdd}</> : <><svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16 12.75H12.75V16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16V12.75H8C7.59 12.75 7.25 12.41 7.25 12C7.25 11.59 7.59 11.25 8 11.25H11.25V8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V11.25H16C16.41 11.25 16.75 11.59 16.75 12C16.75 12.41 16.41 12.75 16 12.75Z" fill="#000" /></svg></>}
-            </a>
-            {iconAddAfter ? iconAddAfter : null}
-        </div>;
-    }
-
-
-    useEffect(() => {
-
-        setVal(data ? data.init : []);
-        setTmpl(data ? data.tmpl : null);
-
-        //
-        checkMaxStatus();
-
-        //
-        onLoad?.(addBtnIdRef.current, rootRef.current, PER_ROW_DOM_STRING);
-    }, [data]);
-
-
-
-    
-
-    return (
-        <>
-
-
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
-                {label ? <>{typeof label === 'string' ? <label className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label className="form-label">{label}</label>}</> : null}
-
-                <div ref={fieldsRef} className="dynamic-fields-container" data-max-fields={maxFields || 10} id={idRes}>
-
-                    {/* //////////// add button /////////// */}
-                    {iconAddPosition === 'start' ? <>{addButton()}</> : null}
-                    {/* //////////// /add button /////////// */}
-
-
-                    <div className={combinedCls(
-                        'dynamic-fields__append',
-                        innerAppendClassName
-                    )}>
-
-                        {/* //////////// head /////////// */}
-                        {innerAppendHeadData && Array.isArray(innerAppendHeadData) && (val.length > 0 || innerAppendHeadRowShowFirst) ? <>
-                            <div className={`dynamic-fields__inner__head ${innerAppendHeadRowClassName || ''}`}>
-                                {innerAppendHeadData.map((item: any, i: number) => {
-                                    return <div key={'inner-header-row' + i} className={combinedCls(
-                                        innerAppendHeadCellClassName,
-                                        Array.isArray(innerAppendHeadCellClassName) ? (typeof innerAppendHeadCellClassName[i] !== 'undefined' ? innerAppendHeadCellClassName[i] : '') : undefined,
-                                        i === innerAppendHeadData.length - 1 ? ITEM_LAST_CLASSNAME : undefined
-                                    )} style={innerAppendHeadCellStyles && typeof innerAppendHeadCellStyles[i] !== 'undefined' ? innerAppendHeadCellStyles[i] : {}}>{item}</div>;
-                                })}
-                            </div>
-                        </> : null}
-                        {/* //////////// /head /////////// */}
-
-
-                        {/* //////////// item /////////// */}
-                        {generateGroup(val)}
-                        {/* //////////// /item /////////// */}
-
-
-                    </div>
-
-                    {/* //////////// empty item /////////// */}
-                    <div ref={emptyRef} className={`${ITEM_HIDE_CLASSNAME}`}>
-                        {innerAppendEmptyContent || null}
-                    </div>
-
-                    {innerAppendHeadData && Array.isArray(innerAppendHeadData) && val.length === 0 && innerAppendHeadRowShowFirst ? <>
-                        <div>
-                            {innerAppendEmptyContent || null}
-                        </div>
-                    </> : null}
-
-                    {/* //////////// /empty item /////////// */}
-
-
-                    {/* //////////// add button /////////// */}
-                    {typeof iconAddPosition === 'undefined' || iconAddPosition === 'end' ? <>{addButton()}</> : null}
-                    {/* //////////// /add button /////////// */}
-
-                </div>
-
-            </div>
-
-
-
-        </>
-    )
-};
-
-export default DynamicFields;