funda-ui 4.7.624 → 4.7.625

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

@@ -1,98 +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 {
-        if (inputData === null) return '';
-
-        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 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/SplitterPanel/index.scss

@@ -1,82 +0,0 @@
-
-  /* ======================================================
-    <!-- Splitter Panel -->
-/* ====================================================== */
-.splitter-panel {
-
-    --splitter-panel-divider-color: rgba(0, 0, 0, 0.15);
-    --splitter-panel-divider-hover-color: rgba(210, 253, 253, .86);
-
-    display: flex;
-    position: relative;
-
-    .splitter-panel-left {
-        width: var(--splitter-panel-left-w, 0);
-    }
-
-    .splitter-panel-divider {
-        position: relative;
-        width: 1px;
-        cursor: col-resize;
-        padding: 0 2px;
-        transition: all 0.25s;
-        z-index: 1;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 1px;
-            height: 100%;
-            background: var(--splitter-panel-divider-color);
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -2px;
-            width: 5px;
-            height: 100%;
-        }
-
-
-        &:hover::after {
-            background: var(--splitter-panel-divider-hover-color);
-        }
-    }
-
-
-    .splitter-panel-right {
-        flex: 1;
-    }
-
-
-}
-
-
-
-.splitter-panel-vertical {
-    display: flex;
-    flex-direction: column;
-
-    .splitter-panel-top,
-    .splitter-panel-bottom {
-        min-height: 50px;
-    }
-
-}
-
-
-@media (max-width: 767px) {
-    .splitter-panel {
-        display: none !important;
-    }
-}
-
-@media (min-width: 768px) {
-    .splitter-panel-vertical {
-        display: none !important;
-    }
-}

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

