react-signify
Version:
A JS library for predictable and maintainable global state management
3 lines (2 loc) • 5.52 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("react");!function(e,r){void 0===r&&(r={});var n=r.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".signify_popup {\r\n font-size: 12px;\r\n width: 300px;\r\n height: 300px;\r\n background-color: white;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\r\n position: fixed;\r\n display: block;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n box-sizing: border-box;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n}\r\n.signify_popup_header {\r\n cursor: move;\r\n display: flex;\r\n align-items: center;\r\n padding: 5px 20px;\r\n gap: 10px;\r\n font-size: 16px;\r\n color: white;\r\n user-select: none;\r\n}\r\n.signify_popup_header_button {\r\n cursor: pointer;\r\n}\r\n.signify_popup_header_label {\r\n margin-right: auto;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-wrap: nowrap;\r\n}\r\n.signify_popup_resizer {\r\n width: 20px;\r\n height: 20px;\r\n background-color: rgba(0, 0, 0, 0.1);\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n cursor: se-resize;\r\n border-radius: 10px 0px 10px;\r\n}\r\n.signify_popup_json_viewer {\r\n margin: 0;\r\n height: calc(100% - 32px);\r\n overflow: auto;\r\n padding: 10px 20px;\r\n white-space: pre;\r\n box-sizing: border-box;\r\n}\r\n.signify_popup_json_viewer::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n}\r\n.signify_popup_json_viewer::-webkit-scrollbar-thumb {\r\n background: gray;\r\n}\r\n.signify_popup_json_viewer::-webkit-scrollbar-track {\r\n background: #fff;\r\n}\r\n.signify_popup_json_key {\r\n color: brown;\r\n}\r\n.signify_popup_json_string {\r\n color: green;\r\n}\r\n.signify_popup_json_number {\r\n color: blue;\r\n}\r\n.signify_popup_json_boolean {\r\n color: purple;\r\n}\r\n.signify_popup_json_null {\r\n color: gray;\r\n}\r\n");let n=100;const t=r.memo((({name:t,color:o,item:s})=>{const i=r.useRef(null);let l=`rs-${t}`,p=!1,u=!1,a=0,c=0,d=0;r.useLayoutEffect((()=>{var e;if(i.current){const{x:r,y:n,h:t,w:o}=JSON.parse(null!==(e=function(e){let r=e+"=",n=decodeURIComponent(document.cookie).split(";");for(let e=0;e<n.length;e++){let t=n[e];for(;" "==t.charAt(0);)t=t.substring(1);if(0==t.indexOf(r))return t.substring(r.length,t.length)}return null}(l))&&void 0!==e?e:"{}");r&&(i.current.style.left=r),n&&(i.current.style.top=n),o&&(i.current.style.width=o),t&&(i.current.style.height=t)}}),[]),r.useEffect((()=>{const e=e=>{if(p&&i.current&&(i.current.style.left=e.clientX-a+"px",i.current.style.top=e.clientY-c+"px"),u&&i.current){const r=i.current.getBoundingClientRect(),n=e.clientX-r.left,t=e.clientY-r.top;n>100&&(i.current.style.width=`${n+10}px`),t>100&&(i.current.style.height=`${t+10}px`)}},r=()=>{p=!1,u=!1,document.body.style.cursor="default",i.current&&function(e,r,n=30){const t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);let o="expires="+t.toUTCString();document.cookie=e+"="+r+";"+o+";path=/"}(l,JSON.stringify({x:i.current.style.left,y:i.current.style.top,w:i.current.style.width,h:i.current.style.height}))};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",r),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",r)}}),[]);const f=r.useCallback((({clientX:e,clientY:r})=>{var t,o;i.current&&(p=!0,i.current.style.zIndex=""+n++,a=e-(null===(t=i.current)||void 0===t?void 0:t.offsetLeft),c=r-(null===(o=i.current)||void 0===o?void 0:o.offsetTop))}),[]),g=r.useCallback((e=>{u=!0,document.body.style.cursor="se-resize",e.preventDefault()}),[]),h=r.useCallback((e=>()=>{i.current&&(i.current.style.fontSize||(i.current.style.fontSize="12px"),i.current.style.fontSize=Number(i.current.style.fontSize.replace("px",""))+(e?2:-2)+"px")}),[]),y=r.useCallback((e=>("string"!=typeof e&&(e=JSON.stringify(e,void 0,2)),(e=e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")).replace(/("(\\u[a-zA-Z0-9]{4}|\ $^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,(function(e){let r="number";return/^"/.test(e)?r=/:$/.test(e)?"key":"string":/true|false/.test(e)?r="boolean":/null/.test(e)&&(r="null"),'<span class="signify_popup_json_'+r+'">'+e+"</span>"})))),[]);return e.jsxs("div",{ref:i,className:"signify_popup",children:[e.jsxs("div",{style:{backgroundColor:null!=o?o:`rgb(${Math.floor(128*Math.random())}, ${Math.floor(128*Math.random())}, ${Math.floor(128*Math.random())})`},className:"signify_popup_header",onMouseDown:f,children:[e.jsx("label",{className:"signify_popup_header_label",children:e.jsx(s.HardWrap,{children:()=>e.jsxs(e.Fragment,{children:[t," - ",++d]})})}),e.jsx("span",{className:"signify_popup_header_button",onClick:h(!0),dangerouslySetInnerHTML:{__html:"△"}}),e.jsx("span",{className:"signify_popup_header_button",onClick:h(!1),dangerouslySetInnerHTML:{__html:"▽"}})]}),e.jsx(s.HardWrap,{children:r=>e.jsx("pre",{className:"signify_popup_json_viewer",dangerouslySetInnerHTML:{__html:y(JSON.stringify(r,null,2))}})}),e.jsx("div",{onMouseDown:g,className:"signify_popup_resizer"})]})}),(()=>!0));exports.DevTool=t;
//# sourceMappingURL=devtool.js.map