office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.91 kB
JavaScript
define([], function() { return "import * as React from 'react'; // tslint:disable-line:no-unused-variable\r\nimport './Layer.Example.scss';\r\nimport {\r\n BaseComponent,\r\n Checkbox,\r\n Layer\r\n} from '../../../../index';\r\n\r\nexport class LayerContentExample extends BaseComponent<any, any> {\r\n public static contextTypes = {\r\n message: React.PropTypes.string\r\n };\r\n\r\n public context: {\r\n message: string;\r\n };\r\n\r\n constructor() {\r\n super();\r\n this.state = {\r\n time: new Date().toLocaleTimeString()\r\n };\r\n }\r\n\r\n public componentDidMount() {\r\n this._async.setInterval(() => this.setState({ time: new Date().toLocaleTimeString() }), 1000);\r\n }\r\n\r\n public render() {\r\n return (\r\n <div className='LayerExample-content ms-u-scaleUpIn100'>\r\n <div className='LayerExample-textContent'>{ this.context.message }</div>\r\n <div>{ this.state.time }</div>\r\n </div>\r\n\r\n );\r\n }\r\n}\r\nexport class LayerBasicExample extends BaseComponent<any, any> {\r\n\r\n public static childContextTypes = {\r\n message: React.PropTypes.string\r\n };\r\n\r\n constructor() {\r\n super();\r\n this.state = {\r\n showLayer: false\r\n };\r\n }\r\n\r\n public getChildContext() {\r\n return {\r\n 'message': 'Hello world.'\r\n };\r\n }\r\n\r\n public render() {\r\n let { showLayer } = this.state;\r\n\r\n return (\r\n <div>\r\n\r\n <Checkbox\r\n label='Wrap the content box belowed in a Layer'\r\n checked={ showLayer }\r\n onChange={ (ev, checked) => this.setState({ showLayer: checked }) } />\r\n\r\n { showLayer ? (\r\n <Layer>\r\n <LayerContentExample />\r\n </Layer>\r\n ) : (\r\n <LayerContentExample />\r\n ) }\r\n\r\n </div>\r\n );\r\n }\r\n}\r\n"; });