clxx 2.0.3 → 2.0.6

package/build/utils/wait.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { tick } from "./tick";
+import { Tick } from "./tick";
 /**
  * 直接条件为真或者超时才返回结果
  *
@@ -29,19 +29,19 @@ export function waitUntil(condition, maxTime) {
             maxTime = Infinity;
         }
         return new Promise((resolve) => {
-            const stop = tick(() => {
+            const tick = new Tick(() => {
                 const now = Date.now();
                 const result = condition();
                 // 超时返回false
                 if (now - start >= maxTime) {
-                    stop();
+                    tick.destroy();
                     resolve(false);
                     return;
                 }
                 // 处理结果
                 const handle = (res) => {
                     if (res) {
-                        stop();
+                        tick.destroy();
                         resolve(true);
                     }
                 };
@@ -53,6 +53,7 @@ export function waitUntil(condition, maxTime) {
                 // 普通一般的结果
                 handle(result);
             });
+            tick.start();
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.0.3",
+  "version": "2.0.6",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -32,21 +32,21 @@
     "registry": "https://registry.npmjs.org",
     "access": "public"
   },
-  "devDependencies": {
-    "@types/lodash": "^4.14.175",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "@types/swiper": "^5.4.3",
-    "csstype": "^3.0.9",
-    "typescript": "^4.4.3"
-  },
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "dayjs": "^1.10.7",
-    "history": "^5.0.1",
+    "@emotion/react": "^11.10.0",
+    "dayjs": "^1.11.5",
+    "history": "^5.3.0",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "swiper": "^6.8.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swiper": "^8.3.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.182",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/swiper": "^6.0.0",
+    "csstype": "^3.1.0",
+    "typescript": "^4.7.4"
   }
 }

package/build/Picker/Wrapper.d.ts

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import React from "react";
-export declare type OptionType = {
-    value: string | number;
-    label?: React.ReactNode;
-    [key: string]: any;
-};
-export interface PickerWrapperProps {
-    options: OptionType[];
-    defaultValue?: number;
-    renderOption?: (option: OptionType, index: number) => React.ReactNode;
-    onConfirm?: (option: OptionType, index: number) => void;
-    onCancel?: () => void;
-    renderCancel?: () => React.ReactNode;
-    renderConfirm?: () => React.ReactNode;
-    showTitle?: boolean;
-    renderTitle?: (option: OptionType, index: number) => React.ReactNode;
-}
-export declare function Wrapper(props: PickerWrapperProps): jsx.JSX.Element;

package/build/Picker/Wrapper.js

@@ -1,92 +0,0 @@
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { RowBetween } from "../Flex/Row";
-import { Col } from "../Flex/Col";
-import { style } from "./style";
-import { swiperStyle } from "./swiperStyle";
-import { Clickable } from "../Clickable";
-import Swiper from "swiper";
-import { useCallback, useEffect, useRef, useState } from "react";
-export function Wrapper(props) {
-    const { onConfirm, onCancel, renderCancel, renderConfirm, options, renderOption, showTitle = true, renderTitle, defaultValue, } = props;
-    // 获取初始索引
-    const getInitialSlide = useCallback(() => {
-        let initialSlide = 0;
-        if (Array.isArray(options)) {
-            let findIndex = options.findIndex((option) => option.value === defaultValue);
-            if (findIndex >= 0) {
-                initialSlide = findIndex;
-            }
-        }
-        return initialSlide;
-    }, [options, defaultValue]);
-    const swiperRef = useRef(null);
-    const [index, setIndex] = useState(getInitialSlide());
-    useEffect(() => {
-        const swiper = new Swiper(swiperRef.current, {
-            initialSlide: getInitialSlide(),
-            direction: "vertical",
-            slidesPerView: 5,
-            centeredSlides: true,
-            freeMode: true,
-            freeModeSticky: true,
-        });
-        swiper.on("init", () => {
-            setIndex(swiper.realIndex);
-        });
-        swiper.on("slideChange", () => {
-            setIndex(swiper.realIndex);
-        });
-        return () => {
-            swiper.destroy();
-        };
-    }, [getInitialSlide]);
-    // 显示标题逻辑
-    const showTitleContent = () => {
-        if (showTitle) {
-            const option = options[index];
-            if (typeof renderTitle === "function") {
-                return jsx("div", { css: style.title }, renderTitle(option, index));
-            }
-            else {
-                return (jsx(Col, { css: style.title },
-                    jsx("span", { css: style.titleLabel }, "\u5F53\u524D\u9009\u62E9"),
-                    jsx("span", { css: style.titleContent }, option.label)));
-            }
-        }
-    };
-    // 按钮逻辑
-    const showCancel = () => {
-        var _a;
-        return (_a = renderCancel === null || renderCancel === void 0 ? void 0 : renderCancel()) !== null && _a !== void 0 ? _a : jsx("div", { css: [style.btn, style.btnCancel] }, "\u53D6\u6D88");
-    };
-    const showConfirm = () => {
-        var _a;
-        return (_a = renderConfirm === null || renderConfirm === void 0 ? void 0 : renderConfirm()) !== null && _a !== void 0 ? _a : jsx("div", { css: [style.btn, style.btnConfirm] }, "\u786E\u5B9A");
-    };
-    /**
-     * 显示选项列表
-     * @returns
-     */
-    const showOptions = () => {
-        if (Array.isArray(options)) {
-            return options.map((option, index) => {
-                let content = option.label;
-                if (typeof renderOption === "function") {
-                    content = renderOption(option, index);
-                }
-                return (jsx("div", { className: "swiper-slide", key: option.value }, content));
-            });
-        }
-    };
-    return (jsx("div", { css: [style.container] },
-        jsx(RowBetween, { css: style.header },
-            showTitleContent(),
-            jsx(Clickable, { css: style.btnBox, onClick: onCancel }, showCancel()),
-            jsx(Clickable, { css: style.btnBox, onClick: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(options[index], index) }, showConfirm())),
-        jsx("div", { css: [swiperStyle, style.body] },
-            jsx("div", { className: "swiper", css: style.swiper, ref: swiperRef },
-                jsx("div", { className: "swiper-wrapper" }, showOptions()),
-                jsx("div", { css: [style.mask, style.maskTop] }),
-                jsx("div", { css: [style.mask, style.maskBottom] })))));
-}

