funda-ui 4.7.615 → 4.7.624

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

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

@@ -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/SplitterPanel/index.scss

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

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