@bizhermit/react-sdk
Version:
React SDK
1 lines • 6.91 kB
JavaScript
;var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var c=Object.getOwnPropertyDescriptor(t,r);c&&!("get"in c?!t.__esModule:c.writable||c.configurable)||(c={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,c)}: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.useSplitContainer=exports.SplitContentWrapper=void 0;const react_1=__importStar(require("react")),core_style_1=require("../styles/core-style"),css_var_1=__importStar(require("../styles/css-var")),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),cursor_1=require("../utils/cursor"),mask_1=__importStar(require("../popups/mask")),cn="bh-spl",defaultSize="calc(50% - 2.5px)",SplitContentWrapper=({children:e})=>react_1.default.createElement(react_1.default.Fragment,null,e);exports.SplitContentWrapper=SplitContentWrapper;const SplitContainer=react_1.default.forwardRef(((e,t)=>{const r=(0,mask_1.useMask)(),n=(0,react_1.useRef)(),c=(0,react_1.useRef)({}),[a,i]=(0,react_1.useState)({}),[l,s]=(0,react_1.useState)({}),o=(0,react_1.useRef)({c1:!0,c2:!0}),[u,d]=(0,react_1.useReducer)(((t,r)=>{let n=r.primary??t.c1,c=r.secondary??t.c2;return null!=e.$hidePrimary&&(n=!e.$hidePrimary),null!=e.$hideSecondary&&(c=!e.$hideSecondary),o.current=n||c?{c1:n,c2:c}:t}),(()=>{let t=!0,r=!0;return e.$defaultHidePrimary&&(t=!1),null!=e.$hidePrimary&&(t=!e.$hidePrimary),e.$defaultHideSecondary&&(r=!1),null!=e.$hideSecondary&&(r=!e.$hideSecondary),t||r||(t=!0),o.current={c1:t,c2:r}})()),_=(0,react_1.useRef)(e.$defaultSecondarySize??defaultSize);(0,react_1.useMemo)((()=>{_.current=e.$defaultSecondarySize??defaultSize}),[e.$column]);const h=(t,r,c,a)=>{if(!0===e.$disabled)return;const i=t.parentElement,l=e.$column?c:r;let s,o=0,u=0,d=0,h="col-resize";if(e.$column?(o=n.current.getBoundingClientRect().height,u=i.getBoundingClientRect().height-t.getBoundingClientRect().height,d=0,h="row-resize",s=t=>n.current.style.height=(_.current=Math.max(d,Math.min(u,o+(l-t)*(e.$reverse?-1:1))))+"px"):(o=n.current.getBoundingClientRect().width,u=i.getBoundingClientRect().width-t.getBoundingClientRect().width,d=0,h="col-resize",s=t=>n.current.style.width=(_.current=Math.max(d,Math.min(u,o+(l-t)*(e.$reverse?-1:1))))+"px"),a){const t=e.$column?e=>s(e.touches[0].clientY):e=>s(e.touches[0].clientX),r=()=>{window.removeEventListener("touchmove",t),window.removeEventListener("touchend",r)};window.addEventListener("touchend",r),window.addEventListener("touchmove",t)}else{(0,cursor_1.setCursor)(h);const t=e.$column?e=>s(e.clientY):e=>s(e.clientX),r=()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",r),(0,cursor_1.releaseCursor)()};window.addEventListener("mouseup",r),window.addEventListener("mousemove",t)}},f=(0,react_1.useMemo)((()=>({dispatch:e=>(null==c.current.c2?s(e??{}):c.current.c2(e),f),setDispatcher:e=>(c.current.c1=e,f),setVisible:e=>(d({primary:e.self,secondary:e.partner}),f),isVisibleSelf:()=>o.current.c1,isVisiblePartner:()=>o.current.c2})),[]),m=(0,react_1.useMemo)((()=>({dispatch:e=>(null==c.current.c1?i(e??{}):c.current.c1(e),m),setDispatcher:e=>(c.current.c2=e,m),setVisible:e=>(d({primary:e.partner,secondary:e.self}),m),isVisibleSelf:()=>o.current.c2,isVisiblePartner:()=>o.current.c1})),[]);return(0,react_1.useEffect)((()=>{d({})}),[e.$hidePrimary,e.$hideSecondary]),(0,react_1.useEffect)((()=>{e.$hook?._set({setSecondarySize:e=>{const t=n.current?.parentElement;if(null==t)return;const r=t.getAttribute("data-flow");let c=e;null==c&&(c=defaultSize),"number"==typeof c&&(c+="px"),"column"===r?n.current.style.height=c:n.current.style.width=c},setVisible:d,showMask:e=>r.show(e),closeMask:()=>r.close()})}),[e.$hook?._set]),react_1.default.createElement(mask_1.default,{...(0,attributes_1.attributesWithoutChildren)(e),ref:t,$hook:r,$fto:e.$fto,$row:!0!==e.$column,$className:cn,$scroll:!1,$data:{"data-reverse":e.$reverse}},react_1.default.createElement("div",{className:`${cn}-c1 ${core_style_1.sbCn}`,style:{display:u.c1?void 0:"none"}},(0,react_1.cloneElement)(e.children[0],{...a,$$mask:r,$$splitController:f})),u.c1&&u.c2&&!0!==e.$disabled&&null==e.$secondarySize?react_1.default.createElement("div",{className:`${cn}-handle`,onMouseDown:e=>h(e.currentTarget,e.clientX,e.clientY),onTouchStart:e=>h(e.currentTarget,e.touches[0].clientX,e.touches[0].clientY,!0)}):react_1.default.createElement(react_1.default.Fragment,null),react_1.default.createElement("div",{ref:n,className:`${cn}-c2 ${core_style_1.sbCn}`,style:{display:u.c2?void 0:"none",height:e.$column?e.$secondarySize??_.current:void 0,width:e.$column?void 0:e.$secondarySize??_.current},"data-fill":u.c1?void 0:""},(0,react_1.cloneElement)(e.children[1],{...l,$$mask:r,$$splitController:m})),Style)})),useSplitContainer=()=>{const e=(0,react_1.useRef)({});return{setSecondarySize:(0,react_1.useCallback)((t=>{e.current.setSecondarySize?.(t)}),[]),setVisible:(0,react_1.useCallback)((({primary:t,secondary:r})=>{e.current.setVisible?.({primary:t,secondary:r})}),[]),showMask:(0,react_1.useCallback)((t=>{e.current.showMask?.(t)}),[]),closeMask:(0,react_1.useCallback)((()=>{e.current.closeMask?.()}),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useSplitContainer=useSplitContainer;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${cn}[data-flow="col"][data-reverse="true"] {\n flex-direction: column-reverse;\n}\n.${cn}[data-flow="row"][data-reverse="true"] {\n flex-direction: row-reverse;\n}\n.${cn}-handle {\n background: ${css_var_1.default.bdc};\n touch-action: none;\n opacity: 0.2;\n transition: opacity 0.1s;\n}\n.${cn}-handle:hover {\n opacity: 0.4;\n}\n.${cn}-handle:active {\n opacity: 0.5;\n}\n.${cn}-c1, .${cn}-c2 {\n ${css_var_1.CssPV.flex}\n flex: none;\n max-height: 100%;\n max-width: 100%;\n}\n.${cn}-c1,\n.${cn}-c2[data-fill] {\n flex: 1;\n}\n.${cn}[data-flow="row"] > .${cn}-handle {\n height: 100%;\n width: 5px;\n cursor: col-resize;\n}\n.${cn}[data-flow="row"] > .${cn}-c1,\n.${cn}[data-flow="row"] > .${cn}-c2 {\n height: 100%;\n}\n.${cn}[data-flow="col"] > .${cn}-handle {\n height: 5px;\n width: 100%;\n cursor: row-resize;\n}\n.${cn}[data-flow="col"] > .${cn}-c1,\n.${cn}[data-flow="col"] > .${cn}-c2 {\n width: 100%;\n}\n`));exports.default=SplitContainer;