package/build/Picker/index.d.ts

@@ -1,21 +0,0 @@
-import { PickerWrapperProps } from "./Wrapper";
-import React from "react";
-export interface ShowPickerOption extends PickerWrapperProps {
-    blankClosable?: boolean;
-    showMask?: boolean;
-    maskColor?: string;
-}
-export interface PickerOption extends ShowPickerOption, Omit<React.HTMLProps<HTMLDivElement>, "defaultValue"> {
-    children?: React.ReactNode;
-}
-/**
- * 显示picker
- * @param option
- */
-export declare function showPicker(option: ShowPickerOption): void;
-/**
- * picker组件
- * @param props
- * @returns
- */
-export declare function Picker(props: PickerOption): JSX.Element;

package/build/Picker/index.js

@@ -1,64 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { showDialog } from "../Dialog";
-import { Wrapper } from "./Wrapper";
-import React from "react";
-import pick from "lodash/pick";
-import omit from "lodash/omit";
-/**
- * 显示picker
- * @param option
- */
-export function showPicker(option) {
-    const { blankClosable, showMask, maskColor, onCancel, onConfirm } = option, extra = __rest(option, ["blankClosable", "showMask", "maskColor", "onCancel", "onConfirm"]);
-    const stop = showDialog({
-        content: (React.createElement(Wrapper, Object.assign({}, extra, { onCancel: () => {
-                stop();
-                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-            }, onConfirm: (option, index) => {
-                stop();
-                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(option, index);
-            } }))),
-        type: "pullUp",
-        blankClosable,
-        showMask,
-        maskColor,
-    });
-}
-/**
- * picker组件
- * @param props
- * @returns
- */
-export function Picker(props) {
-    const { children, onClick } = props, option = __rest(props, ["children", "onClick"]);
-    const pickerProps = [
-        "blankClosable",
-        "showMask",
-        "maskColor",
-        "options",
-        "defaultValue",
-        "renderOption",
-        "onConfirm",
-        "onCancel",
-        "renderCancel",
-        "renderConfirm",
-        "showTitle",
-        "renderTitle",
-    ];
-    const showPickerOption = pick(option, pickerProps);
-    const boxProps = omit(option, pickerProps);
-    return (React.createElement("div", Object.assign({ onClick: (event) => {
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            showPicker(showPickerOption);
-        } }, boxProps), children));
-}

package/build/Picker/style.d.ts

@@ -1,3 +0,0 @@
-import { Interpolation, Theme } from "@emotion/react";
-export declare const tinyLine: Interpolation<Theme>;
-export declare const style: Record<string, Interpolation<Theme>>;

package/build/Picker/style.js

