%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[58],{1129:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContextProvider=t.FrameContext=void 0;var o,a=n(0),s=(o=a)&&o.__esModule?o:{default:o};var r=void 0,i=void 0;"undefined"!==typeof document&&(r=document),"undefined"!==typeof window&&(i=window);var c=t.FrameContext=s.default.createContext({document:r,window:i}),l=c.Provider,d=c.Consumer;t.FrameContextProvider=l,t.FrameContextConsumer=d},1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return C}));var o=n(118),a=n(1100),s=n(1109),r=n(1090),i=n(1117),c=n(1119),l=n(5),d=n(0),m=n(1024),p=n(551),h=n(1087),u=n(1099),f=n(11),j=n(370),b=n(371),v=n(1131),g=n.n(v),x=n(1);const y=Object(m.a)({productionPrefix:"iframe-"});class O extends d.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(j.a)({...Object(p.a)(),plugins:[...Object(p.a)().plugins,Object(b.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(x.jsxs)(x.Fragment,{children:[Object(x.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(x.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(x.jsx)(g.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(x.jsx)(h.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(x.jsx)(u.a,{theme:n,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var w=Object(f.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function N(e){const[t,n]=Object(d.useState)(e.currentTabIndex),{component:m,raw:p,iframe:h,className:u}=e;return Object(x.jsxs)(s.a,{className:Object(l.a)(u,"shadow"),children:[Object(x.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(x.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[m&&Object(x.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(r.a,{children:"remove_red_eye"})}),p&&Object(x.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(r.a,{children:"code"})})]})}),Object(x.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(x.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:m&&(h?Object(x.jsx)(w,{children:Object(x.jsx)(m,{})}):Object(x.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(x.jsx)(m,{})}))}),Object(x.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:p&&Object(x.jsx)("div",{className:"flex flex-1",children:Object(x.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:p.default})})})]})]})}N.defaultProps={currentTabIndex:0};var C=N},1131:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContext=void 0;var o=n(1129);Object.defineProperty(t,"FrameContext",{enumerable:!0,get:function(){return o.FrameContext}}),Object.defineProperty(t,"FrameContextConsumer",{enumerable:!0,get:function(){return o.FrameContextConsumer}});var a,s=n(1132),r=(a=s)&&a.__esModule?a:{default:a};t.default=r.default},1132:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),s=n(0),r=m(s),i=m(n(22)),c=m(n(553)),l=n(1129),d=m(n(1133));function m(e){return e&&e.__esModule?e:{default:e}}var p=function(e){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return o.handleLoad=function(){o.forceUpdate()},o._isMounted=!1,o}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),a(t,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var t=this.props.contentDidMount,n=this.props.contentDidUpdate,o=e.defaultView||e.parentView,a=r.default.createElement(d.default,{contentDidMount:t,contentDidUpdate:n},r.default.createElement(l.FrameContextProvider,{value:{document:e,window:o}},r.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var s=this.getMountTarget();return[i.default.createPortal(this.props.head,this.getDoc().head),i.default.createPortal(a,s)]}},{key:"render",value:function(){var e=this,t=o({},this.props,{children:void 0});return delete t.head,delete t.initialContent,delete t.mountTarget,delete t.contentDidMount,delete t.contentDidUpdate,r.default.createElement("iframe",o({},t,{ref:function(t){e.node=t}}),this.renderFrameContents())}}]),t}(s.Component);p.propTypes={style:c.default.object,head:c.default.node,initialContent:c.default.string,mountTarget:c.default.string,contentDidMount:c.default.func,contentDidUpdate:c.default.func,children:c.default.oneOfType([c.default.element,c.default.arrayOf(c.default.element)])},p.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},t.default=p},1133:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(0),s=(r(a),r(n(553)));function r(e){return e&&e.__esModule?e:{default:e}}var i=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return a.Children.only(this.props.children)}}]),t}(a.Component);i.propTypes={children:s.default.element.isRequired,contentDidMount:s.default.func.isRequired,contentDidUpdate:s.default.func.isRequired},t.default=i},1344:function(e,t,n){"use strict";var o=n(2),a=n(64),s=n(7),r=n(0),i=n(287),c=n(58),l=n(43),d=n(70),m=n(25),p={entering:{transform:"none"},entered:{transform:"none"}},h={enter:c.b.enteringScreen,exit:c.b.leavingScreen},u=r.forwardRef((function(e,t){var n=e.children,c=e.disableStrictModeCompat,u=void 0!==c&&c,f=e.in,j=e.onEnter,b=e.onEntered,v=e.onEntering,g=e.onExit,x=e.onExited,y=e.onExiting,O=e.style,w=e.timeout,N=void 0===w?h:w,C=e.TransitionComponent,k=void 0===C?i.a:C,S=Object(s.a)(e,["children","disableStrictModeCompat","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout","TransitionComponent"]),P=Object(l.a)(),E=P.unstable_strictMode&&!u,F=r.useRef(null),T=Object(m.a)(n.ref,t),_=Object(m.a)(E?F:void 0,T),M=function(e){return function(t,n){if(e){var o=E?[F.current,t]:[t,n],s=Object(a.a)(o,2),r=s[0],i=s[1];void 0===i?e(r):e(r,i)}}},D=M(v),R=M((function(e,t){Object(d.b)(e);var n=Object(d.a)({style:O,timeout:N},{mode:"enter"});e.style.webkitTransition=P.transitions.create("transform",n),e.style.transition=P.transitions.create("transform",n),j&&j(e,t)})),L=M(b),U=M(y),G=M((function(e){var t=Object(d.a)({style:O,timeout:N},{mode:"exit"});e.style.webkitTransition=P.transitions.create("transform",t),e.style.transition=P.transitions.create("transform",t),g&&g(e)})),W=M(x);return r.createElement(k,Object(o.a)({appear:!0,in:f,nodeRef:E?F:void 0,onEnter:R,onEntered:L,onEntering:D,onExit:G,onExited:W,onExiting:U,timeout:N},S),(function(e,t){return r.cloneElement(n,Object(o.a)({style:Object(o.a)({transform:"scale(0)",visibility:"exited"!==e||f?void 0:"hidden"},p[e],O,n.props.style),ref:_},t))}))}));t.a=u},2433:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var o=n(0),a=n.n(o),s=n(1072),r=n(1095),i=n(193),c=n(1106),l=n(1094),d=n(1);const m=Object(s.a)((e=>({root:{height:180},container:{display:"flex"},paper:{margin:e.spacing(1)},svg:{width:100,height:100},polygon:{fill:e.palette.common.white,stroke:e.palette.divider,strokeWidth:1}})));function p(){const e=m(),[t,n]=a.a.useState(!1);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(l.a,{control:Object(d.jsx)(r.a,{checked:t,onChange:()=>{n((e=>!e))}}),label:"Show"}),Object(d.jsxs)("div",{className:e.container,children:[Object(d.jsx)(c.a,{in:t,children:Object(d.jsx)(i.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})}),Object(d.jsx)(c.a,{in:t,collapsedSize:40,children:Object(d.jsx)(i.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})})]})]})}},2434:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\nimport Paper from '@material-ui/core/Paper';\nimport Collapse from '@material-ui/core/Collapse';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n height: 180,\n },\n container: {\n display: 'flex',\n },\n paper: {\n margin: theme.spacing(1),\n },\n svg: {\n width: 100,\n height: 100,\n },\n polygon: {\n fill: theme.palette.common.white,\n stroke: theme.palette.divider,\n strokeWidth: 1,\n },\n}));\n\nexport default function SimpleCollapse() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState(false);\n\n const handleChange = () => {\n setChecked((prev) => !prev);\n };\n\n return (\n <div className={classes.root}>\n <FormControlLabel\n control={<Switch checked={checked} onChange={handleChange} />}\n label=\"Show\"\n />\n <div className={classes.container}>\n <Collapse in={checked}>\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Collapse>\n <Collapse in={checked} collapsedSize={40}>\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Collapse>\n </div>\n </div>\n );\n}\n"},2435:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var o=n(0),a=n.n(o),s=n(1072),r=n(1095),i=n(193),c=n(546),l=n(1094),d=n(1);const m=Object(s.a)((e=>({root:{height:180},container:{display:"flex"},paper:{margin:e.spacing(1)},svg:{width:100,height:100},polygon:{fill:e.palette.common.white,stroke:e.palette.divider,strokeWidth:1}})));function p(){const e=m(),[t,n]=a.a.useState(!1);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(l.a,{control:Object(d.jsx)(r.a,{checked:t,onChange:()=>{n((e=>!e))}}),label:"Show"}),Object(d.jsx)("div",{className:e.container,children:Object(d.jsx)(c.a,{in:t,children:Object(d.jsx)(i.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})})})]})}},2436:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\nimport Paper from '@material-ui/core/Paper';\nimport Fade from '@material-ui/core/Fade';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n height: 180,\n },\n container: {\n display: 'flex',\n },\n paper: {\n margin: theme.spacing(1),\n },\n svg: {\n width: 100,\n height: 100,\n },\n polygon: {\n fill: theme.palette.common.white,\n stroke: theme.palette.divider,\n strokeWidth: 1,\n },\n}));\n\nexport default function SimpleFade() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState(false);\n\n const handleChange = () => {\n setChecked((prev) => !prev);\n };\n\n return (\n <div className={classes.root}>\n <FormControlLabel\n control={<Switch checked={checked} onChange={handleChange} />}\n label=\"Show\"\n />\n <div className={classes.container}>\n <Fade in={checked}>\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Fade>\n </div>\n </div>\n );\n}\n"},2437:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var o=n(0),a=n.n(o),s=n(1072),r=n(1095),i=n(193),c=n(368),l=n(1094),d=n(1);const m=Object(s.a)((e=>({root:{height:180},container:{display:"flex"},paper:{margin:e.spacing(1)},svg:{width:100,height:100},polygon:{fill:e.palette.common.white,stroke:e.palette.divider,strokeWidth:1}})));function p(){const e=m(),[t,n]=a.a.useState(!1);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(l.a,{control:Object(d.jsx)(r.a,{checked:t,onChange:()=>{n((e=>!e))}}),label:"Show"}),Object(d.jsxs)("div",{className:e.container,children:[Object(d.jsx)(c.a,{in:t,children:Object(d.jsx)(i.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})}),Object(d.jsx)(c.a,{in:t,style:{transformOrigin:"0 0 0"},...t?{timeout:1e3}:{},children:Object(d.jsx)(i.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})})]})]})}},2438:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\nimport Paper from '@material-ui/core/Paper';\nimport Grow from '@material-ui/core/Grow';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n height: 180,\n },\n container: {\n display: 'flex',\n },\n paper: {\n margin: theme.spacing(1),\n },\n svg: {\n width: 100,\n height: 100,\n },\n polygon: {\n fill: theme.palette.common.white,\n stroke: theme.palette.divider,\n strokeWidth: 1,\n },\n}));\n\nexport default function SimpleGrow() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState(false);\n\n const handleChange = () => {\n setChecked((prev) => !prev);\n };\n\n return (\n <div className={classes.root}>\n <FormControlLabel\n control={<Switch checked={checked} onChange={handleChange} />}\n label=\"Show\"\n />\n <div className={classes.container}>\n <Grow in={checked}>\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Grow>\n {/* Conditionally applies the timeout prop to change the entry speed. */}\n <Grow\n in={checked}\n style={{ transformOrigin: '0 0 0' }}\n {...(checked ? { timeout: 1000 } : {})}\n >\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Grow>\n </div>\n </div>\n );\n}\n"},2439:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var o=n(0),a=n.n(o),s=n(1095),r=n(193),i=n(1040),c=n(1094),l=n(1072),d=n(1);const m=Object(l.a)((e=>({root:{height:180},wrapper:{width:100+e.spacing(2)},paper:{zIndex:1,position:"relative",margin:e.spacing(1)},svg:{width:100,height:100},polygon:{fill:e.palette.common.white,stroke:e.palette.divider,strokeWidth:1}})));function p(){const e=m(),[t,n]=a.a.useState(!1);return Object(d.jsx)("div",{className:e.root,children:Object(d.jsxs)("div",{className:e.wrapper,children:[Object(d.jsx)(c.a,{control:Object(d.jsx)(s.a,{checked:t,onChange:()=>{n((e=>!e))}}),label:"Show"}),Object(d.jsx)(i.a,{direction:"up",in:t,mountOnEnter:!0,unmountOnExit:!0,children:Object(d.jsx)(r.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})})]})})}},2440:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport Switch from '@material-ui/core/Switch';\nimport Paper from '@material-ui/core/Paper';\nimport Slide from '@material-ui/core/Slide';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n height: 180,\n },\n wrapper: {\n width: 100 + theme.spacing(2),\n },\n paper: {\n zIndex: 1,\n position: 'relative',\n margin: theme.spacing(1),\n },\n svg: {\n width: 100,\n height: 100,\n },\n polygon: {\n fill: theme.palette.common.white,\n stroke: theme.palette.divider,\n strokeWidth: 1,\n },\n}));\n\nexport default function SimpleSlide() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState(false);\n\n const handleChange = () => {\n setChecked((prev) => !prev);\n };\n\n return (\n <div className={classes.root}>\n <div className={classes.wrapper}>\n <FormControlLabel\n control={<Switch checked={checked} onChange={handleChange} />}\n label=\"Show\"\n />\n <Slide direction=\"up\" in={checked} mountOnEnter unmountOnExit>\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Slide>\n </div>\n </div>\n );\n}\n"},2441:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var o=n(0),a=n.n(o),s=n(1095),r=n(193),i=n(1344),c=n(1094),l=n(1072),d=n(1);const m=Object(l.a)((e=>({root:{height:180},container:{display:"flex"},paper:{margin:e.spacing(1)},svg:{width:100,height:100},polygon:{fill:e.palette.common.white,stroke:e.palette.divider,strokeWidth:1}})));function p(){const e=m(),[t,n]=a.a.useState(!1);return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(c.a,{control:Object(d.jsx)(s.a,{checked:t,onChange:()=>{n((e=>!e))}}),label:"Show"}),Object(d.jsxs)("div",{className:e.container,children:[Object(d.jsx)(i.a,{in:t,children:Object(d.jsx)(r.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})}),Object(d.jsx)(i.a,{in:t,style:{transitionDelay:t?"500ms":"0ms"},children:Object(d.jsx)(r.a,{elevation:4,className:e.paper,children:Object(d.jsx)("svg",{className:e.svg,children:Object(d.jsx)("polygon",{points:"0,100 50,00, 100,100",className:e.polygon})})})})]})]})}},2442:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport Switch from '@material-ui/core/Switch';\nimport Paper from '@material-ui/core/Paper';\nimport Zoom from '@material-ui/core/Zoom';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n height: 180,\n },\n container: {\n display: 'flex',\n },\n paper: {\n margin: theme.spacing(1),\n },\n svg: {\n width: 100,\n height: 100,\n },\n polygon: {\n fill: theme.palette.common.white,\n stroke: theme.palette.divider,\n strokeWidth: 1,\n },\n}));\n\nexport default function SimpleZoom() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState(false);\n\n const handleChange = () => {\n setChecked((prev) => !prev);\n };\n\n return (\n <div className={classes.root}>\n <FormControlLabel\n control={<Switch checked={checked} onChange={handleChange} />}\n label=\"Show\"\n />\n <div className={classes.container}>\n <Zoom in={checked}>\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Zoom>\n <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>\n <Paper elevation={4} className={classes.paper}>\n <svg className={classes.svg}>\n <polygon points=\"0,100 50,00, 100,100\" className={classes.polygon} />\n </svg>\n </Paper>\n </Zoom>\n </div>\n </div>\n );\n}\n"},2627:function(e,t,n){"use strict";n.r(t);var o=n(1130),a=n(118),s=n(1098),r=n(1090),i=n(194),c=n(1072),l=n(1);const d=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return d(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(s.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/transitions",target:"_blank",role:"button",children:[Object(l.jsx)(r.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Transitions"}),Object(l.jsx)(i.a,{className:"description",children:"Transition helps make a UI expressive and easy to use."}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["Material-UI provides a number of transitions that can be used to introduce some basic",Object(l.jsx)("a",{href:"https://material.io/design/motion/",children:"motion"}),"to your applications components."]}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["To better support server rendering Material-UI provides a ",Object(l.jsx)("code",{children:"style"})," property to the children of some transition components (Fade, Grow, Zoom, Slide). The ",Object(l.jsx)("code",{children:"style"})," ","property must be applied to the DOM for the animation to work as expected."]}),Object(l.jsx)(a.a,{component:"pre",className:"language-jsx",children:" \n// The `props` object contains a `style` property.\n// You need to provide it to the `div` element as shown here.\nfunction MyComponent(props) {\n return (\n <div {...props}>\n Fade\n </div>\n );\n}\n\nexport default Main() {\n return (\n <Fade>\n <MyComponent />\n </Fade>\n );\n}\n"}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Collapse"}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["Expand vertically from the top of the child element. The ",Object(l.jsx)("code",{children:"collapsedSize"})," property can be used to set the minimum height when not expanded."]}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2433).default,raw:n(2434)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Fade"}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:"Fade in from transparent to opaque."}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2435).default,raw:n(2436)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Grow"}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:"Expand outwards from the center of the child element, while also fading in from transparent to opaque."}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["The second example demonstrates how to change the ",Object(l.jsx)("code",{children:"transform-origin"}),", and conditionally applies the ",Object(l.jsx)("code",{children:"timeout"})," property to change the entry speed."]}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2437).default,raw:n(2438)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Slide"}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["Slide in from the edge of the screen. The ",Object(l.jsx)("code",{children:"direction"})," property controls which edge of the screen the transition starts from."]}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["The Transition component's ",Object(l.jsx)("code",{children:"mountOnEnter"})," property prevents the child component from being mounted until ",Object(l.jsx)("code",{children:"in"})," is ",Object(l.jsx)("code",{children:"true"}),". This prevents the relatively positioned component from scrolling into view from it's off-screen position. Similarly the ",Object(l.jsx)("code",{children:"unmountOnExit"})," property removes the component from the DOM after it has been transition off screen."]}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2439).default,raw:n(2440)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Zoom"}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:"Expand outwards from the center of the child element."}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:"This example also demonstrates how to delay the enter transition."}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2441).default,raw:n(2442)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"TransitionComponent prop"}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["The components accept a ",Object(l.jsx)("code",{children:"TransitionComponent"})," prop to customize the default transitions. You can use any of the above components or your own. It should respect the following conditions:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsxs)("li",{children:["Accepts an ",Object(l.jsx)("code",{children:"in"})," prop. This corresponds to the open/close state."]}),Object(l.jsxs)("li",{children:["Call the ",Object(l.jsx)("code",{children:"onEnter"})," callback prop when the enter transition starts."]}),Object(l.jsxs)("li",{children:["Call the ",Object(l.jsx)("code",{children:"onExited"})," callback prop when the exit transition is completed. These two callbacks allow to unmount the children when in a closed state and fully transitioned."]})]}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["For more information on creating a custom transition, visit the"," ",Object(l.jsx)("a",{href:"http://reactcommunity.org/react-transition-group/transition",children:"React Transition Group Transition docs"}),"."]})]})}}}]);
Zerion Mini Shell 1.0