@d-matrix/utils 1.5.0 → 1.6.1

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useDisableContextMenu';
+export * from './useStateCallback';
+export * from './renderToString';
+export * from './useIsMounted';
+export * from './useCopyToClipboard';

package/dist/react/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useDisableContextMenu"), exports);
+__exportStar(require("./useStateCallback"), exports);
+__exportStar(require("./renderToString"), exports);
+__exportStar(require("./useIsMounted"), exports);
+__exportStar(require("./useCopyToClipboard"), exports);

package/dist/react/renderToString.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+export declare const render: <P>(element: ReactElement<P, string | import("react").JSXElementConstructor<any>>) => Promise<string>;
+export declare const cleanup: () => void;

package/dist/react/renderToString.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanup = exports.render = void 0;
+var react_dom_1 = __importDefault(require("react-dom"));
+var container;
+var render = function (element) {
+    return new Promise(function (resolve, reject) {
+        if (document === undefined) {
+            return reject('只支持浏览器环境');
+        }
+        container = document.createElement('div');
+        container.id = 'template-container';
+        container.style.cssText = 'position: absolute; left: -9999px;';
+        document.body.appendChild(container);
+        react_dom_1.default.render(element, container, function () {
+            if (container) {
+                resolve(container.innerHTML);
+            }
+            else {
+                reject('组件容器不存在');
+            }
+        });
+    });
+};
+exports.render = render;
+var cleanup = function () {
+    if (container === null)
+        return;
+    var isUnmounted = react_dom_1.default.unmountComponentAtNode(container);
+    if (isUnmounted) {
+        document.body.removeChild(container);
+        container = null;
+    }
+};
+exports.cleanup = cleanup;

package/dist/react/useCopyToClipboard.d.ts

@@ -0,0 +1,21 @@
+export interface UseCopyToClipboardProps {
+    /**
+     * 重置复制成功状态延迟
+     */
+    timeout?: number;
+    /**
+     * @param copiedText 复制的文本
+     * @returns
+     */
+    onCopy?: (copiedText: string) => void | undefined;
+    /**
+     *
+     * @param error 复制错误对象
+     * @returns
+     */
+    onError?: (error: Error) => void | undefined;
+}
+export declare function useCopyToClipboard(props?: UseCopyToClipboardProps): {
+    isCopied: Boolean;
+    copyToClipboard: (value: string) => void;
+};

