Init

Preview: http://dashboards.webkom.co/react/airframe

app/components/EmptyLayout/EmptyLayout.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+    withPageConfig
+} from './../../components/Layout';
+
+class EmptyLayout extends React.Component {
+    static propTypes = {
+        pageConfig: PropTypes.object.isRequired,
+        children: PropTypes.node.isRequired,
+        className: PropTypes.string
+    };
+
+    componentDidMount() {
+        this.props.pageConfig.setElementsVisibility({
+            navbarHidden: true,
+            sidebarHidden: true,
+            footerHidden: true 
+        });
+    }
+
+    componentWillUnmount() {
+        this.props.pageConfig.setElementsVisibility({
+            navbarHidden: false,
+            sidebarHidden: false,
+            footerHidden: false 
+        });
+    }
+
+    render() {
+        const emptyLayoutClass = classNames('fullscreen', this.props.className);
+
+        return (
+            <div className={ emptyLayoutClass }>
+                { this.props.children }
+            </div>
+        );
+    }
+};
+
+const PageConfigEmptyLayout = withPageConfig(EmptyLayout);
+
+export {
+    PageConfigEmptyLayout as EmptyLayout
+};

app/components/EmptyLayout/EmptyLayoutSection.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const EmptyLayoutSection = (props) => {
+    const sectionClass = classNames(props.className, 'fullscreen__section', {
+        'fullscreen__section--center': props.center
+    });
+    const maxWidth = _.isNumber(props.width) ?  `${props.width}px` : props.width;
+    return (
+        <div className={ sectionClass }>
+            {
+                props.center ? 
+                    <div className="fullscrenn__section__child" style={{ maxWidth }}>
+                        { props.children }
+                    </div> : props.children
+            }
+        </div>
+    )
+};
+EmptyLayoutSection.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    center: PropTypes.bool,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+EmptyLayoutSection.defaultProps = {
+    width: '420px'
+}
+
+export { EmptyLayoutSection };

app/components/EmptyLayout/index.js

@@ -0,0 +1,6 @@
+import { EmptyLayout } from './EmptyLayout';
+import { EmptyLayoutSection } from './EmptyLayoutSection';
+
+EmptyLayout.Section = EmptyLayoutSection;
+
+export default EmptyLayout;