pixuireactcomponents 1.3.13 → 1.3.15

package/index.d.ts

@@ -1,5 +1,7 @@
 export { Progress } from "./ui/components/progress/Progress";
 export { Logger } from "./tools/Logger";
 export { Carousel } from "./ui/components/carousel/Carousel";
+export { Button } from "./ui/components/button/Button";
+export { ToggleGroup } from "./ui/components/togglegroup/ToggleGroup";
 export { ImageViewer } from "./ui/components/imageViewer/imageViewer";
 export { Slider, SliderProps } from "./ui/components/slider/Slider";

package/index.js

@@ -1,5 +1,5 @@
-export { Tabs } from "./ui/components/tab/Tabs";
-export { Tab } from "./ui/components/tab/Tab";
+// 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" 
@@ -12,7 +12,7 @@ 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 {ToggleGroup} from "./ui/components/togglegroup/ToggleGroup"
+export { Button } from "./ui/components/button/Button";
+export { ToggleGroup } from "./ui/components/togglegroup/ToggleGroup";
 export { ImageViewer } from './ui/components/imageViewer/imageViewer';
 console.log("Hello, 欢迎使用PixUI React Components");

package/package.json

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

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

@@ -0,0 +1,21 @@
+import { h, Component } from 'preact';
+interface ButtonInfo {
+    buttonPic: string;
+    buttonText: string;
+    width: number;
+    height: number;
+    fontSize: number;
+}
+interface ButtonProps {
+    picNormal: ButtonInfo;
+    picPress: ButtonInfo;
+    picHover: ButtonInfo;
+    [key: string]: any;
+}
+export declare class Button extends Component<ButtonProps, any> {
+    private btnImg;
+    private btnText;
+    private buttonStateChange;
+    render(props: any): h.JSX.Element;
+}
+export {};

package/ui/components/button/Button.js

@@ -0,0 +1,68 @@
+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() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.btnImg = null;
+        _this.btnText = null;
+        _this.buttonStateChange = function (picState) {
+            if (!_this.btnImg) {
+                return;
+            }
+            _this.btnImg.src = picState.buttonPic;
+            _this.btnImg.style.width = "".concat(picState.width, "px");
+            _this.btnImg.style.height = "".concat(picState.height, "px");
+            if (!_this.btnText) {
+                return;
+            }
+            _this.btnText.textContent = picState.buttonText;
+            _this.btnText.style.fontSize = "".concat(picState.fontSize, "px");
+        };
+        return _this;
+    }
+    Button.prototype.render = function (props) {
+        var _this = this;
+        return (h("div", { style: { alignItems: 'center', justifyContent: 'center' }, 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.buttonStateChange(_this.props.picPress);
+            }, onMouseUp: function () {
+                _this.buttonStateChange(_this.props.picHover);
+            }, onMouseOver: function () {
+                _this.buttonStateChange(_this.props.picHover);
+            }, onMouseOut: function () {
+                _this.buttonStateChange(_this.props.picNormal);
+            } },
+            h("img", { ref: function (img) {
+                    _this.btnImg = img;
+                }, style: { width: "".concat(props.picNormal.width, "px"), height: "".concat(props.picNormal.height, "px") }, src: this.props.picNormal.buttonPic }),
+            h("div", { ref: function (text) {
+                    _this.btnText = text;
+                }, style: { position: 'absolute', fontSize: "".concat(props.picNormal.fontSize, "px") } }, this.props.picNormal.buttonText)));
+    };
+    return Button;
+}(Component));
+export { Button };

package/ui/components/togglegroup/ToggleGroup.d.ts

@@ -0,0 +1,31 @@
+import preact, { Component } from 'preact';
+interface TogglePicInfo {
+    selectedPic: string;
+    notSelectedPic: string;
+}
+interface ToggleInfo {
+    toggleText: string;
+    selectedFun: Function;
+    notSelectedFun: Function;
+    [key: string]: any;
+}
+interface ToggleGroupProps {
+    togglePic: TogglePicInfo;
+    toggleArray: ToggleInfo[];
+    isMultiOption: boolean;
+}
+export declare class ToggleGroup extends Component<ToggleGroupProps, {
+    refreshStatus: boolean;
+}> {
+    private isMultiOption;
+    private toggleArray;
+    private togglePic;
+    private currentIndex;
+    private items;
+    private refreshAll;
+    private GenerateToggleItem;
+    private checkSelected;
+    constructor(props: any);
+    render(): preact.JSX.Element;
+}
+export {};

