funda-ui 4.5.712 → 4.5.713

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

@@ -1,352 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, ChangeEvent, MouseEvent, KeyboardEvent, FocusEvent, CompositionEvent } from 'react';
-
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import {
-    extractContentsOfBrackets
-} from 'funda-utils/dist/cjs/extract';
-import {
-    convertArrToValByBrackets
-} from 'funda-utils/dist/cjs/convert';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-
-export type TagInputProps = {
-    contentRef?: React.ForwardedRef<any>;
-    wrapperClassName?: string;
-    value?: string;
-    maxTags?: number;
-    requiredLabel?: React.ReactNode | string;
-    label?: React.ReactNode | string;
-    name?: string;
-    minLength?: any;
-    maxLength?: any;
-    disabled?: any;
-    required?: any;
-    readOnly?: any;
-    placeholder?: string;
-    /** Whether to use square brackets to save result and initialize default value */
-    extractValueByBrackets?: boolean;
-    /** -- */
-    id?: string;
-    autoComplete?: string;
-    autoCapitalize?: string;
-    spellCheck?: boolean;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    [key: `data-${string}`]: string | undefined;
-    onChange?: (e: any, data: any, dataStr: any) => void;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-
-};
-
-
-const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
-    const {
-        contentRef,
-        wrapperClassName,
-        maxTags,
-        disabled,
-        required,
-        placeholder,
-        readOnly,
-        value,
-        requiredLabel,
-        label,
-        name,
-        id,
-        autoComplete,
-        autoCapitalize,
-        spellCheck,
-        extractValueByBrackets,
-        minLength,
-        maxLength,
-        style,
-        tabIndex,
-        onChange,
-        onBlur,
-        onFocus,
-        ...attributes
-    } = props;
-
-
-    const VALUE_BY_BRACKETS = typeof extractValueByBrackets === 'undefined' ? true : extractValueByBrackets;
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const inputRef = useRef<any>(null);
-    const valRef = useRef<any>(null);
-    const max = maxTags ? maxTags : 10;
-    const [lastId, setLastId] = useState<number>(-1);
-    const [userInput, setUserInput] = useState<string>('');
-    const [items, setItems] = useState<any[]>([]);
-    const [alreadyInItems, setAlreadyInItems] = useState<boolean>(false);
-    const [onComposition, setOnComposition] = useState<boolean>(false);
-
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            control: () => {
-                return valRef.current;
-            },
-            clear: (cb?: any) => {
-                initDefaultValue('');
-                cb?.();
-            },
-            set: (value: string, cb?: any) => {
-                initDefaultValue(`${value}`);
-                cb?.();
-            }
-        }),
-        [contentRef],
-    );
-
-
-    function initDefaultValue(defaultValue: any) {
-
-        // change the value to trigger component rendering
-        if ( typeof defaultValue === 'undefined' || defaultValue === '' ) {
-            setItems([]);
-        } else {
-            const _val = VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
-            if (Array.isArray(_val)) {
-                setItems(_val.map((item: any, index: number) => {
-                    return {
-                        content: item,
-                        id: index
-                    }
-                }));
-            } else {
-                setItems([]);
-            }
-            
-        }
-    }
-
-
-    function handleRemove(e: MouseEvent<HTMLAnchorElement>) {
-        e.preventDefault();
-
-        const idToRemove = Number(e.currentTarget.dataset.item);
-        const newArray = items!.filter((item: any) => item.id !== idToRemove);
-        setItems(newArray);
-
-        //
-        onChange?.(inputRef.current, newArray, VALUE_BY_BRACKETS ? convertArrToValByBrackets(newArray.map(v => v.content)) : newArray.map(v => v.content).join(','));
-    }
-
-    function handleKeypress(event: KeyboardEvent<HTMLInputElement>) {
-        
-        // Avoid adding results before when the user enters text is not complete
-        if ( onComposition ) return;
-        
-
-        if (event.code == "Enter" || event.code == "Space") {
-            event.preventDefault();
-
-            if (alreadyInItems) return false;
-
-            //
-            const newArray = items;
-            const currentcontent = userInput!.trim();
-            if (!currentcontent) {
-                return;
-            }
-
-            //Limit the total number of tags added
-            if (max - 1 < newArray!.length) {
-                return;
-            }
-
-            newArray!.push({
-                content: currentcontent,
-                id: lastId + 1
-            });
-
-            setLastId((prevState) => ++prevState);
-            setItems(newArray);
-            setUserInput('');
-
-            //
-            onChange?.(inputRef.current, items, VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map(v => v.content)) : items.map(v => v.content).join(','));
-            
-
-        }
-    }
-
-    function handleComposition(event: CompositionEvent<HTMLInputElement>) {
-        if (event.type === 'compositionstart') {
-            setOnComposition(true);
-        }
-        if (event.type === 'compositionend') {
-            setOnComposition(false);
-        }
-    }
-
-
-    function handleChange(event: ChangeEvent<HTMLInputElement>) {
-
-        const val = event.target.value;
-        
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
-        //
-        let _alreadyInItems = alreadyInItems;
-
-        if (items && items.length > 0) {
-            const alreadyIn = items.some(function (obj) {
-                return obj.content.toLowerCase() == val.toLowerCase();
-            });
-            if (alreadyIn) {
-                _alreadyInItems = true;
-            } else {
-                _alreadyInItems = false;
-            }
-
-        }
-
-        setAlreadyInItems(_alreadyInItems);
-        setUserInput(val);
-
-    }
-
-
-
-    function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
-
-        //
-        onFocus?.(event);
-    }
-
-
-    function handleBlur(event: FocusEvent<HTMLInputElement>) {
-        const el = event.target;
-        const val = event.target.value;
-
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
-        //
-        onBlur?.(event);
-    }
-
-
-    useEffect(() => {
-
-
-        // update default value
-        //--------------
-        initDefaultValue(value);
-
-
-    }, [value]);
-
-
-    return (
-        <>
-
-            <div className={combinedCls(
-                'tag-input__wrapper',
-                clsWrite(wrapperClassName, 'mb-3 position-relative')
-            )} ref={rootRef}>
-
-                {label ? <>{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-label">{label}</label>}</> : null}
-
-
-                <div className="tag-input__control-wrapper">
-                    <div>
-                        <ul className="tag-input__list">
-                            {items ? items.map((item: any, index: number) => (
-                                <li key={index}>
-                                    {item.content}
-                                    
-                                    <a href="#" tabIndex={-1} onClick={handleRemove} data-item={item.id}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000"  d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg></a>
-                                </li>
-                            )) : null}
-                        </ul>
-
-
-                        <div className={combinedCls(
-                            'tag-input__control',
-                            {
-                                'disabled': disabled
-                            }
-                        )} style={{display: max - 1 < items!.length ? 'none' : 'inherit'}}>
-                            <input
-                                ref={inputRef}
-                                tabIndex={tabIndex || 0}
-                                type="text"
-                                id={`label-${idRes}`}
-
-                                // Don't use "name", it's just a container to display the label
-                                data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
-                                data-tag-input
-                                autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
-                                autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
-                                spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}
-                                placeholder={placeholder || ''}
-                                value={userInput}
-                                minLength={minLength || null}
-                                maxLength={maxLength || null}
-                                disabled={disabled || null}
-                                readOnly={readOnly || null}
-                                onChange={handleChange}
-                                onCompositionStart={handleComposition}
-                                onCompositionUpdate={handleComposition}
-                                onCompositionEnd={handleComposition}
-                                onKeyDown={handleKeypress}
-                                onFocus={handleFocus}
-                                onBlur={handleBlur}
-                                style={style}
-                                {...attributes}
-                            />
-
-                        </div>
-
-                        {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
-                    </div>
-
-                    <input
-                        tabIndex={-1}
-                        ref={(node) => {
-                            valRef.current = node;
-                            if (typeof externalRef === 'function') {
-                                externalRef(node);
-                            } else if (externalRef) {
-                                externalRef.current = node;
-                            }
-                        }}
-                        type="hidden"
-                        id={idRes}
-                        name={name}
-                        value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map((item: any) => item.content)) : items.map((item: any) => item.content).join(',')} // do not use `defaultValue`
-                        onChange={() => void(0)}
-                        required={required || null}
-                    />
-
-
-                </div>
-
-
-            </div>
-
-
-        </>
-    )
-});
-
-export default TagInput;