pixuireactcomponents 1.2.1 → 1.2.3

package/index.d.ts

@@ -0,0 +1,15 @@
+export { Tabs } from "./ui/components/tab/Tabs";
+export { Tab } from "./ui/components/tab/Tab";
+export { Slider } from "./ui/components/slider/Slider";
+export { Progress } from "./ui/components/progress/Progress";
+export { DropdownOptionUI } from "./ui/components/dropdown/DropdownOptionUI";
+export { DropdownSpreadMainUI } from "./ui/components/dropdown/DropdownSpreadMainUI";
+export { DropdownUnspreadMainUI } from "./ui/components/dropdown/DropdownUnspreadMainUI";
+export { GradientText } from "./ui/components/gradient/GradientText";
+export { OutlineText } from "./ui/components/outlinetext/OutlineText";
+export { Logger } from "./tools/Logger";
+export { EventDispatcherJs } from "./tools/EventDispatcherJs";
+export { Carousel } from "./ui/components/carousel/Carousel";
+export { Slapface } from "./ui/components/slapface/Slapface";
+export { Button } from "./ui/components/button/Button";
+export { Dropdown, DropdownConfig } from "./ui/components/dropdown/Dropdown";

package/index.js

@@ -1,20 +1,16 @@
-export {Tabs} from "./ui/components/tab/Tabs"
-export {Tab} from "./ui/components/tab/Tab"
-export {Slider} from "./ui/components/slider/Slider"
-export {Progress} from "./ui/components/progress/Progress"
-export{ Dropdown, DropdownConfig} from "./ui/components/dropdown/Dropdown" 
-export{DropdownOptionUI} from "./ui/components/dropdown/DropdownOptionUI"
-export{DropdownSpreadMainUI} from "./ui/components/dropdown/DropdownSpreadMainUI"
-export{DropdownUnspreadMainUI} from "./ui/components/dropdown/DropdownUnspreadMainUI"
-export{GradientText} from "./ui/components/gradient/GradientText"
-export{OutlineText} from "./ui/components/outlinetext/OutlineText"
-export{Logger} from "./tools/Logger"
-export{EventDispatcherJs} from "./tools/EventDispatcherJs"
-export {Carousel} from "./ui/components/carousel/Carousel"
-export {Slapface} from "./ui/components/slapface/Slapface"
-export {Button} from "./ui/components/button/Button"
-
-
-
-
-console.log("Hello, 欢迎使用PixUI React Components")
+export { Tabs } from "./ui/components/tab/Tabs";
+export { Tab } from "./ui/components/tab/Tab";
+export { Slider } from "./ui/components/slider/Slider";
+export { Progress } from "./ui/components/progress/Progress";
+export { Dropdown } from "./ui/components/dropdown/Dropdown";
+export { DropdownOptionUI } from "./ui/components/dropdown/DropdownOptionUI";
+export { DropdownSpreadMainUI } from "./ui/components/dropdown/DropdownSpreadMainUI";
+export { DropdownUnspreadMainUI } from "./ui/components/dropdown/DropdownUnspreadMainUI";
+export { GradientText } from "./ui/components/gradient/GradientText";
+export { OutlineText } from "./ui/components/outlinetext/OutlineText";
+export { Logger } from "./tools/Logger";
+export { EventDispatcherJs } from "./tools/EventDispatcherJs";
+export { Carousel } from "./ui/components/carousel/Carousel";
+export { Slapface } from "./ui/components/slapface/Slapface";
+export { Button } from "./ui/components/button/Button";
+console.log("Hello, 欢迎使用PixUI React Components");

package/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "pixuireactcomponents",
-  "version": "1.2.1",
-  "description": "pixui react components",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "hardenzheng",
-  "license": "ISC"
+    "name": "pixuireactcomponents",
+    "version": "1.2.3",
+    "description": "pixui react components",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "hardenzheng",
+    "license": "ISC"
 }

package/tools/EventDispatcherJs.d.ts

