@bizhermit/react-sdk/message/message-provider.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MessageProvider=exports.MessageContext=void 0;const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importStar(require("react")),css_var_1=__importStar(require("../styles/css-var")),jsx_style_1=__importDefault(require("../styles/jsx-style")),button_1=__importDefault(require("../elements/button")),icon_1=__importDefault(require("../elements/icon")),label_1=__importStar(require("../elements/label")),core_style_1=require("../styles/core-style"),portal_element_1=__importDefault(require("../hooks/portal-element")),react_dom_1=require("react-dom"),cn="bn-msg";exports.MessageContext=(0,react_1.createContext)({show:()=>{},close:()=>{},clear:()=>{},append:()=>{},error:()=>{},getCounts:()=>({total:0,info:0,warn:0,err:0,notVerified:0})});const MessageProvider=e=>{const t=(0,react_1.useRef)([]),r=(0,react_1.useRef)(),n=(0,react_1.useRef)({}),a=(0,portal_element_1.default)({id:e.id??cn,mount:e=>{e.classList.add(`${cn}-root`)}}),s=(0,react_1.useRef)(0),i=(0,react_1.useCallback)((e=>{if(null==e)return;const n=Date.now();e.forEach((e=>{t.current.push({title:e.title,messageTexts:string_utils_1.default.isString(e.messageTexts)?[e.messageTexts]:e.messageTexts,type:e.type??"info",popuped:!1,timestamp:n,verified:!1,key:s.current++})})),setTimeout((()=>{r.current?.popup(),r.current?.refresh()}),0)}),[]),c=()=>{let e=0,r=0,n=0,a=0;return t.current.forEach((t=>{switch(t.type){case"danger":case"error":n++;break;case"warning":r++;break;default:e++}t.verified||a++})),{total:t.current.length,info:e,warn:r,err:n,notVerified:a}};return react_1.default.createElement(exports.MessageContext.Provider,{value:(0,react_1.useMemo)((()=>({show:()=>r.current.toggle(!0),close:()=>r.current.toggle(!1),clear:()=>{t.current?.splice(0,t.current.length),r.current?.refresh()},append:i,error:t=>{if(null==t)return;let r;r="function"==typeof e.errorMessage?e.errorMessage(t):e.errorMessage??{title:"システムエラー",messageTexts:"システムエラーが発生しました"},i([{...r,type:"error"}])},getCounts:c,_setCallback:e=>{const t=string_utils_1.default.generateUuidV4();return n.current[t]=e,t},_unsetCallback:e=>{delete n.current[e]}})),[])},e.children,Style,a?(0,react_dom_1.createPortal)(react_1.default.createElement(MessageHistory,{defaultShowed:e.defaultShowed??!1,popupStayingTime:e.popupStayingTime||5e3,popupClickAction:e.popupClickAction??"close",historyShowAnimationDuration:e.historyShowAnimationDuration||200,preventClickToHideHistory:e.preventClickToHideHistory??!1,messages:t.current,dispatchSetter:e=>{r.current=e},dispatch:{changed:()=>{e.changed?.(t.current),Object.keys(n.current).forEach((e=>{n.current[e](t.current)}))}}}),a):react_1.default.createElement(react_1.default.Fragment,null))};exports.MessageProvider=MessageProvider;const useMessage=e=>{const t=(0,react_1.useContext)(exports.MessageContext);return(0,react_1.useEffect)((()=>{if(e){const r=t._setCallback(e);return()=>{t._unsetCallback(r)}}}),[]),t},defaultAnimationInterval=10,getTimeText=e=>{const t=new Date(e),r=`${("00"+t.getHours()).slice(-2)}:${("00"+t.getMinutes()).slice(-2)}:${("00"+t.getSeconds()).slice(-2)}`,n=Date.now()-e;return n<6e4?`${Math.floor(n/1e3)}s (${r})`:n<36e5?`${Math.floor(n/6e4)}m (${r})`:r},MessageHistory=e=>{const t=(0,react_1.useRef)(),r=(0,react_1.useRef)(),[n,a]=(0,react_1.useState)(0),[s,i]=(0,react_1.useState)(e.defaultShowed??!1),[c,l]=(0,react_1.useState)(0),o=(0,react_1.useRef)(),d=(0,react_1.useRef)(!0);(0,react_1.useEffect)((()=>{const r=Math.max(Math.floor(Math.max(o.current??e.historyShowAnimationDuration,1)/10),1);if(s){t.current.style.visibility="hidden",t.current.style.removeProperty("width"),t.current.style.removeProperty("max-width"),t.current.style.removeProperty("min-width"),t.current.style.removeProperty("display"),t.current.style.removeProperty("overflow");const n="0px",a=t.current.offsetWidth;t.current.style.width=t.current.style.maxWidth=t.current.style.minWidth=n;const s=t.current.offsetWidth,c=Math.max(1,Math.floor((a-s)/r));t.current.style.removeProperty("visibility");const l=()=>{t.current.style.removeProperty("width"),t.current.style.removeProperty("max-width"),t.current.style.removeProperty("min-width"),e.messages.forEach((e=>e.verified=!0))};let o=s;const u=async()=>{o+=c,o>a?l():(t.current.style.width=t.current.style.maxWidth=t.current.style.minWidth=`${o}px`,setTimeout(u,10))};if(d.current?l():u(),!e.preventClickToHideHistory){const e=()=>{i(!1)};return window.addEventListener("click",e),()=>{window.removeEventListener("click",e)}}}else{const e="0px",n=()=>{t.current.style.width=t.current.style.maxWidth=t.current.style.minWidth=e,t.current.style.removeProperty("hidden")};t.current.style.removeProperty("display");const a=t.current.offsetWidth;t.current.style.overflow="hidden",t.current.style.removeProperty("visibility"),t.current.style.width=t.current.style.maxWidth=t.current.style.minWidth=e;let s=t.current.offsetWidth;t.current.style.width=t.current.style.maxWidth=t.current.style.minWidth=`${a}px`;const i=Math.max(1,Math.floor((a-s)/r));let c=a;const l=async()=>{c-=i,c<s?n():(t.current.style.width=t.current.style.maxWidth=t.current.style.minWidth=`${c}px`,setTimeout(l,10))};d.current?n():l()}}),[s]),(0,react_1.useEffect)((()=>{d.current=!1,e.dispatchSetter({toggle:e=>{setTimeout((()=>{e&&a((e=>e+1)),i(e)}),0)},refresh:()=>{a((e=>e+1))},popup:()=>{l((e=>e+1))}})}),[]);const u=(0,react_1.useMemo)((()=>{if(!s)return{info:0,warn:0,err:0,nodes:[]};const t=e.messages;let r=0,n=0,i=0;const c=[];for(let s=t.length-1;s>=0;s--){const l=t[s];let o,d;switch(l.type){case"danger":case"error":o="danger",d="error",i++;break;case"warning":o="warning",d="warning",n++;break;case"info":o="default",d="information",r++;break;default:o=l.type||"default",d="information",r++}c.push(react_1.default.createElement("div",{key:l.key,className:`${cn}-hist_item`,"data-signal":o,"data-verified":l.verified},react_1.default.createElement("div",{className:`${cn}-hist_item_header`},react_1.default.createElement(icon_1.default,{$image:d,$signal:o}),react_1.default.createElement("div",{className:`${cn}-hist_item_title`},react_1.default.createElement(label_1.default,{$bold:!0,$type:"h3"},l.title)),react_1.default.createElement(button_1.default,{$transparent:!0,$icon:"delete",$signal:"danger",$click:()=>{e.messages.splice(s,1),a((e=>e+1))}})),react_1.default.createElement("div",{className:`${cn}-hist_item_body`},react_1.default.createElement("div",{className:`${cn}-hist_item_timestamp`},getTimeText(l.timestamp)),react_1.default.createElement("pre",{className:`${cn}-hist_item_texts`},l.messageTexts.join("\n")))))}return{info:r,warn:n,err:i,nodes:c}}),[n]),f=(0,react_1.useMemo)((()=>{const t=[],r=e.messages.filter((e=>!e.popuped));if(0===r.length)return t;for(let e=0,n=r.length;e<n;e++){const n=r[e];let a,s;switch(n.type){case"danger":case"error":a="danger",s="error";break;case"warning":a="warning",s="warning";break;case"info":a="default",s="information";break;default:a=n.type||"default",s="information"}t.push(react_1.default.createElement("div",{key:n.key,className:`${cn}-popup_item`,"data-signal":a},react_1.default.createElement(icon_1.default,{$image:s,$signal:a}),react_1.default.createElement("pre",{className:`${cn}-popup_item_texts`},n.title??n.messageTexts.join(" ")))),n.popuped=!0}return t}),[c]);return(0,react_1.useEffect)((()=>{if(0===f.length)return;let t=!0;return setTimeout((()=>{if(!t)return;r?.current.style.removeProperty("display");let n=100;r?.current.style.removeProperty("width");const a=r.current?.getBoundingClientRect().width||0,s=()=>{t&&(n-=1,n<0?r.current&&(r.current.style.display="none"):(r.current&&(r.current.style.width=Math.floor(a*(n/100))+"px"),setTimeout((()=>s()),5)))};setTimeout((()=>s()),e.popupStayingTime)}),10),()=>{t=!1}}),[c]),(0,react_1.useEffect)((()=>{e.dispatch.changed()}),[n]),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{ref:t,className:`${cn}-hist`,"data-showed":s,onClick:e=>e.stopPropagation()},react_1.default.createElement("div",{className:`${cn}-hist_header`},react_1.default.createElement(button_1.default,{$icon:"reload",$transparent:!0,$click:()=>{a((e=>e+1))}}),react_1.default.createElement("div",{className:`${cn}-hist_header_info`},u.info>0?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(icon_1.default,{$image:"information"}),react_1.default.createElement(label_1.default,null,u.info)):react_1.default.createElement(react_1.default.Fragment,null),u.warn>0?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(icon_1.default,{$image:"warning",$signal:"warning"}),react_1.default.createElement(label_1.default,null,u.warn)):react_1.default.createElement(react_1.default.Fragment,null),u.err>0?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(icon_1.default,{$image:"error",$signal:"danger"}),react_1.default.createElement(label_1.default,null,u.err)):react_1.default.createElement(react_1.default.Fragment,null)),react_1.default.createElement("div",{className:`${cn}-hist_header_r`},react_1.default.createElement(button_1.default,{$icon:"delete",$transparent:!0,$signal:"danger",$click:()=>{e.messages.splice(0,e.messages.length),a((e=>e+1))}}),react_1.default.createElement(button_1.default,{$icon:"cross",$transparent:!0,$click:()=>{i(!1)}}))),react_1.default.createElement("div",{className:`${cn}-hist_body ${core_style_1.sbCn}`},u.nodes)),react_1.default.createElement("div",{ref:r,className:`${cn}-popup ${core_style_1.sbCn}`,style:{display:"none"},onClick:()=>{switch(e.popupClickAction){case"showHistory":r.current.style.display="none",i(!0);break;case"close":r.current.style.display="none"}}},f))},Style=react_1.default.createElement(jsx_style_1.default,{id:"bh-msg",depsDesign:!0},(({design:e})=>`\n.${cn}-hist {\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 2100000000;\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex: none;\n  top: 0px;\n  right: 0px;\n  height: 100%;\n  overflow: hidden;\n  background: ${css_var_1.default.bgc};\n  transition: width 0.3s;\n  min-width: 25%;\n  max-width: 40%;\n${(0,css_var_1.switchDesign)(e,{c:"opacity: 0.95;",flat:`box-shadow: 0 0 1px ${css_var_1.default.sdw.c};`,material:`box-shadow: 0 0 5px -1px ${css_var_1.default.sdw.c};`,neumorphism:`box-shadow: 0px 3px 4px -2px ${css_var_1.default.sdw.d}, 0px -2.5px 1px -2px ${css_var_1.default.sdw.d} inset;`})}\n}\n.${cn}-hist_header {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  width: 100%;\n  min-height: ${css_var_1.default.size};\n${(0,css_var_1.switchDesign)(e,{flat:`\n  box-shadow: 0 0 1px ${css_var_1.default.sdw.c};\n  margin-bottom: 1px;\n`,material:`\n  box-shadow: 0 0 5px -1px ${css_var_1.default.sdw.c};\n  margin-bottom: 2px;\n`,neumorphism:`\n  box-shadow: 0px 3px 4px -2px ${css_var_1.default.sdw.d}, 0px -2.5px 1px -2px ${css_var_1.default.sdw.d} inset;\n  margin-bottom: 3px;\n  padding: 3px;\n`})}\n}\n.${cn}-hist_header_info {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  padding-left: 5px;\n  padding-top: 2px;\n}\n.${cn}-hist_header_info > .${label_1.labelCn} {\n  margin-right: 10px;\n}\n.${cn}-hist_header_r {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  flex: 1;\n}\n.${cn}-hist_body {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex: 1;\n  min-height: 0px;\n  width: 100%;\n  padding: 5px;\n}\n.${cn}-hist_item {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n  border-radius: ${css_var_1.default.bdr};\n  margin-bottom: 5px;\n  padding: 5px;\n${(0,css_var_1.switchDesign)(e,{fm:`border: 1px solid ${css_var_1.default.bdc};`,neumorphism:`box-shadow: ${css_var_1.CssPV.cvxSd};`})}\n}\n${(0,css_var_1.switchDesign)(e,{fm:`\n.${cn}-hist_item[data-verified="true"] {\n  border-style: dashed;\n}`,neumorphism:`\n.${cn}-hist_item[data-verified="true"] {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}`})}\n.${cn}-hist_item_header {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n}\n.${cn}-hist_item_title {\n  flex: 1;\n  overflow: hidden;\n}\n.${cn}-hist_item_body {\n  width: 100%;\n}\n.${cn}-hist_item_timestamp {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  font-size: 10px;\n  width: 100%;\n}\n.${cn}-hist_item_texts {\n  margin: 0px;\n  padding: 5px;\n}\n.${cn}-popup {\n  box-sizing: border-box;\n  position: fixed;\n  top: 5px;\n  right: 5px;\n  z-index: 2100000001;\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex: none;\n  max-height: 100%;\n  max-width: 50%;\n  filter: drop-shadow(0px 8px 5px ${css_var_1.default.sdw.c});\n}\n.${cn}-popup_item {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  border-radius: ${css_var_1.default.bdr};\n  padding: 5px;\n  margin-bottom: 5px;\n${(0,css_var_1.switchDesign)(e,{fm:`border: 3px double ${css_var_1.default.bdc};`,neumorphism:`box-shadow: ${css_var_1.CssPV.cvxSdS};`})}\n}\n.${cn}-popup_item_texts {\n  margin: 0px;\n  padding: 6px 5px 5px 5px;\n}\n${(0,css_var_1.switchDesign)(e,{c:`\n${(0,css_var_1.signalIterator)(((e,t,r)=>`\n.${cn}-hist_item${r} {\n  border-color: ${t.bdc};\n  background: ${css_var_1.default.bgc};\n}\n.${cn}-hist_item${r} .${cn}-hist_item_title {\n  color: ${t.fc};\n}\n.${cn}-popup_item${r} {\n  background: ${t.bgc};\n  border-color: ${t.bdc};\n  color: ${t.fc};\n}\n`)).join("")}\n`})}\n`));exports.default=useMessage;