pixuireactcomponents 0.0.0

package/ui/components/slapface/Slapface.js

@@ -0,0 +1,485 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { h, Component } from '../../../../../lib/preact/src';
+import { platformAPI } from '../../../../common/frame/platform-api';
+//@ts-ignore
+import SlapfaceLess from './Slapface.less';
+import { Images } from '../../sample/Images';
+//默认配置项
+var switchItems = {
+    ani_switch: false,
+    is_mask: false,
+    control_show_today: false,
+};
+//默认无跳转按钮
+var jumpButton = {
+    pic_changtai: '',
+    pic_yaxia: '',
+    pic_xuanfu: '',
+    right_pos: 0,
+    bottom_pos: 0,
+};
+var slapfaceNode = /** @class */ (function () {
+    function slapfaceNode(par_index) {
+        if (par_index == undefined)
+            this.index = -1;
+        else
+            this.index = par_index;
+        this.next = null;
+    }
+    return slapfaceNode;
+}());
+var slapfaceNodeList = /** @class */ (function () {
+    function slapfaceNodeList(groupArr) {
+        this.head = new slapfaceNode();
+        var cur = this.head;
+        this.size = 0;
+        if (groupArr) {
+            for (var i = 0; i < groupArr.length; i++) {
+                cur.next = new slapfaceNode(i);
+                cur = cur.next;
+            }
+            this.groupArr = groupArr;
+            this.size += groupArr.length;
+        }
+        this.tail = cur;
+    }
+    slapfaceNodeList.prototype.Add = function (index, next) {
+        this.tail.next = new slapfaceNode(index);
+        this.tail = this.tail.next;
+        ++this.size;
+        return this.tail;
+    };
+    slapfaceNodeList.prototype.DeleteNext = function (curParam) {
+        if (curParam.next == null)
+            return;
+        else {
+            curParam.next = curParam.next.next;
+        }
+        --this.size;
+    };
+    slapfaceNodeList.prototype.CheckReady = function () {
+        var cur = this.head;
+        while (cur.next != null) {
+            if (this.groupArr[cur.next.index].isLoadDone) {
+                this.DeleteNext(cur);
+            }
+            else {
+                var retIndex = cur.next.index;
+                this.DeleteNext(cur);
+                return retIndex;
+            }
+        }
+        return -1;
+    };
+    return slapfaceNodeList;
+}());
+var Slapface = /** @class */ (function (_super) {
+    __extends(Slapface, _super);
+    function Slapface(props) {
+        var _this = _super.call(this, props) || this;
+        _this.closeAct = function () {
+            _this.actDisplay = 'none';
+            _this.forceUpdate();
+        };
+        _this.loadGroup = props.load_group;
+        for (var i = 0; i < _this.loadGroup.length; i++) {
+            _this.loadGroup[i].isLoadDone = false;
+        }
+        _this.switchItems = props.switch_items ? props.switch_items : switchItems;
+        _this.btn_closeButton = props.btn_closeButton ? props.btn_closeButton : '';
+        _this.pic_loading = props.pic_loading;
+        _this.actDisplay = 'flex';
+        _this.JumpFun = props.jump_fun;
+        _this.controlShowToday = _this.switchItems.control_show_today;
+        _this.nextDayTime = props.next_day_time ? props.next_day_time : '00:00';
+        _this.cstRightPos = _this.props.cst_right_pos ? _this.props.cst_right_pos : 10;
+        _this.cstBottomPos = _this.props.cst_bottom_pos ? _this.props.cst_bottom_pos : 10;
+        return _this;
+    }
+    Slapface.prototype.componentWillMount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var oldYear, oldMonth, oldDay, oldDate, year, month, day, hour, minute, oldHour, oldMinute, i;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, platformAPI.readCookie('oldDate.txt')];
+                    case 1:
+                        oldDate = _a.sent();
+                        if (oldDate == '') {
+                            oldYear = new Date().getFullYear();
+                            oldMonth = new Date().getMonth() + 1;
+                            oldDay = new Date().getDate();
+                            oldDate += oldYear.toString();
+                            if (oldMonth < 10)
+                                oldDate += '0' + oldMonth.toString();
+                            else
+                                oldDate += oldMonth.toString();
+                            if (oldDay < 10)
+                                oldDate += '0' + oldDay.toString();
+                            else
+                                oldDate += oldDay.toString();
+                            this.isNewDay = true;
+                        }
+                        else {
+                            oldYear = parseInt(oldDate.slice(0, 4), 10);
+                            oldMonth = parseInt(oldDate.slice(4, 6), 10);
+                            oldDay = parseInt(oldDate.slice(6, 8), 10);
+                            year = new Date().getFullYear();
+                            month = new Date().getMonth() + 1;
+                            day = new Date().getDate();
+                            oldDate = '';
+                            oldDate += year.toString();
+                            if (month < 10)
+                                oldDate += '0' + month.toString();
+                            else
+                                oldDate += month.toString();
+                            if (day < 10)
+                                oldDate += '0' + day.toString();
+                            else
+                                oldDate += day.toString();
+                            if (year != oldYear || month != oldMonth) {
+                                this.isNewDay = true;
+                            }
+                            else if (day != oldDay) {
+                                if (day - oldDay > 1)
+                                    this.isNewDay = true;
+                                else {
+                                    hour = new Date().getHours();
+                                    minute = new Date().getMinutes();
+                                    oldHour = parseInt(this.nextDayTime.slice(0, 2), 10);
+                                    oldMinute = parseInt(this.nextDayTime.slice(3, 5), 10);
+                                    if (hour > oldHour)
+                                        this.isNewDay = true;
+                                    else if (hour == oldHour) {
+                                        if (minute >= oldMinute)
+                                            this.isNewDay = true;
+                                        else
+                                            this.isNewDay = false;
+                                    }
+                                    else
+                                        this.isNewDay = false;
+                                }
+                            }
+                            else
+                                this.isNewDay = false;
+                        }
+                        if (!this.isNewDay) return [3 /*break*/, 3];
+                        return [4 /*yield*/, platformAPI.writeCookie('oldDate.txt', oldDate)];
+                    case 2:
+                        _a.sent();
+                        _a.label = 3;
+                    case 3:
+                        i = 0;
+                        _a.label = 4;
+                    case 4:
+                        if (!(i < this.loadGroup.length)) return [3 /*break*/, 9];
+                        if (!!this.isNewDay) return [3 /*break*/, 6];
+                        return [4 /*yield*/, platformAPI.readCookie("".concat(i + 1, "log"))];
+                    case 5:
+                        if ((_a.sent()) == 'do_not_show')
+                            this.loadGroup[i].isLoadDone = true;
+                        return [3 /*break*/, 8];
+                    case 6: return [4 /*yield*/, platformAPI.writeCookie("".concat(i + 1, "log"), 'show')];
+                    case 7:
+                        _a.sent();
+                        _a.label = 8;
+                    case 8:
+                        i++;
+                        return [3 /*break*/, 4];
+                    case 9:
+                        this.forceUpdate();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Slapface.prototype.render = function () {
+        var slapfaceinfo = {
+            loadGroup: this.loadGroup,
+            switchItems: this.switchItems,
+            btn_closeButton: this.btn_closeButton,
+            pic_loading: this.pic_loading,
+        };
+        return (h("div", { style: { display: this.actDisplay, width: '100%', height: '100%' } },
+            h("div", { style: { width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)' } }, h(Group, __assign({}, slapfaceinfo, { closeAct: this.closeAct, JumpFun: this.JumpFun, controlShowToday: this.controlShowToday, cstRightPos: this.cstRightPos, cstBottomPos: this.cstBottomPos })))));
+    };
+    return Slapface;
+}(Component));
+export { Slapface };
+var Group = /** @class */ (function (_super) {
+    __extends(Group, _super);
+    function Group(props) {
+        var _this = _super.call(this, props) || this;
+        _this.setShowToday = function () {
+            _this.isShowToday = !_this.isShowToday;
+        };
+        var emptyGroup = [
+            {
+                isLoadDone: false,
+                picture: '',
+                width: 0,
+                height: 0,
+                jumpButton: jumpButton,
+            },
+        ];
+        _this.groupArr = emptyGroup.concat(_this.props.loadGroup);
+        _this.groupIndexList = new slapfaceNodeList(_this.groupArr);
+        _this.JumpFun = props.JumpFun;
+        _this.loadDisplay = 'hidden';
+        _this.elseDisplay = 'visible';
+        _this.firstFrameDisplay = 'none';
+        _this.isShowToday = true;
+        _this.controlShowToday = props.controlShowToday;
+        _this.cstRightPos = props.cstRightPos;
+        _this.cstBottomPos = props.cstBottomPos;
+        _this.firstRefresh = true;
+        _this.state = {
+            curIndex: _this.groupIndexList.CheckReady(),
+        };
+        return _this;
+    }
+    Group.prototype.componentDidMount = function () {
+        var _this = this;
+        setTimeout(function () {
+            _this.forceUpdate();
+        }, 300);
+    };
+    Group.prototype.componentDidUpdate = function () {
+        var _this = this;
+        if (this.firstRefresh) {
+            this.firstRefresh = false;
+            this.loadDisplay = 'hidden';
+            if (this.firstFrameDisplay == 'none') {
+                this.firstFrameDisplay = 'flex';
+                this.closeClick();
+            }
+        }
+        else {
+            var curIndex_1 = this.state.curIndex;
+            setTimeout(function () {
+                if (!_this.groupArr[curIndex_1].isLoadDone) {
+                    _this.groupArr[curIndex_1].isLoadDone = true;
+                    _this.closeClick();
+                }
+            }, 1000);
+        }
+    };
+    Group.prototype.closeClick = function (e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        if (!this.isShowToday) {
+            platformAPI.writeCookie("".concat(this.state.curIndex, "log"), 'do_not_show');
+            this.isShowToday = true;
+        }
+        var nextIndex = this.groupIndexList.CheckReady();
+        this.loadDisplay = 'visible';
+        this.elseDisplay = 'hidden';
+        if (nextIndex != -1) {
+            if (this.props.switchItems.ani_switch) {
+                this.picBack.className = SlapfaceLess.groupbackTemp;
+            }
+            this.setState({ curIndex: nextIndex });
+        }
+        else {
+            this.props.closeAct();
+        }
+    };
+    Group.prototype.render = function () {
+        var _this = this;
+        if (this.state.curIndex == -1) {
+            this.setState({ curIndex: this.groupIndexList.CheckReady() });
+        }
+        return (h("div", { style: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' } },
+            h("div", { onClick: function () {
+                    if (_this.props.switchItems.is_mask == false)
+                        return;
+                    _this.closeClick();
+                }, style: { position: 'absolute', width: '100%', height: '100%' } }),
+            h("div", { ref: function (div) {
+                    _this.picBack = div;
+                }, onAnimationStart: function () {
+                    if (_this.picBack.className == SlapfaceLess.groupBack)
+                        _this.forceUpdate();
+                }, style: { position: 'relative' } },
+                h("img", { src: this.groupArr[this.state.curIndex].picture, style: {
+                        visibility: this.elseDisplay,
+                        width: this.groupArr[this.state.curIndex].width,
+                        height: this.groupArr[this.state.curIndex].height,
+                    }, onLoad: function () {
+                        var curIndex = _this.state.curIndex;
+                        if (!_this.groupArr[curIndex].isLoadDone) {
+                            _this.groupArr[curIndex].isLoadDone = true;
+                            _this.loadDisplay = 'hidden';
+                            _this.elseDisplay = 'visible';
+                            if (_this.props.switchItems.ani_switch)
+                                _this.picBack.className = SlapfaceLess.groupBack;
+                            else
+                                _this.forceUpdate();
+                        }
+                    } }),
+                h(CloseButton, { firstFrameDisplay: this.firstFrameDisplay, btn_closeButton: this.props.btn_closeButton, elseDisplay: this.elseDisplay, onClick: function (e) {
+                        _this.closeClick(e);
+                    } }),
+                h(JumpButton, { firstFrameDisplay: this.firstFrameDisplay, elseDisplay: this.elseDisplay, jumpButton: this.groupArr[this.state.curIndex].jumpButton, JumpFun: function () {
+                        _this.JumpFun(_this.state.curIndex);
+                    } }),
+                h(JumpTodayToggle, { setShowToday: this.setShowToday, firstFrameDisplay: this.firstFrameDisplay, elseDisplay: this.elseDisplay, controlShowToday: this.controlShowToday, cstRightPos: this.cstRightPos, cstBottomPos: this.cstBottomPos })),
+            h("div", { className: SlapfaceLess.loading_anim, style: {
+                    backgroundImage: "url(".concat(this.props.pic_loading, ")"),
+                    width: '300px',
+                    height: '300px',
+                    position: 'absolute',
+                    visibility: this.loadDisplay,
+                } }, ' ')));
+    };
+    return Group;
+}(Component));
+var CloseButton = /** @class */ (function (_super) {
+    __extends(CloseButton, _super);
+    function CloseButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CloseButton.prototype.render = function () {
+        return (h("button", { className: SlapfaceLess.closeButton, style: {
+                display: this.props.firstFrameDisplay,
+                visibility: this.props.elseDisplay,
+                backgroundImage: "url(".concat(this.props.btn_closeButton, ")"),
+            }, onClick: this.props.onClick }));
+    };
+    return CloseButton;
+}(Component));
+var JumpButton = /** @class */ (function (_super) {
+    __extends(JumpButton, _super);
+    function JumpButton(props) {
+        return _super.call(this, props) || this;
+    }
+    JumpButton.prototype.render = function () {
+        var _this = this;
+        if (!this.props.jumpButton)
+            return;
+        return (h("div", { onClick: function () {
+                _this.props.JumpFun();
+            }, style: {
+                display: this.props.firstFrameDisplay,
+                visibility: this.props.elseDisplay,
+                position: 'absolute',
+                bottom: "".concat(this.props.jumpButton.bottom_pos, "px"),
+                right: "".concat(this.props.jumpButton.right_pos, "px"),
+            }, onMouseDown: function () {
+                _this.jumpbtnImg.src = _this.props.jumpButton.pic_yaxia;
+                _this.forceUpdate();
+            }, onMouseUp: function () {
+                _this.jumpbtnImg.src = _this.props.jumpButton.pic_changtai;
+                _this.forceUpdate();
+            } },
+            h("img", { ref: function (img) {
+                    _this.jumpbtnImg = img;
+                }, src: this.props.jumpButton.pic_changtai })));
+    };
+    return JumpButton;
+}(Component));
+var JumpTodayToggle = /** @class */ (function (_super) {
+    __extends(JumpTodayToggle, _super);
+    function JumpTodayToggle(props) {
+        var _this = _super.call(this, props) || this;
+        _this.selected_pic = Images.checkbox1;
+        _this.not_selected_pic = Images.checkbox0;
+        _this.isSelected = false;
+        _this.toggleText = '今日不再弹出';
+        _this.index = props.index;
+        _this.isClick = false;
+        _this.cstRightPos = props.cstRightPos;
+        _this.cstBottomPos = props.cstBottomPos;
+        return _this;
+    }
+    JumpTodayToggle.prototype.componentWillUpdate = function () {
+        if (!this.isClick)
+            this.isSelected = false;
+        this.isClick = false;
+    };
+    JumpTodayToggle.prototype.render = function (props) {
+        var _this = this;
+        return (h("div", { style: {
+                display: props.controlShowToday ? props.firstFrameDisplay : 'none',
+                visibility: props.elseDisplay,
+                position: 'absolute',
+                right: "".concat(this.cstRightPos, "px"),
+                bottom: "".concat(this.cstBottomPos, "px"),
+                alignItems: 'center',
+                flexDirection: 'row',
+            } },
+            h("div", { style: {
+                    width: '36px',
+                    height: '36px',
+                    backgroundSize: 'contain',
+                    backgroundImage: "url(".concat(this.isSelected ? this.selected_pic : this.not_selected_pic, ")"),
+                }, onClick: function () {
+                    _this.props.setShowToday();
+                    _this.isClick = true;
+                    _this.isSelected = !_this.isSelected;
+                    _this.forceUpdate();
+                } }),
+            h("div", null,
+                h("text", null, "".concat(this.toggleText)))));
+    };
+    return JumpTodayToggle;
+}(Component));

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

@@ -0,0 +1,57 @@
+import { Component, h } from 'preact';
+export interface SliderProps {
+    percent: number;
+    wrapperWidth: number;
+    wrapperHeight: number;
+    height: number;
+    innerHeight?: 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;
+    rangeControl?: boolean;
+    startRange?: number;
+    endRange?: number;
+}
+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;
+}