%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[45],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return w}));var a=t(118),o=t(1100),s=t(1109),i=t(1090),c=t(1117),r=t(1119),l=t(5),m=t(0),u=t(1024),d=t(551),p=t(1087),j=t(1099),b=t(11),g=t(370),h=t(371),f=t(1131),x=t.n(f),O=t(1);const y=Object(u.a)({productionPrefix:"iframe-"});class P extends m.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(g.a)({...Object(d.a)(),plugins:[...Object(d.a)().plugins,Object(h.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(O.jsxs)(O.Fragment,{children:[Object(O.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(O.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:t}=this.props;return Object(O.jsx)(x.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(O.jsx)(p.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(j.a,{theme:t,children:Object(m.cloneElement)(e,{container:this.state.container})})}):null})}}var v=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(P);function N(e){const[n,t]=Object(m.useState)(e.currentTabIndex),{component:u,raw:d,iframe:p,className:j}=e;return Object(O.jsxs)(s.a,{className:Object(l.a)(j,"shadow"),children:[Object(O.jsx)(o.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(r.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[u&&Object(O.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(i.a,{children:"remove_red_eye"})}),d&&Object(O.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(i.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:u&&(p?Object(O.jsx)(v,{children:Object(O.jsx)(u,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(u,{})}))}),Object(O.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:d&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}N.defaultProps={currentTabIndex:0};var w=N},2087:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),o=t(2592),s=t(1);const i=Object(a.a)((e=>({root:{"& > *":{marginTop:e.spacing(2)}}})));function c(){const e=i();return Object(s.jsxs)("div",{className:e.root,children:[Object(s.jsx)(o.a,{count:10}),Object(s.jsx)(o.a,{count:10,color:"primary"}),Object(s.jsx)(o.a,{count:10,color:"secondary"}),Object(s.jsx)(o.a,{count:10,disabled:!0})]})}},2089:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function BasicPagination() {\n const classes = useStyles();\n return (\n <div className={classes.root}>\n <Pagination count={10} />\n <Pagination count={10} color=\"primary\" />\n <Pagination count={10} color=\"secondary\" />\n <Pagination count={10} disabled />\n </div>\n );\n}\n"},2090:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),o=t(2592),s=t(1);const i=Object(a.a)((e=>({root:{"& > *":{marginTop:e.spacing(2)}}})));function c(){const e=i();return Object(s.jsxs)("div",{className:e.root,children:[Object(s.jsx)(o.a,{count:10,variant:"outlined"}),Object(s.jsx)(o.a,{count:10,variant:"outlined",color:"primary"}),Object(s.jsx)(o.a,{count:10,variant:"outlined",color:"secondary"}),Object(s.jsx)(o.a,{count:10,variant:"outlined",disabled:!0})]})}},2091:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Pagination from \'@material-ui/lab/Pagination\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n \'& > *\': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function PaginationOutlined() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Pagination count={10} variant="outlined" />\n <Pagination count={10} variant="outlined" color="primary" />\n <Pagination count={10} variant="outlined" color="secondary" />\n <Pagination count={10} variant="outlined" disabled />\n </div>\n );\n}\n'},2092:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),o=t(2592),s=t(1);const i=Object(a.a)((e=>({root:{"& > *":{marginTop:e.spacing(2)}}})));function c(){const e=i();return Object(s.jsxs)("div",{className:e.root,children:[Object(s.jsx)(o.a,{count:10,shape:"rounded"}),Object(s.jsx)(o.a,{count:10,variant:"outlined",shape:"rounded"})]})}},2093:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function PaginationRounded() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Pagination count={10} shape=\"rounded\" />\n <Pagination count={10} variant=\"outlined\" shape=\"rounded\" />\n </div>\n );\n}\n"},2094:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),o=t(2592),s=t(1);const i=Object(a.a)((e=>({root:{"& > *":{marginTop:e.spacing(2)}}})));function c(){const e=i();return Object(s.jsxs)("div",{className:e.root,children:[Object(s.jsx)(o.a,{count:10,size:"small"}),Object(s.jsx)(o.a,{count:10}),Object(s.jsx)(o.a,{count:10,size:"large"})]})}},2095:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function PaginationSize() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Pagination count={10} size=\"small\" />\n <Pagination count={10} />\n <Pagination count={10} size=\"large\" />\n </div>\n );\n}\n"},2096:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),o=t(2592),s=t(1);const i=Object(a.a)((e=>({root:{"& > *":{marginTop:e.spacing(2)}}})));function c(){const e=i();return Object(s.jsxs)("div",{className:e.root,children:[Object(s.jsx)(o.a,{count:10,showFirstButton:!0,showLastButton:!0}),Object(s.jsx)(o.a,{count:10,hidePrevButton:!0,hideNextButton:!0})]})}},2097:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function PaginationButtons() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Pagination count={10} showFirstButton showLastButton />\n <Pagination count={10} hidePrevButton hideNextButton />\n </div>\n );\n}\n"},2098:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(1072),o=t(2592),s=t(1);const i=Object(a.a)((e=>({root:{"& > *":{marginTop:e.spacing(2)}}})));function c(){const e=i();return Object(s.jsxs)("div",{className:e.root,children:[Object(s.jsx)(o.a,{count:11,defaultPage:6,siblingCount:0}),Object(s.jsx)(o.a,{count:11,defaultPage:6})," ",Object(s.jsx)(o.a,{count:11,defaultPage:6,siblingCount:0,boundaryCount:2}),Object(s.jsx)(o.a,{count:11,defaultPage:6,boundaryCount:2})]})}},2099:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Pagination from '@material-ui/lab/Pagination';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function PaginationRanges() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Pagination count={11} defaultPage={6} siblingCount={0} />\n <Pagination count={11} defaultPage={6} /> {/* Default ranges */}\n <Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />\n <Pagination count={11} defaultPage={6} boundaryCount={2} />\n </div>\n );\n}\n"},2100:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return m}));var a=t(0),o=t.n(a),s=t(1072),i=t(194),c=t(2592),r=t(1);const l=Object(s.a)((e=>({root:{"& > * + *":{marginTop:e.spacing(2)}}})));function m(){const e=l(),[n,t]=o.a.useState(1);return Object(r.jsxs)("div",{className:e.root,children:[Object(r.jsxs)(i.a,{children:["Page: ",n]}),Object(r.jsx)(c.a,{count:10,page:n,onChange:(e,n)=>{t(n)}})]})}},2101:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Pagination from '@material-ui/lab/Pagination';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > * + *': {\n marginTop: theme.spacing(2),\n },\n },\n}));\n\nexport default function PaginationControlled() {\n const classes = useStyles();\n const [page, setPage] = React.useState(1);\n const handleChange = (event, value) => {\n setPage(value);\n };\n\n return (\n <div className={classes.root}>\n <Typography>Page: {page}</Typography>\n <Pagination count={10} page={page} onChange={handleChange} />\n </div>\n );\n}\n"},2102:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return r}));t(0);var a=t(49),o=t(28),s=t(2592),i=t(2706),c=t(1);function r(){return Object(c.jsx)(a.a,{initialEntries:["/inbox"],initialIndex:0,children:Object(c.jsx)(a.c,{children:e=>{let{location:n}=e;const t=new URLSearchParams(n.search),a=parseInt(t.get("page")||"1",10);return Object(c.jsx)(s.a,{page:a,count:10,renderItem:e=>Object(c.jsx)(i.a,{component:o.a,to:"/inbox".concat(1===e.page?"":"?page=".concat(e.page)),...e})})}})})}},2103:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { MemoryRouter, Route } from 'react-router';\nimport { Link } from 'react-router-dom';\nimport Pagination from '@material-ui/lab/Pagination';\nimport PaginationItem from '@material-ui/lab/PaginationItem';\n\nexport default function PaginationLink() {\n return (\n <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>\n <Route>\n {({ location }) => {\n const query = new URLSearchParams(location.search);\n const page = parseInt(query.get('page') || '1', 10);\n return (\n <Pagination\n page={page}\n count={10}\n renderItem={(item) => (\n <PaginationItem\n component={Link}\n to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}\n {...item}\n />\n )}\n />\n );\n }}\n </Route>\n </MemoryRouter>\n );\n}\n"},2104:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var a=t(2088),o=t(1072),s=t(1);const i=Object(o.a)({ul:{listStyle:"none",padding:0,margin:0,display:"flex"}});function c(){const e=i(),{items:n}=Object(a.a)({count:10});return Object(s.jsx)("nav",{children:Object(s.jsx)("ul",{className:e.ul,children:n.map(((e,n)=>{let{page:t,type:a,selected:o,...i}=e,c=null;return c="start-ellipsis"===a||"end-ellipsis"===a?"\u2026":"page"===a?Object(s.jsx)("button",{type:"button",style:{fontWeight:o?"bold":void 0},...i,children:t}):Object(s.jsx)("button",{type:"button",...i,children:a}),Object(s.jsx)("li",{children:c},n)}))})})}},2105:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { usePagination } from '@material-ui/lab/Pagination';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n ul: {\n listStyle: 'none',\n padding: 0,\n margin: 0,\n display: 'flex',\n },\n});\n\nexport default function UsePagination() {\n const classes = useStyles();\n const { items } = usePagination({\n count: 10,\n });\n\n return (\n <nav>\n <ul className={classes.ul}>\n {items.map(({ page, type, selected, ...item }, index) => {\n let children = null;\n\n if (type === 'start-ellipsis' || type === 'end-ellipsis') {\n children = '\u2026';\n } else if (type === 'page') {\n children = (\n <button type=\"button\" style={{ fontWeight: selected ? 'bold' : undefined }} {...item}>\n {page}\n </button>\n );\n } else {\n children = (\n <button type=\"button\" {...item}>\n {type}\n </button>\n );\n }\n\n return <li key={index}>{children}</li>;\n })}\n </ul>\n </nav>\n );\n}\n"},2106:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));var a=t(0),o=t.n(a),s=t(2511),i=t(1);function c(){const[e,n]=o.a.useState(2),[t,a]=o.a.useState(10);return Object(i.jsx)(s.a,{component:"div",count:100,page:e,onPageChange:(e,t)=>{n(t)},rowsPerPage:t,onRowsPerPageChange:e=>{a(parseInt(e.target.value,10)),n(0)}})}},2107:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport TablePagination from '@material-ui/core/TablePagination';\n\nexport default function TablePaginationDemo() {\n const [page, setPage] = React.useState(2);\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n return (\n <TablePagination\n component=\"div\"\n count={100}\n page={page}\n onPageChange={handleChangePage}\n rowsPerPage={rowsPerPage}\n onRowsPerPageChange={handleChangeRowsPerPage}\n />\n );\n}\n"},2591:function(e,n,t){"use strict";t.r(n);var a=t(1130),o=t(118),s=t(1098),i=t(1090),c=t(194),r=t(1072),l=t(1);const m=Object(r.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return m(),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/pagination",target:"_blank",role:"button",children:[Object(l.jsx)(i.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(c.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Pagination"}),Object(l.jsx)(c.a,{className:"description",children:"The Pagination component enables the user to select a specific page from a range of pages."}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Basic pagination"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2087).default,raw:t(2089)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Outlined pagination"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2090).default,raw:t(2091)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Rounded pagination"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2092).default,raw:t(2093)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Pagination size"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2094).default,raw:t(2095)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Buttons"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2096).default,raw:t(2097)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Pagination ranges"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can specify how many digits to display either side of current page with the"," ",Object(l.jsx)("code",{children:"siblingRange"})," prop, and adjacent to the start and end page number with the"," ",Object(l.jsx)("code",{children:"boundaryRange"})," prop."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2098).default,raw:t(2099)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Controlled pagination"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2100).default,raw:t(2101)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Router integration"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2102).default,raw:t(2103)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:Object(l.jsx)("code",{children:"usePagination"})}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["For advanced customization use cases, we expose a headless ",Object(l.jsx)("code",{children:"usePagination()"})," ","hook. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component uses this hook internally."]}),Object(l.jsx)(o.a,{component:"pre",className:"language-jsx",children:" \nimport { usePagination } from '@material-ui/lab/Pagination';\n"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2104).default,raw:t(2105)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Table pagination"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["The ",Object(l.jsx)("code",{children:"Pagination"})," component was designed to paginate a list of arbitrary items when infinite loading isn't used. It's preferred in contexts where SEO is important, for instance, a blog."]}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["For the pagination of a large set of tabular data, you should use the"," ",Object(l.jsx)("code",{children:"TablePagination"})," component."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2106).default,raw:t(2107)})}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can learn more about this use case in the"," ",Object(l.jsx)("a",{href:"/components/tables/#custom-pagination-options",children:"table section"})," of the documentation."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"ARIA"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:['The root node has a role of "navigation" and aria-label "pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the ',Object(l.jsx)("code",{children:"getItemAriaLabel"})," prop."]}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Keyboard"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:'The pagination items are in tab order, with a tabindex of "0".'})]})}}}]);
Zerion Mini Shell 1.0