@fortawesome/free-brands-svg-icons#faGoogleDrive JavaScript Examples

render() {
    const {
      email, folder, oId, pIndex, updatePath, userId, shareFile, moveWithin,
    } = this.props;

    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    return (
      <span className="file-path">
        <span>
          {' '}
          <FontAwesomeIcon icon={faChevronRight} />
          <ContextMenuTrigger id={folder.id + userId.toString() + oId.toString()}>
            <button type="button" className="path-btn" onClick={() => updatePath(userId, oId, pIndex)}>{folder.name}</button>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={folder.id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(folder.webViewLink, 'blank')}>
              <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
              View on Google Drive
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(folder.id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, folder, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (folder.starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item and all its contents will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </span>
      </span>
    );
  }

// export default function File(props) {
  render() {
    const {
      data, email, moveWithin, oId, openFolder, shareFile, userId,
    } = this.props;

    const {
      id, webViewLink, iconLink, name, mimeType, starred,
    } = data;

    const copyFunc = loadAuthParam(email, this.copy);
    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    if (mimeType !== 'application/vnd.google-apps.folder') {
      // if file
      return (
        <div>
          <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
            <a href={webViewLink} target="blank">
              <div className="file-container">
                <div className="file-image-container">
                  <img className="file-img" src={iconLink} alt="File icon" />
                </div>
                <div className="file-name">
                  {name}
                </div>
              </div>
            </a>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
              <FontAwesomeIcon className="faOpen menu-icon" icon={faFolderOpen} />
              Open
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => copyFunc()}>
              <FontAwesomeIcon className="faCopy menu-icon" icon={faCopy} />
              Make a copy
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </div>
      );
    }
    // if folder
    return (
      <div>
        <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
          <div className="folder-container" onClick={() => openFolder(userId, oId, data)}>
            <div className="folder-content-container">
              <img className="folder-img" src={iconLink} alt="File icon" />
              <p className="folder-name">{name}</p>
            </div>
          </div>
        </ContextMenuTrigger>
        <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
          <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
            <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
            View on Google Drive
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
            <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
            Share
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
            <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
            Move to Root
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => renameFunc(userId, id)}>
            <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
            Rename
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => starFunc()}>
            <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
            { (starred) ? 'Remove From Starred' : 'Add to Starred' }
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will become unrecoverable. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
            <FontAwesomeIcon className="menu-icon" icon={faTrash} />
            Delete
          </MenuItem>
        </ContextMenu>
      </div>
    );
  }

export default function Sidebar({
  authorizeUser, filterFilesInAllAccounts, userList, removeAllAccounts,
  starFilter,
}) {
  const body = document.getElementsByTagName('body')[0];
  const style = getComputedStyle(body);

  const initialState = (style.getPropertyValue('--sidebar-width') === '225px');
  const [expand, setExpand] = useState(initialState);

  const selectedElementList = document.getElementsByClassName('selected');
  const initilaSelected = (selectedElementList.length === 0) ? 'all-files' : selectedElementList[0].id;
  const [selected, setSelected] = useState(initilaSelected);

  const scrollToggle = (ref) => {
    userList.forEach((user) => {
      user.ref.current.style.display = 'none';
    });
    ref.current.style.display = 'block';
    window.scrollTo(0, ref.current.offsetTop - 100);
  };

  const toggleExpand = () => {
    const sidebarItem = document.getElementsByClassName('collapsible');
    Array.from(sidebarItem).forEach((item) => {
      if (expand) {
        item.classList.add('collapse');
        body.style.setProperty('--sidebar-width', '60px');
      } else {
        item.classList.remove('collapse');
        body.style.setProperty('--sidebar-width', '225px');
      }
    });
    setExpand(!expand);
  };

  const handleClick = (target) => {
    setSelected(target);
    let query = 'trashed = false';

    if (target === 'my-drive') {
      query += ' and "me" in owners';
    } else if (target === 'shared') {
      query += ' and not "me" in owners';
    } else if (target === 'starred') {
      starFilter();
      return;
    }
    filterFilesInAllAccounts(query);
  };
  const sidebarClassName = (expand) ? 'collapsible' : 'collapsible collapse';
  return (
    <div className={(expand) ? 'sidebar' : 'sidebar collapse'}>
      <div>
        <button type="button" className="sidebar-add-button" id="signin-btn" onClick={() => authorizeUser()}>
          <FontAwesomeIcon icon={faUserPlus} size="lg" title="Add an Account" />
          {expand ? ' Add Account' : ''}
        </button>
        <button type="button" className="sidebar-remove-button" id="remove-btn" onClick={() => removeAllAccounts()}>
          <FontAwesomeIcon icon={faUserSlash} size="lg" title="Remove All Accounts" />
          {expand ? ' Remove All Accounts' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'all-files') ? 'selected' : ''}`} id="all-files" onClick={() => handleClick('all-files')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faHome} size="lg" title="All Files" />
          {expand ? ' All Files' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'my-drive') ? 'selected' : ''}`} id="my-drive" onClick={() => handleClick('my-drive')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faGoogleDrive} size="lg" title="My Drive Files" />
          {expand ? ' My Drive Files' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'shared') ? 'selected' : ''}`} id="shared" onClick={() => handleClick('shared')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faShareSquare} size="lg" title="Shared" />
          {expand ? ' Shared' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'starred') ? 'selected' : ''}`} id="starred" onClick={() => handleClick('starred')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faStar} size="lg" title="Starred" />
          {expand ? ' Starred' : ''}
        </button>

        <div className="sidebar-user-container">
          { userList.map((user) => {
            const { name, picture } = parseIDToken(user.idToken);
            const { ref } = user;
            return (
              <button type="button" className={`sidebar-user ${sidebarClassName}`} key={user.id} onClick={() => scrollToggle(ref)}>
                <img className="sidebar-picture" src={picture} alt="Account profile" />
                {expand ? ` ${name}` : ''}
              </button>
            );
          })}
        </div>
      </div>
      <div className="collapse-container collapsible">
        <button type="button" className="collapse-button" onClick={() => toggleExpand()}>
          <FontAwesomeIcon icon={expand ? faCaretSquareLeft : faCaretSquareRight} size="lg" title={expand ? 'Collapse' : 'Expand'} />
        </button>
      </div>
    </div>
  );
}