@laser-ui/components 0.0.1

package/resources.json

@@ -0,0 +1,128 @@
+{
+    "en-US": {
+        "Common": {
+            "Loading": "Loading",
+            "Search": "Search",
+            "Add": "Add",
+            "Close": "Close",
+            "Create": "Create",
+            "Clear": "Clear",
+            "More": "More",
+            "No Data": "No Data"
+        },
+        "Footer": {
+            "Cancel": "Cancel",
+            "OK": "OK"
+        },
+        "Input": {
+            "Password is visible": "Password is visible",
+            "Password is not visible": "Password is not visible",
+            "Increase number": "Increase number",
+            "Decrease number": "Decrease number"
+        },
+        "Pagination": {
+            "Total": "Total",
+            "items": "items",
+            "Go": "Go",
+            "Page": "Page",
+            "5 pages forward": "5 pages forward",
+            "5 pages backward": "5 pages backward",
+            "Previous page": "Previous page",
+            "Next page": "Next page",
+            " / Page": " / Page"
+        },
+        "Form": {
+            "Optional": "(optional)"
+        },
+        "TimePicker": {
+            "Select time": "Select time",
+            "Start time": "Start time",
+            "End time": "End time",
+            "Now": "Now"
+        },
+        "DatePicker": {
+            "Select date": "Select date",
+            "Start date": "Start date",
+            "End date": "End date",
+            "Today": "Today",
+            "Now": "Now",
+            "Previous year": "Previous year",
+            "Next year": "Next year",
+            "Previous month": "Previous month",
+            "Next month": "Next month"
+        },
+        "Upload": {
+            "Preview file": "Preview file",
+            "Download file": "Download file",
+            "Remove file": "Remove file",
+            "Upload": "Upload",
+            "Uploading": "Uploading..."
+        },
+        "Table": {
+            "Reset": "Reset"
+        }
+    },
+    "zh-CN": {
+        "Common": {
+            "Loading": "加载中",
+            "Search": "搜索",
+            "Add": "新增",
+            "Close": "关闭",
+            "Create": "创建",
+            "Clear": "清除",
+            "More": "更多",
+            "No Data": "无数据"
+        },
+        "Footer": {
+            "Cancel": "取 消",
+            "OK": "确 定"
+        },
+        "Input": {
+            "Password is visible": "密码可见",
+            "Password is not visible": "密码不可见",
+            "Increase number": "数字加",
+            "Decrease number": "数字减"
+        },
+        "Pagination": {
+            "Total": "共",
+            "items": "项",
+            "Go": "至",
+            "Page": "页",
+            "5 pages forward": "向前 5 页",
+            "5 pages backward": "向后 5 页",
+            "Previous page": "上一页",
+            "Next page": "下一页",
+            " / Page": "条/页"
+        },
+        "Form": {
+            "Optional": "(可选)"
+        },
+        "TimePicker": {
+            "Select time": "请选择时间",
+            "Start time": "开始时间",
+            "End time": "结束时间",
+            "Now": "此刻"
+        },
+        "DatePicker": {
+            "Select date": "请选择日期",
+            "Start date": "开始日期",
+            "End date": "结束日期",
+            "Today": "今天",
+            "Now": "此刻",
+            "Previous year": "上一年",
+            "Next year": "下一年",
+            "Previous month": "上月",
+            "Next month": "下月"
+        },
+        "Upload": {
+            "Preview file": "预览文件",
+            "Download file": "下载文件",
+            "Remove file": "移除文件",
+            "Upload": "上传",
+            "Uploading": "上传中..."
+        },
+        "Table": {
+            "Reset": "重置"
+        }
+    }
+}

package/root/Root.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RootProps } from './types';
+export declare function Root(props: RootProps): JSX.Element | null;

