pixuireactcomponents 1.1.0 → 1.1.2

package/index.d.ts

@@ -1,5 +1,6 @@
 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";

package/index.js

@@ -1,5 +1,6 @@
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/ui/components/dropdown/Dropdown.js

@@ -14,6 +14,16 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Component, h } from "preact";
+var optionsDivStyle = {
+    marginTop: 3,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    height: 'auto',
+    overflow: 'scroll',
+    overflowStyle: 'none',
+};
 var Dropdown = /** @class */ (function (_super) {
     __extends(Dropdown, _super);
     function Dropdown(props) {
@@ -75,7 +85,7 @@ var Dropdown = /** @class */ (function (_super) {
         return (h("div", null,
             h("div", { style: this.props.config.spreadStyle },
                 this.props.spreadMainUI,
-                _optionsUI)));
+                h("div", { style: optionsDivStyle }, _optionsUI))));
     };
     return Dropdown;
 }(Component));

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

@@ -1,6 +1,7 @@
 import { Component } from "preact";
 /**
  * dropdown 打开时options列表的单个Item UI
+ * 如果要使用滚动条,在创建改该组件时最外层div样式里面需添加flex-shrink : 0
  */
 export declare abstract class DropdownOptionUI<T> extends Component<{
     info: T;

package/ui/components/dropdown/DropdownOptionUI.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 import { Component } from "preact";
 /**
  * dropdown 打开时options列表的单个Item UI
+ * 如果要使用滚动条,在创建改该组件时最外层div样式里面需添加flex-shrink : 0
  */
 var DropdownOptionUI = /** @class */ (function (_super) {
     __extends(DropdownOptionUI, _super);

package/ui/components/slider/Slider.d.ts

@@ -0,0 +1,53 @@
+import { Component, h } from "preact";
+export interface SliderProps {
+    percent: number;
+    wrapperWidth: number;
+    wrapperHeight: number;
+    height: number;
+    dotWidth: number;
+    dotHeight: number;
+    dotWrapperWidth: number;
+    dotWrapperHeight: number;
+    outerBg: string;
+    innerBg: string;
+    dotBg: string;
+    onDragStart: Function | null;
+    onDrag: Function | null;
+    onDragEnd: Function | null;
+    isDiscrete: Boolean | null;
+    discrete?: number;
+    maxDiscrete?: number;
+    hasIncDecButton: Boolean | null;
+    incButtonWidth?: number;
+    incButtonHeight?: number;
+    decButtonWidth?: number;
+    decButtonHeight?: number;
+    incButtonBg?: string;
+    decButtonBg?: string;
+    overallWidth?: number;
+    onIncClick?: Function | null;
+    onDecClick?: Function | null;
+}
+export declare class Slider extends Component<SliderProps, {
+    percent: number;
+}> {
+    discrete: number;
+    private refWrapper;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillReceiveProps(nextProps: any): void;
+    onDragStart: (event: any) => void;
+    onDrag: (event: any) => void;
+    onDragEnd: (event: any) => void;
+    onDecClick: () => void;
+    onIncClick: () => void;
+    computeWrapperStyle: () => void;
+    computeOuterStyle: () => void;
+    computeInnerStyle: () => void;
+    computeDotWrapperStyle: () => void;
+    computeDotStyle: () => void;
+    computeIncButtonStyle: () => void;
+    computeDecButtonStyle: () => void;
+    computeWithButtonStyle: () => void;
+    render(): h.JSX.Element;
+}

package/ui/components/slider/Slider.js

@@ -0,0 +1,273 @@
+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 __());
+    };
+})();
+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);
+};
+import { Component, createRef, h } from "preact";
+var row_center_center = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+var row_between_center = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+};
+var wrapperStyle;
+var outerStyle;
+var innerStyle;
+var dotStyle;
+var dotWrapperStyle;
+var incButtonStyle;
+var decButtonStyle;
+var withButtonStyle;
+var lastX = undefined; // 上一次位置的横坐标
+var count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
+var rect = undefined; // 滑动区域
+var Slider = /** @class */ (function (_super) {
+    __extends(Slider, _super);
+    function Slider(props) {
+        var _this = _super.call(this, props) || this;
+        _this.discrete = Math.round(_this.props.discrete == null ? 0 : _this.props.discrete);
+        _this.refWrapper = createRef();
+        _this.onDragStart = function (event) {
+            console.log("【Slider】DragStart event.clientX--" + event.clientX + "-----percent----" + _this.state.percent + "-----currentX----" + (_this.state.percent / 100 * _this.props.wrapperWidth));
+            lastX = event.clentX;
+            count = _this.state.percent / 100 * _this.props.wrapperWidth;
+            if (_this.props.onDragStart) {
+                _this.props.onDragStart();
+            }
+        };
+        _this.onDrag = function (event) {
+            if (event.clientX < rect.left || event.clientX > rect.right)
+                return;
+            if (lastX == undefined) {
+                lastX = event.clientX;
+                return;
+            }
+            var move = Number(event.clientX) - Number(lastX);
+            count += move;
+            count = Math.min(_this.props.wrapperWidth, count);
+            count = Math.max(0, count);
+            var newPercent = count / _this.props.wrapperWidth * 100;
+            if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
+                newPercent = count / _this.props.wrapperWidth * _this.props.maxDiscrete;
+                _this.discrete = Math.round(newPercent);
+                // this.setState({
+                //     discrete: Math.round(newPercent),
+                // })
+                newPercent = _this.discrete * (100 / _this.props.maxDiscrete);
+            }
+            _this.setState({
+                percent: newPercent
+            }, function () {
+                console.log("【Slider】OnDrag event.clientX--" + event.clientX + "-----percent----" + _this.state.percent + "-----discrete----" + _this.discrete + "-----currentX----" + (_this.state.percent / 100 * _this.props.wrapperWidth));
+                if (_this.props.onDrag)
+                    _this.props.onDrag(_this.props.isDiscrete ? _this.discrete : newPercent);
+            });
+            lastX = event.clientX;
+        };
+        _this.onDragEnd = function (event) {
+            lastX = undefined;
+            if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
+                //console.log("OnDragEnd -----discrete----"+this.state.discrete)
+                _this.setState({
+                    percent: _this.discrete * (100 / _this.props.maxDiscrete),
+                }, function () {
+                    console.log("【Slider】DragEnd event.clientX--" + event.clientX + "-----percent----" + _this.state.percent + "-----discrete----" + _this.discrete + "-----currentX----" + (_this.state.percent / 100 * _this.props.wrapperWidth));
+                    if (_this.props.onDragEnd) {
+                        _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
+                    }
+                });
+            }
+            else {
+                console.log("【Slider】DragEnd event.clientX--" + event.clientX + "-----percent----" + _this.state.percent + "-----currentX----" + (_this.state.percent / 100 * _this.props.wrapperWidth));
+                if (_this.props.onDragEnd) {
+                    _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
+                }
+            }
+        };
+        _this.onDecClick = function () {
+            if (_this.props.isDiscrete && _this.props.maxDiscrete) {
+                if (_this.discrete >= 1) {
+                    var newPercent = (_this.discrete - 1) * (100 / _this.props.maxDiscrete);
+                    _this.discrete -= 1;
+                    _this.setState({
+                        //discrete: this.state.discrete - 1,
+                        percent: newPercent
+                    }, function () {
+                        if (_this.props.onDecClick) {
+                            _this.props.onDecClick(_this.discrete);
+                        }
+                    });
+                }
+            }
+            else {
+                if (_this.state.percent > 0) {
+                    _this.setState({
+                        percent: _this.state.percent - 1
+                    }, function () {
+                        if (_this.props.onIncClick) {
+                            _this.props.onIncClick(_this.state.percent);
+                        }
+                    });
+                }
+            }
+        };
+        _this.onIncClick = function () {
+            if (_this.props.isDiscrete && _this.props.maxDiscrete) {
+                if (_this.discrete < _this.props.maxDiscrete) {
+                    var newPercent = (_this.discrete + 1) * (100 / _this.props.maxDiscrete);
+                    _this.discrete += 1;
+                    _this.setState({
+                        // discrete: this.state.discrete + 1,
+                        percent: newPercent
+                    }, function () {
+                        if (_this.props.onIncClick) {
+                            _this.props.onIncClick(_this.discrete);
+                        }
+                    });
+                }
+            }
+            else {
+                if (_this.state.percent < 100) {
+                    _this.setState({
+                        percent: _this.state.percent + 1
+                    }, function () {
+                        if (_this.props.onIncClick) {
+                            _this.props.onIncClick(_this.state.percent);
+                        }
+                    });
+                }
+            }
+        };
+        _this.computeWrapperStyle = function () {
+            wrapperStyle = __assign({ width: _this.props.wrapperWidth + "px", height: _this.props.wrapperHeight + "px" }, row_center_center);
+        };
+        _this.computeOuterStyle = function () {
+            outerStyle = {
+                width: '100%',
+                height: _this.props.height + "px",
+                backgroundImage: "url(" + _this.props.outerBg + ")",
+                backgroundSize: '100% 100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'start',
+                alignItems: 'center'
+            };
+        };
+        _this.computeInnerStyle = function () {
+            var _width = Math.floor(_this.state.percent) + "%";
+            innerStyle = {
+                width: _width,
+                height: '100%',
+                backgroundImage: "url(" + _this.props.innerBg + ")",
+                backgroundSize: '100% 100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'start',
+                alignItems: 'center'
+            };
+        };
+        _this.computeDotWrapperStyle = function () {
+            dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + "px", height: _this.props.dotWrapperHeight + "px", 
+                //marginTop: (this.props.height - this.props.dotWrapperHeight) / 2 + "px",
+                marginLeft: (_this.props.wrapperWidth * _this.state.percent / 100 - _this.props.dotWrapperWidth / 2) + "px" }, row_center_center
+            // backgroundColor: '#FF000066'
+            );
+        };
+        _this.computeDotStyle = function () {
+            dotStyle = {
+                width: _this.props.dotWidth + "px",
+                height: _this.props.dotHeight + "px",
+            };
+        };
+        _this.computeIncButtonStyle = function () {
+            incButtonStyle = {
+                width: _this.props.incButtonWidth + "px",
+                height: _this.props.incButtonHeight + "px",
+                //marginLeft:this.props.incButtonLeft+"px",
+                //backgroundImage: `url(${this.props.incButtonBg})`,
+            };
+        };
+        _this.computeDecButtonStyle = function () {
+            decButtonStyle = {
+                width: _this.props.decButtonWidth + "px",
+                height: _this.props.decButtonHeight + "px",
+                //marginRight:this.props.decButtonRight+"px",
+                //backgroundImage: `url(${this.props.decButtonBg})`,
+            };
+        };
+        _this.computeWithButtonStyle = function () {
+            withButtonStyle = __assign({ minWidth: _this.props.overallWidth + "px" }, row_between_center);
+        };
+        _this.state = {
+            percent: (props.discrete != null && _this.props.maxDiscrete != null && _this.props.discrete != null) ? _this.props.discrete * (100 / _this.props.maxDiscrete) : Math.floor(_this.props.percent),
+            //discrete: Math.round(this.props.discrete==null?0:this.props.discrete)
+        };
+        _this.computeWrapperStyle();
+        _this.computeOuterStyle();
+        return _this;
+    }
+    Slider.prototype.componentDidMount = function () {
+        rect = this.refWrapper.current.getBoundingClientRect();
+    };
+    Slider.prototype.componentWillReceiveProps = function (nextProps) {
+        if (nextProps.percent == this.props.percent && nextProps.discrete == this.props.discrete)
+            return;
+        if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
+            this.discrete = nextProps.discrete;
+            this.setState({
+                //discrete:nextProps.discrete,
+                percent: this.discrete * (100 / this.props.maxDiscrete)
+            });
+        }
+        else {
+            this.setState({
+                percent: nextProps.percent,
+            });
+        }
+    };
+    Slider.prototype.render = function () {
+        this.computeInnerStyle();
+        this.computeDotWrapperStyle();
+        this.computeDotStyle();
+        this.computeIncButtonStyle();
+        this.computeDecButtonStyle();
+        this.computeWithButtonStyle();
+        return (h("div", { style: this.props.hasIncDecButton ? withButtonStyle : {} },
+            this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: decButtonStyle, onClick: this.onDecClick }),
+            h("div", { ref: this.refWrapper, style: wrapperStyle },
+                h("div", { style: outerStyle },
+                    h("div", { style: innerStyle },
+                        h("div", { style: dotWrapperStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
+                            h("img", { src: this.props.dotBg, style: dotStyle }))))),
+            this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: incButtonStyle, onClick: this.onIncClick })));
+    };
+    return Slider;
+}(Component));
+export { Slider };

