@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/hooks/useEyedropper/eyedropper.d.ts

@@ -0,0 +1,69 @@
+import type { EyeDropper, ColorSelectionOptions, ColorSelectionResult } from './types';
+/**
+ * EyeDropper API polyfill
+ * https://wicg.github.io/eyedropper-api/#dom-colorselectionoptions
+ */
+export declare class EyeDropperPolyfill implements EyeDropper {
+    private colorSelectionResult?;
+    private previousDocumentCursor?;
+    private canvas?;
+    private canvasCtx?;
+    private resolve?;
+    private lastPoint?;
+    private magnification;
+    constructor();
+    /**
+     * Opens the polyfilled eyedropper
+     *
+     * §3.3 EyeDropper interface ► `open()`
+     */
+    open(options?: ColorSelectionOptions): Promise<ColorSelectionResult>;
+    /**
+     * Starting eyedropper mode
+     */
+    private start;
+    /**
+     * Stopping eyedropper mode
+     */
+    private stop;
+    /**
+     * Creates fake screenshot of page and assign it to the body
+     */
+    private createScreenshot;
+    /**
+     * Removes screenshot from page
+     */
+    private removeScreenshot;
+    /**
+     * Sets waiting cursor
+     */
+    private setWaitingCursor;
+    /**
+     * Removes waiting cursor
+     */
+    private revertWaitingCursor;
+    /**
+     * Binds events
+     */
+    private bindEvents;
+    /**
+     * Unbinds `mousemove` events
+     */
+    private unbindEvents;
+    /**
+     * `click` handler
+     */
+    private onClick;
+    /**
+     * `mousemove` handler
+     */
+    private onMouseMove;
+    /**
+     * Detects color from canvas data
+     */
+    private detectColor;
+    /**
+     * Canvas styles creator
+     */
+    private addCanvasStyle;
+}

package/es/hooks/useEyedropper/eyedropper.js

