@pinnacle0/web-ui 0.3.23 → 0.3.26

package/src/util/AdminNavigatorBase.ts

@@ -1,99 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

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

package/src/util/Clipboard.ts

@@ -1,61 +0,0 @@
-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

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

package/src/util/ExportUtil.ts

@@ -1,34 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

package/src/util/LocaleUtil.ts

@@ -1,47 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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

@@ -1,69 +0,0 @@
-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

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

package/src/util/MessageUtil/index.tsx

@@ -1,23 +0,0 @@
-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,
-});