dinocollab-core 2.1.24 → 2.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- import{defineProperty as t,slicedToArray as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as n}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useRef as a,useState as r,useLayoutEffect as c,useMemo as s}from"react";import{EViewMode as l}from"./view-mode.types.js";var u=function(t){var o=a(null),u=a(null),p=a(null),h=r("auto"),m=e(h,2),v=m[0],g=m[1];c((function(){var e=function(){var e,i,n,o,a=null!==(e=null===(i=u.current)||void 0===i?void 0:i.offsetHeight)&&void 0!==e?e:0,r=null!==(n=null===(o=p.current)||void 0===o?void 0:o.offsetHeight)&&void 0!==n?n:0,c=t.mode===l.List?a:r;g(c>0?c:"auto")};e();var i=new ResizeObserver(e);return u.current&&i.observe(u.current),p.current&&i.observe(p.current),function(){i.disconnect()}}),[t.mode,t.listNode,t.moduleNode,t.autoHeight]);var b=s((function(){var e=d.root,i=d.pane,n=d.paneList,o=d.paneModule,a=d.visible,r=d.hidden,c=d.autoHeight;return{root:[e,t.autoHeight?c:""],paneList:[i,n,t.mode===l.List?a:r],paneModule:[i,o,t.mode===l.Module?a:r]}}),[t.mode,t.autoHeight]);return i(f,{className:b.root.join(" "),children:n("div",{ref:o,className:d.content,style:"auto"===v?void 0:{height:"".concat(v,"px")},children:[i("div",{ref:u,className:b.paneList.join(" "),children:t.listNode}),i("div",{ref:p,className:b.paneModule.join(" "),children:t.moduleNode})]})})},d={root:"AnimationSwitch-root",content:"AnimationSwitch-content",autoHeight:"AnimationSwitch-auto-height",pane:"AnimationSwitch-pane",paneList:"AnimationSwitch-pane-list",paneModule:"AnimationSwitch-pane-module",visible:"AnimationSwitch-visible",hidden:"AnimationSwitch-hidden"},p=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(d[t]).concat((null==e?void 0:e.suffix)||"")},h={duration:.35,ease:[.25,.1,.25,1]},m="opacity ".concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),") , transform ").concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),")"),f=o("div")((function(e){var i=e.theme;return t(t(t(t(t(t(t({},p("root",{prefix:"&"}),{width:"100%"}),p("content"),{position:"relative",width:"100%",transition:"height ".concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),")")}),p("pane"),{position:"absolute",top:0,left:0,width:"100%",willChange:"opacity, transform",transition:m,paddingLeft:i.spacing(.5),paddingRight:i.spacing(.5)}),p("visible"),{opacity:1,transform:"translateY(0px) scale(1)",pointerEvents:"auto"}),p("hidden"),{opacity:0,transform:"translateY(".concat(i.spacing(2),") scale(0.98)"),pointerEvents:"none"}),p("autoHeight",{prefix:"&"}),{overflowY:"hidden"}),"&:not(".concat(p("autoHeight"),")"),t(t({height:"100%"},p("content"),{height:"100%"}),p("pane"),{height:"100%",display:"flex"}))}));export{f as AnimationSwitchStyled,d as animationSwitchClasses,u as default};
1
+ import{defineProperty as t,slicedToArray as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as n}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useRef as a,useState as r,useLayoutEffect as c,useMemo as s}from"react";import{EViewMode as l}from"./view-mode.types.js";var u=function(t){var o=a(null),u=a(null),p=a(null),h=r("auto"),m=e(h,2),f=m[0],g=m[1];c((function(){var e=function(){var e,i,n,o,a=null!==(e=null===(i=u.current)||void 0===i?void 0:i.offsetHeight)&&void 0!==e?e:0,r=null!==(n=null===(o=p.current)||void 0===o?void 0:o.offsetHeight)&&void 0!==n?n:0,c=t.mode===l.List?a:r;g(c>0?c:"auto")};e();var i=new ResizeObserver(e);return u.current&&i.observe(u.current),p.current&&i.observe(p.current),function(){i.disconnect()}}),[t.mode,t.listNode,t.moduleNode,t.autoHeight]);var b=s((function(){var e=d.root,i=d.pane,n=d.paneList,o=d.paneModule,a=d.visible,r=d.hidden,c=d.autoHeight;return{root:[e,t.autoHeight?c:""],paneList:[i,n,t.mode===l.List?a:r],paneModule:[i,o,t.mode===l.Module?a:r]}}),[t.mode,t.autoHeight]);return i(v,{className:b.root.join(" "),children:n("div",{ref:o,className:d.content,style:"auto"===f?void 0:{height:"".concat(f,"px")},children:[i("div",{ref:u,className:b.paneList.join(" "),children:t.listNode}),i("div",{ref:p,className:b.paneModule.join(" "),children:t.moduleNode})]})})},d={root:"AnimationSwitch-root",content:"AnimationSwitch-content",autoHeight:"AnimationSwitch-auto-height",pane:"AnimationSwitch-pane",paneList:"AnimationSwitch-pane-list",paneModule:"AnimationSwitch-pane-module",visible:"AnimationSwitch-visible",hidden:"AnimationSwitch-hidden"},p=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(d[t]).concat((null==e?void 0:e.suffix)||"")},h={duration:.35,ease:[.25,.1,.25,1]},m="opacity ".concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),") , transform ").concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),")"),v=o("div")((function(e){var i=e.theme;return t(t(t(t(t(t({},p("root",{prefix:"&"}),{width:"100%"}),p("content"),{position:"relative",width:"100%",transition:"height ".concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),")")}),p("pane"),{position:"absolute",top:0,left:0,width:"100%",willChange:"opacity, transform",transition:m,paddingLeft:i.spacing(.5),paddingRight:i.spacing(.5)}),p("visible"),{opacity:1,transform:"translateY(0px) scale(1)",pointerEvents:"auto"}),p("hidden"),{opacity:0,transform:"translateY(".concat(i.spacing(2),") scale(0.98)"),pointerEvents:"none"}),"&:not(".concat(p("autoHeight"),")"),t(t({height:"100%"},p("content"),{height:"100%"}),p("pane"),{height:"100%",display:"flex"}))}));export{v as AnimationSwitchStyled,d as animationSwitchClasses,u as default};
2
2
  //# sourceMappingURL=animation-switch.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"animation-switch.js","sources":["../../../src/data-view/animation-switch.tsx"],"sourcesContent":["import { styled } from '@mui/material'\r\nimport { FC, ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { EViewMode } from './view-mode.types'\r\n\r\ninterface IProps {\r\n mode: EViewMode\r\n moduleNode: ReactNode\r\n listNode: ReactNode\r\n autoHeight?: boolean\r\n}\r\n\r\nconst AnimationSwitch: FC<IProps> = (props) => {\r\n // refs to measure heights\r\n const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n const listRef = useRef<HTMLDivElement | null>(null)\r\n const moduleRef = useRef<HTMLDivElement | null>(null)\r\n const [height, setHeight] = useState<number | 'auto'>('auto')\r\n\r\n useLayoutEffect(() => {\r\n const measure = () => {\r\n const listH = listRef.current?.offsetHeight ?? 0\r\n const moduleH = moduleRef.current?.offsetHeight ?? 0\r\n const visibleH = props.mode === EViewMode.List ? listH : moduleH\r\n // if both are 0, keep auto\r\n setHeight(visibleH > 0 ? visibleH : 'auto')\r\n }\r\n\r\n // initial measure (after layout)\r\n measure()\r\n\r\n // observe dynamic content changes\r\n const ro = new ResizeObserver(measure)\r\n if (listRef.current) ro.observe(listRef.current)\r\n if (moduleRef.current) ro.observe(moduleRef.current)\r\n\r\n return () => {\r\n ro.disconnect()\r\n }\r\n }, [props.mode, props.listNode, props.moduleNode, props.autoHeight])\r\n\r\n const classes = useMemo(() => {\r\n const { root, pane, paneList, paneModule, visible, hidden, autoHeight } = animationSwitchClasses\r\n const rootClasses = [root, props.autoHeight ? autoHeight : '']\r\n const paneListClasses = [pane, paneList, props.mode === EViewMode.List ? visible : hidden]\r\n const paneModuleClasses = [pane, paneModule, props.mode === EViewMode.Module ? visible : hidden]\r\n return { root: rootClasses, paneList: paneListClasses, paneModule: paneModuleClasses }\r\n }, [props.mode, props.autoHeight])\r\n\r\n return (\r\n <AnimationSwitchStyled className={classes.root.join(' ')}>\r\n <div\r\n ref={wrapperRef}\r\n className={animationSwitchClasses.content}\r\n // set explicit height when measured\r\n style={height === 'auto' ? undefined : { height: `${height}px` }}\r\n >\r\n <div ref={listRef} className={classes.paneList.join(' ')}>\r\n {props.listNode}\r\n </div>\r\n <div ref={moduleRef} className={classes.paneModule.join(' ')}>\r\n {props.moduleNode}\r\n </div>\r\n </div>\r\n </AnimationSwitchStyled>\r\n )\r\n}\r\nexport default AnimationSwitch\r\n\r\nexport const animationSwitchClasses = {\r\n root: 'AnimationSwitch-root',\r\n content: 'AnimationSwitch-content',\r\n autoHeight: 'AnimationSwitch-auto-height',\r\n pane: 'AnimationSwitch-pane',\r\n paneList: 'AnimationSwitch-pane-list',\r\n paneModule: 'AnimationSwitch-pane-module',\r\n visible: 'AnimationSwitch-visible',\r\n hidden: 'AnimationSwitch-hidden'\r\n}\r\n\r\nconst getClasses = (key: keyof typeof animationSwitchClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${animationSwitchClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst TRANSITION = { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }\r\nconst TRANSITION_CSS = `opacity ${TRANSITION.duration}s cubic-bezier(${TRANSITION.ease.join(',')}) , transform ${\r\n TRANSITION.duration\r\n}s cubic-bezier(${TRANSITION.ease.join(',')})`\r\n\r\nexport const AnimationSwitchStyled = styled('div')(({ theme }) => ({\r\n [getClasses('root', { prefix: '&' })]: { width: '100%' },\r\n [getClasses('content')]: {\r\n position: 'relative',\r\n width: '100%',\r\n transition: `height ${TRANSITION.duration}s cubic-bezier(${TRANSITION.ease.join(',')})`\r\n },\r\n // base pane styling for both list/module panes\r\n [getClasses('pane')]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n willChange: 'opacity, transform',\r\n transition: TRANSITION_CSS,\r\n paddingLeft: theme.spacing(0.5),\r\n paddingRight: theme.spacing(0.5)\r\n },\r\n // visible/hidden state classes\r\n [getClasses('visible')]: {\r\n opacity: 1,\r\n transform: 'translateY(0px) scale(1)',\r\n pointerEvents: 'auto'\r\n },\r\n [getClasses('hidden')]: {\r\n opacity: 0,\r\n transform: `translateY(${theme.spacing(2)}) scale(0.98)`,\r\n pointerEvents: 'none'\r\n },\r\n // autoHeight mode\r\n [getClasses('autoHeight', { prefix: '&' })]: { overflowY: 'hidden' },\r\n [`&:not(${getClasses('autoHeight')})`]: {\r\n height: '100%',\r\n [getClasses('content')]: { height: '100%' },\r\n [getClasses('pane')]: { height: '100%', display: 'flex' }\r\n }\r\n}))\r\n"],"names":["AnimationSwitch","props","wrapperRef","useRef","listRef","moduleRef","_useState","useState","_useState2","_slicedToArray","height","setHeight","useLayoutEffect","measure","_listRef$current$offs","_listRef$current","_moduleRef$current$of","_moduleRef$current","listH","current","offsetHeight","moduleH","visibleH","mode","EViewMode","List","ro","ResizeObserver","observe","disconnect","listNode","moduleNode","autoHeight","classes","useMemo","root","animationSwitchClasses","pane","paneList","paneModule","visible","hidden","Module","_jsx","AnimationSwitchStyled","className","join","children","_jsxs","ref","content","style","undefined","concat","getClasses","key","options","prefix","suffix","TRANSITION","duration","ease","TRANSITION_CSS","styled","_ref","theme","_defineProperty","width","position","transition","top","left","willChange","paddingLeft","spacing","paddingRight","opacity","transform","pointerEvents","overflowY","display"],"mappings":"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"}
