office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.81 kB
JavaScript
define([], function() { return "import * as React from 'react';\nimport {\n ProgressIndicator\n} from '../../../../index';\nimport { Async } from '../../../../utilities/Async/Async';\n\nexport interface IProgressIndicatorBasicExampleState {\n percentComplete: number;\n}\n\nconst INTERVAL_DELAY: number = 100;\nconst INTERVAL_INCREMENT: number = .01;\nconst RESTART_WAIT_TIME: number = 2000;\n\nexport class ProgressIndicatorBasicExample extends React.Component<any, IProgressIndicatorBasicExampleState> {\n\n private _interval: number;\n private _async: Async;\n\n constructor() {\n super();\n\n this._async = new Async(this);\n\n this.state = {\n percentComplete: 0\n };\n this._startProgressDemo = this._startProgressDemo.bind(this);\n }\n\n public componentDidMount() {\n this._startProgressDemo();\n }\n\n public componentWillUnmount() {\n this._async.dispose();\n }\n\n public render() {\n let { percentComplete } = this.state;\n\n return (\n <ProgressIndicator\n label='Example title'\n description='Example description'\n percentComplete={ percentComplete } />\n );\n }\n\n private _startProgressDemo() {\n // reset the demo\n this.setState({\n percentComplete: 0\n });\n\n // update progress\n this._interval = this._async.setInterval(() => {\n let percentComplete = this.state.percentComplete + INTERVAL_INCREMENT;\n\n // once complete, set the demo to start again\n if (percentComplete >= 1.0) {\n percentComplete = 1.0;\n this._async.clearInterval(this._interval);\n this._async.setTimeout(this._startProgressDemo, RESTART_WAIT_TIME);\n }\n this.setState({\n percentComplete: percentComplete\n });\n }, INTERVAL_DELAY);\n }\n}\n"; });