wz-h5-design 1.0.3 → 1.0.5

package/dist/Tooltip/index.js

@@ -1,5 +1,5 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useLayoutEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -51,6 +51,33 @@ var classnames = { exports: {} };
 })(classnames);
 var classnamesExports = classnames.exports;
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+const Icon = ({
+  name,
+  size = 24,
+  color = "currentColor",
+  className = "",
+  style,
+  onClick,
+  type = "yunying"
+  // 默认使用yunying图标库
+}) => {
+  const iconStyle = {
+    fontSize: typeof size === "number" ? `${size}px` : size,
+    color,
+    ...style
+  };
+  const iconFontClass = `iconfont-${type}`;
+  const iconPrefix = "icon-";
+  const iconClass = `${iconPrefix}${name}`;
+  return /* @__PURE__ */ jsx(
+    "i",
+    {
+      className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
+      style: iconStyle,
+      onClick
+    }
+  );
+};
 const Tooltip = ({
   content,
   children,
@@ -62,8 +89,9 @@ const Tooltip = ({
   visible,
   onVisibleChange,
   showMask = false,
-  action,
-  closeIcon
+  actionText,
+  onAction,
+  closable = false
 }) => {
   const [internalVisible, setInternalVisible] = useState(false);
   const [computedStyle, setComputedStyle] = useState({});
@@ -78,8 +106,8 @@ const Tooltip = ({
     }
     onVisibleChange == null ? void 0 : onVisibleChange(newVisible);
   };
-  useLayoutEffect(() => {
-    if (currentVisible && tooltipRef.current && triggerRef.current) {
+  const updatePosition = useCallback(() => {
+    if (tooltipRef.current && triggerRef.current) {
       const bubbleEl = tooltipRef.current;
       const triggerEl = triggerRef.current;
       const { width: bubbleWidth, height: bubbleHeight } = bubbleEl.getBoundingClientRect();
@@ -112,7 +140,24 @@ const Tooltip = ({
         "--wz-tooltip-arrow-left": `${arrowLeft}px`
       });
     }
-  }, [currentVisible]);
+  }, []);
+  useLayoutEffect(() => {
+    if (currentVisible) {
+      updatePosition();
+    }
+  }, [currentVisible, updatePosition]);
+  useEffect(() => {
+    if (!currentVisible) return;
+    const handleScroll = () => {
+      updatePosition();
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [currentVisible, updatePosition]);
   const handleWrapperClick = () => {
     if (trigger === "click") {
       handleVisibleChange(!currentVisible);
@@ -134,17 +179,17 @@ const Tooltip = ({
   const renderBubble = () => {
     if (!currentVisible) return null;
     const renderAction = () => {
-      if (!action) return null;
-      const originalOnClick = action.props.onClick;
-      const newOnClick = (e) => {
-        originalOnClick == null ? void 0 : originalOnClick(e);
+      if (!actionText) return null;
+      const handleActionClick = (e) => {
+        e.stopPropagation();
+        onAction == null ? void 0 : onAction();
         handleVisibleChange(false);
       };
-      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__action-slot", children: React.cloneElement(action, { onClick: newOnClick }) });
+      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__action-slot", children: /* @__PURE__ */ jsx("span", { className: "wz-tooltip-bubble__action-btn", onClick: handleActionClick, children: actionText }) });
     };
     const renderCloseIcon = () => {
-      if (!closeIcon) return null;
-      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__close-slot", children: React.cloneElement(closeIcon, { onClick: handleClose }) });
+      if (!closable) return null;
+      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__close-slot", children: /* @__PURE__ */ jsx("span", { className: "wz-tooltip-bubble__close-btn", onClick: handleClose, children: /* @__PURE__ */ jsx(Icon, { name: "close", type: "yunying" }) }) });
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       showMask && /* @__PURE__ */ jsx("div", { className: "wz-tooltip-mask", onClick: handleClose }),

package/dist/Tooltip/index.umd.cjs

@@ -1,6 +1,6 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Tooltip=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n,l={exports:{}};
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Tooltip=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n,i={exports:{}};
 /*!
   	Copyright (c) 2018 Jed Watson.
   	Licensed under the MIT License (MIT), see
   	http://jedwatson.github.io/classnames
-  */n=l,function(){var e={}.hasOwnProperty;function t(){for(var o=[],n=0;n<arguments.length;n++){var l=arguments[n];if(l){var i=typeof l;if("string"===i||"number"===i)o.push(l);else if(Array.isArray(l)){if(l.length){var r=t.apply(null,l);r&&o.push(r)}}else if("object"===i){if(l.toString!==Object.prototype.toString&&!l.toString.toString().includes("[native code]")){o.push(l.toString());continue}for(var s in l)e.call(l,s)&&l[s]&&o.push(s)}}}return o.join(" ")}n.exports?(t.default=t,n.exports=t):window.classNames=t}();const i=o(l.exports);return({content:o,children:n,className:l,style:r,color:s,textColor:c,trigger:a="click",visible:u,onVisibleChange:p,showMask:d=!1,action:f,closeIcon:b})=>{const[h,m]=t.useState(!1),[g,x]=t.useState({}),[w,y]=t.useState("bottom"),j=t.useRef(null),v=t.useRef(null),_=void 0!==u,z=_?u:h,k=e=>{_||m(e),null==p||p(e)};t.useLayoutEffect((()=>{if(z&&j.current&&v.current){const e=j.current,t=v.current,{width:o,height:n}=e.getBoundingClientRect(),{top:l,left:i,width:r,height:s}=t.getBoundingClientRect(),{innerWidth:c,innerHeight:a}=window,u=8;let p,d=i+r/2-o/2,f="bottom";d<u&&(d=u),d+o>c-u&&(d=c-o-u),p=l+s+u,p+n>a-u&&(f="top",p=l-n-u),p<u&&(f="bottom",p=l+s+u);const b=i+r/2-d;y(f),x({top:`${p}px`,left:`${d}px`,"--wz-tooltip-arrow-left":`${b}px`})}}),[z]);const C=e=>{e.stopPropagation(),k(!1)},N=i("wz-tooltip-bubble",`wz-tooltip-bubble--placement-${w}`,l),S={...r,...g,opacity:g.top?1:0,transition:"opacity 150ms ease-in","--wz-tooltip-bubble-bg":s,color:c},R={onClick:()=>{"click"===a&&k(!z)},ref:v};return e.jsxs(e.Fragment,{children:[t.cloneElement(n,R),(()=>{if(!z)return null;return e.jsxs(e.Fragment,{children:[d&&e.jsx("div",{className:"wz-tooltip-mask",onClick:C}),e.jsxs("div",{className:N,style:S,ref:j,children:[e.jsx("div",{className:"wz-tooltip-bubble__arrow"}),e.jsxs("div",{className:"wz-tooltip-bubble__inner",children:[e.jsx("div",{className:"wz-tooltip-bubble__body",children:o}),(()=>{if(!f)return null;const o=f.props.onClick;return e.jsx("div",{className:"wz-tooltip-bubble__action-slot",children:t.cloneElement(f,{onClick:e=>{null==o||o(e),k(!1)}})})})(),b?e.jsx("div",{className:"wz-tooltip-bubble__close-slot",children:t.cloneElement(b,{onClick:C})}):null]})]})]})})()]})}}));
+  */n=i,function(){var e={}.hasOwnProperty;function t(){for(var o=[],n=0;n<arguments.length;n++){var i=arguments[n];if(i){var l=typeof i;if("string"===l||"number"===l)o.push(i);else if(Array.isArray(i)){if(i.length){var r=t.apply(null,i);r&&o.push(r)}}else if("object"===l){if(i.toString!==Object.prototype.toString&&!i.toString.toString().includes("[native code]")){o.push(i.toString());continue}for(var s in i)e.call(i,s)&&i[s]&&o.push(s)}}}return o.join(" ")}n.exports?(t.default=t,n.exports=t):window.classNames=t}();const l=o(i.exports),r=({name:t,size:o=24,color:n="currentColor",className:i="",style:l,onClick:r,type:s="yunying"})=>{const c={fontSize:"number"==typeof o?`${o}px`:o,color:n,...l},a=`iconfont-${s}`,u=`icon-${t}`;return e.jsx("i",{className:`wz-icon ${a} ${u} ${i}`,style:c,onClick:r})};return({content:o,children:n,className:i,style:s,color:c,textColor:a,trigger:u="click",visible:p,onVisibleChange:d,showMask:b=!1,actionText:f,onAction:m,closable:w=!1})=>{const[h,x]=t.useState(!1),[g,y]=t.useState({}),[v,j]=t.useState("bottom"),z=t.useRef(null),_=t.useRef(null),N=void 0!==p,C=N?p:h,k=e=>{N||x(e),null==d||d(e)},$=t.useCallback((()=>{if(z.current&&_.current){const e=z.current,t=_.current,{width:o,height:n}=e.getBoundingClientRect(),{top:i,left:l,width:r,height:s}=t.getBoundingClientRect(),{innerWidth:c,innerHeight:a}=window,u=8;let p,d=l+r/2-o/2,b="bottom";d<u&&(d=u),d+o>c-u&&(d=c-o-u),p=i+s+u,p+n>a-u&&(b="top",p=i-n-u),p<u&&(b="bottom",p=i+s+u);const f=l+r/2-d;j(b),y({top:`${p}px`,left:`${d}px`,"--wz-tooltip-arrow-left":`${f}px`})}}),[]);t.useLayoutEffect((()=>{C&&$()}),[C,$]),t.useEffect((()=>{if(!C)return;const e=()=>{$()};return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}}),[C,$]);const S=e=>{e.stopPropagation(),k(!1)},E=l("wz-tooltip-bubble",`wz-tooltip-bubble--placement-${v}`,i),R={...s,...g,opacity:g.top?1:0,transition:"opacity 150ms ease-in","--wz-tooltip-bubble-bg":c,color:a},L={onClick:()=>{"click"===u&&k(!C)},ref:_};return e.jsxs(e.Fragment,{children:[t.cloneElement(n,L),(()=>{if(!C)return null;return e.jsxs(e.Fragment,{children:[b&&e.jsx("div",{className:"wz-tooltip-mask",onClick:S}),e.jsxs("div",{className:E,style:R,ref:z,children:[e.jsx("div",{className:"wz-tooltip-bubble__arrow"}),e.jsxs("div",{className:"wz-tooltip-bubble__inner",children:[e.jsx("div",{className:"wz-tooltip-bubble__body",children:o}),(()=>{if(!f)return null;return e.jsx("div",{className:"wz-tooltip-bubble__action-slot",children:e.jsx("span",{className:"wz-tooltip-bubble__action-btn",onClick:e=>{e.stopPropagation(),null==m||m(),k(!1)},children:f})})})(),w?e.jsx("div",{className:"wz-tooltip-bubble__close-slot",children:e.jsx("span",{className:"wz-tooltip-bubble__close-btn",onClick:S,children:e.jsx(r,{name:"close",type:"yunying"})})}):null]})]})]})})()]})}}));

package/dist/Tooltip/style/index.css

@@ -1 +1 @@
-.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__close-icon{color:inherit;opacity:.7;order:3;width:16px;height:16px;margin-left:12px;font-size:16px;position:relative;top:auto;right:auto}.wz-tooltip-bubble__close-icon:hover{opacity:1}.wz-tooltip-bubble__content{flex-direction:column;width:100%;padding:16px;display:flex}.wz-tooltip-bubble__title{color:var(--wz-tooltip-bubble-text-color,#333);margin-bottom:8px;font-size:16px;font-weight:500}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}
+.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__action-btn{color:#fff;cursor:pointer;white-space:nowrap;background-color:#22c94d;border-radius:13px;justify-content:center;align-items:center;min-width:67px;height:22px;padding:0 12px;font-size:13px;font-weight:600;line-height:22px;display:inline-flex}.wz-tooltip-bubble__action-btn:active{opacity:.8}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble__close-btn{color:#ccc;cursor:pointer;justify-content:center;align-items:center;display:inline-flex}.wz-tooltip-bubble__close-btn:active{opacity:.7}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}

package/dist/Tooltip/style.css

@@ -1 +1 @@
-.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__close-icon{color:inherit;opacity:.7;order:3;width:16px;height:16px;margin-left:12px;font-size:16px;position:relative;top:auto;right:auto}.wz-tooltip-bubble__close-icon:hover{opacity:1}.wz-tooltip-bubble__content{flex-direction:column;width:100%;padding:16px;display:flex}.wz-tooltip-bubble__title{color:var(--wz-tooltip-bubble-text-color,#333);margin-bottom:8px;font-size:16px;font-weight:500}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}
+.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}.wz-tooltip-mask{z-index:1000;background-color:#0006;position:fixed;top:0;bottom:0;left:0;right:0}.wz-tooltip-bubble{z-index:1001;background:var(--wz-tooltip-bubble-bg,#fff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;height:30px;font-size:14px;font-weight:400;display:flex;position:fixed;box-shadow:0 0 10px #0000001a}.wz-tooltip-bubble__inner{align-items:center;padding:12px 16px;display:flex}.wz-tooltip-bubble__action-slot,.wz-tooltip-bubble__close-slot{align-items:center;display:flex}.wz-tooltip-bubble__action-slot{order:2;margin-left:auto;padding-left:12px}.wz-tooltip-bubble__action-btn{color:#fff;cursor:pointer;white-space:nowrap;background-color:#22c94d;border-radius:13px;justify-content:center;align-items:center;min-width:67px;height:22px;padding:0 12px;font-size:13px;font-weight:600;line-height:22px;display:inline-flex}.wz-tooltip-bubble__action-btn:active{opacity:.8}.wz-tooltip-bubble__close-slot{order:3;padding-left:8px}.wz-tooltip-bubble__close-btn{color:#ccc;cursor:pointer;justify-content:center;align-items:center;display:inline-flex}.wz-tooltip-bubble__close-btn:active{opacity:.7}.wz-tooltip-bubble--placement-top .wz-tooltip-bubble__arrow{border-top-color:var(--wz-tooltip-bubble-bg,#fff);top:100%}.wz-tooltip-bubble--placement-bottom .wz-tooltip-bubble__arrow{border-bottom-color:var(--wz-tooltip-bubble-bg,#fff);bottom:100%}.wz-tooltip-bubble__arrow{left:var(--wz-tooltip-arrow-left,50%);border:5px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.wz-tooltip-bubble__body{color:inherit;flex:1;order:1;font-size:14px;line-height:1.5}