wlw-components 0.0.1

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/cjs/Calendar/Header.d.ts

@@ -0,0 +1,9 @@
+import { Dayjs } from "dayjs";
+interface HeaderProps {
+    curMonth: Dayjs;
+    prevMonthHandler: () => void;
+    nextMonthHandler: () => void;
+    todayHandler: () => void;
+}
+declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/cjs/Calendar/Header.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const LocaleContext_1 = require("./LocaleContext");
+const locale_1 = require("./locale");
+function Header(props) {
+    const { curMonth, prevMonthHandler, nextMonthHandler, todayHandler, } = props;
+    const localeContext = (0, react_1.useContext)(LocaleContext_1.default);
+    const CalendarContext = locale_1.default[localeContext.locale];
+    return (0, jsx_runtime_1.jsx)("div", { className: "calendar-header", children: (0, jsx_runtime_1.jsxs)("div", { className: "calendar-header-left", children: [(0, jsx_runtime_1.jsx)("div", { className: "calendar-header-icon", onClick: prevMonthHandler, children: "<" }), (0, jsx_runtime_1.jsx)("div", { className: "calendar-header-value", children: curMonth.format(CalendarContext.formatMonth) }), (0, jsx_runtime_1.jsx)("div", { className: "calendar-header-icon", onClick: nextMonthHandler, children: ">" }), (0, jsx_runtime_1.jsx)("button", { className: "calendar-header-btn", onClick: todayHandler, children: CalendarContext.today })] }) });
+}
+exports.default = Header;

package/dist/cjs/Calendar/LocaleContext.d.ts

@@ -0,0 +1,5 @@
+export interface LocaleContextType {
+    locale: string;
+}
+declare const LocaleContext: import("react").Context<LocaleContextType>;
+export default LocaleContext;

package/dist/cjs/Calendar/LocaleContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const LocaleContext = (0, react_1.createContext)({
+    locale: 'zh-CN'
+});
+exports.default = LocaleContext;

package/dist/cjs/Calendar/MonthCalendar.d.ts

@@ -0,0 +1,8 @@
+import { CalendarProps } from ".";
+import { Dayjs } from "dayjs";
+interface MonthCalendarProps extends CalendarProps {
+    curMonth: Dayjs;
+    selectHandler?: (date: Dayjs) => void;
+}
+declare function MonthCalendar(props: MonthCalendarProps): import("react/jsx-runtime").JSX.Element;
+export default MonthCalendar;