@@ -1,174 +0,0 @@
-import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
-
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-import useIsMobile from 'funda-utils/dist/cjs/useIsMobile';
-
-
-interface SplitterPanelSubProps {
-    children: React.ReactNode;
-  }
-  
-  const SplitterPanelLeft: React.FC<SplitterPanelSubProps> = ({ children }) => <>{children}</>;
-  const SplitterPanelRight: React.FC<SplitterPanelSubProps> = ({ children }) => <>{children}</>;
-  
-  interface SplitterPanelProps {
-      wrapperClassName?: string;
-      draggable?: boolean
-      initialWidth?: number;
-      minWidth?: number;
-      maxWidth?: number;
-      onDrag?: (type: 'dragStart' | 'dragEnd' | 'drag', leftWidth: number) => void; 
-      children?: React.ReactNode;
-  }
-  
-
-  const SplitterPanel: React.FC<SplitterPanelProps> & {
-    Left: typeof SplitterPanelLeft;
-    Right: typeof SplitterPanelRight;
-  } = (props) => {
-      const {
-          wrapperClassName,
-          draggable = true,
-          maxWidth,
-          minWidth = 100,
-          initialWidth = 200,
-          onDrag,
-          children
-      } = props;
-      
-    const containerRef = useRef<HTMLDivElement>(null);
-    const dividerRef = useRef<HTMLDivElement>(null);
-    const getDefaultWidth = () => {
-        if (typeof initialWidth === 'number') return initialWidth;
-        if (typeof minWidth === 'number') return minWidth;
-        return 200;
-    };
-    const [leftWidth, setLeftWidth] = useState<number>(getDefaultWidth());
-    const isMobile = useIsMobile();
-
-    // adjust split panel
-    const [dragging, setDragging] = useState<boolean>(false);
-
-    // Update only when initialWidth changes and is valid, and only when it has not been dragged
-    const hasDragged = useRef(false);
-
-    let left: React.ReactNode = null;
-    let right: React.ReactNode = null;
-
-    React.Children.forEach(children, (child) => {
-        if (!React.isValidElement(child)) return;
-        if (child.type === SplitterPanelLeft) left = child.props.children;
-        if (child.type === SplitterPanelRight) right = child.props.children;
-    });
-
-
-
-    // dragdrop
-    function handleSplitPanelsChange(clientX: number) {
-        if (!containerRef.current) return;
-        const containerLeft = containerRef.current.getBoundingClientRect().left;
-        const separatorXPosition = clientX - containerLeft;
-        const minWidthValue = minWidth || 100;
-        const maxWidthValue = maxWidth || window.innerWidth / 2;
-        if (dragging && separatorXPosition > minWidthValue && separatorXPosition < maxWidthValue) {
-            setLeftWidth(separatorXPosition);
-            onDrag?.('drag', separatorXPosition);
-            hasDragged.current = true;
-        }
-    }
-    function handleMouseDownSplitPanels(e: React.MouseEvent) {
-        setDragging(true);
-        onDrag?.('dragStart', leftWidth ?? initialWidth);
-    }
-    function handleTouchStartSplitPanels(e: React.TouchEvent) {
-        setDragging(true);
-        onDrag?.('dragStart', leftWidth ?? initialWidth);
-    }
-
-    function handleMouseMoveSplitPanels(e: MouseEvent) {
-        handleSplitPanelsChange(e.clientX);
-    }
-    function handleTouchMoveSplitPanels(e: TouchEvent) {
-        handleSplitPanelsChange(e.touches[0].clientX);
-    }
-
-    function handleMouseUpSplitPanels() {
-        setDragging(false);
-        onDrag?.('dragEnd', leftWidth ?? initialWidth);
-    }
-
-
-    useEffect(() => {
-        if (!draggable) return;
-    
-        // 事件监听用原生事件
-        document.addEventListener('mousemove', handleMouseMoveSplitPanels, false);
-        document.addEventListener('touchmove', handleTouchMoveSplitPanels, false);
-        document.addEventListener('mouseup', handleMouseUpSplitPanels, false);
-        document.addEventListener('touchend', handleMouseUpSplitPanels, false);
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMoveSplitPanels, false);
-            document.removeEventListener('touchmove', handleTouchMoveSplitPanels, false);
-            document.removeEventListener('mouseup', handleMouseUpSplitPanels, false);
-            document.removeEventListener('touchend', handleMouseUpSplitPanels, false);
-        };
-    }, [draggable, dragging]);
-
-    useEffect(() => {
-        if (!hasDragged.current && typeof initialWidth === 'number') {
-            setLeftWidth(initialWidth);
-        }
-    }, [initialWidth]);
-
-    return (
-        <>
-        
-        {isMobile ? <>
-            <div className={combinedCls(
-                'splitter-panel-vertical',
-                clsWrite(wrapperClassName, '')
-            )}>
-                <div className="splitter-panel-top">{left}</div>
-                <div className="splitter-panel-bottom">{right}</div>
-            </div>
-
-        </> : <>
-            <div
-                className={combinedCls(
-                    'splitter-panel',
-                    clsWrite(wrapperClassName, '')
-                )}
-                ref={containerRef}
-            >
-           
-                <div 
-                    className="splitter-panel-left"
-                    style={{ "--splitter-panel-left-w": `${leftWidth}px` } as React.CSSProperties}
-                >
-                    {left}
-                </div>
-             
-                {/*<!--DIVIDER-->*/}
-                <div
-                    ref={dividerRef}
-                    className={`splitter-panel-divider ${dragging ? 'dragging' : ''}`}
-                    onMouseDown={handleMouseDownSplitPanels}
-                    onTouchStart={handleTouchStartSplitPanels}
-                    onTouchEnd={handleMouseUpSplitPanels}
-                />
-                {/*<!--/DIVIDER-->*/}
-    
-                <div className="splitter-panel-right">
-                    {right}
-                </div>
-            </div>
-        </>}
-
-    </>
-    )
-};
-
-SplitterPanel.Left = SplitterPanelLeft;
-SplitterPanel.Right = SplitterPanelRight;
-
-export default SplitterPanel;