funda-ui 4.7.125 → 4.7.150

package/lib/esm/CascadingSelect/index.tsx

@@ -15,6 +15,9 @@ import {
 import {
     getAbsolutePositionOfStage
 } from 'funda-utils/dist/cjs/getElementProperty';
+import {
+    htmlToPlain
+} from 'funda-utils/dist/cjs/format-string';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
@@ -29,6 +32,8 @@ export type CascadingSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
     perColumnHeadersShow?: boolean;
     exceededSidePosOffset?: number;
     value?: string;
@@ -89,6 +94,8 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        searchable = false,
+        searchPlaceholder = '',
         perColumnHeadersShow = true,
         exceededSidePosOffset,
         disabled,
@@ -135,6 +142,8 @@ const CascadingSelect = (props: CascadingSelectProps) => {
     const valRef = useRef<any>(null);
     const listRef = useRef<any>(null);
 
+    // searchable
+    const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
 
     // exposes the following methods
     useImperativeHandle(
@@ -1079,6 +1088,16 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
     }, [value]);
 
+    // Automatically complete and truncate column Search Keywords each time the number of columns changes
+    useEffect(() => {
+        if (listData.current.length !== columnSearchKeywords.length) {
+            setColumnSearchKeywords(
+                Array(listData.current.length).fill('').map((v, i) => columnSearchKeywords[i] || '')
+            );
+        }
+    }, [listData.current.length]);
+
+
     return (
         <>
 
@@ -1115,13 +1134,42 @@ const CascadingSelect = (props: CascadingSelectProps) => {
                                 {listData.current.map((item: any, level: number) => {
 
                                     if (item.length > 0) {
+
+                                        // filter data
+                                        let filteredItem = item;
+                                        if (searchable && columnSearchKeywords[level]) {
+                                            const keyword = columnSearchKeywords[level].toLowerCase();
+                                            filteredItem = item.filter((opt: any) =>
+                                                (htmlToPlain(opt.name) || '').toLowerCase().includes(keyword)
+                                            );
+                                        }
+
+
                                         return (
                                             <li key={level} data-col={level} className="cas-select__items-col">
+               
+                                                {/* SEARCH BOX */}
+                                                {searchable && (
+                                                    <div className="cas-select__items-col-searchbox">
+                                                        <input
+                                                            type="text"
+                                                            placeholder={searchPlaceholder}
+                                                            value={columnSearchKeywords[level] || ''}
+                                                            onChange={e => {
+                                                                const newKeywords = [...columnSearchKeywords];
+                                                                newKeywords[level] = e.target.value;
+                                                                setColumnSearchKeywords(newKeywords);
+                                                            }}
+                                                        />
+                                                    </div>
+                                                )}
+                                                {/* /SEARCH BOX */}
+
                                                 <Group
                                                     perColumnHeadersShow={perColumnHeadersShow}
                                                     level={level}
                                                     columnTitle={columnTitleData}
-                                                    data={item}
+                                                    data={filteredItem}  // filter result
                                                     cleanNodeBtnClassName={cleanNodeBtnClassName}
                                                     cleanNodeBtnContent={cleanNodeBtnContent}
                                                     selectEv={(e, value, index, ) => handleClickItem(e, value, index, level, listData.current)}

package/lib/esm/CascadingSelectE2E/Group.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
 export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
 
 export type GroupProps = {

package/lib/esm/CascadingSelectE2E/index.scss

@@ -127,11 +127,12 @@
     --cas-select-e2e-loader-color: #000000;
     --cas-select-e2e-clean-btn-color: #b5b5b5;
     
+    --cas-select-e2e-searchbox-border-color: #ddd;
 
     box-shadow: var(--cas-select-e2e-items-box-shadow);
     position: absolute;
     left: auto;
-    max-height: 350px;
+    max-height: 300px;
     border: 1px solid var(--cas-select-e2e-items-border-color);
     background: var(--cas-select-e2e-items-bg);
     padding: 10px;
@@ -160,6 +161,7 @@
         padding: 0;
     }
 
+
     .cas-select-e2e__items-loader {
         position: absolute;
         pointer-events: none;
@@ -167,21 +169,25 @@
         top: 0;
         margin-left: 5px;
         z-index: 1;
-        z-index: 1;
         width: 12px;
         height: 12px;
         text-align: center;
-        transform-origin: bottom;
+        transform-origin: center;
+        transform: translate(2px, 5px) rotate(0);
         animation: 1s linear infinite cas-select-e2e__spinner;
 
-        svg path {
-            fill: var(--cas-select-e2e-loader-color);
+        svg {
+            vertical-align: top;
+            
+            path {
+                fill: var(--cas-select-e2e-loader-color);
+            }
         }
     }
 
     @keyframes cas-select-e2e__spinner {
         to {
-            transform: rotate(-360deg);
+            transform: translate(2px, 5px) rotate(-360deg);
         }
     }
 
@@ -227,6 +233,17 @@
 
 
 
+    /* Searchbox */
+    .cas-select-e2e__items-col-searchbox {
+        input {
+            border: 1px solid var(--cas-select-e2e-searchbox-border-color);
+            border-radius: 0.35rem;
+            background: transparent;
+            font-size: 0.75rem;
+        }
+    }
+    
+
     /* Options */
     .cas-select-e2e__opt {
         padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -20,9 +20,13 @@ import {
     addTreeDepth,
     addTreeIndent
 } from 'funda-utils/dist/cjs/tree';
+import {
+    htmlToPlain
+} from 'funda-utils/dist/cjs/format-string';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import Group from './Group';
 
 
@@ -45,6 +49,8 @@ export type CascadingSelectE2EProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
     perColumnHeadersShow?: boolean;
     exceededSidePosOffset?: number;
     value?: string;
@@ -107,6 +113,8 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        searchable = false,
+        searchPlaceholder = '',
         perColumnHeadersShow = true,
         exceededSidePosOffset,
         disabled,
@@ -151,6 +159,9 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
     const valRef = useRef<any>(null);
     const listRef = useRef<any>(null);
 
+    // searchable
+    const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
+
 
     // exposes the following methods
     useImperativeHandle(
@@ -1337,6 +1348,17 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
 
     }, [value]);
 
+
+    // Automatically complete and truncate column Search Keywords each time the number of columns changes
+    useEffect(() => {
+        if (listData.current.length !== columnSearchKeywords.length) {
+            setColumnSearchKeywords(
+                Array(listData.current.length).fill('').map((v, i) => columnSearchKeywords[i] || '')
+            );
+        }
+    }, [listData.current.length]);
+
+
     return (
         <>
 
@@ -1372,13 +1394,43 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
                                 {listData.current.map((item: any, level: number) => {
 
                                     if (item.length > 0) {
+
+                                        // filter data
+                                        let filteredItem = item;
+                                        if (searchable && columnSearchKeywords[level]) {
+                                            const keyword = columnSearchKeywords[level].toLowerCase();
+                                            filteredItem = item.filter((opt: any) =>
+                                                (htmlToPlain(opt.name) || '').toLowerCase().includes(keyword)
+                                            );
+                                        }
+
+
                                         return (
                                             <li key={level} data-col={level} className="cas-select-e2e__items-col">
+
+                                 
+                                                {/* SEARCH BOX */}
+                                                {searchable && (
+                                                    <div className="cas-select-e2e__items-col-searchbox">
+                                                        <input
+                                                            type="text"
+                                                            placeholder={searchPlaceholder}
+                                                            value={columnSearchKeywords[level] || ''}
+                                                            onChange={e => {
+                                                                const newKeywords = [...columnSearchKeywords];
+                                                                newKeywords[level] = e.target.value;
+                                                                setColumnSearchKeywords(newKeywords);
+                                                            }}
+                                                        />
+                                                    </div>
+                                                )}
+                                                {/* /SEARCH BOX */}
+
                                                 <Group
                                                     perColumnHeadersShow={perColumnHeadersShow}
                                                     level={level}
                                                     columnTitle={columnTitleData}
-                                                    data={item}
+                                                    data={filteredItem}  // filter result
                                                     cleanNodeBtnClassName={cleanNodeBtnClassName}
                                                     cleanNodeBtnContent={cleanNodeBtnContent}
                                                     selectEv={(e, value, index) => handleClickItem(e, value, index, level, listData.current)}

package/lib/esm/Checkbox/index.tsx

@@ -58,7 +58,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
     const valRef = useRef<any>(null);
-    const [val, setVal] = useState<any>(null || false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+    const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
 
     // exposes the following methods
     useImperativeHandle(
@@ -78,7 +78,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
                     onChange(null, false);
                 }
             },
-            set: (value: string, cb?: any) => {
+            set: (value: boolean, cb?: any) => {
                 setVal(value);
                 cb?.();
 
@@ -133,7 +133,9 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
     useEffect(() => {
 
         // default value
-        setVal(checked);
+        if (typeof checked === 'boolean') {
+            setVal(checked);
+        }
 
         // Set a checkbox to indeterminate state
         if (typeof indeterminate !== 'undefined') {

package/lib/esm/LiveSearch/index.tsx

@@ -144,6 +144,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     } = props;
 
 
+    const QUERY_STRING_PLACEHOLDER = '------';  // Invalid parameters for the first automatic request
     const DEPTH = depth || 1055;  // the default value same as bootstrap
     const POS_OFFSET = 0;
     const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
@@ -773,7 +774,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         // data init
         //--------------
         const _oparams: any[] = fetchFuncMethodParams || [];
-        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (fetchTrigger && !fetchUpdate) ? '' : (fetchUpdate ? '------' : (fetchTrigger ? '------' : '')));
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (fetchTrigger && !fetchUpdate) ? '' : (fetchUpdate ? QUERY_STRING_PLACEHOLDER : (fetchTrigger ? QUERY_STRING_PLACEHOLDER : '')));
         if (!firstFetch) {
             fetchData((_params).join(','));
             setFirstFetch(true);  // avoid triggering two data requests if the input value has not changed

package/lib/esm/Refresher/index.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useRef } from 'react';
+
+import useIsMobile from 'funda-utils/dist/cjs/useIsMobile';
+
+
+interface RefresherProps {
+    /** Pulling text */
+    pullingText?: React.ReactNode;
+    /**  Text when reaching the threshold */
+    readyToRefreshText?: React.ReactNode;
+    /** Refreshing text */
+    refreshingText?: React.ReactNode;
+    /** The pull distance (px) that triggers the refresh */
+    threshold?: number;
+    /** The height of the trigger area */
+    triggerHeight?: number;
+    /** The styles of the trigger area */
+    triggerAreaStyle?: React.CSSProperties;
+    /** Pull-down is only allowed when the scroll bar of this element is at the top. You can only fire certain actions when the scrollbar is at the top by listening to the scroll event of a given DOM element and determining if its scrollTop is 0. */
+    scrollableElementClassName?: string;
+    /** Refresh action is async */
+    onRefresh: () => Promise<void>;
+    children: React.ReactNode;
+}
+
+const Refresher = (prpps: RefresherProps) => {
+    const {
+        onRefresh,
+        children,
+        pullingText = 'Pull down to refresh',
+        readyToRefreshText = 'Release to refresh',
+        refreshingText = 'Refreshing...',
+        threshold = 100,
+        triggerHeight = 50,
+        triggerAreaStyle,
+        scrollableElementClassName,
+    } = prpps;
+
+    const isMobile = useIsMobile();
+    const [pullDistance, setPullDistance] = useState<number>(0);
+    const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+    const startY = useRef<number | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const handleTouchStart = (e: React.TouchEvent) => {
+        if (isRefreshing) return;
+        // Pull-down is only allowed when the scroll bar is at the top
+        const targetScrollableDiv = scrollableElementClassName === null || typeof scrollableElementClassName === 'undefined' ? containerRef.current : document.querySelector(scrollableElementClassName as string);
+
+
+        if (targetScrollableDiv && targetScrollableDiv.scrollTop > 0) return;
+        startY.current = e.touches[0].clientY;
+    };
+
+    const handleTouchMove = (e: React.TouchEvent) => {
+        if (startY.current === null || isRefreshing) return;
+        const distance = e.touches[0].clientY - startY.current;
+        if (distance > 0) {
+            setPullDistance(distance > threshold ? threshold : distance); // The maximum pull should not exceed "threshold" value
+        }
+    };
+
+    const handleTouchEnd = async () => {
+        if (isRefreshing) return;
+        if (pullDistance >= threshold) {
+            setIsRefreshing(true);
+            await onRefresh();
+            setIsRefreshing(false);
+        }
+        setPullDistance(0);
+        startY.current = null;
+    };
+
+    return (
+        <>
+            {!isMobile ? <React.Fragment>
+                {/** CONTENT */}
+                {children}
+            </React.Fragment> : <div
+                ref={containerRef}
+                style={{
+                    overflow: 'hidden',
+                    touchAction: 'pan-y',
+                    marginTop: `-${triggerHeight}px`,
+                }}
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+            >
+                <div
+                    style={{
+                        transform: `translateY(${isRefreshing ? triggerHeight : pullDistance}px)`,
+                        transition: isRefreshing ? 'transform 0.2s' : 'transform 0.3s',
+                    }}
+                >
+
+                     {/** TRIGGER */}
+                    <div style={{
+                        ...triggerAreaStyle,
+                        height: `${triggerHeight}px`,
+                        textAlign: 'center',
+                        lineHeight: '50px'
+                    }}
+                    >
+                        {isRefreshing
+                            ? refreshingText
+                            : pullDistance >= threshold
+                                ? readyToRefreshText
+                                : pullingText}
+                    </div>
+
+                    {/** CONTENT */}
+                    {children}
+                </div>
+            </div>
+            }
+        </>
+    );
+};
+
+export default Refresher;

package/lib/esm/Select/index.scss

@@ -17,9 +17,11 @@
     --cus-sel-removebtn-fill: #000;
     --cus-sel-removebtn-hover-fill: #f00;
 
+        
     position: relative; /* Required */
 
 
+    
 
     /*------ Placeholder for input ------*/
     input::placeholder {
@@ -33,7 +35,6 @@
             fill: var(--cus-sel-arrow-fill);
         }
     }
-        
     /*------ Clean ------*/
     .clean {
         svg .clean-fill-g {
@@ -71,6 +72,7 @@
     .custom-select-multi__control-blinking-cursor {
         display: inline-block;
         color: var(--cus-sel-placeholder-color);
+        width: 100%;
 
         &.animated {
             animation: 1s mf-sel-blink step-end infinite;
@@ -80,6 +82,15 @@
             color: var(--cus-sel-input-placeholder-color);
         }
 
+        /* Text preview */
+        > span {
+            display: inline-block;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 100%;
+        }
+
 
     }
     .custom-select-multi__control-blinking-following-cursor {
@@ -383,7 +394,7 @@
     --cus-sel-listgroup-content-scrollbar-w: 10px;
     --cus-sel-listgroup-grouptitle-color: #a2a2a2;
     --cus-sel-listgroup-groupborder-color: #d8d8d8;
-
+    --cus-sel-loader-color: #000000;
 
 
 
@@ -391,11 +402,41 @@
     min-width: var(--cus-sel-listgroup-popwin-min-width);
     z-index: 1055;  /* --bs-modal-zindex */
 
+    
     &.active {
         display: block !important;
     }
 
+    
+
+    /*------ Loader ------*/
+    .cus-select-loader {
+        pointer-events: none;
+        z-index: 1;
+        width: 12px;
+        height: 12px;
+        text-align: center;
+        transform-origin: center;
+        transform: translate(-5px, 0) rotate(0);
+        animation: 1s linear infinite cus-select__spinner;
+
+        svg {
+            vertical-align: top;
+
+            path {
+                fill: var(--cus-sel-loader-color);
+            }
+        }
+    }
+
+    @keyframes cus-select__spinner {
+        to {
+            transform: translate(-5px, 0) rotate(-360deg);
+        }
+    }
 
+ 
+    /*------ Options ------*/
     .custom-select__options-contentlist {
         overflow: hidden;
         overflow-y: auto;