package/dist/cjs/Calendar/MonthCalendar.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import CalendarLocale from "./locale/en-US";
+const react_1 = require("react");
+const LocaleContext_1 = require("./LocaleContext");
+const locale_1 = require("./locale");
+const classnames_1 = require("classnames");
+function getAllDays(date) {
+    const daysInMonth = date.daysInMonth();
+    const startDate = date.startOf('month');
+    const day = startDate.day();
+    const daysInfo = new Array(6 * 7);
+    for (let i = 0; i < day; i++) {
+        daysInfo[i] = {
+            date: startDate.subtract(day - i, 'day'),
+            currentMonth: false
+        };
+    }
+    for (let i = day; i < daysInfo.length; i++) {
+        const calcDate = startDate.add(i - day, 'day');
+        daysInfo[i] = {
+            date: calcDate,
+            currentMonth: calcDate.month() === date.month()
+        };
+    }
+    // debugger;
+    return daysInfo;
+}
+// function renderDays(
+//   days: Array<{date: Dayjs, currentMonth: boolean}>,
+//   dateRender: MonthCalendarProps['dateRender'],
+//   dateInnerContent: MonthCalendarProps['dateInnerContent'],
+//   value: Dayjs,
+//   selectHandler: MonthCalendarProps['selectHandler']
+// )
+function MonthCalendar(props) {
+    const localeContext = (0, react_1.useContext)(LocaleContext_1.default);
+    const { value, curMonth, dateRender, dateInnerContent, selectHandler, } = props;
+    const CalendarLocale = locale_1.default[localeContext.locale];
+    const weekList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+    const allDays = getAllDays(curMonth);
+    function renderDays(days) {
+        const rows = [];
+        for (let i = 0; i < 6; i++) {
+            const row = [];
+            for (let j = 0; j < 7; j++) {
+                const item = days[i * 7 + j];
+                row[j] = (0, jsx_runtime_1.jsx)("div", { className: "calendar-month-body-cell" + (item.currentMonth ? ' calendar-month-body-cell-current' : ''), onClick: () => selectHandler === null || selectHandler === void 0 ? void 0 : selectHandler(item.date), children: dateRender ? dateRender(item.date) : ((0, jsx_runtime_1.jsxs)("div", { className: "calendar-month-body-cell-date", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("calendar-month-body-cell-date-value", (value === null || value === void 0 ? void 0 : value.format('YYYY-MM-DD')) === item.date.format('YYYY-MM-DD')
+                                    ? "calendar-month-body-cell-date-selected"
+                                    : ""), children: item.date.date() }), (0, jsx_runtime_1.jsx)("div", { className: "calendar-month-body-cell-date-content", children: dateInnerContent === null || dateInnerContent === void 0 ? void 0 : dateInnerContent(item.date) })] })) });
+            }
+            rows.push(row);
+        }
+        return rows.map(row => (0, jsx_runtime_1.jsx)("div", { className: "calendar-month-body-row", children: row }));
+    }
+    return (0, jsx_runtime_1.jsxs)("div", { className: "calendar-month", children: [(0, jsx_runtime_1.jsx)("div", { className: "calendar-month-week-list", children: weekList.map((week) => ((0, jsx_runtime_1.jsx)("div", { className: "calendar-month-week-list-item", children: CalendarLocale.week[week] }, week))) }), (0, jsx_runtime_1.jsx)("div", { className: "calendar-month-body", children: renderDays(allDays) })] });
+}
+exports.default = MonthCalendar;

package/dist/cjs/Calendar/index.css

@@ -0,0 +1,113 @@
+.calendar {
+  width: min(100%, 960px);
+  margin: 24px auto;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
+}
+
+.calendar-header {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.calendar-header-left {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  line-height: 20px;
+}
+.calendar-header-value {
+  font-size: 20px;
+}
+.calendar-header-btn {
+  background: #eee;
+  cursor: pointer;
+  border: 0;
+  padding: 0 15px;
+  line-height: 20px;
+}
+.calendar-header-btn:hover {
+  background: #ccc;
+}
+.calendar-header-icon {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 20px;
+  user-select: none;
+  cursor: pointer;
+  margin-right: 12px;
+}
+.calendar-header-icon:not(:first-child) {
+  margin: 0 12px;
+}
+.calendar-header-icon:hover {
+  background: #ccc;
+}
+
+.calendar-month-week-list {
+  display: flex;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid #eee;
+}
+.calendar-month-week-list-item {
+  padding: 20px 16px;
+  text-align: left;
+  color: #7d7d7f;
+  flex: 1;
+}
+.calendar-month-body-row {
+  height: 70px;
+  display: flex;
+  border-left: 1px solid #eee;
+  border-top: 1px solid #eee;
+}
+.calendar-month-body-cell {
+  flex: 1;
+  font-size: 14px;
+  text-align: left;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  color: #ccc;
+  overflow: hidden;
+  padding: 5px;
+}
+.calendar-month-body-cell-current {
+  color: #000;
+}
+.calendar-month-body-cell-date {
+  padding: 5px;
+}
+.calendar-month-body-cell-date-selected {
+  background: blue;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  text-align: center;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.calendar-month-body-cell-date-content {
+  font-size: 11px;
+  line-height: 16px;
+  color: #6b7280;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 6px;
+  display: inline-block;
+  max-width: 100%;
+  background: #f3f4f6;
+  border-radius: 8px;
+  padding: 0 6px;
+  height: 16px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/cjs/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/cjs/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/cjs/Calendar/index.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import './index.scss';
+const MonthCalendar_1 = require("./MonthCalendar");
+const Header_1 = require("./Header");
+const classnames_1 = require("classnames");
+const LocaleContext_1 = require("./LocaleContext");
+const dayjs_1 = require("dayjs");
+const react_1 = require("react");
+const ahooks_1 = require("ahooks");
+function Calendar(props) {
+    const { value, style, className, locale, onChange } = props;
+    const [curValue, setCurValue] = (0, ahooks_1.useControllableValue)(props, {
+        defaultValue: (0, dayjs_1.default)()
+    });
+    const [curMonth, setCurMonth] = (0, react_1.useState)(curValue);
+    const classNames = (0, classnames_1.default)("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 = (0, dayjs_1.default)(Date.now());
+        changeDate(date);
+    }
+    return (0, jsx_runtime_1.jsx)(LocaleContext_1.default.Provider, { value: {
+            locale: locale || navigator.language
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: classNames, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: 'calendar', children: [(0, jsx_runtime_1.jsx)(Header_1.default, { curMonth: curMonth, prevMonthHandler: prevMonthHandler, nextMonthHandler: nextMonthHandler, todayHandler: todayHandler }), (0, jsx_runtime_1.jsx)(MonthCalendar_1.default, Object.assign({}, props, { value: curValue, curMonth: curMonth, selectHandler: selectHandler }))] }) }) });
+}
+exports.default = Calendar;

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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',
+    },
+};
+exports.default = CalendarLocale;

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const zh_CN_1 = require("./zh-CN");
+const en_US_1 = require("./en-US");
+const allLocales = {
+    'zh-CN': zh_CN_1.default,
+    'en-US': en_US_1.default
+};
+exports.default = allLocales;

