@bizhermit/react-sdk/elements/resizer.js

React SDK

"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.resizeCn=void 0;const react_1=__importDefault(require("react")),css_var_1=__importDefault(require("../styles/css-var")),input_style_1=require("../styles/input-style"),jsx_style_1=__importDefault(require("../styles/jsx-style")),cursor_1=require("../utils/cursor"),cn="bh-rsz";exports.resizeCn=cn;const Resizer=({direction:e,reverse:t,resizing:n,resized:r})=>{const s=(s,c,o,i)=>{if(!e)return;const l=s.parentElement,u=l.getBoundingClientRect();let a,d=c,_=o,p=u.width,h=u.height,v="";if("x"===e){const e=e=>{l.style.width=(e-d)*(t?-1:1)+p+"px",n?.()};v="col-resize",a=i?t=>e(t.touches[0].clientX):t=>e(t.clientX)}else if("y"===e){const e=e=>{l.style.height=(e-_)*(t?-1:1)+h+"px",n?.()};v="row-resize",a=i?t=>e(t.touches[0].clientY):t=>e(t.clientY)}else{const e=(e,r)=>{l.style.width=(e-d)*(t?-1:1)+p+"px",l.style.height=(r-_)*(t?-1:1)+h+"px",n?.()};v="nwse-resize",a=i?t=>e(t.touches[0].clientX,t.touches[0].clientY):t=>e(t.clientX,t.clientY)}if(i){const e=()=>{window.removeEventListener("touchmove",a),window.removeEventListener("touchend",e),r?.()};window.addEventListener("touchend",e),window.addEventListener("touchmove",a)}else{(0,cursor_1.setCursor)(v);const e=()=>{window.removeEventListener("mousemove",a),window.removeEventListener("mouseup",e),(0,cursor_1.releaseCursor)(),r?.()};window.addEventListener("mouseup",e),window.addEventListener("mousemove",a)}};return null==e?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${cn}_${String(e)}`,onMouseDown:e=>s(e.currentTarget,e.clientX,e.clientY),onTouchStart:e=>s(e.currentTarget,e.touches[0].clientX,e.touches[0].clientY,!0)},Style)},Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${cn}_x,\n.${cn}_y,\n.${cn}_xy {\n  box-sizing: border-box;\n  position: absolute;\n  flex: none;\n  background: transparent;\n  z-index: 999;\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.1s;\n}\n*:hover > .${cn}_x,\n*:hover > .${cn}_y,\n*:hover > .${cn}_xy,\n.${cn}_x:active,\n.${cn}_y:active,\n.${cn}_xy:active {\n  opacity: 0.3;\n}\n.${cn}_x {\n  height: calc(100% - ${css_var_1.default.pdy} * 2);\n  width: 5px;\n  top: ${css_var_1.default.pdy};\n  right: 0px;\n  cursor: col-resize;\n}\n.${input_style_1.inputCn}[placeholder] > .${cn}_x {\n  top: calc(${css_var_1.default.pdy} + ${css_var_1.default.phsize});\n  height: calc(100% - ${css_var_1.default.pdy} * 2 - ${css_var_1.default.phsize});\n}\n.${cn}_x {\n  border-right: 3px double ${css_var_1.default.bdc};\n}\n.${cn}_y {\n  width: calc(100% - ${css_var_1.default.pdx} * 2);\n  height: 5px;\n  bottom: 0px;\n  left: ${css_var_1.default.pdx};\n  cursor: row-resize;\n}\n.${cn}_y {\n  border-bottom: 3px double ${css_var_1.default.bdc};\n}\n.${cn}_xy {\n  width: 8px;\n  height: 8px;\n  bottom: 0px;\n  right: 0px;\n  cursor: nwse-resize;\n}\n.${cn}_xy {\n  border-bottom: 3px double ${css_var_1.default.bdc};\n  border-right: 3px double ${css_var_1.default.bdc};\n}\n`));exports.default=Resizer;