wlw-components 0.0.1

package/dist/esm/Calendar/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/Calendar/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;;;AAIF;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AACA;EACI;;AAGJ;EACI;;;AAMR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}

package/dist/esm/Calendar/index.d.ts

@@ -0,0 +1,14 @@
+import { Dayjs } from 'dayjs';
+import type { CSSProperties, ReactNode } from 'react';
+export interface CalendarProps {
+    value?: Dayjs;
+    defaultValue?: Dayjs;
+    style?: CSSProperties;
+    className?: string | string[];
+    dateRender?: (currentDate: Dayjs) => ReactNode;
+    dateInnerContent?: (currentDate: Dayjs) => ReactNode;
+    locale?: string;
+    onChange?: (date: Dayjs) => void;
+}
+declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export default Calendar;

package/dist/esm/Calendar/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import './index.scss';
+import MonthCalendar from './MonthCalendar';
+import Header from './Header';
+import cs from 'classnames';
+import LocaleContext from './LocaleContext';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { useControllableValue } from 'ahooks';
+function Calendar(props) {
+    const { value, style, className, locale, onChange } = props;
+    const [curValue, setCurValue] = useControllableValue(props, {
+        defaultValue: dayjs()
+    });
+    const [curMonth, setCurMonth] = useState(curValue);
+    const classNames = cs("calendar", className);
+    function changeDate(date) {
+        setCurValue(date);
+        setCurMonth(date);
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+    }
+    function selectHandler(date) {
+        changeDate(date);
+    }
+    function prevMonthHandler() {
+        setCurMonth(curMonth.subtract(1, 'month'));
+    }
+    function nextMonthHandler() {
+        setCurMonth(curMonth.add(1, 'month'));
+    }
+    function todayHandler() {
+        const date = dayjs(Date.now());
+        changeDate(date);
+    }
+    return _jsx(LocaleContext.Provider, { value: {
+            locale: locale || navigator.language
+        }, children: _jsx("div", { className: classNames, style: style, children: _jsxs("div", { className: 'calendar', children: [_jsx(Header, { curMonth: curMonth, prevMonthHandler: prevMonthHandler, nextMonthHandler: nextMonthHandler, todayHandler: todayHandler }), _jsx(MonthCalendar, Object.assign({}, props, { value: curValue, curMonth: curMonth, selectHandler: selectHandler }))] }) }) });
+}
+export default Calendar;

package/dist/esm/Calendar/locale/en-US.d.ts

@@ -0,0 +1,3 @@
+import { CalendarType } from "./interface";
+declare const CalendarLocale: CalendarType;
+export default CalendarLocale;

package/dist/esm/Calendar/locale/en-US.js

@@ -0,0 +1,29 @@
+const CalendarLocale = {
+    formatYear: 'YYYY',
+    formatMonth: 'MMM YYYY',
+    today: 'Today',
+    month: {
+        January: 'January',
+        February: 'February',
+        March: 'March',
+        April: 'April',
+        May: 'May',
+        June: 'June',
+        July: 'July',
+        August: 'August',
+        September: 'September',
+        October: 'October',
+        November: 'November',
+        December: 'December',
+    },
+    week: {
+        monday: 'Monday',
+        tuesday: 'Tuesday',
+        wednesday: 'Wednesday',
+        thursday: 'Thursday',
+        friday: 'Friday',
+        saturday: 'Saturday',
+        sunday: 'Sunday',
+    },
+};
+export default CalendarLocale;

package/dist/esm/Calendar/locale/index.d.ts

@@ -0,0 +1,3 @@
+import { CalendarType } from "./interface";
+declare const allLocales: Record<string, CalendarType>;
+export default allLocales;

package/dist/esm/Calendar/locale/index.js

@@ -0,0 +1,7 @@
+import zhCN from "./zh-CN";
+import enUS from "./en-US";
+const allLocales = {
+    'zh-CN': zhCN,
+    'en-US': enUS
+};
+export default allLocales;

package/dist/esm/Calendar/locale/interface.d.ts

