@arcblock/react-hooks 2.10.7 → 2.10.9

package/build.config.ts

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-unresolved */
+import { defineBuildConfig, BuildEntry } from 'unbuild';
+
+const pattern = ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.png', '!**/*.stories.js', '!**/demo', '**/*.svg'];
+
+const shared: BuildEntry = {
+  builder: 'mkdist',
+  input: './src',
+  pattern,
+  ext: 'js',
+  esbuild: {
+    jsx: 'automatic',
+  },
+  declaration: true,
+};
+export default defineBuildConfig({
+  failOnWarn: false,
+  entries: [
+    {
+      ...shared,
+      outDir: './lib',
+      format: 'esm',
+    },
+  ],
+});

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { default as useInterval } from './useInterval';
+export { default as useStorage } from './useStorage';
+export { default as useBrowser } from './useBrowser';
+export { default as useLineClamp } from './useLineClamp';

package/lib/index.js

@@ -1,27 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useBrowser", {
-  enumerable: true,
-  get: function get() {
-    return _useBrowser.default;
-  }
-});
-Object.defineProperty(exports, "useInterval", {
-  enumerable: true,
-  get: function get() {
-    return _useInterval.default;
-  }
-});
-Object.defineProperty(exports, "useStorage", {
-  enumerable: true,
-  get: function get() {
-    return _useStorage.default;
-  }
-});
-var _useInterval = _interopRequireDefault(require("./useInterval"));
-var _useStorage = _interopRequireDefault(require("./useStorage"));
-var _useBrowser = _interopRequireDefault(require("./useBrowser"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as useInterval } from "./useInterval.js";
+export { default as useStorage } from "./useStorage.js";
+export { default as useBrowser } from "./useBrowser.js";
+export { default as useLineClamp } from "./useLineClamp.js";

package/lib/useBrowser.d.ts

@@ -0,0 +1,40 @@
+export default function useBrowser(): {
+    wallet: boolean;
+    walletVersion: string | undefined;
+    wechat: boolean;
+    mobile: {
+        apple: {
+            phone: boolean;
+            ipod: boolean;
+            tablet: boolean;
+            universal: boolean;
+            device: boolean;
+        };
+        amazon: {
+            phone: boolean;
+            tablet: boolean;
+            device: boolean;
+        };
+        android: {
+            phone: boolean;
+            tablet: boolean;
+            device: boolean;
+        };
+        windows: {
+            phone: boolean;
+            tablet: boolean;
+            device: boolean;
+        };
+        other: {
+            blackberry: boolean;
+            blackberry10: boolean;
+            opera: boolean;
+            firefox: boolean;
+            chrome: boolean;
+            device: boolean;
+        };
+        phone: boolean;
+        tablet: boolean;
+        any: boolean;
+    };
+};

package/lib/useBrowser.js

@@ -1,54 +1,43 @@
-"use strict";
+import { useState } from 'react';
+import isMobile from 'ismobilejs';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useBrowser;
-var _react = require("react");
-var _ismobilejs = _interopRequireDefault(require("ismobilejs"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const DID_WALLET_TAG = 'ABTWallet';
 const ARC_SPHERE_TAG = 'ArcSphere';
+
 function getDIDWalletVersion(userAgent) {
-  var _result$groups;
-  const reg = new RegExp("".concat(DID_WALLET_TAG, "/(?<version>[0-9.]+)"), 'g');
+  const reg = new RegExp(`${DID_WALLET_TAG}/(?<version>[0-9.]+)`, 'g');
   const result = reg.exec(userAgent);
-  const version = result === null || result === void 0 ? void 0 : (_result$groups = result.groups) === null || _result$groups === void 0 ? void 0 : _result$groups.version;
+  const version = result?.groups?.version;
   return version;
 }
-function useBrowser() {
-  var _window, _window$navigator;
-  const userAgent = (_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent;
-  const [browser] = (0, _react.useState)({
+
+export default function useBrowser() {
+  const userAgent = window?.navigator?.userAgent;
+  const [browser] = useState({
     wallet: userAgent.indexOf(DID_WALLET_TAG) > -1 || userAgent.indexOf(ARC_SPHERE_TAG) > -1,
     walletVersion: getDIDWalletVersion(userAgent),
     wechat: /MicroMessenger/i.test(userAgent),
-    mobile: _objectSpread({
+    mobile: {
       apple: {
         phone: false,
         ipod: false,
         tablet: false,
-        device: false
+        device: false,
       },
       amazon: {
         phone: false,
         tablet: false,
-        device: false
+        device: false,
       },
       android: {
         phone: false,
         tablet: false,
-        device: false
+        device: false,
       },
       windows: {
         phone: false,
         tablet: false,
-        device: false
+        device: false,
       },
       other: {
         blackberry: false,
@@ -56,12 +45,14 @@ function useBrowser() {
         opera: false,
         firefox: false,
         chrome: false,
-        device: false
+        device: false,
       },
       phone: false,
       tablet: false,
-      any: false
-    }, (0, _ismobilejs.default)(userAgent))
+      any: false,
+      ...isMobile(userAgent),
+    },
   });
+
   return browser;
-}
+}

package/lib/useInterval.d.ts

@@ -0,0 +1 @@
+export default function useInterval(callback: any, delay: any): void;

package/lib/useInterval.js

@@ -1,22 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useInterval;
-var _react = require("react");
 /* eslint-disable consistent-return */