@@ -1,122 +0,0 @@
-import { adaptive } from "../utils/cssUtil";
-export const tinyLine = {
-    "&:after,&::after": {
-        content: "''",
-        position: "absolute",
-        left: 0,
-        right: 0,
-        height: "1px",
-        backgroundColor: "#c0c0c0",
-        transform: `scale(1, ${1 / window.devicePixelRatio})`,
-    },
-};
-// 标题栏和每个选项通用的高度
-const itemHeight = 90;
-export const style = {
-    container: [
-        {
-            backgroundColor: "#fff",
-            overflow: "hidden",
-            position: "relative",
-        },
-        adaptive({
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-        }),
-    ],
-    header: [
-        {
-            position: "relative",
-            backgroundColor: "#fafafa",
-            "&:after,&::after": {
-                bottom: 0,
-            },
-        },
-        tinyLine,
-        adaptive({
-            height: itemHeight,
-        }),
-    ],
-    title: {
-        position: "absolute",
-        left: "50%",
-        top: "50%",
-        transform: "translate(-50%, -50%)",
-        zIndex: 1,
-    },
-    titleLabel: [
-        {
-            color: "#666",
-            lineHeight: 1,
-        },
-        adaptive({
-            fontSize: 20,
-            marginBottom: 5,
-        }),
-    ],
-    titleContent: [
-        {
-            color: "#333",
-            lineHeight: 1,
-        },
-        adaptive({
-            fontSize: 28,
-        }),
-    ],
-    btnBox: {
-        zIndex: 2,
-    },
-    btn: [
-        { textAlign: "center", lineHeight: 2 },
-        adaptive({
-            width: 120,
-            fontSize: 32,
-        }),
-    ],
-    btnCancel: {
-        color: "#666",
-    },
-    btnConfirm: {
-        color: "#007afe",
-    },
-    body: {
-        overflow: "hidden",
-        position: "relative",
-    },
-    swiper: [
-        adaptive({ height: itemHeight * 5, fontSize: 32 }),
-        {
-            ".swiper-slide": {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-            },
-        },
-    ],
-    mask: [
-        {
-            position: "absolute",
-            left: 0,
-            width: "100%",
-            zIndex: 2,
-        },
-        tinyLine,
-        adaptive({
-            height: itemHeight * 2,
-        }),
-    ],
-    maskTop: {
-        top: 0,
-        backgroundImage: "linear-gradient(180deg, #fefefe, transparent)",
-        "&:after,&::after": {
-            bottom: 0,
-        },
-    },
-    maskBottom: {
-        backgroundImage: "linear-gradient(0deg, #fefefe, transparent)",
-        bottom: 0,
-        "&:after,&::after": {
-            top: 0,
-        },
-    },
-};

package/build/Picker/swiperStyle.d.ts

@@ -1 +0,0 @@
-export declare const swiperStyle: import("@emotion/utils").SerializedStyles;

package/build/Picker/swiperStyle.js

@@ -1,66 +0,0 @@
-import { css } from "@emotion/react";
-export const swiperStyle = css `
-  .swiper-container {
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-    overflow: hidden;
-    list-style: none;
-    padding: 0;
-    z-index: 1;
-  }
-  .swiper-container-vertical > .swiper-wrapper {
-    flex-direction: column;
-  }
-  .swiper-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    display: flex;
-    transition-property: transform;
-    box-sizing: content-box;
-  }
-  .swiper-container-android .swiper-slide,
-  .swiper-wrapper {
-    transform: translate3d(0px, 0, 0);
-  }
-  .swiper-container-multirow > .swiper-wrapper {
-    flex-wrap: wrap;
-  }
-  .swiper-container-multirow-column > .swiper-wrapper {
-    flex-wrap: wrap;
-    flex-direction: column;
-  }
-  .swiper-container-free-mode > .swiper-wrapper {
-    transition-timing-function: ease-out;
-    margin: 0 auto;
-  }
-  .swiper-container-pointer-events {
-    touch-action: pan-y;
-    &.swiper-container-vertical {
-      touch-action: pan-x;
-    }
-  }
-  .swiper-slide {
-    flex-shrink: 0;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    transition-property: transform;
-  }
-  .swiper-slide-invisible-blank {
-    visibility: hidden;
-  }
-  .swiper-container-autoheight {
-    &,
-    .swiper-slide {
-      height: auto;
-    }
-
-    .swiper-wrapper {
-      align-items: flex-start;
-      transition-property: transform, height;
-    }
-  }
-`;