@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/util/AdminNavigatorBase.ts

@@ -0,0 +1,99 @@
+import type React from "react";
+import {matchPath} from "react-router-dom";
+import {Memo} from "../internal/Memo";
+
+/**
+ * Module accessibility is determined by <Feature> permission only.
+ * <Field> permissions are only serve for <AdminPermissionSelector> use.
+ */
+export interface NavigationModuleItem<Feature, Field = never> {
+    /**
+     * Must be unique for all modules.
+     */
+    url: string;
+    title: string;
+    componentType: React.ComponentType<any>;
+    /**
+     * If undefined, this module can be accessed by any one.
+     * If given, this module can be accessed by any user, with at least 1 of the provided Feature permissions.
+     * If the user is entitled with some super Feature permission (like "ALL"), this module can be accessed as well.
+     * Pass an empty array [] if allow only user with super Feature permission
+     */
+    featurePermissions?: Feature[];
+    fieldPermissions?: Field[];
+    /**
+     * To define route parameter for React Router.
+     * Example: "/:direction(asc|desc)"
+     */
+    routeParam?: string;
+    /**
+     *  default - display NavItem normally, can access by route.
+     *  hidden -  Not shown as NavItem, can access by route. Useful for modules in development.
+     *  disabled - Not shown as NavItem, cannot access by route.
+     */
+    display?: "default" | "hidden" | "disabled";
+    /**
+     * If true, each different URL will use different navigator tab.
+     * Only work when routeParam is specified.
+     *
+     * Example:
+     * /user/detail/100 and /user/detail/101 will occupy 2 tabs.
+     *
+     * Attention:
+     * In order to distinguish each tab by title, AdminAppContext.updateTitle() should be used together.
+     * A loading indicator will be shown before AdminAppContext.updateTitle() is called.
+     */
+    separateTab?: boolean;
+}
+
+export interface NavigationGroupItem<Feature, Field = never> {
+    title: string;
+    icon: React.ReactElement;
+    modules: Array<NavigationModuleItem<Feature, Field>>;
+}
+
+export abstract class AdminNavigatorBase<Feature extends string, Field extends string = never> {
+    /**
+     * If currentPermissions is undefined, it will behave like it owns all permissions.
+     */
+    protected constructor(
+        private superAdminFeaturePermission: Feature,
+        private currentFeaturePermissions?: Feature[],
+        private superAdminFieldPermission?: Field,
+        private currentFieldPermission?: Field[]
+    ) {}
+
+    @Memo()
+    groups(showHidden: boolean): Array<NavigationGroupItem<Feature, Field>> {
+        return this.allGroups()
+            .map(_ => {
+                const availableModules = _.modules.filter(module => module.display !== "disabled" && (showHidden || module.display !== "hidden") && this.canAccessModule(module));
+                return availableModules.length > 0 ? {..._, modules: availableModules} : null;
+            })
+            .filter(_ => _) as Array<NavigationGroupItem<Feature, Field>>;
+    }
+
+    @Memo()
+    modules(): Array<NavigationModuleItem<Feature, Field>> {
+        const list: Array<NavigationModuleItem<Feature, Field>> = [];
+        this.groups(true).forEach(_ => list.push(..._.modules));
+        return list;
+    }
+
+    moduleByURL(url: string): NavigationModuleItem<Feature, Field> | undefined {
+        const isMatched = (item: NavigationModuleItem<Feature, Field>) =>
+            matchPath(url, {
+                path: item.routeParam ? item.url + item.routeParam : item.url,
+                exact: true,
+                strict: false,
+            }) !== null;
+        return this.modules().find(isMatched);
+    }
+
+    private canAccessModule(module: NavigationModuleItem<Feature, Field>): boolean {
+        const permissions = this.currentFeaturePermissions;
+        return !permissions || permissions.includes(this.superAdminFeaturePermission) || !module.featurePermissions || module.featurePermissions.some(_ => permissions.includes(_));
+    }
+
+    protected abstract allGroups(): Array<NavigationGroupItem<Feature, Field>>;
+}

package/src/util/BrowserBookmarkUtil.ts

