pixuireactcomponents 1.0.8 → 1.1.0

package/index.d.ts

@@ -1,6 +1,5 @@
 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,6 +1,5 @@
 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,11 +1,11 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.0.8",
+    "version": "1.1.0",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
-    "author": "nepdai",
+    "author": "hardenzheng",
     "license": "ISC"
 }

package/tools/Logger.js

@@ -48,7 +48,7 @@ var regexForLine = new RegExp(",$");
  */
 Logger.ObjectPrinter2 = function (object, name) {
     var lines = [];
-    lines.push("".concat(name, " = "));
+    lines.push(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("".concat(name, " = "));
+    lines.push(name + " = ");
     getTreeStyleHierarchyLines(object, 1, lines);
     console.warn(lines.join("\n"));
 };

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

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

@@ -0,0 +1,51 @@
+
+下拉选中框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种实例对应的类均基于泛型实现，方便扩展。
+
+<img src="../../images/思路拆解.png" />
+
+
+
+结合Demo看下用法：
+
+- 使用Dropdown组件时，定义好数据类型 和 3种状态的Item类型
+
+- 传入3种状态的Item对应的实例对象 
+
+- 传入一个DropdownConfig，里面包括了下拉列表的数据 和 展开态的整体Style
+
+  ​
+
+
+
+
+

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

@@ -1,53 +0,0 @@
-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

@@ -1,254 +0,0 @@
-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.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.setState({
-                    discrete: Math.round(newPercent),
-                });
-                newPercent = _this.state.discrete * (100 / _this.props.maxDiscrete);
-            }
-            _this.setState({
-                percent: newPercent
-            }, function () {
-                if (_this.props.onDrag)
-                    _this.props.onDrag(_this.props.isDiscrete ? _this.state.discrete : newPercent);
-            });
-            lastX = event.clientX;
-        };
-        _this.onDragEnd = function (event) {
-            lastX = undefined;
-            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.state.discrete : _this.state.percent);
-            }
-        };
-        _this.onDecClick = function () {
-            if (_this.props.isDiscrete && _this.props.maxDiscrete) {
-                if (_this.state.discrete >= 1) {
-                    var newPercent = (_this.state.discrete - 1) * (100 / _this.props.maxDiscrete);
-                    _this.setState({
-                        discrete: _this.state.discrete - 1,
-                        percent: newPercent
-                    }, function () {
-                        if (_this.props.onDecClick) {
-                            _this.props.onDecClick(_this.state.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.state.discrete < _this.props.maxDiscrete) {
-                    var newPercent = (_this.state.discrete + 1) * (100 / _this.props.maxDiscrete);
-                    _this.setState({
-                        discrete: _this.state.discrete + 1,
-                        percent: newPercent
-                    }, function () {
-                        if (_this.props.onIncClick) {
-                            _this.props.onIncClick(_this.state.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(".concat(_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(".concat(_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.setState({
-                discrete: nextProps.discrete,
-                percent: this.state.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 };