@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/util/ModalUtil/index.less

@@ -0,0 +1,83 @@
+@import "../../css/variable.less";
+
+.ant-modal-confirm {
+    .ant-modal-body {
+        padding: 0 !important;
+
+        .ant-modal-confirm-title {
+            background: @lib-background-gray;
+            padding: 12px 20px;
+
+            > span {
+                font-weight: bold;
+                font-size: 20px;
+            }
+
+            > .anticon-close {
+                color: #666;
+                position: absolute;
+                right: 10px;
+                top: 16px;
+                cursor: pointer;
+
+                &:hover {
+                    color: #000;
+                }
+            }
+        }
+
+        .ant-modal-confirm-content {
+            margin: 0 !important;
+            padding: 18px 20px;
+
+            > .footer {
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+
+        .ant-modal-confirm-btns {
+            margin: 0 auto 20px;
+            text-align: center;
+            float: none;
+
+            .ant-btn {
+                min-width: 120px;
+                border-radius: 2px;
+                cursor: pointer;
+                padding: 0;
+                font-size: 14px;
+                line-height: 30px;
+                height: 32px;
+                outline: none;
+                background-color: transparent;
+                border: 1px solid @lib-main-blue;
+                color: @lib-main-blue;
+
+                &:hover {
+                    opacity: 0.82;
+                }
+
+                &:last-child {
+                    background: @lib-main-blue;
+                    color: #fff;
+                    border: 1px solid @lib-main-blue;
+                }
+            }
+        }
+    }
+
+    &.hide-modal-btns {
+        .ant-modal-confirm-btns {
+            display: none;
+        }
+    }
+
+    &.no-padding {
+        .ant-modal-confirm-content {
+            padding: 0;
+        }
+    }
+}

package/src/util/ModalUtil/index.tsx

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

@@ -0,0 +1,42 @@
+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/PromptUtil/PromptBody.tsx

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

@@ -0,0 +1,18 @@
+.g-modal-prompt-body {
+    > .g-form {
+        padding: 0;
+
+        .g-form-item-label {
+            display: none;
+        }
+
+        .g-form-item-children {
+            width: 100%;
+            max-width: initial;
+
+            > .ant-input {
+                width: 100%;
+            }
+        }
+    }
+}

package/src/util/PromptUtil/index.tsx

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

@@ -0,0 +1,46 @@
+/**
+ * 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

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

package/src/util/SwipeUtil.ts

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

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

@@ -0,0 +1,46 @@
+/**
+ * - 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

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

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

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

@@ -0,0 +1,22 @@
+#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;
+        }
+    }
+}