package/dist/cjs/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/cjs/Calendar/locale/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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: '周日',
+    }
+};
+exports.default = CalendarLocale;

package/dist/cjs/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/cjs/Message/ConfigProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigContext = void 0;
+exports.ConfigProvider = ConfigProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+exports.ConfigContext = (0, react_1.createContext)({});
+function ConfigProvider(props) {
+    const { children } = props;
+    const messageRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(exports.ConfigContext.Provider, { value: { messageRef }, children: [(0, jsx_runtime_1.jsx)(_1.MessageProvider, { ref: messageRef }), children] }));
+}

package/dist/cjs/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/cjs/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/cjs/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/cjs/Message/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useStore_1 = require("./useStore");
+const react_transition_group_1 = require("react-transition-group");
+const useTimer_1 = require("./useTimer");
+// import './index.scss';
+const react_dom_1 = require("react-dom");
+const MessageItem = (item) => {
+    const { onMouseEnter, onMouseLeave } = (0, useTimer_1.useTimer)({
+        id: item.id,
+        duration: item.duration,
+        remove: item.onClose,
+    });
+    return (0, jsx_runtime_1.jsx)("div", { className: "message-item", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: item.content });
+};
+exports.MessageProvider = (0, react_1.forwardRef)((props, ref) => {
+    const { messageList, add, update, remove, clearAll } = (0, useStore_1.default)('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 = (0, jsx_runtime_1.jsx)("div", { className: "message-wrapper", children: positions.map(direction => {
+            return (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: `message-wrapper-${direction}`, children: messageList[direction].map(item => {
+                    return (0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { timeout: 1000, classNames: 'message', children: (0, jsx_runtime_1.jsx)(MessageItem, Object.assign({ onClose: remove }, item)) }, item.id);
+                }) }, direction);
+        }) });
+    const el = (0, react_1.useMemo)(() => {
+        const el = document.createElement('div');
+        el.className = `wrapper`;
+        document.body.appendChild(el);
+        return el;
+    }, []);
+    return (0, react_dom_1.createPortal)(messageWrapper, el);
+});

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

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

package/dist/cjs/Message/useMessage.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessage = useMessage;
+const react_1 = require("react");
+const ConfigProvider_1 = require("./ConfigProvider");
+function useMessage() {
+    const { messageRef } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    if (!messageRef) {
+        throw new Error('请在最外层添加 ConfigProvider 组件');
+    }
+    debugger;
+    return messageRef.current;
+}