text: (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{UqVT:function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return j})),n.d(t,"default",(function(){return s}));var a=n("Fcif"),r=n("+I+c"),b=n("mXGw"),c=n("/FXl"),l=n("TjRS"),i=n("ZFoC"),o=n("GYKu"),p=n("nVj4"),d=n("0rkN"),m=n("OWCF"),j=(n("aD51"),{});void 0!==j&&j&&j===Object(j)&&Object.isExtensible(j)&&!j.hasOwnProperty("__filemeta")&&Object.defineProperty(j,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/docs/components/animatedGroup.mdx"}});var O={_frontmatter:j},u=l.a;function s(e){var t,n=e.components,s=Object(r.a)(e,["components"]);return Object(c.b)(u,Object(a.a)({},O,s,{components:n,mdxType:"MDXLayout"}),Object(c.b)("h1",{id:"animatedgroup"},"AnimatedGroup"),Object(c.b)("p",null,"The ",Object(c.b)("inlineCode",{parentName:"p"},"AnimatedGroup")," component animates it's children by the specified ",Object(c.b)("inlineCode",{parentName:"p"},"movement")," in ",Object(c.b)("inlineCode",{parentName:"p"},"direction")," for ",Object(c.b)("inlineCode",{parentName:"p"},"durationMsecs"),"."),Object(c.b)("p",null,"In the default implementation, ",Object(c.b)("inlineCode",{parentName:"p"},"AnimatedGroup")," scrolls it's children, ",Object(c.b)("inlineCode",{parentName:"p"},"forward")," or ",Object(c.b)("inlineCode",{parentName:"p"},"back"),"."),Object(c.b)("h2",{id:"example"},"Example"),Object(c.b)(i.c,{__position:0,__code:"() => {\n  const [direction, setDirection] = useState()\n  const [key, setKey] = useState()\n  function generateUID() {\n    return Math.random()\n      .toString(36)\n      .replace(/[^a-z]+/g, '')\n      .substr(2, 10)\n  }\n  function handleForwardClick() {\n    setDirection('forward')\n    setKey(generateUID())\n  }\n  function handleBackClick() {\n    setDirection('back')\n    setKey(generateUID())\n  }\n  return (\n    <>\n      <ButtonBar>\n        <Button\n          onClick={handleForwardClick}\n          variant=\"contained\"\n          color=\"primary\"\n        >\n          Back\n        </Button>\n        <Button onClick={handleBackClick} variant=\"contained\" color=\"primary\">\n          Forward\n        </Button>\n      </ButtonBar>\n      <div style={{ width: '200px' }}>\n        <AnimatedGroup\n          direction={direction}\n          durationMsecs={5000}\n          movement={200}\n          transitionKey={key}\n        >\n          <AddYourComponentHere />\n        </AnimatedGroup>\n      </div>\n    </>\n  )\n}",__scope:(t={props:s,DefaultLayout:l.a,useState:b.useState,Playground:i.c,AnimatedGroup:o.a,AddYourComponentHere:p.a,Button:d.a,ButtonBar:m.a},t.DefaultLayout=l.a,t._frontmatter=j,t),mdxType:"Playground"},(function(){var e=Object(b.useState)(),t=e[0],n=e[1],a=Object(b.useState)(),r=a[0],l=a[1];function i(){return Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10)}return Object(c.b)(b.Fragment,null,Object(c.b)(m.a,{mdxType:"ButtonBar"},Object(c.b)(d.a,{onClick:function(){n("forward"),l(i())},variant:"contained",color:"primary",mdxType:"Button"},"Back"),Object(c.b)(d.a,{onClick:function(){n("back"),l(i())},variant:"contained",color:"primary",mdxType:"Button"},"Forward")),Object(c.b)("div",{style:{width:"200px"}},Object(c.b)(o.a,{direction:t,durationMsecs:5e3,movement:200,transitionKey:r,mdxType:"AnimatedGroup"},Object(c.b)(p.a,{mdxType:"AddYourComponentHere"}))))})),Object(c.b)("h2",{id:"props"},"Props"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Prop Name"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Is Required"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Default Value"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Description"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"children"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"node")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"optional"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Children")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"className"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"string")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"optional"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Class name of root element")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"direction"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"[forward, back]"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"optional"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Direction of animation")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"durationMsecs"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"optional"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"1200")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Duration of animation in msecs")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"movement"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"optional"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Pixel movement required")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"onEnter"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"func")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"optional"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Callback called onEnter")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"onExited"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"func")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"optional"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Callback called onExited")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"transitionKey"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"string")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"required"),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Key for animation")))),Object(c.b)("h2",{id:"importing"},"Importing"),Object(c.b)("p",null,"It can be imported as either the base component"),Object(c.b)("pre",null,Object(c.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),'import { AnimatedGroup } from "@use-date-input/core";\n')),Object(c.b)("p",null,"or as an overridable component that can be replaced through the ",Object(c.b)("inlineCode",{parentName:"p"},"components")," prop in ",Object(c.b)("inlineCode",{parentName:"p"},"CalendarProvider"),".",Object(c.b)("br",{parentName:"p"}),"\n","Refer to ",Object(c.b)("a",Object(a.a)({parentName:"p"},{href:"https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components"}),"How to replace UI components"),"."),Object(c.b)("pre",null,Object(c.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),'import { CustomisableAnimatedGroup } from "@use-date-input/core";\n')),Object(c.b)("p",null,"If providing your own component, it can be useful to import the base component and use it within your composition.  "))}void 0!==s&&s&&s===Object(s)&&Object.isExtensible(s)&&!s.hasOwnProperty("__filemeta")&&Object.defineProperty(s,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/docs/components/animatedGroup.mdx"}}),s.isMDXComponent=!0}}]);
  //# sourceMappingURL=component---src-docs-components-animated-group-mdx-64394e3b02e10abbff6e.js.map