pixuireactcomponents 1.1.2 → 1.1.3

package/README.md

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

package/package.json

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

package/tools/Logger.js

@@ -48,7 +48,7 @@ var regexForLine = new RegExp(",$");
  */
 Logger.ObjectPrinter2 = function (object, name) {
     var lines = [];
-    lines.push(name + " = ");
+    lines.push("".concat(name, " = "));
     getTreeStyleLines(object, 1, lines);
     console.warn(lines.join("\n"));
 };
@@ -92,7 +92,7 @@ function getSeparation2(level) {
  */
 Logger.HierarchyPrinter = function (object, name) {
     var lines = [];
-    lines.push(name + " = ");
+    lines.push("".concat(name, " = "));
     getTreeStyleHierarchyLines(object, 1, lines);
     console.warn(lines.join("\n"));
 };

package/tools/tools.md

@@ -0,0 +1,22 @@
+# 工具类组件
+### 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/components/dropdown/Dropdown.js

@@ -14,16 +14,6 @@ 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) {
@@ -85,7 +75,7 @@ var Dropdown = /** @class */ (function (_super) {
         return (h("div", null,
             h("div", { style: this.props.config.spreadStyle },
                 this.props.spreadMainUI,
-                h("div", { style: optionsDivStyle }, _optionsUI))));
+                _optionsUI)));
     };
     return Dropdown;
 }(Component));

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

@@ -1,7 +1,6 @@
 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,7 +16,6 @@ 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/progress/Progress.js

@@ -86,7 +86,7 @@ var Progress = /** @class */ (function (_super) {
             outerStyle = {
                 width: '100%',
                 height: _this.props.height + "px",
-                backgroundImage: "url(" + _this.props.outerBg + ")",
+                backgroundImage: "url(".concat(_this.props.outerBg, ")"),
                 backgroundSize: '100% 100%'
             };
         };
@@ -95,7 +95,7 @@ var Progress = /** @class */ (function (_super) {
             innerStyle = {
                 width: _width,
                 height: '100%',
-                backgroundImage: "url(" + _this.props.innerBg + ")",
+                backgroundImage: "url(".concat(_this.props.innerBg, ")"),
                 backgroundSize: '100% 100%'
             };
         };

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

@@ -27,6 +27,9 @@ export interface SliderProps {
     overallWidth?: number;
     onIncClick?: Function | null;
     onDecClick?: Function | null;
+    rangeControl?: Boolean;
+    startRange?: number;
+    endRange?: number;
 }
 export declare class Slider extends Component<SliderProps, {
     percent: number;

package/ui/components/slider/Slider.js

@@ -80,6 +80,12 @@ var Slider = /** @class */ (function (_super) {
                 // this.setState({
                 //     discrete: Math.round(newPercent),
                 // })
+                if (_this.props.rangeControl) {
+                    if (_this.props.endRange != null)
+                        _this.discrete = Math.min(_this.discrete, _this.props.endRange);
+                    if (_this.props.startRange != null)
+                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+                }
                 newPercent = _this.discrete * (100 / _this.props.maxDiscrete);
             }
             _this.setState({
@@ -112,10 +118,14 @@ var Slider = /** @class */ (function (_super) {
             }
         };
         _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;
+                    if (_this.props.rangeControl && _this.props.startRange != null) {
+                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+                    }
+                    var newPercent = _this.discrete * (100 / _this.props.maxDiscrete);
                     _this.setState({
                         //discrete: this.state.discrete - 1,
                         percent: newPercent
@@ -126,6 +136,7 @@ var Slider = /** @class */ (function (_super) {
                     });
                 }
             }
+            //连续的情况
             else {
                 if (_this.state.percent > 0) {
                     _this.setState({
@@ -139,10 +150,14 @@ var Slider = /** @class */ (function (_super) {
             }
         };
         _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;
+                    if (_this.props.rangeControl && _this.props.startRange != null) {
+                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+                    }
+                    var newPercent = _this.discrete * (100 / _this.props.maxDiscrete);
                     _this.setState({
                         // discrete: this.state.discrete + 1,
                         percent: newPercent
@@ -153,6 +168,7 @@ var Slider = /** @class */ (function (_super) {
                     });
                 }
             }
+            //连续的情况
             else {
                 if (_this.state.percent < 100) {
                     _this.setState({
@@ -172,7 +188,7 @@ var Slider = /** @class */ (function (_super) {
             outerStyle = {
                 width: '100%',
                 height: _this.props.height + "px",
-                backgroundImage: "url(" + _this.props.outerBg + ")",
+                backgroundImage: "url(".concat(_this.props.outerBg, ")"),
                 backgroundSize: '100% 100%',
                 display: 'flex',
                 flexDirection: 'row',
@@ -185,7 +201,7 @@ var Slider = /** @class */ (function (_super) {
             innerStyle = {
                 width: _width,
                 height: '100%',
-                backgroundImage: "url(" + _this.props.innerBg + ")",
+                backgroundImage: "url(".concat(_this.props.innerBg, ")"),
                 backgroundSize: '100% 100%',
                 display: 'flex',
                 flexDirection: 'row',

package/ui/ui.md

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

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

@@ -1,53 +0,0 @@
-
-下拉选中框Dropdown
-===
-
-
-前言
----
-
-<img src="../../images/前言.png" />
-下拉选中框Dropdown，其实也是一种N选1的UI组件。不过跟Tabs（另一篇介绍了）这种N选1相比，有所差别：
-Tabs这种N选1场景，N个选项都是直接展示在外的。Dropdown这种N选1，有两种状态：展开态和收缩态。展开态展示所有选项，收缩态只展示选中的1。也是很常用的功能。
-开发过程遇到这种需求时，抽象沉淀了一个Dropdown组件。方便后续快速实现一个健壮的下拉列表需求。
-组件和示例的git地址：[https://git.woa.com/pixui_plugin/PixUIReactComponents.git。](https://git.woa.com/pixui_plugin/PixUIReactComponents.git)
-具体代码位置：
-<img src="../../images/代码位置.png" />
-
-
-设计思路及用法
----
-
-<img src="../../images/设计思路及用法.png" />
-<img src="../../images/设计思路及用法2.png" />
-看一下源码，基本的拆解思路是：
-
-1. 首先是有2个状态，收缩态 和 展开态
-
-
-2. 收缩态 需要传入一个DropdownUnspreadMainUI的实例（对应当前选中Item），直接展示
-
-   3.展开态 时，依次展示DropdownSpreadMainUI的实例（对应当前选中Item）和 N - 1个DropdownOptionUI的实例（对应N - 1 个为选中Item）
-
-   4.考虑到单个Item对应的数据类型不定，每个Item的样式也千变万化。所以上述3种实例对应的类均基于泛型实现，方便扩展。
-   
-   5.如果需要使用滚动条,在创建DropdownOptionUI(每项item)时,需要在最外层的div添加样式: ***flex-shrink : 0***
-
-<img src="../../images/思路拆解.png" />
-
-
-
-结合Demo看下用法：
-
-- 使用Dropdown组件时，定义好数据类型 和 3种状态的Item类型
-
-- 传入3种状态的Item对应的实例对象 
-
-- 传入一个DropdownConfig，里面包括了下拉列表的数据 和 展开态的整体Style
-
-  
-
-
-
-
-