@qsxy/element-plus-react 1.0.0-next.1

package/dist/Message/Main.js

@@ -0,0 +1,68 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Message/Main.tsx
+var Main_exports = {};
+__export(Main_exports, {
+  Main: () => Main,
+  default: () => Main_default
+});
+module.exports = __toCommonJS(Main_exports);
+var import_react = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_Message = __toESM(require("./Message"));
+var Main = class {
+  constructor(props) {
+    this.ref = (0, import_react.createRef)();
+    this.render(props);
+  }
+  render(props) {
+    const renderDom = document.createDocumentFragment();
+    const root = (0, import_client.createRoot)(renderDom);
+    root.render(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_Message.default,
+        {
+          ...props,
+          afterLeave: () => {
+            setTimeout(() => {
+              root.unmount();
+            }, 200);
+          },
+          key: props.id,
+          ref: this.ref
+        }
+      )
+    );
+  }
+};
+var Main_default = Main;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Main
+});

package/dist/Message/Message.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MessageProps, MessageRef } from './typings';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<MessageRef>>>;
+export default _default;

package/dist/Message/Message.js

@@ -0,0 +1,155 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Message/Message.tsx
+var Message_exports = {};
+__export(Message_exports, {
+  default: () => Message_default
+});
+module.exports = __toCommonJS(Message_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_Badge = require("../Badge");
+var import_Transition = require("../Transition");
+var import_Util = require("../Util");
+var import_Constants = require("../config/Constants");
+var import_hooks = require("../hooks");
+var Message = (0, import_react.forwardRef)((props, ref) => {
+  const { classPrefix = "message", center, iconClass, showClose: closable, type, onClose, duration, message, immediate, userOnClose, afterLeave } = props;
+  const { b, e, m, is } = (0, import_hooks.useClassNames)(classPrefix);
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [offset, setOffset] = (0, import_react.useState)(props.offset);
+  const offsetRef = (0, import_react.useRef)(props.offset);
+  const [repeatNum, setReapetNum] = (0, import_react.useState)(1);
+  const repeatNumRef = (0, import_react.useRef)(1);
+  const timer = (0, import_react.useRef)(null);
+  const messageRef = (0, import_react.useRef)(null);
+  const handleClose = (0, import_react.useCallback)(() => {
+    setVisible(false);
+    onClose == null ? void 0 : onClose(messageRef);
+  }, [onClose]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    get el() {
+      return messageRef;
+    },
+    get id() {
+      return props.id;
+    },
+    get top() {
+      return offsetRef.current;
+    },
+    get message() {
+      return props.message;
+    },
+    close: handleClose,
+    setOffset: (val) => {
+      offsetRef.current = val;
+      setOffset(val);
+    },
+    setReapetNum: updateReapetNum
+  }));
+  const startTimer = (0, import_react.useCallback)(() => {
+    if (duration > 0) {
+      timer.current = setTimeout(() => {
+        handleClose();
+      }, duration);
+    }
+  }, [duration, handleClose]);
+  const clearTimer = (0, import_react.useCallback)(() => {
+    clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  const updateReapetNum = (0, import_react.useCallback)(() => {
+    clearTimer();
+    startTimer();
+    repeatNumRef.current = repeatNumRef.current + 1;
+    setReapetNum(repeatNumRef.current);
+    setVisible(true);
+  }, [clearTimer, startTimer]);
+  const keydown = (0, import_react.useCallback)(
+    ({ code }) => {
+      if (code === import_Constants.EVENT_CODE.esc) {
+        if (visible) {
+          handleClose();
+        }
+      } else {
+        startTimer();
+      }
+    },
+    [handleClose, startTimer, visible]
+  );
+  (0, import_react.useEffect)(() => {
+    if (immediate) {
+      userOnClose == null ? void 0 : userOnClose.call(void 0);
+    }
+    setVisible(true);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (visible) {
+      document.addEventListener("keydown", keydown, false);
+      return () => {
+        document.removeEventListener("keydown", keydown, false);
+      };
+    }
+  }, [visible]);
+  const typeClass = (0, import_react.useMemo)(() => {
+    const _type = !iconClass && type;
+    return _type && import_Constants.TypeMap[_type] ? b(`icon-${import_Constants.TypeMap[_type]}`, false) : "";
+  }, [b, iconClass, type]);
+  const closeIcon = (0, import_react.useMemo)(() => closable && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`closeBtn`, b("icon-close", false)), onClick: handleClose }), [closable, e, b, handleClose]);
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { name: b("message-fade", false), visible, display: "flex", unmountOnExit: true, afterEnter: startTimer, afterLeave }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: messageRef,
+        className: (0, import_classnames.default)(b(), { [m(type)]: type && !iconClass }, is({ center, closable }), props.className),
+        style: {
+          ...props == null ? void 0 : props.style,
+          top: offset,
+          zIndex: import_Util.PopupManager.nextZIndex()
+        },
+        onMouseEnter: clearTimer,
+        onMouseLeave: startTimer
+      },
+      repeatNum > 1 && /* @__PURE__ */ import_react.default.createElement(import_Badge.Badge, { value: repeatNum, type: type || "info", className: e`badge` }),
+      (type || iconClass) && /* @__PURE__ */ import_react.default.createElement("i", { className: (0, import_classnames.default)(e`icon`, typeClass, iconClass) }),
+      /* @__PURE__ */ import_react.default.createElement("p", { className: e`content` }, message),
+      closeIcon
+    )),
+    document.body
+  );
+});
+Message.defaultProps = {
+  duration: 3e3,
+  message: "",
+  showClose: true,
+  type: "info",
+  offset: 20
+};
+var Message_default = (0, import_react.memo)(Message);