@@ -0,0 +1,28 @@
+export interface CalendarType {
+    formatYear: string;
+    formatMonth: string;
+    today: string;
+    month: {
+        January: string;
+        February: string;
+        March: string;
+        April: string;
+        May: string;
+        June: string;
+        July: string;
+        August: string;
+        September: string;
+        October: string;
+        November: string;
+        December: string;
+    } & Record<string, any>;
+    week: {
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        sunday: string;
+    } & Record<string, any>;
+}

package/dist/esm/Calendar/locale/interface.js

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

package/dist/esm/Calendar/locale/zh-CN.d.ts

@@ -0,0 +1,3 @@
+import { CalendarType } from "./interface";
+declare const CalendarLocale: CalendarType;
+export default CalendarLocale;

package/dist/esm/Calendar/locale/zh-CN.js

@@ -0,0 +1,29 @@
+const CalendarLocale = {
+    formatYear: 'YYYY 年',
+    formatMonth: 'YYYY 年 MM 月',
+    today: '今天',
+    month: {
+        January: '一月',
+        February: '二月',
+        March: '三月',
+        April: '四月',
+        May: '五月',
+        June: '六月',
+        July: '七月',
+        August: '八月',
+        September: '九月',
+        October: '十月',
+        November: '十一月',
+        December: '十二月',
+    },
+    week: {
+        monday: '周一',
+        tuesday: '周二',
+        wednesday: '周三',
+        thursday: '周四',
+        friday: '周五',
+        saturday: '周六',
+        sunday: '周日',
+    }
+};
+export default CalendarLocale;

package/dist/esm/Message/ConfigProvider.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren, RefObject } from "react";
+import { MessageRef } from ".";
+interface ConfigProviderProps {
+    messageRef?: RefObject<MessageRef | null>;
+}
+export declare const ConfigContext: import("react").Context<ConfigProviderProps>;
+export declare function ConfigProvider(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/Message/ConfigProvider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useRef } from "react";
+import { MessageProvider } from ".";
+export const ConfigContext = createContext({});
+export function ConfigProvider(props) {
+    const { children } = props;
+    const messageRef = useRef(null);
+    return (_jsxs(ConfigContext.Provider, { value: { messageRef }, children: [_jsx(MessageProvider, { ref: messageRef }), children] }));
+}

package/dist/esm/Message/index.css

@@ -0,0 +1,50 @@
+.message-enter {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
+.message-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity, transform 1s ease;
+}
+
+.message-exit {
+  opacity: 1;
+}
+
+.message-exit-active {
+  opacity: 0;
+  transition: opacity 1s ease;
+}
+
+.message-wrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+.message-wrapper-top {
+  position: absolute;
+  top: 20px;
+}
+.message-wrapper-bottom {
+  position: absolute;
+  bottom: 20px;
+}
+
+.message-item {
+  margin-bottom: 12px;
+  padding: 10px 16px;
+  line-height: 14px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 3px #ccc;
+  pointer-events: all;
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/esm/Message/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/Message/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EAEA;EACA;EACA;EAEA;EACA;EAEA","file":"index.css"}

package/dist/esm/Message/index.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from "react";
+export type Position = 'top' | 'bottom';
+export interface MessageProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    content: ReactNode | string;
+    duration?: number;
+    onClose?: (...args: any) => void;
+    id?: number;
+    position?: Position;
+}
+export interface MessageRef {
+    add: (messageProps: MessageProps) => number;
+    remove: (id: number) => void;
+    update: (id: number, messageProps: MessageProps) => void;
+    clearAll: () => void;
+}
+export declare const MessageProvider: import("react").ForwardRefExoticComponent<import("react").RefAttributes<MessageRef>>;

