UNPKG

dockview

Version:

React docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels

github.com/mathuo/dockview

mathuo/dockview

8 lines (7 loc) • 16.9 kB
1
2
3
4
5
6
7
8
/** * dockview * @version 6.2.2 * @link https://github.com/mathuo/dockview * @license MIT */ "use strict";var e=require("dockview-core"),t=require("react"),n=require("react-dom");const r=(e,n)=>{const[,r]=t.useState(0),o=t.useRef(e.componentProps);return t.useImperativeHandle(n,()=>({update:e=>{o.current=Object.assign(Object.assign({},o.current),e),r(e=>e+1)}}),[]),t.createElement(e.component,o.current)};r.displayName="DockviewReactJsBridge";const o=(()=>{let e=1;return{next:()=>`dockview_react_portal_key_${(e++).toString()}`}})(),a=t.createContext({});class i{constructor(e,t,n,r,o){this.parent=e,this.portalStore=t,this.component=n,this.parameters=r,this.context=o,this._initialProps={},this.disposed=!1,this.createPortal()}update(e){if(this.disposed)throw new Error("invalid operation: resource is already disposed");this.componentInstance?this.componentInstance.update(e):this._initialProps=Object.assign(Object.assign({},this._initialProps),e)}createPortal(){if(this.disposed)throw new Error("invalid operation: resource is already disposed");if(!c(this.component))throw new Error("Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components");const e=t.createElement(t.forwardRef(r),{component:this.component,componentProps:this.parameters,ref:e=>{this.componentInstance=e,Object.keys(this._initialProps).length>0&&(this.componentInstance.update(this._initialProps),this._initialProps={})}}),i=this.context?t.createElement(a.Provider,{value:this.context},e):e,s=n.createPortal(i,this.parent,o.next());this.ref={portal:s,disposable:this.portalStore.addPortal(s)}}dispose(){var e;null===(e=this.ref)||void 0===e||e.disposable.dispose(),this.disposed=!0}}const s=()=>{const[n,r]=t.useState([]);t.useDebugValue(`Portal count: ${n.length}`);return[n,t.useCallback(t=>{r(e=>[...e,t]);let n=!1;return e.DockviewDisposable.from(()=>{if(n)throw new Error("invalid operation: resource already disposed");n=!0,r(e=>e.filter(e=>e!==t))})},[])]};function c(e){return"function"==typeof e||!!(null==e?void 0:e.$$typeof)}class p{get element(){return this._element}constructor(t,n,r){this.id=t,this.component=n,this.reactPortalStore=r,this._onDidFocus=new e.DockviewEmitter,this.onDidFocus=this._onDidFocus.event,this._onDidBlur=new e.DockviewEmitter,this.onDidBlur=this._onDidBlur.event,this._element=document.createElement("div"),this._element.className="dv-react-part",this._element.style.height="100%",this._element.style.width="100%"}focus(){}init(e){this.part=new i(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi})}update(e){var t;null===(t=this.part)||void 0===t||t.update({params:e.params})}layout(e,t){}dispose(){var e;this._onDidFocus.dispose(),this._onDidBlur.dispose(),null===(e=this.part)||void 0===e||e.dispose()}}class l{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement("div"),this._element.className="dv-react-part",this._element.style.height="100%",this._element.style.width="100%"}focus(){}init(e){this.part=new i(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,containerApi:e.containerApi,tabLocation:e.tabLocation})}update(e){var t;null===(t=this.part)||void 0===t||t.update({params:e.params})}layout(e,t){}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class u{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement("div"),this._element.className="dv-react-part",this._element.style.height="100%",this._element.style.width="100%"}init(e){this.part=new i(this.element,this.reactPortalStore,this.component,{group:e.group,containerApi:e.containerApi})}focus(){}update(e){var t,n,r;this.parameters&&(this.parameters.params=e.params),null===(t=this.part)||void 0===t||t.update({params:null!==(r=null===(n=this.parameters)||void 0===n?void 0:n.params)&&void 0!==r?r:{}})}layout(e,t){}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class d{get element(){return this._element}get part(){return this._part}constructor(t,n,r){this.component=t,this.reactPortalStore=n,this._group=r,this.mutableDisposable=new e.DockviewMutableDisposable,this._element=document.createElement("div"),this._element.className="dv-react-part",this._element.style.height="100%",this._element.style.width="100%"}init(t){this.mutableDisposable.value=new e.DockviewCompositeDisposable(this._group.model.onDidAddPanel(()=>{this.updatePanels()}),this._group.model.onDidRemovePanel(()=>{this.updatePanels()}),this._group.model.onDidActivePanelChange(()=>{this.updateActivePanel()}),t.api.onDidActiveChange(()=>{this.updateGroupActive()}),t.api.onDidLocationChange(e=>{this.updateLocation(e.location)})),this._part=new i(this.element,this.reactPortalStore,this.component,{api:t.api,containerApi:t.containerApi,panels:this._group.model.panels,activePanel:this._group.model.activePanel,isGroupActive:this._group.api.isActive,group:this._group,headerPosition:this._group.model.headerPosition,location:t.api.location})}dispose(){var e;this.mutableDisposable.dispose(),null===(e=this._part)||void 0===e||e.dispose()}update(e){var t;null===(t=this._part)||void 0===t||t.update(e.params)}updatePanels(){this.update({params:{panels:this._group.model.panels}})}updateActivePanel(){this.update({params:{activePanel:this._group.model.activePanel}})}updateGroupActive(){this.update({params:{isGroupActive:this._group.api.isActive}})}updateLocation(e){this.update({params:{location:e}})}}class m{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement("div"),this._element.className="dv-react-part",this._element.style.height="100%",this._element.style.width="100%"}init(e){this.part=new i(this._element,this.reactPortalStore,this.component,e)}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}class h{get element(){return this._element}constructor(e,t){this.component=e,this.reactPortalStore=t,this._element=document.createElement("div"),this._element.className="dv-react-part",this._element.style.display="inline-flex"}init(e){this.part=new i(this._element,this.reactPortalStore,this.component,{tabGroup:e.tabGroup,api:e.api})}update(e){var t;null===(t=this.part)||void 0===t||t.update({tabGroup:e.tabGroup})}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}function f(e,t){return e?n=>new d(e,t,n):void 0}const v="props.defaultTabComponent";const P=t.forwardRef((n,r)=>{const o=t.useRef(null),a=t.useRef(void 0),[i,c]=s();t.useImperativeHandle(r,()=>o.current,[]);const d=t.useRef({});return t.useEffect(()=>{const t={};e.PROPERTY_KEYS_DOCKVIEW.forEach(e=>{const r=e,o=n[r];r in n&&o!==d.current[r]&&(t[r]=o)}),a.current&&a.current.updateOptions(t),d.current=n},e.PROPERTY_KEYS_DOCKVIEW.map(e=>n[e])),t.useEffect(()=>{var t;if(!o.current)return;const r=null!==(t=n.tabComponents)&&void 0!==t?t:{};n.defaultTabComponent&&(r[v]=n.defaultTabComponent);const i={createLeftHeaderActionComponent:f(n.leftHeaderActionsComponent,{addPortal:c}),createRightHeaderActionComponent:f(n.rightHeaderActionsComponent,{addPortal:c}),createPrefixHeaderActionComponent:f(n.prefixHeaderActionsComponent,{addPortal:c}),createComponent:e=>new p(e.id,n.components[e.name],{addPortal:c}),createTabComponent:e=>new l(e.id,r[e.name],{addPortal:c}),createWatermarkComponent:n.watermarkComponent?()=>new u("watermark",n.watermarkComponent,{addPortal:c}):void 0,defaultTabComponent:n.defaultTabComponent?v:void 0,createContextMenuItemComponent:e=>{if(e.component)return new m(e.id,e.component,{addPortal:c})}},s=function(t){return e.PROPERTY_KEYS_DOCKVIEW.reduce((e,n)=>(n in t&&(e[n]=t[n]),e),{})}(n);if(n.tabGroupChipComponent){const e=n.tabGroupChipComponent;s.createTabGroupChipComponent=()=>new h(e,{addPortal:c})}const d=e.createDockview(o.current,Object.assign(Object.assign({},s),i)),{clientWidth:P,clientHeight:w}=o.current;return d.layout(P,w),n.onReady&&n.onReady({api:d}),a.current=d,()=>{a.current=void 0,d.dispose()}},[]),t.useEffect(()=>{if(!a.current)return()=>{};const e=a.current.onDidDrop(e=>{n.onDidDrop&&n.onDidDrop(e)});return()=>{e.dispose()}},[n.onDidDrop]),t.useEffect(()=>{if(!a.current)return()=>{};const e=a.current.onWillDrop(e=>{n.onWillDrop&&n.onWillDrop(e)});return()=>{e.dispose()}},[n.onWillDrop]),t.useEffect(()=>{a.current&&a.current.updateOptions({createTabGroupChipComponent:n.tabGroupChipComponent?()=>new h(n.tabGroupChipComponent,{addPortal:c}):void 0})},[n.tabGroupChipComponent]),t.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:e=>new p(e.id,n.components[e.name],{addPortal:c})})},[n.components]),t.useEffect(()=>{var e;if(!a.current)return;const t=null!==(e=n.tabComponents)&&void 0!==e?e:{};n.defaultTabComponent&&(t[v]=n.defaultTabComponent),a.current.updateOptions({defaultTabComponent:n.defaultTabComponent?v:void 0,createTabComponent:e=>new l(e.id,t[e.name],{addPortal:c})})},[n.tabComponents,n.defaultTabComponent]),t.useEffect(()=>{a.current&&a.current.updateOptions({createWatermarkComponent:n.watermarkComponent?()=>new u("watermark",n.watermarkComponent,{addPortal:c}):void 0})},[n.watermarkComponent]),t.useEffect(()=>{a.current&&a.current.updateOptions({createRightHeaderActionComponent:f(n.rightHeaderActionsComponent,{addPortal:c})})},[n.rightHeaderActionsComponent]),t.useEffect(()=>{a.current&&a.current.updateOptions({createLeftHeaderActionComponent:f(n.leftHeaderActionsComponent,{addPortal:c})})},[n.leftHeaderActionsComponent]),t.useEffect(()=>{a.current&&a.current.updateOptions({createPrefixHeaderActionComponent:f(n.prefixHeaderActionsComponent,{addPortal:c})})},[n.prefixHeaderActionsComponent]),t.createElement("div",{style:{height:"100%",width:"100%"},ref:o},i)});P.displayName="DockviewComponent","function"==typeof SuppressedError&&SuppressedError;const w=()=>t.createElement("svg",{height:"11",width:"11",viewBox:"0 0 28 28","aria-hidden":"false",focusable:!1,className:"dv-svg"},t.createElement("path",{d:"M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z"}));class C extends e.SplitviewPanel{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var t,n;return new i(this.element,this.reactPortalStore,this.reactComponent,{params:null!==(n=null===(t=this._params)||void 0===t?void 0:t.params)&&void 0!==n?n:{},api:this.api,containerApi:new e.SplitviewApi(this._params.accessor)})}}const E=t.forwardRef((n,r)=>{const o=t.useRef(null),a=t.useRef(void 0),[i,c]=s();t.useImperativeHandle(r,()=>o.current,[]);const p=t.useRef({});return t.useEffect(()=>{const t={};e.PROPERTY_KEYS_SPLITVIEW.forEach(e=>{const r=e,o=n[r];r in n&&o!==p.current[r]&&(t[r]=o)}),a.current&&a.current.updateOptions(t),p.current=n},e.PROPERTY_KEYS_SPLITVIEW.map(e=>n[e])),t.useEffect(()=>{if(!o.current)return()=>{};const t={createComponent:e=>new C(e.id,e.name,n.components[e.name],{addPortal:c})},r=e.createSplitview(o.current,Object.assign(Object.assign({},function(t){return e.PROPERTY_KEYS_SPLITVIEW.reduce((e,n)=>(n in t&&(e[n]=t[n]),e),{})}(n)),t)),{clientWidth:i,clientHeight:s}=o.current;return r.layout(i,s),n.onReady&&n.onReady({api:r}),a.current=r,()=>{a.current=void 0,r.dispose()}},[]),t.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:e=>new C(e.id,e.name,n.components[e.name],{addPortal:c})})},[n.components]),t.createElement("div",{style:{height:"100%",width:"100%"},ref:o},i)});E.displayName="SplitviewComponent";class _ extends e.GridviewPanel{constructor(e,t,n,r){super(e,t),this.reactComponent=n,this.reactPortalStore=r}getComponent(){var t,n;return new i(this.element,this.reactPortalStore,this.reactComponent,{params:null!==(n=null===(t=this._params)||void 0===t?void 0:t.params)&&void 0!==n?n:{},api:this.api,containerApi:new e.GridviewApi(this._params.accessor)})}}const b=t.forwardRef((n,r)=>{const o=t.useRef(null),a=t.useRef(void 0),[i,c]=s();t.useImperativeHandle(r,()=>o.current,[]);const p=t.useRef({});return t.useEffect(()=>{const t={};e.PROPERTY_KEYS_GRIDVIEW.forEach(e=>{const r=e,o=n[r];r in n&&o!==p.current[r]&&(t[r]=o)}),a.current&&a.current.updateOptions(t),p.current=n},e.PROPERTY_KEYS_GRIDVIEW.map(e=>n[e])),t.useEffect(()=>{if(!o.current)return()=>{};const t={createComponent:e=>new _(e.id,e.name,n.components[e.name],{addPortal:c})},r=e.createGridview(o.current,Object.assign(Object.assign({},function(t){return e.PROPERTY_KEYS_GRIDVIEW.reduce((e,n)=>(n in t&&(e[n]=t[n]),e),{})}(n)),t)),{clientWidth:i,clientHeight:s}=o.current;return r.layout(i,s),n.onReady&&n.onReady({api:r}),a.current=r,()=>{a.current=void 0,r.dispose()}},[]),t.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:e=>new _(e.id,e.name,n.components[e.name],{addPortal:c})})},[n.components]),t.createElement("div",{style:{height:"100%",width:"100%"},ref:o},i)});b.displayName="GridviewComponent";class g{get element(){return this._element}constructor(e,t,n){this.id=e,this.component=t,this.reactPortalStore=n,this._element=document.createElement("div"),this._element.style.height="100%",this._element.style.width="100%"}init(e){this.part=new i(this.element,this.reactPortalStore,this.component,{params:e.params,api:e.api,title:e.title,containerApi:e.containerApi})}toJSON(){return{id:this.id}}update(e){var t;null===(t=this.part)||void 0===t||t.update(e.params)}dispose(){var e;null===(e=this.part)||void 0===e||e.dispose()}}const R=t.forwardRef((n,r)=>{const o=t.useRef(null),a=t.useRef(void 0),[i,c]=s();t.useImperativeHandle(r,()=>o.current,[]);const p=t.useRef({});return t.useEffect(()=>{const t={};e.PROPERTY_KEYS_PANEVIEW.forEach(e=>{const r=e,o=n[r];r in n&&o!==p.current[r]&&(t[r]=o)}),a.current&&a.current.updateOptions(t),p.current=n},e.PROPERTY_KEYS_PANEVIEW.map(e=>n[e])),t.useEffect(()=>{var t;if(!o.current)return()=>{};const r=null!==(t=n.headerComponents)&&void 0!==t?t:{},i={createComponent:e=>new g(e.id,n.components[e.name],{addPortal:c}),createHeaderComponent:e=>new g(e.id,r[e.name],{addPortal:c})},s=e.createPaneview(o.current,Object.assign(Object.assign({},function(t){return e.PROPERTY_KEYS_PANEVIEW.reduce((e,n)=>(n in t&&(e[n]=t[n]),e),{})}(n)),i)),{clientWidth:p,clientHeight:l}=o.current;return s.layout(p,l),n.onReady&&n.onReady({api:s}),a.current=s,()=>{a.current=void 0,s.dispose()}},[]),t.useEffect(()=>{a.current&&a.current.updateOptions({createComponent:e=>new g(e.id,n.components[e.name],{addPortal:c})})},[n.components]),t.useEffect(()=>{var e;if(!a.current)return;const t=null!==(e=n.headerComponents)&&void 0!==e?e:{};a.current.updateOptions({createHeaderComponent:e=>new g(e.id,t[e.name],{addPortal:c})})},[n.headerComponents]),t.useEffect(()=>{if(!a.current)return()=>{};const e=a.current.onDidDrop(e=>{n.onDidDrop&&n.onDidDrop(e)});return()=>{e.dispose()}},[n.onDidDrop]),t.createElement("div",{style:{height:"100%",width:"100%"},ref:o},i)});R.displayName="PaneviewComponent",exports.DockviewDefaultTab=e=>{var{api:n,containerApi:r,params:o,hideClose:a,closeActionOverride:i,onPointerDown:s,onPointerUp:c,onPointerLeave:p,tabLocation:l}=e,u=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}(e,["api","containerApi","params","hideClose","closeActionOverride","onPointerDown","onPointerUp","onPointerLeave","tabLocation"]);const d=function(e){const[n,r]=t.useState(e.title);return t.useEffect(()=>{const t=e.onDidTitleChange(e=>{r(e.title)});return n!==e.title&&r(e.title),()=>{t.dispose()}},[e]),n}(n),m=t.useRef(!1),h=t.useCallback(e=>{e.preventDefault(),i?i():n.close()},[n,i]),f=t.useCallback(e=>{e.preventDefault()},[]),v=t.useCallback(e=>{m.current=1===e.button,null==s||s(e)},[s]),P=t.useCallback(e=>{m&&1===e.button&&!a&&(m.current=!1,h(e)),null==c||c(e)},[c,h,a]),C=t.useCallback(e=>{m.current=!1,null==p||p(e)},[p]);return t.createElement("div",Object.assign({"data-testid":"dockview-dv-default-tab"},u,{onPointerDown:v,onPointerUp:P,onPointerLeave:C,className:"dv-default-tab"}),t.createElement("span",{className:"dv-default-tab-content"},d),!a&&t.createElement("div",{className:"dv-default-tab-action",onPointerDown:f,onClick:h},t.createElement(w,null)))},exports.DockviewReact=P,exports.GridviewReact=b,exports.PaneviewReact=R,exports.ReactPart=i,exports.ReactPartContext=a,exports.SplitviewReact=E,exports.isReactComponent=c,exports.usePortalsLifecycle=s,Object.keys(e).forEach(function(t){"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});