%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[109],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return I}));var a=n(118),s=n(1100),i=n(1109),c=n(1090),l=n(1117),r=n(1119),o=n(5),d=n(0),m=n(1024),h=n(551),u=n(1087),b=n(1099),f=n(11),j=n(370),p=n(371),x=n(1131),g=n.n(x),k=n(1);const O=Object(m.a)({productionPrefix:"iframe-"});class C 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(h.a)(),plugins:[...Object(h.a)().plugins,Object(p.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(k.jsxs)(k.Fragment,{children:[Object(k.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(k.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(k.jsx)(g.a,{head:this.renderHead(),ref:this.handleRef,className:Object(o.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(k.jsx)(u.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(k.jsx)(b.a,{theme:n,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var v=Object(f.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(C);function L(e){const[t,n]=Object(d.useState)(e.currentTabIndex),{component:m,raw:h,iframe:u,className:b}=e;return Object(k.jsxs)(i.a,{className:Object(o.a)(b,"shadow"),children:[Object(k.jsx)(s.a,{position:"static",color:"default",className:"shadow-0",children:Object(k.jsxs)(r.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[m&&Object(k.jsx)(l.a,{classes:{root:"min-w-64"},icon:Object(k.jsx)(c.a,{children:"remove_red_eye"})}),h&&Object(k.jsx)(l.a,{classes:{root:"min-w-64"},icon:Object(k.jsx)(c.a,{children:"code"})})]})}),Object(k.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(k.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:m&&(u?Object(k.jsx)(v,{children:Object(k.jsx)(m,{})}):Object(k.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(k.jsx)(m,{})}))}),Object(k.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:h&&Object(k.jsx)("div",{className:"flex flex-1",children:Object(k.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:h.default})})})]})]})}L.defaultProps={currentTabIndex:0};var I=L},2429:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return x}));var a=n(0),s=n.n(a),i=n(1072),c=n(1172),l=n(1033),r=n(1034),o=n(1112),d=n(1103),m=n(1165),h=n(1098),u=n(193),b=n(1);const f=Object(i.a)((e=>({root:{margin:"auto"},paper:{width:200,height:230,overflow:"auto"},button:{margin:e.spacing(.5,0)}})));function j(e,t){return e.filter((e=>-1===t.indexOf(e)))}function p(e,t){return e.filter((e=>-1!==t.indexOf(e)))}function x(){const e=f(),[t,n]=s.a.useState([]),[a,i]=s.a.useState([0,1,2,3]),[x,g]=s.a.useState([4,5,6,7]),k=p(t,a),O=p(t,x),C=e=>()=>{const a=t.indexOf(e),s=[...t];-1===a?s.push(e):s.splice(a,1),n(s)},v=n=>Object(b.jsx)(u.a,{className:e.paper,children:Object(b.jsxs)(l.a,{dense:!0,component:"div",role:"list",children:[n.map((e=>{const n="transfer-list-item-".concat(e,"-label");return Object(b.jsxs)(r.a,{role:"listitem",button:!0,onClick:C(e),children:[Object(b.jsx)(o.a,{children:Object(b.jsx)(m.a,{checked:-1!==t.indexOf(e),tabIndex:-1,disableRipple:!0,inputProps:{"aria-labelledby":n}})}),Object(b.jsx)(d.a,{id:n,primary:"List item ".concat(e+1)})]},e)})),Object(b.jsx)(r.a,{})]})});return Object(b.jsxs)(c.a,{container:!0,spacing:2,justifyContent:"center",alignItems:"center",className:e.root,children:[Object(b.jsx)(c.a,{item:!0,children:v(a)}),Object(b.jsx)(c.a,{item:!0,children:Object(b.jsxs)(c.a,{container:!0,direction:"column",alignItems:"center",children:[Object(b.jsx)(h.a,{variant:"outlined",size:"small",className:e.button,onClick:()=>{g(x.concat(a)),i([])},disabled:0===a.length,"aria-label":"move all right",children:"\u226b"}),Object(b.jsx)(h.a,{variant:"outlined",size:"small",className:e.button,onClick:()=>{g(x.concat(k)),i(j(a,k)),n(j(t,k))},disabled:0===k.length,"aria-label":"move selected right",children:">"}),Object(b.jsx)(h.a,{variant:"outlined",size:"small",className:e.button,onClick:()=>{i(a.concat(O)),g(j(x,O)),n(j(t,O))},disabled:0===O.length,"aria-label":"move selected left",children:"<"}),Object(b.jsx)(h.a,{variant:"outlined",size:"small",className:e.button,onClick:()=>{i(a.concat(x)),g([])},disabled:0===x.length,"aria-label":"move all left",children:"\u226a"})]})}),Object(b.jsx)(c.a,{item:!0,children:v(x)})]})}},2430:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Grid from \'@material-ui/core/Grid\';\nimport List from \'@material-ui/core/List\';\nimport ListItem from \'@material-ui/core/ListItem\';\nimport ListItemIcon from \'@material-ui/core/ListItemIcon\';\nimport ListItemText from \'@material-ui/core/ListItemText\';\nimport Checkbox from \'@material-ui/core/Checkbox\';\nimport Button from \'@material-ui/core/Button\';\nimport Paper from \'@material-ui/core/Paper\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n margin: \'auto\',\n },\n paper: {\n width: 200,\n height: 230,\n overflow: \'auto\',\n },\n button: {\n margin: theme.spacing(0.5, 0),\n },\n}));\n\nfunction not(a, b) {\n return a.filter((value) => b.indexOf(value) === -1);\n}\n\nfunction intersection(a, b) {\n return a.filter((value) => b.indexOf(value) !== -1);\n}\n\nexport default function TransferList() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState([]);\n const [left, setLeft] = React.useState([0, 1, 2, 3]);\n const [right, setRight] = React.useState([4, 5, 6, 7]);\n\n const leftChecked = intersection(checked, left);\n const rightChecked = intersection(checked, right);\n\n const handleToggle = (value) => () => {\n const currentIndex = checked.indexOf(value);\n const newChecked = [...checked];\n\n if (currentIndex === -1) {\n newChecked.push(value);\n } else {\n newChecked.splice(currentIndex, 1);\n }\n\n setChecked(newChecked);\n };\n\n const handleAllRight = () => {\n setRight(right.concat(left));\n setLeft([]);\n };\n\n const handleCheckedRight = () => {\n setRight(right.concat(leftChecked));\n setLeft(not(left, leftChecked));\n setChecked(not(checked, leftChecked));\n };\n\n const handleCheckedLeft = () => {\n setLeft(left.concat(rightChecked));\n setRight(not(right, rightChecked));\n setChecked(not(checked, rightChecked));\n };\n\n const handleAllLeft = () => {\n setLeft(left.concat(right));\n setRight([]);\n };\n\n const customList = (items) => (\n <Paper className={classes.paper}>\n <List dense component="div" role="list">\n {items.map((value) => {\n const labelId = `transfer-list-item-${value}-label`;\n\n return (\n <ListItem key={value} role="listitem" button onClick={handleToggle(value)}>\n <ListItemIcon>\n <Checkbox\n checked={checked.indexOf(value) !== -1}\n tabIndex={-1}\n disableRipple\n inputProps={{ \'aria-labelledby\': labelId }}\n />\n </ListItemIcon>\n <ListItemText id={labelId} primary={`List item ${value + 1}`} />\n </ListItem>\n );\n })}\n <ListItem />\n </List>\n </Paper>\n );\n\n return (\n <Grid\n container\n spacing={2}\n justifyContent="center"\n alignItems="center"\n className={classes.root}\n >\n <Grid item>{customList(left)}</Grid>\n <Grid item>\n <Grid container direction="column" alignItems="center">\n <Button\n variant="outlined"\n size="small"\n className={classes.button}\n onClick={handleAllRight}\n disabled={left.length === 0}\n aria-label="move all right"\n >\n \u226b\n </Button>\n <Button\n variant="outlined"\n size="small"\n className={classes.button}\n onClick={handleCheckedRight}\n disabled={leftChecked.length === 0}\n aria-label="move selected right"\n >\n >\n </Button>\n <Button\n variant="outlined"\n size="small"\n className={classes.button}\n onClick={handleCheckedLeft}\n disabled={rightChecked.length === 0}\n aria-label="move selected left"\n >\n <\n </Button>\n <Button\n variant="outlined"\n size="small"\n className={classes.button}\n onClick={handleAllLeft}\n disabled={right.length === 0}\n aria-label="move all left"\n >\n \u226a\n </Button>\n </Grid>\n </Grid>\n <Grid item>{customList(right)}</Grid>\n </Grid>\n );\n}\n'},2431:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return k}));var a=n(0),s=n.n(a),i=n(1072),c=n(1172),l=n(1033),r=n(1109),o=n(1440),d=n(1034),m=n(1103),h=n(1112),u=n(1165),b=n(1098),f=n(1108),j=n(1);const p=Object(i.a)((e=>({root:{margin:"auto"},cardHeader:{padding:e.spacing(1,2)},list:{width:200,height:230,backgroundColor:e.palette.background.paper,overflow:"auto"},button:{margin:e.spacing(.5,0)}})));function x(e,t){return e.filter((e=>-1===t.indexOf(e)))}function g(e,t){return e.filter((e=>-1!==t.indexOf(e)))}function k(){const e=p(),[t,n]=s.a.useState([]),[a,i]=s.a.useState([0,1,2,3]),[k,O]=s.a.useState([4,5,6,7]),C=g(t,a),v=g(t,k),L=e=>()=>{const a=t.indexOf(e),s=[...t];-1===a?s.push(e):s.splice(a,1),n(s)},I=e=>g(t,e).length,N=e=>()=>{var a,s;I(e)===e.length?n(x(t,e)):n((a=t,s=e,[...a,...x(s,a)]))},y=(n,a)=>Object(j.jsxs)(r.a,{children:[Object(j.jsx)(o.a,{className:e.cardHeader,avatar:Object(j.jsx)(u.a,{onClick:N(a),checked:I(a)===a.length&&0!==a.length,indeterminate:I(a)!==a.length&&0!==I(a),disabled:0===a.length,inputProps:{"aria-label":"all items selected"}}),title:n,subheader:"".concat(I(a),"/").concat(a.length," selected")}),Object(j.jsx)(f.a,{}),Object(j.jsxs)(l.a,{className:e.list,dense:!0,component:"div",role:"list",children:[a.map((e=>{const n="transfer-list-all-item-".concat(e,"-label");return Object(j.jsxs)(d.a,{role:"listitem",button:!0,onClick:L(e),children:[Object(j.jsx)(h.a,{children:Object(j.jsx)(u.a,{checked:-1!==t.indexOf(e),tabIndex:-1,disableRipple:!0,inputProps:{"aria-labelledby":n}})}),Object(j.jsx)(m.a,{id:n,primary:"List item ".concat(e+1)})]},e)})),Object(j.jsx)(d.a,{})]})]});return Object(j.jsxs)(c.a,{container:!0,spacing:2,justifyContent:"center",alignItems:"center",className:e.root,children:[Object(j.jsx)(c.a,{item:!0,children:y("Choices",a)}),Object(j.jsx)(c.a,{item:!0,children:Object(j.jsxs)(c.a,{container:!0,direction:"column",alignItems:"center",children:[Object(j.jsx)(b.a,{variant:"outlined",size:"small",className:e.button,onClick:()=>{O(k.concat(C)),i(x(a,C)),n(x(t,C))},disabled:0===C.length,"aria-label":"move selected right",children:">"}),Object(j.jsx)(b.a,{variant:"outlined",size:"small",className:e.button,onClick:()=>{i(a.concat(v)),O(x(k,v)),n(x(t,v))},disabled:0===v.length,"aria-label":"move selected left",children:"<"})]})}),Object(j.jsx)(c.a,{item:!0,children:y("Chosen",k)})]})}},2432:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport List from '@material-ui/core/List';\nimport Card from '@material-ui/core/Card';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Button from '@material-ui/core/Button';\nimport Divider from '@material-ui/core/Divider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n margin: 'auto',\n },\n cardHeader: {\n padding: theme.spacing(1, 2),\n },\n list: {\n width: 200,\n height: 230,\n backgroundColor: theme.palette.background.paper,\n overflow: 'auto',\n },\n button: {\n margin: theme.spacing(0.5, 0),\n },\n}));\n\nfunction not(a, b) {\n return a.filter((value) => b.indexOf(value) === -1);\n}\n\nfunction intersection(a, b) {\n return a.filter((value) => b.indexOf(value) !== -1);\n}\n\nfunction union(a, b) {\n return [...a, ...not(b, a)];\n}\n\nexport default function TransferList() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState([]);\n const [left, setLeft] = React.useState([0, 1, 2, 3]);\n const [right, setRight] = React.useState([4, 5, 6, 7]);\n\n const leftChecked = intersection(checked, left);\n const rightChecked = intersection(checked, right);\n\n const handleToggle = (value) => () => {\n const currentIndex = checked.indexOf(value);\n const newChecked = [...checked];\n\n if (currentIndex === -1) {\n newChecked.push(value);\n } else {\n newChecked.splice(currentIndex, 1);\n }\n\n setChecked(newChecked);\n };\n\n const numberOfChecked = (items) => intersection(checked, items).length;\n\n const handleToggleAll = (items) => () => {\n if (numberOfChecked(items) === items.length) {\n setChecked(not(checked, items));\n } else {\n setChecked(union(checked, items));\n }\n };\n\n const handleCheckedRight = () => {\n setRight(right.concat(leftChecked));\n setLeft(not(left, leftChecked));\n setChecked(not(checked, leftChecked));\n };\n\n const handleCheckedLeft = () => {\n setLeft(left.concat(rightChecked));\n setRight(not(right, rightChecked));\n setChecked(not(checked, rightChecked));\n };\n\n const customList = (title, items) => (\n <Card>\n <CardHeader\n className={classes.cardHeader}\n avatar={\n <Checkbox\n onClick={handleToggleAll(items)}\n checked={numberOfChecked(items) === items.length && items.length !== 0}\n indeterminate={numberOfChecked(items) !== items.length && numberOfChecked(items) !== 0}\n disabled={items.length === 0}\n inputProps={{ 'aria-label': 'all items selected' }}\n />\n }\n title={title}\n subheader={`${numberOfChecked(items)}/${items.length} selected`}\n />\n <Divider />\n <List className={classes.list} dense component=\"div\" role=\"list\">\n {items.map((value) => {\n const labelId = `transfer-list-all-item-${value}-label`;\n\n return (\n <ListItem key={value} role=\"listitem\" button onClick={handleToggle(value)}>\n <ListItemIcon>\n <Checkbox\n checked={checked.indexOf(value) !== -1}\n tabIndex={-1}\n disableRipple\n inputProps={{ 'aria-labelledby': labelId }}\n />\n </ListItemIcon>\n <ListItemText id={labelId} primary={`List item ${value + 1}`} />\n </ListItem>\n );\n })}\n <ListItem />\n </List>\n </Card>\n );\n\n return (\n <Grid\n container\n spacing={2}\n justifyContent=\"center\"\n alignItems=\"center\"\n className={classes.root}\n >\n <Grid item>{customList('Choices', left)}</Grid>\n <Grid item>\n <Grid container direction=\"column\" alignItems=\"center\">\n <Button\n variant=\"outlined\"\n size=\"small\"\n className={classes.button}\n onClick={handleCheckedRight}\n disabled={leftChecked.length === 0}\n aria-label=\"move selected right\"\n >\n >\n </Button>\n <Button\n variant=\"outlined\"\n size=\"small\"\n className={classes.button}\n onClick={handleCheckedLeft}\n disabled={rightChecked.length === 0}\n aria-label=\"move selected left\"\n >\n <\n </Button>\n </Grid>\n </Grid>\n <Grid item>{customList('Chosen', right)}</Grid>\n </Grid>\n );\n}\n"},2626:function(e,t,n){"use strict";n.r(t);var a=n(1130),s=n(1098),i=n(1090),c=n(194),l=n(1072),r=n(1);const o=Object(l.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return o(),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)(s.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/transfer-list",target:"_blank",role:"button",children:[Object(r.jsx)(i.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:"Transfer List"}),Object(r.jsx)(c.a,{className:"description",children:'A transfer list (or "shuttle") enables the user to move one or more list items between lists.'}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Transfer List"}),Object(r.jsxs)(c.a,{className:"mb-16",component:"div",children:[" ",'For completeness, this example includes buttons for "move all", but not every transfer list needs these.']}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2429).default,raw:n(2430)})}),Object(r.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Enhanced Transfer List"}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:'This example exchanges the "move all" buttons for a "select all / select none" checkbox, and adds a counter.'}),Object(r.jsx)(c.a,{className:"mb-16",component:"div",children:Object(r.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2431).default,raw:n(2432)})})]})}}}]);
Zerion Mini Shell 1.0