%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[76],{1130:function(e,n,a){"use strict";a.d(n,"a",(function(){return w}));var t=a(118),i=a(1100),o=a(1109),r=a(1090),s=a(1117),c=a(1119),l=a(5),d=a(0),m=a(1024),b=a(551),u=a(1087),p=a(1099),h=a(11),j=a(370),x=a(371),f=a(1131),v=a.n(f),g=a(1);const O=Object(m.a)({productionPrefix:"iframe-"});class y 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(b.a)(),plugins:[...Object(b.a)().plugins,Object(x.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(g.jsxs)(g.Fragment,{children:[Object(g.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(g.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:a}=this.props;return Object(g.jsx)(v.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(g.jsx)(u.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(g.jsx)(p.a,{theme:a,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var N=Object(h.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function I(e){const[n,a]=Object(d.useState)(e.currentTabIndex),{component:m,raw:b,iframe:u,className:p}=e;return Object(g.jsxs)(o.a,{className:Object(l.a)(p,"shadow"),children:[Object(g.jsx)(i.a,{position:"static",color:"default",className:"shadow-0",children:Object(g.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){a(n)},children:[m&&Object(g.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(r.a,{children:"remove_red_eye"})}),b&&Object(g.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(r.a,{children:"code"})})]})}),Object(g.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(g.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:m&&(u?Object(g.jsx)(N,{children:Object(g.jsx)(m,{})}):Object(g.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(g.jsx)(m,{})}))}),Object(g.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:b&&Object(g.jsx)("div",{className:"flex flex-1",children:Object(g.jsx)(t.a,{component:"pre",className:"language-javascript w-full",children:b.default})})})]})]})}I.defaultProps={currentTabIndex:0};var w=I},1174:function(e,n,a){"use strict";var t=a(552),i=a(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=i(a(0)),r=(0,t(a(1128)).default)(o.createElement("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"}),"Add");n.default=r},1175:function(e,n,a){"use strict";var t=a(552),i=a(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=i(a(0)),r=(0,t(a(1128)).default)(o.createElement("path",{d:"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"}),"Favorite");n.default=r},1344:function(e,n,a){"use strict";var t=a(2),i=a(64),o=a(7),r=a(0),s=a(287),c=a(58),l=a(43),d=a(70),m=a(25),b={entering:{transform:"none"},entered:{transform:"none"}},u={enter:c.b.enteringScreen,exit:c.b.leavingScreen},p=r.forwardRef((function(e,n){var a=e.children,c=e.disableStrictModeCompat,p=void 0!==c&&c,h=e.in,j=e.onEnter,x=e.onEntered,f=e.onEntering,v=e.onExit,g=e.onExited,O=e.onExiting,y=e.style,N=e.timeout,I=void 0===N?u:N,w=e.TransitionComponent,T=void 0===w?s.a:w,E=Object(o.a)(e,["children","disableStrictModeCompat","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout","TransitionComponent"]),F=Object(l.a)(),C=F.unstable_strictMode&&!p,A=r.useRef(null),S=Object(m.a)(a.ref,n),k=Object(m.a)(C?A:void 0,S),P=function(e){return function(n,a){if(e){var t=C?[A.current,n]:[n,a],o=Object(i.a)(t,2),r=o[0],s=o[1];void 0===s?e(r):e(r,s)}}},M=P(f),R=P((function(e,n){Object(d.b)(e);var a=Object(d.a)({style:y,timeout:I},{mode:"enter"});e.style.webkitTransition=F.transitions.create("transform",a),e.style.transition=F.transitions.create("transform",a),j&&j(e,n)})),z=P(x),B=P(O),D=P((function(e){var n=Object(d.a)({style:y,timeout:I},{mode:"exit"});e.style.webkitTransition=F.transitions.create("transform",n),e.style.transition=F.transitions.create("transform",n),v&&v(e)})),_=P(g);return r.createElement(T,Object(t.a)({appear:!0,in:h,nodeRef:C?A:void 0,onEnter:R,onEntered:z,onEntering:M,onExit:D,onExited:_,onExiting:B,timeout:I},E),(function(e,n){return r.cloneElement(a,Object(t.a)({style:Object(t.a)({transform:"scale(0)",visibility:"exited"!==e||h?void 0:"hidden"},b[e],y,a.props.style),ref:k},n))}))}));n.a=p},1444:function(e,n,a){"use strict";var t=a(552),i=a(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=i(a(0)),r=(0,t(a(1128)).default)(o.createElement("path",{d:"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"}),"Edit");n.default=r},1445:function(e,n,a){"use strict";var t=a(552),i=a(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=i(a(0)),r=(0,t(a(1128)).default)(o.createElement("path",{d:"M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z"}),"Navigation");n.default=r},1976:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return h}));a(0);var t=a(1072),i=a(1102),o=a(1174),r=a.n(o),s=a(1444),c=a.n(s),l=a(1175),d=a.n(l),m=a(1445),b=a.n(m),u=a(1);const p=Object(t.a)((e=>({root:{"& > *":{margin:e.spacing(1)}},extendedIcon:{marginRight:e.spacing(1)}})));function h(){const e=p();return Object(u.jsxs)("div",{className:e.root,children:[Object(u.jsx)(i.a,{color:"primary","aria-label":"add",children:Object(u.jsx)(r.a,{})}),Object(u.jsx)(i.a,{color:"secondary","aria-label":"edit",children:Object(u.jsx)(c.a,{})}),Object(u.jsxs)(i.a,{variant:"extended",children:[Object(u.jsx)(b.a,{className:e.extendedIcon}),"Navigate"]}),Object(u.jsx)(i.a,{disabled:!0,"aria-label":"like",children:Object(u.jsx)(d.a,{})})]})}},1977:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Fab from '@material-ui/core/Fab';\nimport AddIcon from '@material-ui/icons/Add';\nimport EditIcon from '@material-ui/icons/Edit';\nimport FavoriteIcon from '@material-ui/icons/Favorite';\nimport NavigationIcon from '@material-ui/icons/Navigation';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > *': {\n margin: theme.spacing(1),\n },\n },\n extendedIcon: {\n marginRight: theme.spacing(1),\n },\n}));\n\nexport default function FloatingActionButtons() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Fab color=\"primary\" aria-label=\"add\">\n <AddIcon />\n </Fab>\n <Fab color=\"secondary\" aria-label=\"edit\">\n <EditIcon />\n </Fab>\n <Fab variant=\"extended\">\n <NavigationIcon className={classes.extendedIcon} />\n Navigate\n </Fab>\n <Fab disabled aria-label=\"like\">\n <FavoriteIcon />\n </Fab>\n </div>\n );\n}\n"},1978:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return m}));a(0);var t=a(1072),i=a(1102),o=a(1174),r=a.n(o),s=a(1445),c=a.n(s),l=a(1);const d=Object(t.a)((e=>({margin:{margin:e.spacing(1)},extendedIcon:{marginRight:e.spacing(1)}})));function m(){const e=d();return Object(l.jsxs)("div",{children:[Object(l.jsxs)("div",{children:[Object(l.jsx)(i.a,{size:"small",color:"secondary","aria-label":"add",className:e.margin,children:Object(l.jsx)(r.a,{})}),Object(l.jsx)(i.a,{size:"medium",color:"secondary","aria-label":"add",className:e.margin,children:Object(l.jsx)(r.a,{})}),Object(l.jsx)(i.a,{color:"secondary","aria-label":"add",className:e.margin,children:Object(l.jsx)(r.a,{})})]}),Object(l.jsxs)("div",{children:[Object(l.jsxs)(i.a,{variant:"extended",size:"small",color:"primary","aria-label":"add",className:e.margin,children:[Object(l.jsx)(c.a,{className:e.extendedIcon}),"Extended"]}),Object(l.jsxs)(i.a,{variant:"extended",size:"medium",color:"primary","aria-label":"add",className:e.margin,children:[Object(l.jsx)(c.a,{className:e.extendedIcon}),"Extended"]}),Object(l.jsxs)(i.a,{variant:"extended",color:"primary","aria-label":"add",className:e.margin,children:[Object(l.jsx)(c.a,{className:e.extendedIcon}),"Extended"]})]})]})}},1979:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Fab from \'@material-ui/core/Fab\';\nimport AddIcon from \'@material-ui/icons/Add\';\nimport NavigationIcon from \'@material-ui/icons/Navigation\';\n\nconst useStyles = makeStyles((theme) => ({\n margin: {\n margin: theme.spacing(1),\n },\n extendedIcon: {\n marginRight: theme.spacing(1),\n },\n}));\n\nexport default function FloatingActionButtonSize() {\n const classes = useStyles();\n\n return (\n <div>\n <div>\n <Fab size="small" color="secondary" aria-label="add" className={classes.margin}>\n <AddIcon />\n </Fab>\n <Fab size="medium" color="secondary" aria-label="add" className={classes.margin}>\n <AddIcon />\n </Fab>\n <Fab color="secondary" aria-label="add" className={classes.margin}>\n <AddIcon />\n </Fab>\n </div>\n <div>\n <Fab\n variant="extended"\n size="small"\n color="primary"\n aria-label="add"\n className={classes.margin}\n >\n <NavigationIcon className={classes.extendedIcon} />\n Extended\n </Fab>\n <Fab\n variant="extended"\n size="medium"\n color="primary"\n aria-label="add"\n className={classes.margin}\n >\n <NavigationIcon className={classes.extendedIcon} />\n Extended\n </Fab>\n <Fab variant="extended" color="primary" aria-label="add" className={classes.margin}>\n <NavigationIcon className={classes.extendedIcon} />\n Extended\n </Fab>\n </div>\n </div>\n );\n}\n'},1980:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return F}));var t=a(0),i=a.n(t),o=a(5),r=a(1273),s=a.n(r),c=a(1072),l=a(43),d=a(1100),m=a(1119),b=a(1117),u=a(194),p=a(1344),h=a(1102),j=a(1174),x=a.n(j),f=a(1444),v=a.n(f),g=a(1345),O=a.n(g),y=a(149),N=a(1304),I=a(1);function w(e){const{children:n,value:a,index:t,...i}=e;return Object(I.jsx)(u.a,{component:"div",role:"tabpanel",hidden:a!==t,id:"action-tabpanel-".concat(t),"aria-labelledby":"action-tab-".concat(t),...i,children:a===t&&Object(I.jsx)(N.a,{p:3,children:n})})}function T(e){return{id:"action-tab-".concat(e),"aria-controls":"action-tabpanel-".concat(e)}}const E=Object(c.a)((e=>({root:{backgroundColor:e.palette.background.paper,width:500,position:"relative",minHeight:200},fab:{position:"absolute",bottom:e.spacing(2),right:e.spacing(2)},fabGreen:{color:e.palette.common.white,backgroundColor:y.a[500],"&:hover":{backgroundColor:y.a[600]}}})));function F(){const e=E(),n=Object(l.a)(),[a,t]=i.a.useState(0),r={enter:n.transitions.duration.enteringScreen,exit:n.transitions.duration.leavingScreen},c=[{color:"primary",className:e.fab,icon:Object(I.jsx)(x.a,{}),label:"Add"},{color:"secondary",className:e.fab,icon:Object(I.jsx)(v.a,{}),label:"Edit"},{color:"inherit",className:Object(o.a)(e.fab,e.fabGreen),icon:Object(I.jsx)(O.a,{}),label:"Expand"}];return Object(I.jsxs)("div",{className:e.root,children:[Object(I.jsx)(d.a,{position:"static",color:"default",children:Object(I.jsxs)(m.a,{value:a,onChange:(e,n)=>{t(n)},indicatorColor:"primary",textColor:"primary",variant:"fullWidth","aria-label":"action tabs example",children:[Object(I.jsx)(b.a,{label:"Item One",...T(0)}),Object(I.jsx)(b.a,{label:"Item Two",...T(1)}),Object(I.jsx)(b.a,{label:"Item Three",...T(2)})]})}),Object(I.jsxs)(s.a,{axis:"rtl"===n.direction?"x-reverse":"x",index:a,onChangeIndex:e=>{t(e)},children:[Object(I.jsx)(w,{value:a,index:0,dir:n.direction,children:"Item One"}),Object(I.jsx)(w,{value:a,index:1,dir:n.direction,children:"Item Two"}),Object(I.jsx)(w,{value:a,index:2,dir:n.direction,children:"Item Three"})]}),c.map(((e,n)=>Object(I.jsx)(p.a,{in:a===n,timeout:r,style:{transitionDelay:"".concat(a===n?r.exit:0,"ms")},unmountOnExit:!0,children:Object(I.jsx)(h.a,{"aria-label":e.label,className:e.className,color:e.color,children:e.icon})},e.color)))]})}},1981:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport SwipeableViews from 'react-swipeable-views';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport Typography from '@material-ui/core/Typography';\nimport Zoom from '@material-ui/core/Zoom';\nimport Fab from '@material-ui/core/Fab';\nimport AddIcon from '@material-ui/icons/Add';\nimport EditIcon from '@material-ui/icons/Edit';\nimport UpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport { green } from '@material-ui/core/colors';\nimport Box from '@material-ui/core/Box';\n\nfunction TabPanel(props) {\n const { children, value, index, ...other } = props;\n\n return (\n <Typography\n component=\"div\"\n role=\"tabpanel\"\n hidden={value !== index}\n id={`action-tabpanel-${index}`}\n aria-labelledby={`action-tab-${index}`}\n {...other}\n >\n {value === index && <Box p={3}>{children}</Box>}\n </Typography>\n );\n}\n\nTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired,\n};\n\nfunction a11yProps(index) {\n return {\n id: `action-tab-${index}`,\n 'aria-controls': `action-tabpanel-${index}`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.background.paper,\n width: 500,\n position: 'relative',\n minHeight: 200,\n },\n fab: {\n position: 'absolute',\n bottom: theme.spacing(2),\n right: theme.spacing(2),\n },\n fabGreen: {\n color: theme.palette.common.white,\n backgroundColor: green[500],\n '&:hover': {\n backgroundColor: green[600],\n },\n },\n}));\n\nexport default function FloatingActionButtonZoom() {\n const classes = useStyles();\n const theme = useTheme();\n const [value, setValue] = React.useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n const handleChangeIndex = (index) => {\n setValue(index);\n };\n\n const transitionDuration = {\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n };\n\n const fabs = [\n {\n color: 'primary',\n className: classes.fab,\n icon: <AddIcon />,\n label: 'Add',\n },\n {\n color: 'secondary',\n className: classes.fab,\n icon: <EditIcon />,\n label: 'Edit',\n },\n {\n color: 'inherit',\n className: clsx(classes.fab, classes.fabGreen),\n icon: <UpIcon />,\n label: 'Expand',\n },\n ];\n\n return (\n <div className={classes.root}>\n <AppBar position=\"static\" color=\"default\">\n <Tabs\n value={value}\n onChange={handleChange}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n variant=\"fullWidth\"\n aria-label=\"action tabs example\"\n >\n <Tab label=\"Item One\" {...a11yProps(0)} />\n <Tab label=\"Item Two\" {...a11yProps(1)} />\n <Tab label=\"Item Three\" {...a11yProps(2)} />\n </Tabs>\n </AppBar>\n <SwipeableViews\n axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}\n index={value}\n onChangeIndex={handleChangeIndex}\n >\n <TabPanel value={value} index={0} dir={theme.direction}>\n Item One\n </TabPanel>\n <TabPanel value={value} index={1} dir={theme.direction}>\n Item Two\n </TabPanel>\n <TabPanel value={value} index={2} dir={theme.direction}>\n Item Three\n </TabPanel>\n </SwipeableViews>\n {fabs.map((fab, index) => (\n <Zoom\n key={fab.color}\n in={value === index}\n timeout={transitionDuration}\n style={{\n transitionDelay: `${value === index ? transitionDuration.exit : 0}ms`,\n }}\n unmountOnExit\n >\n <Fab aria-label={fab.label} className={fab.className} color={fab.color}>\n {fab.icon}\n </Fab>\n </Zoom>\n ))}\n </div>\n );\n}\n"},2582:function(e,n,a){"use strict";a.r(n);var t=a(1130),i=a(1098),o=a(1090),r=a(194),s=a(1072),c=a(1);const l=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return l(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(i.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/floating-action-button",target:"_blank",role:"button",children:[Object(c.jsx)(o.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(r.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Floating action button"}),Object(c.jsx)(r.a,{className:"description",children:"A floating action button (FAB) performs the primary, or most common, action on a screen."}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Floating Action Button"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["A"," ",Object(c.jsx)("a",{href:"https://material.io/design/components/buttons-floating-action-button.html",children:"floating action button"}),"appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular, and extended."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Only use a FAB if it is the most suitable way to present a screen\u2019s primary action."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Only one floating action button is recommended per screen to represent the most common action."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(1976).default,raw:a(1977)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Size"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Use the ",Object(c.jsx)("code",{children:"size"})," prop for larger or smaller floating action buttons."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(1978).default,raw:a(1979)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Animation"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"The floating action button animates onto the screen as an expanding piece of material, by default."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes."}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["The Zoom transition can be used to achieve this. Note that since both the exiting and entering animations are triggered at the same time, we use ",Object(c.jsx)("code",{children:"enterDelay"})," to allow the outgoing Floating Action Button's animation to finish before the new one enters."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(t.a,{className:"my-24",iframe:!1,component:a(1980).default,raw:a(1981)})})]})}}}]);
Zerion Mini Shell 1.0