+import { useEffect, useRef } from 'react';
 
-function useInterval(callback, delay) {
-  const savedCallback = (0, _react.useRef)();
+export default function useInterval(callback, delay) {
+  const savedCallback = useRef();
 
   // Remember the latest callback.
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
   // Set up the interval.
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     function tick() {
       savedCallback.current();
     }
@@ -25,4 +19,4 @@ function useInterval(callback, delay) {
       return () => clearInterval(id);
     }
   }, [delay]);
-}
+}

package/lib/useLineClamp.d.ts

@@ -0,0 +1,17 @@
+export default function useLineClamp({ text, ellipsis, lines, expanded, debounceTime, charWidth, offset, }: {
+    text: string;
+    ellipsis?: string;
+    lines?: number;
+    expanded?: boolean;
+    debounceTime?: number;
+    charWidth?: number;
+    offset?: number;
+}): {
+    textRef: import("react").MutableRefObject<HTMLElement | null | undefined>;
+    buttonRef: import("react").MutableRefObject<HTMLElement | null | undefined>;
+    needClamp: boolean;
+    noClamp: boolean;
+    clampedText: string;
+    key: string;
+    run: () => void;
+};

package/lib/useLineClamp.js

@@ -0,0 +1,127 @@
+import { useDebounceFn, useMemoizedFn, useMount, useReactive, useUpdateEffect } from "ahooks";
+import { useRef } from "react";
+const defaultEllipsis = "\u2026";
+let keyCount = 0;
+const getNewKey = () => `__clamp_text_key__${keyCount++}`;
+export default function useLineClamp({
+  text,
+  ellipsis = defaultEllipsis,
+  lines = 3,
+  expanded = false,
+  debounceTime = 300,
+  charWidth = 1.2,
+  offset = 1
+}) {
+  const currentState = useReactive({
+    needClamp: true,
+    noClamp: false,
+    clampedText: "\u2026",
+    key: getNewKey()
+  });
+  const textRef = useRef();
+  const buttonRef = useRef();
+  const lineHeightRef = useRef(0);
+  const clampLines = useMemoizedFn(({ lineHeight, originalText, expanded: expanded2, ellipsis: ellipsis2, lines: lines2 }) => {
+    if (!textRef.current) {
+      return;
+    }
+    const node = textRef.current;
+    const button = buttonRef.current;
+    if (!originalText || expanded2) {
+      currentState.noClamp = true;
+      currentState.clampedText = originalText;
+      currentState.key = getNewKey();
+      return;
+    }
+    const maxHeight = lineHeight * lines2 + 1;
+    let start = 0;
+    let middle = 0;
+    let end = originalText.length;
+    if (!node.clientHeight) {
+      return;
+    }
+    function moveMarkers() {
+      const clientHeight = node?.getBoundingClientRect().height ?? 1;
+      if (clientHeight <= maxHeight) {
+        start = middle + 1;
+      } else {
+        end = middle - 1;
+      }
+    }
+    while (start <= end) {
+      middle = Math.floor((start + end) / 2);
+      node.innerText = originalText.slice(0, middle) + ellipsis2;
+      if (button) {
+        node.appendChild(button.cloneNode(true));
+      }
+      if (middle === originalText.length) {
+        currentState.needClamp = false;
+        currentState.noClamp = true;
+        currentState.clampedText = originalText;
+        currentState.key = getNewKey();
+        return;
+      }
+      moveMarkers();
+    }
+    const clampedText = originalText.slice(0, Math.max(middle - offset, 0)).trim() + (typeof ellipsis2 === "string" ? ellipsis2 : "");
+    node.innerText = clampedText;
+    if (button)
+      node.appendChild(button.cloneNode(true));
+    currentState.needClamp = true;
+    currentState.noClamp = false;
+    currentState.clampedText = clampedText;
+    currentState.key = getNewKey();
+  });
+  const { run: debouncedClampLines } = useDebounceFn(clampLines, {
+    wait: debounceTime
+  });
+  const resizeListener = useMemoizedFn(() => {
+    debouncedClampLines({
+      lineHeight: lineHeightRef.current,
+      originalText: text,
+      expanded,
+      ellipsis,
+      lines,
+      charWidth
+    });
+  });
+  useMount(() => {
+    if (text && !lineHeightRef.current) {
+      const lineHeight = (textRef.current?.clientHeight ?? 1) + 1;
+      lineHeightRef.current = lineHeight;
+      setTimeout(() => {
+        clampLines({
+          lineHeight,
+          originalText: text,
+          expanded,
+          ellipsis,
+          lines,
+          charWidth
+        });
+      });
+    }
+    window.addEventListener("resize", resizeListener);
+    return () => {
+      window.removeEventListener("resize", resizeListener);
+    };
+  });
+  useUpdateEffect(() => {
+    clampLines({
+      lineHeight: lineHeightRef.current,
+      originalText: text,
+      expanded,
+      ellipsis,
+      lines,
+      charWidth
+    });
+  }, [expanded, text, charWidth, ellipsis, lines]);
+  return {
+    textRef,
+    buttonRef,
+    needClamp: currentState.needClamp,
+    noClamp: currentState.noClamp,
+    clampedText: currentState.clampedText,
+    key: currentState.key,
+    run: resizeListener
+  };
+}