package/root/Root.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEvent, useRefExtra } from '@laser-ui/hooks';
+import { isString, set } from 'lodash';
+import { useStore } from 'rcl-store';
+import { createElement, useEffect, useMemo, useRef } from 'react';
+import { ROOT_DATA, RootContext, Store } from './vars';
+import dayjs from '../dayjs';
+import { Portal } from '../internal/portal';
+import resources from '../resources.json';
+export function Root(props) {
+    const { context: contextProp, children } = props;
+    const windowRef = useRefExtra(() => window);
+    const windowSizeRef = useRef(null);
+    const [{ dialogs }] = useStore(Store, ['dialogs']);
+    useEvent(windowRef, 'click', (e) => {
+        // Check if click by keydown
+        if (!(e.clientX === 0 && e.clientY === 0)) {
+            const rect = e.target instanceof Element ? e.target.getBoundingClientRect() : null;
+            if (rect) {
+                ROOT_DATA.clickEvent = {
+                    time: performance.now(),
+                    x: e.offsetX + rect.x,
+                    y: e.offsetX + rect.y,
+                };
+            }
+        }
+    }, { capture: true });
+    useEffect(() => {
+        if (windowSizeRef.current) {
+            const observer = new ResizeObserver(() => {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                ROOT_DATA.windowSize = { width: windowSizeRef.current.clientWidth, height: windowSizeRef.current.clientHeight };
+            });
+            observer.observe(windowSizeRef.current);
+            return () => {
+                observer.disconnect();
+            };
+        }
+    });
+    const context = useMemo(() => {
+        var _a, _b;
+        const { i18n } = contextProp !== null && contextProp !== void 0 ? contextProp : {};
+        const i18nLang = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.lang) !== null && _a !== void 0 ? _a : 'en-US';
+        const i18nResources = JSON.parse(JSON.stringify(resources));
+        const mergeResources = (path, value) => {
+            if (isString(value)) {
+                set(i18nResources, path, value);
+            }
+            else {
+                Object.entries(value).forEach(([k, v]) => {
+                    mergeResources(path.concat(k), v);
+                });
+            }
+        };
+        mergeResources([], (_b = i18n === null || i18n === void 0 ? void 0 : i18n.resources) !== null && _b !== void 0 ? _b : {});
+        return {
+            i18nLang,
+            i18nResources,
+        };
+    }, [contextProp]);
+    switch (context.i18nLang) {
+        case 'en-US':
+            dayjs.locale('en');
+            break;
+        case 'zh-CN':
+            dayjs.locale('zh-cn');
+            dayjs.updateLocale('zh-cn', {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                meridiem: (hour, minute, isLowercase) => {
+                    return hour > 12 ? 'PM' : 'AM';
+                },
+            });
+            break;
+        default:
+            break;
+    }
+    return (_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ type, key, props }) => createElement(type, Object.assign({ key }, props))), _jsx(Portal, { selector: () => document.body, children: _jsx("div", { ref: windowSizeRef, style: {
+                        position: 'fixed',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0,
+                        pointerEvents: 'none',
+                    } }) })] }));
+}

package/root/dialog-service.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface DialogInstance<P extends object> {
+    key: string | number;
+    close: () => void;
+    rerender: (props: P) => void;
+}
+export declare class DialogService {
+    static open<P extends object>(type: React.FC<P>, props: Omit<P, 'visible'>, key?: string | number): DialogInstance<P>;
+    static close(key: string | number): void;
+    static rerender(key: string | number, type: any, props: any): void;
+    static closeAll(animation?: boolean): void;
+}

package/root/dialog-service.js