package/dist/Message/index.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { MessageMethod, MessageQueue } from './typings';
+export declare const instances: MessageQueue;
+export declare const Message: MessageMethod;
+export declare function close(id: string, userOnClose?: (el?: RefObject<HTMLElement>) => void): void;
+export declare function closeAll(): void;
+export type { MessageDispatcher, MessageMethod, MessageProps, MessageType } from './typings';

package/dist/Message/index.js

@@ -0,0 +1,146 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Message/index.ts
+var Message_exports = {};
+__export(Message_exports, {
+  Message: () => Message,
+  close: () => close,
+  closeAll: () => closeAll,
+  instances: () => instances
+});
+module.exports = __toCommonJS(Message_exports);
+var import_react = require("react");
+var import_Util = require("../Util");
+var import_Main = __toESM(require("./Main"));
+var instances = [];
+var seed = 1;
+var Message = function(opts = {}) {
+  var _a, _b;
+  if (typeof opts === "string" || (0, import_react.isValidElement)(opts)) {
+    opts = {
+      message: opts
+    };
+  }
+  if ((0, import_Util.isEmpty)(opts)) {
+    opts = {
+      message: ""
+    };
+  }
+  let options = opts;
+  let verticalOffset = typeof opts !== "string" && !(0, import_react.isValidElement)(opts) ? (opts == null ? void 0 : opts.offset) || 20 : 20;
+  instances.forEach((inst) => {
+    var _a2;
+    verticalOffset += (((_a2 = inst.current.el.current) == null ? void 0 : _a2.offsetHeight) || 52) + 16;
+  });
+  verticalOffset += 16;
+  const id = "message_" + seed++;
+  let userOnClose = options.onClose;
+  if (options.immediate) {
+    userOnClose = null;
+    options.userOnClose = options.onClose;
+  }
+  options = {
+    ...options,
+    onClose: () => {
+      close(id, userOnClose);
+    },
+    offset: verticalOffset,
+    id
+  };
+  if (options.grouping && instances.length) {
+    const instance = instances.find((inst) => inst.current.message === options.message);
+    if (instance.current) {
+      instance.current.setReapetNum();
+      return {
+        close: instance.current.close,
+        el: instance.current.el
+      };
+    }
+  }
+  const { ref } = new import_Main.default(options);
+  instances.push(ref);
+  return {
+    close: (_a = ref.current) == null ? void 0 : _a.close,
+    el: (_b = ref.current) == null ? void 0 : _b.el
+  };
+};
+function close(id, userOnClose) {
+  var _a;
+  const idx = instances.findIndex((inst2) => {
+    return id === inst2.current.id;
+  });
+  if (idx === -1) {
+    return;
+  }
+  const inst = instances[idx];
+  const { el } = inst.current;
+  if (!el) {
+    return;
+  }
+  userOnClose == null ? void 0 : userOnClose(el);
+  const removedHeight = (_a = el.current) == null ? void 0 : _a.offsetHeight;
+  instances.splice(idx, 1);
+  const len = instances.length;
+  if (len < 1) {
+    return;
+  }
+  for (let i = idx; i < len; i++) {
+    const pos = instances[i].current.top - removedHeight - 16;
+    instances[i].current.setOffset(pos);
+  }
+}
+function closeAll() {
+  for (let i = instances.length - 1; i >= 0; i--) {
+    const instance = instances[i].current;
+    instance.close();
+  }
+}
+["success", "warning", "info", "error"].forEach((type) => {
+  Message[type] = (options) => {
+    if (typeof options === "string" || (0, import_react.isValidElement)(options)) {
+      options = {
+        message: options,
+        type
+      };
+    } else {
+      options.type = type;
+    }
+    return Message(options);
+  };
+});
+Object.assign(Message, {
+  closeAll
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Message,
+  close,
+  closeAll,
+  instances
+});