@@ -0,0 +1,24 @@
+import {i18n} from "../internal/i18n/util";
+import {ModalUtil} from "./ModalUtil";
+import {TextUtil} from "../internal/TextUtil";
+import {BrowserUtil} from "./BrowserUtil";
+
+function addToBookmark() {
+    const crossBrowserWindowObject: any = window;
+    if (crossBrowserWindowObject.sidebar && typeof crossBrowserWindowObject.sidebar.addPanel === "function") {
+        // Old Firefox
+        crossBrowserWindowObject.sidebar.addPanel(location.href, document.title, "");
+    } else if (crossBrowserWindowObject.external && typeof crossBrowserWindowObject.external.AddFavorite === "function") {
+        // IE
+        crossBrowserWindowObject.external.AddFavorite(location.href, document.title);
+    } else {
+        // Not supported (most cases)
+        const shortcutKey = BrowserUtil.isMobile() ? null : BrowserUtil.os() === "mac" ? "Command + D" : "Ctrl + D";
+        const t = i18n();
+        ModalUtil.createSync({body: shortcutKey ? TextUtil.interpolate(t.addBookmarkWithShortcut, shortcutKey) : t.addBookmarkManually});
+    }
+}
+
+export const BrowserBookmarkUtil = Object.freeze({
+    addToBookmark,
+});

package/src/util/BrowserUtil.ts

