@pinnacle0/web-ui 0.3.38 → 0.3.39

package/src/util/ModalUtil/index.tsx

@@ -1,179 +0,0 @@
-import React from "react";
-import type {ModalFuncProps} from "antd/lib/modal";
-import Modal from "antd/lib/modal";
-import type {ModalFunc, ModalStaticFunctions} from "antd/lib/modal/confirm";
-import "antd/lib/modal/style";
-import CloseOutlined from "@ant-design/icons/CloseOutlined";
-import type {PickOptional, SafeReactChild, SafeReactChildren} from "../../internal/type";
-import {TextUtil} from "../../internal/TextUtil";
-import {i18n} from "../../internal/i18n/util";
-import "./index.less";
-
-export type CreateModalReturnType = ReturnType<ModalFunc>;
-
-export type ModalConfigWithoutEvent = Omit<ModalConfig, "onOk" | "onCancel">;
-
-export type CreateAsyncModalPromise<WithCloseHandling extends boolean> = WithCloseHandling extends true ? Promise<"ok" | "cancel" | "close"> : Promise<boolean>;
-
-export interface ModalConfig {
-    body: SafeReactChildren; // Use array for multiple rows
-    title?: React.ReactChild;
-    closable?: boolean;
-    width?: number;
-    className?: string;
-    okText?: string;
-    cancelText?: string;
-    subTitle?: string;
-    onOk?: () => any;
-    onCancel?: (byClose: boolean) => any;
-    destroyTimeoutSecond?: number;
-    autoFocusButton?: "ok" | "cancel" | null;
-    hideButtons?: boolean;
-    addInnerPadding?: boolean;
-    footerExtra?: SafeReactChild;
-}
-
-let modalInstance: Omit<ModalStaticFunctions, "warn"> | null = null;
-
-function createSync(config: ModalConfig): CreateModalReturnType {
-    const t = i18n();
-    const defaultModalConfig: PickOptional<ModalConfig> = {
-        title: t.defaultTitle,
-        closable: true,
-        width: 550,
-        className: "",
-        okText: t.defaultOk,
-        autoFocusButton: "ok",
-        addInnerPadding: true,
-    };
-    const mergedConfig: ModalConfig = {...defaultModalConfig, ...config};
-    if (Array.isArray(mergedConfig.body)) {
-        mergedConfig.body = mergedConfig.body.map((rowContent, index) => <div key={index}>{rowContent}</div>);
-    }
-
-    const getTitle = (remainingSecond?: number) => {
-        const titleNode: SafeReactChildren = [mergedConfig.title!];
-        if (remainingSecond) {
-            titleNode.push(` (${TextUtil.interpolate(t.autoClose, remainingSecond.toString())})`);
-        }
-
-        return mergedConfig.closable ? (
-            <React.Fragment>
-                <span>{titleNode}</span>
-                <CloseOutlined onClick={() => destroy(true)} />
-            </React.Fragment>
-        ) : (
-            titleNode
-        );
-    };
-
-    const antModalConfig: ModalFuncProps = {
-        title: getTitle(mergedConfig.destroyTimeoutSecond),
-        content: (
-            <React.Fragment>
-                <div className="header">{mergedConfig.subTitle}</div>
-                <div className="body">{mergedConfig.body}</div>
-                <div className="footer">{mergedConfig.footerExtra}</div>
-            </React.Fragment>
-        ),
-        width: mergedConfig.width,
-        className: `${mergedConfig.className} ${mergedConfig.hideButtons ? "hide-modal-btns" : ""} ${mergedConfig.addInnerPadding ? "" : "no-padding"}`,
-        okText: mergedConfig.okText,
-        cancelText: mergedConfig.cancelText,
-        onOk: mergedConfig.onOk,
-        onCancel: () => mergedConfig.onCancel?.(false),
-        centered: true,
-        keyboard: false,
-        autoFocusButton: mergedConfig.autoFocusButton,
-        icon: null,
-    };
-
-    const instance = modalInstance || Modal;
-    const ref = mergedConfig.cancelText ? instance.confirm(antModalConfig) : instance.info(antModalConfig);
-
-    function destroy(byClose: boolean) {
-        ref.destroy();
-        mergedConfig.onCancel?.(byClose);
-    }
-
-    if (mergedConfig.destroyTimeoutSecond) {
-        let second = mergedConfig.destroyTimeoutSecond;
-        setTimeout(() => destroy(false), second * 1000);
-        setInterval(() => ref.update({title: getTitle(--second)}), 1000);
-    }
-
-    const enhancedRef = {...ref, destroy: () => destroy(false)};
-
-    return enhancedRef;
-}
-
-function createAsync<WithCloseHandling extends boolean = false>(
-    config: ModalConfigWithoutEvent,
-    withCloseHandling: WithCloseHandling = false as WithCloseHandling
-): CreateAsyncModalPromise<WithCloseHandling> {
-    if (withCloseHandling) {
-        return new Promise<"ok" | "cancel" | "close">(resolve => {
-            createSync({
-                ...config,
-                onOk: () => resolve("ok"),
-                onCancel: byClose => resolve(byClose ? "close" : "cancel"),
-            });
-        }) as CreateAsyncModalPromise<WithCloseHandling>;
-    }
-
-    return new Promise<boolean>(resolve => {
-        createSync({
-            ...config,
-            onOk: () => resolve(true),
-            onCancel: () => resolve(false),
-        });
-    }) as CreateAsyncModalPromise<WithCloseHandling>;
-}
-
-function confirm(body: SafeReactChildren, title?: string): Promise<boolean> {
-    const t = i18n();
-    return createAsync({
-        /**
-         * Do not simply pass title down.
-         * Because Object.assign (or spread operator) will keep undefined value, instead of default merging.
-         */
-        title: title || t.defaultTitle,
-        body,
-        width: 480,
-        okText: t.defaultConfirm,
-        cancelText: t.defaultCancel,
-    });
-}
-
-function Root(): React.ReactElement {
-    const [apiInstance, contextHolder] = Modal.useModal();
-    React.useEffect(
-        () => {
-            if (modalInstance) {
-                throw new Error("[web-ui] ModalUtil.Root cannot be mounted more than once");
-            }
-            modalInstance = apiInstance;
-            return () => {
-                modalInstance = null;
-            };
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- for didMount/willUnmount lifecycle
-        []
-    );
-    return contextHolder;
-}
-
-/**
- * If using <ModalUtil.Root />, this function will not work
- */
-function destroyAll() {
-    Modal.destroyAll();
-}
-
-export const ModalUtil = Object.freeze({
-    createSync,
-    createAsync,
-    confirm,
-    destroyAll,
-    Root,
-});

package/src/util/NotificationUtil.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import type {ArgsProps as NotificationOptions, NotificationInstance} from "antd/lib/notification";
-import notification from "antd/lib/notification";
-import "antd/lib/notification/style";
-
-let notificationInstance: NotificationInstance | null = null;
-
-function create(options: NotificationOptions) {
-    if (notificationInstance) {
-        notificationInstance.open(options);
-    } else {
-        notification.open(options);
-    }
-}
-
-function destroy() {
-    notification.destroy();
-}
-
-function Root(): React.ReactElement {
-    const [apiInstance, contextHolder] = notification.useNotification();
-    React.useEffect(
-        () => {
-            if (notificationInstance) {
-                throw new Error("[web-ui] NotificationUtil.Root cannot be mounted more than once");
-            }
-            notificationInstance = apiInstance;
-            return () => {
-                notificationInstance = null;
-            };
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- for didMount/willUnmount lifecycle
-        []
-    );
-    return contextHolder;
-}
-
-export const NotificationUtil = Object.freeze({
-    create,
-    destroy,
-    Root,
-});

package/src/util/OrientationUtil.ts

@@ -1,51 +0,0 @@
-/**
- * 1)
- * This util only works on mobile devices.
- * 2)
- * For Safari Mobile & Iphone Mobile,
- * ScreenOrientation API is not supported, and screen.availHeight & screen.availWidth will not produce a good result.
- * So use old APIs: window.eventListener, 'orientationchange'.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event
- */
-
-export type OrientationType = "portrait" | "landscape";
-
-function mode(): OrientationType {
-    try {
-        if (!window.screen.orientation && typeof window.orientation !== undefined) {
-            return window.orientation === 0 ? "portrait" : "landscape";
-        }
-
-        if (window.screen.availHeight > window.screen.availWidth) {
-            return "portrait";
-        }
-        return "landscape";
-    } catch (e) {
-        return "landscape";
-    }
-}
-
-function onOrientationChange(callback: () => void): void {
-    if (window.screen.orientation?.addEventListener) {
-        // some Android browser may not support this method
-        window.screen.orientation.addEventListener("change", callback);
-    } else {
-        window.addEventListener("orientationchange", callback);
-    }
-}
-
-function removeOnChange(callback: () => void): void {
-    if (window.screen.orientation?.removeEventListener) {
-        // some Android browser may not support this method
-        window.screen.orientation.removeEventListener("change", callback);
-    } else {
-        window.removeEventListener("orientationchange", callback);
-    }
-}
-
-export const OrientationUtil = Object.freeze({
-    mode,
-    onOrientationChange,
-    removeOnChange,
-});

package/src/util/PromptUtil/PromptBody.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import {Input} from "../../core/Input";
-import {Form} from "../../core/Form";
-import {Markdown} from "../../core/Markdown";
-import {classNames} from "../ClassNames";
-import type {PromptConfig, PromptResult} from "./index";
-import "./index.less";
-
-export interface Props extends PromptConfig {}
-
-interface State {
-    textValue: string;
-}
-
-export class PromptBody extends React.PureComponent<Props, State> {
-    static displayName = "PromptBody";
-
-    private readonly formRef: React.RefObject<Form>;
-    private readonly warningStyle: React.CSSProperties = {marginTop: 8, color: "red"};
-    private readonly formStyle: React.CSSProperties = {marginTop: 12};
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {textValue: props.initialInputValue || ""};
-        this.formRef = React.createRef();
-    }
-
-    validateForm = async (): Promise<PromptResult> => {
-        const validationPassed = this.formRef.current!.triggerSubmit();
-        if (await validationPassed) {
-            return {value: this.state.textValue};
-        } else {
-            return null;
-        }
-    };
-
-    render() {
-        const {body, warning, inputPlaceholder, inputType, inputValidator} = this.props;
-        const {textValue} = this.state;
-        return (
-            <div className={classNames("g-modal-prompt-body", inputType)}>
-                <Markdown>{body}</Markdown>
-                <p style={this.warningStyle}>{warning}</p>
-                <Form ref={this.formRef} style={this.formStyle} buttonRenderer={null}>
-                    <Form.Item validator={() => inputValidator?.(textValue) || null}>
-                        {inputType === "multi-line" ? (
-                            <Input.TextArea placeholder={inputPlaceholder} value={textValue} onChange={textValue => this.setState({textValue})} />
-                        ) : (
-                            <Input
-                                type={inputType === "password" ? "password" : "text"}
-                                autoComplete="new-password"
-                                placeholder={inputPlaceholder}
-                                value={textValue}
-                                onChange={textValue => this.setState({textValue})}
-                            />
-                        )}
-                    </Form.Item>
-                </Form>
-            </div>
-        );
-    }
-}

package/src/util/PromptUtil/index.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import {ModalUtil} from "../ModalUtil";
-import {PromptBody} from "./PromptBody";
-import {i18n} from "../../internal/i18n/util";
-
-export type PromptResult = {value: string} | null;
-
-export interface PromptConfig {
-    title: string;
-    body: string; // Support <Markdown> syntax.
-    warning?: string;
-    inputType?: "default" | "multi-line" | "password";
-    initialInputValue?: string;
-    inputPlaceholder?: string;
-    inputValidator?: (value: string) => string | null | Promise<string | null>;
-    width?: number;
-    okText?: string;
-}
-
-function createAsync(config: PromptConfig): Promise<PromptResult> {
-    const t = i18n();
-    return new Promise<PromptResult>(resolve => {
-        const ref: React.RefObject<PromptBody> = React.createRef();
-        ModalUtil.createSync({
-            title: config.title,
-            body: <PromptBody {...config} ref={ref} />,
-            okText: config.okText || t.defaultConfirm,
-            onOk: () =>
-                new Promise<void>((closeModal, keepModal) => {
-                    if (ref.current) {
-                        ref.current.validateForm().then(result => {
-                            if (result) {
-                                closeModal();
-                                resolve(result);
-                            } else {
-                                keepModal();
-                            }
-                        });
-                    }
-                }),
-            onCancel: () => resolve(null),
-            width: config.width || 550,
-            autoFocusButton: null,
-        });
-    });
-}
-
-export const PromptUtil = Object.freeze({
-    createAsync,
-});

package/src/util/RecentUsedStorageUtil.ts

@@ -1,46 +0,0 @@
-/**
- * In mobile Safari, the user may turn on "Block All Cookies".
- * In such situation, accessing to localStorage will throw error.
- */
-
-type ListItemType = string | number | boolean;
-
-function get<T extends ListItemType>(key: string, validator?: T[]): T[] {
-    try {
-        const rawData = localStorage.getItem(key);
-        if (rawData) {
-            const parsedList: unknown = JSON.parse(rawData);
-            if (Array.isArray(parsedList)) {
-                return (parsedList as T[]).filter(_ => !validator || validator.includes(_));
-            }
-        }
-        return [];
-    } catch (e) {
-        return [];
-    }
-}
-
-function put<T extends ListItemType>(key: string, value: T, maxSize: number = 5): void {
-    try {
-        const list = get(key);
-        const existIndex = list.indexOf(value);
-        if (existIndex >= 0) {
-            list.splice(existIndex, 1);
-            list.push(value);
-        } else {
-            list.push(value);
-            if (list.length > maxSize) {
-                list.splice(0, list.length - maxSize);
-            }
-        }
-
-        localStorage.setItem(key, JSON.stringify(list));
-    } catch (e) {
-        // Do nothing
-    }
-}
-
-export const RecentUsedStorageUtil = Object.freeze({
-    get,
-    put,
-});

package/src/util/SessionStorageUtil.ts

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

package/src/util/SwipeUtil.ts

@@ -1,25 +0,0 @@
-import {Direction} from "../hooks/useSwipe";
-
-function getDirection(start: [number, number], end: [number, number]): Direction {
-    const vector = [end[0] - start[0], start[1] - end[1]];
-    let degree = (Math.atan2(vector[1], vector[0]) * 180) / Math.PI;
-    degree = degree < 0 ? degree + 360 : degree;
-
-    if ((degree >= 315 && degree < 360) || (degree >= 0 && degree < 45)) {
-        return Direction.RIGHT;
-    } else if (degree >= 45 && degree < 135) {
-        return Direction.UP;
-    } else if (degree >= 135 && degree < 225) {
-        return Direction.LEFT;
-    } else {
-        return Direction.DOWN;
-    }
-}
-
-function getDisplacement(start: [number, number], end: [number, number]): number {
-    return Math.sqrt(Math.pow(start[0] - end[0], 2) + Math.pow(start[1] - end[1], 2));
-}
-export const SwipeUtil = Object.freeze({
-    getDirection,
-    getDisplacement,
-});

package/src/util/UploadUtil/index.ts

@@ -1,73 +0,0 @@
-import type {CreateUploadRequestOptions, UploadLogInfo} from "./type";
-
-function createRequest({uploadURL, file, formField, onSuccess, onError, onProgress}: CreateUploadRequestOptions) {
-    const httpRequest = new XMLHttpRequest();
-    const startTime = Date.now();
-    const formData = new FormData();
-    formData.append(formField, file);
-
-    const handleNetworkError = (reason: string) => {
-        const info: UploadLogInfo = {
-            file_name: file.name,
-            file_size: file.size.toString(),
-            file_type: file.type,
-            api_response: "-",
-        };
-        const elapsedTime = Date.now() - startTime;
-
-        onError?.({
-            info,
-            elapsedTime,
-            errorCode: "UPLOAD_NETWORK_ERROR",
-            errorMessage: reason,
-        });
-    };
-
-    httpRequest.addEventListener(
-        "load",
-        () => {
-            let response: any;
-            try {
-                response = JSON.parse(httpRequest.response);
-            } catch (e) {
-                // Leave response as undefined
-            }
-
-            const info: UploadLogInfo = {
-                file_name: file.name,
-                file_size: file.size.toString(),
-                file_type: file.type,
-                api_response: httpRequest.responseText,
-            };
-            const elapsedTime = Date.now() - startTime;
-            const statusCode = httpRequest.status;
-
-            if (statusCode !== 200) {
-                onError?.(
-                    {
-                        info,
-                        elapsedTime,
-                        errorCode: `UPLOAD_API_ERROR_${statusCode}`,
-                        errorMessage: `HTTP response: ${httpRequest.responseText}`,
-                        statusCode,
-                    },
-                    httpRequest.status
-                );
-            } else {
-                onSuccess({info, elapsedTime}, response);
-            }
-        },
-        false
-    );
-    httpRequest.addEventListener("error", () => handleNetworkError("HTTP request network error"), false);
-    httpRequest.addEventListener("abort", () => handleNetworkError("HTTP request aborted"), false);
-    httpRequest.addEventListener("timeout", () => handleNetworkError("HTTP request timeout"), false);
-    httpRequest.upload.addEventListener("progress", event => onProgress?.((event.loaded / event.total) * 100), false);
-
-    httpRequest.open("POST", uploadURL, true);
-    httpRequest.send(formData);
-}
-
-export const UploadUtil = Object.freeze({
-    createRequest,
-});

package/src/util/UploadUtil/type.ts

@@ -1,46 +0,0 @@
-/**
- * - Use snake_case, for logging purpose.
- * - Reason of using `type` instead of `interface`: https://github.com/microsoft/TypeScript/issues/15300
- */
-export type UploadLogInfo = {
-    file_name: string;
-    file_size: string;
-    file_type: string;
-    api_response: string;
-};
-
-export interface UploadSuccessLogEntry {
-    info: UploadLogInfo;
-    elapsedTime: number;
-}
-
-export interface UploadFailureLogEntry extends UploadSuccessLogEntry {
-    errorCode: string;
-    errorMessage: string;
-    statusCode?: number; // Only exist for HTTP response non-200 case
-}
-
-export type UploadSuccessCallback<ResponseType = any> = (logEntry: UploadSuccessLogEntry, response: ResponseType) => void;
-export type UploadFailureCallback<ResponseType = any> = (logEntry: UploadFailureLogEntry, response?: ResponseType) => void;
-
-export interface UploaderProps<SuccessResponseType = any, ErrorResponseType = any> {
-    /**
-     * POST form field for image content.
-     */
-    formField: string;
-    /**
-     * URL for uploading (method POST).
-     */
-    uploadURL: string;
-    onUploadSuccess?: UploadSuccessCallback<SuccessResponseType>;
-    onUploadFailure?: UploadFailureCallback<ErrorResponseType>;
-}
-
-export interface CreateUploadRequestOptions {
-    uploadURL: string;
-    file: File;
-    formField: string;
-    onSuccess: UploadSuccessCallback;
-    onError?: UploadFailureCallback;
-    onProgress?: (percentage: number) => void;
-}

package/test/mobile-ui-test/package.json

@@ -1,5 +0,0 @@
-{
-    "name": "@pinnacle0/web-mobile-ui-webpack-test",
-    "license": "UNLICENSED",
-    "private": true
-}

package/test/mobile-ui-test/src/component/FlatListDemo/fetch.ts

@@ -1,18 +0,0 @@
-const random = (min: number, max: number) => Math.floor(Math.random() * (max - min) + min);
-
-function generateString(length: number) {
-    let result = "";
-    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    const charactersLength = characters.length;
-    for (let i = 0; i < length; i++) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
-}
-
-export const fetchData = () =>
-    new Promise<string[]>(resolve => {
-        setTimeout(() => {
-            resolve(new Array(10).fill(null).map(() => generateString(random(10, 300))));
-        }, random(30, 1500));
-    });

package/test/mobile-ui-test/src/component/FlatListDemo/index.less

@@ -1,22 +0,0 @@
-#flat-list-demo {
-    display: flex;
-    flex-flow: column;
-    height: 100%;
-
-    .g-flat-list {
-        .g-flat-list-item {
-            padding: 10px;
-        }
-    }
-
-    .item {
-        padding: 10px;
-        border-radius: 10px;
-        overflow-wrap: break-word;
-        background-color: lightcoral;
-
-        &.expand {
-            background: lightpink;
-        }
-    }
-}