funda-ui 4.5.711 → 4.5.713

package/publish/lib/esm/Select/utils/func.ts

@@ -1,106 +0,0 @@
-
-/**
- * Format indent value
- * @param {String|Array} inputData 
- * @param {String} placeholder 
- * @returns {String|Array}
- */
-export function formatIndentVal(inputData: any, placeholder: string) {
-    const reVar = new RegExp(placeholder, 'g');
-    if (Array.isArray(inputData)) {
-        return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\ /ig, ''));
-    } else {
-        const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
-        return _txt.replace(reVar, '').replace(/\ /ig, '');
-    }
-
-}
-
-/**
- * Determine whether it is an object or not
- * @param value 
- * @returns 
- */
-export function isObject(value: any) {
-    return Object.prototype.toString.call(value) === '[object Object]';
-}
-
-/**
- * Array unique
- * @param {Array} str 
- * @returns {Array}
- */
-export function unique(arr: any[]) {
-    return Array.from(new Set(arr));
-}
-
-
-/**
- * Remove html tag content
- * @param {string | number} str 
- * @returns {string}
- */
-export function stripHTML(str: string | number) {
-    return String(str).replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
-}
-
-
-/**
- * Remove a specific item from an array
- * @param {array} arr 
- * @param {string} value 
- * @returns {array}
- */
-export function removeItemOnce(arr: any[], value: string | number) {
-    const arrFormat = arr.map((v: any) => v.toString());
-    const index = arrFormat.indexOf(value.toString());
-    if (index > -1) {
-        arrFormat.splice(index, 1);
-    }
-    return arrFormat;
-}
-
-/**
- * Remove multiple items from an array
- * @param {array} arr 
- * @param {array} value 
- * @returns {array}
- */
-export function removeItems(arr: any[], value: any[]) {
-    const arrFormat = arr.map((v: any) => v.toString());
-    const valueFormat = value.map((v: any) => v.toString());
-    return arrFormat.filter((v: any) => {
-        return !valueFormat.includes(v);
-    });
-}
-
-
-
-
-/**
- * Flat options
- * @param {Array}allData 
- * @returns {Array} 
- */
-export function optionsCustomSelectFlat(allData: any[]) {
-
-    const flatItems: any[] = [];
-
-    allData.forEach((item: any, i: number) => {
-        if (typeof item.optgroup !== 'undefined') {
-
-            // add group item
-            flatItems.push({ "label": item.label, "value": 'group-' + i, "group": true });
-
-            item.optgroup.forEach((opt: any) => {
-                flatItems.push(opt);
-            });
-        } else {
-            flatItems.push(item);
-        }
-    });
-
-
-    return flatItems;
-}
-

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

@@ -1,27 +0,0 @@
-/* ======================================================
-    <!-- Show More Less -->
-/* ====================================================== */
-
-.show-more-less__wrapper {
-	position: relative;
-	height: 8.5rem;
-	overflow: hidden;
-
-	.show-more-less__mask {
-		display: block;
-		content: "...";
-		text-align: right;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		height: 2em;
-		overflow: hidden;
-	}
-
-
-	/* Actived status */
-	&.active .show-more-less__mask {
-		display: none;
-	}
-}

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