@@ -0,0 +1,10 @@
+declare class EventDispatcherCls {
+    private listeners;
+    AddEventListener(eventName: string, listener: any, ...args: any[]): void;
+    HasEventListener(eventName: string): boolean;
+    RemoveEventListener(eventName: string, listener: any): void;
+    RemoveEventAllListener(eventName: string): void;
+    DispatchEvent(eventName: string, ...args: any[]): void;
+}
+export declare let EventDispatcherJs: Readonly<EventDispatcherCls>;
+export {};

package/tools/EventDispatcherJs.js

@@ -0,0 +1,71 @@
+var EventDispatcherCls = /** @class */ (function () {
+    function EventDispatcherCls() {
+        this.listeners = {};
+    }
+    EventDispatcherCls.prototype.AddEventListener = function (eventName, listener) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        if (listener == undefined) {
+            console.warn("listener为空, eventName: " + eventName);
+            return;
+        }
+        var listeners = this.listeners;
+        if (listeners[eventName] == undefined) {
+            listeners[eventName] = [];
+        }
+        var eventList = listeners[eventName];
+        eventList.forEach(function (v) {
+            if (v.eventName == eventName && v.listener == listener) {
+                console.warn("重复添加的事件监听, eventName: " + eventName);
+                return;
+            }
+        });
+        eventList.push({ "eventName": eventName, "listener": listener, "args": args, });
+    };
+    EventDispatcherCls.prototype.HasEventListener = function (eventName) {
+        if (this.listeners[eventName] == undefined || this.listeners[eventName].length == 0) {
+            return false;
+        }
+        return true;
+    };
+    EventDispatcherCls.prototype.RemoveEventListener = function (eventName, listener) {
+        if (this.HasEventListener(eventName) == false) {
+            return;
+        }
+        var eventList = this.listeners[eventName];
+        for (var i = eventList.length - 1; i >= 0; --i) {
+            var event_1 = eventList[i];
+            if (event_1.eventName == eventName && event_1.listener == listener) {
+                eventList.splice(i, 1);
+            }
+        }
+        if (eventList.length == 0) {
+            this.listeners[eventName] = null;
+        }
+    };
+    EventDispatcherCls.prototype.RemoveEventAllListener = function (eventName) {
+        if (this.HasEventListener(eventName)) {
+            this.listeners[eventName] = null;
+        }
+    };
+    EventDispatcherCls.prototype.DispatchEvent = function (eventName) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        if (eventName == undefined || this.HasEventListener(eventName) == false) {
+            return;
+        }
+        var eventList = this.listeners[eventName].slice(0);
+        for (var i = 0; i < eventList.length; ++i) {
+            var obj = eventList[i];
+            var listener = obj.listener;
+            // listener.apply(this, obj.args.concat(args));
+            listener.apply(void 0, obj.args.concat(args));
+        }
+    };
+    return EventDispatcherCls;
+}());
+export var EventDispatcherJs = Object.freeze(new EventDispatcherCls());

package/tools/Logger.d.ts

@@ -0,0 +1,6 @@
+export declare function Logger(): void;
+export declare namespace Logger {
+    var ObjectPrinter: (object: any, name: any) => void;
+    var ObjectPrinter2: (object: any, name: any) => void;
+    var HierarchyPrinter: (object: any, name: any) => void;
+}

package/tools/Logger.js