@@ -0,0 +1,205 @@
+/* eslint-disable no-bitwise */
+import html2canvas from 'html2canvas-pro';
+import { errors, px } from './utils';
+/** Global `isOpen` state */
+const isOpenState = {
+    value: false,
+};
+/**
+ * EyeDropper API polyfill
+ * https://wicg.github.io/eyedropper-api/#dom-colorselectionoptions
+ */
+export class EyeDropperPolyfill {
+    constructor() {
+        this.magnification = {
+            size: 4,
+            scale: 12,
+        };
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onClick = this.onClick.bind(this);
+    }
+    /**
+     * Opens the polyfilled eyedropper
+     *
+     * §3.3 EyeDropper interface ► `open()`
+     */
+    async open(options = {}) {
+        // §3.3 EyeDropper interface ► `open()` ► p.2
+        // Prevent opening if already open
+        if (isOpenState.value) {
+            return Promise.reject(new DOMException('Invalid state', 'InvalidStateError'));
+        }
+        // §3.3 EyeDropper interface ► `open()` ► p.3
+        // Create a promise to handle the color selection
+        const result = new Promise((resolve, reject) => {
+            // §3.3 EyeDropper interface ► `open()` ► p.4
+            // Handle possible signal abortion
+            if (options.signal) {
+                if (options.signal.aborted) {
+                    this.stop();
+                    reject(options.signal.reason || new DOMException('Aborted', 'AbortError'));
+                }
+                const abortListener = () => {
+                    this.stop();
+                    if (options.signal) {
+                        reject(options.signal.reason || new DOMException('Aborted', 'AbortError'));
+                    }
+                };
+                options.signal.addEventListener('abort', abortListener);
+            }
+            // §3.3 EyeDropper interface ► `open()` ► p.5
+            // Store the resolve function and start the eyedropper
+            this.resolve = resolve;
+            this.start();
+        });
+        return result;
+    }
+    /**
+     * Starting eyedropper mode
+     */
+    async start() {
+        document.body.style.overflow = 'hidden';
+        this.setWaitingCursor();
+        await this.createScreenshot();
+        this.revertWaitingCursor();
+        this.bindEvents();
+    }
+    /**
+     * Stopping eyedropper mode
+     */
+    stop() {
+        document.body.style.overflow = '';
+        this.unbindEvents();
+        this.removeScreenshot();
+        this.colorSelectionResult = undefined;
+        this.lastPoint = undefined;
+        isOpenState.value = false;
+    }
+    /**
+     * Creates fake screenshot of page and assign it to the body
+     */
+    async createScreenshot() {
+        this.canvas = await html2canvas(document.body, {
+            allowTaint: true,
+            useCORS: true,
+            height: document.body.scrollHeight,
+            width: document.body.scrollWidth,
+        });
+        this.addCanvasStyle(this.canvas);
+        this.canvasCtx = this.canvas.getContext('2d', {
+            willReadFrequently: true,
+        });
+        document.body.appendChild(this.canvas);
+    }
+    /**
+     * Removes screenshot from page
+     */
+    removeScreenshot() {
+        if (!this.canvas) {
+            throw new Error(errors.canvasError);
+        }
+        document.body.removeChild(this.canvas);
+        this.canvas = undefined;
+        this.canvasCtx = undefined;
+    }
+    /**
+     * Sets waiting cursor
+     */
+    setWaitingCursor() {
+        this.previousDocumentCursor = document.documentElement.style.cursor;
+        document.documentElement.style.cursor = 'wait';
+    }
+    /**
+     * Removes waiting cursor
+     */
+    revertWaitingCursor() {
+        if (this.previousDocumentCursor) {
+            document.documentElement.style.cursor = this.previousDocumentCursor;
+        }
+        else {
+            document.documentElement.style.cursor = '';
+        }
+        this.previousDocumentCursor = undefined;
+    }
+    /**
+     * Binds events
+     */
+    bindEvents() {
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('click', this.onClick);
+    }
+    /**
+     * Unbinds `mousemove` events
+     */
+    unbindEvents() {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('click', this.onClick);
+    }
+    /**
+     * `click` handler
+     */
+    onClick() {
+        if (!this.lastPoint) {
+            throw new Error(errors.color);
+        }
+        this.detectColor(this.lastPoint);
+        const newValue = this.colorSelectionResult;
+        this.stop();
+        if (newValue && this.resolve) {
+            this.resolve(newValue);
+        }
+    }
+    /**
+     * `mousemove` handler
+     */
+    onMouseMove(event) {
+        if (!this.canvas || !this.canvasCtx) {
+            throw new Error(errors.canvasError);
+        }
+        const dpr = window.devicePixelRatio;
+        this.lastPoint = {
+            x: (event.clientX + window.scrollX) * dpr,
+            y: (event.clientY + window.scrollY) * dpr,
+        };
+        // Move magnifier
+        // const position = `${this.lastPoint.x / dpr} ${this.lastPoint.y / dpr}px`;
+        const position = [px(this.lastPoint.x / dpr), px(this.lastPoint.y / dpr)].join(' ');
+        Object.assign(this.canvas.style, {
+            opacity: 1,
+            transformOrigin: position,
+            clipPath: `circle(${px(this.magnification.size)} at ${position})`,
+        });
+    }
+    /**
+     * Detects color from canvas data
+     */
+    detectColor(point) {
+        if (!this.canvasCtx) {
+            throw new Error(errors.canvasError);
+        }
+        const pixelData = this.canvasCtx.getImageData(point.x, point.y, 1, 1).data;
+        const red = pixelData[0];
+        const green = pixelData[1];
+        const blue = pixelData[2];
+        const hex = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
+        this.colorSelectionResult = {
+            sRGBHex: `#${hex}`,
+        };
+    }
+    /**
+     * Canvas styles creator
+     */
+    addCanvasStyle(canvas) {
+        Object.assign(canvas.style, {
+            position: 'fixed',
+            top: '0px',
+            marginTop: `${-window.scrollY}px`,
+            left: '0px',
+            zIndex: 999999,
+            opacity: 0,
+            transform: `scale(${this.magnification.scale})`,
+            imageRendering: 'pixelated',
+            border: '1px solid #000000',
+        });
+    }
+}

package/es/hooks/useEyedropper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { useEyedropper } from './useEyedropper';

package/es/hooks/useEyedropper/index.js

@@ -0,0 +1,7 @@
+import { attachPolyfill } from './attach';
+import { isEyeDropperSupported } from './support';
+if (!isEyeDropperSupported()) {
+    attachPolyfill();
+}
+export * from './types';
+export { useEyedropper } from './useEyedropper';

package/es/hooks/useEyedropper/support.d.ts

@@ -0,0 +1 @@
+export declare function isEyeDropperSupported(): boolean;

package/es/hooks/useEyedropper/support.js

@@ -0,0 +1,3 @@
+export function isEyeDropperSupported() {
+    return 'EyeDropper' in window;
+}

package/es/hooks/useEyedropper/types.d.ts