@@ -1,145 +0,0 @@
-import React, { useState, useRef, useCallback } from 'react';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-
-// Adapt the easing parameters of CSS3
-export enum EasingList {
-    linear = 'linear',
-    easeIn = 'ease-in',
-    easeOut = 'ease-out',
-    easeInOut = 'ease-in-out'
-}
-
-
-export type ShowMoreLessProps = {
-    /** Speed of scrolling up. Amount of time measured in milliseconds. */
-    speed?: number;
-    /** Types of easing animation */
-    easing: string;
-    /** Set a default height to hide the remaining content. Please include the length unit, such as `em`, `px` */
-    defaultHeight?: string;
-    /** /////  */
-    /** Specify a class for the show trigger. */
-    triggerShowClassName?: string;
-    /** Specify a class for the hide trigger. */
-    triggerHideClassName?: string;
-    /** Set a piece of text or HTML code for the show trigger */
-    triggerShowContent?: React.ReactNode;
-    /** Set a piece of text or HTML code for the hide trigger */
-    triggerHideContent?: React.ReactNode;
-    /** Specifies the color effect of the mask */
-    maskColor?: string;
-    /** Set the opacity of the mask */
-    maskOpacity?: number;
-    /** Specifies the height of the mask */
-    maskHeight?: string;
-    /** -- */
-    id?: string;
-    tabIndex?: number;
-    children: React.ReactNode;
-};
-
-
-const ShowMoreLess = (props: ShowMoreLessProps) => {
-    const {
-        speed,
-        easing,
-        defaultHeight,
-        triggerShowClassName,
-        triggerHideClassName,
-        triggerShowContent,
-        triggerHideContent,
-        maskColor,
-        maskOpacity,
-        maskHeight,
-        id,
-        tabIndex,
-        children
-    } = props;
-
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-
-    const color: string = maskColor ? maskColor.replace(/\,/g, ''): '255 255 255';
-    const opacity: number = maskOpacity ? parseFloat(maskOpacity as never): 100;
-    const duration: number = speed ? speed / 1000 : 0.5;
-    const ease: string = EasingList[easing as never];
-    const initHeight: number | string = defaultHeight ? defaultHeight : '8.5rem';
-
-    const [displayEnabled, setDisplayEnabled] = useState<boolean>(false);
-    const [height, setHeight] = useState<number | string>(initHeight);
-
-
-    const handleChange = useCallback((e: any) => {
-        e.preventDefault();
-
-        setDisplayEnabled(!displayEnabled);
-
-        if (height !== "auto") {
-            setHeight(rootRef.current!.scrollHeight);
-        } else {
-
-            // If the height value is `auto` when hiding the content, there needs to be a delay 
-            // (at least 1 millisecond), otherwise, the transition effect of translate cannot be presented
-            setHeight(rootRef.current!.scrollHeight);
-            setTimeout(() => setHeight(initHeight), 1); 
-            
-        }
-        
-      }, [height]);
-
-
-    // Handling events when the animation execution is complete
-    function updateAfterTransition() {
-        if (displayEnabled) {
-            setHeight('auto');
-        }
-    }
-
-
-    return (
-        <>
-
-            <div
-                ref={rootRef}
-                id={idRes}
-                onTransitionEnd={() => updateAfterTransition()}
-                className={`show-more-less__wrapper ${displayEnabled ? 'active' : ''}`}
-                style={{
-                    height: height,
-                    overflow: "hidden",
-                    transition: `all ${duration}s ${ease} 0s`,
-                }}
-            >
-                {children}
-
-
-                {maskOpacity !== 0 ? <span className="show-more-less__mask" style={{ background: `linear-gradient(to bottom, rgb(${color} / 0%), rgb(${color} / ${opacity}%))`, height: maskHeight ? maskHeight : '2em' }}></span> : null}
-
-            </div>
-
-     
-            {!displayEnabled ? <>
-                {triggerShowContent ? <>
-                    <a tabIndex={tabIndex || 0} href="#" className={triggerShowClassName ? `${triggerShowClassName}` : `d-inline w-auto`} onClick={handleChange}>{triggerShowContent}</a>
-                </> : null}
-
-            </> : <>
-                {triggerHideContent ? <>
-                    <a tabIndex={tabIndex || 0} href="#" className={triggerHideClassName ? `${triggerHideClassName}` : `d-inline w-auto`} onClick={handleChange}>{triggerHideContent}</a>
-                </> : null}
-            </>}
-
-
-
-
-
-
-        </>
-    )
-};
-
-
-export default ShowMoreLess;

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