@@ -0,0 +1,122 @@
+export type BrowserOS = "windows" | "mac" | "ios" | "android" | "other";
+export type BrowserKernel = "wechat" | "webkit" | "firefox" | "ie" | "other"; // WeChat is a special webkit, some features restricted
+export interface BrowserNewTabSizeOptions {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+}
+
+function os(): BrowserOS {
+    if (navigator.userAgent.toUpperCase().includes("WINDOWS")) {
+        // https://stackoverflow.com/a/19176790
+        return "windows";
+    } else if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+        // Also include "Mac" keyword
+        return "ios";
+    } else if (/Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+        return "android";
+    } else if (navigator.platform.toUpperCase().includes("MAC")) {
+        return "mac";
+    } else {
+        return "other";
+    }
+}
+
+function kernel(): BrowserKernel {
+    const userAgentUpperCase = navigator.userAgent.toUpperCase();
+    if (userAgentUpperCase.includes("MICROMESSENGER")) {
+        return "wechat";
+    } else if ("WebkitAppearance" in document.documentElement.style) {
+        return "webkit";
+    } else if (userAgentUpperCase.includes("FIREFOX") && !userAgentUpperCase.includes("SEAMONKEY")) {
+        // https://github.com/keithws/browser-report/blob/6fa7a2bb33ce8b8621b2c4538a1ebefac38af57f/index.js#L64
+        return "firefox";
+    } else if (userAgentUpperCase.includes("MSIE")) {
+        // https://github.com/keithws/browser-report/blob/6fa7a2bb33ce8b8621b2c4538a1ebefac38af57f/index.js#L56
+        return "ie";
+    } else {
+        return "other";
+    }
+}
+
+function isMobile() {
+    const system = os();
+    return system === "ios" || system === "android";
+}
+
+function removeElement(element: HTMLElement | null) {
+    if (element) {
+        try {
+            element.remove();
+        } catch (e) {
+            // Some legacy browser may not support DOM element remove()
+            element.parentElement?.removeChild(element);
+        }
+    }
+}
+
+function scrollTo(options: ScrollToOptions, container: Element | null = null) {
+    if (container) {
+        if (container.scrollTo) {
+            try {
+                container.scrollTo({...options});
+            } catch (e) {
+                container.scrollTo(options.left ?? container.scrollLeft, options.top ?? container.scrollTop);
+            }
+        } else {
+            options.left && (container.scrollLeft = options.left);
+            options.top && (container.scrollTop = options.top);
+        }
+    } else {
+        // Some legacy browser may not support DOM element scrollTo({...}) signature, or even scrollTo()
+        try {
+            window.scrollTo({...options});
+        } catch (e) {
+            window.scrollTo(options.left ?? window.scrollX, options.top ?? window.scrollY);
+        }
+    }
+}
+
+/**
+ * Resolve when new tab is loaded, only applicable to same domain.
+ * Ref: https://stackoverflow.com/questions/3030859/detecting-the-onload-event-of-a-window-opened-with-window-open
+ */
+function newTab(url: string, sizeOptions: Partial<BrowserNewTabSizeOptions> = {}) {
+    let features: string | undefined;
+    if (Object.keys(sizeOptions).length > 0) {
+        features = "toolbar=no,location=no,status=no,menubar=no,resizable=no" + Object.entries(sizeOptions).map(([key, value]) => `,${key}=${value}`);
+    }
+
+    const newWindow = window.open(url, "_blank", features);
+    if (!newWindow) {
+        // In case some browser blocks popup, fallback to same tab open
+        window.location.href = url;
+    }
+}
+
+function openQQ(qq: string) {
+    const system = os();
+    if (system === "ios") {
+        window.open(`mqq://im/chat?chat_type=wpa&uin=${qq}&version=1&src_type=web`);
+    } else if (system === "android") {
+        window.open(`mqqwpa://im/chat?chat_type=wpa&uin=${qq}`);
+    } else {
+        window.open(`tencent://message/?uin=${qq}&Site=Sambow&Menu=yes`);
+    }
+}
+
+function isDarkTheme(): boolean {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+export const BrowserUtil = Object.freeze({
+    os,
+    kernel,
+    isMobile,
+    removeElement,
+    scrollTo,
+    newTab,
+    openQQ,
+    isDarkTheme,
+});

package/src/util/CanvasUtil.ts

@@ -0,0 +1,61 @@
+interface DrawPathOptions {
+    strokeColor: string;
+    lineWidth?: number;
+    /** shorten the path between node from both ends */
+    offset?: number;
+}
+/**
+ * This function draws line on canvas between the center of nodes.
+ *
+ * Attention:
+ * canvasContext must share the same offsetParent with the nodes.
+ */
+function drawPathBetweenNodes(nodes: NodeListOf<Element>, canvasContext: CanvasRenderingContext2D, {strokeColor, lineWidth = 1, offset = 0}: DrawPathOptions) {
+    const [first, ...rest] = Array.from(nodes).map(_ => elementCenter(_, canvasContext.canvas.offsetParent));
+    if (!first) return;
+    const drawWithOffset = offset > 0;
+    let previousPosition = first;
+
+    canvasContext.save();
+    canvasContext.lineWidth = lineWidth;
+    canvasContext.strokeStyle = strokeColor;
+
+    if (!drawWithOffset) {
+        canvasContext.beginPath();
+        canvasContext.moveTo(previousPosition.x, previousPosition.y);
+    }
+    for (const position of rest) {
+        if (position) {
+            if (drawWithOffset) {
+                canvasContext.beginPath();
+                canvasContext.moveTo(previousPosition.x, previousPosition.y);
+                canvasContext.setLineDash([0, offset, Math.sqrt((position.x - previousPosition.x) ** 2 + (position.y - previousPosition.y) ** 2) - offset * 2, offset, 0]);
+                previousPosition = position;
+            }
+            canvasContext.lineTo(position.x, position.y);
+            if (drawWithOffset) canvasContext.stroke();
+        }
+    }
+    if (!drawWithOffset) canvasContext.stroke();
+    canvasContext.restore();
+}
+
+function elementCenter(element: Element, canvasParentElement: Element | null): {x: number; y: number} {
+    const htmlElement = element as HTMLElement;
+    let x = htmlElement.offsetLeft + htmlElement.offsetWidth / 2;
+    let y = htmlElement.offsetTop + htmlElement.offsetHeight / 2;
+    let parentElement = htmlElement.offsetParent as HTMLElement | null;
+    while (parentElement && canvasParentElement && parentElement !== canvasParentElement) {
+        x = x + parentElement.offsetLeft;
+        y = y + parentElement.offsetTop;
+        parentElement = parentElement.offsetParent as HTMLElement | null;
+    }
+    return {
+        x,
+        y,
+    };
+}
+
+export const CanvasUtil = Object.freeze({
+    drawPathBetweenNodes,
+});

package/src/util/ClassNames.ts

@@ -0,0 +1,2 @@
+import classnames from "classnames";
+export const classNames = classnames;

package/src/util/Clipboard.ts

@@ -0,0 +1,61 @@
+function copyText(text: string) {
+    const element = document.createElement("textarea");
+    element.value = text;
+    element.style.position = "absolute";
+    element.style.left = "-9999px";
+    element.setAttribute("readonly", "");
+    document.body.appendChild(element);
+
+    // In case there is already some text selection by user, store the previous selection & recover later
+    const selection = document.getSelection();
+    const selected = selection != null && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+    element.select();
+    document.execCommand("copy");
+    document.body.removeChild(element);
+
+    if (selection && selected) {
+        selection.removeAllRanges();
+        selection.addRange(selected);
+    }
+}
+
+/**
+ * Save image to clipboard via javascript.
+ *
+ * CAVEATS:
+ * 1. Typescript have no type definition of navigator.clipboard.write and ClipboardItem yet
+ * 2. Compatibility:
+ *    - png only, need extra transformation via canvas if image format is jpg
+ *    - supported by chrome 76 and safari 13.1
+ * 3. Need another request to fetch image
+ *
+ * references:
+ * - https://github.com/Microsoft/TypeScript/issues/26728
+ * - https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardItem
+ * - https://github.com/lgarron/clipboard-polyfill
+ */
+async function copyImage(base64Image: string) {
+    if ("ClipboardItem" in window && "write" in navigator.clipboard) {
+        const [base64Metadata, base64String] = base64Image.trim().split(";base64,");
+        if (base64Metadata !== "data:image/png") {
+            // not png format or invalid argument
+            return false;
+        }
+        const unicodeArray = atob(base64String)
+            .split("")
+            .map(_ => _.charCodeAt(0));
+        const byteArray = Uint8Array.from(unicodeArray);
+        const blob = new Blob([byteArray], {type: "image/png"});
+        // @ts-ignore
+        await navigator.clipboard.write([new window.ClipboardItem({"image/png": blob})]);
+        return true;
+    } else {
+        return false;
+    }
+}
+
+export const Clipboard = Object.freeze({
+    copyText,
+    copyImage,
+});

package/src/util/ExpirableLocalStorageUtil.ts

@@ -0,0 +1,3 @@
+import {ExpirableLocalStorage} from "../internal/ExpirableLocalStorage";
+
+export const ExpirableLocalStorageUtil = ExpirableLocalStorage.getInstance();

package/src/util/ExportUtil.ts

@@ -0,0 +1,34 @@
+export type ExportColumn<T> = {
+    title: string;
+    renderData: (data: T, index: number) => string | number;
+};
+
+function exportTxt(filename: string, text: string) {
+    const element = document.createElement("a");
+    element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
+    element.setAttribute("download", filename);
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}
+
+function exportCsv<T>(columns: Array<ExportColumn<T>>, data: T[], extraRow?: string) {
+    const headerRow: string[] = [];
+    const contentRows: string[] = [];
+    columns.forEach(column => headerRow.push(column.title));
+    data.forEach((_, index) => {
+        const contentRow: string[] = [];
+        // Embrace with quote("), in case of inside comma(,)
+        columns.forEach(column => contentRow.push(`"${column.renderData(_, index)}"`));
+        contentRows.push(contentRow.join(","));
+    });
+    if (extraRow) {
+        contentRows.push(extraRow);
+    }
+    window.open(encodeURI(`data:text/csv;charset=utf-8,${headerRow.join(",")}\n${contentRows.join("\n")}`));
+}
+
+export const ExportUtil = Object.freeze({
+    exportTxt,
+    exportCsv,
+});

package/src/util/ImportUtil.ts

@@ -0,0 +1,41 @@
+async function importTxt(files: FileList | null | undefined): Promise<string | null> {
+    if (files && files[0]) {
+        const file = files[0];
+        if (file.type.match(/text.*/)) {
+            return new Promise<string | null>(resolve => {
+                const fileReader = new FileReader();
+                fileReader.onload = () => {
+                    const rawContent = fileReader.result?.toString();
+                    if (rawContent) {
+                        resolve(rawContent);
+                    } else {
+                        resolve(null);
+                    }
+                };
+                fileReader.onerror = () => resolve(null);
+                fileReader.readAsText(file);
+            });
+        }
+    }
+    return null;
+}
+
+/**
+ * This function only return valid lines, i.e: with content after trimming.
+ */
+async function importTxtInLines(files: FileList | null | undefined): Promise<string[] | null> {
+    const content = await importTxt(files);
+    if (content) {
+        return content
+            .split("\n")
+            .map(_ => _.trim())
+            .filter(_ => _);
+    } else {
+        return null;
+    }
+}
+
+export const ImportUtil = Object.freeze({
+    importTxt,
+    importTxtInLines,
+});

package/src/util/LocalStorageUtil.ts

@@ -0,0 +1,3 @@
+import {StorageHelper} from "../internal/StorageHelper";
+
+export const LocalStorageUtil = new StorageHelper(localStorage);

package/src/util/LocaleUtil.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import {LocalStorageUtil} from "./LocalStorageUtil";
+
+/**
+ * Only "zh" (Simplified Chinese) / "en" (English) are supported now.
+ * CAVEAT:
+ *
+ * We do not store Locale into application context (or store).
+ * So that we can access locale info anywhere in the code, as well as performance.
+ *
+ * Page refresh is required if you want to switch language.
+ */
+export type Locale = "zh" | "en";
+
+export const LocaleContext = React.createContext<Locale>("en");
+
+class LocaleManager {
+    private readonly storageKey = "ui-pref-locale";
+    private locale: Locale = "en";
+
+    setInitial(locale: Locale | "auto"): void {
+        this.locale = locale === "auto" ? this.preferredLocale() : locale;
+    }
+
+    change(locale: Locale): void {
+        LocalStorageUtil.setString(this.storageKey, locale);
+        location.reload();
+    }
+
+    current(): Locale {
+        return this.locale;
+    }
+
+    private preferredLocale(): Locale {
+        let navigatorLocale: Locale;
+        const navigatorLanguage = navigator.languages ? navigator.languages[0] : navigator.language;
+        if (navigatorLanguage.startsWith("zh")) {
+            // "zh-TW", "zh-CN", "zh-HK", "zh-SG"
+            navigatorLocale = "zh";
+        } else {
+            navigatorLocale = "en";
+        }
+        return LocalStorageUtil.getString<Locale>(this.storageKey, navigatorLocale, ["zh", "en"]);
+    }
+}
+
+export const LocaleUtil = new LocaleManager();

package/src/util/MediaUtil/index.less

@@ -0,0 +1,27 @@
+.g-media-modal {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: 1001;
+    left: 0;
+    top: 0;
+    background-color: rgba(0 0 0 / 70%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img,
+    > video {
+        max-width: 98%;
+        max-height: 98%;
+    }
+
+    > .anticon-close {
+        font-size: 30px;
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        cursor: pointer;
+        color: #fff;
+    }
+}

package/src/util/MediaUtil/index.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import CloseOutlined from "@ant-design/icons/CloseOutlined";
+import "./index.less";
+
+function openImage(url: string) {
+    return new Promise<void>(resolve => {
+        const bodyElement = document.body;
+        const divElement = document.createElement("div");
+        const closeModal = () => {
+            bodyElement.removeChild(divElement);
+            resolve();
+        };
+
+        bodyElement.appendChild(divElement);
+        ReactDOM.createRoot(divElement).render(
+            <div onClick={closeModal} className="g-media-modal">
+                <img src={url} />
+                <CloseOutlined />
+            </div>
+        );
+    });
+}
+
+function openVideo(url: string) {
+    return new Promise<void>(resolve => {
+        const bodyElement = document.body;
+        const divElement = document.createElement("div");
+        const closeModal = () => {
+            bodyElement.removeChild(divElement);
+            resolve();
+        };
+
+        ReactDOM.createRoot(divElement).render(
+            <div onClick={closeModal} className="g-media-modal">
+                <video src={url} autoPlay controls controlsList="nodownload" muted />
+                <CloseOutlined />
+            </div>
+        );
+        bodyElement.appendChild(divElement);
+    });
+}
+
+function playAudio(url: string, amplitude: number = 1) {
+    try {
+        /**
+         * Attention:
+         * (1) For old browsers, Promise return value may be unsupported.
+         * (2) For modern browsers, if the user never has interaction with the page, play() will reject.
+         */
+        const elementSource = new Audio(url);
+        elementSource.crossOrigin = "anonymous";
+        const audioCtx = new AudioContext();
+        const source = audioCtx.createMediaElementSource(elementSource);
+        const gainNode = audioCtx.createGain();
+        gainNode.gain.value = amplitude;
+        source.connect(gainNode);
+        gainNode.connect(audioCtx.destination);
+        elementSource.play().catch(() => {});
+    } catch (e) {
+        // Do nothing
+    }
+}
+
+export const MediaUtil = Object.freeze({
+    openImage,
+    openVideo,
+    playAudio,
+});

package/src/util/MessageUtil/index.less

@@ -0,0 +1,3 @@
+.ant-message {
+    color: inherit;
+}

package/src/util/MessageUtil/index.tsx

@@ -0,0 +1,23 @@
+import type React from "react";
+import type {ArgsProps} from "antd/lib/message";
+import message from "antd/lib/message";
+import "antd/lib/message/style";
+import "./index.less";
+
+function success(content: string | React.ReactElement) {
+    message.success(content);
+}
+
+function error(content: string | React.ReactElement) {
+    message.error(content);
+}
+
+function info(config: Partial<Omit<ArgsProps, "type">> & {content: ArgsProps["content"]}) {
+    message.open({duration: 3, ...config, type: "info"});
+}
+
+export const MessageUtil = Object.freeze({
+    success,
+    error,
+    info,
+});