dinocollab-core 2.1.26 → 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,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>, {}>;
|