@@ -0,0 +1,138 @@
+export function Logger() {
+}
+// 移除最后一个(key, value)后面的 ','
+var regex = new RegExp("(,)(\n$)");
+/**
+ * printer1: 完整打印，用4个空格缩进
+ * @param object Object
+ * @param name string
+ */
+Logger.ObjectPrinter = function (object, name) {
+    var strResult = "";
+    strResult += name + " = ";
+    strResult += getTreeStyleStr(object, 1);
+    strResult = strResult.replace(regex, "$2");
+    console.warn(strResult);
+};
+function getTreeStyleStr(object, level) {
+    var isArray = object instanceof Array;
+    var str = isArray ? "[\n" : "{\n";
+    for (var key in object) {
+        var value = object[key];
+        var curSeparation = getSeparation1(level);
+        if (typeof (value) != 'object') {
+            str += curSeparation + key + " : " + value + ",\n";
+        }
+        else {
+            str += curSeparation + key + " : " + getTreeStyleStr(value, level + 1);
+        }
+    }
+    str = str.replace(regex, "$2");
+    str += getSeparation1(level - 1) + (isArray ? "],\n" : "},\n");
+    return str;
+}
+var SEPARARION1 = "    ";
+function getSeparation1(level) {
+    var totalSeparation = "";
+    while (level > 0) {
+        totalSeparation += SEPARARION1;
+        level--;
+    }
+    return totalSeparation;
+}
+var regexForLine = new RegExp(",$");
+/**
+ * printer2: 完整打印，用\t
+ * @param object Object
+ * @param name sring
+ */
+Logger.ObjectPrinter2 = function (object, name) {
+    var lines = [];
+    lines.push("".concat(name, " = "));
+    getTreeStyleLines(object, 1, lines);
+    console.warn(lines.join("\n"));
+};
+function getTreeStyleLines(object, level, lines) {
+    var isArray = object instanceof Array;
+    var linePostFix = isArray ? "[" : "{";
+    var lastLine = lines.pop();
+    lines.push(lastLine + linePostFix);
+    for (var key in object) {
+        var value = object[key];
+        var curSeparation = getSeparation2(level);
+        if (typeof (value) != 'object') {
+            var curLine = curSeparation + key + " : " + value + ",";
+            lines.push(curLine);
+        }
+        else {
+            var curLinePreFix = curSeparation + key + " : ";
+            lines.push(curLinePreFix);
+            getTreeStyleLines(value, level + 1, lines);
+        }
+    }
+    lastLine = lines.pop();
+    if (lastLine)
+        lines.push(lastLine.replace(regexForLine, "")); // 一定执行
+    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"));
+}
+var SEPARARION2 = "\t";
+function getSeparation2(level) {
+    var totalSeparation = "";
+    while (level > 0) {
+        totalSeparation += SEPARARION2;
+        level--;
+    }
+    return totalSeparation;
+}
+/**
+ *
+    printer3: 打印关键层级信息，如果是数组，只打印第一个，后续用 ...len 代替（PS: 假定数组中每个元素都是一样的格式）
+ * @param object Object
+ * @param name string
+ */
+Logger.HierarchyPrinter = function (object, name) {
+    var lines = [];
+    lines.push("".concat(name, " = "));
+    getTreeStyleHierarchyLines(object, 1, lines);
+    console.warn(lines.join("\n"));
+};
+function getTreeStyleHierarchyLines(object, level, lines) {
+    var isArray = object instanceof Array;
+    var linePostFix = isArray ? "[" : "{";
+    var lastLine = lines.pop();
+    lines.push(lastLine + linePostFix);
+    if (isArray) {
+        var key = 0;
+        var value = object[key];
+        var curSeparation = getSeparation2(level);
+        if (typeof (value) != 'object') {
+            var curLine = curSeparation + key + " : " + value + ",";
+            lines.push(curLine);
+        }
+        else {
+            var curLinePreFix = curSeparation + key + " : ";
+            lines.push(curLinePreFix);
+            getTreeStyleHierarchyLines(value, level + 1, lines);
+        }
+        lines.push(curSeparation + "...len=" + object.length);
+    }
+    else {
+        for (var key in object) {
+            var value = object[key];
+            var curSeparation = getSeparation2(level);
+            if (typeof (value) != 'object') {
+                var curLine = curSeparation + key + " : " + value + ",";
+                lines.push(curLine);
+            }
+            else {
+                var curLinePreFix = curSeparation + key + " : ";
+                lines.push(curLinePreFix);
+                getTreeStyleHierarchyLines(value, level + 1, lines);
+            }
+        }
+        lastLine = lines.pop();
+        if (lastLine)
+            lines.push(lastLine.replace(regexForLine, "")); // 一定执行
+    }
+    lines.push(getSeparation2(level - 1) + (isArray ? "]" : "}"));
+}

