@rockshin/tao-ui 0.0.1

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

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { SelectOption } from './select';
+import './mobile-select.css';
+interface MobileSelectContentProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    showSearch?: boolean;
+    filterOption?: (input: string, option: SelectOption) => boolean;
+    notFoundContent?: ReactNode;
+    onClose: () => void;
+}
+export declare function MobileSelectContent({ options, value, onChange, showSearch, filterOption, notFoundContent, onClose, }: MobileSelectContentProps): import("react/jsx-runtime").JSX.Element;
+export interface MobileSelectDrawerProps extends MobileSelectContentProps {
+    open: boolean;
+}
+export declare function MobileSelectDrawer({ open, onClose, placeholder, ...rest }: MobileSelectDrawerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,224 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { 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;
+        }
+        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": "",
+            children: [
+                /*#__PURE__*/ jsx(SearchIcon, {}),
+                /*#__PURE__*/ jsx("input", {
+                    "data-tao-sheet-search-input": "",
+                    value: search,
+                    onChange: (e)=>setSearch(e.target.value),
+                    placeholder: "Search...",
+                    autoFocus: true
+                })
+            ]
+        });
+        $[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);
+                },
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "data-tao-sheet-item-label": "",
+                        children: opt.label
+                    }),
+                    isSelected && /*#__PURE__*/ jsx("span", {
+                        "data-tao-sheet-item-check": "",
+                        children: /*#__PURE__*/ jsx(CheckIcon, {})
+                    })
+                ]
+            }, 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;
+}
+function MobileSelectDrawer(t0) {
+    const $ = c(14);
+    let onClose;
+    let open;
+    let placeholder;
+    let rest;
+    if ($[0] !== t0) {
+        ({ open, onClose, placeholder, ...rest } = t0);
+        $[0] = t0;
+        $[1] = onClose;
+        $[2] = open;
+        $[3] = placeholder;
+        $[4] = rest;
+    } else {
+        onClose = $[1];
+        open = $[2];
+        placeholder = $[3];
+        rest = $[4];
+    }
+    const t1 = placeholder ?? "Select";
+    let t2;
+    if ($[5] !== onClose || $[6] !== placeholder || $[7] !== rest) {
+        t2 = /*#__PURE__*/ jsx(MobileSelectContent, {
+            onClose: onClose,
+            placeholder: placeholder,
+            ...rest
+        });
+        $[5] = onClose;
+        $[6] = placeholder;
+        $[7] = rest;
+        $[8] = t2;
+    } else t2 = $[8];
+    let t3;
+    if ($[9] !== onClose || $[10] !== open || $[11] !== t1 || $[12] !== t2) {
+        t3 = /*#__PURE__*/ jsx(Drawer, {
+            open: open,
+            onClose: onClose,
+            placement: "bottom",
+            title: t1,
+            height: "70vh",
+            children: t2
+        });
+        $[9] = onClose;
+        $[10] = open;
+        $[11] = t1;
+        $[12] = t2;
+        $[13] = t3;
+    } else t3 = $[13];
+    return t3;
+}
+function SearchIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsxs("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "11",
+                    cy: "11",
+                    r: "8"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "m21 21-4.3-4.3"
+                })
+            ]
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function CheckIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "18",
+            height: "18",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("polyline", {
+                points: "20 6 9 17 4 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { MobileSelectContent, MobileSelectDrawer };