@d-matrix/utils 1.2.5 → 1.3.0

package/dist/algorithm.d.ts

@@ -0,0 +1 @@
+export declare const moveMulti: <T extends unknown>(arr: T[], indexes: number[], start: number) => T[];

package/dist/algorithm.js

@@ -0,0 +1,21 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moveMulti = void 0;
+var removeSymbol = Symbol('Placeholder for removed element');
+var moveMulti = function (arr, indexes, start) {
+    var cloned = arr.slice();
+    for (var i = 0; i < cloned.length; i++) {
+        if (indexes.includes(i)) {
+            cloned[i] = removeSymbol;
+        }
+    }
+    var els = arr.filter(function (__, i) { return indexes.includes(i); });
+    cloned.splice.apply(cloned, __spreadArray([start, 0], els));
+    return cloned.filter(function (v) { return v !== removeSymbol; });
+};
+exports.moveMulti = moveMulti;

package/dist/clipboard.d.ts

@@ -1 +1 @@
-export declare function writeImage(element: HTMLImageElement | null): Promise<unknown>;
+export declare function writeImage(element: HTMLImageElement | null | string): Promise<unknown>;

package/dist/clipboard.js

@@ -52,11 +52,22 @@ function writeImage(element) {
                     var img = new Image();
                     //浏览器在加载图像时要使用匿名身份验证，以允许跨域资源共享（CORS）。
                     img.crossOrigin = 'anonymous';
-                    img.src = element.src;
+                    if (typeof element === 'string') {
+                        img.src = element;
+                    }
+                    else {
+                        img.src = element.src;
+                    }
                     img.onload = function () {
                         //创建一个画布，赋予画布宽高为图片的原始宽高
-                        canvas.width = element.naturalWidth;
-                        canvas.height = element.naturalHeight;
+                        if (typeof element === 'string') {
+                            canvas.width = img.width;
+                            canvas.height = img.height;
+                        }
+                        else {
+                            canvas.width = element.naturalWidth;
+                            canvas.height = element.naturalHeight;
+                        }
                         //防止有缓存，绘制之前先清除画布
                         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                         ctx.drawImage(img, 0, 0);

package/dist/file.d.ts

@@ -0,0 +1,23 @@
+declare type FileURL = string;
+/**
+ * 转换BlobPart或者文件地址为图片对象
+ * @param file 传入文件 或者 url
+ * @returns 返回 一个图片详情对象
+ */
+export declare const toImage: (file: BlobPart | FileURL, options?: BlobPropertyBag | undefined) => Promise<HTMLImageElement>;
+export interface ImageSizeValidationResult {
+    isOk: boolean;
+    width: number;
+    height: number;
+}
+/**
+ * 图片宽，高校验
+ * @param file 传入文件 或者 url
+ * @param limitSize 限制宽度, 高度
+ * @returns isOK: 是否超出宽高; width, height: 图片的宽高
+ */
+export declare const validateImageSize: (file: BlobPart | FileURL, limitSize: {
+    width: number;
+    height: number;
+}, options?: BlobPropertyBag | undefined) => Promise<ImageSizeValidationResult>;
+export {};

package/dist/file.js

@@ -0,0 +1,89 @@
+"use strict";
+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 (_) 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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateImageSize = exports.toImage = void 0;
+/**
+ * 转换BlobPart或者文件地址为图片对象
+ * @param file 传入文件 或者 url
+ * @returns 返回 一个图片详情对象
+ */
+var toImage = function (file, options) {
+    return new Promise(function (resolve, reject) {
+        var image = new Image();
+        if (typeof file === 'string') {
+            image.src = file;
+        }
+        else {
+            var blob = URL.createObjectURL(new Blob([file], options));
+            image.src = blob;
+        }
+        // 如果有缓存，读缓存
+        if (image.complete) {
+            resolve(image);
+        }
+        else {
+            //否则加载图片
+            image.onload = function () {
+                resolve(image);
+                image.onload = null; // 避免重复加载
+            };
+            image.onerror = function () {
+                reject('图片加载失败');
+            };
+        }
+    });
+};
+exports.toImage = toImage;
+/**
+ * 图片宽，高校验
+ * @param file 传入文件 或者 url
+ * @param limitSize 限制宽度, 高度
+ * @returns isOK: 是否超出宽高; width, height: 图片的宽高
+ */
+var validateImageSize = function (file, limitSize, options) { return __awaiter(void 0, void 0, void 0, function () {
+    var image;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, exports.toImage(file, options)];
+            case 1:
+                image = _a.sent();
+                return [2 /*return*/, { isOk: image.width <= limitSize.width && image.height <= limitSize.height, width: image.width, height: image.height }];
+        }
+    });
+}); };
+exports.validateImageSize = validateImageSize;

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export * as react from './react';
 export * as dom from './dom';
 export * as date from './date';
 export * as types from './types';