package/ui/components/button/Button.d.ts

@@ -0,0 +1,5 @@
+import { h, Component } from "preact";
+export declare class Button extends Component<any, any> {
+    private btnImg;
+    render(props: any): h.JSX.Element;
+}

package/ui/components/button/Button.js

@@ -0,0 +1,37 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { h, Component } from "preact";
+var Button = /** @class */ (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function (props) {
+        var _this = this;
+        return (h("div", { onClick: function () {
+                var _a;
+                if (_this.props.clickEvent) {
+                    if (_this.props.clickArr)
+                        (_a = _this.props).clickEvent.apply(_a, props.clickArr);
+                    else
+                        _this.props.clickEvent();
+                }
+            }, onMouseDown: function () { _this.btnImg.src = _this.props.pic_yaxia; }, onMouseUp: function () { _this.btnImg.src = _this.props.pic_xuanfu; }, onMouseOver: function () { _this.btnImg.src = _this.props.pic_xuanfu; }, onMouseOut: function () { _this.btnImg.src = _this.props.pic_changtai; } },
+            h("img", { ref: function (img) { _this.btnImg = img; }, src: this.props.pic_changtai })));
+    };
+    return Button;
+}(Component));
+export { Button };

package/ui/components/carousel/Carousel.d.ts

@@ -0,0 +1,5 @@
+import { h } from 'preact';
+export declare function Carousel(props: any): h.JSX.Element;
+export declare namespace Carousel {
+    var Item: (props: any) => h.JSX.Element;
+}

package/ui/components/carousel/Carousel.js

