Init

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

app/components/Avatar/Avatar.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import _ from 'lodash';
+
+const Avatar = (props) => {
+    const avatarClass = classNames(
+        'avatar',
+        `avatar--${ props.size }`,
+        props.className
+    );
+    const addOnsdArr = React.Children.toArray(props.addOns);
+    const badge = _.find(addOnsdArr, (avatarAddOn) =>
+        avatarAddOn.type.addOnId === "avatar--badge");
+    const icons = _.filter(addOnsdArr, (avatarAddOn) =>
+        avatarAddOn.type.addOnId === "avatar--icon");
+    const isNested = _.reduce(addOnsdArr, (acc, avatarAddOn) =>
+        acc || !!avatarAddOn.props.small, false);
+
+    return (
+        <div className={ avatarClass } style={ props.style }>
+            {
+                badge && (
+                    <div className="avatar__badge">
+                        { badge }
+                    </div>
+                )
+            }
+            {
+                !_.isEmpty(icons) && (() => {
+                    switch(icons.length) {
+                        case 1:
+                            return (
+                                <div className="avatar__icon">
+                                    { _.first(icons) }
+                                </div>
+                            )
+                        default:
+                            return (
+                                <div
+                                    className={
+                                        classNames({
+                                            'avatar__icon--nested': isNested,
+                                        }, 'avatar__icon', 'avatar__icon--stack')
+                                    }
+                                >
+                                    { icons }
+                                </div>
+                            )
+                    }
+                })() 
+            }
+            <div className='avatar__content'>
+                { props.children }
+            </div>
+        </div>
+    );
+};
+Avatar.propTypes = {
+    size: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    addOns: PropTypes.node,
+    style: PropTypes.object,
+    className: PropTypes.string
+};
+Avatar.defaultProps = {
+    size: "md",
+    style: {}
+};
+
+export { Avatar };

app/components/Avatar/AvatarAddonBadge.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Badge } from 'reactstrap';
+
+const AvatarAddonBadge = (props) => {
+    const { children, ...badgeProps } = props;
+
+    return (
+        <Badge {...badgeProps}>
+            { children }
+        </Badge>
+    );
+};
+AvatarAddonBadge.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+AvatarAddonBadge.addOnId = "avatar--badge";
+
+export { AvatarAddonBadge };

app/components/Avatar/AvatarAddonIcon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import avatarColors from './../../colors.scss';
+
+const AvatarAddonIcon = (props) => {
+    const addOnClass = classNames({
+        'avatar__icon__inner': props.small
+    }, avatarColors[`fg-color--${ props.color }`]);
+
+    return (
+        <i className={ classNames(addOnClass, props.className) }></i>
+    );
+};
+AvatarAddonIcon.propTypes = {
+    small: PropTypes.bool,
+    className: PropTypes.string,
+    color: PropTypes.string
+};
+AvatarAddonIcon.defaultProps = {
+    color: "success"
+};
+AvatarAddonIcon.addOnId = "avatar--icon";
+
+export { AvatarAddonIcon };

app/components/Avatar/AvatarFont.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { Avatar } from './Avatar';
+
+import avatarColors from './../../colors.scss';
+
+const AvatarFont = (props) => {
+    const {
+        children,
+        bgColor,
+        fgColor,
+        bgColorCustom,
+        fgColorCustom,
+        ...avatarProps
+    } = props;
+    const parentClass = classNames(
+        'avatar-font',
+        `avatar-font--${avatarProps.size}`,
+        bgColor && avatarColors[`bg-color--${ bgColor }`]
+    );
+    const childClass = classNames('avatar-font__text',
+        fgColor && avatarColors[`fg-color--${ fgColor }`]
+    );
+    const parentCustomStyle = bgColorCustom ? {
+        backgroundColor: bgColorCustom
+    } : { };
+    const childCustomStyle = fgColorCustom ? {
+        color: fgColorCustom
+    } : { };
+    const child = (
+        <span>
+            { children }
+        </span>
+    );
+
+    return (
+        <Avatar { ...avatarProps }>
+            <div className={ parentClass } style={parentCustomStyle}>
+            {
+                React.cloneElement(child, {
+                    style: childCustomStyle,
+                    className: classNames(child.props.className, childClass)
+                })
+            }
+            </div>
+        </Avatar>
+    );
+};
+AvatarFont.propTypes = {
+    children: PropTypes.node,
+    bgColor: PropTypes.string,
+    fgColor: PropTypes.string,
+    bgColorCustom: PropTypes.string,
+    fgColorCustom: PropTypes.string,
+    ...Avatar.propTypes
+};
+AvatarFont.defaultProps = {
+    bgColor: '400',
+    fgColor: 'white',
+    size: 'md'
+};
+
+export { AvatarFont };

app/components/Avatar/AvatarImage.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import _ from 'lodash';
+
+import { Avatar } from './Avatar';
+import { AvatarFont } from './AvatarFont';
+
+class AvatarImage extends React.PureComponent {
+    static propTypes = {
+        src: PropTypes.string.isRequired,
+        placeholder: PropTypes.node,
+        alt: PropTypes.string,
+        className: PropTypes.string,
+        ..._.omit(Avatar.propTypes, ['children'])
+    };
+
+    static defaultProps = {
+        placeholder: <i className="fa fa-user fa-fw"></i>
+    }
+
+    constructor(props) {
+        super(props);
+        
+        this.state = {
+            imgLoaded: false
+        };
+    }
+
+    render() {
+        const { src, placeholder, alt, className, ...avatarProps } = this.props;
+        const parentClass = classNames('avatar-image', {
+            'avatar-image--loaded': this.state.imgLoaded
+        }, className);
+
+        return (
+            <div className={ parentClass }>
+                <Avatar className="avatar-image__image" {...avatarProps}>
+                    <img
+                        src={ src }
+                        alt={ alt }
+                        onLoad={ () => { this.setState({ imgLoaded: true }) } }
+                    />
+                </Avatar>
+                {
+                    !this.state.imgLoaded && (
+                        <AvatarFont className="avatar-image__placeholder" {...avatarProps}>
+                            { placeholder }
+                        </AvatarFont>
+                    )
+                }
+            </div>
+        )
+    }
+}
+
+export { AvatarImage };

app/components/Avatar/index.js

@@ -0,0 +1,17 @@
+import { Avatar } from './Avatar';
+import { AvatarFont } from './AvatarFont';
+import { AvatarImage } from './AvatarImage';
+
+import { AvatarAddonBadge } from './AvatarAddonBadge';
+import { AvatarAddonIcon } from './AvatarAddonIcon';
+
+Avatar.Font = AvatarFont;
+Avatar.Image = AvatarImage;
+
+const AvatarAddOn = {
+    Icon: AvatarAddonIcon,
+    Badge: AvatarAddonBadge
+};
+
+export default Avatar;
+export { AvatarAddOn };