Init

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

app/components/HolderProvider/HolderIconProvider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { HolderTextProvider } from './HolderTextProvider';
+
+const HolderIconProvider = (props) => {
+    const { iconChar, children, ...otherProps } = props;
+    return (
+        <HolderTextProvider
+            font='FontAwesome'
+            text={ iconChar }
+            { ...otherProps }
+        >
+            { children }
+        </HolderTextProvider>
+    );
+};
+HolderIconProvider.propTypes = {
+    iconChar: PropTypes.string.isRequired,
+    children: PropTypes.node
+};
+
+export { HolderIconProvider };

app/components/HolderProvider/HolderTextProvider.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import uid from 'uuid/v4';
+import qs from 'query-string';
+
+import colors from './../../colors';
+
+class HolderTextProvider extends React.Component {
+    static propTypes = {
+        bg: PropTypes.string,
+        fg: PropTypes.string,
+        text: PropTypes.string,
+        width: PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.string
+        ]),
+        height: PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.string
+        ]),
+        font: PropTypes.string,
+        align: PropTypes.string,
+        outline: PropTypes.bool,
+        lineWrap: PropTypes.number,
+        children: PropTypes.node
+    }
+    static defaultProps = {
+        width: '100p',
+        height: 220,
+        bg: colors['200'],
+        fg: colors['500']
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.domId = `holderjs--${uid()}`;
+    }
+
+    componentDidMount() {
+        this.initPlaceholder();
+
+        if (typeof window !== 'undefined') {
+            window.onload = this.initPlaceholder.bind(this);
+        }
+    }
+
+    componentDidUpdate() {
+        this.initPlaceholder();
+    }
+
+    initPlaceholder() {
+        if (
+            typeof window !== 'undefined' &&
+            typeof document !== 'undefined' &&
+            document.readyState === 'complete'
+        ) {
+            const Holder = require('holderjs');
+            const domElement = document.getElementById(this.domId);
+
+            if (domElement) {
+                Holder.run({
+                    domain: 'holder.js',
+                    images: domElement,
+                    object: null,
+                    bgnodes: null,
+                    stylenodes: null
+                })
+
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    render() {
+        const onlyChild = React.Children.only(this.props.children);
+
+        const phProps = _.omit(this.props, ['children', 'width', 'height']);
+        const phPropsQuery = qs.stringify(phProps);
+
+        return React.cloneElement(onlyChild, {
+            'id': this.domId,
+            'data-src': `holder.js/${this.props.width}x${this.props.height}?${phPropsQuery}`
+        });
+    }
+}
+
+export { HolderTextProvider };
+

app/components/HolderProvider/index.js

@@ -0,0 +1,10 @@
+import { HolderTextProvider } from './HolderTextProvider';
+import { HolderIconProvider } from './HolderIconProvider';
+
+const HolderProvider = {
+    Text: HolderTextProvider,
+    Icon: HolderIconProvider
+};
+
+export default HolderProvider;
+