@nomios/web-uikit/dist/components/avatar-picker/AvatarPicker.js

Nomios' living web UIKit

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component, createRef, cloneElement } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Avatar from '../avatar';
import { CameraIcon, PlusIcon, UserIcon } from '../icon';
import styles from './AvatarPicker.css';

class AvatarPicker extends Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      imageUrl: undefined
    });

    _defineProperty(this, "inputRef", createRef());

    _defineProperty(this, "handleAvatarLoaderClick", () => {
      this.inputRef.current.click();
    });

    _defineProperty(this, "handleOnChange", event => {
      const uploadedImage = Array.from(event.target.files)[0];

      if (uploadedImage) {
        this.setState({
          imageUrl: URL.createObjectURL(uploadedImage)
        }, () => {
          this.props.onChange(uploadedImage);
        });
      }
    });
  }

  render() {
    const {
      label,
      className,
      onChange,
      labelAlignment,
      ...rest
    } = this.props;
    return React.createElement("div", {
      className: classNames(styles.container, styles[labelAlignment], className),
      onClick: this.handleAvatarLoaderClick
    }, this.renderInput(), React.createElement("div", {
      className: styles.circleWrapper
    }, this.renderPlusIcon(), this.renderAvatar(rest)), React.createElement("div", {
      className: styles.label
    }, label));
  }

  renderInput() {
    return React.createElement("input", {
      ref: this.inputRef,
      className: styles.hidden,
      type: "file",
      accept: "image/*",
      onChange: this.handleOnChange
    });
  }

  renderPlusIcon() {
    if (!this.props.image && !this.state.imageUrl) {
      return React.createElement("div", {
        className: styles.smallCircle
      }, React.createElement(PlusIcon, {
        className: styles.icon
      }));
    }

    return React.createElement("div", {
      className: styles.imageOverlay
    }, React.createElement(CameraIcon, {
      className: styles.icon
    }));
  }

  renderAvatar(props) {
    const {
      image,
      icon,
      ...rest
    } = props;
    const imageUrl_ = this.state.imageUrl ? this.state.imageUrl : image;

    if (!this.props.image && !this.state.imageUrl && !this.props.name) {
      return React.createElement("div", {
        className: styles.avatarPlaceholder
      }, cloneElement(icon, {
        className: classNames(icon.props.className, styles.icon)
      }));
    }

    return React.createElement(Avatar, Object.assign({}, rest, {
      image: imageUrl_,
      className: styles.circle
    }));
  }

}

AvatarPicker.propTypes = {
  labelAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  onChange: PropTypes.func.isRequired,
  className: PropTypes.string,
  image: PropTypes.string,
  label: PropTypes.string,
  icon: PropTypes.element,
  name: PropTypes.string
};
AvatarPicker.defaultProps = {
  labelAlignment: 'bottom',
  icon: React.createElement(UserIcon, null)
};
export default AvatarPicker;