package/lib/useStorage.d.ts

@@ -0,0 +1 @@
+export default function useStorage(storage: any, keyPrefix: any): (key: any, defaultValue: any) => any[];

package/lib/useStorage.js

@@ -1,46 +1,39 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useStorage;
-var _react = require("react");
-var _eventTargetShim = require("event-target-shim");
 /* eslint-disable react-hooks/rules-of-hooks */
+import { useState, useEffect } from 'react';
+import { EventTarget } from 'event-target-shim';
 
-const evtTarget = new _eventTargetShim.EventTarget();
-function useStorage(storage, keyPrefix) {
+const evtTarget = new EventTarget();
+export default function useStorage(storage, keyPrefix) {
   return (key, defaultValue) => {
-    const storeKey = "".concat(keyPrefix, ".").concat(key);
+    const storeKey = `${keyPrefix}.${key}`;
     const raw = storage.getItem(storeKey);
-    const [value, setValue] = (0, _react.useState)(raw ? JSON.parse(raw) : defaultValue);
-    const updater = updatedValue => {
+    const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue);
+
+    const updater = (updatedValue) => {
       setValue(updatedValue);
       storage.setItem(storeKey, JSON.stringify(updatedValue));
-      evtTarget.dispatchEvent(new CustomEvent('storage_change', {
-        detail: {
-          key
-        }
-      }));
+      evtTarget.dispatchEvent(new CustomEvent('storage_change', { detail: { key } }));
     };
+
     if (defaultValue != null && !raw) {
       updater(defaultValue);
     }
-    (0, _react.useEffect)(() => {
-      const listener = _ref => {
-        let {
-          detail
-        } = _ref;
+
+    useEffect(() => {
+      const listener = ({ detail }) => {
         if (detail.key === key) {
           const _raw = storage.getItem(storeKey);
+
           if (_raw !== raw) {
             setValue(JSON.parse(_raw));
           }
         }
       };
+
       evtTarget.addEventListener('storage_change', listener);
       return () => evtTarget.removeEventListener('storage_change', listener);
     });
+
     return [value, updater];
   };
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/react-hooks",
-  "version": "2.10.7",
+  "version": "2.10.9",
   "description": "React hooks used by arcblock products",
   "keywords": [
     "react",
@@ -18,8 +18,8 @@
   "scripts": {
     "lint": "eslint src tests --ext js --ext jsx",
     "lint:fix": "npm run lint -- --fix",
-    "build": "babel src --out-dir lib --copy-files",
-    "watch": "babel src --out-dir lib -w --copy-files",
+    "build": "unbuild",
+    "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'unbuild'",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
@@ -43,7 +43,8 @@
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^28.1.3"
+    "jest": "^28.1.3",
+    "unbuild": "^2.0.0"
   },
-  "gitHead": "865d3f490c7148b8ef706768add621409198a3c1"
+  "gitHead": "9eccd40a20ce65bf32982abbf82f38d7e177b525"
 }

package/src/index.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error
+export { default as useInterval } from './useInterval';
+// @ts-expect-error
+export { default as useStorage } from './useStorage';
+// @ts-expect-error
+export { default as useBrowser } from './useBrowser';
+
+export { default as useLineClamp } from './useLineClamp';

package/src/useLineClamp.ts

@@ -0,0 +1,156 @@
+// fork from https://github.com/drenther/use-clamp-text
+
+/* eslint-disable no-shadow */
+/* eslint-disable import/prefer-default-export */
+import { useDebounceFn, useMemoizedFn, useMount, useReactive, useUpdateEffect } from 'ahooks';
+import { useRef } from 'react';
+
+const defaultEllipsis = '…';
+
+let keyCount = 0;
+const getNewKey = () => `__clamp_text_key__${keyCount++}`;
+
+export default function useLineClamp({
+  text,
+  ellipsis = defaultEllipsis,
+  lines = 3,
+  expanded = false,
+  debounceTime = 300,
+  charWidth = 1.2,
+  offset = 1,
+}: {
+  text: string;
+  ellipsis?: string;
+  lines?: number;
+  expanded?: boolean;
+  debounceTime?: number;
+  charWidth?: number;
+  offset?: number;
+}) {
+  const currentState = useReactive({
+    needClamp: true,
+    noClamp: false,
+    clampedText: '…',
+    key: getNewKey(),
+  });
+
+  const textRef = useRef<HTMLElement | null>();
+  const buttonRef = useRef<HTMLElement | null>();
+  const lineHeightRef = useRef(0);
+
+  const clampLines = useMemoizedFn(({ lineHeight, originalText, expanded, ellipsis, lines }) => {
+    if (!textRef.current) {
+      return;
+    }
+    const node = textRef.current;
+    const button = buttonRef.current;
+    if (!originalText || expanded) {
+      currentState.noClamp = true;
+      currentState.clampedText = originalText;
+      currentState.key = getNewKey();
+      return;
+    }
+
+    const maxHeight = lineHeight * lines + 1;
+
+    let start = 0;
+    let middle = 0;
+    let end = originalText.length;
+
+    if (!node.clientHeight) {
+      return;
+    }
+
+    function moveMarkers() {
+      const clientHeight = node?.getBoundingClientRect().height ?? 1;
+      if (clientHeight <= maxHeight) {
+        start = middle + 1;
+      } else {
+        end = middle - 1;
+      }
+    }
+
+    while (start <= end) {
+      middle = Math.floor((start + end) / 2);
+      node.innerText = originalText.slice(0, middle) + ellipsis;
+      if (button) {
+        node.appendChild(button.cloneNode(true));
+      }
+
+      if (middle === originalText.length) {
+        currentState.needClamp = false;
+        currentState.noClamp = true;
+        currentState.clampedText = originalText;
+        currentState.key = getNewKey();
+        return;
+      }
+      moveMarkers();
+    }
+
+    const clampedText =
+      originalText.slice(0, Math.max(middle - offset, 0)).trim() + (typeof ellipsis === 'string' ? ellipsis : '');
+
+    node.innerText = clampedText;
+    if (button) node.appendChild(button.cloneNode(true));
+
+    currentState.needClamp = true;
+    currentState.noClamp = false;
+    currentState.clampedText = clampedText;
+    currentState.key = getNewKey();
+  });
+  const { run: debouncedClampLines } = useDebounceFn(clampLines, {
+    wait: debounceTime,
+  });
+
+  const resizeListener = useMemoizedFn(() => {
+    debouncedClampLines({
+      lineHeight: lineHeightRef.current,
+      originalText: text,
+      expanded,
+      ellipsis,
+      lines,
+      charWidth,
+    });
+  });
+
+  useMount(() => {
+    if (text && !lineHeightRef.current) {
+      const lineHeight = (textRef.current?.clientHeight ?? 1) + 1;
+      lineHeightRef.current = lineHeight;
+      setTimeout(() => {
+        clampLines({
+          lineHeight,
+          originalText: text,
+          expanded,
+          ellipsis,
+          lines,
+          charWidth,
+        });
+      });
+    }
+    window.addEventListener('resize', resizeListener);
+    return () => {
+      window.removeEventListener('resize', resizeListener);
+    };
+  });
+  useUpdateEffect(() => {
+    clampLines({
+      lineHeight: lineHeightRef.current,
+      originalText: text,
+      expanded,
+      ellipsis,
+      lines,
+      charWidth,
+    });
+  }, [expanded, text, charWidth, ellipsis, lines]);
+
+  return {
+    textRef,
+    buttonRef,
+    needClamp: currentState.needClamp,
+    noClamp: currentState.noClamp,
+    clampedText: currentState.clampedText,
+    key: currentState.key,
+    run: resizeListener,
+  };
+}

package/src/index.js

@@ -1,5 +0,0 @@
-import useInterval from './useInterval';
-import useStorage from './useStorage';
-import useBrowser from './useBrowser';
-
-export { useInterval, useStorage, useBrowser };