@progress/kendo-react-animation 7.0.0-develop.9 → 7.0.0
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.
- package/dist/cdn/js/kendo-react-animation.js +1 -1
- package/index.js +1 -1
- package/index.mjs +2 -1
- package/package.json +3 -2
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
(function(p,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("react-transition-group")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","react-transition-group"],y):(p=typeof globalThis<"u"?globalThis:p||self,y(p.KendoReactAnimation={},p.React,p.PropTypes,p.KendoReactCommon,p.ReactTransitionGroup))})(this,function(p,y,R,d,b){"use strict";function C(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>a[t]})}}return i.default=a,Object.freeze(i)}const r=C(y),e=C(R),k={outerHeight:a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginTop),s=parseFloat(t.marginBottom);return a.offsetHeight+n+s},outerWidth:a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginLeft),s=parseFloat(t.marginRight);return a.offsetWidth+n+s},styles:{"animation-container":"k-animation-container","animation-container-relative":"k-animation-container-relative","animation-container-fixed":"k-animation-container-fixed","push-right-enter":"k-push-right-enter","push-right-appear":"k-push-right-appear","push-right-enter-active":"k-push-right-enter-active","push-right-appear-active":"k-push-right-appear-active","push-right-exit":"k-push-right-exit","push-right-exit-active":"k-push-right-exit-active","push-left-enter":"k-push-left-enter","push-left-appear":"k-push-left-appear","push-left-enter-active":"k-push-left-enter-active","push-left-appear-active":"k-push-left-appear-active","push-left-exit":"k-push-left-exit","push-left-exit-active":"k-push-left-exit-active","push-down-enter":"k-push-down-enter","push-down-appear":"k-push-down-appear","push-down-enter-active":"k-push-down-enter-active","push-down-appear-active":"k-push-down-appear-active","push-down-exit":"k-push-down-exit","push-down-exit-active":"k-push-down-exit-active","push-up-enter":"k-push-up-enter","push-up-appear":"k-push-up-appear","push-up-enter-active":"k-push-up-enter-active","push-up-appear-active":"k-push-up-appear-active","push-up-exit":"k-push-up-exit","push-up-exit-active":"k-push-up-exit-active",expand:"k-expand","expand-vertical-enter":"k-expand-vertical-enter","expand-vertical-appear":"k-expand-vertical-appear","expand-vertical-enter-active":"k-expand-vertical-enter-active","expand-vertical-appear-active":"k-expand-vertical-appear-active","expand-vertical-exit":"k-expand-vertical-exit","expand-vertical-exit-active":"k-expand-vertical-exit-active","expand-horizontal-enter":"k-expand-horizontal-enter","expand-horizontal-appear":"k-expand-horizontal-appear","expand-horizontal-enter-active":"k-expand-horizontal-enter-active","expand-horizontal-appear-active":"k-expand-horizontal-appear-active","expand-horizontal-exit":"k-expand-horizontal-exit","expand-horizontal-exit-active":"k-expand-horizontal-exit-active","child-animation-container":"k-child-animation-container","fade-enter":"k-fade-enter","fade-appear":"k-fade-appear","fade-enter-active":"k-fade-enter-active","fade-appear-active":"k-fade-appear-active","fade-exit":"k-fade-exit","fade-exit-active":"k-fade-exit-active","zoom-in-enter":"k-zoom-in-enter","zoom-in-appear":"k-zoom-in-appear","zoom-in-enter-active":"k-zoom-in-enter-active","zoom-in-appear-active":"k-zoom-in-appear-active","zoom-in-exit":"k-zoom-in-exit","zoom-in-exit-active":"k-zoom-in-exit-active","zoom-out-enter":"k-zoom-out-enter","zoom-out-appear":"k-zoom-out-appear","zoom-out-enter-active":"k-zoom-out-enter-active","zoom-out-appear-active":"k-zoom-out-appear-active","zoom-out-exit":"k-zoom-out-exit","zoom-out-exit-active":"k-zoom-out-exit-active","slide-in-appear":"k-slide-in-appear",centered:"k-centered","slide-in-appear-active":"k-slide-in-appear-active","slide-down-enter":"k-slide-down-enter","slide-down-appear":"k-slide-down-appear","slide-down-enter-active":"k-slide-down-enter-active","slide-down-appear-active":"k-slide-down-appear-active","slide-down-exit":"k-slide-down-exit","slide-down-exit-active":"k-slide-down-exit-active","slide-up-enter":"k-slide-up-enter","slide-up-appear":"k-slide-up-appear","slide-up-enter-active":"k-slide-up-enter-active","slide-up-appear-active":"k-slide-up-appear-active","slide-up-exit":"k-slide-up-exit","slide-up-exit-active":"k-slide-up-exit-active","slide-right-enter":"k-slide-right-enter","slide-right-appear":"k-slide-right-appear","slide-right-enter-active":"k-slide-right-enter-active","slide-right-appear-active":"k-slide-right-appear-active","slide-right-exit":"k-slide-right-exit","slide-right-exit-active":"k-slide-right-exit-active","slide-left-enter":"k-slide-left-enter","slide-left-appear":"k-slide-left-appear","slide-left-enter-active":"k-slide-left-enter-active","slide-left-appear-active":"k-slide-left-appear-active","slide-left-exit":"k-slide-left-exit","slide-left-exit-active":"k-slide-left-exit-active","reveal-vertical-enter":"k-reveal-vertical-enter","reveal-vertical-appear":"k-reveal-vertical-appear","reveal-vertical-enter-active":"k-reveal-vertical-enter-active","reveal-vertical-appear-active":"k-reveal-vertical-appear-active","reveal-vertical-exit":"k-reveal-vertical-exit","reveal-vertical-exit-active":"k-reveal-vertical-exit-active","reveal-horizontal-enter":"k-reveal-horizontal-enter","reveal-horizontal-appear":"k-reveal-horizontal-appear","reveal-horizontal-enter-active":"k-reveal-horizontal-enter-active","reveal-horizontal-appear-active":"k-reveal-horizontal-appear-active","reveal-horizontal-exit":"k-reveal-horizontal-exit","reveal-horizontal-exit-active":"k-reveal-horizontal-exit-active"}},g=k.styles;class z extends r.Component{constructor(){super(...arguments),this.elementRef=r.createRef()}get element(){return this.elementRef.current}render(){const{children:i,style:t,appear:n,enter:s,exit:u,transitionName:o,transitionEnterDuration:c,transitionExitDuration:h,className:x,onEnter:v,onEntering:l,onEntered:E,onExit:f,onExiting:P,onExited:A,onAfterExited:F,mountOnEnter:j,unmountOnExit:_,animationEnteringStyle:M,animationEnteredStyle:K,animationExitingStyle:L,animationExitedStyle:U,...V}=this.props,B=d.classNames(x,g["child-animation-container"]),G={transitionDelay:"0ms",...t},X={entering:{transitionDuration:`${c}ms`,...M},entered:{...K},exiting:{transitionDuration:`${h}ms`,...L},exited:{...U}},Y={in:this.props.in,appear:n,enter:s,exit:u,mountOnEnter:j,unmountOnExit:_,timeout:{enter:c,exit:h},onEnter:()=>{v&&v.call(void 0,{animatedElement:this.element,target:this})},onEntering:()=>{l&&l.call(void 0,{animatedElement:this.element,target:this})},onEntered:()=>{E&&E.call(void 0,{animatedElement:this.element,target:this})},onExit:()=>{f&&f.call(void 0,{animatedElement:this.element,target:this})},onExiting:()=>{P&&P.call(void 0,{animatedElement:this.element,target:this})},onExited:()=>{F&&F.call(void 0,{animatedElement:this.element,target:this}),A&&A.call(void 0,{animatedElement:this.element,target:this})},classNames:{appear:g[`${o}-appear`]||`${o}-appear`,appearActive:g[`${o}-appear-active`]||`${o}-appear-active`,enter:g[`${o}-enter`]||`${o}-enter`,enterActive:g[`${o}-enter-active`]||`${o}-enter-active`,exit:g[`${o}-exit`]||`${o}-exit`,exitActive:g[`${o}-exit-active`]||`${o}-exit-active`}};return r.createElement(b.CSSTransition,{...Y,...V,nodeRef:this.elementRef},Z=>r.createElement("div",{style:{...G,...X[Z]},className:B,ref:this.elementRef},i))}}z.propTypes={in:e.bool,children:e.oneOfType([e.arrayOf(e.node),e.node]),transitionName:e.string.isRequired,className:e.string,appear:e.bool,enter:e.bool,exit:e.bool,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired,mountOnEnter:e.bool,unmountOnExit:e.bool,animationEnteringStyle:e.object,animationEnteredStyle:e.object,animationExitingStyle:e.object,animationExitedStyle:e.object},z.defaultProps={mountOnEnter:!0,unmountOnExit:!1,onEnter:d.noop,onEntering:d.noop,onEntered:d.noop,onExit:d.noop,onExiting:d.noop,onExited:d.noop,onAfterExited:d.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};const W={name:"@progress/kendo-react-animation",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},$=k.styles;class m extends r.Component{constructor(i){super(i),d.validatePackage(W)}render(){const{id:i,style:t,children:n,component:s,className:u,childFactory:o,stackChildren:c,componentChildStyle:h,componentChildClassName:x,...v}=this.props,l={id:i,style:t,component:s,childFactory:o,className:d.classNames($["animation-container"],$["animation-container-relative"],u)},E=r.Children.map(n||null,f=>r.createElement(z,{...v,style:h,className:x},f));return r.createElement(b.TransitionGroup,{...l},E)}}m.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any,transitionName:e.string.isRequired,appear:e.bool.isRequired,enter:e.bool.isRequired,exit:e.bool.isRequired,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired},m.defaultProps={component:"div"};class w extends r.Component{render(){const{children:i,...t}=this.props,n={transitionName:"fade"};return r.createElement(m,{...n,...t},i)}}w.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any},w.defaultProps={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};class O extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`expand-${i}`};return r.createElement(m,{...s,...n},t)}}O.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any},O.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const q={position:"absolute",top:"0",left:"0"};class N extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(m,{...n,transitionName:`push-${t}`,animationExitingStyle:this.props.stackChildren?q:void 0},i)}}N.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool},N.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};class D extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`slide-${i}`};return r.createElement(m,{...s,...n},t)}}D.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any},D.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};const H={position:"absolute",top:"0",left:"0"};class S extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(m,{...n,transitionName:`zoom-${t}`,animationExitingStyle:this.props.stackChildren?H:void 0},i)}}S.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["in","out"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool},S.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};class T extends r.Component{constructor(){super(...arguments),this.state={maxHeight:void 0,maxWidth:void 0},this.componentWillEnter=i=>{const{onEnter:t,onBeforeEnter:n}=this.props;n&&n.call(void 0,i),this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentIsEntering=i=>{const{onEntering:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentWillExit=i=>{const{onExit:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.updateContainerDimensions=(i,t=d.noop)=>{const n=i.firstChild;if(n){const s=k.outerHeight(n),u=k.outerWidth(n);this.setState({maxHeight:s,maxWidth:u},t)}}}render(){const{direction:i,children:t,childFactory:n,...s}=this.props,{maxHeight:u,maxWidth:o}=this.state;let c;i==="vertical"?c={maxHeight:u?`${u}px`:""}:c={maxWidth:o?`${o}px`:""};const h={maxHeight:c.maxHeight,maxWidth:c.maxWidth},x=v=>{let l=n?n(v):v;return l.props.in?l:r.cloneElement(l,{...l.props,style:{...l.props.style,maxHeight:c.maxHeight,maxWidth:c.maxWidth}})};return r.createElement(m,{...s,childFactory:x,onEnter:this.componentWillEnter,onEntering:this.componentIsEntering,onExit:this.componentWillExit,animationEnteringStyle:h,transitionName:`reveal-${i}`},t)}}T.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any},T.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const I=(a,i)=>{const t=r.useRef(0),n=r.useRef(!1),s=r.useRef(),u=o=>{const c=o.duration;let h,x,v=t.current&&1-t.current;o.onStart&&o.onStart();const l=E=>{h||(h=E),x=E-h+1;const f=x/c+v;f<=1?(o.onUpdate&&o.onUpdate(f),s.current=window.requestAnimationFrame(l),t.current=f):(o.onEnd&&o.onEnd(1),t.current=0)};s.current=window.requestAnimationFrame(l)};r.useEffect(()=>(u(a),()=>{s.current&&window.cancelAnimationFrame(s.current)}),i),r.useEffect(()=>{n.current=!0},[])};p.Animation=m,p.AnimationChild=z,p.Expand=O,p.Fade=w,p.Push=N,p.Reveal=T,p.Slide=D,p.Zoom=S,p.useAnimation=I,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
|
5
|
+
(function(p,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("react-transition-group")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","react-transition-group"],y):(p=typeof globalThis<"u"?globalThis:p||self,y(p.KendoReactAnimation={},p.React,p.PropTypes,p.KendoReactCommon,p.ReactTransitionGroup))})(this,function(p,y,R,d,b){"use strict";"use client";function C(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>a[t]})}}return i.default=a,Object.freeze(i)}const r=C(y),e=C(R),k={outerHeight:a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginTop),s=parseFloat(t.marginBottom);return a.offsetHeight+n+s},outerWidth:a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginLeft),s=parseFloat(t.marginRight);return a.offsetWidth+n+s},styles:{"animation-container":"k-animation-container","animation-container-relative":"k-animation-container-relative","animation-container-fixed":"k-animation-container-fixed","push-right-enter":"k-push-right-enter","push-right-appear":"k-push-right-appear","push-right-enter-active":"k-push-right-enter-active","push-right-appear-active":"k-push-right-appear-active","push-right-exit":"k-push-right-exit","push-right-exit-active":"k-push-right-exit-active","push-left-enter":"k-push-left-enter","push-left-appear":"k-push-left-appear","push-left-enter-active":"k-push-left-enter-active","push-left-appear-active":"k-push-left-appear-active","push-left-exit":"k-push-left-exit","push-left-exit-active":"k-push-left-exit-active","push-down-enter":"k-push-down-enter","push-down-appear":"k-push-down-appear","push-down-enter-active":"k-push-down-enter-active","push-down-appear-active":"k-push-down-appear-active","push-down-exit":"k-push-down-exit","push-down-exit-active":"k-push-down-exit-active","push-up-enter":"k-push-up-enter","push-up-appear":"k-push-up-appear","push-up-enter-active":"k-push-up-enter-active","push-up-appear-active":"k-push-up-appear-active","push-up-exit":"k-push-up-exit","push-up-exit-active":"k-push-up-exit-active",expand:"k-expand","expand-vertical-enter":"k-expand-vertical-enter","expand-vertical-appear":"k-expand-vertical-appear","expand-vertical-enter-active":"k-expand-vertical-enter-active","expand-vertical-appear-active":"k-expand-vertical-appear-active","expand-vertical-exit":"k-expand-vertical-exit","expand-vertical-exit-active":"k-expand-vertical-exit-active","expand-horizontal-enter":"k-expand-horizontal-enter","expand-horizontal-appear":"k-expand-horizontal-appear","expand-horizontal-enter-active":"k-expand-horizontal-enter-active","expand-horizontal-appear-active":"k-expand-horizontal-appear-active","expand-horizontal-exit":"k-expand-horizontal-exit","expand-horizontal-exit-active":"k-expand-horizontal-exit-active","child-animation-container":"k-child-animation-container","fade-enter":"k-fade-enter","fade-appear":"k-fade-appear","fade-enter-active":"k-fade-enter-active","fade-appear-active":"k-fade-appear-active","fade-exit":"k-fade-exit","fade-exit-active":"k-fade-exit-active","zoom-in-enter":"k-zoom-in-enter","zoom-in-appear":"k-zoom-in-appear","zoom-in-enter-active":"k-zoom-in-enter-active","zoom-in-appear-active":"k-zoom-in-appear-active","zoom-in-exit":"k-zoom-in-exit","zoom-in-exit-active":"k-zoom-in-exit-active","zoom-out-enter":"k-zoom-out-enter","zoom-out-appear":"k-zoom-out-appear","zoom-out-enter-active":"k-zoom-out-enter-active","zoom-out-appear-active":"k-zoom-out-appear-active","zoom-out-exit":"k-zoom-out-exit","zoom-out-exit-active":"k-zoom-out-exit-active","slide-in-appear":"k-slide-in-appear",centered:"k-centered","slide-in-appear-active":"k-slide-in-appear-active","slide-down-enter":"k-slide-down-enter","slide-down-appear":"k-slide-down-appear","slide-down-enter-active":"k-slide-down-enter-active","slide-down-appear-active":"k-slide-down-appear-active","slide-down-exit":"k-slide-down-exit","slide-down-exit-active":"k-slide-down-exit-active","slide-up-enter":"k-slide-up-enter","slide-up-appear":"k-slide-up-appear","slide-up-enter-active":"k-slide-up-enter-active","slide-up-appear-active":"k-slide-up-appear-active","slide-up-exit":"k-slide-up-exit","slide-up-exit-active":"k-slide-up-exit-active","slide-right-enter":"k-slide-right-enter","slide-right-appear":"k-slide-right-appear","slide-right-enter-active":"k-slide-right-enter-active","slide-right-appear-active":"k-slide-right-appear-active","slide-right-exit":"k-slide-right-exit","slide-right-exit-active":"k-slide-right-exit-active","slide-left-enter":"k-slide-left-enter","slide-left-appear":"k-slide-left-appear","slide-left-enter-active":"k-slide-left-enter-active","slide-left-appear-active":"k-slide-left-appear-active","slide-left-exit":"k-slide-left-exit","slide-left-exit-active":"k-slide-left-exit-active","reveal-vertical-enter":"k-reveal-vertical-enter","reveal-vertical-appear":"k-reveal-vertical-appear","reveal-vertical-enter-active":"k-reveal-vertical-enter-active","reveal-vertical-appear-active":"k-reveal-vertical-appear-active","reveal-vertical-exit":"k-reveal-vertical-exit","reveal-vertical-exit-active":"k-reveal-vertical-exit-active","reveal-horizontal-enter":"k-reveal-horizontal-enter","reveal-horizontal-appear":"k-reveal-horizontal-appear","reveal-horizontal-enter-active":"k-reveal-horizontal-enter-active","reveal-horizontal-appear-active":"k-reveal-horizontal-appear-active","reveal-horizontal-exit":"k-reveal-horizontal-exit","reveal-horizontal-exit-active":"k-reveal-horizontal-exit-active"}},g=k.styles;class z extends r.Component{constructor(){super(...arguments),this.elementRef=r.createRef()}get element(){return this.elementRef.current}render(){const{children:i,style:t,appear:n,enter:s,exit:u,transitionName:o,transitionEnterDuration:c,transitionExitDuration:h,className:x,onEnter:v,onEntering:l,onEntered:E,onExit:f,onExiting:P,onExited:A,onAfterExited:F,mountOnEnter:j,unmountOnExit:_,animationEnteringStyle:M,animationEnteredStyle:K,animationExitingStyle:L,animationExitedStyle:U,...V}=this.props,B=d.classNames(x,g["child-animation-container"]),G={transitionDelay:"0ms",...t},X={entering:{transitionDuration:`${c}ms`,...M},entered:{...K},exiting:{transitionDuration:`${h}ms`,...L},exited:{...U}},Y={in:this.props.in,appear:n,enter:s,exit:u,mountOnEnter:j,unmountOnExit:_,timeout:{enter:c,exit:h},onEnter:()=>{v&&v.call(void 0,{animatedElement:this.element,target:this})},onEntering:()=>{l&&l.call(void 0,{animatedElement:this.element,target:this})},onEntered:()=>{E&&E.call(void 0,{animatedElement:this.element,target:this})},onExit:()=>{f&&f.call(void 0,{animatedElement:this.element,target:this})},onExiting:()=>{P&&P.call(void 0,{animatedElement:this.element,target:this})},onExited:()=>{F&&F.call(void 0,{animatedElement:this.element,target:this}),A&&A.call(void 0,{animatedElement:this.element,target:this})},classNames:{appear:g[`${o}-appear`]||`${o}-appear`,appearActive:g[`${o}-appear-active`]||`${o}-appear-active`,enter:g[`${o}-enter`]||`${o}-enter`,enterActive:g[`${o}-enter-active`]||`${o}-enter-active`,exit:g[`${o}-exit`]||`${o}-exit`,exitActive:g[`${o}-exit-active`]||`${o}-exit-active`}};return r.createElement(b.CSSTransition,{...Y,...V,nodeRef:this.elementRef},Z=>r.createElement("div",{style:{...G,...X[Z]},className:B,ref:this.elementRef},i))}}z.propTypes={in:e.bool,children:e.oneOfType([e.arrayOf(e.node),e.node]),transitionName:e.string.isRequired,className:e.string,appear:e.bool,enter:e.bool,exit:e.bool,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired,mountOnEnter:e.bool,unmountOnExit:e.bool,animationEnteringStyle:e.object,animationEnteredStyle:e.object,animationExitingStyle:e.object,animationExitedStyle:e.object},z.defaultProps={mountOnEnter:!0,unmountOnExit:!1,onEnter:d.noop,onEntering:d.noop,onEntered:d.noop,onExit:d.noop,onExiting:d.noop,onExited:d.noop,onAfterExited:d.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};const W={name:"@progress/kendo-react-animation",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},$=k.styles;class m extends r.Component{constructor(i){super(i),d.validatePackage(W)}render(){const{id:i,style:t,children:n,component:s,className:u,childFactory:o,stackChildren:c,componentChildStyle:h,componentChildClassName:x,...v}=this.props,l={id:i,style:t,component:s,childFactory:o,className:d.classNames($["animation-container"],$["animation-container-relative"],u)},E=r.Children.map(n||null,f=>r.createElement(z,{...v,style:h,className:x},f));return r.createElement(b.TransitionGroup,{...l},E)}}m.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any,transitionName:e.string.isRequired,appear:e.bool.isRequired,enter:e.bool.isRequired,exit:e.bool.isRequired,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired},m.defaultProps={component:"div"};class w extends r.Component{render(){const{children:i,...t}=this.props,n={transitionName:"fade"};return r.createElement(m,{...n,...t},i)}}w.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any},w.defaultProps={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};class O extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`expand-${i}`};return r.createElement(m,{...s,...n},t)}}O.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any},O.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const q={position:"absolute",top:"0",left:"0"};class N extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(m,{...n,transitionName:`push-${t}`,animationExitingStyle:this.props.stackChildren?q:void 0},i)}}N.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool},N.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};class D extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`slide-${i}`};return r.createElement(m,{...s,...n},t)}}D.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any},D.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};const H={position:"absolute",top:"0",left:"0"};class S extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(m,{...n,transitionName:`zoom-${t}`,animationExitingStyle:this.props.stackChildren?H:void 0},i)}}S.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["in","out"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool},S.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};class T extends r.Component{constructor(){super(...arguments),this.state={maxHeight:void 0,maxWidth:void 0},this.componentWillEnter=i=>{const{onEnter:t,onBeforeEnter:n}=this.props;n&&n.call(void 0,i),this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentIsEntering=i=>{const{onEntering:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentWillExit=i=>{const{onExit:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.updateContainerDimensions=(i,t=d.noop)=>{const n=i.firstChild;if(n){const s=k.outerHeight(n),u=k.outerWidth(n);this.setState({maxHeight:s,maxWidth:u},t)}}}render(){const{direction:i,children:t,childFactory:n,...s}=this.props,{maxHeight:u,maxWidth:o}=this.state;let c;i==="vertical"?c={maxHeight:u?`${u}px`:""}:c={maxWidth:o?`${o}px`:""};const h={maxHeight:c.maxHeight,maxWidth:c.maxWidth},x=v=>{let l=n?n(v):v;return l.props.in?l:r.cloneElement(l,{...l.props,style:{...l.props.style,maxHeight:c.maxHeight,maxWidth:c.maxWidth}})};return r.createElement(m,{...s,childFactory:x,onEnter:this.componentWillEnter,onEntering:this.componentIsEntering,onExit:this.componentWillExit,animationEnteringStyle:h,transitionName:`reveal-${i}`},t)}}T.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any},T.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const I=(a,i)=>{const t=r.useRef(0),n=r.useRef(!1),s=r.useRef(),u=o=>{const c=o.duration;let h,x,v=t.current&&1-t.current;o.onStart&&o.onStart();const l=E=>{h||(h=E),x=E-h+1;const f=x/c+v;f<=1?(o.onUpdate&&o.onUpdate(f),s.current=window.requestAnimationFrame(l),t.current=f):(o.onEnd&&o.onEnd(1),t.current=0)};s.current=window.requestAnimationFrame(l)};r.useEffect(()=>(u(a),()=>{s.current&&window.cancelAnimationFrame(s.current)}),i),r.useEffect(()=>{n.current=!0},[])};p.Animation=m,p.AnimationChild=z,p.Expand=O,p.Fade=w,p.Push=N,p.Reveal=T,p.Slide=D,p.Zoom=S,p.useAnimation=I,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
package/index.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),V=require("prop-types"),c=require("@progress/kendo-react-common"),R=require("react-transition-group");function $(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>a[t]})}}return i.default=a,Object.freeze(i)}const r=$(G),e=$(V),B=a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginTop),s=parseFloat(t.marginBottom);return a.offsetHeight+n+s},K=a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginLeft),s=parseFloat(t.marginRight);return a.offsetWidth+n+s},X={"animation-container":"k-animation-container","animation-container-relative":"k-animation-container-relative","animation-container-fixed":"k-animation-container-fixed","push-right-enter":"k-push-right-enter","push-right-appear":"k-push-right-appear","push-right-enter-active":"k-push-right-enter-active","push-right-appear-active":"k-push-right-appear-active","push-right-exit":"k-push-right-exit","push-right-exit-active":"k-push-right-exit-active","push-left-enter":"k-push-left-enter","push-left-appear":"k-push-left-appear","push-left-enter-active":"k-push-left-enter-active","push-left-appear-active":"k-push-left-appear-active","push-left-exit":"k-push-left-exit","push-left-exit-active":"k-push-left-exit-active","push-down-enter":"k-push-down-enter","push-down-appear":"k-push-down-appear","push-down-enter-active":"k-push-down-enter-active","push-down-appear-active":"k-push-down-appear-active","push-down-exit":"k-push-down-exit","push-down-exit-active":"k-push-down-exit-active","push-up-enter":"k-push-up-enter","push-up-appear":"k-push-up-appear","push-up-enter-active":"k-push-up-enter-active","push-up-appear-active":"k-push-up-appear-active","push-up-exit":"k-push-up-exit","push-up-exit-active":"k-push-up-exit-active",expand:"k-expand","expand-vertical-enter":"k-expand-vertical-enter","expand-vertical-appear":"k-expand-vertical-appear","expand-vertical-enter-active":"k-expand-vertical-enter-active","expand-vertical-appear-active":"k-expand-vertical-appear-active","expand-vertical-exit":"k-expand-vertical-exit","expand-vertical-exit-active":"k-expand-vertical-exit-active","expand-horizontal-enter":"k-expand-horizontal-enter","expand-horizontal-appear":"k-expand-horizontal-appear","expand-horizontal-enter-active":"k-expand-horizontal-enter-active","expand-horizontal-appear-active":"k-expand-horizontal-appear-active","expand-horizontal-exit":"k-expand-horizontal-exit","expand-horizontal-exit-active":"k-expand-horizontal-exit-active","child-animation-container":"k-child-animation-container","fade-enter":"k-fade-enter","fade-appear":"k-fade-appear","fade-enter-active":"k-fade-enter-active","fade-appear-active":"k-fade-appear-active","fade-exit":"k-fade-exit","fade-exit-active":"k-fade-exit-active","zoom-in-enter":"k-zoom-in-enter","zoom-in-appear":"k-zoom-in-appear","zoom-in-enter-active":"k-zoom-in-enter-active","zoom-in-appear-active":"k-zoom-in-appear-active","zoom-in-exit":"k-zoom-in-exit","zoom-in-exit-active":"k-zoom-in-exit-active","zoom-out-enter":"k-zoom-out-enter","zoom-out-appear":"k-zoom-out-appear","zoom-out-enter-active":"k-zoom-out-enter-active","zoom-out-appear-active":"k-zoom-out-appear-active","zoom-out-exit":"k-zoom-out-exit","zoom-out-exit-active":"k-zoom-out-exit-active","slide-in-appear":"k-slide-in-appear",centered:"k-centered","slide-in-appear-active":"k-slide-in-appear-active","slide-down-enter":"k-slide-down-enter","slide-down-appear":"k-slide-down-appear","slide-down-enter-active":"k-slide-down-enter-active","slide-down-appear-active":"k-slide-down-appear-active","slide-down-exit":"k-slide-down-exit","slide-down-exit-active":"k-slide-down-exit-active","slide-up-enter":"k-slide-up-enter","slide-up-appear":"k-slide-up-appear","slide-up-enter-active":"k-slide-up-enter-active","slide-up-appear-active":"k-slide-up-appear-active","slide-up-exit":"k-slide-up-exit","slide-up-exit-active":"k-slide-up-exit-active","slide-right-enter":"k-slide-right-enter","slide-right-appear":"k-slide-right-appear","slide-right-enter-active":"k-slide-right-enter-active","slide-right-appear-active":"k-slide-right-appear-active","slide-right-exit":"k-slide-right-exit","slide-right-exit-active":"k-slide-right-exit-active","slide-left-enter":"k-slide-left-enter","slide-left-appear":"k-slide-left-appear","slide-left-enter-active":"k-slide-left-enter-active","slide-left-appear-active":"k-slide-left-appear-active","slide-left-exit":"k-slide-left-exit","slide-left-exit-active":"k-slide-left-exit-active","reveal-vertical-enter":"k-reveal-vertical-enter","reveal-vertical-appear":"k-reveal-vertical-appear","reveal-vertical-enter-active":"k-reveal-vertical-enter-active","reveal-vertical-appear-active":"k-reveal-vertical-appear-active","reveal-vertical-exit":"k-reveal-vertical-exit","reveal-vertical-exit-active":"k-reveal-vertical-exit-active","reveal-horizontal-enter":"k-reveal-horizontal-enter","reveal-horizontal-appear":"k-reveal-horizontal-appear","reveal-horizontal-enter-active":"k-reveal-horizontal-enter-active","reveal-horizontal-appear-active":"k-reveal-horizontal-appear-active","reveal-horizontal-exit":"k-reveal-horizontal-exit","reveal-horizontal-exit-active":"k-reveal-horizontal-exit-active"},Y={outerHeight:B,outerWidth:K,styles:X},k=Y,g=k.styles;class E extends r.Component{constructor(){super(...arguments),this.elementRef=r.createRef()}get element(){return this.elementRef.current}render(){const{children:i,style:t,appear:n,enter:s,exit:d,transitionName:o,transitionEnterDuration:l,transitionExitDuration:u,className:v,onEnter:m,onEntering:p,onEntered:f,onExit:x,onExiting:D,onExited:S,onAfterExited:T,mountOnEnter:P,unmountOnExit:A,animationEnteringStyle:F,animationEnteredStyle:W,animationExitingStyle:q,animationExitedStyle:H,...I}=this.props,j=c.classNames(v,g["child-animation-container"]),_={transitionDelay:"0ms",...t},M={entering:{transitionDuration:`${l}ms`,...F},entered:{...W},exiting:{transitionDuration:`${u}ms`,...q},exited:{...H}},L={in:this.props.in,appear:n,enter:s,exit:d,mountOnEnter:P,unmountOnExit:A,timeout:{enter:l,exit:u},onEnter:()=>{m&&m.call(void 0,{animatedElement:this.element,target:this})},onEntering:()=>{p&&p.call(void 0,{animatedElement:this.element,target:this})},onEntered:()=>{f&&f.call(void 0,{animatedElement:this.element,target:this})},onExit:()=>{x&&x.call(void 0,{animatedElement:this.element,target:this})},onExiting:()=>{D&&D.call(void 0,{animatedElement:this.element,target:this})},onExited:()=>{T&&T.call(void 0,{animatedElement:this.element,target:this}),S&&S.call(void 0,{animatedElement:this.element,target:this})},classNames:{appear:g[`${o}-appear`]||`${o}-appear`,appearActive:g[`${o}-appear-active`]||`${o}-appear-active`,enter:g[`${o}-enter`]||`${o}-enter`,enterActive:g[`${o}-enter-active`]||`${o}-enter-active`,exit:g[`${o}-exit`]||`${o}-exit`,exitActive:g[`${o}-exit-active`]||`${o}-exit-active`}};return r.createElement(R.CSSTransition,{...L,...I,nodeRef:this.elementRef},U=>r.createElement("div",{style:{..._,...M[U]},className:j,ref:this.elementRef},i))}}E.propTypes={in:e.bool,children:e.oneOfType([e.arrayOf(e.node),e.node]),transitionName:e.string.isRequired,className:e.string,appear:e.bool,enter:e.bool,exit:e.bool,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired,mountOnEnter:e.bool,unmountOnExit:e.bool,animationEnteringStyle:e.object,animationEnteredStyle:e.object,animationExitingStyle:e.object,animationExitedStyle:e.object};E.defaultProps={mountOnEnter:!0,unmountOnExit:!1,onEnter:c.noop,onEntering:c.noop,onEntered:c.noop,onExit:c.noop,onExiting:c.noop,onExited:c.noop,onAfterExited:c.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};const Z={name:"@progress/kendo-react-animation",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},b=k.styles;class h extends r.Component{constructor(i){super(i),c.validatePackage(Z)}render(){const{id:i,style:t,children:n,component:s,className:d,childFactory:o,stackChildren:l,componentChildStyle:u,componentChildClassName:v,...m}=this.props,p={id:i,style:t,component:s,childFactory:o,className:c.classNames(b["animation-container"],b["animation-container-relative"],d)},f=r.Children.map(n||null,x=>r.createElement(E,{...m,style:u,className:v},x));return r.createElement(R.TransitionGroup,{...p},f)}}h.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any,transitionName:e.string.isRequired,appear:e.bool.isRequired,enter:e.bool.isRequired,exit:e.bool.isRequired,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired};h.defaultProps={component:"div"};class y extends r.Component{render(){const{children:i,...t}=this.props,n={transitionName:"fade"};return r.createElement(h,{...n,...t},i)}}y.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any};y.defaultProps={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};class z extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`expand-${i}`};return r.createElement(h,{...s,...n},t)}}z.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any};z.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const J={position:"absolute",top:"0",left:"0"};class w extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(h,{...n,transitionName:`push-${t}`,animationExitingStyle:this.props.stackChildren?J:void 0},i)}}w.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool};w.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};class O extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`slide-${i}`};return r.createElement(h,{...s,...n},t)}}O.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any};O.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};const Q={position:"absolute",top:"0",left:"0"};class N extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(h,{...n,transitionName:`zoom-${t}`,animationExitingStyle:this.props.stackChildren?Q:void 0},i)}}N.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["in","out"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool};N.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};class C extends r.Component{constructor(){super(...arguments),this.state={maxHeight:void 0,maxWidth:void 0},this.componentWillEnter=i=>{const{onEnter:t,onBeforeEnter:n}=this.props;n&&n.call(void 0,i),this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentIsEntering=i=>{const{onEntering:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentWillExit=i=>{const{onExit:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.updateContainerDimensions=(i,t=c.noop)=>{const n=i.firstChild;if(n){const s=k.outerHeight(n),d=k.outerWidth(n);this.setState({maxHeight:s,maxWidth:d},t)}}}render(){const{direction:i,children:t,childFactory:n,...s}=this.props,{maxHeight:d,maxWidth:o}=this.state;let l;i==="vertical"?l={maxHeight:d?`${d}px`:""}:l={maxWidth:o?`${o}px`:""};const u={maxHeight:l.maxHeight,maxWidth:l.maxWidth},v=m=>{let p=n?n(m):m;return p.props.in?p:r.cloneElement(p,{...p.props,style:{...p.props.style,maxHeight:l.maxHeight,maxWidth:l.maxWidth}})};return r.createElement(h,{...s,childFactory:v,onEnter:this.componentWillEnter,onEntering:this.componentIsEntering,onExit:this.componentWillExit,animationEnteringStyle:u,transitionName:`reveal-${i}`},t)}}C.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any};C.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const ee=(a,i)=>{const t=r.useRef(0),n=r.useRef(!1),s=r.useRef(),d=o=>{const l=o.duration;let u,v,m=t.current&&1-t.current;o.onStart&&o.onStart();const p=f=>{u||(u=f),v=f-u+1;const x=v/l+m;x<=1?(o.onUpdate&&o.onUpdate(x),s.current=window.requestAnimationFrame(p),t.current=x):(o.onEnd&&o.onEnd(1),t.current=0)};s.current=window.requestAnimationFrame(p)};r.useEffect(()=>(d(a),()=>{s.current&&window.cancelAnimationFrame(s.current)}),i),r.useEffect(()=>{n.current=!0},[])};exports.Animation=h;exports.AnimationChild=E;exports.Expand=z;exports.Fade=y;exports.Push=w;exports.Reveal=C;exports.Slide=O;exports.Zoom=N;exports.useAnimation=ee;
|
|
5
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),V=require("prop-types"),c=require("@progress/kendo-react-common"),R=require("react-transition-group");function $(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>a[t]})}}return i.default=a,Object.freeze(i)}const r=$(G),e=$(V),B=a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginTop),s=parseFloat(t.marginBottom);return a.offsetHeight+n+s},K=a=>{if(!a||!a.ownerDocument.defaultView)return 0;const t=a.ownerDocument.defaultView.getComputedStyle(a),n=parseFloat(t.marginLeft),s=parseFloat(t.marginRight);return a.offsetWidth+n+s},X={"animation-container":"k-animation-container","animation-container-relative":"k-animation-container-relative","animation-container-fixed":"k-animation-container-fixed","push-right-enter":"k-push-right-enter","push-right-appear":"k-push-right-appear","push-right-enter-active":"k-push-right-enter-active","push-right-appear-active":"k-push-right-appear-active","push-right-exit":"k-push-right-exit","push-right-exit-active":"k-push-right-exit-active","push-left-enter":"k-push-left-enter","push-left-appear":"k-push-left-appear","push-left-enter-active":"k-push-left-enter-active","push-left-appear-active":"k-push-left-appear-active","push-left-exit":"k-push-left-exit","push-left-exit-active":"k-push-left-exit-active","push-down-enter":"k-push-down-enter","push-down-appear":"k-push-down-appear","push-down-enter-active":"k-push-down-enter-active","push-down-appear-active":"k-push-down-appear-active","push-down-exit":"k-push-down-exit","push-down-exit-active":"k-push-down-exit-active","push-up-enter":"k-push-up-enter","push-up-appear":"k-push-up-appear","push-up-enter-active":"k-push-up-enter-active","push-up-appear-active":"k-push-up-appear-active","push-up-exit":"k-push-up-exit","push-up-exit-active":"k-push-up-exit-active",expand:"k-expand","expand-vertical-enter":"k-expand-vertical-enter","expand-vertical-appear":"k-expand-vertical-appear","expand-vertical-enter-active":"k-expand-vertical-enter-active","expand-vertical-appear-active":"k-expand-vertical-appear-active","expand-vertical-exit":"k-expand-vertical-exit","expand-vertical-exit-active":"k-expand-vertical-exit-active","expand-horizontal-enter":"k-expand-horizontal-enter","expand-horizontal-appear":"k-expand-horizontal-appear","expand-horizontal-enter-active":"k-expand-horizontal-enter-active","expand-horizontal-appear-active":"k-expand-horizontal-appear-active","expand-horizontal-exit":"k-expand-horizontal-exit","expand-horizontal-exit-active":"k-expand-horizontal-exit-active","child-animation-container":"k-child-animation-container","fade-enter":"k-fade-enter","fade-appear":"k-fade-appear","fade-enter-active":"k-fade-enter-active","fade-appear-active":"k-fade-appear-active","fade-exit":"k-fade-exit","fade-exit-active":"k-fade-exit-active","zoom-in-enter":"k-zoom-in-enter","zoom-in-appear":"k-zoom-in-appear","zoom-in-enter-active":"k-zoom-in-enter-active","zoom-in-appear-active":"k-zoom-in-appear-active","zoom-in-exit":"k-zoom-in-exit","zoom-in-exit-active":"k-zoom-in-exit-active","zoom-out-enter":"k-zoom-out-enter","zoom-out-appear":"k-zoom-out-appear","zoom-out-enter-active":"k-zoom-out-enter-active","zoom-out-appear-active":"k-zoom-out-appear-active","zoom-out-exit":"k-zoom-out-exit","zoom-out-exit-active":"k-zoom-out-exit-active","slide-in-appear":"k-slide-in-appear",centered:"k-centered","slide-in-appear-active":"k-slide-in-appear-active","slide-down-enter":"k-slide-down-enter","slide-down-appear":"k-slide-down-appear","slide-down-enter-active":"k-slide-down-enter-active","slide-down-appear-active":"k-slide-down-appear-active","slide-down-exit":"k-slide-down-exit","slide-down-exit-active":"k-slide-down-exit-active","slide-up-enter":"k-slide-up-enter","slide-up-appear":"k-slide-up-appear","slide-up-enter-active":"k-slide-up-enter-active","slide-up-appear-active":"k-slide-up-appear-active","slide-up-exit":"k-slide-up-exit","slide-up-exit-active":"k-slide-up-exit-active","slide-right-enter":"k-slide-right-enter","slide-right-appear":"k-slide-right-appear","slide-right-enter-active":"k-slide-right-enter-active","slide-right-appear-active":"k-slide-right-appear-active","slide-right-exit":"k-slide-right-exit","slide-right-exit-active":"k-slide-right-exit-active","slide-left-enter":"k-slide-left-enter","slide-left-appear":"k-slide-left-appear","slide-left-enter-active":"k-slide-left-enter-active","slide-left-appear-active":"k-slide-left-appear-active","slide-left-exit":"k-slide-left-exit","slide-left-exit-active":"k-slide-left-exit-active","reveal-vertical-enter":"k-reveal-vertical-enter","reveal-vertical-appear":"k-reveal-vertical-appear","reveal-vertical-enter-active":"k-reveal-vertical-enter-active","reveal-vertical-appear-active":"k-reveal-vertical-appear-active","reveal-vertical-exit":"k-reveal-vertical-exit","reveal-vertical-exit-active":"k-reveal-vertical-exit-active","reveal-horizontal-enter":"k-reveal-horizontal-enter","reveal-horizontal-appear":"k-reveal-horizontal-appear","reveal-horizontal-enter-active":"k-reveal-horizontal-enter-active","reveal-horizontal-appear-active":"k-reveal-horizontal-appear-active","reveal-horizontal-exit":"k-reveal-horizontal-exit","reveal-horizontal-exit-active":"k-reveal-horizontal-exit-active"},Y={outerHeight:B,outerWidth:K,styles:X},k=Y,g=k.styles;class E extends r.Component{constructor(){super(...arguments),this.elementRef=r.createRef()}get element(){return this.elementRef.current}render(){const{children:i,style:t,appear:n,enter:s,exit:d,transitionName:o,transitionEnterDuration:l,transitionExitDuration:u,className:v,onEnter:m,onEntering:p,onEntered:f,onExit:x,onExiting:D,onExited:S,onAfterExited:T,mountOnEnter:P,unmountOnExit:A,animationEnteringStyle:F,animationEnteredStyle:W,animationExitingStyle:q,animationExitedStyle:H,...I}=this.props,j=c.classNames(v,g["child-animation-container"]),_={transitionDelay:"0ms",...t},M={entering:{transitionDuration:`${l}ms`,...F},entered:{...W},exiting:{transitionDuration:`${u}ms`,...q},exited:{...H}},L={in:this.props.in,appear:n,enter:s,exit:d,mountOnEnter:P,unmountOnExit:A,timeout:{enter:l,exit:u},onEnter:()=>{m&&m.call(void 0,{animatedElement:this.element,target:this})},onEntering:()=>{p&&p.call(void 0,{animatedElement:this.element,target:this})},onEntered:()=>{f&&f.call(void 0,{animatedElement:this.element,target:this})},onExit:()=>{x&&x.call(void 0,{animatedElement:this.element,target:this})},onExiting:()=>{D&&D.call(void 0,{animatedElement:this.element,target:this})},onExited:()=>{T&&T.call(void 0,{animatedElement:this.element,target:this}),S&&S.call(void 0,{animatedElement:this.element,target:this})},classNames:{appear:g[`${o}-appear`]||`${o}-appear`,appearActive:g[`${o}-appear-active`]||`${o}-appear-active`,enter:g[`${o}-enter`]||`${o}-enter`,enterActive:g[`${o}-enter-active`]||`${o}-enter-active`,exit:g[`${o}-exit`]||`${o}-exit`,exitActive:g[`${o}-exit-active`]||`${o}-exit-active`}};return r.createElement(R.CSSTransition,{...L,...I,nodeRef:this.elementRef},U=>r.createElement("div",{style:{..._,...M[U]},className:j,ref:this.elementRef},i))}}E.propTypes={in:e.bool,children:e.oneOfType([e.arrayOf(e.node),e.node]),transitionName:e.string.isRequired,className:e.string,appear:e.bool,enter:e.bool,exit:e.bool,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired,mountOnEnter:e.bool,unmountOnExit:e.bool,animationEnteringStyle:e.object,animationEnteredStyle:e.object,animationExitingStyle:e.object,animationExitedStyle:e.object};E.defaultProps={mountOnEnter:!0,unmountOnExit:!1,onEnter:c.noop,onEntering:c.noop,onEntered:c.noop,onExit:c.noop,onExiting:c.noop,onExited:c.noop,onAfterExited:c.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};const Z={name:"@progress/kendo-react-animation",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},b=k.styles;class h extends r.Component{constructor(i){super(i),c.validatePackage(Z)}render(){const{id:i,style:t,children:n,component:s,className:d,childFactory:o,stackChildren:l,componentChildStyle:u,componentChildClassName:v,...m}=this.props,p={id:i,style:t,component:s,childFactory:o,className:c.classNames(b["animation-container"],b["animation-container-relative"],d)},f=r.Children.map(n||null,x=>r.createElement(E,{...m,style:u,className:v},x));return r.createElement(R.TransitionGroup,{...p},f)}}h.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any,transitionName:e.string.isRequired,appear:e.bool.isRequired,enter:e.bool.isRequired,exit:e.bool.isRequired,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired};h.defaultProps={component:"div"};class y extends r.Component{render(){const{children:i,...t}=this.props,n={transitionName:"fade"};return r.createElement(h,{...n,...t},i)}}y.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.string,id:e.string,style:e.any};y.defaultProps={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};class z extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`expand-${i}`};return r.createElement(h,{...s,...n},t)}}z.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any};z.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const J={position:"absolute",top:"0",left:"0"};class w extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(h,{...n,transitionName:`push-${t}`,animationExitingStyle:this.props.stackChildren?J:void 0},i)}}w.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool};w.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};class O extends r.Component{render(){const{direction:i,children:t,...n}=this.props,s={transitionName:`slide-${i}`};return r.createElement(h,{...s,...n},t)}}O.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.string,id:e.string,style:e.any};O.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};const Q={position:"absolute",top:"0",left:"0"};class N extends r.Component{render(){const{children:i,direction:t,...n}=this.props;return r.createElement(h,{...n,transitionName:`zoom-${t}`,animationExitingStyle:this.props.stackChildren?Q:void 0},i)}}N.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["in","out"]),component:e.string,id:e.string,style:e.any,stackChildren:e.bool};N.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};class C extends r.Component{constructor(){super(...arguments),this.state={maxHeight:void 0,maxWidth:void 0},this.componentWillEnter=i=>{const{onEnter:t,onBeforeEnter:n}=this.props;n&&n.call(void 0,i),this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentIsEntering=i=>{const{onEntering:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.componentWillExit=i=>{const{onExit:t}=this.props;this.updateContainerDimensions(i.animatedElement,()=>{t&&t.call(void 0,i)})},this.updateContainerDimensions=(i,t=c.noop)=>{const n=i.firstChild;if(n){const s=k.outerHeight(n),d=k.outerWidth(n);this.setState({maxHeight:s,maxWidth:d},t)}}}render(){const{direction:i,children:t,childFactory:n,...s}=this.props,{maxHeight:d,maxWidth:o}=this.state;let l;i==="vertical"?l={maxHeight:d?`${d}px`:""}:l={maxWidth:o?`${o}px`:""};const u={maxHeight:l.maxHeight,maxWidth:l.maxWidth},v=m=>{let p=n?n(m):m;return p.props.in?p:r.cloneElement(p,{...p.props,style:{...p.props.style,maxHeight:l.maxHeight,maxWidth:l.maxWidth}})};return r.createElement(h,{...s,childFactory:v,onEnter:this.componentWillEnter,onEntering:this.componentIsEntering,onExit:this.componentWillExit,animationEnteringStyle:u,transitionName:`reveal-${i}`},t)}}C.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.string,id:e.string,style:e.any};C.defaultProps={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};const ee=(a,i)=>{const t=r.useRef(0),n=r.useRef(!1),s=r.useRef(),d=o=>{const l=o.duration;let u,v,m=t.current&&1-t.current;o.onStart&&o.onStart();const p=f=>{u||(u=f),v=f-u+1;const x=v/l+m;x<=1?(o.onUpdate&&o.onUpdate(x),s.current=window.requestAnimationFrame(p),t.current=x):(o.onEnd&&o.onEnd(1),t.current=0)};s.current=window.requestAnimationFrame(p)};r.useEffect(()=>(d(a),()=>{s.current&&window.cancelAnimationFrame(s.current)}),i),r.useEffect(()=>{n.current=!0},[])};exports.Animation=h;exports.AnimationChild=E;exports.Expand=z;exports.Fade=y;exports.Push=w;exports.Reveal=C;exports.Slide=O;exports.Zoom=N;exports.useAnimation=ee;
|
package/index.mjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
"use client";
|
|
5
6
|
import * as a from "react";
|
|
6
7
|
import * as e from "prop-types";
|
|
7
8
|
import { classNames as C, noop as v, validatePackage as V } from "@progress/kendo-react-common";
|
|
@@ -260,7 +261,7 @@ const Z = {
|
|
|
260
261
|
name: "@progress/kendo-react-animation",
|
|
261
262
|
productName: "KendoReact",
|
|
262
263
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
263
|
-
publishDate:
|
|
264
|
+
publishDate: 1702304679,
|
|
264
265
|
version: "",
|
|
265
266
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
266
267
|
}, N = k.styles;
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-animation",
|
|
3
|
-
"version": "7.0.0
|
|
3
|
+
"version": "7.0.0",
|
|
4
4
|
"description": "React Animation component assists with animating HTML elements. KendoReact Animation package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
7
7
|
"homepage": "https://www.telerik.com/kendo-react-ui",
|
|
8
8
|
"main": "./index.js",
|
|
9
|
+
"module": "./index.mjs",
|
|
9
10
|
"types": "./index.d.ts",
|
|
10
11
|
"exports": {
|
|
11
12
|
".": {
|
|
@@ -16,7 +17,7 @@
|
|
|
16
17
|
"sideEffects": false,
|
|
17
18
|
"peerDependencies": {
|
|
18
19
|
"@progress/kendo-licensing": "^1.3.0",
|
|
19
|
-
"@progress/kendo-react-common": "7.0.0
|
|
20
|
+
"@progress/kendo-react-common": "7.0.0",
|
|
20
21
|
"@progress/kendo-svg-icons": "^2.0.0",
|
|
21
22
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
22
23
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0",
|