package/dist/esm/Message/index.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, forwardRef } from "react";
+import useStore from "./useStore";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useTimer } from "./useTimer";
+// import './index.scss';
+import { createPortal } from "react-dom";
+const MessageItem = (item) => {
+    const { onMouseEnter, onMouseLeave } = useTimer({
+        id: item.id,
+        duration: item.duration,
+        remove: item.onClose,
+    });
+    return _jsx("div", { className: "message-item", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: item.content });
+};
+export const MessageProvider = forwardRef((props, ref) => {
+    const { messageList, add, update, remove, clearAll } = useStore('top');
+    // useEffect(() => {
+    //   setInterval(() => {
+    //     add({
+    //       content: Math.random().toString().slice(2, 8)
+    //     })
+    //   }, 2000);
+    // }, []);
+    if ('current' in ref) {
+        ref.current = {
+            add,
+            update,
+            remove,
+            clearAll
+        };
+    }
+    // useImperativeHandle(ref, () => {
+    //       debugger;
+    //       return {
+    //           add,
+    //           update,
+    //           remove,
+    //           clearAll
+    //       }
+    //   }, []);
+    const positions = Object.keys(messageList);
+    const messageWrapper = _jsx("div", { className: "message-wrapper", children: positions.map(direction => {
+            return _jsx(TransitionGroup, { className: `message-wrapper-${direction}`, children: messageList[direction].map(item => {
+                    return _jsx(CSSTransition, { timeout: 1000, classNames: 'message', children: _jsx(MessageItem, Object.assign({ onClose: remove }, item)) }, item.id);
+                }) }, direction);
+        }) });
+    const el = useMemo(() => {
+        const el = document.createElement('div');
+        el.className = `wrapper`;
+        document.body.appendChild(el);
+        return el;
+    }, []);
+    return createPortal(messageWrapper, el);
+});

package/dist/esm/Message/useMessage.d.ts

@@ -0,0 +1,2 @@
+import { MessageRef } from '.';
+export declare function useMessage(): MessageRef;

package/dist/esm/Message/useMessage.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ConfigContext } from './ConfigProvider';
+export function useMessage() {
+    const { messageRef } = useContext(ConfigContext);
+    if (!messageRef) {
+        throw new Error('请在最外层添加 ConfigProvider 组件');
+    }
+    debugger;
+    return messageRef.current;
+}

package/dist/esm/Message/useStore.d.ts

@@ -0,0 +1,19 @@
+import { MessageProps, Position } from '.';
+export type MessageList = {
+    top: MessageProps[];
+    bottom: MessageProps[];
+};
+declare function useStore(defaultPosition: Position): {
+    messageList: MessageList;
+    add: (messageProps: MessageProps) => number;
+    update: (id: number, messageProps: MessageProps) => void;
+    remove: (id: number) => void;
+    clearAll: () => void;
+};
+export declare function getId(messageProps: MessageProps): number;
+export declare function getMessagePosition(messageList: MessageList, id: number): Position | undefined;
+export declare function findMessage(messageList: MessageList, id: number): {
+    position: Position | undefined;
+    index: number;
+};
+export default useStore;

package/dist/esm/Message/useStore.js

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+const initialState = {
+    top: [],
+    bottom: []
+};
+function useStore(defaultPosition) {
+    const [messageList, setMessageList] = useState(Object.assign({}, initialState));
+    return {
+        messageList,
+        add: (messageProps) => {
+            const id = getId(messageProps);
+            setMessageList((preState) => {
+                var _a, _b;
+                if (messageProps === null || messageProps === void 0 ? void 0 : messageProps.id) {
+                    const position = getMessagePosition(preState, messageProps.id);
+                    if (position)
+                        return preState;
+                }
+                const position = messageProps.position || defaultPosition;
+                const isTop = position.includes('top');
+                const messages = isTop
+                    ? [Object.assign(Object.assign({}, messageProps), { id }), ...((_a = preState[position]) !== null && _a !== void 0 ? _a : [])]
+                    : [...((_b = preState[position]) !== null && _b !== void 0 ? _b : []), Object.assign(Object.assign({}, messageProps), { id })];
+                return Object.assign(Object.assign({}, preState), { [position]: messages });
+            });
+            return id;
+        },
+        update: (id, messageProps) => {
+            if (!id)
+                return;
+            setMessageList((preState) => {
+                const nextState = Object.assign({}, preState);
+                const { position, index } = findMessage(nextState, id);
+                if (position && index !== -1) {
+                    nextState[position][index] = Object.assign(Object.assign({}, nextState[position][index]), messageProps);
+                }
+                return nextState;
+            });
+        },
+        remove: (id) => {
+            setMessageList((prevState) => {
+                const position = getMessagePosition(prevState, id);
+                if (!position)
+                    return prevState;
+                return Object.assign(Object.assign({}, prevState), { [position]: prevState[position].filter((notice) => notice.id !== id) });
+            });
+        },
+        clearAll: () => {
+            setMessageList(Object.assign({}, initialState));
+        },
+    };
+}
+let count = 1;
+export function getId(messageProps) {
+    if (messageProps.id) {
+        return messageProps.id;
+    }
+    count += 1;
+    return count;
+}
+export function getMessagePosition(messageList, id) {
+    for (const [position, list] of Object.entries(messageList)) {
+        if (list.find((item) => item.id === id)) {
+            return position;
+        }
+    }
+}
+export function findMessage(messageList, id) {
+    const position = getMessagePosition(messageList, id);
+    const index = position ? messageList[position].findIndex((message) => message.id === id) : -1;
+    return {
+        position,
+        index,
+    };
+}
+export default useStore;

