clxx 2.0.8 → 2.1.1

package/README.md

@@ -1,2 +1,35 @@
-# v2.0.0 
+# v2.0.8
 
+## 功能函数
+
+- [`ago`](./src/Ago/index.tsx)：显示多久以前
+- [`calendarTable`](./src/utils/calendarTable.ts)：创建一个月历视图的原始数据表
+- [`Countdown`](./src/utils/Countdown.ts)：倒计时器，最大可以到天
+- [`createApp`](./src/utils/createApp.tsx)：创建一个带路由的 APP 对象，这是个非常实用的功能函数
+- [`defaultScroll`](./src/utils/defaultScroll.ts)：禁用和启用默认滚动
+- [`createPortalDOM`](./src/utils/dom.tsx)：任意位置创建一个 DOM 节点，用来挂载和卸载 React 组件
+- [`is`](./src/utils/is.ts)：一些简单的环境判断
+- [`jsonp`](./src/utils/jsonp.ts)：发送一个 jsonp 请求
+- [`GET，POST`](./src/utils/request.ts)：ajax 请求的简单封装
+- [`Tick`](./src/utils/tick.ts)：嘀嗒器，每帧都会执行
+- [`uniqKey`](./src/utils/uniqKey.ts)：生成一个全局唯一的 key
+- [`waitUntil`](./src/utils/wait.ts)：执行某种检测，直接条件为真或者超时才返回
+
+## 基础组件
+
+- [`<Ago>`](./src/Ago/index.tsx)：显示多久以前
+- [`<AutoGrid>`](./src/AutoGrid/index.tsx)：里面的对象会自动网格排列
+- [`<CarouselNotice>`](./src/CarouselNotice/index.tsx)：滚动走马灯
+- [`<Clickable>`](./src/Clickable/index.tsx)：一个可点击的对象
+- [`<Container>`](./src/Container/index.tsx)：这是一个全局容器，主要设置移动端环境，自适应等逻辑
+- [`<Countdowner>`](./src/Countdowner/index.tsx)：倒计时器
+- [`<Row>|<RowStart>|<RowEnd>|<RowBetween>|<RowCenter>|<RowAround>|<RowEvenly>`](./src/Flex/Row.tsx)：水平弹性布局
+- [`<Col>|<ColStart>|<ColEnd>|<ColBetween>|<ColCenter>|<ColAround>|<ColEvenly>`](./src/Flex/Col.tsx)：垂直弹性布局
+- [`<Indicator>`](./src/Indicator/index.tsx)：转动的菊花，用来作为Loading组件的一部分
+- [`<Overlay>`](./src/Overlay/index.tsx)：一个全屏覆盖框，会覆盖可操作区域
+- [`<SafeArea>`](./src/SafeArea/index.tsx)：这个组件会自动剔除手机的非操作区域
+- [`<ScrollView>`](./src/ScrollView/index.tsx)：滚动容器，自带原生滚动条
+- [`showDialog`](./src/Dialog/index.tsx)：函数式调用，显示一个弹框组件
+- [`showAlert`](./src/Alert/index.tsx)：函数式调用，模拟`window.alert`，但UI可定制
+- [`showToast|showUniqToast`](./src/Toast/index.tsx)：函数式调用，显示一个Toast组件
+- [`showLoading|showLoadingAtLeast`](./src/Loading/index.tsx)：函数式调用，显示一个Loading组件

package/build/Effect/useTick.js

