%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/
Upload File :
Create Path :
Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/38.3ab259b0.chunk.js

(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[38],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return S}));var r=t(118),s=t(1100),a=t(1109),o=t(1090),c=t(1117),i=t(1119),l=t(5),u=t(0),m=t(1024),d=t(551),p=t(1087),f=t(1099),h=t(11),b=t(370),j=t(371),g=t(1131),x=t.n(g),v=t(1);const y=Object(m.a)({productionPrefix:"iframe-"});class O extends u.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(b.a)({...Object(d.a)(),plugins:[...Object(d.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(v.jsxs)(v.Fragment,{children:[Object(v.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n                    html {\n                    font-size: 62.5%;\n                    font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n                    }\n                "}}),Object(v.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:t}=this.props;return Object(v.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(v.jsx)(p.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(v.jsx)(f.a,{theme:t,children:Object(u.cloneElement)(e,{container:this.state.container})})}):null})}}var N=Object(h.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function P(e){const[n,t]=Object(u.useState)(e.currentTabIndex),{component:m,raw:d,iframe:p,className:f}=e;return Object(v.jsxs)(a.a,{className:Object(l.a)(f,"shadow"),children:[Object(v.jsx)(s.a,{position:"static",color:"default",className:"shadow-0",children:Object(v.jsxs)(i.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[m&&Object(v.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(o.a,{children:"remove_red_eye"})}),d&&Object(v.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(o.a,{children:"code"})})]})}),Object(v.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(v.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:m&&(p?Object(v.jsx)(N,{children:Object(v.jsx)(m,{})}):Object(v.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(v.jsx)(m,{})}))}),Object(v.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:d&&Object(v.jsx)("div",{className:"flex flex-1",children:Object(v.jsx)(r.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}P.defaultProps={currentTabIndex:0};var S=P},2143:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var r=t(1072),s=t(1279),a=t(1);const o=Object(r.a)((e=>({root:{display:"flex","& > * + *":{marginLeft:e.spacing(2)}}})));function c(){const e=o();return Object(a.jsxs)("div",{className:e.root,children:[Object(a.jsx)(s.a,{}),Object(a.jsx)(s.a,{color:"secondary"})]})}},2144:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    '& > * + *': {\n      marginLeft: theme.spacing(2),\n    },\n  },\n}));\n\nexport default function CircularIndeterminate() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <CircularProgress />\n      <CircularProgress color=\"secondary\" />\n    </div>\n  );\n}\n"},2145:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return l}));var r=t(0),s=t.n(r),a=t(1072),o=t(1279),c=t(1);const i=Object(a.a)((e=>({root:{display:"flex","& > * + *":{marginLeft:e.spacing(2)}}})));function l(){const e=i(),[n,t]=s.a.useState(0);return s.a.useEffect((()=>{const e=setInterval((()=>{t((e=>e>=100?0:e+10))}),800);return()=>{clearInterval(e)}}),[]),Object(c.jsxs)("div",{className:e.root,children:[Object(c.jsx)(o.a,{variant:"determinate",value:25}),Object(c.jsx)(o.a,{variant:"determinate",value:50}),Object(c.jsx)(o.a,{variant:"determinate",value:75}),Object(c.jsx)(o.a,{variant:"determinate",value:100}),Object(c.jsx)(o.a,{variant:"determinate",value:n})]})}},2146:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    '& > * + *': {\n      marginLeft: theme.spacing(2),\n    },\n  },\n}));\n\nexport default function CircularDeterminate() {\n  const classes = useStyles();\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));\n    }, 800);\n\n    return () => {\n      clearInterval(timer);\n    };\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <CircularProgress variant=\"determinate\" value={25} />\n      <CircularProgress variant=\"determinate\" value={50} />\n      <CircularProgress variant=\"determinate\" value={75} />\n      <CircularProgress variant=\"determinate\" value={100} />\n      <CircularProgress variant=\"determinate\" value={progress} />\n    </div>\n  );\n}\n"},2147:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return j}));var r=t(0),s=t.n(r),a=t(5),o=t(1072),c=t(1279),i=t(149),l=t(1098),u=t(1102),m=t(1233),d=t.n(m),p=t(1350),f=t.n(p),h=t(1);const b=Object(o.a)((e=>({root:{display:"flex",alignItems:"center"},wrapper:{margin:e.spacing(1),position:"relative"},buttonSuccess:{backgroundColor:i.a[500],"&:hover":{backgroundColor:i.a[700]}},fabProgress:{color:i.a[500],position:"absolute",top:-6,left:-6,zIndex:1},buttonProgress:{color:i.a[500],position:"absolute",top:"50%",left:"50%",marginTop:-12,marginLeft:-12}})));function j(){const e=b(),[n,t]=s.a.useState(!1),[r,o]=s.a.useState(!1),i=s.a.useRef(),m=Object(a.a)({[e.buttonSuccess]:r});s.a.useEffect((()=>()=>{clearTimeout(i.current)}),[]);const p=()=>{n||(o(!1),t(!0),i.current=window.setTimeout((()=>{o(!0),t(!1)}),2e3))};return Object(h.jsxs)("div",{className:e.root,children:[Object(h.jsxs)("div",{className:e.wrapper,children:[Object(h.jsx)(u.a,{"aria-label":"save",color:"primary",className:m,onClick:p,children:r?Object(h.jsx)(d.a,{}):Object(h.jsx)(f.a,{})}),n&&Object(h.jsx)(c.a,{size:68,className:e.fabProgress})]}),Object(h.jsxs)("div",{className:e.wrapper,children:[Object(h.jsx)(l.a,{variant:"contained",color:"primary",className:m,disabled:n,onClick:p,children:"Accept terms"}),n&&Object(h.jsx)(c.a,{size:24,className:e.buttonProgress})]})]})}},2148:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { green } from '@material-ui/core/colors';\nimport Button from '@material-ui/core/Button';\nimport Fab from '@material-ui/core/Fab';\nimport CheckIcon from '@material-ui/icons/Check';\nimport SaveIcon from '@material-ui/icons/Save';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  wrapper: {\n    margin: theme.spacing(1),\n    position: 'relative',\n  },\n  buttonSuccess: {\n    backgroundColor: green[500],\n    '&:hover': {\n      backgroundColor: green[700],\n    },\n  },\n  fabProgress: {\n    color: green[500],\n    position: 'absolute',\n    top: -6,\n    left: -6,\n    zIndex: 1,\n  },\n  buttonProgress: {\n    color: green[500],\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: -12,\n    marginLeft: -12,\n  },\n}));\n\nexport default function CircularIntegration() {\n  const classes = useStyles();\n  const [loading, setLoading] = React.useState(false);\n  const [success, setSuccess] = React.useState(false);\n  const timer = React.useRef();\n\n  const buttonClassname = clsx({\n    [classes.buttonSuccess]: success,\n  });\n\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(timer.current);\n    };\n  }, []);\n\n  const handleButtonClick = () => {\n    if (!loading) {\n      setSuccess(false);\n      setLoading(true);\n      timer.current = window.setTimeout(() => {\n        setSuccess(true);\n        setLoading(false);\n      }, 2000);\n    }\n  };\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.wrapper}>\n        <Fab\n          aria-label=\"save\"\n          color=\"primary\"\n          className={buttonClassname}\n          onClick={handleButtonClick}\n        >\n          {success ? <CheckIcon /> : <SaveIcon />}\n        </Fab>\n        {loading && <CircularProgress size={68} className={classes.fabProgress} />}\n      </div>\n      <div className={classes.wrapper}>\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          className={buttonClassname}\n          disabled={loading}\n          onClick={handleButtonClick}\n        >\n          Accept terms\n        </Button>\n        {loading && <CircularProgress size={24} className={classes.buttonProgress} />}\n      </div>\n    </div>\n  );\n}\n"},2149:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));var r=t(0),s=t.n(r),a=t(1279),o=t(194),c=t(1304),i=t(1);function l(e){return Object(i.jsxs)(c.a,{position:"relative",display:"inline-flex",children:[Object(i.jsx)(a.a,{variant:"determinate",...e}),Object(i.jsx)(c.a,{top:0,left:0,bottom:0,right:0,position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",children:Object(i.jsx)(o.a,{variant:"caption",component:"div",color:"textSecondary",children:"".concat(Math.round(e.value),"%")})})]})}function u(){const[e,n]=s.a.useState(10);return s.a.useEffect((()=>{const e=setInterval((()=>{n((e=>e>=100?0:e+10))}),800);return()=>{clearInterval(e)}}),[]),Object(i.jsx)(l,{value:e})}},2150:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport CircularProgress from \'@material-ui/core/CircularProgress\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Box from \'@material-ui/core/Box\';\n\nfunction CircularProgressWithLabel(props) {\n  return (\n    <Box position="relative" display="inline-flex">\n      <CircularProgress variant="determinate" {...props} />\n      <Box\n        top={0}\n        left={0}\n        bottom={0}\n        right={0}\n        position="absolute"\n        display="flex"\n        alignItems="center"\n        justifyContent="center"\n      >\n        <Typography variant="caption" component="div" color="textSecondary">{`${Math.round(\n          props.value,\n        )}%`}</Typography>\n      </Box>\n    </Box>\n  );\n}\n\nCircularProgressWithLabel.propTypes = {\n  /**\n   * The value of the progress indicator for the determinate variant.\n   * Value between 0 and 100.\n   */\n  value: PropTypes.number.isRequired,\n};\n\nexport default function CircularStatic() {\n  const [progress, setProgress] = React.useState(10);\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));\n    }, 800);\n    return () => {\n      clearInterval(timer);\n    };\n  }, []);\n\n  return <CircularProgressWithLabel value={progress} />;\n}\n'},2151:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return c}));t(0);var r=t(1072),s=t(1091),a=t(1);const o=Object(r.a)((e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}})));function c(){const e=o();return Object(a.jsxs)("div",{className:e.root,children:[Object(a.jsx)(s.a,{}),Object(a.jsx)(s.a,{color:"secondary"})]})}},2152:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport LinearProgress from '@material-ui/core/LinearProgress';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    '& > * + *': {\n      marginTop: theme.spacing(2),\n    },\n  },\n}));\n\nexport default function LinearIndeterminate() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <LinearProgress />\n      <LinearProgress color=\"secondary\" />\n    </div>\n  );\n}\n"},2153:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return l}));var r=t(0),s=t.n(r),a=t(1072),o=t(1091),c=t(1);const i=Object(a.a)({root:{width:"100%"}});function l(){const e=i(),[n,t]=s.a.useState(0);return s.a.useEffect((()=>{const e=setInterval((()=>{t((e=>{if(100===e)return 0;const n=10*Math.random();return Math.min(e+n,100)}))}),500);return()=>{clearInterval(e)}}),[]),Object(c.jsx)("div",{className:e.root,children:Object(c.jsx)(o.a,{variant:"determinate",value:n})})}},2154:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport LinearProgress from '@material-ui/core/LinearProgress';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n  },\n});\n\nexport default function LinearDeterminate() {\n  const classes = useStyles();\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setProgress((oldProgress) => {\n        if (oldProgress === 100) {\n          return 0;\n        }\n        const diff = Math.random() * 10;\n        return Math.min(oldProgress + diff, 100);\n      });\n    }, 500);\n\n    return () => {\n      clearInterval(timer);\n    };\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <LinearProgress variant=\"determinate\" value={progress} />\n    </div>\n  );\n}\n"},2155:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return l}));var r=t(0),s=t.n(r),a=t(1072),o=t(1091),c=t(1);const i=Object(a.a)({root:{width:"100%"}});function l(){const e=i(),[n,t]=s.a.useState(0),[r,a]=s.a.useState(10),l=s.a.useRef((()=>{}));return s.a.useEffect((()=>{l.current=()=>{if(n>100)t(0),a(10);else{const e=10*Math.random(),r=10*Math.random();t(n+e),a(n+e+r)}}})),s.a.useEffect((()=>{const e=setInterval((()=>{l.current()}),500);return()=>{clearInterval(e)}}),[]),Object(c.jsx)("div",{className:e.root,children:Object(c.jsx)(o.a,{variant:"buffer",value:n,valueBuffer:r})})}},2156:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport LinearProgress from '@material-ui/core/LinearProgress';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n  },\n});\n\nexport default function LinearBuffer() {\n  const classes = useStyles();\n  const [progress, setProgress] = React.useState(0);\n  const [buffer, setBuffer] = React.useState(10);\n\n  const progressRef = React.useRef(() => {});\n  React.useEffect(() => {\n    progressRef.current = () => {\n      if (progress > 100) {\n        setProgress(0);\n        setBuffer(10);\n      } else {\n        const diff = Math.random() * 10;\n        const diff2 = Math.random() * 10;\n        setProgress(progress + diff);\n        setBuffer(progress + diff + diff2);\n      }\n    };\n  });\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      progressRef.current();\n    }, 500);\n\n    return () => {\n      clearInterval(timer);\n    };\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <LinearProgress variant=\"buffer\" value={progress} valueBuffer={buffer} />\n    </div>\n  );\n}\n"},2157:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return d}));var r=t(0),s=t.n(r),a=t(1072),o=t(1091),c=t(194),i=t(1304),l=t(1);function u(e){return Object(l.jsxs)(i.a,{display:"flex",alignItems:"center",children:[Object(l.jsx)(i.a,{width:"100%",mr:1,children:Object(l.jsx)(o.a,{variant:"determinate",...e})}),Object(l.jsx)(i.a,{minWidth:35,children:Object(l.jsx)(c.a,{variant:"body2",color:"textSecondary",children:"".concat(Math.round(e.value),"%")})})]})}const m=Object(a.a)({root:{width:"100%"}});function d(){const e=m(),[n,t]=s.a.useState(10);return s.a.useEffect((()=>{const e=setInterval((()=>{t((e=>e>=100?10:e+10))}),800);return()=>{clearInterval(e)}}),[]),Object(l.jsx)("div",{className:e.root,children:Object(l.jsx)(u,{value:n})})}},2158: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 LinearProgress from '@material-ui/core/LinearProgress';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\n\nfunction LinearProgressWithLabel(props) {\n  return (\n    <Box display=\"flex\" alignItems=\"center\">\n      <Box width=\"100%\" mr={1}>\n        <LinearProgress variant=\"determinate\" {...props} />\n      </Box>\n      <Box minWidth={35}>\n        <Typography variant=\"body2\" color=\"textSecondary\">{`${Math.round(\n          props.value,\n        )}%`}</Typography>\n      </Box>\n    </Box>\n  );\n}\n\nLinearProgressWithLabel.propTypes = {\n  /**\n   * The value of the progress indicator for the determinate and buffer variants.\n   * Value between 0 and 100.\n   */\n  value: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n  },\n});\n\nexport default function LinearWithValueLabel() {\n  const classes = useStyles();\n  const [progress, setProgress] = React.useState(10);\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress + 10));\n    }, 800);\n    return () => {\n      clearInterval(timer);\n    };\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <LinearProgressWithLabel value={progress} />\n    </div>\n  );\n}\n"},2159:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return d}));t(0);var r=t(11),s=t(1072),a=t(1279),o=t(1091),c=t(1);const i=Object(r.a)((e=>({root:{height:10,borderRadius:5},colorPrimary:{backgroundColor:e.palette.grey["light"===e.palette.type?200:700]},bar:{borderRadius:5,backgroundColor:"#1a90ff"}})))(o.a),l=Object(s.a)((e=>({root:{position:"relative"},bottom:{color:e.palette.grey["light"===e.palette.type?200:700]},top:{color:"#1a90ff",animationDuration:"550ms",position:"absolute",left:0},circle:{strokeLinecap:"round"}})));function u(e){const n=l();return Object(c.jsxs)("div",{className:n.root,children:[Object(c.jsx)(a.a,{variant:"determinate",className:n.bottom,size:40,thickness:4,...e,value:100}),Object(c.jsx)(a.a,{variant:"indeterminate",disableShrink:!0,className:n.top,classes:{circle:n.circle},size:40,thickness:4,...e})]})}const m=Object(s.a)({root:{flexGrow:1}});function d(){const e=m();return Object(c.jsxs)("div",{className:e.root,children:[Object(c.jsx)(u,{}),Object(c.jsx)("br",{}),Object(c.jsx)(i,{variant:"determinate",value:50})]})}},2160:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport LinearProgress from '@material-ui/core/LinearProgress';\n\nconst BorderLinearProgress = withStyles((theme) => ({\n  root: {\n    height: 10,\n    borderRadius: 5,\n  },\n  colorPrimary: {\n    backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],\n  },\n  bar: {\n    borderRadius: 5,\n    backgroundColor: '#1a90ff',\n  },\n}))(LinearProgress);\n\n// Inspired by the former Facebook spinners.\nconst useStylesFacebook = makeStyles((theme) => ({\n  root: {\n    position: 'relative',\n  },\n  bottom: {\n    color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],\n  },\n  top: {\n    color: '#1a90ff',\n    animationDuration: '550ms',\n    position: 'absolute',\n    left: 0,\n  },\n  circle: {\n    strokeLinecap: 'round',\n  },\n}));\n\nfunction FacebookCircularProgress(props) {\n  const classes = useStylesFacebook();\n\n  return (\n    <div className={classes.root}>\n      <CircularProgress\n        variant=\"determinate\"\n        className={classes.bottom}\n        size={40}\n        thickness={4}\n        {...props}\n        value={100}\n      />\n      <CircularProgress\n        variant=\"indeterminate\"\n        disableShrink\n        className={classes.top}\n        classes={{\n          circle: classes.circle,\n        }}\n        size={40}\n        thickness={4}\n        {...props}\n      />\n    </div>\n  );\n}\n\nconst useStyles = makeStyles({\n  root: {\n    flexGrow: 1,\n  },\n});\n\nexport default function CustomizedProgressBars() {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <FacebookCircularProgress />\n      <br />\n      <BorderLinearProgress variant=\"determinate\" value={50} />\n    </div>\n  );\n}\n"},2161:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return d}));var r=t(0),s=t.n(r),a=t(1072),o=t(546),c=t(1098),i=t(1279),l=t(194),u=t(1);const m=Object(a.a)((e=>({root:{display:"flex",flexDirection:"column",alignItems:"center"},button:{margin:e.spacing(2)},placeholder:{height:40}})));function d(){const e=m(),[n,t]=s.a.useState(!1),[r,a]=s.a.useState("idle"),d=s.a.useRef();s.a.useEffect((()=>()=>{clearTimeout(d.current)}),[]);return Object(u.jsxs)("div",{className:e.root,children:[Object(u.jsx)("div",{className:e.placeholder,children:Object(u.jsx)(o.a,{in:n,style:{transitionDelay:n?"800ms":"0ms"},unmountOnExit:!0,children:Object(u.jsx)(i.a,{})})}),Object(u.jsx)(c.a,{onClick:()=>{t((e=>!e))},className:e.button,children:n?"Stop loading":"Loading"}),Object(u.jsx)("div",{className:e.placeholder,children:"success"===r?Object(u.jsx)(l.a,{children:"Success!"}):Object(u.jsx)(o.a,{in:"progress"===r,style:{transitionDelay:"progress"===r?"800ms":"0ms"},unmountOnExit:!0,children:Object(u.jsx)(i.a,{})})}),Object(u.jsx)(c.a,{onClick:()=>{clearTimeout(d.current),"idle"===r?(a("progress"),d.current=window.setTimeout((()=>{a("success")}),2e3)):a("idle")},className:e.button,children:"idle"!==r?"Reset":"Simulate a load"})]})}},2162:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Fade from '@material-ui/core/Fade';\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  button: {\n    margin: theme.spacing(2),\n  },\n  placeholder: {\n    height: 40,\n  },\n}));\n\nexport default function DelayingAppearance() {\n  const classes = useStyles();\n  const [loading, setLoading] = React.useState(false);\n  const [query, setQuery] = React.useState('idle');\n  const timerRef = React.useRef();\n\n  React.useEffect(\n    () => () => {\n      clearTimeout(timerRef.current);\n    },\n    [],\n  );\n\n  const handleClickLoading = () => {\n    setLoading((prevLoading) => !prevLoading);\n  };\n\n  const handleClickQuery = () => {\n    clearTimeout(timerRef.current);\n\n    if (query !== 'idle') {\n      setQuery('idle');\n      return;\n    }\n\n    setQuery('progress');\n    timerRef.current = window.setTimeout(() => {\n      setQuery('success');\n    }, 2000);\n  };\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.placeholder}>\n        <Fade\n          in={loading}\n          style={{\n            transitionDelay: loading ? '800ms' : '0ms',\n          }}\n          unmountOnExit\n        >\n          <CircularProgress />\n        </Fade>\n      </div>\n      <Button onClick={handleClickLoading} className={classes.button}>\n        {loading ? 'Stop loading' : 'Loading'}\n      </Button>\n      <div className={classes.placeholder}>\n        {query === 'success' ? (\n          <Typography>Success!</Typography>\n        ) : (\n          <Fade\n            in={query === 'progress'}\n            style={{\n              transitionDelay: query === 'progress' ? '800ms' : '0ms',\n            }}\n            unmountOnExit\n          >\n            <CircularProgress />\n          </Fade>\n        )}\n      </div>\n      <Button onClick={handleClickQuery} className={classes.button}>\n        {query !== 'idle' ? 'Reset' : 'Simulate a load'}\n      </Button>\n    </div>\n  );\n}\n"},2163:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return a}));t(0);var r=t(1279),s=t(1);function a(){return Object(s.jsx)(r.a,{disableShrink:!0})}},2164:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nexport default function CircularUnderLoad() {\n  return <CircularProgress disableShrink />;\n}\n"},2598:function(e,n,t){"use strict";t.r(n);var r=t(1130),s=t(118),a=t(1098),o=t(1090),c=t(194),i=t(1072),l=t(1);const u=Object(i.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return u(),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)(a.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/progress",target:"_blank",role:"button",children:[Object(l.jsx)(o.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:"Progress"}),Object(l.jsx)(c.a,{className:"description",children:"Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript."}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/progress-indicators.html",children:"Progress indicators"})," ","inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app\u2019s state and indicate available actions, such as whether users can navigate away from the current screen."]}),Object(l.jsxs)("ul",{children:[Object(l.jsxs)("li",{children:[Object(l.jsx)("strong",{children:"Determinate"})," indicators display how long an operation will take."]}),Object(l.jsxs)("li",{children:[Object(l.jsx)("strong",{children:"Indeterminate"})," indicators visualize an unspecified wait time."]})]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity."}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Circular"}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Circular indeterminate"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2143).default,raw:t(2144)})}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Circular determinate"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2145).default,raw:t(2146)})}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Interactive integration"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2147).default,raw:t(2148)})}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Circular with label"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2149).default,raw:t(2150)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Linear"}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Linear indeterminate"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2151).default,raw:t(2152)})}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Linear determinate"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2153).default,raw:t(2154)})}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Linear buffer"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2155).default,raw:t(2156)})}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Linear with label"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2157).default,raw:t(2158)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Non-standard ranges"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"The progress components accept a value in the range 0 - 100. This simplifies things for screen-reader users, where these are the default min / max values. Sometimes, however, you might be working with a data source where the values fall outside this range. Here's how you can easily transform a value in any range to a scale of 0 - 100:"}),Object(l.jsx)(s.a,{component:"pre",className:"language-jsx",children:' \n// MIN = Minimum expected value\n// MAX = Maximium expected value\n// Function to normalise the values (MIN / MAX could be integrated)\nconst normalise = value => (value - MIN) * 100 / (MAX - MIN);\n\n// Example component that utilizes the `normalise` function at the point of render.\nfunction Progress(props) {\n  return (\n    <React.Fragment>\n      <CircularProgress variant="determinate" value={normalise(props.value)} />\n      <LinearProgress variant="determinate" value={normalise(props.value)} />\n    </React.Fragment>\n  )\n}\n'}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized progress"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["Here are some examples of customizing the component. You can learn more about this in the",Object(l.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2159).default,raw:t(2160)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Delaying appearance"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["There are"," ",Object(l.jsx)("a",{href:"https://www.nngroup.com/articles/response-times-3-important-limits/",children:"3 important limits"})," ","to know around response time. The ripple effect of the ",Object(l.jsx)("code",{children:"ButtonBase"})," component ensures that the user feels that the system is reacting instantaneously. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second. After 1.0 second, you can display a loader to keep user's flow of thought uninterrupted."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2161).default,raw:t(2162)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Limitations"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Under heavy load, you might lose the stroke dash animation or see random CircularProgress ring widths. You should run processor intensive operations in a web worker or by batch in order not to block the main rendering thread."}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[" ",'src="/material-ui-static/images/progress/heavy-load.gif" alt="heavy load/>']}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["When it's not possible, you can leverage the ",Object(l.jsx)("code",{children:"disableShrink"})," property to mitigate the issue. See"," ",Object(l.jsx)("a",{href:"https://github.com/mui-org/material-ui/issues/10327",children:"this issue"}),"."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(r.a,{className:"my-24",iframe:!1,component:t(2163).default,raw:t(2164)})})]})}}}]);

Zerion Mini Shell 1.0