package/dist/esm/Message/useTimer.d.ts

@@ -0,0 +1,9 @@
+export interface UseTimerProps {
+    id: number;
+    duration?: number;
+    remove: (id: number) => void;
+}
+export declare function useTimer(props: UseTimerProps): {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+};

package/dist/esm/Message/useTimer.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+export function useTimer(props) {
+    const { remove, id, duration = 2000 } = props;
+    const timer = useRef(null);
+    const startTimer = () => {
+        timer.current = window.setTimeout(() => {
+            remove(id);
+            removeTimer();
+        }, duration);
+    };
+    const removeTimer = () => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+    useEffect(() => {
+        startTimer();
+        return () => removeTimer();
+    }, []);
+    const onMouseEnter = () => {
+        removeTimer();
+    };
+    const onMouseLeave = () => {
+        startTimer();
+    };
+    return {
+        onMouseEnter,
+        onMouseLeave,
+    };
+}

package/dist/esm/Watermark/index.d.ts

@@ -0,0 +1,22 @@
+import type { PropsWithChildren, CSSProperties, FC } from 'react';
+export interface WatermarkProps extends PropsWithChildren {
+    style?: CSSProperties;
+    className?: string;
+    zIndex?: string | number;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    image?: string;
+    content?: string | string[];
+    fontStyle?: {
+        color?: string;
+        fontFamily?: string;
+        fontSize?: number | string;
+        fontWeight?: number | string;
+    };
+    gap?: [number, number];
+    offset?: [number, number];
+    getContainer?: () => HTMLElement;
+}
+declare const Watermark: FC<WatermarkProps>;
+export default Watermark;

package/dist/esm/Watermark/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useCallback, useEffect } from 'react';
+import useWatermark from './useWatermark';
+const Watermark = (props) => {
+    const { className, style, zIndex, width, height, rotate, image, content, fontStyle, gap, offset } = props;
+    const containerRef = useRef(null);
+    const getContainer = useCallback(() => {
+        return props.getContainer ? props.getContainer() : containerRef.current;
+    }, [containerRef.current, props.getContainer]);
+    const { generateWatermark } = useWatermark({
+        zIndex,
+        width,
+        height,
+        rotate,
+        image,
+        content,
+        fontStyle,
+        gap,
+        offset,
+        getContainer,
+    });
+    useEffect(() => {
+        generateWatermark({
+            zIndex,
+            width,
+            height,
+            rotate,
+            image,
+            content,
+            fontStyle,
+            gap,
+            offset,
+            getContainer,
+        });
+    }, [
+        zIndex,
+        width,
+        height,
+        rotate,
+        image,
+        content,
+        JSON.stringify(props.fontStyle),
+        JSON.stringify(props.gap),
+        JSON.stringify(props.offset),
+        getContainer,
+    ]);
+    return props.children ? (_jsx("div", { className: className, style: style, ref: containerRef, children: props.children })) : null;
+};
+export default Watermark;

package/dist/esm/Watermark/useWatermark.d.ts

@@ -0,0 +1,7 @@
+import type { WatermarkProps } from '.';
+export type WatermarkOptions = Omit<WatermarkProps, 'className' | 'style' | 'children'>;
+export declare function isNumber(obj: any): obj is number;
+export default function useWatermark(params: WatermarkOptions): {
+    generateWatermark: (newOptions: Partial<WatermarkOptions>) => void;
+    destroy: () => void;
+};