@@ -1,5 +1,5 @@
-import { Tick } from "../utils/tick";
-import { useEffect, useRef } from "react";
+import { tick } from '../utils/tick';
+import { useEffect, useRef } from 'react';
 /**
  * 逐帧执行的ticker
  * @param frame 帧函数
@@ -9,8 +9,7 @@ export function useTick(frame) {
     const framer = useRef(frame);
     framer.current = frame;
     useEffect(() => {
-        const tick = new Tick(() => framer.current());
-        tick.start();
-        return () => tick.destroy();
+        const stop = tick(() => framer.current());
+        return () => stop();
     }, []);
 }

package/build/index.d.ts

@@ -1,32 +1,32 @@
-export { Tick } from "./utils/tick";
-export { setContextValue, getContextValue } from "./context";
-export { jsonp } from "./utils/jsonp";
-export { uniqKey } from "./utils/uniqKey";
-export { ago } from "./utils/ago";
-export { GET, POST, sendJSON, sugarSend, sendRequest, buildUrlByOption, registerHostAlias } from "./utils/request";
-export { calendarTable } from "./utils/calendarTable";
-export { Countdown } from "./utils/Countdown";
-export { defaultScroll } from "./utils/defaultScroll";
-export { is } from "./utils/is";
-export { waitFor, waitUntil } from "./utils/wait";
-export { normalizeUnit, splitValue } from "./utils/cssUtil";
-export { createApp, history, getHistory } from "./utils/createApp";
-export { useInterval } from "./Effect/useInterval";
-export { useTick } from "./Effect/useTick";
-export { Ago } from "./Ago";
-export { Container } from "./Container";
-export { Flex, FlexItem } from "./Flex";
-export { Row, RowAround, RowBetween, RowCenter, RowEnd, RowEvenly, RowStart } from "./Flex/Row";
-export { Col, ColAround, ColBetween, ColCenter, ColEnd, ColEvenly, ColStart } from "./Flex/Col";
-export { Countdowner } from "./Countdowner";
-export { Overlay } from "./Overlay";
-export { showToast, showUniqToast } from "./Toast";
-export { showDialog } from "./Dialog";
-export { Clickable } from "./Clickable";
-export { Indicator } from "./Indicator";
-export { showLoading, showLoadingAtLeast } from "./Loading";
-export { SafeArea } from "./SafeArea";
-export { AutoGrid } from "./AutoGrid";
-export { showAlert } from "./Alert";
-export { ScrollView } from "./ScrollView";
-export { CarouselNotice } from "./CarouselNotice";
+export { tick } from './utils/tick';
+export { setContextValue, getContextValue } from './context';
+export { jsonp } from './utils/jsonp';
+export { uniqKey } from './utils/uniqKey';
+export { ago } from './utils/ago';
+export { GET, POST, sendJSON, sugarSend, sendRequest, buildUrlByOption, registerHostAlias, } from './utils/request';
+export { calendarTable } from './utils/calendarTable';
+export { Countdown } from './utils/Countdown';
+export { defaultScroll } from './utils/defaultScroll';
+export { is } from './utils/is';
+export { waitFor, waitUntil } from './utils/wait';
+export { normalizeUnit, splitValue, adaptive } from './utils/cssUtil';
+export { createApp, history, getHistory } from './utils/createApp';
+export { useInterval } from './Effect/useInterval';
+export { useTick } from './Effect/useTick';
+export { Ago } from './Ago';
+export { Container } from './Container';
+export { Flex, FlexItem } from './Flex';
+export { Row, RowAround, RowBetween, RowCenter, RowEnd, RowEvenly, RowStart, } from './Flex/Row';
+export { Col, ColAround, ColBetween, ColCenter, ColEnd, ColEvenly, ColStart, } from './Flex/Col';
+export { Countdowner } from './Countdowner';
+export { Overlay } from './Overlay';
+export { showToast, showUniqToast } from './Toast';
+export { showDialog } from './Dialog';
+export { Clickable } from './Clickable';
+export { Indicator } from './Indicator';
+export { showLoading, showLoadingAtLeast } from './Loading';
+export { SafeArea } from './SafeArea';
+export { AutoGrid } from './AutoGrid';
+export { showAlert } from './Alert';
+export { ScrollView } from './ScrollView';
+export { CarouselNotice } from './CarouselNotice';

package/build/index.js

@@ -1,32 +1,32 @@
-export { Tick } from "./utils/tick";
-export { setContextValue, getContextValue } from "./context";
-export { jsonp } from "./utils/jsonp";
-export { uniqKey } from "./utils/uniqKey";
-export { ago } from "./utils/ago";
-export { GET, POST, sendJSON, sugarSend, sendRequest, buildUrlByOption, registerHostAlias } from "./utils/request";
-export { calendarTable } from "./utils/calendarTable";
-export { Countdown } from "./utils/Countdown";
-export { defaultScroll } from "./utils/defaultScroll";
-export { is } from "./utils/is";
-export { waitFor, waitUntil } from "./utils/wait";
-export { normalizeUnit, splitValue } from "./utils/cssUtil";
-export { createApp, history, getHistory } from "./utils/createApp";
-export { useInterval } from "./Effect/useInterval";
-export { useTick } from "./Effect/useTick";
-export { Ago } from "./Ago";
-export { Container } from "./Container";
-export { Flex, FlexItem } from "./Flex";
-export { Row, RowAround, RowBetween, RowCenter, RowEnd, RowEvenly, RowStart } from "./Flex/Row";
-export { Col, ColAround, ColBetween, ColCenter, ColEnd, ColEvenly, ColStart } from "./Flex/Col";
-export { Countdowner } from "./Countdowner";
-export { Overlay } from "./Overlay";
-export { showToast, showUniqToast } from "./Toast";
-export { showDialog } from "./Dialog";
-export { Clickable } from "./Clickable";
-export { Indicator } from "./Indicator";
-export { showLoading, showLoadingAtLeast } from "./Loading";
-export { SafeArea } from "./SafeArea";
-export { AutoGrid } from "./AutoGrid";
-export { showAlert } from "./Alert";
-export { ScrollView } from "./ScrollView";
-export { CarouselNotice } from "./CarouselNotice";
+export { tick } from './utils/tick';
+export { setContextValue, getContextValue } from './context';
+export { jsonp } from './utils/jsonp';
+export { uniqKey } from './utils/uniqKey';
+export { ago } from './utils/ago';
+export { GET, POST, sendJSON, sugarSend, sendRequest, buildUrlByOption, registerHostAlias, } from './utils/request';
+export { calendarTable } from './utils/calendarTable';
+export { Countdown } from './utils/Countdown';
+export { defaultScroll } from './utils/defaultScroll';
+export { is } from './utils/is';
+export { waitFor, waitUntil } from './utils/wait';
+export { normalizeUnit, splitValue, adaptive } from './utils/cssUtil';
+export { createApp, history, getHistory } from './utils/createApp';
+export { useInterval } from './Effect/useInterval';
+export { useTick } from './Effect/useTick';
+export { Ago } from './Ago';
+export { Container } from './Container';
+export { Flex, FlexItem } from './Flex';
+export { Row, RowAround, RowBetween, RowCenter, RowEnd, RowEvenly, RowStart, } from './Flex/Row';
+export { Col, ColAround, ColBetween, ColCenter, ColEnd, ColEvenly, ColStart, } from './Flex/Col';
+export { Countdowner } from './Countdowner';
+export { Overlay } from './Overlay';
+export { showToast, showUniqToast } from './Toast';
+export { showDialog } from './Dialog';
+export { Clickable } from './Clickable';
+export { Indicator } from './Indicator';
+export { showLoading, showLoadingAtLeast } from './Loading';
+export { SafeArea } from './SafeArea';
+export { AutoGrid } from './AutoGrid';
+export { showAlert } from './Alert';
+export { ScrollView } from './ScrollView';
+export { CarouselNotice } from './CarouselNotice';

package/build/utils/Countdown.d.ts

@@ -1,4 +1,4 @@
-export type CountdownValueIndex = "d" | "h" | "i" | "s";
+export type CountdownValueIndex = 'd' | 'h' | 'i' | 's';
 export type CountdownValue = {
     [key in CountdownValueIndex]?: number;
 };

package/build/utils/Countdown.js

@@ -1,4 +1,4 @@
-import { Tick } from "./tick";
+import { tick } from './tick';
 export class Countdown {
     constructor(option) {
         /**
@@ -13,13 +13,13 @@ export class Countdown {
          * i：分
          * s：秒
          */
