@rnga/orders/src/node_modules/ui/View/User/Object/Avatar/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import SingleUploaderInput from 'react-cms-uploads/src/components/uploader/SingleUploader';

import Button from 'material-ui/Button/Button';

import Avatar from 'ui/Avatar';

// import NoPhoto from 'material-ui-icons/PersonOutline';

import Image from "Image";

class FileInput extends Component {


  static propTypes = {
    user: PropTypes.object.isRequired,
  }

  render() {

    const {
      // onChange,
      user,
      editable,
      ...other
    } = this.props;

    const {
      image,
    } = user;

    const onClick = editable ? event => {

      const {
        input,
      } = this.refs;



      input.click();

    } : undefined;

    return <div>

      {/* <Button
        onClick={event => {

          const {
            input,
          } = this.refs;



          input.click();

        }}
        >
        Выбрать файл
      </Button> */}


      {/* <NoPhoto
          onClick={onClick}
          style={{
            fontSize: "7rem",
            color: "#ddd",
            border: "1px solid #ddd",
            borderRadius: "50%",
            cursor: "pointer",
          }} 
        />
          */}

      {/* {image ? <Avatar
        user={user}
        size="big"
        onClick={onClick}
        editable={editable}
      />
        :
        <img
          onClick={onClick}
          id="profile-user-photo"
          src={"/assets/img/rncoins-avatar.jpg"}
          style={{
            cursor: "pointer",
          }} 
        // style={{
        //   maxWidth: 220,
        //   width: "100%",
        //   height: "auto",
        // }}
        />
      } */}

      {image ? <Image
        src={image}
        // size="big"
        onClick={onClick}
        // editable={editable}
        style={{
          cursor: "pointer",
        }}
      />
        :
        <img
          onClick={onClick}
          id="profile-user-photo"
          src={"/assets/img/rncoins-avatar.jpg"}
          style={{
            cursor: "pointer",
            maxWidth: "100%",
          }}
        // style={{
        //   maxWidth: 220,
        //   width: "100%",
        //   height: "auto",
        // }}
        />
      }

      <input
        type="file"
        ref="input"
        style={{
          // display: "none",
        }}
        {...other}
      />

    </div>

  }

}


export default class UserProfileAvatar extends Component {

  static propTypes = {
    user: PropTypes.object.isRequired,
    updateUser: PropTypes.func.isRequired,
    editable: PropTypes.bool.isRequired,
  }


  constructor(props) {

    super(props);

    this.state = {
      // file: null,
    };

  }


  onUpload(r) {


    const {
      singleUpload,
    } = r.data;

    const {
      updateUser,
    } = this.props;


    updateUser(singleUpload)

    // this.setState({
    //   file: singleUpload,
    // });

  }


  render() {

    const {
      file,
    } = this.state;

    const {
      user,
      editable,
      updateUser,
      ...other
    } = this.props;

    if (!user) {
      return null;
    }

    // const {
    //   photo,
    // } = user;


    return (
      <div>

        <SingleUploaderInput
          onUpload={result => this.onUpload(result)}
          FileInput={FileInput}
          editable={editable}
          user={user}
          {...other}
        />

      </div>
    )
  }
}