funda-ui 4.5.682 → 4.5.711

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

@@ -0,0 +1,404 @@
+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;