package/ui/components//344/270/213/346/213/211/351/200/211/344/270/255/346/241/206Dropdown.md

@@ -30,6 +30,8 @@ Tabs这种N选1场景，N个选项都是直接展示在外的。Dropdown这种N
    3.展开态 时，依次展示DropdownSpreadMainUI的实例（对应当前选中Item）和 N - 1个DropdownOptionUI的实例（对应N - 1 个为选中Item）
 
    4.考虑到单个Item对应的数据类型不定，每个Item的样式也千变万化。所以上述3种实例对应的类均基于泛型实现，方便扩展。
+   
+   5.如果需要使用滚动条,在创建DropdownOptionUI(每项item)时,需要在最外层的div添加样式: ***flex-shrink : 0***
 
 <img src="../../images/思路拆解.png" />
 
@@ -43,7 +45,7 @@ Tabs这种N选1场景，N个选项都是直接展示在外的。Dropdown这种N
 
 - 传入一个DropdownConfig，里面包括了下拉列表的数据 和 展开态的整体Style
 
-  ​
+  
 
 
 

package/README.md

@@ -1,3 +0,0 @@
-# 组件库
-本组件库目前分为2大类：ui组件和工具组件。分别参见目录ui/和目录tools。
-具体组件说明，参见对应类别目录下的md文档

package/tools/tools.md

@@ -1,22 +0,0 @@
-# 工具类组件
-### 1. EventDispatcherJs.tsx
-React里可供使用的事件派发器，类似Pandora Lua里的EventDispatcher。
-
-用法主要就3个接口：
-
-* AddEventListener： 添加监听事件
-* DispatchEvent： 分发监听事件
-* RemoveEventListener： 移除监听事件
-
-### 2. Logger.tsx
-React里可供使用的对象（数组）打印器。
-
-直接console.log一个对象时，在游戏引擎中，无法打印出这个对象里的东西。而实际开发时，前后端联调时，需要方便的确认各种对象里的细节。
-
- 用法一共3个接口，打印粒度有差异。
-
-* ObjectPrinter: 打印一个对象的内部细节，效果如下
-	![](./img/logger.png)
-	
-* ObjectPrinter2：比上一个打印的信息更多
-* HierarchyPrinter： 采样打印，对数组进行采样，能打印最多的信息

package/ui/ui.md

@@ -1,2 +0,0 @@
-# UI组件
-组件源码，参见components目录；对应的示例Demo，参见sample目录