@@ -1,147 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export type SwitchOptionChangeFnType = (arg1: any, arg2: any) => void;
-
-
-export type SwitchProps = {
-    wrapperClassName?: string;
-    controlClassName?: string;
-    value: string | boolean;
-    label?: React.ReactNode | string;
-    name?: string;
-    disabled?: any;
-    required?: any;
-    checked?: boolean;
-    /** -- */
-    id?: string;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    [key: `data-${string}`]: string | undefined;
-    /** This function is called whenever the data is updated.
-     *  Exposes the JSON format data about the option as an argument.
-     */
-    onChange?: SwitchOptionChangeFnType | null;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-};
-
-const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
-    const {
-        wrapperClassName,
-        controlClassName,
-        disabled,
-        required,
-        value,
-        label,
-        name,
-        id,
-        checked,
-        style,
-        tabIndex,
-        onChange,
-        onBlur,
-        onFocus,
-        ...attributes
-    } = props;
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const [val, setVal] = useState<any>(null || false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
-
-    function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
-
-        //
-        onFocus?.(event);    
-    }
-
-
-    function handleChange(event: any) {
-        const _val = event.target.checked;
-
-        setVal(_val);
-        
-        //----
-        //remove focus style
-        rootRef.current?.classList.remove('focus');
-
-        //
-        if (typeof (onChange) === 'function') {
-            onChange(event, _val);
-        }
-
-        
-
-    }
-
-
-    function handleBlur(event: any) {
-
-        //----
-        //remove focus style
-        rootRef.current?.classList.remove('focus');
-
-        //
-        onBlur?.(event);
-    }
-
-
-    useEffect(() => {
-        setVal(checked);
-    }, [checked]);
-
-
-    return (
-        <>
-
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
-                <div className="form-check form-switch">
-                    <input 
-                        ref={externalRef}
-                        tabIndex={tabIndex || 0}
-                        type="checkbox"
-                        className={clsWrite(controlClassName, 'form-check-input')}
-                        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-checkbox
-                        disabled={disabled || null}
-                        required={required || null}
-                        onChange={handleChange}
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
-                        defaultValue={value as string || ''}
-                        checked={val}   // component status will not change if defaultChecked is used
-                        style={{cursor: 'pointer', ...style}}
-                        {...attributes}
-                    />
-
-
-                    <input 
-                        type="hidden"
-                        tabIndex={-1}
-                        id={idRes}
-                        name={name}
-                        value={val ? value as string || '' : ''}  // do not use `defaultValue`
-                        onChange={() => void(0)}
-                        {...attributes}
-                    />
-
-
-                    {label ? <>{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-check-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-check-label">{label}</label>}</> : null}
-                </div>
-            </div>
-
-
-        </>
-    )
-});
-
-export default Switch;

package/publish/lib/esm/Table/Table.tsx