@@ -0,0 +1,219 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { h } from 'preact';
+import { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../../../../../lib/preact/hooks/src';
+// import React, { useState, useEffect, useRef, useMemo } from 'preact/hooks';
+var indicatorStyle = { width: '20px', height: '8px', margin: '5px', backgroundColor: '#cecfda', borderRadius: '3px' };
+var indicatorSelectedStyle = __assign(__assign({}, indicatorStyle), { backgroundColor: '#fafbfc' });
+export function Carousel(props) {
+    var _a = props.children, children = _a === void 0 ? [] : _a, _b = props.defaultIndex, defaultIndex = _b === void 0 ? 1 : _b, _c = props.compWidth, compWidth = _c === void 0 ? 100 : _c, _d = props.compHeight, compHeight = _d === void 0 ? 100 : _d, _e = props.autoplay, autoplay = _e === void 0 ? true : _e, _f = props.switchDuration, switchDuration = _f === void 0 ? 3000 : _f, _g = props.loop, loop = _g === void 0 ? true : _g, _h = props.isVertical, isVertical = _h === void 0 ? false : _h, _j = props.touchable, touchable = _j === void 0 ? true : _j, _k = props.onSlideChange, onSlideChange = _k === void 0 ? null : _k, _l = props.onclickEvent, onclickEvent = _l === void 0 ? null : _l;
+    useImperativeHandle(props.cRef, function () { return ({
+        handleNext: handleNext,
+        handlePrev: handlePrev
+    }); });
+    var duration = switchDuration < 1000 ? 1000 : switchDuration;
+    var _m = useState(defaultIndex), showIndex = _m[0], setShowIndex = _m[1];
+    //轮播元素正在滚动
+    var isMoving = useRef(false);
+    //鼠标手势信息
+    var isMouseDown = useRef(false);
+    var mouseDownX = useRef(0);
+    var mouseDownY = useRef(0);
+    var handleNextRef = useRef(function () { });
+    var nextInterval = useRef();
+    var _o = useState(true), showTransition = _o[0], setShowTransition = _o[1];
+    var _p = useState([0, 0]), gesteroffset = _p[0], setGesteroffset = _p[1];
+    var _q = useState(''), logTex = _q[0], setLogTex = _q[1];
+    var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex]);
+    var itemBoxStyle = { minWidth: compWidth + 'px', minHeight: compHeight + 'px', maxWidth: compWidth + 'px', maxHeight: compHeight + 'px', };
+    var carouselItems = useMemo(function () {
+        var firstChild = children[0];
+        var lastChild = children[children.length - 1];
+        return __spreadArray(__spreadArray([lastChild], children, true), [firstChild], false);
+    }, [children]);
+    var isLastCarouseItem = function () { return showIndex === carouselItems.length - 1; };
+    var isFirstCarouseLastItem = function () { return showIndex === 0; };
+    useEffect(function () {
+        setNextInterval();
+    }, [autoplay]);
+    useEffect(function () {
+        //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem()) {
+            setShowTransition(true);
+        }
+    }, [showIndex]);
+    //更新handleNext的环境
+    useEffect(function () {
+        handleNextRef.current = handleNext;
+    });
+    var setNextInterval = function () {
+        clearInterval(nextInterval.current);
+        if (autoplay) {
+            nextInterval.current = setInterval(function () {
+                handleNextRef.current();
+            }, duration);
+        }
+    };
+    useEffect(function () {
+        setNextInterval();
+    }, []);
+    var handlePrev = function () {
+        if (isMoving.current)
+            return;
+        isMoving.current = true;
+        if (showIndex === 0) {
+            setShowIndex(carouselItems.length - 1);
+        }
+        else {
+            setShowIndex(showIndex - 1);
+        }
+    };
+    var handleNext = function () {
+        // console.log('nex', isMoving.current, showIndex, isVertical ? `translate(0px, ${offset}px)` : `translate(${offset}px, 0px)`)
+        if (!loop && showIndex == carouselItems.length - 2)
+            return;
+        if (isMoving.current)
+            return;
+        isMoving.current = true;
+        setShowIndex(showIndex + 1);
+    };
+    var handleTransitionEnd = function () {
+        //判断前后补位元素准备跳转
+        //在动画结束以后关掉，否则用鼠标拖动的时候不能补充剩下的offset
+        if (isLastCarouseItem() || isFirstCarouseLastItem()) {
+            setShowTransition(false);
+        }
+        // console.log('showIndex' + showIndex)
+        isMoving.current = false;
+        //触发onSlideChange
+        if (!isLastCarouseItem() && !isFirstCarouseLastItem() && onSlideChange)
+            onSlideChange(showIndex - 1);
+        // 处理首尾特殊case
+        if (isLastCarouseItem()) {
+            setShowIndex(1);
+        }
+        if (isFirstCarouseLastItem()) {
+            setShowIndex(carouselItems.length - 2);
+        }
+    };
+    var gestureUp = function () {
+        // setLogTex(logTex + 'UP ');
+        if (!touchable)
+            return;
+        if (isMoving.current)
+            return;
+        //打开动画
+        setShowTransition(true);
+        isMouseDown.current = false;
+        //拖动大于1/3的时候跳转
+        if (isVertical) {
+            if (gesteroffset[1] > compHeight / 3) {
+                handlePrev();
+            }
+            else if (gesteroffset[1] < -compHeight / 3) {
+                handleNext();
+            }
+        }
+        else {
+            if (gesteroffset[0] > compWidth / 3) {
+                handlePrev();
+            }
+            else if (gesteroffset[0] < -compWidth / 3) {
+                handleNext();
+            }
+        }
+        setGesteroffset([0, 0]);
+        setNextInterval();
+    };
+    var gestureMove = function (e) {
+        if (!touchable)
+            return;
+        if (!isMouseDown.current)
+            return;
+        var l = e.target.getBoundingClientRect().left;
+        var r = e.target.getBoundingClientRect().right;
+        var t = e.target.getBoundingClientRect().top;
+        var b = e.target.getBoundingClientRect().bottom;
+        var x = e.clientX;
+        var y = e.clientY;
+        setGesteroffset([e.clientX - mouseDownX.current, e.clientY - mouseDownY.current]);
+        //计算滑动超出元素范围
+        if (x < l || x > r || y > b || y < t) {
+            gestureUp();
+        }
+    };
+    var gestureDown = function (e) {
+        if (!touchable)
+            return;
+        if (isMoving.current)
+            return;
+        if (nextInterval.current) {
+            clearInterval(nextInterval.current);
+            nextInterval.current = null;
+        }
+        mouseDownX.current = e.clientX;
+        mouseDownY.current = e.clientY;
+        isMouseDown.current = true;
+        //拖动时关闭动画
+        setShowTransition(false);
+    };
+    var gestureClick = function (props) {
+        if (isMoving.current)
+            return;
+        if (onclickEvent) {
+            onclickEvent(showIndex - 1);
+        }
+    };
+    return (h("div", { style: { flexDirection: 'column' } },
+        h("div", { style: __assign(__assign({ position: 'relative' }, itemBoxStyle), { overflow: 'hidden', flexShrink: 0 }) },
+            h("div", { style: {
+                    display: 'flex',
+                    width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
+                    height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
+                    transition: "transform ".concat(showTransition ? '0.5s' : '0s', " ease 0s"),
+                    transform: isVertical ? "translate(0px, ".concat(offset + gesteroffset[1], "px)") : "translate(".concat(offset + gesteroffset[0], "px, 0px)"),
+                    flexDirection: isVertical ? 'column' : 'row',
+                    flexShrink: 0,
+                }, class: 'wrapper', onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))),
+        h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function () { gestureClick(props); }, class: 'GestureComp', 
+            // onMouseUp={() => { gestureUp(); }}
+            // onMouseMove={(e) => { gestureMove(e); }}
+            // onMouseDown={gestureDown}
+            onDragStart: gestureDown, 
+            // onMouseOut={() => { gestureUp(); }}
+            // onTouchEnd={() => { gestureUp(); }}
+            onDrag: function (e) {
+                gestureMove(e);
+                // setLogTex(logTex + ((e.target as any).className == 'GestureComp' ? '' : '111'));
+            }, onDragEnd: function () { gestureUp(); } }),
+        h("div", { style: { flexDirection: isVertical ? 'column' : 'row', } }, children.map(function (v, i) {
+            return h("div", { style: (showIndex == i + 1) ? indicatorSelectedStyle : indicatorStyle, onClick: function () { setShowIndex(i + 1); } });
+        }))));
+}
+Carousel.Item = function (props) {
+    return h("div", { style: {
+        // width: '100%',
+        // height: '100%',
+        // flexShrink: 0,
+        } },
+        " ",
+        props.children);
+};