package/ui/components/togglegroup/ToggleGroup.js

@@ -0,0 +1,113 @@
+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 ToggleGroup = /** @class */ (function (_super) {
+    __extends(ToggleGroup, _super);
+    function ToggleGroup(props) {
+        var _this = _super.call(this, props) || this;
+        _this.isMultiOption = _this.props.isMultiOption != undefined ? _this.props.isMultiOption : true;
+        _this.toggleArray = _this.props.toggleArray;
+        _this.togglePic = _this.props.togglePic;
+        _this.currentIndex = -1;
+        _this.items = [];
+        _this.refreshAll = true;
+        _this.GenerateToggleItem = function (toggleItem, togglePic, index, refreshAll) {
+            return (h(Toggle, { toggleItem: toggleItem, togglePic: togglePic, index: index, checkSelected: _this.checkSelected, refreshAll: refreshAll }));
+        };
+        _this.checkSelected = function (index) {
+            if (_this.isMultiOption)
+                return;
+            else {
+                if (index == _this.currentIndex) {
+                    _this.toggleArray[index].isSelected = false;
+                    _this.currentIndex = -1;
+                }
+                else {
+                    if (_this.currentIndex == -1) {
+                        _this.currentIndex = index;
+                        _this.toggleArray[index].isSelected = true;
+                        return;
+                    }
+                    _this.refreshAll = !_this.refreshAll;
+                    _this.toggleArray[_this.currentIndex].isSelected = false;
+                    _this.toggleArray[_this.currentIndex].notSelectedFun();
+                    _this.toggleArray[index].isSelected = true;
+                    _this.currentIndex = index;
+                    _this.items = [];
+                    _this.setState({
+                        refreshStatus: !_this.state.refreshStatus,
+                    });
+                }
+            }
+        };
+        for (var i = 0; i < _this.toggleArray.length; i++) {
+            _this.toggleArray[i].isSelected = false;
+        }
+        _this.state = {
+            refreshStatus: true,
+        };
+        return _this;
+    }
+    ToggleGroup.prototype.render = function () {
+        for (var i = 0; i < this.toggleArray.length; i++) {
+            this.items.push(this.GenerateToggleItem(this.toggleArray[i], this.togglePic, i, this.refreshAll));
+        }
+        return h("div", { style: { flexDirection: 'row' } }, this.items);
+    };
+    return ToggleGroup;
+}(Component));
+export { ToggleGroup };
+var Toggle = /** @class */ (function (_super) {
+    __extends(Toggle, _super);
+    function Toggle(props) {
+        var _this = _super.call(this, props) || this;
+        _this.selectedPic = _this.props.togglePic.selectedPic;
+        _this.notSelectedPic = _this.props.togglePic.notSelectedPic;
+        _this.toggleText = _this.props.toggleItem.toggleText;
+        _this.selectedFun = _this.props.toggleItem.selectedFun;
+        _this.notSelectedFun = _this.props.toggleItem.notSelectedFun;
+        _this.index = _this.props.index;
+        _this.checkSelected = _this.props.checkSelected;
+        _this.refreshAll = _this.props.refreshAll;
+        _this.state = {
+            isSelected: _this.props.toggleItem.isSelected,
+        };
+        return _this;
+    }
+    Toggle.prototype.render = function (props) {
+        var _this = this;
+        if (props.refreshAll != this.refreshAll && this.props.toggleItem.isSelected != this.state.isSelected) {
+            this.setState({ isSelected: !this.state.isSelected });
+            return;
+        }
+        this.refreshAll = props.refreshAll;
+        return (h("div", { style: { alignItems: 'flex-end', flexDirection: 'row' } },
+            h("div", { style: {
+                    width: '36px',
+                    height: '36px',
+                    backgroundSize: 'contain',
+                    backgroundImage: "url(".concat(this.state.isSelected ? this.selectedPic : this.notSelectedPic, ")"),
+                }, onClick: function () {
+                    _this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun();
+                    _this.setState({ isSelected: !_this.state.isSelected });
+                    _this.checkSelected(_this.index);
+                } }),
+            h("div", null,
+                h("text", null, "".concat(this.toggleText))),
+            h("div", { style: { width: '50px' } })));
+    };
+    return Toggle;
+}(Component));