package/dist/Message/typings.d.ts

@@ -0,0 +1,42 @@
+import React, { RefObject } from 'react';
+import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
+export interface MessageHandle {
+    close: () => void;
+    el: RefObject<HTMLElement>;
+}
+export interface MessageProps extends BaseProps, NativeProps, AnimationEventProps {
+    id?: string;
+    center?: boolean;
+    duration?: number;
+    iconClass?: string;
+    message?: string | React.ReactElement;
+    offset?: number;
+    onClose?: (el?: RefObject<HTMLElement>) => void;
+    showClose?: boolean;
+    type?: 'success' | 'warning' | 'info' | 'error' | '';
+    immediate?: boolean;
+    grouping?: boolean;
+    userOnClose?: (el?: RefObject<HTMLElement>) => void;
+}
+export type MessageType = 'success' | 'warning' | 'info' | 'error' | '';
+export type MessageDispatcher = (options?: MessageProps | string | React.ReactElement) => MessageHandle;
+export type MessageParams = MessageProps | string | React.ReactElement;
+export type TypedMessageParams = Omit<MessageProps, 'type'> | string | React.ReactElement;
+export interface MessageMethod {
+    (options?: MessageParams): MessageHandle;
+    success: (options?: TypedMessageParams) => MessageHandle;
+    warning: (options?: TypedMessageParams) => MessageHandle;
+    info: (options?: TypedMessageParams) => MessageHandle;
+    error: (options?: TypedMessageParams) => MessageHandle;
+    closeAll: () => void;
+}
+export interface MessageRef {
+    id: string;
+    el: RefObject<HTMLElement>;
+    top: number;
+    message: string | React.ReactElement;
+    close: () => void;
+    setOffset: (val: number) => void;
+    setReapetNum: () => void;
+}
+export type MessageQueue = Array<RefObject<MessageRef>>;

package/dist/Message/typings.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Message/typings.ts
+var typings_exports = {};
+module.exports = __toCommonJS(typings_exports);

package/dist/MessageBox/Main.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { MessageBoxRef, MessageState } from './typings';
+export declare class Main {
+    ref: RefObject<MessageBoxRef>;
+    constructor(props: MessageState);
+    render({ options, ...other }: MessageState): void;
+}
+export default Main;

package/dist/MessageBox/Main.js

@@ -0,0 +1,68 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/MessageBox/Main.tsx
+var Main_exports = {};
+__export(Main_exports, {
+  Main: () => Main,
+  default: () => Main_default
+});
+module.exports = __toCommonJS(Main_exports);
+var import_react = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_MessageBox = __toESM(require("./MessageBox"));
+var Main = class {
+  constructor(props) {
+    this.ref = (0, import_react.createRef)();
+    this.render(props);
+  }
+  render({ options, ...other }) {
+    const renderDom = document.createDocumentFragment();
+    const root = (0, import_client.createRoot)(renderDom);
+    root.render(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_MessageBox.default,
+        {
+          options: {
+            ...options,
+            afterLeave: () => {
+              root.unmount();
+            }
+          },
+          ...other,
+          ref: this.ref
+        }
+      )
+    );
+  }
+};
+var Main_default = Main;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Main
+});

package/dist/MessageBox/MessageBox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MessageBoxRef, MessageState } from './typings';
+declare const MessageBox: React.ForwardRefExoticComponent<MessageState & React.RefAttributes<MessageBoxRef>>;
+export default MessageBox;