@rockshin/tao-ui 0.0.2 → 0.0.4

package/dist/components/select/mobile-select.d.ts

@@ -9,9 +9,12 @@ interface MobileSelectContentProps {
     showSearch?: boolean;
     filterOption?: (input: string, option: SelectOption) => boolean;
     notFoundContent?: ReactNode;
+    optionRender?: (option: SelectOption, info: {
+        index: number;
+    }) => ReactNode;
     onClose: () => void;
 }
-export declare function MobileSelectContent({ options, value, onChange, showSearch, filterOption, notFoundContent, onClose, }: MobileSelectContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileSelectContent({ options, value, onChange, showSearch, filterOption, notFoundContent, optionRender, onClose, }: MobileSelectContentProps): import("react/jsx-runtime").JSX.Element;
 export interface MobileSelectDrawerProps extends MobileSelectContentProps {
     open: boolean;
 }

package/dist/components/select/mobile-select.js

@@ -1,140 +1,122 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Drawer } from "../drawer/drawer.js";
 import "./mobile-select.css";
 const defaultFilter = (input, option)=>{
     const label = 'string' == typeof option.label ? option.label : String(option.label);
     return label.toLowerCase().includes(input.toLowerCase());
 };
-function MobileSelectContent(t0) {
-    const $ = c(23);
-    const { options, value, onChange, showSearch, filterOption, notFoundContent: t1, onClose } = t0;
-    const notFoundContent = void 0 === t1 ? "No results" : t1;
-    const [search, setSearch] = useState("");
-    let t2;
-    bb0: {
-        if (!showSearch || !search) {
-            t2 = options;
-            break bb0;
-        }
+function filterTree(options, fn, input) {
+    const result = [];
+    for (const o of options)if (o.options) {
+        const kids = filterTree(o.options, fn, input);
+        if (kids.length) result.push({
+            ...o,
+            options: kids
+        });
+    } else if (fn(input, o)) result.push(o);
+    return result;
+}
+function countLeaves(options) {
+    return options.reduce((n, o)=>n + (o.options ? countLeaves(o.options) : 1), 0);
+}
+function MobileSelectContent({ options, value, onChange, showSearch, filterOption, notFoundContent = 'No results', optionRender, onClose }) {
+    const [search, setSearch] = useState('');
+    const filteredOptions = useMemo(()=>{
+        if (!showSearch || !search) return options;
         const fn = filterOption ?? defaultFilter;
-        let t3;
-        if ($[0] !== fn || $[1] !== options || $[2] !== search) {
-            let t4;
-            if ($[4] !== fn || $[5] !== search) {
-                t4 = (o)=>fn(search, o);
-                $[4] = fn;
-                $[5] = search;
-                $[6] = t4;
-            } else t4 = $[6];
-            t3 = options.filter(t4);
-            $[0] = fn;
-            $[1] = options;
-            $[2] = search;
-            $[3] = t3;
-        } else t3 = $[3];
-        t2 = t3;
-    }
-    const filteredOptions = t2;
-    let t3;
-    if ($[7] !== onChange || $[8] !== onClose) {
-        t3 = (optValue)=>{
-            onChange?.(optValue);
-            onClose();
-        };
-        $[7] = onChange;
-        $[8] = onClose;
-        $[9] = t3;
-    } else t3 = $[9];
-    const handleSelect = t3;
-    let t4;
-    if ($[10] !== search || $[11] !== showSearch) {
-        t4 = showSearch && /*#__PURE__*/ jsxs("div", {
-            "data-tao-sheet-search": "",
+        return filterTree(options, fn, search);
+    }, [
+        options,
+        search,
+        showSearch,
+        filterOption
+    ]);
+    const handleSelect = useCallback((optValue)=>{
+        onChange?.(optValue);
+        onClose();
+    }, [
+        onChange,
+        onClose
+    ]);
+    let optIndex = 0;
+    const renderItem = (opt)=>{
+        const index = optIndex++;
+        const isSelected = opt.value === value;
+        return /*#__PURE__*/ jsxs("div", {
+            "data-tao-sheet-item": "",
+            "data-tao-selected": isSelected || void 0,
+            "data-tao-disabled": opt.disabled || void 0,
+            onClick: ()=>{
+                if (!opt.disabled) handleSelect(opt.value);
+            },
+            "data-tao-has-desc": null != opt.description || void 0,
             children: [
-                /*#__PURE__*/ jsx(SearchIcon, {}),
-                /*#__PURE__*/ jsx("input", {
-                    "data-tao-sheet-search-input": "",
-                    value: search,
-                    onChange: (e)=>setSearch(e.target.value),
-                    placeholder: "Search...",
-                    autoFocus: true
+                optionRender ? optionRender(opt, {
+                    index
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        null != opt.icon && /*#__PURE__*/ jsx("span", {
+                            "data-tao-sheet-item-icon": "",
+                            children: opt.icon
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            "data-tao-sheet-item-main": "",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    "data-tao-sheet-item-label": "",
+                                    children: opt.label
+                                }),
+                                null != opt.description && /*#__PURE__*/ jsx("span", {
+                                    "data-tao-sheet-item-desc": "",
+                                    children: opt.description
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isSelected && /*#__PURE__*/ jsx("span", {
+                    "data-tao-sheet-item-check": "",
+                    children: /*#__PURE__*/ jsx(CheckIcon, {})
                 })
             ]
-        });
-        $[10] = search;
-        $[11] = showSearch;
-        $[12] = t4;
-    } else t4 = $[12];
-    let t5;
-    if ($[13] !== filteredOptions || $[14] !== handleSelect || $[15] !== notFoundContent || $[16] !== value) {
-        t5 = filteredOptions.length > 0 ? filteredOptions.map((opt)=>{
-            const isSelected = opt.value === value;
-            return /*#__PURE__*/ jsxs("div", {
-                "data-tao-sheet-item": "",
-                "data-tao-selected": isSelected || void 0,
-                "data-tao-disabled": opt.disabled || void 0,
-                onClick: ()=>{
-                    if (!opt.disabled) handleSelect(opt.value);
-                },
-                "data-tao-has-desc": null != opt.description || void 0,
+        }, opt.value);
+    };
+    const renderTree = (opts)=>opts.map((o)=>o.options ? /*#__PURE__*/ jsxs("div", {
+                "data-tao-sheet-group": "",
                 children: [
-                    null != opt.icon && /*#__PURE__*/ jsx("span", {
-                        "data-tao-sheet-item-icon": "",
-                        children: opt.icon
-                    }),
-                    /*#__PURE__*/ jsxs("span", {
-                        "data-tao-sheet-item-main": "",
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                "data-tao-sheet-item-label": "",
-                                children: opt.label
-                            }),
-                            null != opt.description && /*#__PURE__*/ jsx("span", {
-                                "data-tao-sheet-item-desc": "",
-                                children: opt.description
-                            })
-                        ]
+                    /*#__PURE__*/ jsx("div", {
+                        "data-tao-sheet-group-label": "",
+                        children: o.label
                     }),
-                    isSelected && /*#__PURE__*/ jsx("span", {
-                        "data-tao-sheet-item-check": "",
-                        children: /*#__PURE__*/ jsx(CheckIcon, {})
+                    o.options.map(renderItem)
+                ]
+            }, o.value) : renderItem(o));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            showSearch && /*#__PURE__*/ jsxs("div", {
+                "data-tao-sheet-search": "",
+                children: [
+                    /*#__PURE__*/ jsx(SearchIcon, {}),
+                    /*#__PURE__*/ jsx("input", {
+                        "data-tao-sheet-search-input": "",
+                        value: search,
+                        onChange: (e)=>setSearch(e.target.value),
+                        placeholder: "Search...",
+                        autoFocus: true
                     })
                 ]
-            }, opt.value);
-        }) : /*#__PURE__*/ jsx("div", {
-            "data-tao-sheet-empty": "",
-            children: notFoundContent
-        });
-        $[13] = filteredOptions;
-        $[14] = handleSelect;
-        $[15] = notFoundContent;
-        $[16] = value;
-        $[17] = t5;
-    } else t5 = $[17];
-    let t6;
-    if ($[18] !== t5) {
-        t6 = /*#__PURE__*/ jsx("div", {
-            "data-tao-sheet-list": "",
-            children: t5
-        });
-        $[18] = t5;
-        $[19] = t6;
-    } else t6 = $[19];
-    let t7;
-    if ($[20] !== t4 || $[21] !== t6) {
-        t7 = /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                t4,
-                t6
-            ]
-        });
-        $[20] = t4;
-        $[21] = t6;
-        $[22] = t7;
-    } else t7 = $[22];
-    return t7;
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-tao-sheet-list": "",
+                children: countLeaves(filteredOptions) > 0 ? renderTree(filteredOptions) : /*#__PURE__*/ jsx("div", {
+                    "data-tao-sheet-empty": "",
+                    children: notFoundContent
+                })
+            })
+        ]
+    });
 }
 function MobileSelectDrawer(t0) {
     const $ = c(14);