dinocollab-core 2.1.25 → 2.1.27
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
|
|
1
|
+
import{defineProperty as t,objectSpread2 as n,slicedToArray as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useRef as a,useState as u,useEffect as l,useMemo as c,cloneElement as s}from"react";import{EViewMode as m}from"./view-mode.types.js";var d={enter:300,exit:180,ease:"cubic-bezier(0.25, 0.1, 0.25, 1)",delayEnter:40,delayExit:0,transformOriginList:"top center",transformOriginModule:"top center",translateY:10,horizontalScale:.98,mountDelay:50,hold:100},f=function(t){var o=a(null),s=a(null),f=a(null),p=n(n({},d),t.animConfig||{}),w=u(t.mode),g=e(w,2),x=g[0],T=g[1],D=u(!0),L=e(D,2),H=L[0],O=L[1],S=a(null),A=a(null);l((function(){var n,e;if(t.mode!==x){A.current&&(window.clearTimeout(A.current),A.current=null),S.current=t.mode;var r=null===(n=o.current)||void 0===n?void 0:n.offsetHeight;o.current&&"number"==typeof r&&(o.current.style.height="".concat(r,"px"),o.current.style.transition="height ".concat(p.enter,"ms ").concat(p.ease)),O(!1);var i=p.exit+(null!==(e=p.hold)&&void 0!==e?e:0);return A.current=window.setTimeout((function(){var t=S.current;S.current=null,null!=t&&(T(t),requestAnimationFrame((function(){var n,e,r,i,a=null!==(n=null!==(e=null===(r=(t===m.List?s:f).current)||void 0===r?void 0:r.offsetHeight)&&void 0!==e?e:null===(i=o.current)||void 0===i?void 0:i.offsetHeight)&&void 0!==n?n:0;O(!0),o.current&&(o.current.style.height="".concat(a,"px"),window.setTimeout((function(){o.current&&(o.current.style.height="")}),p.enter))}))),A.current=null}),i),function(){A.current&&(window.clearTimeout(A.current),A.current=null)}}}),[t.mode,x]);var E=c((function(){var n=h.root,e=h.pane,r=h.paneList,i=h.paneModule,o=h.autoHeight;return{root:[n,t.autoHeight?o:""],paneList:[e,r],paneModule:[e,i]}}),[t.mode,t.autoHeight]);return r(y,{className:E.root.join(" "),children:i("div",{ref:o,className:h.content,children:[x===m.List&&r(v,{open:H,timeout:{enter:d.enter,exit:d.exit},mountDelay:p.mountDelay,anim:p,style:{transitionTimingFunction:d.ease,transitionDuration:"".concat(d.enter,"ms"),transitionDelay:"".concat(H?p.delayEnter:p.delayExit,"ms"),transformOrigin:p.transformOriginList},children:r("div",{ref:s,className:E.paneList.join(" "),"aria-hidden":x!==m.List,children:t.listNode})}),x===m.Module&&r(v,{open:H,timeout:{enter:d.enter,exit:d.exit},mountDelay:p.mountDelay,anim:p,style:{transitionTimingFunction:d.ease,transitionDuration:"".concat(d.enter,"ms"),transitionDelay:"".concat(H?p.delayEnter:p.delayExit,"ms"),transformOrigin:p.transformOriginModule},children:r("div",{ref:f,className:E.paneModule.join(" "),"aria-hidden":x!==m.Module,children:t.moduleNode})})]})})},h={root:"AnimationSwitch-root",content:"AnimationSwitch-content",autoHeight:"AnimationSwitch-auto-height",pane:"AnimationSwitch-pane",paneList:"AnimationSwitch-pane-list",paneModule:"AnimationSwitch-pane-module"},p=function(t,n){return"".concat((null==n?void 0:n.prefix)||"",".").concat(h[t]).concat((null==n?void 0:n.suffix)||"")},y=o("div")((function(n){return n.theme,t(t(t({},p("root",{prefix:"&"}),{width:"100%"}),p("content"),{position:"relative",width:"100%"}),"&:not(".concat(p("autoHeight"),")"),t(t({height:"100%"},p("content"),{height:"100%"}),p("pane"),{height:"100%",display:"flex"}))})),v=function(t){var r,i,o=t.open,c=t.timeout,m=t.mountDelay,f=t.style,h=t.anim,p=t.children,y=null!=h?h:d,v="number"==typeof c?c:null!==(r=null==c?void 0:c.enter)&&void 0!==r?r:y.enter,w="number"==typeof c?c:null!==(i=null==c?void 0:c.exit)&&void 0!==i?i:y.exit,g=null!=m?m:y.mountDelay,x=u(o),T=e(x,2),D=T[0],L=T[1],H=u(o),O=e(H,2),S=O[0],A=O[1],E=a(null),M=a(null);if(l((function(){if(o)return M.current&&(window.clearTimeout(M.current),M.current=null),L(!0),void(g>0?(E.current&&window.clearTimeout(E.current),E.current=window.setTimeout((function(){A(!0),E.current=null}),g)):A(!0));A(!1),E.current&&(window.clearTimeout(E.current),E.current=null),M.current&&window.clearTimeout(M.current),M.current=window.setTimeout((function(){L(!1),M.current=null}),w)}),[o,g,v,w]),l((function(){return function(){E.current&&window.clearTimeout(E.current),M.current&&window.clearTimeout(M.current)}}),[]),!D)return null;var b={transitionProperty:"opacity, transform",transitionTimingFunction:y.ease,transitionDuration:"".concat(S?v:w,"ms"),transitionDelay:"".concat(S?y.delayEnter:y.delayExit,"ms"),transformOrigin:(null==f?void 0:f.transformOrigin)||y.transformOriginList},j={opacity:0,transform:"translateY(".concat(y.translateY,"px) scaleX(").concat(y.horizontalScale,")")},N=n(n(n({},b),S?{opacity:1,transform:"translateY(0) scaleX(1)"}:j),f);return s(p,{style:N})};export{y as AnimationSwitchStyled,h as animationSwitchClasses,f 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","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 { useMemo, useRef, useState, useEffect, cloneElement } from 'react'\r\nimport type { FC, ReactNode, ReactElement, CSSProperties } from 'react'\r\nimport { EViewMode } from './view-mode.types'\r\n\r\n// Animation defaults and configuration for the view-mode switch.\r\n// These values can be tuned here or overridden via the `animConfig` prop.\r\nconst DEFAULT_ANIM = {\r\n enter: 300,\r\n exit: 180,\r\n ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',\r\n delayEnter: 40,\r\n delayExit: 0,\r\n transformOriginList: 'top center',\r\n transformOriginModule: 'top center',\r\n // how far to translate vertically when hiding (px)\r\n translateY: 10,\r\n // horizontal shrink factor (1 = no shrink, 0.95 = 95% width)\r\n horizontalScale: 0.98,\r\n // how long to wait (ms) after mounting children before starting enter animation\r\n mountDelay: 50,\r\n // extra hold time (ms) after exit completes before shrinking height\r\n hold: 100\r\n}\r\n\r\ninterface IProps {\r\n mode: EViewMode\r\n moduleNode: ReactNode\r\n listNode: ReactNode\r\n autoHeight?: boolean\r\n animConfig?: Partial<typeof DEFAULT_ANIM>\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 // animation config merged from defaults + props\r\n const anim = { ...DEFAULT_ANIM, ...(props.animConfig || {}) }\r\n\r\n // mountedMode: which pane is currently mounted (rendered). We sequence\r\n // transitions by hiding the currently mounted pane first, then swapping\r\n // to the requested mode after the exit animation finishes.\r\n const [mountedMode, setMountedMode] = useState<EViewMode>(props.mode)\r\n const [mountedOpen, setMountedOpen] = useState<boolean>(true)\r\n const pendingModeRef = useRef<EViewMode | null>(null)\r\n const exitTimerRef = useRef<number | null>(null)\r\n\r\n useEffect(() => {\r\n // if prop didn't change, nothing to do\r\n if (props.mode === mountedMode) return\r\n\r\n // if a swap is already pending, replace it\r\n if (exitTimerRef.current) {\r\n window.clearTimeout(exitTimerRef.current)\r\n exitTimerRef.current = null\r\n }\r\n\r\n // request a swap: hide the currently mounted pane first\r\n pendingModeRef.current = props.mode\r\n\r\n // lock the current wrapper height so it doesn't shrink immediately\r\n const currentH = wrapperRef.current?.offsetHeight\r\n if (wrapperRef.current && typeof currentH === 'number') {\r\n wrapperRef.current.style.height = `${currentH}px`\r\n wrapperRef.current.style.transition = `height ${anim.enter}ms ${anim.ease}`\r\n }\r\n\r\n setMountedOpen(false)\r\n\r\n // after exit duration + optional hold, swap mounted pane and show it\r\n const exitDur = anim.exit\r\n const totalDelay = exitDur + (anim.hold ?? 0)\r\n exitTimerRef.current = window.setTimeout(() => {\r\n const next = pendingModeRef.current\r\n pendingModeRef.current = null\r\n if (next != null) {\r\n // mount the next pane\r\n setMountedMode(next)\r\n\r\n // wait a frame for DOM to mount the new content, measure and animate height\r\n requestAnimationFrame(() => {\r\n const targetRef = next === EViewMode.List ? listRef : moduleRef\r\n const newH = targetRef.current?.offsetHeight ?? wrapperRef.current?.offsetHeight ?? 0\r\n\r\n // start enter animation for the new pane\r\n setMountedOpen(true)\r\n\r\n // animate wrapper height from previous to new\r\n if (wrapperRef.current) {\r\n // ensure we set a numeric height first (we set currentH earlier)\r\n wrapperRef.current.style.height = `${newH}px`\r\n // after the transition finishes, reset to auto\r\n window.setTimeout(() => {\r\n if (wrapperRef.current) wrapperRef.current.style.height = ''\r\n }, anim.enter)\r\n }\r\n })\r\n }\r\n exitTimerRef.current = null\r\n }, totalDelay)\r\n\r\n return () => {\r\n if (exitTimerRef.current) {\r\n window.clearTimeout(exitTimerRef.current)\r\n exitTimerRef.current = null\r\n }\r\n }\r\n }, [props.mode, mountedMode])\r\n\r\n const classes = useMemo(() => {\r\n const { root, pane, paneList, paneModule, autoHeight } = animationSwitchClasses\r\n const rootClasses = [root, props.autoHeight ? autoHeight : '']\r\n const paneListClasses = [pane, paneList]\r\n const paneModuleClasses = [pane, paneModule]\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 ref={wrapperRef} className={animationSwitchClasses.content}>\r\n {mountedMode === EViewMode.List && (\r\n <CombinedTransition\r\n open={mountedOpen}\r\n timeout={{ enter: DEFAULT_ANIM.enter, exit: DEFAULT_ANIM.exit }}\r\n mountDelay={anim.mountDelay}\r\n anim={anim}\r\n style={{\r\n transitionTimingFunction: DEFAULT_ANIM.ease,\r\n transitionDuration: `${DEFAULT_ANIM.enter}ms`,\r\n transitionDelay: `${mountedOpen ? anim.delayEnter : anim.delayExit}ms`,\r\n transformOrigin: anim.transformOriginList\r\n }}\r\n >\r\n <div ref={listRef} className={classes.paneList.join(' ')} aria-hidden={mountedMode !== EViewMode.List}>\r\n {props.listNode}\r\n </div>\r\n </CombinedTransition>\r\n )}\r\n\r\n {mountedMode === EViewMode.Module && (\r\n <CombinedTransition\r\n open={mountedOpen}\r\n timeout={{ enter: DEFAULT_ANIM.enter, exit: DEFAULT_ANIM.exit }}\r\n mountDelay={anim.mountDelay}\r\n anim={anim}\r\n style={{\r\n transitionTimingFunction: DEFAULT_ANIM.ease,\r\n transitionDuration: `${DEFAULT_ANIM.enter}ms`,\r\n transitionDelay: `${mountedOpen ? anim.delayEnter : anim.delayExit}ms`,\r\n transformOrigin: anim.transformOriginModule\r\n }}\r\n >\r\n <div ref={moduleRef} className={classes.paneModule.join(' ')} aria-hidden={mountedMode !== EViewMode.Module}>\r\n {props.moduleNode}\r\n </div>\r\n </CombinedTransition>\r\n )}\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}\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\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 },\r\n // autoHeight mode\r\n // [getClasses('autoHeight', { prefix: '&' })]: { overflow: 'clip' },\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\r\n// Custom Transition-like component that mounts children immediately\r\n// then waits `mountDelay` before starting the enter animation. On close,\r\n// it runs the exit animation and then unmounts after exit duration.\r\nconst CombinedTransition: FC<{\r\n open: boolean\r\n timeout?: number | { enter?: number; exit?: number }\r\n mountDelay?: number\r\n style?: CSSProperties\r\n anim?: typeof DEFAULT_ANIM\r\n children: ReactElement\r\n}> = ({ open, timeout, mountDelay, style, anim, children }) => {\r\n const cfg = anim ?? DEFAULT_ANIM\r\n const enterDur = typeof timeout === 'number' ? timeout : timeout?.enter ?? cfg.enter\r\n const exitDur = typeof timeout === 'number' ? timeout : timeout?.exit ?? cfg.exit\r\n const delayMount = mountDelay ?? cfg.mountDelay\r\n\r\n const [mounted, setMounted] = useState(open)\r\n const [showing, setShowing] = useState(open)\r\n const mountTimer = useRef<number | null>(null)\r\n const unmountTimer = useRef<number | null>(null)\r\n\r\n useEffect(() => {\r\n // open -> mount immediately, then wait mountDelay before starting enter\r\n if (open) {\r\n if (unmountTimer.current) {\r\n window.clearTimeout(unmountTimer.current)\r\n unmountTimer.current = null\r\n }\r\n setMounted(true)\r\n // delay the start of the enter animation so inner children can render\r\n if (delayMount > 0) {\r\n if (mountTimer.current) window.clearTimeout(mountTimer.current)\r\n mountTimer.current = window.setTimeout(() => {\r\n setShowing(true)\r\n mountTimer.current = null\r\n }, delayMount)\r\n } else {\r\n setShowing(true)\r\n }\r\n return\r\n }\r\n\r\n // close -> start exit immediately, then unmount after exitDur\r\n setShowing(false)\r\n if (mountTimer.current) {\r\n window.clearTimeout(mountTimer.current)\r\n mountTimer.current = null\r\n }\r\n if (unmountTimer.current) window.clearTimeout(unmountTimer.current)\r\n unmountTimer.current = window.setTimeout(() => {\r\n setMounted(false)\r\n unmountTimer.current = null\r\n }, exitDur)\r\n return\r\n }, [open, delayMount, enterDur, exitDur])\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (mountTimer.current) window.clearTimeout(mountTimer.current)\r\n if (unmountTimer.current) window.clearTimeout(unmountTimer.current)\r\n }\r\n }, [])\r\n\r\n if (!mounted) return null\r\n\r\n const baseStyle: CSSProperties = {\r\n transitionProperty: 'opacity, transform',\r\n transitionTimingFunction: cfg.ease,\r\n transitionDuration: `${showing ? enterDur : exitDur}ms`,\r\n transitionDelay: `${showing ? cfg.delayEnter : cfg.delayExit}ms`,\r\n transformOrigin: style?.transformOrigin || cfg.transformOriginList\r\n }\r\n\r\n const visibleStyle: CSSProperties = { opacity: 1, transform: `translateY(0) scaleX(1)` }\r\n const hiddenStyle: CSSProperties = { opacity: 0, transform: `translateY(${cfg.translateY}px) scaleX(${cfg.horizontalScale})` }\r\n\r\n const styleObj: CSSProperties = { ...baseStyle, ...(showing ? visibleStyle : hiddenStyle), ...style }\r\n\r\n return cloneElement(children, { style: styleObj })\r\n}\r\n"],"names":["DEFAULT_ANIM","enter","exit","ease","delayEnter","delayExit","transformOriginList","transformOriginModule","translateY","horizontalScale","mountDelay","hold","AnimationSwitch","props","wrapperRef","useRef","listRef","moduleRef","anim","_objectSpread","animConfig","_useState","useState","mode","_useState2","_slicedToArray","mountedMode","setMountedMode","_useState3","_useState4","mountedOpen","setMountedOpen","pendingModeRef","exitTimerRef","useEffect","_wrapperRef$current","_anim$hold","current","window","clearTimeout","currentH","offsetHeight","style","height","concat","transition","totalDelay","setTimeout","next","requestAnimationFrame","_ref","_targetRef$current$of","_targetRef$current","_wrapperRef$current2","newH","EViewMode","List","classes","useMemo","root","animationSwitchClasses","pane","paneList","paneModule","autoHeight","_jsx","AnimationSwitchStyled","className","join","children","_jsxs","ref","content","CombinedTransition","open","timeout","transitionTimingFunction","transitionDuration","transitionDelay","transformOrigin","listNode","Module","moduleNode","getClasses","key","options","prefix","suffix","styled","_ref2","theme","_defineProperty","width","position","display","_ref4","_timeout$enter","_timeout$exit","cfg","enterDur","exitDur","delayMount","_useState5","_useState6","mounted","setMounted","_useState7","_useState8","showing","setShowing","mountTimer","unmountTimer","baseStyle","transitionProperty","hiddenStyle","opacity","transform","styleObj","cloneElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as r,asyncToGenerator as e,objectWithoutProperties as n,regenerator as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{Box as i,Typography as s,Grid as l,Button as u}from"@mui/material";import{getErrorMessage as d}from"./helpers.js";import{getFormFields as c,getFormValidators as m,getFormPreSubmit as f,isFormRegistered as p}from"./decorator.js";import v from"./validator.js";import
|
|
1
|
+
import{objectSpread2 as r,asyncToGenerator as e,objectWithoutProperties as n,regenerator as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{Box as i,Typography as s,Grid as l,Button as u}from"@mui/material";import{getErrorMessage as d}from"./helpers.js";import{getFormFields as c,getFormValidators as m,getFormPreSubmit as f,isFormRegistered as p}from"./decorator.js";import v from"./validator.js";import g from"./create.input.js";import b from"./create.form-base.js";var h=["type","renderInput"],x=b({}),y=g({}),C=function(e){var o,i,s=e.type,l=e.renderInput,u=n(e,h),c=(null===(o=u.name)||void 0===o?void 0:o.toString())||"",m=(null===(i=u.data)||void 0===i?void 0:i[c])||u.defaultValue;return x.mapContext((function(e){var n=e.messageErrors,o=e.onBlur,i=d(e.messageErrors,u.name);if(l)return a(l,r(r({},u),{},{messageErrors:n,onBlur:o,formContext:e}));switch(s){case String:return a(y,r(r({},u),{},{messageErrors:n,onBlur:o,formContext:e}));case Number:return a(y,r(r({},u),{},{slots:r({textFieldProps:{type:"number"}},u.slots),messageErrors:n,onBlur:o,formContext:e}));case Boolean:return t("div",{children:[t("label",{children:[u.label||c,": "]}),a("input",{name:c,type:"checkbox",defaultChecked:m}),a("span",{style:{color:"red"},children:i.error?i.message:""})]});default:return t("div",{children:["Unsupported field type for ",c]})}}))},S=function(n){var d,g=c(n.configClass),b=m(n.configClass),h=f(n.configClass);if(!p(n.configClass)){var y,S=(null===(y=n.configClass)||void 0===y?void 0:y.name)||"Unknown";return t(i,{sx:{border:"1px dashed #ccc",padding:12,borderRadius:4,color:"#333",background:"#fafafa"},children:[a(s,{variant:"subtitle1",sx:{fontWeight:600,marginBottom:6},children:"Form configuration not registered"}),t(s,{variant:"body1",children:['Configuration for "',S,'" was not found. Did you forget to add ',a("code",{children:"@registerForm"})," to the class?"]})]})}var j,B,E=function(){var r=e(o().m((function r(e){var t,a;return o().w((function(r){for(;;)switch(r.n){case 0:if(t=e,r.p=1,null==h||!h.handler){r.n=3;break}return r.n=2,h.handler(e,n.data);case 2:null==(t=r.v)&&(t=e);case 3:if(!n.onSubmit){r.n=4;break}return r.n=4,n.onSubmit(t);case 4:r.n=6;break;case 5:throw r.p=5,a=r.v,n.onError&&n.onError(a),a;case 6:return r.a(2)}}),r,null,[[1,5]])})));return function(e){return r.apply(this,arguments)}}();return t(x.Form,{onSubmit:E,validate:new v(b),onError:n.onSubmitError,children:[a(l,{container:!0,spacing:2,children:g.map((function(e){return a(l,r(r({item:!0,xs:12},e.size),{},{children:a(C,r({data:n.data},e))}),e.name.toString())}))}),!1===(null===(j=n.slots)||void 0===j?void 0:j.isFooter)?null:null!==(B=n.slots)&&void 0!==B&&B.renderSubmitButton?n.slots.renderSubmitButton():a(u,{variant:"contained",color:"primary",type:"submit",sx:{mt:2},children:"Submit"}),null===(d=n.slots)||void 0===d?void 0:d.bottom]})},j=function(e,n){return function(o){return a(S,r(r({configClass:e},n),o))}};export{C as DecoratorField,S as DecoratorForm,j as createDecoratorForm,S as default};
|
|
2
2
|
//# sourceMappingURL=decorator.form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"decorator.form.js","sources":["../../../src/form/decorator.form.tsx"],"sourcesContent":["import { ComponentType, FC } from 'react'\r\nimport { Box, Button, Grid, Typography } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { getFormFields, getFormPreSubmit, getFormValidators, isFormRegistered } from './decorator'\r\nimport FormValidator, { IPartialError } from './validator'\r\nimport createInput from './create.input'\r\nimport createFormBase from './create.form-base'\r\n\r\nconst FormBase = createFormBase<any>({})\r\nconst InputInstance = createInput<any>({})\r\n\r\nexport interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {\r\n type?: any\r\n renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport const DecoratorField: FC<IDecoratorFieldProps> = ({ type: inputType, renderInput, ...props }) => {\r\n const name = props.name?.toString() || ''\r\n const defaultValue = props.data?.[name] || props.defaultValue\r\n
|
|
1
|
+
{"version":3,"file":"decorator.form.js","sources":["../../../src/form/decorator.form.tsx"],"sourcesContent":["import { ComponentType, FC } from 'react'\r\nimport { Box, Button, Grid, Typography } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { getFormFields, getFormPreSubmit, getFormValidators, isFormRegistered } from './decorator'\r\nimport FormValidator, { IPartialError } from './validator'\r\nimport createInput from './create.input'\r\nimport createFormBase from './create.form-base'\r\n\r\nconst FormBase = createFormBase<any>({})\r\nconst InputInstance = createInput<any>({})\r\n\r\nexport interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {\r\n type?: any\r\n renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport const DecoratorField: FC<IDecoratorFieldProps> = ({ type: inputType, renderInput, ...props }) => {\r\n const name = props.name?.toString() || ''\r\n const defaultValue = props.data?.[name] || props.defaultValue\r\n\r\n return FormBase.mapContext((context) => {\r\n const { messageErrors, onBlur } = context\r\n const err = getErrorMessage(context.messageErrors, props.name as any)\r\n if (renderInput) {\r\n const InputComp = renderInput\r\n return <InputComp {...props} messageErrors={messageErrors} onBlur={onBlur} formContext={context} />\r\n }\r\n switch (inputType) {\r\n case String:\r\n return <InputInstance {...props} messageErrors={messageErrors} onBlur={onBlur} formContext={context} />\r\n case Number:\r\n return (\r\n <InputInstance\r\n {...props}\r\n slots={{ textFieldProps: { type: 'number' }, ...props.slots }}\r\n messageErrors={messageErrors}\r\n onBlur={onBlur}\r\n formContext={context}\r\n />\r\n )\r\n case Boolean:\r\n return (\r\n <div>\r\n <label>{props.label || name}: </label>\r\n <input name={name} type='checkbox' defaultChecked={defaultValue} />\r\n <span style={{ color: 'red' }}>{err.error ? err.message : ''}</span>\r\n </div>\r\n )\r\n default:\r\n return <div>Unsupported field type for {name}</div>\r\n }\r\n })\r\n}\r\n\r\nexport interface IDecoratorFormSlots {\r\n bottom?: React.ReactNode\r\n isFooter?: React.ReactNode | boolean\r\n renderSubmitButton?: () => React.ReactNode\r\n}\r\n\r\nexport interface IDecoratorFormProps<T = any> {\r\n configClass: any\r\n data?: any\r\n onSubmit?: (data: any) => Promise<void>\r\n onError?: (error: any) => void\r\n onSubmitError?: (error: IPartialError<T>) => void\r\n slots?: IDecoratorFormSlots\r\n}\r\n\r\nexport const DecoratorForm: FC<IDecoratorFormProps> = (props) => {\r\n const fields = getFormFields(props.configClass)\r\n const validators = getFormValidators(props.configClass)\r\n const preSubmitConfig = getFormPreSubmit(props.configClass)\r\n\r\n // If the provided configClass isn't registered via @registerForm,\r\n // show a simple, friendly error UI instead of throwing.\r\n if (!isFormRegistered(props.configClass)) {\r\n const name = props.configClass?.name || 'Unknown'\r\n return (\r\n <Box sx={{ border: '1px dashed #ccc', padding: 12, borderRadius: 4, color: '#333', background: '#fafafa' }}>\r\n <Typography variant='subtitle1' sx={{ fontWeight: 600, marginBottom: 6 }}>\r\n Form configuration not registered\r\n </Typography>\r\n <Typography variant='body1'>\r\n Configuration for \"{name}\" was not found. Did you forget to add <code>@registerForm</code> to the class?\r\n </Typography>\r\n </Box>\r\n )\r\n }\r\n\r\n const handleSubmit = async (data: any) => {\r\n let processedData = data\r\n try {\r\n // Execute presubmit handler if exists\r\n if (preSubmitConfig?.handler) {\r\n processedData = await preSubmitConfig.handler(data, props.data)\r\n // If handler returns null/undefined, use original data\r\n if (processedData === null || processedData === undefined) {\r\n processedData = data\r\n }\r\n }\r\n\r\n // Call the original onSubmit with processed data\r\n if (props.onSubmit) {\r\n await props.onSubmit(processedData)\r\n }\r\n } catch (error) {\r\n if (props.onError) {\r\n props.onError(error)\r\n }\r\n throw error\r\n }\r\n }\r\n\r\n const renderFooter = () => {\r\n if (props.slots?.isFooter === false) return null\r\n if (props.slots?.renderSubmitButton) {\r\n return props.slots.renderSubmitButton()\r\n }\r\n return (\r\n <Button variant='contained' color='primary' type='submit' sx={{ mt: 2 }}>\r\n Submit\r\n </Button>\r\n )\r\n }\r\n\r\n return (\r\n <FormBase.Form onSubmit={handleSubmit} validate={new FormValidator(validators)} onError={props.onSubmitError}>\r\n <Grid container spacing={2}>\r\n {fields.map((field) => (\r\n <Grid item key={field.name.toString()} xs={12} {...field.size}>\r\n <DecoratorField data={props.data} {...field} />\r\n </Grid>\r\n ))}\r\n </Grid>\r\n {renderFooter()}\r\n {props.slots?.bottom}\r\n </FormBase.Form>\r\n )\r\n}\r\nexport default DecoratorForm\r\n\r\nexport const createDecoratorForm = function <T>(\r\n configClass: any,\r\n params?: Partial<Omit<IDecoratorFormProps, 'configClass'>>\r\n): ComponentType<Omit<IDecoratorFormProps, 'configClass'>> {\r\n const DecoratorFormComp: FC<Omit<IDecoratorFormProps, 'configClass'>> = (props) => {\r\n return <DecoratorForm configClass={configClass} {...params} {...props} />\r\n }\r\n return DecoratorFormComp\r\n}\r\n"],"names":["FormBase","createFormBase","InputInstance","createInput","DecoratorField","_ref","_props$name","_props$data","inputType","type","renderInput","props","_objectWithoutProperties","_excluded","name","toString","defaultValue","data","mapContext","context","messageErrors","onBlur","err","getErrorMessage","_jsx","_objectSpread","formContext","String","Number","slots","textFieldProps","Boolean","_jsxs","children","label","defaultChecked","style","color","error","message","DecoratorForm","_props$slots3","fields","getFormFields","configClass","validators","getFormValidators","preSubmitConfig","getFormPreSubmit","isFormRegistered","_props$configClass","Box","sx","border","padding","borderRadius","background","Typography","variant","fontWeight","marginBottom","_props$slots","_props$slots2","handleSubmit","_ref2","_asyncToGenerator","_regenerator","m","_callee","processedData","_t","w","_context","n","p","handler","v","onSubmit","onError","a","_x","apply","this","arguments","Form","validate","FormValidator","onSubmitError","Grid","container","spacing","map","field","item","xs","size","isFooter","renderSubmitButton","Button","mt","bottom","createDecoratorForm","params"],"mappings":"8iBASMA,EAAWC,EAAoB,IAC/BC,EAAgBC,EAAiB,IAO1BC,EAA2C,SAA7BC,GAA4E,IAAAC,EAAAC,EAAtCC,EAASH,EAAfI,KAAiBC,EAAWL,EAAXK,YAAgBC,EAAKC,EAAAP,EAAAQ,GACzFC,GAAiBR,QAAVA,EAAAK,EAAMG,gBAAIR,SAAVA,EAAYS,aAAc,GACjCC,GAAyB,QAAVT,EAAAI,EAAMM,YAAI,IAAAV,OAAA,EAAVA,EAAaO,KAASH,EAAMK,aAEjD,OAAOhB,EAASkB,YAAW,SAACC,GAC1B,IAAQC,EAA0BD,EAA1BC,cAAeC,EAAWF,EAAXE,OACjBC,EAAMC,EAAgBJ,EAAQC,cAAeT,EAAMG,MACzD,GAAIJ,EAEF,OAAOc,EADWd,EACDe,EAAAA,KAAKd,GAAK,GAAA,CAAES,cAAeA,EAAeC,OAAQA,EAAQK,YAAaP,KAE1F,OAAQX,GACN,KAAKmB,OACH,OAAOH,EAACtB,EAAauB,EAAAA,KAAKd,GAAK,GAAA,CAAES,cAAeA,EAAeC,OAAQA,EAAQK,YAAaP,KAC9F,KAAKS,OACH,OACEJ,EAACtB,EAAauB,EAAAA,KACRd,GAAK,GAAA,CACTkB,MAAKJ,EAAA,CAAIK,eAAgB,CAAErB,KAAM,WAAeE,EAAMkB,OACtDT,cAAeA,EACfC,OAAQA,EACRK,YAAaP,KAGnB,KAAKY,QACH,OACEC,mBACEA,EAAQ,QAAA,CAAAC,SAAA,CAAAtB,EAAMuB,OAASpB,EAAI,QAC3BU,EAAA,QAAA,CAAOV,KAAMA,EAAML,KAAK,WAAW0B,eAAgBnB,IACnDQ,UAAMY,MAAO,CAAEC,MAAO,OAAOJ,SAAGX,EAAIgB,MAAQhB,EAAIiB,QAAU,QAGhE,QACE,OAAOP,EAAA,MAAA,CAAAC,SAAA,CAAA,8BAAiCnB,KAE9C,GACF,EAiBa0B,EAAyC,SAAC7B,GAAS,IAAA8B,EACxDC,EAASC,EAAchC,EAAMiC,aAC7BC,EAAaC,EAAkBnC,EAAMiC,aACrCG,EAAkBC,EAAiBrC,EAAMiC,aAI/C,IAAKK,EAAiBtC,EAAMiC,aAAc,CAAA,IAAAM,EAClCpC,GAAwB,QAAjBoC,EAAAvC,EAAMiC,mBAANM,IAAiBA,OAAjBA,EAAAA,EAAmBpC,OAAQ,UACxC,OACEkB,EAACmB,EAAG,CAACC,GAAI,CAAEC,OAAQ,kBAAmBC,QAAS,GAAIC,aAAc,EAAGlB,MAAO,OAAQmB,WAAY,WAAWvB,SAAA,CACxGT,EAACiC,EAAW,CAAAC,QAAQ,YAAYN,GAAI,CAAEO,WAAY,IAAKC,aAAc,GAExD3B,SAAA,sCACbD,EAACyB,EAAW,CAAAC,QAAQ,QACEzB,SAAA,CAAA,sBAAAnB,EAA4C,0CAAAU,EAAA,OAAA,CAAAS,SAAA,kBACrD,sBAGlB,CAED,IAwB0B4B,EAAAC,EAxBpBC,EAAY,WAAA,IAAAC,EAAAC,EAAAC,IAAAC,GAAG,SAAAC,EAAOnD,GAAS,IAAAoD,EAAAC,EAAA,OAAAJ,IAAAK,GAAA,SAAAC,GAAA,cAAAA,EAAAC,GAAA,KAAA,EACX,GAApBJ,EAAgBpD,EAAIuD,EAAAE,EAAA,EAGlB3B,UAAAA,EAAiB4B,QAAO,CAAAH,EAAAC,EAAA,EAAA,KAAA,CAAA,OAAAD,EAAAC,EAAA,EACJ1B,EAAgB4B,QAAQ1D,EAAMN,EAAMM,MAAK,KAAA,EAE3DoD,OAFJA,EAAaG,EAAAI,KAGXP,EAAgBpD,GACjB,KAAA,EAAA,IAICN,EAAMkE,SAAQ,CAAAL,EAAAC,EAAA,EAAA,KAAA,CAAA,OAAAD,EAAAC,EAAA,EACV9D,EAAMkE,SAASR,GAAc,KAAA,EAAAG,EAAAC,EAAA,EAAA,MAAA,KAAA,EAKpC,MALoCD,EAAAE,EAAA,EAAAJ,EAAAE,EAAAI,EAGjCjE,EAAMmE,SACRnE,EAAMmE,QAAOR,GACdA,EAAA,KAAA,EAAA,OAAAE,EAAAO,EAAA,GAAA,GAAAX,EAAA,KAAA,CAAA,CAAA,EAAA,SAGJ,OAtBKL,SAAYiB,GAAA,OAAAhB,EAAAiB,MAAAC,KAAAC,UAAA,EAAA,GAoClB,OACEnD,EAAChC,EAASoF,KAAI,CAACP,SAAUd,EAAcsB,SAAU,IAAIC,EAAczC,GAAaiC,QAASnE,EAAM4E,wBAC7F/D,EAACgE,GAAKC,WAAS,EAACC,QAAS,WACtBhD,EAAOiD,KAAI,SAACC,GAAK,OAChBpE,EAACgE,EAAI/D,EAAAA,EAAA,CAACoE,MAAiC,EAAAC,GAAI,IAAQF,EAAMG,MAAI,GAAA,UAC3DvE,EAACpB,EAAcqB,EAAA,CAACR,KAAMN,EAAMM,MAAU2E,MADxBA,EAAM9E,KAAKC,WAG5B,OAlByB,KAAf8C,QAAXA,EAAAlD,EAAMkB,aAANgC,IAAWA,OAAXA,EAAAA,EAAamC,UAA2B,KAC7BlC,QAAfA,EAAInD,EAAMkB,aAANiC,IAAWA,GAAXA,EAAamC,mBACRtF,EAAMkB,MAAMoE,qBAGnBzE,EAAC0E,EAAO,CAAAxC,QAAQ,YAAYrB,MAAM,UAAU5B,KAAK,SAAS2C,GAAI,CAAE+C,GAAI,GAE3DlE,SAAA,WAcGQ,QADGA,EACd9B,EAAMkB,aAANY,IAAWA,OAAXA,EAAAA,EAAa2D,SAGpB,EAGaC,EAAsB,SACjCzD,EACA0D,GAKA,OAHwE,SAAC3F,GACvE,OAAOa,EAACgB,EAAaf,EAAAA,EAAA,CAACmB,YAAaA,GAAiB0D,GAAY3F,GACjE,CAEH"}
|
|
@@ -1,10 +1,24 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
1
|
+
import type { FC, ReactNode } from 'react';
|
|
2
2
|
import { EViewMode } from './view-mode.types';
|
|
3
|
+
declare const DEFAULT_ANIM: {
|
|
4
|
+
enter: number;
|
|
5
|
+
exit: number;
|
|
6
|
+
ease: string;
|
|
7
|
+
delayEnter: number;
|
|
8
|
+
delayExit: number;
|
|
9
|
+
transformOriginList: string;
|
|
10
|
+
transformOriginModule: string;
|
|
11
|
+
translateY: number;
|
|
12
|
+
horizontalScale: number;
|
|
13
|
+
mountDelay: number;
|
|
14
|
+
hold: number;
|
|
15
|
+
};
|
|
3
16
|
interface IProps {
|
|
4
17
|
mode: EViewMode;
|
|
5
18
|
moduleNode: ReactNode;
|
|
6
19
|
listNode: ReactNode;
|
|
7
20
|
autoHeight?: boolean;
|
|
21
|
+
animConfig?: Partial<typeof DEFAULT_ANIM>;
|
|
8
22
|
}
|
|
9
23
|
declare const AnimationSwitch: FC<IProps>;
|
|
10
24
|
export default AnimationSwitch;
|
|
@@ -15,7 +29,5 @@ export declare const animationSwitchClasses: {
|
|
|
15
29
|
pane: string;
|
|
16
30
|
paneList: string;
|
|
17
31
|
paneModule: string;
|
|
18
|
-
visible: string;
|
|
19
|
-
hidden: string;
|
|
20
32
|
};
|
|
21
33
|
export declare const AnimationSwitchStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|