Init

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

app/components/Tools/DefaultOnly.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+
+import { withPageConfig } from './../Layout/withPageConfig';
+
+const DefaultOnly = (props) => (
+    <React.Fragment>
+    {
+        props.pageConfig.sidebarSlim && props.pageConfig.sidebarCollapsed ? (
+            <MediaQuery maxWidth={ 991.8 }>
+                { props.children }
+            </MediaQuery>
+        ) : (
+            props.children
+        )
+    }
+    </React.Fragment>
+);
+DefaultOnly.propTypes = {
+    children: PropTypes.node.isRequired,
+    pageConfig: PropTypes.object
+};
+
+const ExtendedDefaultOnly = withPageConfig(DefaultOnly);
+
+export {
+    ExtendedDefaultOnly as DefaultOnly
+};

app/components/Tools/SlimOnly.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+
+import { withPageConfig } from './../Layout/withPageConfig';
+
+const SlimOnly = (props) => (
+    <MediaQuery minWidth={ 992 }>
+    {
+        props.pageConfig.sidebarSlim && props.pageConfig.sidebarCollapsed && props.children
+    }
+    </MediaQuery>
+);
+SlimOnly.propTypes = {
+    children: PropTypes.node.isRequired,
+    pageConfig: PropTypes.object
+};
+
+const ExtendedSlimOnly = withPageConfig(SlimOnly);
+
+export {
+    ExtendedSlimOnly as SlimOnly
+};

app/components/Tools/SlimProps.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatchMedia from 'react-responsive';
+
+import { withPageConfig } from './../../components/Layout/withPageConfig';
+
+const SlimProps = (props) => {
+    const {
+        pageConfig,
+        children,
+        slimProps
+    } = props;
+
+    return (
+        <React.Fragment>
+            <MatchMedia minWidth={ 992 }>
+                {
+                    /* If slim is enabled extend the children with slimProps */
+                    pageConfig.sidebarSlim && pageConfig.sidebarCollapsed ?
+                        React.Children.map(children, (child) => React.cloneElement(child, slimProps)) :
+                        children
+                }
+            </MatchMedia>
+            <MatchMedia maxWidth={ 991.8 }>
+                { children }
+            </MatchMedia>
+        </React.Fragment>
+    );
+};
+SlimProps.propTypes = {
+    children: PropTypes.node,
+    pageConfig: PropTypes.object,
+    slimProps: PropTypes.object,
+    defaultProps: PropTypes.object
+};
+
+const ExtendedSlimProps
+    = withPageConfig(SlimProps);
+
+export {
+    ExtendedSlimProps as SlimProps
+}

app/components/Tools/index.js

@@ -0,0 +1,11 @@
+import { SlimOnly } from './SlimOnly';
+import { DefaultOnly } from './DefaultOnly';
+import { SlimProps } from './SlimProps';
+
+const Tools = {
+    SlimOnly,
+    DefaultOnly,
+    SlimProps
+};
+
+export default Tools;