@kengic/core.react 0.0.1-beta.36 → 0.0.1-beta.37

package/kengic-core.react.js

@@ -45842,10 +45842,12 @@ function rre(e) {
   }, [t, r, i]);
 }
 function are(e) {
-  const { props: t, getProps: r, domRef: i } = e, { width: l, height: c } = rj(document.documentElement) ?? { width: 0, height: 0 }, f = 48, p = 400;
-  let m = null, g = null, b = null, E = null, w = null, O = null, M = t.width !== void 0 ? t.width : "80%";
-  const P = Math.min(r.kgMinWidth ?? p, l), R = Math.min(r.kgMaxWidth ?? l, l), A = Math.min(r.kgMaxHeight ?? c, c);
-  let D = 0, k = 0, F = 0, L = 0, z = 0, H = {
+  const { getProps: t, domRef: r } = e, { width: i, height: l } = rj(document.documentElement) ?? { width: 0, height: 0 }, c = 48, f = 400;
+  let p = null, m = null, g = null;
+  const [b, E] = C.useState(null);
+  let w = null, O = null;
+  const M = Math.min(t.kgMinWidth ?? f, i), P = Math.min(t.kgMaxWidth ?? i, i), R = Math.min(t.kgMaxHeight ?? l, l), [A, D] = C.useState(0);
+  let k = 0, F = 0, L = 0, z = 0, H = {
     remove: () => {
     }
   }, K = {
@@ -45861,30 +45863,30 @@ function are(e) {
     H.remove(), K.remove();
   }
   function te(U) {
-    if (!b) {
+    if (!g) {
       Op("弹窗元素为空.");
       return;
     }
     const { event: W } = U ?? {}, ne = W.pageX;
-    let Y = Math.min(R, Math.max(P, k + ne - L));
-    b.offsetLeft + Y > l && (Y = l - b.offsetLeft);
-    const V = b.offsetWidth, ve = Number(getComputedStyle(b).left.replace(/px/g, "")) + (Y - V) / 2;
-    Y !== V && (M = `${Y}px`, b.style.width = `${Y}px`, b.style.left = `${ve}px`);
+    let Y = Math.min(P, Math.max(M, k + ne - L));
+    g.offsetLeft + Y > i && (Y = i - g.offsetLeft);
+    const V = g.offsetWidth, ve = Number(getComputedStyle(g).left.replace(/px/g, "")) + (Y - V) / 2;
+    Y !== V && (g.style.width = `${Y}px`, g.style.left = `${ve}px`);
   }
   function le(U) {
-    if (!b) {
+    if (!g) {
       Op("弹窗元素为空.");
       return;
     }
-    const { event: W } = U ?? {}, ne = W.pageY, Y = (w == null ? void 0 : w.clientHeight) ?? f, V = (O == null ? void 0 : O.clientHeight) ?? 0, ae = Math.min((r == null ? void 0 : r.kgMinHeight) ?? Y + V + rR * 2, c);
-    let ve = Math.min(A, Math.max(ae, F + ne - z));
-    b.offsetTop + ve > c && (ve = c - b.offsetTop);
-    const de = b.offsetHeight, ke = Number(getComputedStyle(b).top.replace(/px/g, "")) + (ve - de) / 2;
-    ve !== de && (b.style.height = `${ve}px`, b.style.top = `${ke}px`);
+    const { event: W } = U ?? {}, ne = W.pageY, Y = (w == null ? void 0 : w.clientHeight) ?? c, V = (O == null ? void 0 : O.clientHeight) ?? 0, ae = Math.min((t == null ? void 0 : t.kgMinHeight) ?? Y + V + rR * 2, l);
+    let ve = Math.min(R, Math.max(ae, F + ne - z));
+    g.offsetTop + ve > l && (ve = l - g.offsetTop);
+    const de = g.offsetHeight, ke = Number(getComputedStyle(g).top.replace(/px/g, "")) + (ve - de) / 2;
+    ve !== de && (g.style.height = `${ve}px`, g.style.top = `${ke}px`);
   }
   function J(U) {
     const { event: W, handleType: ne } = U ?? {};
-    if (!b) {
+    if (!g) {
       Op("弹窗元素为空.");
       return;
     }
@@ -45912,11 +45914,11 @@ function are(e) {
   function Q(U) {
     const { event: W, handleType: ne } = U ?? {};
     if (W.stopPropagation(), W.preventDefault(), Z(), !(W instanceof MouseEvent && W.which !== 1)) {
-      if (!b) {
+      if (!g) {
         Op("弹窗元素为空.");
         return;
       }
-      L = W.pageX, z = W.pageY, k = b.offsetWidth, F = b.offsetHeight, Number(getComputedStyle(b).top.replace(/px/g, "")), H = q(document.documentElement, "mousemove", (Y) => me({ event: Y, handleType: ne })), K = q(document.documentElement, "mouseup", (Y) => ie({ event: Y, handleType: ne }));
+      L = W.pageX, z = W.pageY, k = g.offsetWidth, F = g.offsetHeight, Number(getComputedStyle(g).top.replace(/px/g, "")), H = q(document.documentElement, "mousemove", (Y) => me({ event: Y, handleType: ne })), K = q(document.documentElement, "mouseup", (Y) => ie({ event: Y, handleType: ne }));
     }
   }
   function me(U) {
@@ -45925,48 +45927,34 @@ function are(e) {
   function ie(U) {
     J(U), Z();
   }
-  return C.useEffect(() => {
+  C.useEffect(() => {
     var nt, _e, Ke, st, zt, Ht, mn, xt, gt;
-    g = ((zt = (st = (Ke = (_e = (nt = i.current) == null ? void 0 : nt.parentElement) == null ? void 0 : _e.parentElement) == null ? void 0 : Ke.parentElement) == null ? void 0 : st.parentElement) == null ? void 0 : zt.parentElement) ?? null, b = ((gt = (xt = (mn = (Ht = i.current) == null ? void 0 : Ht.parentElement) == null ? void 0 : mn.parentElement) == null ? void 0 : xt.parentElement) == null ? void 0 : gt.parentElement) ?? null, E = (g == null ? void 0 : g.querySelector(".kgcrant-modal-content")) ?? null, w = (g == null ? void 0 : g.querySelector(".kgcrant-modal-header")) ?? null, O = (g == null ? void 0 : g.querySelector(".kgcrant-modal-footer")) ?? null;
-    const U = (g == null ? void 0 : g.querySelector(".resize-handle-top-left")) ?? null, W = (g == null ? void 0 : g.querySelector(".resize-handle-top")) ?? null, ne = (g == null ? void 0 : g.querySelector(".resize-handle-top-right")) ?? null, Y = (g == null ? void 0 : g.querySelector(".resize-handle-right")) ?? null, V = (g == null ? void 0 : g.querySelector(".resize-handle-bottom-right")) ?? null, ae = (g == null ? void 0 : g.querySelector(".resize-handle-bottom")) ?? null, ve = (g == null ? void 0 : g.querySelector(".resize-handle-bottom-left")) ?? null, de = (g == null ? void 0 : g.querySelector(".resize-handle-left")) ?? null;
+    m = ((zt = (st = (Ke = (_e = (nt = r.current) == null ? void 0 : nt.parentElement) == null ? void 0 : _e.parentElement) == null ? void 0 : Ke.parentElement) == null ? void 0 : st.parentElement) == null ? void 0 : zt.parentElement) ?? null, g = ((gt = (xt = (mn = (Ht = r.current) == null ? void 0 : Ht.parentElement) == null ? void 0 : mn.parentElement) == null ? void 0 : xt.parentElement) == null ? void 0 : gt.parentElement) ?? null, E((m == null ? void 0 : m.querySelector(".kgcrant-modal-content")) ?? null), w = (m == null ? void 0 : m.querySelector(".kgcrant-modal-header")) ?? null, O = (m == null ? void 0 : m.querySelector(".kgcrant-modal-footer")) ?? null;
+    const U = (m == null ? void 0 : m.querySelector(".resize-handle-top-left")) ?? null, W = (m == null ? void 0 : m.querySelector(".resize-handle-top")) ?? null, ne = (m == null ? void 0 : m.querySelector(".resize-handle-top-right")) ?? null, Y = (m == null ? void 0 : m.querySelector(".resize-handle-right")) ?? null, V = (m == null ? void 0 : m.querySelector(".resize-handle-bottom-right")) ?? null, ae = (m == null ? void 0 : m.querySelector(".resize-handle-bottom")) ?? null, ve = (m == null ? void 0 : m.querySelector(".resize-handle-bottom-left")) ?? null, de = (m == null ? void 0 : m.querySelector(".resize-handle-left")) ?? null;
     Dp("src/component/KgModal/hook/useDragToResize.ts | 001", {
-      domRef: i.current,
-      modalContentElement: E,
-      modalElement: b,
+      domRef: r.current,
+      modalContentElement: b,
+      modalElement: g,
       modalFooterElement: O,
       modalHeaderElement: w,
-      modalWrapElement: g,
-      open: !!r.open
+      modalWrapElement: m,
+      open: !!t.open
     });
     const we = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "top-left" }), ke = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "top" }), Ae = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "top-right" }), $e = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "right" }), He = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "bottom-right" }), Qe = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "bottom" }), ut = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "bottom-left" }), De = (Et) => Q == null ? void 0 : Q({ event: Et, handleType: "left" });
-    return !i.current || !r.open || !g || !b || !E || !w || !O || (U == null || U.addEventListener("mousedown", we), W == null || W.addEventListener("mousedown", ke), ne == null || ne.addEventListener("mousedown", Ae), Y == null || Y.addEventListener("mousedown", $e), V == null || V.addEventListener("mousedown", He), ae == null || ae.addEventListener("mousedown", Qe), ve == null || ve.addEventListener("mousedown", ut), de == null || de.addEventListener("mousedown", De)), () => {
-      m == null || m.disconnect(), Z(), U == null || U.removeEventListener("mousedown", we), W == null || W.removeEventListener("mousedown", ke), ne == null || ne.removeEventListener("mousedown", Ae), Y == null || Y.removeEventListener("mousedown", $e), V == null || V.removeEventListener("mousedown", He), ae == null || ae.removeEventListener("mousedown", Qe), ve == null || ve.removeEventListener("mousedown", ut), de == null || de.removeEventListener("mousedown", De);
+    return !r.current || !t.open || !m || !g || !b || !w || !O || (U == null || U.addEventListener("mousedown", we), W == null || W.addEventListener("mousedown", ke), ne == null || ne.addEventListener("mousedown", Ae), Y == null || Y.addEventListener("mousedown", $e), V == null || V.addEventListener("mousedown", He), ae == null || ae.addEventListener("mousedown", Qe), ve == null || ve.addEventListener("mousedown", ut), de == null || de.addEventListener("mousedown", De)), () => {
+      p == null || p.disconnect(), Z(), U == null || U.removeEventListener("mousedown", we), W == null || W.removeEventListener("mousedown", ke), ne == null || ne.removeEventListener("mousedown", Ae), Y == null || Y.removeEventListener("mousedown", $e), V == null || V.removeEventListener("mousedown", He), ae == null || ae.removeEventListener("mousedown", Qe), ve == null || ve.removeEventListener("mousedown", ut), de == null || de.removeEventListener("mousedown", De);
     };
-  }, [i, !!r.open]), C.useEffect(() => {
+  }, [r, !!t.open]), C.useEffect(() => {
     Dp("src/component/KgModal/hook/useDragToResize.ts | 002", {
-      modalContentElement: E
-    }), E ? (m = new ResizeObserver(() => {
-      D = E.offsetHeight;
-    }), m.observe(E)) : m == null || m.disconnect();
-  }, [E]), C.useEffect(() => {
+      modalContentElement: b
+    }), b ? (p = new ResizeObserver(() => D(b.offsetHeight)), p.observe(b)) : p == null || p.disconnect();
+  }, [b]), C.useEffect(() => {
     Dp("src/component/KgModal/hook/useDragToResize.ts | 003", {
-      currentModalContentOffsetHeight: D,
-      maxHeight: A,
-      modalElement: b
-    }), b && D > A && (b.style.height = `${A}px`);
-  }, [b, D, A]), {
-    /**
-     * 鼠标按下事件.
-     *
-     * @param param.event 鼠标事件对象.
-     * @param param.handleType 拖拽位置.
-     */
-    onMouseDown: Q,
-    /**
-     * 弹窗宽度.
-     */
-    width: M
-  };
+      currentModalContentOffsetHeight: A,
+      maxHeight: R,
+      modalElement: g
+    }), g && A > R && (g.style.height = `${R}px`);
+  }, [g, A, R]);
 }
 function ire({}) {
   return /* @__PURE__ */ Kt.jsx("div", { className: "kgcrant-kg-modal--header--buttons--close", children: /* @__PURE__ */ Kt.jsx(__, { icon: "ant-design:close-outlined" }) });
@@ -46278,21 +46266,14 @@ function Oae({}) {
 }
 function Vj({ children: e, closeIcon: t, ...r }) {
   const i = C.useRef(null), l = (() => {
-    let p = { ...r };
-    return p.closable = !0, p.wrapClassName = p.wrapClassName ? `${p.wrapClassName} kgcrant-kg-modal` : "kgcrant-kg-modal", p.centered = p.centered !== void 0 ? p.centered : !0, p.keyboard = p.keyboard !== void 0 ? p.keyboard : !1, p.maskClosable = p.maskClosable !== void 0 ? p.maskClosable : !1, p.okButtonProps = p.okButtonProps !== void 0 ? p.okButtonProps : {}, p.cancelButtonProps = p.cancelButtonProps !== void 0 ? p.cancelButtonProps : {}, p.kgIsDragToMove = p.kgIsDragToMove !== void 0 ? p.kgIsDragToMove : !0, p.kgIsDragToResize = p.kgIsDragToResize !== void 0 ? p.kgIsDragToResize : !0, r.kgShowOkButton || (p.okButtonProps.className = "kgcrant-kg-invisible"), r.kgShowCancelButton || (p.cancelButtonProps.className = "kgcrant-kg-invisible"), r.kgFullHeight && (p.wrapClassName += " kgcrant-kg-modal--full-height"), p;
+    let c = { ...r };
+    return c.closable = !0, c.wrapClassName = c.wrapClassName ? `${c.wrapClassName} kgcrant-kg-modal` : "kgcrant-kg-modal", c.centered = c.centered !== void 0 ? c.centered : !0, c.keyboard = c.keyboard !== void 0 ? c.keyboard : !1, c.maskClosable = c.maskClosable !== void 0 ? c.maskClosable : !1, c.okButtonProps = c.okButtonProps !== void 0 ? c.okButtonProps : {}, c.cancelButtonProps = c.cancelButtonProps !== void 0 ? c.cancelButtonProps : {}, c.kgIsDragToMove = c.kgIsDragToMove !== void 0 ? c.kgIsDragToMove : !0, c.kgIsDragToResize = c.kgIsDragToResize !== void 0 ? c.kgIsDragToResize : !0, r.kgShowOkButton || (c.okButtonProps.className = "kgcrant-kg-invisible"), r.kgShowCancelButton || (c.cancelButtonProps.className = "kgcrant-kg-invisible"), r.kgFullHeight && (c.wrapClassName += " kgcrant-kg-modal--full-height"), c;
   })();
-  rre({ domRef: i, kgIsDragToMove: !!l.kgIsDragToMove, open: !!l.open });
-  const { width: c, onMouseDown: f } = are({
-    domRef: i,
-    getProps: l,
-    props: r
-  });
-  return /* @__PURE__ */ Kt.jsx(_ae, { value: r, children: /* @__PURE__ */ Kt.jsxs(
+  return rre({ domRef: i, kgIsDragToMove: !!l.kgIsDragToMove, open: !!l.open }), are({ domRef: i, getProps: l }), /* @__PURE__ */ Kt.jsx(_ae, { value: r, children: /* @__PURE__ */ Kt.jsxs(
     Cl,
     {
       closeIcon: /* @__PURE__ */ Kt.jsx(Oae, {}),
       ...l,
-      width: c,
       children: [
         e,
         /* @__PURE__ */ Kt.jsx("div", { ref: i }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kengic/core.react",
-    "version": "0.0.1-beta.36",
+    "version": "0.0.1-beta.37",
     "type": "module",
     "main": "./kengic-core.react.js",
     "module": "./kengic-core.react.js",

package/src/component/KgModal/hook/useDragToResize.d.ts

@@ -1,6 +1,5 @@
 import { MutableRefObject } from 'react';
 import { KgModalProps } from '../KgModal';
-type HandleType = 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left';
 /**
  * 拖拽改变大小.
  *
@@ -11,21 +10,4 @@ type HandleType = 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' |
 export declare function useDragToResize(param: {
     domRef: MutableRefObject<HTMLDivElement | null>;
     getProps: KgModalProps;
-    props: KgModalProps;
-}): {
-    /**
-     * 鼠标按下事件.
-     *
-     * @param param.event 鼠标事件对象.
-     * @param param.handleType 拖拽位置.
-     */
-    onMouseDown: (param: {
-        event: MouseEvent;
-        handleType: HandleType;
-    }) => void;
-    /**
-     * 弹窗宽度.
-     */
-    width: string | number;
-};
-export {};
+}): void;