@@ -1,257 +0,0 @@
-import React, { useEffect, useState, forwardRef, useRef } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-import { TableProvider } from './TableContext';
-import useTableResponsive from './utils/hooks/useTableResponsive';
-import useTableDraggable from './utils/hooks/useTableDraggable';
-
-
-export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
-
-    // basic
-    wrapperClassName?: string;
-    tableClassName?: string;
-    bordered?: boolean;
-    colGroup?: boolean;
-    cellAutoWidth?: boolean;
-
-    // sort
-    colSortable?: boolean;
-    onColSort?: (fetchData: any) => void;
-
-    // drag & drop
-    rowDraggable?: boolean;
-    onRowDrag?: (dragStart: any, dragEnd: any) => void;
-
-    // responsive
-    responsive?: boolean;
-    enhancedResponsive?: boolean;
-    enhancedResponsiveWithScrollBar?: boolean;
-
-    // filter
-    data?: any[];
-    filterFields?: string[];
-    filterControlClassName?: string;
-    filterControlPlaceholder?: string;
-    filterLabel?: React.ReactNode;
-    onChangeFilter?: (fetchData: any) => void;
-
-    // selection
-    dataSelected?: number[];
-    rowSelectable?: boolean;
-    onChangeRowSelect?: (fetchData: any[]) => void;
-
-    // key press
-    keyboardFocusable?: boolean;
-    onCellKeyPressed?: (classname: string, elem: HTMLTableCellElement, event: KeyboardEvent) => void;
-}
-
-
-const Table = forwardRef<HTMLDivElement, TableProps>((
-    {
-        // basic
-        children,
-        wrapperClassName,
-        tableClassName,
-        bordered,
-        colGroup,
-        cellAutoWidth,
-
-        // sort
-        colSortable,
-        onColSort,
-
-        // drag & drop
-        rowDraggable,
-        onRowDrag,
-
-        // responsive
-        responsive,
-        enhancedResponsive,
-        enhancedResponsiveWithScrollBar,
-
-        // filter
-        data,
-        filterFields,
-        filterControlClassName,
-        filterControlPlaceholder,
-        filterLabel,
-        onChangeFilter,
-        
-        // selection
-        dataSelected,
-        rowSelectable,
-        onChangeRowSelect,
-
-        // key press
-        keyboardFocusable,
-        onCellKeyPressed,
-
-        ...attributes
-    },
-    externalRef
-) => {
-
-    const uniqueID = useComId();
-    const rootRef = useRef<any>(null);
-
-    // context
-    const [instance, setInstance] = useState<any>(null);
-
-    // selection
-    const [selectedItems, setSelectedItems] = useState<any>(new Set());
-    
-    // effective element movement on keystroke
-    const [rootDataInfo, setRootDataInfo] = useState<null | {totalRow: number}>(null);
-    const refNode = useRef(new Map<string, HTMLTableElement>());
-    const [focusableCellId, setFocusableCellId] = useState<string>('');
-
-
-    // responsive
-    const responsiveClasses = typeof responsive === 'undefined' || responsive === true ? 'table-responsive' : '';
-    let enhancedResponsiveClasses = '';
-    if (enhancedResponsive && !enhancedResponsiveWithScrollBar) enhancedResponsiveClasses += ' table-enhanced-responsive';
-    if (enhancedResponsiveWithScrollBar && !enhancedResponsive) enhancedResponsiveClasses += ' table-enhanced-responsive-scrolled';
-
-
-    //Set the class names of different styles
-    let tableClasses = '';
-    if (bordered) tableClasses += ' table-bordered';
-    if (colGroup) tableClasses += ' table-colgroup';
-
-    
-    // responsive table initialization
-    useTableResponsive({
-        enabled: enhancedResponsiveWithScrollBar && rootRef.current,
-        spyElement: rootRef.current
-    }, [rootRef]);
-
-    // initialize drag & drop data
-    const {
-        handleDragStart,
-        handleDragEnd,
-        handledragOver,
-        handleTbodyEnter
-    } = useTableDraggable({
-        enabled: rowDraggable && rootRef.current,
-        data: data,
-        spyElement: rootRef.current,
-        onRowDrag: onRowDrag
-    }, [data, rootRef]);
-
-
-    // initialize context
-    useEffect(() => {
-        setInstance(data);
-    }, [data]);
-
-
-    // The items are selected by default
-    useEffect(() => {
-        if (Array.isArray(data) && Array.isArray(dataSelected) && dataSelected.length > 0) {
-            const newSelectedItems = new Set(selectedItems);
-            dataSelected.forEach((s: number) => {
-                newSelectedItems.add(String(s));
-            });
-
-            setSelectedItems(newSelectedItems);
-        }
-    }, [data, dataSelected]);
-
-    return (
-        <>
-
-            <TableProvider value={{
-                originData: data,
-                rootRef: rootRef,
-
-                // sort
-                colSortable,
-                onColSort,
-
-                // drag & drop
-                rowDraggable,
-                handleDragStart,
-                handleDragEnd,
-                handledragOver,
-                handleTbodyEnter,
-                
-
-                // filter
-                filterFields,
-                instance,
-                setInstance,
-                onChangeFilter,
-
-                // selection
-                dataSelected,
-                rowSelectable,
-                selectedItems,
-                setSelectedItems,
-                onChangeRowSelect,
-
-                // key press
-                keyboardFocusable,
-                rootDataInfo, 
-                setRootDataInfo,
-                refNode,
-                focusableCellId,
-                setFocusableCellId,
-                onCellKeyPressed,
-
-
-            }}>
-
-
-                {/** Main */}
-                <div
-                    {...attributes}
-                    id={uniqueID}
-                    ref={(node) => {
-                        rootRef.current = node;
-                        if (typeof externalRef === 'function') {
-                            externalRef(node);
-                        } else if (externalRef) {
-                            externalRef.current = node;
-                        }
-                    }}
-                    className={combinedCls(
-                        'syntable__wrapper',
-                        clsWrite(wrapperClassName, 'mb-3 position-relative'),
-                        responsiveClasses,
-                        enhancedResponsiveClasses,
-                        {
-                            'has-checkbox': rowSelectable,
-                            'allow-dragdrop': rowDraggable,
-                            'allow-sort': colSortable
-
-                        }
-                    )}
-                >
-
-                    <table
-                        className={combinedCls(
-                            clsWrite(tableClassName, 'table'),
-                            tableClasses,
-                            {
-                                'cell-autowidth': cellAutoWidth
-                            }
-
-                        )}
-                    >
-                        {children}
-                    </table>
-
-                </div>
-
-            </TableProvider>
-
-        </>
-    )
-});
-
-export default Table;