package/dist/react/useCopyToClipboard.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCopyToClipboard = void 0;
+var react_1 = require("react");
+var useIsMounted_1 = require("./useIsMounted");
+function useCopyToClipboard(props) {
+    var _a = props !== null && props !== void 0 ? props : {}, _b = _a.timeout, timeout = _b === void 0 ? 2000 : _b, onCopy = _a.onCopy, onError = _a.onError;
+    var isMounted = useIsMounted_1.useIsMounted();
+    var _c = react_1.useState(false), isCopied = _c[0], setIsCopied = _c[1];
+    var copyToClipboard = react_1.useCallback(function (value) {
+        var _a;
+        if (!isMounted())
+            return;
+        if (typeof window === 'undefined' || !((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText)) {
+            var error = new Error("Cannot copy to clipboard, navigator.clipboard.writeText is not defined");
+            if (process.env.NODE_ENV === 'development')
+                console.error(error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        if (typeof value !== 'string') {
+            var error = new Error("Cannot copy typeof " + typeof value + " to clipboard, must be a string");
+            if (process.env.NODE_ENV === 'development')
+                console.error(error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        if (value === '') {
+            var error = new Error("Cannot copy empty string to clipboard.");
+            if (process.env.NODE_ENV === 'development')
+                console.error(error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        navigator.clipboard
+            .writeText(value)
+            .then(function () {
+            setIsCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
+            setTimeout(function () {
+                setIsCopied(false);
+            }, timeout);
+        })
+            .catch(function (error) { return onError === null || onError === void 0 ? void 0 : onError(error); });
+    }, [onCopy, onError, timeout]);
+    return { isCopied: isCopied, copyToClipboard: copyToClipboard };
+}
+exports.useCopyToClipboard = useCopyToClipboard;

package/dist/react/useDisableContextMenu.d.ts

@@ -0,0 +1,7 @@
+declare type ContextMenuTarget = () => Element | Document | undefined | null;
+/**
+ * 在HTML元素上禁用右键菜单
+ * @param target 默认为 () => document
+ */
+export declare const useDisableContextMenu: (target?: ContextMenuTarget) => void;
+export {};

package/dist/react/useDisableContextMenu.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisableContextMenu = void 0;
+var react_1 = require("react");
+var defaultContextMenuTarget = function () { return document; };
+/**
+ * 在HTML元素上禁用右键菜单
+ * @param target 默认为 () => document
+ */
+var useDisableContextMenu = function (target) {
+    if (target === void 0) { target = defaultContextMenuTarget; }
+    var targetFn = react_1.useRef(target);
+    targetFn.current = target;
+    react_1.useEffect(function () {
+        var el = targetFn.current();
+        if (!el)
+            return;
+        var onContextMenu = function (e) {
+            e.preventDefault();
+        };
+        el.addEventListener('contextmenu', onContextMenu);
+        return function () {
+            if (!el)
+                return;
+            el.removeEventListener('contextmenu', onContextMenu);
+        };
+    }, []);
+};
+exports.useDisableContextMenu = useDisableContextMenu;

package/dist/react/useIsMounted.d.ts

@@ -0,0 +1,2 @@
+/** 用于判断组件是否挂载 */
+export declare function useIsMounted(): () => boolean;

package/dist/react/useIsMounted.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMounted = void 0;
+var react_1 = require("react");
+/** 用于判断组件是否挂载 */
+function useIsMounted() {
+    var mountedRef = react_1.useRef(false);
+    var get = react_1.useCallback(function () { return mountedRef.current; }, []);
+    react_1.useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}
+exports.useIsMounted = useIsMounted;

package/dist/react/useStateCallback.d.ts

@@ -0,0 +1,2 @@
+/** 等价与类组件 setState(updater[, callback]) */
+export declare function useStateCallback<T>(initialState: T): [T, (state: T, cb?: (state: T) => void) => void];

package/dist/react/useStateCallback.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStateCallback = void 0;
+var react_1 = require("react");
+/** 等价与类组件 setState(updater[, callback]) */
+function useStateCallback(initialState) {
+    var _a = react_1.useState(initialState), state = _a[0], setState = _a[1];
+    var cbRef = react_1.useRef(undefined);
+    var setStateCallback = react_1.useCallback(function (state, cb) {
+        cbRef.current = cb;
+        setState(state);
+    }, []);
+    react_1.useEffect(function () {
+        if (cbRef.current) {
+            cbRef.current(state);
+            cbRef.current = undefined;
+        }
+    }, [state]);
+    return [state, setStateCallback];
+}
+exports.useStateCallback = useStateCallback;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-matrix/utils",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "A dozen of utils for Front-End Development",
   "main": "dist/index.js",
   "scripts": {
@@ -8,7 +8,8 @@
     "prebuild": "npm run clean",
     "clean": "rimraf dist",
     "cy:open": "cypress open",
-    "cy:run": "cypress run",
+    "cy:component": "cypress run --component --spec",
+    "cy:component:all": "cypress run --component",
     "test:tsd": "tsd",
     "postversion": "git push && git push --tags"
   },

package/readme.md

@@ -66,10 +66,28 @@ const TestComp = () => {
 
 返回值`setState()`函数类似类组件中的`setState(updater[, callback])`,可以在`callback`中获取更新后的`state`
 
-- `useMountedRef(): React.MutableRefObject<boolean>`
+- `useIsMounted(): () => boolean`
 
 获取当前组件是否已挂载的 Hook
 
+```ts
+const Test = () => {
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+      if (isMounted()) {
+       console.log('component mounted')
+      }
+  }, [isMounted]);
+
+  return null
+};
+```
+
+- `useCopyToClipboard(props?: UseCopyToClipboardProps)`
+
+复制文本到剪切板, 用法见[测试](./tests/react.cy.tsx)
+
 ### dom
 
 - `scrollToTop(element: Element | null | undefined): void`

package/dist/react.d.ts

@@ -1,14 +0,0 @@
-import { ReactElement } from 'react';
-export declare const render: <P>(element: ReactElement<P, string | import("react").JSXElementConstructor<any>>) => Promise<string>;
-export declare const cleanup: () => void;
-declare type ContextMenuTarget = () => Element | Document | undefined | null;
-/**
- * 在HTML元素上禁用右键菜单
- * @param target 默认为 () => document
- */
-export declare const useDisableContextMenu: (target?: ContextMenuTarget) => void;
-/** 等价与类组件 setState(updater[, callback]) */
-export declare function useStateCallback<T>(initialState: T): [T, (state: T, cb?: (state: T) => void) => void];
-/** 用于判断组件是否挂载 */
-export declare function useMountedRef(): React.MutableRefObject<boolean>;
-export {};

package/dist/react.js

@@ -1,93 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMountedRef = exports.useStateCallback = exports.useDisableContextMenu = exports.cleanup = exports.render = void 0;
-var react_1 = require("react");
-var react_dom_1 = __importDefault(require("react-dom"));
-var container;
-var render = function (element) {
-    return new Promise(function (resolve, reject) {
-        if (document === undefined) {
-            return reject('只支持浏览器环境');
-        }
-        container = document.createElement('div');
-        container.id = 'template-container';
-        container.style.cssText = 'position: absolute; left: -9999px;';
-        document.body.appendChild(container);
-        react_dom_1.default.render(element, container, function () {
-            if (container) {
-                resolve(container.innerHTML);
-            }
-            else {
-                reject('组件容器不存在');
-            }
-        });
-    });
-};
-exports.render = render;
-var cleanup = function () {
-    if (container === null)
-        return;
-    var isUnmounted = react_dom_1.default.unmountComponentAtNode(container);
-    if (isUnmounted) {
-        document.body.removeChild(container);
-        container = null;
-    }
-};
-exports.cleanup = cleanup;
-var defaultContextMenuTarget = function () { return document; };
-/**
- * 在HTML元素上禁用右键菜单
- * @param target 默认为 () => document
- */
-var useDisableContextMenu = function (target) {
-    if (target === void 0) { target = defaultContextMenuTarget; }
-    var targetFn = react_1.useRef(target);
-    targetFn.current = target;
-    react_1.useEffect(function () {
-        var el = targetFn.current();
-        if (!el)
-            return;
-        var onContextMenu = function (e) {
-            e.preventDefault();
-        };
-        el.addEventListener('contextmenu', onContextMenu);
-        return function () {
-            if (!el)
-                return;
-            el.removeEventListener('contextmenu', onContextMenu);
-        };
-    }, []);
-};
-exports.useDisableContextMenu = useDisableContextMenu;
-/** 等价与类组件 setState(updater[, callback]) */
-function useStateCallback(initialState) {
-    var _a = react_1.useState(initialState), state = _a[0], setState = _a[1];
-    var cbRef = react_1.useRef(undefined);
-    var setStateCallback = react_1.useCallback(function (state, cb) {
-        cbRef.current = cb;
-        setState(state);
-    }, []);
-    react_1.useEffect(function () {
-        if (cbRef.current) {
-            cbRef.current(state);
-            cbRef.current = undefined;
-        }
-    }, [state]);
-    return [state, setStateCallback];
-}
-exports.useStateCallback = useStateCallback;
-/** 用于判断组件是否挂载 */
-function useMountedRef() {
-    var mountedRef = react_1.useRef(false);
-    react_1.useEffect(function () {
-        mountedRef.current = true;
-        return function () {
-            mountedRef.current = false;
-        };
-    }, []);
-    return mountedRef;
-}
-exports.useMountedRef = useMountedRef;