package/ui/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,30 @@
+import { Component, CSSProperties, h } from 'preact';
+import { DropdownOptionUI } from './DropdownOptionUI';
+import { DropdownSpreadMainUI } from './DropdownSpreadMainUI';
+import { DropdownUnspreadMainUI } from './DropdownUnspreadMainUI';
+export interface DropdownConfig<T> {
+    spreadStyle: CSSProperties;
+    datas: T[];
+}
+export declare class Dropdown<T, DDUnspreadMainUI extends DropdownUnspreadMainUI<T>, DDSpreadMainUI extends DropdownSpreadMainUI<T>, DDOptionUI extends DropdownOptionUI<T>> extends Component<{
+    config: DropdownConfig<T>;
+    onChoose: Function;
+    defaultIndex: number | null;
+    unspreadMainUI: DDUnspreadMainUI;
+    spreadMainUI: DDSpreadMainUI;
+    optionsUI: DDOptionUI[];
+}, {
+    selectedIndex: number;
+    isSpread: boolean;
+}> {
+    constructor(props: any);
+    componentWillUnmount(): void;
+    addNetEvents: () => void;
+    removeNetEvents: () => void;
+    addLogicEvents: () => void;
+    removeLogicEvents: () => void;
+    openList: () => void;
+    closeList: () => void;
+    onChoose: (index: number) => void;
+    render(): h.JSX.Element;
+}