Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/67.610a3e15.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[67],{1129:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FrameContextConsumer=n.FrameContextProvider=n.FrameContext=void 0;var a,r=t(0),i=(a=r)&&a.__esModule?a:{default:a};var s=void 0,o=void 0;"undefined"!==typeof document&&(s=document),"undefined"!==typeof window&&(o=window);var c=n.FrameContext=i.default.createContext({document:s,window:o}),l=c.Provider,d=c.Consumer;n.FrameContextProvider=l,n.FrameContextConsumer=d},1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return P}));var a=t(118),r=t(1100),i=t(1109),s=t(1090),o=t(1117),c=t(1119),l=t(5),d=t(0),p=t(1024),m=t(551),u=t(1087),h=t(1099),f=t(11),x=t(370),j=t(371),b=t(1131),y=t.n(b),g=t(1);const O=Object(p.a)({productionPrefix:"iframe-"});class w 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(x.a)({...Object(m.a)(),plugins:[...Object(m.a)().plugins,Object(j.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:t}=this.props;return Object(g.jsx)(y.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)(h.a,{theme:t,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})(w);function N(e){const[n,t]=Object(d.useState)(e.currentTabIndex),{component:p,raw:m,iframe:u,className:h}=e;return Object(g.jsxs)(i.a,{className:Object(l.a)(h,"shadow"),children:[Object(g.jsx)(r.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){t(n)},children:[p&&Object(g.jsx)(o.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(s.a,{children:"remove_red_eye"})}),m&&Object(g.jsx)(o.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(s.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:p&&(u?Object(g.jsx)(v,{children:Object(g.jsx)(p,{})}):Object(g.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(g.jsx)(p,{})}))}),Object(g.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:m&&Object(g.jsx)("div",{className:"flex flex-1",children:Object(g.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}N.defaultProps={currentTabIndex:0};var P=N},1131:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FrameContextConsumer=n.FrameContext=void 0;var a=t(1129);Object.defineProperty(n,"FrameContext",{enumerable:!0,get:function(){return a.FrameContext}}),Object.defineProperty(n,"FrameContextConsumer",{enumerable:!0,get:function(){return a.FrameContextConsumer}});var r,i=t(1132),s=(r=i)&&r.__esModule?r:{default:r};n.default=s.default},1132:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},r=function(){function e(e,n){for(var t=0;t<n.length;t++){var a=n[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(n,t,a){return t&&e(n.prototype,t),a&&e(n,a),n}}(),i=t(0),s=p(i),o=p(t(22)),c=p(t(553)),l=t(1129),d=p(t(1133));function p(e){return e&&e.__esModule?e:{default:e}}var m=function(e){function n(e,t){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n);var a=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!==typeof n&&"function"!==typeof n?e:n}(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e,t));return a.handleLoad=function(){a.forceUpdate()},a._isMounted=!1,a}return function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,e),r(n,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var n=this.props.contentDidMount,t=this.props.contentDidUpdate,a=e.defaultView||e.parentView,r=s.default.createElement(d.default,{contentDidMount:n,contentDidUpdate:t},s.default.createElement(l.FrameContextProvider,{value:{document:e,window:a}},s.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var i=this.getMountTarget();return[o.default.createPortal(this.props.head,this.getDoc().head),o.default.createPortal(r,i)]}},{key:"render",value:function(){var e=this,n=a({},this.props,{children:void 0});return delete n.head,delete n.initialContent,delete n.mountTarget,delete n.contentDidMount,delete n.contentDidUpdate,s.default.createElement("iframe",a({},n,{ref:function(n){e.node=n}}),this.renderFrameContents())}}]),n}(i.Component);m.propTypes={style:c.default.object,head:c.default.node,initialContent:c.default.string,mountTarget:c.default.string,contentDidMount:c.default.func,contentDidUpdate:c.default.func,children:c.default.oneOfType([c.default.element,c.default.arrayOf(c.default.element)])},m.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},n.default=m},1133:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a=function(){function e(e,n){for(var t=0;t<n.length;t++){var a=n[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(n,t,a){return t&&e(n.prototype,t),a&&e(n,a),n}}(),r=t(0),i=(s(r),s(t(553)));function s(e){return e&&e.__esModule?e:{default:e}}var o=function(e){function n(){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!==typeof n&&"function"!==typeof n?e:n}(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,e),a(n,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return r.Children.only(this.props.children)}}]),n}(r.Component);o.propTypes={children:i.default.element.isRequired,contentDidMount:i.default.func.isRequired,contentDidUpdate:i.default.func.isRequired},n.default=o},1172:function(e,n,t){"use strict";var a=t(7),r=t(2),i=t(0),s=t(8),o=t(11),c=[0,1,2,3,4,5,6,7,8,9,10],l=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12];function d(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,t=parseFloat(e);return"".concat(t/n).concat(String(e).replace(String(t),"")||"px")}var p=i.forwardRef((function(e,n){var t=e.alignContent,o=void 0===t?"stretch":t,c=e.alignItems,l=void 0===c?"stretch":c,d=e.classes,p=e.className,m=e.component,u=void 0===m?"div":m,h=e.container,f=void 0!==h&&h,x=e.direction,j=void 0===x?"row":x,b=e.item,y=void 0!==b&&b,g=e.justify,O=e.justifyContent,w=void 0===O?"flex-start":O,v=e.lg,N=void 0!==v&&v,P=e.md,C=void 0!==P&&P,D=e.sm,U=void 0!==D&&D,k=e.spacing,H=void 0===k?0:k,T=e.wrap,_=void 0===T?"wrap":T,S=e.xl,M=void 0!==S&&S,G=e.xs,W=void 0!==G&&G,R=e.zeroMinWidth,B=void 0!==R&&R,F=Object(a.a)(e,["alignContent","alignItems","classes","className","component","container","direction","item","justify","justifyContent","lg","md","sm","spacing","wrap","xl","xs","zeroMinWidth"]),E=Object(s.a)(d.root,p,f&&[d.container,0!==H&&d["spacing-xs-".concat(String(H))]],y&&d.item,B&&d.zeroMinWidth,"row"!==j&&d["direction-xs-".concat(String(j))],"wrap"!==_&&d["wrap-xs-".concat(String(_))],"stretch"!==l&&d["align-items-xs-".concat(String(l))],"stretch"!==o&&d["align-content-xs-".concat(String(o))],"flex-start"!==(g||w)&&d["justify-content-xs-".concat(String(g||w))],!1!==W&&d["grid-xs-".concat(String(W))],!1!==U&&d["grid-sm-".concat(String(U))],!1!==C&&d["grid-md-".concat(String(C))],!1!==N&&d["grid-lg-".concat(String(N))],!1!==M&&d["grid-xl-".concat(String(M))]);return i.createElement(u,Object(r.a)({className:E,ref:n},F))})),m=Object(o.a)((function(e){return Object(r.a)({root:{},container:{boxSizing:"border-box",display:"flex",flexWrap:"wrap",width:"100%"},item:{boxSizing:"border-box",margin:"0"},zeroMinWidth:{minWidth:0},"direction-xs-column":{flexDirection:"column"},"direction-xs-column-reverse":{flexDirection:"column-reverse"},"direction-xs-row-reverse":{flexDirection:"row-reverse"},"wrap-xs-nowrap":{flexWrap:"nowrap"},"wrap-xs-wrap-reverse":{flexWrap:"wrap-reverse"},"align-items-xs-center":{alignItems:"center"},"align-items-xs-flex-start":{alignItems:"flex-start"},"align-items-xs-flex-end":{alignItems:"flex-end"},"align-items-xs-baseline":{alignItems:"baseline"},"align-content-xs-center":{alignContent:"center"},"align-content-xs-flex-start":{alignContent:"flex-start"},"align-content-xs-flex-end":{alignContent:"flex-end"},"align-content-xs-space-between":{alignContent:"space-between"},"align-content-xs-space-around":{alignContent:"space-around"},"justify-content-xs-center":{justifyContent:"center"},"justify-content-xs-flex-end":{justifyContent:"flex-end"},"justify-content-xs-space-between":{justifyContent:"space-between"},"justify-content-xs-space-around":{justifyContent:"space-around"},"justify-content-xs-space-evenly":{justifyContent:"space-evenly"}},function(e,n){var t={};return c.forEach((function(a){var r=e.spacing(a);0!==r&&(t["spacing-".concat(n,"-").concat(a)]={margin:"-".concat(d(r,2)),width:"calc(100% + ".concat(d(r),")"),"& > $item":{padding:d(r,2)}})})),t}(e,"xs"),e.breakpoints.keys.reduce((function(n,t){return function(e,n,t){var a={};l.forEach((function(e){var n="grid-".concat(t,"-").concat(e);if(!0!==e)if("auto"!==e){var r="".concat(Math.round(e/12*1e8)/1e6,"%");a[n]={flexBasis:r,flexGrow:0,maxWidth:r}}else a[n]={flexBasis:"auto",flexGrow:0,maxWidth:"none"};else a[n]={flexBasis:0,flexGrow:1,maxWidth:"100%"}})),"xs"===t?Object(r.a)(e,a):e[n.breakpoints.up(t)]=a}(n,e,t),n}),{}))}),{name:"MuiGrid"})(p);n.a=m},2e3:function(e,n,t){"use strict";t.r(n);t(0);var a=t(1072),r=t(193),i=t(1121),s=t(1110),o=t(194),c=t(1);const l=Object(a.a)((e=>({root:{flexGrow:1},container:{display:"flex",flexWrap:"wrap"},paper:{padding:e.spacing(2),textAlign:"center",color:e.palette.text.secondary,flex:"1 0 auto",margin:e.spacing(1)}})));n.default=Object(s.a)()((function(e){const n=l(),{width:t}=e;return Object(c.jsxs)("div",{className:n.root,children:[Object(c.jsxs)(o.a,{variant:"subtitle1",children:["Current width: ",t]}),Object(c.jsxs)("div",{className:n.container,children:[Object(c.jsx)(i.a,{xsUp:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"xsUp"})}),Object(c.jsx)(i.a,{smUp:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"smUp"})}),Object(c.jsx)(i.a,{mdUp:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"mdUp"})}),Object(c.jsx)(i.a,{lgUp:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"lgUp"})}),Object(c.jsx)(i.a,{xlUp:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"xlUp"})})]})]})}))},2001:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Hidden from '@material-ui/core/Hidden';\nimport withWidth from '@material-ui/core/withWidth';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n container: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n paper: {\n padding: theme.spacing(2),\n textAlign: 'center',\n color: theme.palette.text.secondary,\n flex: '1 0 auto',\n margin: theme.spacing(1),\n },\n}));\n\nfunction BreakpointUp(props) {\n const classes = useStyles();\n const { width } = props;\n\n return (\n <div className={classes.root}>\n <Typography variant=\"subtitle1\">Current width: {width}</Typography>\n <div className={classes.container}>\n <Hidden xsUp>\n <Paper className={classes.paper}>xsUp</Paper>\n </Hidden>\n <Hidden smUp>\n <Paper className={classes.paper}>smUp</Paper>\n </Hidden>\n <Hidden mdUp>\n <Paper className={classes.paper}>mdUp</Paper>\n </Hidden>\n <Hidden lgUp>\n <Paper className={classes.paper}>lgUp</Paper>\n </Hidden>\n <Hidden xlUp>\n <Paper className={classes.paper}>xlUp</Paper>\n </Hidden>\n </div>\n </div>\n );\n}\n\nBreakpointUp.propTypes = {\n width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,\n};\n\nexport default withWidth()(BreakpointUp);\n"},2002:function(e,n,t){"use strict";t.r(n);t(0);var a=t(1072),r=t(193),i=t(1121),s=t(1110),o=t(194),c=t(1);const l=Object(a.a)((e=>({root:{flexGrow:1},container:{display:"flex",flexWrap:"wrap"},paper:{padding:e.spacing(2),textAlign:"center",color:e.palette.text.secondary,flex:"1 0 auto",margin:e.spacing(1)}})));n.default=Object(s.a)()((function(e){const n=l(),{width:t}=e;return Object(c.jsxs)("div",{className:n.root,children:[Object(c.jsxs)(o.a,{variant:"subtitle1",children:["Current width: ",t]}),Object(c.jsxs)("div",{className:n.container,children:[Object(c.jsx)(i.a,{xsDown:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"xsDown"})}),Object(c.jsx)(i.a,{smDown:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"smDown"})}),Object(c.jsx)(i.a,{mdDown:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"mdDown"})}),Object(c.jsx)(i.a,{lgDown:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"lgDown"})}),Object(c.jsx)(i.a,{xlDown:!0,children:Object(c.jsx)(r.a,{className:n.paper,children:"xlDown"})})]})]})}))},2003:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Hidden from '@material-ui/core/Hidden';\nimport withWidth from '@material-ui/core/withWidth';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n container: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n paper: {\n padding: theme.spacing(2),\n textAlign: 'center',\n color: theme.palette.text.secondary,\n flex: '1 0 auto',\n margin: theme.spacing(1),\n },\n}));\n\nfunction BreakpointDown(props) {\n const classes = useStyles();\n const { width } = props;\n\n return (\n <div className={classes.root}>\n <Typography variant=\"subtitle1\">Current width: {width}</Typography>\n <div className={classes.container}>\n <Hidden xsDown>\n <Paper className={classes.paper}>xsDown</Paper>\n </Hidden>\n <Hidden smDown>\n <Paper className={classes.paper}>smDown</Paper>\n </Hidden>\n <Hidden mdDown>\n <Paper className={classes.paper}>mdDown</Paper>\n </Hidden>\n <Hidden lgDown>\n <Paper className={classes.paper}>lgDown</Paper>\n </Hidden>\n <Hidden xlDown>\n <Paper className={classes.paper}>xlDown</Paper>\n </Hidden>\n </div>\n </div>\n );\n}\n\nBreakpointDown.propTypes = {\n width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,\n};\n\nexport default withWidth()(BreakpointDown);\n"},2004:function(e,n,t){"use strict";t.r(n);t(0);var a=t(1072),r=t(193),i=t(1121),s=t(1110),o=t(194),c=t(1);const l=Object(a.a)((e=>({root:{flexGrow:1},container:{display:"flex",flexWrap:"wrap"},paper:{padding:e.spacing(2),textAlign:"center",color:e.palette.text.secondary,flex:"1 0 auto",margin:e.spacing(1)}})));n.default=Object(s.a)()((function(e){const n=l(),{width:t}=e;return Object(c.jsxs)("div",{className:n.root,children:[Object(c.jsxs)(o.a,{variant:"subtitle1",children:["Current width: ",t]}),Object(c.jsxs)("div",{className:n.container,children:[Object(c.jsx)(i.a,{only:"lg",children:Object(c.jsx)(r.a,{className:n.paper,children:"Hidden on lg"})}),Object(c.jsx)(i.a,{only:"sm",children:Object(c.jsx)(r.a,{className:n.paper,children:"Hidden on sm"})}),Object(c.jsx)(i.a,{only:["sm","lg"],children:Object(c.jsx)(r.a,{className:n.paper,children:"Hidden on sm and lg"})})]})]})}))},2005:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Hidden from '@material-ui/core/Hidden';\nimport withWidth from '@material-ui/core/withWidth';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n container: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n paper: {\n padding: theme.spacing(2),\n textAlign: 'center',\n color: theme.palette.text.secondary,\n flex: '1 0 auto',\n margin: theme.spacing(1),\n },\n}));\n\nfunction BreakpointOnly(props) {\n const classes = useStyles();\n const { width } = props;\n\n return (\n <div className={classes.root}>\n <Typography variant=\"subtitle1\">Current width: {width}</Typography>\n <div className={classes.container}>\n <Hidden only=\"lg\">\n <Paper className={classes.paper}>Hidden on lg</Paper>\n </Hidden>\n <Hidden only=\"sm\">\n <Paper className={classes.paper}>Hidden on sm</Paper>\n </Hidden>\n <Hidden only={['sm', 'lg']}>\n <Paper className={classes.paper}>Hidden on sm and lg</Paper>\n </Hidden>\n </div>\n </div>\n );\n}\n\nBreakpointOnly.propTypes = {\n width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,\n};\n\nexport default withWidth()(BreakpointOnly);\n"},2006:function(e,n,t){"use strict";t.r(n);t(0);var a=t(1072),r=t(193),i=t(1172),s=t(1121),o=t(1110),c=t(194),l=t(1);const d=Object(a.a)((e=>({root:{flexGrow:1},paper:{padding:e.spacing(2),textAlign:"center",color:e.palette.text.secondary}})));n.default=Object(o.a)()((function(e){const n=d(),{width:t}=e;return Object(l.jsxs)("div",{className:n.root,children:[Object(l.jsxs)(c.a,{variant:"subtitle1",gutterBottom:!0,children:["Current width: ",t]}),Object(l.jsxs)(i.a,{container:!0,spacing:3,children:[Object(l.jsx)(s.a,{xsUp:!0,children:Object(l.jsx)(i.a,{item:!0,xs:!0,children:Object(l.jsx)(r.a,{className:n.paper,children:"xsUp"})})}),Object(l.jsx)(s.a,{smUp:!0,children:Object(l.jsx)(i.a,{item:!0,xs:!0,children:Object(l.jsx)(r.a,{className:n.paper,children:"smUp"})})}),Object(l.jsx)(s.a,{mdUp:!0,children:Object(l.jsx)(i.a,{item:!0,xs:!0,children:Object(l.jsx)(r.a,{className:n.paper,children:"mdUp"})})}),Object(l.jsx)(s.a,{lgUp:!0,children:Object(l.jsx)(i.a,{item:!0,xs:!0,children:Object(l.jsx)(r.a,{className:n.paper,children:"lgUp"})})}),Object(l.jsx)(s.a,{xlUp:!0,children:Object(l.jsx)(i.a,{item:!0,xs:!0,children:Object(l.jsx)(r.a,{className:n.paper,children:"xlUp"})})})]})]})}))},2007:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport Grid from '@material-ui/core/Grid';\nimport Hidden from '@material-ui/core/Hidden';\nimport withWidth from '@material-ui/core/withWidth';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n paper: {\n padding: theme.spacing(2),\n textAlign: 'center',\n color: theme.palette.text.secondary,\n },\n}));\n\nfunction GridIntegration(props) {\n const classes = useStyles();\n const { width } = props;\n\n return (\n <div className={classes.root}>\n <Typography variant=\"subtitle1\" gutterBottom>\n Current width: {width}\n </Typography>\n <Grid container spacing={3}>\n <Hidden xsUp>\n <Grid item xs>\n <Paper className={classes.paper}>xsUp</Paper>\n </Grid>\n </Hidden>\n <Hidden smUp>\n <Grid item xs>\n <Paper className={classes.paper}>smUp</Paper>\n </Grid>\n </Hidden>\n <Hidden mdUp>\n <Grid item xs>\n <Paper className={classes.paper}>mdUp</Paper>\n </Grid>\n </Hidden>\n <Hidden lgUp>\n <Grid item xs>\n <Paper className={classes.paper}>lgUp</Paper>\n </Grid>\n </Hidden>\n <Hidden xlUp>\n <Grid item xs>\n <Paper className={classes.paper}>xlUp</Paper>\n </Grid>\n </Hidden>\n </Grid>\n </div>\n );\n}\n\nGridIntegration.propTypes = {\n width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,\n};\n\nexport default withWidth()(GridIntegration);\n"},2584:function(e,n,t){"use strict";t.r(n);var a=t(1130),r=t(118),i=t(1098),s=t(1090),o=t(194),c=t(1072),l=t(1);const d=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return d(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(i.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/hidden",target:"_blank",role:"button",children:[Object(l.jsx)(s.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Hidden"}),Object(l.jsx)(o.a,{className:"description",children:"Quickly and responsively toggle the visibility value of components and more with the hidden utilities."}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["All elements are visible unless ",Object(l.jsx)("strong",{children:"they are explicitly hidden"}),". To ease integration with Material-UI's"," ",Object(l.jsx)("a",{href:"/customization/breakpoints/",children:"responsive breakpoints"}),", this component can be used to hide any content, or you can use it in conjunction with the"," ",Object(l.jsx)("a",{href:"/components/grid/",children:Object(l.jsx)("code",{children:"Grid"})})," ","component."]}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"How it works"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["Hidden works with a range of breakpoints e.g. ",Object(l.jsx)("code",{children:"xsUp"})," or ",Object(l.jsx)("code",{children:"mdDown"}),", or one or more breakpoints e.g. ",Object(l.jsx)("code",{children:"only='sm'"})," or ",Object(l.jsx)("code",{children:"only={['md', 'xl']}"}),". Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints."]}),Object(l.jsx)(r.a,{component:"pre",className:"language-js",children:" \ninnerWidth |xs sm md lg xl\n |--------|--------|--------|--------|--------\x3e\nwidth | xs | sm | md | lg | xl\n\nsmUp | show | hide\nmdDown | hide | show\n\n"}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Implementations"}),Object(l.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"js"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["By default, the ",Object(l.jsx)("code",{children:"js"})," implementation is used, responsively hiding content based on using the"," ",Object(l.jsx)("a",{href:"/customization/breakpoints/#withwidth",children:Object(l.jsx)("code",{children:"withWidth()"})})," ","higher-order component that watches screen size. This has the benefit of not rendering any content at all unless the breakpoint is met."]}),Object(l.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"css"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["If you are using server-side rendering, you can set ",Object(l.jsx)("code",{children:'implementation="css"'})," if you don't want the browser to re-flow your content on the screen."]}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Breakpoint up"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["Using any breakpoint ",Object(l.jsx)("code",{children:"up"})," property, the given ",Object(l.jsx)("em",{children:"children"})," will be hidden"," ",Object(l.jsx)("em",{children:"at or above"})," the breakpoint."]}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2e3).default,raw:t(2001)})}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Breakpoint down"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["Using any breakpoint ",Object(l.jsx)("code",{children:"down"})," property, the given ",Object(l.jsx)("em",{children:"children"})," will be hidden"," ",Object(l.jsx)("em",{children:"at or below"})," the breakpoint."]}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2002).default,raw:t(2003)})}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Breakpoint only"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["Using the breakpoint ",Object(l.jsx)("code",{children:"only"})," property, the given ",Object(l.jsx)("em",{children:"children"})," will be hidden"," ",Object(l.jsx)("em",{children:"at"})," the specified breakpoint(s)."]}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["The ",Object(l.jsx)("code",{children:"only"})," property can be used in two ways:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:"list a single breakpoint"}),Object(l.jsx)("li",{children:"list an array of breakpoints"})]}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2004).default,raw:t(2005)})}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Integration with Grid"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["It is quite common to alter ",Object(l.jsx)("code",{children:"Grid"})," at different responsive breakpoints, and in many cases, you want to hide some of those elements."]}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:t(2006).default,raw:t(2007)})})]})}}}]);
Mini Shell