-        this.format = ["d", "h", "i", "s"];
-        if (typeof option.remain === "number" && option.remain >= 0) {
+        this.format = ['d', 'h', 'i', 's'];
+        if (typeof option.remain === 'number' && option.remain >= 0) {
             this.total = this.remain = option.remain;
         }
         // 倒计时需要展示的时间格式
-        if (typeof option.format === "string") {
-            const parts = option.format.split("");
+        if (typeof option.format === 'string') {
+            const parts = option.format.split('');
             const output = [];
             this.format.forEach((item) => {
                 if (parts.includes(item)) {
@@ -30,7 +30,7 @@ export class Countdown {
         }
         else {
             // 设置默认的倒计时格式
-            this.format = ["h", "i", "s"];
+            this.format = ['h', 'i', 's'];
         }
         this._onUpdate = option.onUpdate;
         this._onEnd = option.onEnd;
@@ -54,7 +54,7 @@ export class Countdown {
         (_d = this._onUpdate) === null || _d === void 0 ? void 0 : _d.call(this, this.formatValue());
         // 记录倒计时开启时的时间
         const start = Date.now();
-        const tickInstance = new Tick(() => {
+        this._stopTick = tick(() => {
             var _a, _b, _c, _d;
             // 获取倒计时已经持续的时间
             const duration = Math.floor((Date.now() - start) / 1000);
@@ -73,8 +73,6 @@ export class Countdown {
                 (_d = this._onUpdate) === null || _d === void 0 ? void 0 : _d.call(this, this.formatValue());
             }
         });
-        tickInstance.start();
-        this._stopTick = () => tickInstance.destroy();
     }
     // 停止倒计时
     stop() {
@@ -91,19 +89,19 @@ export class Countdown {
         const result = {};
         this.format.forEach((key) => {
             switch (key) {
-                case "d":
+                case 'd':
                     result.d = Math.floor(remainTime / 86400);
                     remainTime = remainTime - result.d * 86400;
                     break;
-                case "h":
+                case 'h':
                     result.h = Math.floor(remainTime / 3600);
                     remainTime = remainTime - result.h * 3600;
                     break;
-                case "i":
+                case 'i':
                     result.i = Math.floor(remainTime / 60);
                     remainTime = remainTime - result.i * 60;
                     break;
-                case "s":
+                case 's':
                     result.s = remainTime;
                     break;
                 default:

package/build/utils/tick.d.ts

@@ -1,13 +1,7 @@
+export type StopTick = () => void;
 /**
- * tick类，初始化后使用start开始tick，使用destroy终止tick
- * @constructor
- * @param {function} callback start后每一帧都会调用的回调函数
+ * 逐帧执行的工具函数，返回一个方法，调用该方法，停止执行
+ * @param callback
+ * @param interval
  */
-export declare class Tick {
-    callback?: (() => void) | undefined;
-    frameId: number | undefined;
-    isRun: boolean;
-    constructor(callback?: (() => void) | undefined);
-    start(): void;
-    destroy(): void;
-}
+export declare function tick(callback: () => void, interval?: number): StopTick;

package/build/utils/tick.js

@@ -1,32 +1,47 @@
 /**
- * tick类，初始化后使用start开始tick，使用destroy终止tick
- * @constructor
- * @param {function} callback start后每一帧都会调用的回调函数
+ * 逐帧执行的工具函数，返回一个方法，调用该方法，停止执行
+ * @param callback
+ * @param interval
  */
-export class Tick {
-    constructor(callback) {
-        this.callback = callback;
-        this.frameId = undefined;
-        this.isRun = true;
-    }
-    start() {
-        // 每一帧执行的任务
-        const frame = () => {
-            var _a;
-            if (!this.isRun)
+export function tick(callback, interval) {
+    // 执行状态，是否正在执行
+    let isRunning;
+    let frame;
+    let frameId;
+    // 设置了tick的间隔
+    if (interval && typeof interval === 'number') {
+        let lastTick = Date.now();
+        frame = () => {
+            if (!isRunning) {
                 return;
-            // 在回调执行之前预约下一帧
-            this.frameId = requestAnimationFrame(frame);
-            // 执行回调
-            (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+            frameId = requestAnimationFrame(frame);
+            const now = Date.now();
+            // 每次间隔频率逻辑上保持一致，即使帧频不一致
+            if (now - lastTick >= interval) {
+                // 本次tick的时间为上次的时间加上频率间隔
+                lastTick = lastTick + interval;
+                callback();
+            }
         };
-        // 执行起始帧
-        frame();
     }
-    destroy() {
-        if (typeof this.frameId === "number") {
-            cancelAnimationFrame(this.frameId);
-        }
-        this.isRun = false;
+    // 没有设置tick的间隔
+    else {
+        frame = () => {
+            if (!isRunning) {
+                return;
+            }
+            frameId = requestAnimationFrame(frame);
+            // 没有设置interval时，每帧都执行
+            callback();
+        };
     }
+    // 开始执行
+    isRunning = true;
+    frameId = requestAnimationFrame(frame);
+    // 返回一个可以立即停止的函数
+    return () => {
+        isRunning = false;
+        cancelAnimationFrame(frameId);
+    };
 }

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';
 /**
  * 直接条件为真或者超时才返回结果
  *
@@ -21,27 +21,27 @@ export function waitUntil(condition, maxTime) {
         // 记录检测开始时间
         const start = Date.now();
         // 如果检测条件不为函数，直接返回结果
-        if (typeof condition !== "function") {
+        if (typeof condition !== 'function') {
             return !!condition;
         }
         // 设置默认检测时间的最大值，如果没有设置，则一直检测
-        if (!maxTime || typeof maxTime !== "number") {
+        if (!maxTime || typeof maxTime !== 'number') {
             maxTime = Infinity;
         }
         return new Promise((resolve) => {
-            const tick = new Tick(() => {
+            const stop = tick(() => {
                 const now = Date.now();
                 const result = condition();
                 // 超时返回false
                 if (now - start >= maxTime) {
-                    tick.destroy();
+                    stop();
                     resolve(false);
                     return;
                 }
                 // 处理结果
                 const handle = (res) => {
                     if (res) {
-                        tick.destroy();
+                        stop();
                         resolve(true);
                     }
                 };
@@ -53,7 +53,6 @@ export function waitUntil(condition, maxTime) {
                 // 普通一般的结果
                 handle(result);
             });
-            tick.start();
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.0.8",
+  "version": "2.1.1",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -9,7 +9,8 @@
   },
   "scripts": {
     "start": "tsc -w --pretty",
-    "build": "rm -rfv ./build && tsc"
+    "build": "rm -rfv ./build && tsc",
+    "pub": "npm run build && npm publish"
   },
   "repository": {
     "type": "git",