1
+ {"version":3,"file":"animation-switch.js","sources":["../../../src/data-view/animation-switch.tsx"],"sourcesContent":["import { styled } from '@mui/material'\r\nimport { FC, ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { EViewMode } from './view-mode.types'\r\n\r\ninterface IProps {\r\n mode: EViewMode\r\n moduleNode: ReactNode\r\n listNode: ReactNode\r\n autoHeight?: boolean\r\n}\r\n\r\nconst AnimationSwitch: FC<IProps> = (props) => {\r\n // refs to measure heights\r\n const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n const listRef = useRef<HTMLDivElement | null>(null)\r\n const moduleRef = useRef<HTMLDivElement | null>(null)\r\n const [height, setHeight] = useState<number | 'auto'>('auto')\r\n\r\n useLayoutEffect(() => {\r\n const measure = () => {\r\n const listH = listRef.current?.offsetHeight ?? 0\r\n const moduleH = moduleRef.current?.offsetHeight ?? 0\r\n const visibleH = props.mode === EViewMode.List ? listH : moduleH\r\n // if both are 0, keep auto\r\n setHeight(visibleH > 0 ? visibleH : 'auto')\r\n }\r\n\r\n // initial measure (after layout)\r\n measure()\r\n\r\n // observe dynamic content changes\r\n const ro = new ResizeObserver(measure)\r\n if (listRef.current) ro.observe(listRef.current)\r\n if (moduleRef.current) ro.observe(moduleRef.current)\r\n\r\n return () => {\r\n ro.disconnect()\r\n }\r\n }, [props.mode, props.listNode, props.moduleNode, props.autoHeight])\r\n\r\n const classes = useMemo(() => {\r\n const { root, pane, paneList, paneModule, visible, hidden, autoHeight } = animationSwitchClasses\r\n const rootClasses = [root, props.autoHeight ? autoHeight : '']\r\n const paneListClasses = [pane, paneList, props.mode === EViewMode.List ? visible : hidden]\r\n const paneModuleClasses = [pane, paneModule, props.mode === EViewMode.Module ? visible : hidden]\r\n return { root: rootClasses, paneList: paneListClasses, paneModule: paneModuleClasses }\r\n }, [props.mode, props.autoHeight])\r\n\r\n return (\r\n <AnimationSwitchStyled className={classes.root.join(' ')}>\r\n <div\r\n ref={wrapperRef}\r\n className={animationSwitchClasses.content}\r\n // set explicit height when measured\r\n style={height === 'auto' ? undefined : { height: `${height}px` }}\r\n >\r\n <div ref={listRef} className={classes.paneList.join(' ')}>\r\n {props.listNode}\r\n </div>\r\n <div ref={moduleRef} className={classes.paneModule.join(' ')}>\r\n {props.moduleNode}\r\n </div>\r\n </div>\r\n </AnimationSwitchStyled>\r\n )\r\n}\r\nexport default AnimationSwitch\r\n\r\nexport const animationSwitchClasses = {\r\n root: 'AnimationSwitch-root',\r\n content: 'AnimationSwitch-content',\r\n autoHeight: 'AnimationSwitch-auto-height',\r\n pane: 'AnimationSwitch-pane',\r\n paneList: 'AnimationSwitch-pane-list',\r\n paneModule: 'AnimationSwitch-pane-module',\r\n visible: 'AnimationSwitch-visible',\r\n hidden: 'AnimationSwitch-hidden'\r\n}\r\n\r\nconst getClasses = (key: keyof typeof animationSwitchClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${animationSwitchClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst TRANSITION = { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }\r\nconst TRANSITION_CSS = `opacity ${TRANSITION.duration}s cubic-bezier(${TRANSITION.ease.join(',')}) , transform ${\r\n TRANSITION.duration\r\n}s cubic-bezier(${TRANSITION.ease.join(',')})`\r\n\r\nexport const AnimationSwitchStyled = styled('div')(({ theme }) => ({\r\n [getClasses('root', { prefix: '&' })]: { width: '100%' },\r\n [getClasses('content')]: {\r\n position: 'relative',\r\n width: '100%',\r\n transition: `height ${TRANSITION.duration}s cubic-bezier(${TRANSITION.ease.join(',')})`\r\n },\r\n // base pane styling for both list/module panes\r\n [getClasses('pane')]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n willChange: 'opacity, transform',\r\n transition: TRANSITION_CSS,\r\n paddingLeft: theme.spacing(0.5),\r\n paddingRight: theme.spacing(0.5)\r\n },\r\n // visible/hidden state classes\r\n [getClasses('visible')]: {\r\n opacity: 1,\r\n transform: 'translateY(0px) scale(1)',\r\n pointerEvents: 'auto'\r\n },\r\n [getClasses('hidden')]: {\r\n opacity: 0,\r\n transform: `translateY(${theme.spacing(2)}) scale(0.98)`,\r\n pointerEvents: 'none'\r\n },\r\n // autoHeight mode\r\n // [getClasses('autoHeight', { prefix: '&' })]: { overflowY: 'hidden' },\r\n [`&:not(${getClasses('autoHeight')})`]: {\r\n height: '100%',\r\n [getClasses('content')]: { height: '100%' },\r\n [getClasses('pane')]: { height: '100%', display: 'flex' }\r\n }\r\n}))\r\n"],"names":["AnimationSwitch","props","wrapperRef","useRef","listRef","moduleRef","_useState","useState","_useState2","_slicedToArray","height","setHeight","useLayoutEffect","measure","_listRef$current$offs","_listRef$current","_moduleRef$current$of","_moduleRef$current","listH","current","offsetHeight","moduleH","visibleH","mode","EViewMode","List","ro","ResizeObserver","observe","disconnect","listNode","moduleNode","autoHeight","classes","useMemo","root","animationSwitchClasses","pane","paneList","paneModule","visible","hidden","Module","_jsx","AnimationSwitchStyled","className","join","children","_jsxs","ref","content","style","undefined","concat","getClasses","key","options","prefix","suffix","TRANSITION","duration","ease","TRANSITION_CSS","styled","_ref","theme","_defineProperty","width","position","transition","top","left","willChange","paddingLeft","spacing","paddingRight","opacity","transform","pointerEvents","display"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{inherits as t,createClass as o,objectSpread2 as e,classCallCheck as i,callSuper as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as s,Fragment as l}from"react/jsx-runtime";import{styled as a,Typography as d}from"@mui/material";import{memo as p,PureComponent as u}from"react";import{createViewModeModule as h,createViewModeList as v}from"./view-mode.content.js";import{EViewMode as c}from"./view-mode.types.js";import{LoadingError as g,LoadingWaiting as m,LoadingNoData as f,LoadingOverlay as k}from"./view-mode.units.js";import y from"./animation-switch.js";function w(a){var w=h(),M=v();return p(function(){function p(t){var o;return i(this,p),(o=n(this,p,[t])).state={currentMode:t.viewMode||c.Module},o}return t(p,u),o(p,[{key:"componentDidUpdate",value:function(t){t.viewMode!==this.props.viewMode&&this.props.viewMode&&this.setState({currentMode:this.props.viewMode})}},{key:"getInternalConfigs",value:function(){var t,o,e,i,n,r,s,l,d,p,u,h,v,c=Object.assign({},null==a||null===(t=a.list)||void 0===t?void 0:t.columns,null===(o=this.props.slots)||void 0===o||null===(o=o.list)||void 0===o?void 0:o.columns),k=Object.assign({},null==a?void 0:a.list,null===(e=this.props.slots)||void 0===e?void 0:e.list,{columns:c});return{NoData:null!==(i=null!==(n=null===(r=this.props.slots)||void 0===r?void 0:r.NoData)&&void 0!==n?n:null==a?void 0:a.NoData)&&void 0!==i?i:f,Skeleton:null!==(s=null!==(l=null===(d=this.props.slots)||void 0===d?void 0:d.Skeleton)&&void 0!==l?l:null==a?void 0:a.Skeleton)&&void 0!==s?s:m,ErrorData:null!==(p=null!==(u=null===(h=this.props.slots)||void 0===h?void 0:h.ErrorData)&&void 0!==u?u:null==a?void 0:a.ErrorData)&&void 0!==p?p:g,listConfigs:k,moduleConfigs:Object.assign({},null==a?void 0:a.module,null===(v=this.props.slots)||void 0===v?void 0:v.module)}}},{key:"getWrapperProps",value:function(){var t;return Object.assign({},null==a?void 0:a.wrapProps,null===(t=this.props.slots)||void 0===t?void 0:t.wrapProps)}},{key:"renderContentByMode",value:function(t){var o=this.getInternalConfigs();switch(t){case c.List:return s(M,{autoHeight:this.props.autoHeight,value:this.props.data,configs:o.listConfigs});case c.Module:return s(w,{autoHeight:this.props.autoHeight,data:this.props.data,configs:o.moduleConfigs});default:return r(d,{variant:"subtitle1",children:["Unsupported view mode: ",String(t)]})}}},{key:"getContentState",value:function(t){var o=this.getInternalConfigs(),e=o.NoData,i=o.ErrorData,n=o.Skeleton;return this.props.error?{key:"error",content:s(i,{error:this.props.error})}:this.props.loading&&0===this.props.data.length&&n?{key:"skeleton",content:s(n,{mode:t})}:0!==this.props.data.length||this.props.loading?this.props.data.length>0?{key:"content-".concat(t,"-").concat(this.props.data.length),content:r(l,{children:[this.props.loading&&s(k,{}),s(y,{autoHeight:this.props.autoHeight,mode:t,moduleNode:this.renderContentByMode(c.Module),listNode:this.renderContentByMode(c.List)})]})}:{key:"loading",content:s(k,{})}:{key:"no-data",content:s(e,{mode:t})}}},{key:"render",value:function(){var t=this.getWrapperProps(),o=this.getContentState(this.state.currentMode),i=o.key,n=o.content;return s(C,e(e({},t),{},{"data-key":i,children:n}))}}])}())}var C=a("div",{shouldForwardProp:function(t){return"color"!==t&&"bgcolor"!==t&&"sx"!==t}})((function(t){var o=t.theme;return{position:"relative",display:"flex",flexDirection:"column",height:"100%",minHeight:"100px",flex:1,paddingLeft:o.spacing(2),paddingRight:o.spacing(2),marginLeft:o.spacing(-2),marginRight:o.spacing(-2),overflow:"hidden"}}));export{w as createViewMode};
1
+ import{inherits as t,createClass as o,objectSpread2 as e,classCallCheck as i,callSuper as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as s,Fragment as l}from"react/jsx-runtime";import{styled as a,Typography as d}from"@mui/material";import{memo as p,PureComponent as u}from"react";import{createViewModeModule as c,createViewModeList as h}from"./view-mode.content.js";import{EViewMode as v}from"./view-mode.types.js";import{LoadingError as g,LoadingWaiting as m,LoadingNoData as f,LoadingOverlay as k}from"./view-mode.units.js";import y from"./animation-switch.js";function C(a){var C=c(),M=h();return p(function(){function p(t){var o;return i(this,p),(o=n(this,p,[t])).state={currentMode:t.viewMode||v.Module},o}return t(p,u),o(p,[{key:"componentDidUpdate",value:function(t){t.viewMode!==this.props.viewMode&&this.props.viewMode&&this.setState({currentMode:this.props.viewMode})}},{key:"getInternalConfigs",value:function(){var t,o,e,i,n,r,s,l,d,p,u,c,h,v=Object.assign({},null==a||null===(t=a.list)||void 0===t?void 0:t.columns,null===(o=this.props.slots)||void 0===o||null===(o=o.list)||void 0===o?void 0:o.columns),k=Object.assign({},null==a?void 0:a.list,null===(e=this.props.slots)||void 0===e?void 0:e.list,{columns:v});return{NoData:null!==(i=null!==(n=null===(r=this.props.slots)||void 0===r?void 0:r.NoData)&&void 0!==n?n:null==a?void 0:a.NoData)&&void 0!==i?i:f,Skeleton:null!==(s=null!==(l=null===(d=this.props.slots)||void 0===d?void 0:d.Skeleton)&&void 0!==l?l:null==a?void 0:a.Skeleton)&&void 0!==s?s:m,ErrorData:null!==(p=null!==(u=null===(c=this.props.slots)||void 0===c?void 0:c.ErrorData)&&void 0!==u?u:null==a?void 0:a.ErrorData)&&void 0!==p?p:g,listConfigs:k,moduleConfigs:Object.assign({},null==a?void 0:a.module,null===(h=this.props.slots)||void 0===h?void 0:h.module)}}},{key:"getWrapperProps",value:function(){var t;return Object.assign({},null==a?void 0:a.wrapProps,null===(t=this.props.slots)||void 0===t?void 0:t.wrapProps)}},{key:"renderContentByMode",value:function(t){var o=this.getInternalConfigs();switch(t){case v.List:return s(M,{autoHeight:this.props.autoHeight,value:this.props.data,configs:o.listConfigs});case v.Module:return s(C,{autoHeight:this.props.autoHeight,data:this.props.data,configs:o.moduleConfigs});default:return r(d,{variant:"subtitle1",children:["Unsupported view mode: ",String(t)]})}}},{key:"getContentState",value:function(t){var o=this.getInternalConfigs(),e=o.NoData,i=o.ErrorData,n=o.Skeleton;return this.props.error?{key:"error",content:s(i,{error:this.props.error})}:this.props.loading&&0===this.props.data.length&&n?{key:"skeleton",content:s(n,{mode:t})}:0!==this.props.data.length||this.props.loading?this.props.data.length>0?{key:"content-".concat(t,"-").concat(this.props.data.length),content:r(l,{children:[this.props.loading&&s(k,{}),s(y,{autoHeight:this.props.autoHeight,mode:t,moduleNode:this.renderContentByMode(v.Module),listNode:this.renderContentByMode(v.List)})]})}:{key:"loading",content:s(k,{})}:{key:"no-data",content:s(e,{mode:t})}}},{key:"render",value:function(){var t=this.getWrapperProps(),o=this.getContentState(this.state.currentMode),i=o.key,n=o.content;return s(w,e(e({},t),{},{"data-key":i,children:n}))}}])}())}var w=a("div",{shouldForwardProp:function(t){return"color"!==t&&"bgcolor"!==t&&"sx"!==t}})((function(t){var o=t.theme;return{position:"relative",display:"flex",flexDirection:"column",height:"100%",minHeight:"100px",flex:1,paddingLeft:o.spacing(2),paddingRight:o.spacing(2),marginLeft:o.spacing(-2),marginRight:o.spacing(-2)}}));export{C as createViewMode};
2
2
  //# sourceMappingURL=create.view-mode.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"create.view-mode.js","sources":["../../../src/data-view/create.view-mode.tsx"],"sourcesContent":["import { styled, Typography } from '@mui/material'\r\nimport { ComponentType, memo, PureComponent } from 'react'\r\nimport { createViewModeList, createViewModeModule } from './view-mode.content'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { LoadingError, LoadingNoData, LoadingOverlay, LoadingWaiting } from './view-mode.units'\r\nimport AnimationSwitch from './animation-switch'\r\n\r\ninterface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {}\r\n\r\n/**\r\n * Props for ViewMode component\r\n * @template T - Type extending IViewModeValidModel\r\n */\r\ninterface IViewModeProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n viewMode?: EViewMode\r\n ready?: boolean\r\n autoHeight?: boolean\r\n loading?: boolean\r\n error?: string\r\n slots?: IViewModeSlots<T>\r\n}\r\n\r\nexport function createViewMode<T extends IViewModeValidModel>(configs?: IViewModeConfigs<T>): ComponentType<IViewModeProps<T>> {\r\n // Pre-memoized components for better performance\r\n const MemoizedContentModeModule = createViewModeModule<T>()\r\n const MemoizedContentModeList = createViewModeList<T>()\r\n\r\n type State = {\r\n currentMode: EViewMode\r\n }\r\n\r\n class ViewMode extends PureComponent<IViewModeProps<T>, State> {\r\n constructor(props: IViewModeProps<T>) {\r\n super(props)\r\n this.state = { currentMode: props.viewMode || EViewMode.Module }\r\n }\r\n\r\n componentDidUpdate(prevProps: IViewModeProps<T>) {\r\n if (prevProps.viewMode !== this.props.viewMode && this.props.viewMode) {\r\n this.setState({ currentMode: this.props.viewMode })\r\n }\r\n }\r\n\r\n getInternalConfigs() {\r\n const columns = Object.assign({}, configs?.list?.columns, this.props.slots?.list?.columns)\r\n const listConfigs = Object.assign({}, configs?.list, this.props.slots?.list, { columns })\r\n return {\r\n NoData: this.props.slots?.NoData ?? configs?.NoData ?? LoadingNoData,\r\n Skeleton: this.props.slots?.Skeleton ?? configs?.Skeleton ?? LoadingWaiting,\r\n ErrorData: this.props.slots?.ErrorData ?? configs?.ErrorData ?? LoadingError,\r\n listConfigs,\r\n moduleConfigs: Object.assign({}, configs?.module, this.props.slots?.module)\r\n }\r\n }\r\n\r\n getWrapperProps() {\r\n return Object.assign({}, configs?.wrapProps, this.props.slots?.wrapProps)\r\n }\r\n\r\n renderContentByMode(currentMode: EViewMode) {\r\n const internalConfigs = this.getInternalConfigs()\r\n\r\n switch (currentMode) {\r\n case EViewMode.List:\r\n return <MemoizedContentModeList autoHeight={this.props.autoHeight} value={this.props.data} configs={internalConfigs.listConfigs} />\r\n case EViewMode.Module:\r\n return <MemoizedContentModeModule autoHeight={this.props.autoHeight} data={this.props.data} configs={internalConfigs.moduleConfigs} />\r\n default:\r\n return <Typography variant='subtitle1'>Unsupported view mode: {String(currentMode)}</Typography>\r\n }\r\n }\r\n\r\n getContentState(currentMode: EViewMode) {\r\n const { NoData, ErrorData, Skeleton } = this.getInternalConfigs()\r\n\r\n if (this.props.error) {\r\n return { key: 'error', content: <ErrorData error={this.props.error} /> }\r\n }\r\n\r\n if (this.props.loading && this.props.data.length === 0 && Skeleton) {\r\n return { key: 'skeleton', content: <Skeleton mode={currentMode} /> }\r\n }\r\n\r\n if (this.props.data.length === 0 && !this.props.loading) {\r\n return { key: 'no-data', content: <NoData mode={currentMode} /> }\r\n }\r\n\r\n if (this.props.data.length > 0) {\r\n return {\r\n key: `content-${currentMode}-${this.props.data.length}`,\r\n content: (\r\n <>\r\n {this.props.loading && <LoadingOverlay />}\r\n {/* Use AnimationSwitch to handle crossfade + measurement */}\r\n <AnimationSwitch\r\n autoHeight={this.props.autoHeight}\r\n mode={currentMode}\r\n moduleNode={this.renderContentByMode(EViewMode.Module)}\r\n listNode={this.renderContentByMode(EViewMode.List)}\r\n />\r\n </>\r\n )\r\n }\r\n }\r\n\r\n return { key: 'loading', content: <LoadingOverlay /> }\r\n }\r\n\r\n render() {\r\n const wrapperProps = this.getWrapperProps()\r\n\r\n const { key, content } = this.getContentState(this.state.currentMode)\r\n\r\n return (\r\n <Wrap {...(wrapperProps as any)} data-key={key}>\r\n {content}\r\n </Wrap>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewMode as unknown as ComponentType<IViewModeProps<T>>)\r\n}\r\n\r\nconst Wrap = styled('div', {\r\n // Only forward specific props to prevent MUI system props from being passed to DOM\r\n shouldForwardProp: (prop) => prop !== 'color' && prop !== 'bgcolor' && prop !== 'sx'\r\n})(({ theme }) => ({\r\n position: 'relative',\r\n // Remove overflow hidden to allow natural animations\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n minHeight: '100px',\r\n flex: 1,\r\n paddingLeft: theme.spacing(2),\r\n paddingRight: theme.spacing(2),\r\n marginLeft: theme.spacing(-2),\r\n marginRight: theme.spacing(-2),\r\n overflow: 'hidden'\r\n}))\r\n"],"names":["createViewMode","configs","MemoizedContentModeModule","createViewModeModule","MemoizedContentModeList","createViewModeList","memo","ViewMode","props","_this","_classCallCheck","_callSuper","state","currentMode","viewMode","EViewMode","Module","_inherits","PureComponent","_createClass","key","value","prevProps","this","setState","_configs$list","_this$props$slots","_this$props$slots2","_ref","_this$props$slots$NoD","_this$props$slots3","_ref2","_this$props$slots$Ske","_this$props$slots4","_ref3","_this$props$slots$Err","_this$props$slots5","_this$props$slots6","columns","Object","assign","list","slots","listConfigs","NoData","LoadingNoData","Skeleton","LoadingWaiting","ErrorData","LoadingError","moduleConfigs","module","_this$props$slots7","wrapProps","internalConfigs","getInternalConfigs","List","_jsx","autoHeight","data","_jsxs","Typography","variant","children","String","_this$getInternalConf","error","content","loading","length","mode","concat","_Fragment","LoadingOverlay","AnimationSwitch","moduleNode","renderContentByMode","listNode","wrapperProps","getWrapperProps","_this$getContentState","getContentState","Wrap","_objectSpread","styled","shouldForwardProp","prop","_ref4","theme","position","display","flexDirection","height","minHeight","flex","paddingLeft","spacing","paddingRight","marginLeft","marginRight","overflow"],"mappings":"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"}
1
+ {"version":3,"file":"create.view-mode.js","sources":["../../../src/data-view/create.view-mode.tsx"],"sourcesContent":["import { styled, Typography } from '@mui/material'\r\nimport { ComponentType, memo, PureComponent } from 'react'\r\nimport { createViewModeList, createViewModeModule } from './view-mode.content'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { LoadingError, LoadingNoData, LoadingOverlay, LoadingWaiting } from './view-mode.units'\r\nimport AnimationSwitch from './animation-switch'\r\n\r\ninterface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {}\r\n\r\n/**\r\n * Props for ViewMode component\r\n * @template T - Type extending IViewModeValidModel\r\n */\r\ninterface IViewModeProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n viewMode?: EViewMode\r\n ready?: boolean\r\n autoHeight?: boolean\r\n loading?: boolean\r\n error?: string\r\n slots?: IViewModeSlots<T>\r\n}\r\n\r\nexport function createViewMode<T extends IViewModeValidModel>(configs?: IViewModeConfigs<T>): ComponentType<IViewModeProps<T>> {\r\n // Pre-memoized components for better performance\r\n const MemoizedContentModeModule = createViewModeModule<T>()\r\n const MemoizedContentModeList = createViewModeList<T>()\r\n\r\n type State = {\r\n currentMode: EViewMode\r\n }\r\n\r\n class ViewMode extends PureComponent<IViewModeProps<T>, State> {\r\n constructor(props: IViewModeProps<T>) {\r\n super(props)\r\n this.state = { currentMode: props.viewMode || EViewMode.Module }\r\n }\r\n\r\n componentDidUpdate(prevProps: IViewModeProps<T>) {\r\n if (prevProps.viewMode !== this.props.viewMode && this.props.viewMode) {\r\n this.setState({ currentMode: this.props.viewMode })\r\n }\r\n }\r\n\r\n getInternalConfigs() {\r\n const columns = Object.assign({}, configs?.list?.columns, this.props.slots?.list?.columns)\r\n const listConfigs = Object.assign({}, configs?.list, this.props.slots?.list, { columns })\r\n return {\r\n NoData: this.props.slots?.NoData ?? configs?.NoData ?? LoadingNoData,\r\n Skeleton: this.props.slots?.Skeleton ?? configs?.Skeleton ?? LoadingWaiting,\r\n ErrorData: this.props.slots?.ErrorData ?? configs?.ErrorData ?? LoadingError,\r\n listConfigs,\r\n moduleConfigs: Object.assign({}, configs?.module, this.props.slots?.module)\r\n }\r\n }\r\n\r\n getWrapperProps() {\r\n return Object.assign({}, configs?.wrapProps, this.props.slots?.wrapProps)\r\n }\r\n\r\n renderContentByMode(currentMode: EViewMode) {\r\n const internalConfigs = this.getInternalConfigs()\r\n\r\n switch (currentMode) {\r\n case EViewMode.List:\r\n return <MemoizedContentModeList autoHeight={this.props.autoHeight} value={this.props.data} configs={internalConfigs.listConfigs} />\r\n case EViewMode.Module:\r\n return <MemoizedContentModeModule autoHeight={this.props.autoHeight} data={this.props.data} configs={internalConfigs.moduleConfigs} />\r\n default:\r\n return <Typography variant='subtitle1'>Unsupported view mode: {String(currentMode)}</Typography>\r\n }\r\n }\r\n\r\n getContentState(currentMode: EViewMode) {\r\n const { NoData, ErrorData, Skeleton } = this.getInternalConfigs()\r\n\r\n if (this.props.error) {\r\n return { key: 'error', content: <ErrorData error={this.props.error} /> }\r\n }\r\n\r\n if (this.props.loading && this.props.data.length === 0 && Skeleton) {\r\n return { key: 'skeleton', content: <Skeleton mode={currentMode} /> }\r\n }\r\n\r\n if (this.props.data.length === 0 && !this.props.loading) {\r\n return { key: 'no-data', content: <NoData mode={currentMode} /> }\r\n }\r\n\r\n if (this.props.data.length > 0) {\r\n return {\r\n key: `content-${currentMode}-${this.props.data.length}`,\r\n content: (\r\n <>\r\n {this.props.loading && <LoadingOverlay />}\r\n {/* Use AnimationSwitch to handle crossfade + measurement */}\r\n <AnimationSwitch\r\n autoHeight={this.props.autoHeight}\r\n mode={currentMode}\r\n moduleNode={this.renderContentByMode(EViewMode.Module)}\r\n listNode={this.renderContentByMode(EViewMode.List)}\r\n />\r\n </>\r\n )\r\n }\r\n }\r\n\r\n return { key: 'loading', content: <LoadingOverlay /> }\r\n }\r\n\r\n render() {\r\n const wrapperProps = this.getWrapperProps()\r\n\r\n const { key, content } = this.getContentState(this.state.currentMode)\r\n\r\n return (\r\n <Wrap {...(wrapperProps as any)} data-key={key}>\r\n {content}\r\n </Wrap>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewMode as unknown as ComponentType<IViewModeProps<T>>)\r\n}\r\n\r\nconst Wrap = styled('div', {\r\n // Only forward specific props to prevent MUI system props from being passed to DOM\r\n shouldForwardProp: (prop) => prop !== 'color' && prop !== 'bgcolor' && prop !== 'sx'\r\n})(({ theme }) => ({\r\n position: 'relative',\r\n // Remove overflow hidden to allow natural animations\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n minHeight: '100px',\r\n flex: 1,\r\n paddingLeft: theme.spacing(2),\r\n paddingRight: theme.spacing(2),\r\n marginLeft: theme.spacing(-2),\r\n marginRight: theme.spacing(-2),\r\n // overflow: 'hidden'\r\n}))\r\n"],"names":["createViewMode","configs","MemoizedContentModeModule","createViewModeModule","MemoizedContentModeList","createViewModeList","memo","ViewMode","props","_this","_classCallCheck","_callSuper","state","currentMode","viewMode","EViewMode","Module","_inherits","PureComponent","_createClass","key","value","prevProps","this","setState","_configs$list","_this$props$slots","_this$props$slots2","_ref","_this$props$slots$NoD","_this$props$slots3","_ref2","_this$props$slots$Ske","_this$props$slots4","_ref3","_this$props$slots$Err","_this$props$slots5","_this$props$slots6","columns","Object","assign","list","slots","listConfigs","NoData","LoadingNoData","Skeleton","LoadingWaiting","ErrorData","LoadingError","moduleConfigs","module","_this$props$slots7","wrapProps","internalConfigs","getInternalConfigs","List","_jsx","autoHeight","data","_jsxs","Typography","variant","children","String","_this$getInternalConf","error","content","loading","length","mode","concat","_Fragment","LoadingOverlay","AnimationSwitch","moduleNode","renderContentByMode","listNode","wrapperProps","getWrapperProps","_this$getContentState","getContentState","Wrap","_objectSpread","styled","shouldForwardProp","prop","_ref4","theme","position","display","flexDirection","height","minHeight","flex","paddingLeft","spacing","paddingRight","marginLeft","marginRight"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dinocollab-core",
3
- "version": "2.1.24",
3
+ "version": "2.1.25",
4
4
  "description": "Dinocollab core - libraries for building collaborative applications with React 18",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",