@@ -0,0 +1,9 @@
+export interface ColorSelectionOptions {
+    signal?: AbortSignal;
+}
+export interface ColorSelectionResult {
+    sRGBHex: string;
+}
+export interface EyeDropper {
+    open(options?: ColorSelectionOptions): Promise<ColorSelectionResult>;
+}

package/es/hooks/useEyedropper/types.js

@@ -0,0 +1 @@
+export {};

package/es/hooks/useEyedropper/useEyedropper.d.ts

@@ -0,0 +1,8 @@
+export interface UseEyedropperResult {
+    pickedColor: string | null;
+    isLoading: boolean;
+    apiSupported: boolean;
+    pickColor: () => Promise<string | null>;
+    copyToClipboard: (color: string) => Promise<boolean>;
+}
+export declare const useEyedropper: (defaultColor?: string) => UseEyedropperResult;

package/es/hooks/useEyedropper/useEyedropper.js

@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+import { message } from 'antd';
+export const useEyedropper = (defaultColor) => {
+    const [pickedColor, setPickedColor] = useState(defaultColor || null);
+    const [isLoading, setIsLoading] = useState(false);
+    const apiSupported = 'EyeDropper' in window;
+    const pickColor = useCallback(async () => {
+        if (!apiSupported) {
+            message.error('Trình duyệt của bạn không hỗ trợ EyeDropper API.');
+            return null;
+        }
+        setIsLoading(true);
+        try {
+            const eyeDropper = new window.EyeDropper();
+            const { sRGBHex } = await eyeDropper.open();
+            setPickedColor(sRGBHex);
+            return sRGBHex;
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                message.info('Người dùng đã hủy chọn màu.');
+            }
+            else if (e instanceof Error) {
+                message.error(`Đã xảy ra lỗi khi chọn màu: ${e.message}`);
+            }
+            return null;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [apiSupported]);
+    const copyToClipboard = useCallback(async (color) => {
+        try {
+            await navigator.clipboard.writeText(color);
+            message.success(`Đã copy màu ${color} vào clipboard!`);
+            return true;
+        }
+        catch (error) {
+            message.error('Không thể copy màu vào clipboard.');
+            return false;
+        }
+    }, []);
+    return {
+        pickedColor,
+        isLoading,
+        apiSupported,
+        pickColor,
+        copyToClipboard,
+    };
+};

package/es/hooks/useEyedropper/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Errors text
+ */
+export declare const errors: {
+    canvasError: string;
+    color: string;
+};
+/**
+ * Returns px value
+ */
+export declare function px<T extends number>(value: T): `${T}px`;

package/es/hooks/useEyedropper/utils.js

@@ -0,0 +1,17 @@
+const prefix = `[EyeDropper]`;
+/**
+ * Errors text
+ */
+export const errors = {
+    canvasError: `${prefix} Error getting canvas`,
+    color: `${prefix} Cannot get color`,
+};
+/**
+ * Returns px value
+ */
+export function px(value) {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+        throw new Error();
+    }
+    return `${value}px`;
+}

package/es/hooks/useIsMounted.d.ts

@@ -0,0 +1 @@
+export declare const useIsMounted: () => () => boolean;

package/es/hooks/useIsMounted.js

@@ -0,0 +1,11 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const useIsMounted = () => {
+    const isMountedRef = useRef(false);
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    return useCallback(() => isMountedRef.current, []);
+};

package/es/index.d.ts

@@ -4,7 +4,7 @@ export * from './queries';
 export * from './providers';
 export { ENV } from './config';
 export { QUERY_KEYS, POST_MESSAGE_TYPES, CDP_API, ANTALYSER_API, MEDIA_TEMPLATE_API, } from './constants';
-export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';
+export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, analyzeFontFamily, getPrimaryFontFamily, isPrimaryFontWebSafe, isWebSafeFont, } from './utils';
 export { translate, translations } from './locales';
 export * from './hooks';
 export { ConfigProvider as AntdConfigProvider } from 'antd';

package/es/index.js

@@ -4,7 +4,7 @@ export * from './queries';
 export * from './providers';
 export { ENV } from './config';
 export { QUERY_KEYS, POST_MESSAGE_TYPES, CDP_API, ANTALYSER_API, MEDIA_TEMPLATE_API, } from './constants';
-export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';
+export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, analyzeFontFamily, getPrimaryFontFamily, isPrimaryFontWebSafe, isWebSafeFont, } from './utils';
 export { translate, translations } from './locales';
 // Hooks
 export * from './hooks';