funda-ui 4.5.682 → 4.5.711

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

@@ -0,0 +1,106 @@
+
+/**
+ * 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

@@ -0,0 +1,27 @@
+/* ======================================================
+    <!-- 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

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

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

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