@@ -0,0 +1,62 @@
+import { Store } from './vars';
+let _key = 0;
+export class DialogService {
+    static open(type, props, key) {
+        const dialogKey = key !== null && key !== void 0 ? key : ++_key;
+        Store.set('dialogs', (draft) => {
+            draft.push({
+                key: dialogKey,
+                type,
+                props: Object.assign(Object.assign({}, props), { visible: true, skipFirstTransition: false, afterVisibleChange: (visible) => {
+                        var _a, _b;
+                        (_b = (_a = props).afterVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, visible);
+                        if (!visible) {
+                            const index = Store.get('dialogs').findIndex((dialog) => dialog.key === dialogKey);
+                            if (index !== -1) {
+                                Store.set('dialogs', (draft) => {
+                                    draft.splice(index, 1);
+                                });
+                            }
+                        }
+                    } }),
+            });
+        });
+        return {
+            key: dialogKey,
+            close: () => {
+                DialogService.close(dialogKey);
+            },
+            rerender: (props) => {
+                DialogService.rerender(dialogKey, type, props);
+            },
+        };
+    }
+    static close(key) {
+        const index = Store.get('dialogs').findIndex((dialog) => dialog.key === key);
+        if (index !== -1) {
+            Store.set('dialogs', (draft) => {
+                draft[index].props.visible = false;
+            });
+        }
+    }
+    static rerender(key, type, props) {
+        const index = Store.get('dialogs').findIndex((dialog) => dialog.key === key);
+        if (index !== -1) {
+            Store.set('dialogs', (draft) => {
+                draft.splice(index, 1, { key, type, props: Object.assign(draft[index].props, props) });
+            });
+        }
+    }
+    static closeAll(animation = true) {
+        if (animation) {
+            Store.set('dialogs', (draft) => {
+                draft.forEach((dialog) => {
+                    dialog.props.visible = false;
+                });
+            });
+        }
+        else {
+            Store.set('dialogs', []);
+        }
+    }
+}

package/root/index.d.ts

@@ -0,0 +1,3 @@
+export type { RootProps } from './types';
+export { Root } from './Root';
+export { DialogService } from './dialog-service';

package/root/index.js

@@ -0,0 +1,2 @@
+export { Root } from './Root';
+export { DialogService } from './dialog-service';

package/root/types.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type resources from '../resources.json';
+import type { Lang } from '../types';
+export {};
+type PartialContext<T extends object> = {
+    [K in keyof T]?: T[K] extends object ? PartialContext<T[K]> : T[K];
+};
+export interface RootProps {
+    context?: {
+        i18n?: {
+            lang?: Lang;
+            resources?: PartialContext<typeof resources>;
+        };
+    };
+    children?: React.ReactNode;
+}

package/root/types.js

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

package/root/vars.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import type { Lang } from '../types';
+import resources from '../resources.json';
+export declare const Store: import("rcl-store").Store<{
+    dialogs: {
+        type: any;
+        key: string | number;
+        props: any;
+    }[];
+}, "dialogs">;
+export declare const ROOT_DATA: {
+    clickEvent?: {
+        time: number;
+        x: number;
+        y: number;
+    };
+    windowSize: {
+        width: number;
+        height: number;
+    };
+};
+export declare const RootContext: import("react").Context<{
+    i18nLang: Lang;
+    i18nResources: typeof resources;
+}>;

package/root/vars.js

@@ -0,0 +1,13 @@
+import { createStore } from 'rcl-store';
+import { createContext } from 'react';
+import resources from '../resources.json';
+export const Store = createStore({
+    dialogs: [],
+});
+export const ROOT_DATA = {
+    windowSize: typeof window !== 'undefined' ? { width: window.innerWidth, height: window.innerHeight } : { width: 0, height: 0 },
+};
+export const RootContext = createContext({
+    i18nLang: 'en-US',
+    i18nResources: resources,
+});

package/select/Select.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { SelectItem, SelectProps, SelectRef } from './types';
+declare function SelectFC<V extends React.Key, T extends SelectItem<V>>(props: SelectProps<V, T>, ref: React.ForwardedRef<SelectRef>): JSX.Element | null;
+export declare const Select: <V extends React.Key, T extends SelectItem<V>>(props: SelectProps<V, T> & React.RefAttributes<SelectRef>) => ReturnType<typeof SelectFC>;
+export {};