%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[66],{1130:function(e,n,a){"use strict";a.d(n,"a",(function(){return g}));var l=a(118),t=a(1100),o=a(1109),c=a(1090),i=a(1117),r=a(1119),s=a(5),d=a(0),m=a(1024),b=a(551),j=a(1087),h=a(1099),u=a(11),p=a(370),x=a(371),f=a(1131),v=a.n(f),C=a(1);const O=Object(m.a)({productionPrefix:"iframe-"});class D 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(p.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(C.jsxs)(C.Fragment,{children:[Object(C.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(C.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:a}=this.props;return Object(C.jsx)(v.a,{head:this.renderHead(),ref:this.handleRef,className:Object(s.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(C.jsx)(j.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(C.jsx)(h.a,{theme:a,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var y=Object(u.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(D);function k(e){const[n,a]=Object(d.useState)(e.currentTabIndex),{component:m,raw:b,iframe:j,className:h}=e;return Object(C.jsxs)(o.a,{className:Object(s.a)(h,"shadow"),children:[Object(C.jsx)(t.a,{position:"static",color:"default",className:"shadow-0",children:Object(C.jsxs)(r.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){a(n)},children:[m&&Object(C.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(C.jsx)(c.a,{children:"remove_red_eye"})}),b&&Object(C.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(C.jsx)(c.a,{children:"code"})})]})}),Object(C.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(C.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:m&&(j?Object(C.jsx)(y,{children:Object(C.jsx)(m,{})}):Object(C.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(C.jsx)(m,{})}))}),Object(C.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:b&&Object(C.jsx)("div",{className:"flex flex-1",children:Object(C.jsx)(l.a,{component:"pre",className:"language-javascript w-full",children:b.default})})})]})]})}k.defaultProps={currentTabIndex:0};var g=k},1189:function(e,n,a){"use strict";var l=a(0),t=a(381),o=a(1);const c=Object(l.forwardRef)((function(e,n){const{code:a,language:l,...c}=e;return Object(o.jsx)(t.a,{component:"pre",className:"language-".concat(l||"jsx"),ref:n,...c,children:a})}));n.a=c},1889:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return b}));a(0);var l=a(1072),t=a(1124),o=a(1192),c=a(1268),i=a.n(c),r=a(1235),s=a.n(r),d=a(1);const m=Object(l.a)((e=>({root:{display:"flex",justifyContent:"center",flexWrap:"wrap","& > *":{margin:e.spacing(.5)}}})));function b(){const e=m(),n=()=>{console.info("You clicked the delete icon.")},a=()=>{console.info("You clicked the Chip.")};return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{label:"Basic"}),Object(d.jsx)(o.a,{label:"Disabled",disabled:!0}),Object(d.jsx)(o.a,{avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Clickable",onClick:a}),Object(d.jsx)(o.a,{avatar:Object(d.jsx)(t.a,{alt:"Natacha",src:"/material-ui-static/images/avatar/1.jpg"}),label:"Deletable",onDelete:n}),Object(d.jsx)(o.a,{icon:Object(d.jsx)(i.a,{}),label:"Clickable deletable",onClick:a,onDelete:n}),Object(d.jsx)(o.a,{label:"Custom delete icon",onClick:a,onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{label:"Clickable Link",component:"a",href:"#chip",clickable:!0}),Object(d.jsx)(o.a,{avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Primary clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{icon:Object(d.jsx)(i.a,{}),label:"Primary clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{label:"Deletable primary",onDelete:n,color:"primary"}),Object(d.jsx)(o.a,{icon:Object(d.jsx)(i.a,{}),label:"Deletable secondary",onDelete:n,color:"secondary"})]})}},1890:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport Chip from \'@material-ui/core/Chip\';\nimport FaceIcon from \'@material-ui/icons/Face\';\nimport DoneIcon from \'@material-ui/icons/Done\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \'flex\',\n justifyContent: \'center\',\n flexWrap: \'wrap\',\n \'& > *\': {\n margin: theme.spacing(0.5),\n },\n },\n}));\n\nexport default function Chips() {\n const classes = useStyles();\n\n const handleDelete = () => {\n console.info(\'You clicked the delete icon.\');\n };\n\n const handleClick = () => {\n console.info(\'You clicked the Chip.\');\n };\n\n return (\n <div className={classes.root}>\n <Chip label="Basic" />\n <Chip label="Disabled" disabled />\n <Chip avatar={<Avatar>M</Avatar>} label="Clickable" onClick={handleClick} />\n <Chip\n avatar={<Avatar alt="Natacha" src="/material-ui-static/images/avatar/1.jpg" />}\n label="Deletable"\n onDelete={handleDelete}\n />\n <Chip\n icon={<FaceIcon />}\n label="Clickable deletable"\n onClick={handleClick}\n onDelete={handleDelete}\n />\n <Chip\n label="Custom delete icon"\n onClick={handleClick}\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip label="Clickable Link" component="a" href="#chip" clickable />\n <Chip\n avatar={<Avatar>M</Avatar>}\n label="Primary clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip\n icon={<FaceIcon />}\n label="Primary clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip label="Deletable primary" onDelete={handleDelete} color="primary" />\n <Chip\n icon={<FaceIcon />}\n label="Deletable secondary"\n onDelete={handleDelete}\n color="secondary"\n />\n </div>\n );\n}\n'},1891:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return b}));a(0);var l=a(1072),t=a(1124),o=a(1192),c=a(1268),i=a.n(c),r=a(1235),s=a.n(r),d=a(1);const m=Object(l.a)((e=>({root:{display:"flex",justifyContent:"center",flexWrap:"wrap","& > *":{margin:e.spacing(.5)}}})));function b(){const e=m(),n=()=>{console.info("You clicked the delete icon.")},a=()=>{console.info("You clicked the Chip.")};return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{label:"Basic",variant:"outlined"}),Object(d.jsx)(o.a,{label:"Disabled",disabled:!0,variant:"outlined"}),Object(d.jsx)(o.a,{avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Clickable",onClick:a,variant:"outlined"}),Object(d.jsx)(o.a,{avatar:Object(d.jsx)(t.a,{alt:"Natacha",src:"/material-ui-static/images/avatar/1.jpg"}),label:"Deletable",onDelete:n,variant:"outlined"}),Object(d.jsx)(o.a,{icon:Object(d.jsx)(i.a,{}),label:"Clickable deletable",onClick:a,onDelete:n,variant:"outlined"}),Object(d.jsx)(o.a,{label:"Custom delete icon",onClick:a,onDelete:n,deleteIcon:Object(d.jsx)(s.a,{}),variant:"outlined"}),Object(d.jsx)(o.a,{label:"Clickable link",component:"a",href:"#chip",clickable:!0,variant:"outlined"}),Object(d.jsx)(o.a,{avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Primary clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{}),variant:"outlined"}),Object(d.jsx)(o.a,{icon:Object(d.jsx)(i.a,{}),label:"Primary clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{}),variant:"outlined"}),Object(d.jsx)(o.a,{label:"Deletable primary",onDelete:n,color:"primary",variant:"outlined"}),Object(d.jsx)(o.a,{icon:Object(d.jsx)(i.a,{}),label:"Deletable secondary",onDelete:n,color:"secondary",variant:"outlined"})]})}},1892:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport Chip from \'@material-ui/core/Chip\';\nimport FaceIcon from \'@material-ui/icons/Face\';\nimport DoneIcon from \'@material-ui/icons/Done\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \'flex\',\n justifyContent: \'center\',\n flexWrap: \'wrap\',\n \'& > *\': {\n margin: theme.spacing(0.5),\n },\n },\n}));\n\nexport default function OutlinedChips() {\n const classes = useStyles();\n\n const handleDelete = () => {\n console.info(\'You clicked the delete icon.\');\n };\n\n const handleClick = () => {\n console.info(\'You clicked the Chip.\');\n };\n\n return (\n <div className={classes.root}>\n <Chip label="Basic" variant="outlined" />\n <Chip label="Disabled" disabled variant="outlined" />\n <Chip\n avatar={<Avatar>M</Avatar>}\n label="Clickable"\n onClick={handleClick}\n variant="outlined"\n />\n <Chip\n avatar={<Avatar alt="Natacha" src="/material-ui-static/images/avatar/1.jpg" />}\n label="Deletable"\n onDelete={handleDelete}\n variant="outlined"\n />\n <Chip\n icon={<FaceIcon />}\n label="Clickable deletable"\n onClick={handleClick}\n onDelete={handleDelete}\n variant="outlined"\n />\n <Chip\n label="Custom delete icon"\n onClick={handleClick}\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n variant="outlined"\n />\n <Chip label="Clickable link" component="a" href="#chip" clickable variant="outlined" />\n <Chip\n avatar={<Avatar>M</Avatar>}\n label="Primary clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n variant="outlined"\n />\n <Chip\n icon={<FaceIcon />}\n label="Primary clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n variant="outlined"\n />\n <Chip label="Deletable primary" onDelete={handleDelete} color="primary" variant="outlined" />\n <Chip\n icon={<FaceIcon />}\n label="Deletable secondary"\n onDelete={handleDelete}\n color="secondary"\n variant="outlined"\n />\n </div>\n );\n}\n'},1893:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return b}));var l=a(0),t=a.n(l),o=a(1072),c=a(1192),i=a(193),r=a(1894),s=a.n(r),d=a(1);const m=Object(o.a)((e=>({root:{display:"flex",justifyContent:"center",flexWrap:"wrap",listStyle:"none",padding:e.spacing(.5),margin:0},chip:{margin:e.spacing(.5)}})));function b(){const e=m(),[n,a]=t.a.useState([{key:0,label:"Angular"},{key:1,label:"jQuery"},{key:2,label:"Polymer"},{key:3,label:"React"},{key:4,label:"Vue.js"}]);return Object(d.jsx)(i.a,{component:"ul",className:e.root,children:n.map((n=>{let l;return"React"===n.label&&(l=Object(d.jsx)(s.a,{})),Object(d.jsx)("li",{children:Object(d.jsx)(c.a,{icon:l,label:n.label,onDelete:"React"===n.label?void 0:(t=n,()=>{a((e=>e.filter((e=>e.key!==t.key))))}),className:e.chip})},n.key);var t}))})}},1895:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport Paper from '@material-ui/core/Paper';\nimport TagFacesIcon from '@material-ui/icons/TagFaces';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n justifyContent: 'center',\n flexWrap: 'wrap',\n listStyle: 'none',\n padding: theme.spacing(0.5),\n margin: 0,\n },\n chip: {\n margin: theme.spacing(0.5),\n },\n}));\n\nexport default function ChipsArray() {\n const classes = useStyles();\n const [chipData, setChipData] = React.useState([\n { key: 0, label: 'Angular' },\n { key: 1, label: 'jQuery' },\n { key: 2, label: 'Polymer' },\n { key: 3, label: 'React' },\n { key: 4, label: 'Vue.js' },\n ]);\n\n const handleDelete = (chipToDelete) => () => {\n setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));\n };\n\n return (\n <Paper component=\"ul\" className={classes.root}>\n {chipData.map((data) => {\n let icon;\n\n if (data.label === 'React') {\n icon = <TagFacesIcon />;\n }\n\n return (\n <li key={data.key}>\n <Chip\n icon={icon}\n label={data.label}\n onDelete={data.label === 'React' ? undefined : handleDelete(data)}\n className={classes.chip}\n />\n </li>\n );\n })}\n </Paper>\n );\n}\n"},1896:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return b}));a(0);var l=a(1072),t=a(1124),o=a(1192),c=a(1268),i=a.n(c),r=a(1235),s=a.n(r),d=a(1);const m=Object(l.a)((e=>({root:{display:"flex",justifyContent:"center",flexWrap:"wrap","& > *":{margin:e.spacing(.5)}}})));function b(){const e=m(),n=()=>{console.info("You clicked the delete icon.")},a=()=>{console.info("You clicked the Chip.")};return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{size:"small",label:"Basic"}),Object(d.jsx)(o.a,{size:"small",avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Clickable",onClick:a}),Object(d.jsx)(o.a,{size:"small",avatar:Object(d.jsx)(t.a,{alt:"Natacha",src:"/material-ui-static/images/avatar/1.jpg"}),label:"Deletable",onDelete:n}),Object(d.jsx)(o.a,{size:"small",icon:Object(d.jsx)(i.a,{}),label:"Clickable Deletable",onClick:a,onDelete:n}),Object(d.jsx)(o.a,{size:"small",label:"Custom delete icon",onClick:a,onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{size:"small",label:"Clickable Link",component:"a",href:"#chip",clickable:!0}),Object(d.jsx)(o.a,{size:"small",avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Primary Clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{size:"small",icon:Object(d.jsx)(i.a,{}),label:"Primary Clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{size:"small",label:"Deletable Primary",onDelete:n,color:"primary"}),Object(d.jsx)(o.a,{size:"small",icon:Object(d.jsx)(i.a,{}),label:"Deletable Secondary",onDelete:n,color:"secondary"})]})}},1897:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport Chip from \'@material-ui/core/Chip\';\nimport FaceIcon from \'@material-ui/icons/Face\';\nimport DoneIcon from \'@material-ui/icons/Done\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \'flex\',\n justifyContent: \'center\',\n flexWrap: \'wrap\',\n \'& > *\': {\n margin: theme.spacing(0.5),\n },\n },\n}));\n\nexport default function SmallChips() {\n const classes = useStyles();\n\n const handleDelete = () => {\n console.info(\'You clicked the delete icon.\');\n };\n\n const handleClick = () => {\n console.info(\'You clicked the Chip.\');\n };\n\n return (\n <div className={classes.root}>\n <Chip size="small" label="Basic" />\n <Chip size="small" avatar={<Avatar>M</Avatar>} label="Clickable" onClick={handleClick} />\n <Chip\n size="small"\n avatar={<Avatar alt="Natacha" src="/material-ui-static/images/avatar/1.jpg" />}\n label="Deletable"\n onDelete={handleDelete}\n />\n <Chip\n size="small"\n icon={<FaceIcon />}\n label="Clickable Deletable"\n onClick={handleClick}\n onDelete={handleDelete}\n />\n <Chip\n size="small"\n label="Custom delete icon"\n onClick={handleClick}\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip size="small" label="Clickable Link" component="a" href="#chip" clickable />\n <Chip\n size="small"\n avatar={<Avatar>M</Avatar>}\n label="Primary Clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip\n size="small"\n icon={<FaceIcon />}\n label="Primary Clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip size="small" label="Deletable Primary" onDelete={handleDelete} color="primary" />\n <Chip\n size="small"\n icon={<FaceIcon />}\n label="Deletable Secondary"\n onDelete={handleDelete}\n color="secondary"\n />\n </div>\n );\n}\n'},1898:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return b}));a(0);var l=a(1072),t=a(1124),o=a(1192),c=a(1268),i=a.n(c),r=a(1235),s=a.n(r),d=a(1);const m=Object(l.a)((e=>({root:{display:"flex",justifyContent:"center",flexWrap:"wrap","& > *":{margin:e.spacing(.5)}}})));function b(){const e=m(),n=()=>{console.info("You clicked the delete icon.")},a=()=>{console.info("You clicked the Chip.")};return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsx)(o.a,{variant:"outlined",size:"small",label:"Basic"}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Clickable",onClick:a}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",avatar:Object(d.jsx)(t.a,{alt:"Natacha",src:"/material-ui-static/images/avatar/1.jpg"}),label:"Deletable",onDelete:n}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",icon:Object(d.jsx)(i.a,{}),label:"Clickable deletable",onClick:a,onDelete:n}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",label:"Custom delete icon",onClick:a,onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",label:"Clickable link",component:"a",href:"#chip",clickable:!0}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",avatar:Object(d.jsx)(t.a,{children:"M"}),label:"Primary clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",icon:Object(d.jsx)(i.a,{}),label:"Primary clickable",clickable:!0,color:"primary",onDelete:n,deleteIcon:Object(d.jsx)(s.a,{})}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",label:"Deletable primary",onDelete:n,color:"primary"}),Object(d.jsx)(o.a,{variant:"outlined",size:"small",icon:Object(d.jsx)(i.a,{}),label:"Deletable secondary",onDelete:n,color:"secondary"})]})}},1899:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport Chip from \'@material-ui/core/Chip\';\nimport FaceIcon from \'@material-ui/icons/Face\';\nimport DoneIcon from \'@material-ui/icons/Done\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \'flex\',\n justifyContent: \'center\',\n flexWrap: \'wrap\',\n \'& > *\': {\n margin: theme.spacing(0.5),\n },\n },\n}));\n\nexport default function SmallOutlinedChips() {\n const classes = useStyles();\n\n const handleDelete = () => {\n console.info(\'You clicked the delete icon.\');\n };\n\n const handleClick = () => {\n console.info(\'You clicked the Chip.\');\n };\n\n return (\n <div className={classes.root}>\n <Chip variant="outlined" size="small" label="Basic" />\n <Chip\n variant="outlined"\n size="small"\n avatar={<Avatar>M</Avatar>}\n label="Clickable"\n onClick={handleClick}\n />\n <Chip\n variant="outlined"\n size="small"\n avatar={<Avatar alt="Natacha" src="/material-ui-static/images/avatar/1.jpg" />}\n label="Deletable"\n onDelete={handleDelete}\n />\n <Chip\n variant="outlined"\n size="small"\n icon={<FaceIcon />}\n label="Clickable deletable"\n onClick={handleClick}\n onDelete={handleDelete}\n />\n <Chip\n variant="outlined"\n size="small"\n label="Custom delete icon"\n onClick={handleClick}\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip\n variant="outlined"\n size="small"\n label="Clickable link"\n component="a"\n href="#chip"\n clickable\n />\n <Chip\n variant="outlined"\n size="small"\n avatar={<Avatar>M</Avatar>}\n label="Primary clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip\n variant="outlined"\n size="small"\n icon={<FaceIcon />}\n label="Primary clickable"\n clickable\n color="primary"\n onDelete={handleDelete}\n deleteIcon={<DoneIcon />}\n />\n <Chip\n variant="outlined"\n size="small"\n label="Deletable primary"\n onDelete={handleDelete}\n color="primary"\n />\n <Chip\n variant="outlined"\n size="small"\n icon={<FaceIcon />}\n label="Deletable secondary"\n onDelete={handleDelete}\n color="secondary"\n />\n </div>\n );\n}\n'},1900:function(e,n,a){"use strict";a.r(n);var l=a(0),t=a.n(l),o=a(11),c=a(1189),i=a(1172),r=a(1035),s=a(1036),d=a(1094),m=a(1093),b=a(1120),j=a(1124),h=a(1192),u=a(1268),p=a.n(u),x=a(1235),f=a.n(x),v=a(1);n.default=Object(o.a)((e=>({root:{flexGrow:1},chipWrapper:{height:e.spacing(10)}})))((function(e){const{classes:n}=e,[a,l]=t.a.useState({color:"default",onDelete:"none",avatar:"none",icon:"none",variant:"default",size:"medium"}),{color:o,onDelete:u,avatar:x,icon:C,variant:O,size:D}=a,y=e=>{l({...a,[e.target.name]:e.target.value})},k="default"!==o?'color="'.concat(o,'" '):"",g="small"===D?'size="small" ':"",F="default"!==O?'variant="'.concat(O,'" '):"";let I,N,w,z,R;switch(u){case"none":I="";break;case"custom":I="deleteIcon={<DoneIcon />} onDelete={handleDelete} ";break;default:I="onDelete={handleDelete} "}if("none"===C)N="";else N="icon={<FaceIcon />} ",w=Object(v.jsx)(p.a,{});switch(x){case"none":z="";break;case"img":z='avatar={<Avatar src="/material-ui-static/images/avatar/1.jpg" />} ',R=Object(v.jsx)(j.a,{src:"/material-ui-static/images/avatar/1.jpg"});break;case"letter":z="avatar={<Avatar>F</Avatar>} ",R=Object(v.jsx)(j.a,{children:"F"})}"none"!==x&&(N="",w=null);const A="\n<Chip ".concat(F).concat(k).concat(g).concat(I).concat(z).concat(N,"/>\n");return Object(v.jsxs)(i.a,{container:!0,className:n.root,children:[Object(v.jsx)(i.a,{item:!0,xs:12,children:Object(v.jsx)(i.a,{container:!0,justifyContent:"center",alignItems:"center",children:Object(v.jsx)(i.a,{item:!0,className:n.chipWrapper,children:Object(v.jsx)(h.a,{label:"Chip Component",color:o,deleteIcon:"custom"===u?Object(v.jsx)(f.a,{}):void 0,onDelete:"none"!==u?()=>{console.info("You clicked the delete icon.")}:void 0,avatar:R,icon:w,variant:O,size:D})})})}),Object(v.jsx)(i.a,{item:!0,xs:12,children:Object(v.jsxs)(i.a,{container:!0,spacing:3,children:[Object(v.jsx)(i.a,{item:!0,xs:12,md:6,children:Object(v.jsxs)(r.a,{component:"fieldset",children:[Object(v.jsx)(s.a,{children:"variant"}),Object(v.jsxs)(m.a,{row:!0,name:"variant","aria-label":"variant",value:O,onChange:y,children:[Object(v.jsx)(d.a,{value:"default",control:Object(v.jsx)(b.a,{}),label:"default"}),Object(v.jsx)(d.a,{value:"outlined",control:Object(v.jsx)(b.a,{}),label:"outlined"})]})]})}),Object(v.jsx)(i.a,{item:!0,xs:12,md:6,children:Object(v.jsxs)(r.a,{component:"fieldset",children:[Object(v.jsx)(s.a,{children:"color"}),Object(v.jsxs)(m.a,{row:!0,name:"color","aria-label":"color",value:o,onChange:y,children:[Object(v.jsx)(d.a,{value:"default",control:Object(v.jsx)(b.a,{}),label:"default"}),Object(v.jsx)(d.a,{value:"primary",control:Object(v.jsx)(b.a,{}),label:"primary"}),Object(v.jsx)(d.a,{value:"secondary",control:Object(v.jsx)(b.a,{}),label:"secondary"})]})]})}),Object(v.jsx)(i.a,{item:!0,xs:12,md:6,children:Object(v.jsxs)(r.a,{component:"fieldset",children:[Object(v.jsx)(s.a,{children:"size"}),Object(v.jsxs)(m.a,{row:!0,name:"size","aria-label":"size",value:D,onChange:y,children:[Object(v.jsx)(d.a,{value:"medium",control:Object(v.jsx)(b.a,{}),label:"medium"}),Object(v.jsx)(d.a,{value:"small",control:Object(v.jsx)(b.a,{}),label:"small"})]})]})}),Object(v.jsx)(i.a,{item:!0,xs:12,md:6,children:Object(v.jsxs)(r.a,{component:"fieldset",children:[Object(v.jsx)(s.a,{children:"icon"}),Object(v.jsxs)(m.a,{row:!0,name:"icon","aria-label":"icon",value:C,onChange:y,children:[Object(v.jsx)(d.a,{value:"none",control:Object(v.jsx)(b.a,{}),label:"none"}),Object(v.jsx)(d.a,{value:"icon",control:Object(v.jsx)(b.a,{}),label:"icon"})]})]})}),Object(v.jsx)(i.a,{item:!0,xs:12,md:6,children:Object(v.jsxs)(r.a,{component:"fieldset",children:[Object(v.jsx)(s.a,{children:"avatar"}),Object(v.jsxs)(m.a,{row:!0,name:"avatar","aria-label":"avatar",value:x,onChange:y,children:[Object(v.jsx)(d.a,{value:"none",control:Object(v.jsx)(b.a,{}),label:"none"}),Object(v.jsx)(d.a,{value:"letter",control:Object(v.jsx)(b.a,{}),label:"letter"}),Object(v.jsx)(d.a,{value:"img",control:Object(v.jsx)(b.a,{}),label:"img"})]})]})}),Object(v.jsx)(i.a,{item:!0,xs:12,md:6,children:Object(v.jsxs)(r.a,{component:"fieldset",children:[Object(v.jsx)(s.a,{children:"onDelete"}),Object(v.jsxs)(m.a,{row:!0,name:"onDelete","aria-label":"on delete",value:u,onChange:y,children:[Object(v.jsx)(d.a,{value:"none",control:Object(v.jsx)(b.a,{}),label:"none"}),Object(v.jsx)(d.a,{value:"default",control:Object(v.jsx)(b.a,{}),label:"default"}),Object(v.jsx)(d.a,{value:"custom",control:Object(v.jsx)(b.a,{}),label:"custom"})]})]})})]})}),Object(v.jsx)(i.a,{item:!0,xs:12,children:Object(v.jsx)(c.a,{code:A,language:"jsx"})})]})}))},1901:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport { withStyles } from \'@material-ui/core/styles\';\nimport HighlightedCode from \'app/main/documentation/material-ui-components/utils/HighlightedCode\';\nimport Grid from \'@material-ui/core/Grid\';\nimport FormControl from \'@material-ui/core/FormControl\';\nimport FormLabel from \'@material-ui/core/FormLabel\';\nimport FormControlLabel from \'@material-ui/core/FormControlLabel\';\nimport RadioGroup from \'@material-ui/core/RadioGroup\';\nimport Radio from \'@material-ui/core/Radio\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport Chip from \'@material-ui/core/Chip\';\nimport FaceIcon from \'@material-ui/icons/Face\';\nimport DoneIcon from \'@material-ui/icons/Done\';\n\nconst styles = (theme) => ({\n root: {\n flexGrow: 1,\n },\n chipWrapper: {\n height: theme.spacing(10),\n },\n});\n\nfunction ChipsPlayground(props) {\n const { classes } = props;\n const [state, setState] = React.useState({\n color: \'default\',\n onDelete: \'none\',\n avatar: \'none\',\n icon: \'none\',\n variant: \'default\',\n size: \'medium\',\n });\n const { color, onDelete, avatar, icon, variant, size } = state;\n\n const handleChange = (event) => {\n setState({\n ...state,\n [event.target.name]: event.target.value,\n });\n };\n\n const handleDeleteExample = () => {\n console.info(\'You clicked the delete icon.\');\n };\n\n const colorToCode = color !== \'default\' ? `color="${color}" ` : \'\';\n const sizeToCode = size === \'small\' ? `size="small" ` : \'\';\n const variantToCode = variant !== \'default\' ? `variant="${variant}" ` : \'\';\n\n let onDeleteToCode;\n switch (onDelete) {\n case \'none\':\n onDeleteToCode = \'\';\n break;\n case \'custom\':\n onDeleteToCode = \'deleteIcon={<DoneIcon />} onDelete={handleDelete} \';\n break;\n default:\n onDeleteToCode = \'onDelete={handleDelete} \';\n break;\n }\n\n let iconToCode;\n let iconToPlayground;\n switch (icon) {\n case \'none\':\n iconToCode = \'\';\n break;\n default:\n iconToCode = \'icon={<FaceIcon />} \';\n iconToPlayground = <FaceIcon />;\n break;\n }\n\n let avatarToCode;\n let avatarToPlayground;\n switch (avatar) {\n case \'none\':\n avatarToCode = \'\';\n break;\n case \'img\':\n avatarToCode = \'avatar={<Avatar src="/material-ui-static/images/avatar/1.jpg" />} \';\n avatarToPlayground = <Avatar src="/material-ui-static/images/avatar/1.jpg" />;\n break;\n case \'letter\':\n avatarToCode = \'avatar={<Avatar>F</Avatar>} \';\n avatarToPlayground = <Avatar>F</Avatar>;\n break;\n default:\n break;\n }\n\n if (avatar !== \'none\') {\n iconToCode = \'\';\n iconToPlayground = null;\n }\n\n const jsx = `\n<Chip ${variantToCode}${colorToCode}${sizeToCode}${onDeleteToCode}${avatarToCode}${iconToCode}/>\n`;\n\n return (\n <Grid container className={classes.root}>\n <Grid item xs={12}>\n <Grid container justifyContent="center" alignItems="center">\n <Grid item className={classes.chipWrapper}>\n <Chip\n label="Chip Component"\n color={color}\n deleteIcon={onDelete === \'custom\' ? <DoneIcon /> : undefined}\n onDelete={onDelete !== \'none\' ? handleDeleteExample : undefined}\n avatar={avatarToPlayground}\n icon={iconToPlayground}\n variant={variant}\n size={size}\n />\n </Grid>\n </Grid>\n </Grid>\n <Grid item xs={12}>\n <Grid container spacing={3}>\n <Grid item xs={12} md={6}>\n <FormControl component="fieldset">\n <FormLabel>variant</FormLabel>\n <RadioGroup\n row\n name="variant"\n aria-label="variant"\n value={variant}\n onChange={handleChange}\n >\n <FormControlLabel value="default" control={<Radio />} label="default" />\n <FormControlLabel value="outlined" control={<Radio />} label="outlined" />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} md={6}>\n <FormControl component="fieldset">\n <FormLabel>color</FormLabel>\n <RadioGroup row name="color" aria-label="color" value={color} onChange={handleChange}>\n <FormControlLabel value="default" control={<Radio />} label="default" />\n <FormControlLabel value="primary" control={<Radio />} label="primary" />\n <FormControlLabel value="secondary" control={<Radio />} label="secondary" />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} md={6}>\n <FormControl component="fieldset">\n <FormLabel>size</FormLabel>\n <RadioGroup row name="size" aria-label="size" value={size} onChange={handleChange}>\n <FormControlLabel value="medium" control={<Radio />} label="medium" />\n <FormControlLabel value="small" control={<Radio />} label="small" />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} md={6}>\n <FormControl component="fieldset">\n <FormLabel>icon</FormLabel>\n <RadioGroup row name="icon" aria-label="icon" value={icon} onChange={handleChange}>\n <FormControlLabel value="none" control={<Radio />} label="none" />\n <FormControlLabel value="icon" control={<Radio />} label="icon" />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} md={6}>\n <FormControl component="fieldset">\n <FormLabel>avatar</FormLabel>\n <RadioGroup\n row\n name="avatar"\n aria-label="avatar"\n value={avatar}\n onChange={handleChange}\n >\n <FormControlLabel value="none" control={<Radio />} label="none" />\n <FormControlLabel value="letter" control={<Radio />} label="letter" />\n <FormControlLabel value="img" control={<Radio />} label="img" />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} md={6}>\n <FormControl component="fieldset">\n <FormLabel>onDelete</FormLabel>\n <RadioGroup\n row\n name="onDelete"\n aria-label="on delete"\n value={onDelete}\n onChange={handleChange}\n >\n <FormControlLabel value="none" control={<Radio />} label="none" />\n <FormControlLabel value="default" control={<Radio />} label="default" />\n <FormControlLabel value="custom" control={<Radio />} label="custom" />\n </RadioGroup>\n </FormControl>\n </Grid>\n </Grid>\n </Grid>\n <Grid item xs={12}>\n <HighlightedCode code={jsx} language="jsx" />\n </Grid>\n </Grid>\n );\n}\n\nChipsPlayground.propTypes = {\n classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(ChipsPlayground);\n'},2575:function(e,n,a){"use strict";a.r(n);var l=a(1130),t=a(1098),o=a(1090),c=a(194),i=a(1072),r=a(1);const s=Object(i.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return s(),Object(r.jsxs)(r.Fragment,{children:[Object(r.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(r.jsxs)(t.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/chips",target:"_blank",role:"button",children:[Object(r.jsx)(o.a,{children:"link"}),Object(r.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(r.jsx)(c.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Chip"}),Object(r.jsx)(c.a,{className:"description",children:"Chips are compact elements that represent an input, attribute, or action."}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(r.jsx)("a",{href:"https://material.io/design/components/chips.html",children:"Chips"})," allow users to enter information, make selections, filter content, or trigger actions."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"While included here as a standalone component, the most common use will be in some form of input, so some of the behaviour demonstrated here is not shown in context."}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Chip"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:'Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter" and (string) Avatar.'}),Object(r.jsxs)("ul",{children:[Object(r.jsxs)("li",{children:["Chips with the ",Object(r.jsx)("code",{children:"onClick"})," property defined change appearance on focus, hover, and click."]}),Object(r.jsxs)("li",{children:["Chips with the ",Object(r.jsx)("code",{children:"onDelete"})," property defined will display a delete icon which changes appearance on hover."]})]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(l.a,{className:"my-24",iframe:!1,component:a(1889).default,raw:a(1890)})}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Outlined Chips"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:"Outlined chips offer an alternative style."}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(l.a,{className:"my-24",iframe:!1,component:a(1891).default,raw:a(1892)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Chip array"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["An example of rendering multiple Chips from an array of values. Deleting a chip removes it from the array. Note that since no",Object(r.jsx)("code",{children:"onClick"})," property is defined, the Chip can be focused, but does not gain depth while clicked or touched."]}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(l.a,{className:"my-24",iframe:!1,component:a(1893).default,raw:a(1895)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Small Chip"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can use the ",Object(r.jsx)("code",{children:"size"})," prop to define a small Chip."]}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Default variant"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(l.a,{className:"my-24",iframe:!1,component:a(1896).default,raw:a(1897)})}),Object(r.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Outlined variant"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(l.a,{className:"my-24",iframe:!1,component:a(1898).default,raw:a(1899)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Chip Playground"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(l.a,{className:"my-24",iframe:!1,component:a(1900).default,raw:a(1901)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:["If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (",Object(r.jsx)("code",{children:"keyup"})," event) ",Object(r.jsx)("code",{children:"Backspace"})," or"," ",Object(r.jsx)("code",{children:"Delete"})," will call the ",Object(r.jsx)("code",{children:"onDelete"})," handler while releasing"," ",Object(r.jsx)("code",{children:"Escape"})," will blur the Chip."]})]})}}}]);
Zerion Mini Shell 1.0