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

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),client_1=require("react-dom/client"),css_var_1=__importStar(require("../styles/css-var")),layout_provider_1=require("../styles/layout-provider"),jsx_style_1=__importDefault(require("../styles/jsx-style")),button_1=__importStar(require("../elements/button")),icon_1=require("../elements/icon"),text_box_1=__importDefault(require("../elements/inputs/text-box")),label_1=__importDefault(require("../elements/label")),cn="bh-mgs_box",MessageBox=({props:e,resolve:t})=>{const n=(0,react_1.useRef)(),r=(0,react_1.useRef)((0,button_1.useButton)()),a=(0,react_1.useMemo)((()=>{const n=[];let a=!1;return e.buttons.forEach(((c,s)=>{const l={...c};delete l.$code,delete l.$escapeButton,delete l.$default,delete l.$click,n.push(react_1.default.createElement(button_1.default,{key:s,...c,$hook:(()=>{if(c.$default||!a&&s+1===e.buttons.length)return a=!0,r.current})()?r.current:void 0,$transparent:c.$transparent??!0,$click:()=>{c.$click?c.$click(t,c):t(c.$code)}}))})),0===n.length&&n.push(react_1.default.createElement(button_1.default,{$transparent:!0,$click:()=>{t(void 0)}})),n}),[]),c=e=>{const t=document.activeElement;if("BUTTON"!==t?.tagName)return;const r=n.current.querySelectorAll(`.${cn}-f > .${button_1.buttonCn}`);let a=!1;const c=e=>a?(e.focus(),!0):(a=e===t,!1);if("l"===e)for(let e=r.length-1;e>=0&&!c(r[e]);e--);else for(let e=0,t=r.length;e<t&&!c(r[e]);e++);},s=e=>{if("Tab"===e.key)return e.preventDefault(),void e.stopPropagation()};return(0,react_1.useEffect)((()=>{const e=n.current.getBoundingClientRect(),t=document.body.clientWidth,a=document.body.clientHeight,c=document.body.getBoundingClientRect(),s=Math.max(0,t-e.width),l=Math.max(0,a-e.height);n.current.style.left=Math.max(0,Math.min(s,c.left+(c.width-e.width)/2))+"px",n.current.style.top=Math.max(0,Math.min(l,c.top+(c.height-e.height)/2))+"px";const o=n.current.querySelector(`.${cn}-b input`);o?o.focus():r.current.focus()})),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{className:`${cn}-mask ${cn}-mask_d`,tabIndex:0,onKeyDown:s}),react_1.default.createElement("div",{className:cn,ref:n,onKeyDown:t=>{if("Escape"===t.key){const a=e.buttons.findIndex((e=>e.$escapeButton));if(a>=0){n.current.querySelectorAll(`.${cn}-f > .${button_1.buttonCn}`)[a]?.click()}else r.current.focus();return t.stopPropagation(),void t.preventDefault()}"ArrowLeft"!==t.key?"ArrowRight"!==t.key||c("r"):c("l")},"data-signal":e.signal},e.title?react_1.default.createElement("div",{className:`${cn}-h`},react_1.default.createElement(label_1.default,{$bold:!0},e.title)):react_1.default.createElement(react_1.default.Fragment,null),react_1.default.createElement("div",{className:`${cn}-b`},e.message),react_1.default.createElement("div",{className:`${cn}-f`},a)),react_1.default.createElement("div",{className:`${cn}-mask`,tabIndex:0,onKeyDown:s}),Style)},useMessageBox=()=>{const e=(0,layout_provider_1.useLayout)(),t=(0,react_1.useRef)(e),n=(0,react_1.useRef)(),r=(0,react_1.useRef)(),a=(0,react_1.useCallback)((e=>(null==n.current&&(n.current=document.createElement("div"),n.current.classList.add(`${cn}-root`),document.body.appendChild(n.current)),null==r.current&&(r.current=(0,client_1.createRoot)(n.current)),n.current.style.removeProperty("display"),new Promise((n=>{r.current.render(react_1.default.createElement(layout_provider_1.LayoutContext.Provider,{value:t.current},react_1.default.createElement(MessageBox,{props:e,resolve:e=>{r.current.unmount(),r.current=null,setTimeout((()=>{n(e)}),0)}})))})))),[]);return(0,react_1.useEffect)((()=>{t.current=e}),[e]),(0,react_1.useEffect)((()=>()=>{n.current&&setTimeout((()=>{r.current&&(r.current.unmount(),r.current=null),document.body.removeChild(n.current)}),0)}),[]),{show:a,alert:(0,react_1.useCallback)(((e,t)=>a({title:t,message:e,buttons:[{children:"OK",$transparent:!0,$escapeButton:!0}]})),[]),confirm:(0,react_1.useCallback)(((e,t)=>a({title:t,message:e,buttons:[{children:"キャンセル",$transparent:!0,$escapeButton:!0,$click:e=>{e(!1)}},{children:"OK",$signal:"primary",$transparent:!0,$click:e=>{e(!0)}}]})),[]),text:(0,react_1.useCallback)((e=>{const t={value:""};return a({title:e.title,message:react_1.default.createElement(react_1.default.Fragment,null,e.message,react_1.default.createElement(text_box_1.default,{...e.textBoxAttributes,$bind:t,$name:"value"})),buttons:[{children:"キャンセル",$transparent:!0,$escapeButton:!0,$click:e=>{e({result:!1,text:void 0})}},{children:"OK",$signal:"primary",$transparent:!0,$click:e=>{e({result:!0,text:t.value})}}]})}),[])}},Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${cn} {\n  box-sizing: border-box;\n  z-index: 2147483647;\n  position: fixed;\n  border-radius: ${css_var_1.default.bdr};\n  overflow: hidden;\n  background: ${css_var_1.default.bgc};\n  color: ${css_var_1.default.fc};\n  min-width: 180px;\n${e?`filter: drop-shadow(0 2px 3px ${css_var_1.default.sdw.c});`:""}\n}\n.${cn}-h {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  height: ${css_var_1.default.size};\n  padding-right: ${css_var_1.default.size};\n  width: 100%;\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: 3px;\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`})}\n}\n.${cn}-b {\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: ${css_var_1.default.size};\n  width: 100%;\n  padding: 10px 10px 0px 10px;\n}\n.${cn}-f {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  flex: none;\n  padding: 5px 5px 5px ${css_var_1.default.size};\n}\n.${cn}-mask {\n  position: fixed;\n  z-index: 2147483646;\n  box-sizing: border-box;\n  top: 0px;\n  left: 0px;\n  height: 100% !important;\n  width: 100% !important;\n  cursor: default;\n  background: ${css_var_1.default.mask.bgc};\n}\n.${cn}-mask_d {\n  background: transparent;\n}\n${(0,css_var_1.switchDesign)(e,{c:`\n${(0,css_var_1.signalIterator)(((e,t,n)=>`\n.${cn}${n} > .${cn}-h {\n  background: ${t.head.bgc};\n  color: ${t.head.fc};\n}\n.${cn}${n} > .${cn}-h .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.head.fc};\n  --bh-icon-bc: ${t.head.bgc};\n}\n.${cn}${n} {\n  background: ${t.bgc};\n}\n`)).join("")}\n`})}\n`));exports.default=useMessageBox;