+export * as algorithm from './algorithm';
+export * as file from './file';

package/dist/index.js

@@ -19,9 +19,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.types = exports.date = exports.dom = exports.react = exports.clipboard = void 0;
+exports.file = exports.algorithm = exports.types = exports.date = exports.dom = exports.react = exports.clipboard = void 0;
 exports.clipboard = __importStar(require("./clipboard"));
 exports.react = __importStar(require("./react"));
 exports.dom = __importStar(require("./dom"));
 exports.date = __importStar(require("./date"));
 exports.types = __importStar(require("./types"));
+exports.algorithm = __importStar(require("./algorithm"));
+exports.file = __importStar(require("./file"));

package/dist/react.d.ts

@@ -7,4 +7,8 @@ declare type ContextMenuTarget = () => Element | Document | undefined | null;
  * @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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisableContextMenu = exports.cleanup = exports.render = void 0;
+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;
@@ -62,3 +62,32 @@ var useDisableContextMenu = function (target) {
     }, []);
 };
 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-matrix/utils",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "A dozen of utils for Front-End Development",
   "main": "dist/index.js",
   "scripts": {

package/readme.md

@@ -12,10 +12,11 @@ A dozen of utils for Front-End Development
 - [dom](#dom)
 - [date](#date)
 - [types](#types)
+- [algorithm]($algorithm)
 
 ### clipboard
 
-- `clipboard.writeImage(element: HTMLImageElement): void`
+- `clipboard.writeImage(element: HTMLImageElement | null | string): void`
 
 复制图片到剪贴板。
 
@@ -59,6 +60,14 @@ const TestComp = () => {
 }
 ```
 
+- `useStateCallback<T>(initialState: T): [T, (state: T, cb?: (state: T) => void) => void]`
+
+返回值`setState()`函数类似类组件中的`setState(updater[, callback])`,可以在`callback`中获取更新后的`state`
+
+- `useMountedRef(): React.MutableRefObject<boolean>`
+
+获取当前组件是否已挂载的 Hook
+
 ### dom
 
 - `scrollToTop(element: Element | null | undefined): void`
@@ -80,6 +89,32 @@ type A = { a: number; b: number; c: number; };
 type T0 = WithOptional<A, 'b' | 'c'>;  // { a: number; b?: number; c?: number }
 ```
 
+### algorithm
+
+- `moveMulti<T extends unknown>(arr: T[], indexes: number[], start: number): T[]`
+
+移动多个元素到数组中指定的位置,用法,见[测试用例](tests/algorithm.cy.ts)
+
+### file
+
+- `toImage(file: BlobPart | FileURL, options?: BlobPropertyBag): Promise<HTMLImageElement>`
+
+转换BlobPart或者文件地址为图片对象
+
+- `validateImageSize(file: BlobPart | FileURL, limitSize: { width: number; height: number }, options?: BlobPropertyBag): Promise<ImageSizeValidationResult>`
+
+返回值:
+
+```ts
+interface ImageSizeValidationResult {
+  isOk: boolean;
+  width: number;
+  height: number;
+}
+```
+
+图片宽，高校验
+
 ## 测试
 
 运行全部组件测试
@@ -94,6 +129,20 @@ npm run cy:run -- --component
 npm run cy:run -- --component --spec tests/date.cy.ts
 ```
 
+## 发布
+
+更新package version:
+
+```bash
+npm version <minor> or <major>...
+```
+
+构建:
+
+```bash
+npm build
+```
+
 ## 注意事项
 
 - [Before Publishing: Make Sure Your Package Installs and Works](https://docs.npmjs.com/cli/v10/using-npm/developers/#before-publishing-make-sure-your-package-installs-and-works)