react-icons/fa#FaFolderOpen JavaScript Examples

export function FileItem({
  data,
  sharedFs,
  setCurrentDirectory,
  ipfs,
  isParent,
  snapshot,
  forceIcon,
  onIconClicked,
  readOnly,
}) {
  const {path, type} = data;
  const pathSplit = path.split('/');
  const name = pathSplit[pathSplit.length - 1];
  const mtime = sharedFs && sharedFs.current.fs.read(path)?.mtime;
  const [hoverRef, isHovered] = useHover();
  const [CID, setCID] = useState(null);
  const [fileInfo, setFileInfo] = useState(null);
  const [editMode, setEditMode] = useState(false);
  const [mobileActionsVisible, setMobileActionsVisible] = useState(false);
  const [fileBlob, setFileBlob] = useState(null);
  const [doubleClickRef] = useDoubleClick(() => setEditMode(true));
  const parentPath = pathSplit.slice(0, pathSplit.length - 1).join('/');
  const fileExtension = filenameExt(name);
  const isSmallScreen = useIsSmallScreen();
  const contextID = `menu-id`;
  const contextNoShareID = `menu-id-no-share`;
  const exists = sharedFs && sharedFs.current.fs.exists(path);
  const isTouchDevice = !hasMouse;
  const isUnsharable = sharedFs?.current.encrypted && type === 'dir';
  const hasWrite = sharedFs && doesUserHaveWriteInInstance(sharedFs.current);

  const styles = {
    paddingContainer: {
      paddingTop: 3,
      paddingBottom: 3,
    },
    outer: {
      borderRadius: 4,
      color: primary5,
      fontSize: 14,
      padding: 7,
      marginBottom: 8,
      fontFamily: 'Open Sans',
      userSelect: 'none',
    },
    container: {
      display: 'flex',
      flexDirection: 'row',
      flexWrap: isSmallScreen ? 'wrap' : 'nowrap',
      justifyContent: 'space-between',
      cursor: 'pointer',
    },
    flexItem: {
      width: '100%',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      flexGrow: 2,
      marginBottom: isSmallScreen ? 10 : 0,
    },
    icon: {
      marginRight: 4,
      width: 30,
      flexShrink: 0,
    },
    tools: {
      display: isTouchDevice ? 'none' : 'flex',
      justifyContent: 'flex-end',
      width: '100%',
      opacity: (isHovered || fileBlob) && !isParent ? 1 : 0,
      pointerEvents: (isHovered || fileBlob) && !isParent ? null : 'none',
      fontSize: 14,
      marginLeft: 0,
    },
    filename: {
      textAlign: 'left',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
      overflow: 'hidden',
    },
  };

  const dispatch = useDispatch();

  const InputComponent = useTextInput(
    editMode,
    (editNameValue) => rename(editNameValue),
    () => setEditMode(false),
    name,
    {
      placeholder: '',
    },
  );

  const iconComponent = forceIcon ? forceIcon : getIconForPath(type, name);

  const getCID = async () => {
    let tmpCID;

    if (data.cid) {
      tmpCID = data.cid;
    } else if (exists) {
      tmpCID = await sharedFs.current.read(path);
    }

    const tmpFileInfo = await getFileInfoFromCID(tmpCID, ipfs);

    setFileInfo(tmpFileInfo);
    setCID(tmpCID);
    return tmpCID;
  };

  useEffect(() => {
    if (exists && type !== 'dir') {
      getCID();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [path]);

  const IconComponent = iconComponent;

  const rename = async (editNameValue) => {
    try {
      dispatch(setStatus({message: 'Renaming file'}));
      await sharedFs.current.move(path, parentPath, editNameValue);
      dispatch(setStatus({}));
    } catch (e) {
      console.log('Error moving!', e);
    }
  };

  async function getBlob() {
    let blob;

    if (!fileBlob) {
      dispatch(setStatus({message: 'Fetching download'}));
      const handleUpdate = (currentIndex, totalCount) => {
        dispatch(
          setStatus({
            message: `[${getPercent(currentIndex, totalCount)}%] Downloading`,
          }),
        );
      };
      blob = await getBlobFromPath(sharedFs.current, path, handleUpdate);
      dispatch(setStatus({}));
    } else {
      blob = fileBlob;
    }
    return blob;
  }

  const saveAsFile = (blob, name) => {
    if (type === 'dir') {
      name = `${name}.zip`;
    }

    saveAs(blob, name);
  };

  const handleShare = () => {
    setMobileActionsVisible(false);

    dispatch(
      setShareData({
        name,
        CID,
        path,
        pathType: type,
      }),
    );
  };

  const handleDownload = async () => {
    setMobileActionsVisible(false);

    const blob = await getBlob();
    saveAsFile(blob, name);
  };

  const handleEdit = async () => {
    setMobileActionsVisible(false);

    setEditMode(true);
  };

  const handleDelete = async () => {
    setMobileActionsVisible(false);

    dispatch(
      setStatus({
        message: `Deleting ${type === 'dir' ? 'folder' : 'file'}`,
      }),
    );
    await sharedFs.current.remove(path);
    dispatch(setStatus({}));
  };

  const fetchPreview = async () => {
    // Only fetch for audio on click now
    if (!fileBlob && isFileExtensionAudio(fileExtension)) {
      dispatch(setStatus({message: 'Fetching preview'}));
      const blob = await getBlob();
      dispatch(setStatus({}));
      setFileBlob(blob);
    } else {
      setFileBlob(null);
    }
  };

  const handleClick = async (event) => {
    event.stopPropagation();

    if (isTouchDevice && type !== 'dir') {
      setMobileActionsVisible(true);

      return;
    }

    if (onIconClicked) {
      onIconClicked();
      return;
    }

    if (editMode) {
      return;
    }

    if (type === 'dir') {
      setCurrentDirectory(path);
    } else {
      await fetchPreview();
    }
  };

  let mobileActionItems = [
    {
      title: 'Download',
      onClick: handleDownload,
      iconComponent: FiDownload,
    },
  ];

  if (hasWrite) {
    mobileActionItems = mobileActionItems.concat([
      {
        title: 'Rename',
        onClick: handleEdit,
        iconComponent: FiEdit,
      },
      {
        title: 'Delete',
        onClick: handleDelete,
        iconComponent: FiTrash,
        forceColor: lightErrorColor,
      },
    ]);
  }

  if (!isUnsharable) {
    mobileActionItems.unshift({
      title: 'Share',
      onClick: handleShare,
      iconComponent: FiShare2,
    });
  }

  if (type === 'dir') {
    mobileActionItems.unshift({
      title: 'Open folder',
      onClick: () => setCurrentDirectory(path),
      iconComponent: FaFolderOpen,
    });
  } else {
    if ((!fileBlob && isFileExtensionAudio(fileExtension)) || onIconClicked) {
      mobileActionItems.unshift({
        title: 'Open preview',
        onClick: () => {
          setMobileActionsVisible(false);

          if (onIconClicked) {
            onIconClicked();
          } else {
            fetchPreview();
          }
        },
        iconComponent: iconComponent,
      });
    }
  }

  const getContent = () => {
    if (!snapshot) {
      snapshot = {};
    }

    return (
      <div
        ref={hoverRef}
        style={styles.paddingContainer}
        className={`fileItem`}>
        <MobileActionsDialog
          isVisible={mobileActionsVisible}
          name={name}
          fileIcon={iconComponent}
          onClose={() => setMobileActionsVisible(false)}
          items={mobileActionItems}
        />
        <div
          onContextMenu={(event) => {
            event.preventDefault();

            contextMenu.show({
              event,
              id: isUnsharable ? contextNoShareID : contextID,
              props: {
                handleDelete,
                handleDownload,
                handleShare,
                handleEdit,
              },
            });
          }}
          style={{
            ...styles.outer,
            backgroundColor:
              (isHovered ||
                fileBlob ||
                snapshot.isDragging ||
                (snapshot.combineTargetFor && type === 'dir')) &&
              !isTouchDevice
                ? primary15
                : '#FFF',
          }}>
          <div style={styles.container} onClick={handleClick}>
            <div
              style={{
                ...styles.flexItem,
                maxWidth: isSmallScreen ? null : '25%',
              }}>
              <IconComponent color={primary45} size={16} style={styles.icon} />
              {editMode ? (
                <>{InputComponent}</>
              ) : isParent ? (
                '. . /'
              ) : (
                <span ref={doubleClickRef} style={styles.filename}>
                  {name}
                </span>
              )}
            </div>
            <div style={{...styles.flexItem, justifyContent: 'flex-end'}}>
              {type !== 'dir' && fileInfo ? humanFileSize(fileInfo.size) : null}
            </div>
            <div style={{...styles.flexItem, justifyContent: 'flex-end'}}>
              {type !== 'dir' && (mtime || fileInfo?.mtime)
                ? getFileTime(mtime?.secs || fileInfo.mtime.secs)
                : null}
            </div>
            <div style={styles.tools}>
              <div>
                <ToolItem
                  id={`Share-${type}`}
                  iconComponent={FiShare2}
                  changeColor={primary}
                  tooltip={
                    isUnsharable ? 'No encrypted folder sharing yet!' : 'Share'
                  }
                  onClick={handleShare}
                  disabled={isUnsharable}
                />

                <ToolItem
                  id={`Download-${type}`}
                  iconComponent={FiDownload}
                  changeColor={primary}
                  tooltip={'Download'}
                  onClick={handleDownload}
                />

                {!readOnly && hasWrite ? (
                  <>
                    <ToolItem
                      id={`Rename-${type}`}
                      iconComponent={FiEdit}
                      changeColor={primary}
                      tooltip={'Rename'}
                      onClick={handleEdit}
                    />
                    <ToolItem
                      id={`Delete-${type}`}
                      iconComponent={FiTrash}
                      tooltip={'Delete'}
                      onClick={handleDelete}
                    />
                  </>
                ) : null}
              </div>
            </div>
          </div>
          {fileBlob ? (
            <div style={styles.preview}>
              <FilePreview blob={fileBlob} filename={name} />
            </div>
          ) : null}
        </div>
      </div>
    );
  };

  return <>{getContent()}</>;
}

export function LeftPanel({
  setCurrentRightPanel,
  currentRightPanel,
  isDownload,
}) {
  const isSmallScreen = useIsSmallScreen();
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  const styles = {
    container: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      backgroundColor: primary45,
      color: '#FFF',
      padding: `${isSmallScreen ? 8 : 20}px 10px 0px 10px`,
      minWidth: 200,
      fontFamily: 'Open Sans',
      paddingBottom: 0,
    },
    logo: {
      display: 'inline-block',
      fontFamily: 'MuseoModerno',
      color: '#FFF',
      fontSize: 24,
      fontWeight: 400,
      marginBottom: isSmallScreen && !isMobileOpen ? 8 : 20,
      textAlign: 'center',
      justifyContent: 'center',
      alignItems: 'center',
      userSelect: 'none',
      cursor: 'pointer',
      lineHeight: '24px',
    },
    settingsBlock: {
      bottom: 0,
      width: '100%',
    },
    mobilePadding: {
      paddingBottom: 6,
    },
    menuIcon: {
      position: 'absolute',
      top: isSmallScreen ? 16 : 25,
      left: 14,
    },
    logoContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    footer: {
      textAlign: 'center',
      marginBottom: 8,
      fontSize: 13,
      lineHeight: '14px',
      fontFamily: 'Open Sans',
    },
    iconGithub: {
      cursor: 'pointer',
    },
    githubTxt: {
      fontSize: 10,
      userSelect: 'none',
    },
    icon: {
      position: 'relative',
      top: 6,
      width: 30,
    },
    logoTitle: {
      display: 'inline-flex',
    },
  };

  let iconComponent = FaBars;
  if (isMobileOpen) {
    iconComponent = FaTimes;
  }

  const IconComponent = iconComponent;

  return (
    <div style={styles.container}>
      {isSmallScreen ? (
        <IconComponent
          color={'#FFF'}
          size={24}
          style={styles.menuIcon}
          onClick={() => {
            setIsMobileOpen(!isMobileOpen);
          }}
        />
      ) : null}
      <div>
        <div style={styles.logoContainer}>
          <div
            style={styles.logo}
            onClick={() => {
              document.location = `${
                window.location.origin + window.location.pathname
              }`;
            }}>
            <img src={logo} style={styles.icon} />
            <div style={styles.logoTitle}>Sailplane</div>
          </div>
        </div>
        {(isMobileOpen || !isSmallScreen) && !isDownload ? (
          <>
            <PanelItem
              title={'Files'}
              iconComponent={FaFolderOpen}
              selected={currentRightPanel === 'files'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('files');
              }}
            />
            <PanelItem
              title={'Drives'}
              iconComponent={FaServer}
              selected={currentRightPanel === 'instances'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('instances');
              }}
            />
            <PanelItem
              title={'Contacts'}
              iconComponent={FaAddressBook}
              selected={currentRightPanel === 'contacts'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('contacts');
              }}
            />

            {/*<div style={styles.settingsBlock}>*/}
            {/*  <PanelItem*/}
            {/*    title={'Settings'}*/}
            {/*    selected={currentRightPanel === 'settings'}*/}
            {/*    onClick={() => setCurrentRightPanel('settings')}*/}
            {/*    iconComponent={FaCog}*/}
            {/*  />*/}
            {/*</div>*/}
          </>
        ) : (
          <div style={styles.mobilePadding} />
        )}
        {isDownload ? (
          <>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Home'}
                onClick={() =>
                  (document.location =
                    'https://cypsela.github.io/sailplane-web/#/')
                }
                iconComponent={FaHome}
              />
            </div>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Downloads'}
                onClick={() => {}}
                iconComponent={FaDownload}
                selected={true}
              />
            </div>
          </>
        ) : null}
      </div>
      {!isSmallScreen ? (
        <div style={styles.footer}>
          <a
            href={'https://github.com/cypsela/sailplane-web'}
            target={'_blank'}
            rel={'noopener'}>
            <FaGithub color={primary15} size={20} style={styles.iconGithub} />
          </a>
          <div style={styles.githubTxt}>Source</div>
        </div>
      ) : null}
    </div>
  );
}

function Navbar() {
    const { theme, setHandleDrawer } = useContext(ThemeContext);

    const [open, setOpen] = useState(false);

    const handleDrawerOpen = () => {
        setOpen(true);
        setHandleDrawer();
    };

    const handleDrawerClose = () => {
        setOpen(false);
        setHandleDrawer();
    };

    const useStyles = makeStyles((t) => ({
        navMenu: {
            fontSize: '2.5rem',
            color: theme.tertiary,
            cursor: 'pointer',
            transform: 'translateY(-10px)',
            transition: 'color 0.3s',
            '&:hover': {
                color: theme.primary,
            },
            [t.breakpoints.down('sm')]: {
                fontSize: '2.5rem',
            },
            [t.breakpoints.down('xs')]: {
                fontSize: '2rem',
            },
        },
        MuiDrawer: {
            padding: '0em 1.8em',
            width: '14em',
            fontFamily: ' var(--primaryFont)',
            fontStyle: ' normal',
            fontWeight: ' normal',
            fontSize: ' 24px',
            background: theme.secondary,
            overflow: 'hidden',
            borderTopRightRadius: '40px',
            borderBottomRightRadius: '40px',
            [t.breakpoints.down('sm')]: {
                width: '12em',
            },
        },
        closebtnIcon: {
            fontSize: '2rem',
            fontWeight: 'bold',
            cursor: 'pointer',
            color: theme.primary,
            position: 'absolute',
            right: 40,
            top: 40,
            transition: 'color 0.2s',
            '&:hover': {
                color: theme.tertiary,
            },
            [t.breakpoints.down('sm')]: {
                right: 20,
                top: 20,
            },
        },
        drawerItem: {
            margin: '2rem auto',
            borderRadius: '78.8418px',
            background: theme.secondary,
            color: theme.primary,
            width: '85%',
            height: '60px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-evenly',
            padding: '0 30px',
            boxSizing: 'border-box',
            border: '2px solid',
            borderColor: theme.primary,
            transition: 'background-color 0.2s, color 0.2s',
            '&:hover': {
                background: theme.primary,
                color: theme.secondary,
            },
            [t.breakpoints.down('sm')]: {
                width: '100%',
                padding: '0 25px',
                height: '55px',
            },
        },
        drawerLinks: {
            fontFamily: 'var(--primaryFont)',
            width: '50%',
            fontSize: '1.3rem',
            fontWeight: 600,
            [t.breakpoints.down('sm')]: {
                fontSize: '1.125rem',
            },
        },
        drawerIcon: {
            fontSize: '1.6rem',
            [t.breakpoints.down('sm')]: {
                fontSize: '1.385rem',
            },
        },
    }));

    const classes = useStyles();

    const shortname = (name) => {
        if (name.length > 12) {
            return name.split(' ')[0];
        } else {
            return name;
        }
    };

    return (
        <div className='navbar'>
            <div className='navbar--container'>
                <h1 style={{ color: theme.secondary }}>
                    {shortname(headerData.name)}
                </h1>

                <IoMenuSharp
                    className={classes.navMenu}
                    onClick={handleDrawerOpen}
                    aria-label='Menu'
                />
            </div>
            <Drawer
                variant='temporary'
                onClose={(event, reason) => {
                    if (reason !== 'backdropClick') {
                        handleDrawerClose();
                    } else if (reason !== 'escapeKeyDown') {
                        handleDrawerClose();
                    }
                }}
                anchor='left'
                open={open}
                classes={{ paper: classes.MuiDrawer }}
                className='drawer'
                disableScrollLock={true}
            >
                <div className='div-closebtn'>
                    <CloseIcon
                        onClick={handleDrawerClose}
                        onKeyDown={(e) => {
                            if (e.key === ' ' || e.key === 'Enter') {
                                e.preventDefault();
                                handleDrawerClose();
                            }
                        }}
                        className={classes.closebtnIcon}
                        role='button'
                        tabIndex='0'
                        aria-label='Close'
                    />
                </div>
                <br />

                <div onClick={handleDrawerClose}>
                    <div className='navLink--container'>
                        <Fade left>
                            <NavLink
                                to='/'
                                smooth={true}
                                spy='true'
                                duration={2000}
                            >
                                <div className={classes.drawerItem}>
                                    <IoHomeSharp
                                        className={classes.drawerIcon}
                                    />
                                    <span className={classes.drawerLinks}>
                                        Home
                                    </span>
                                </div>
                            </NavLink>
                        </Fade>

                        <Fade left>
                            <NavLink
                                to='/#about'
                                smooth={true}
                                spy='true'
                                duration={2000}
                            >
                                <div className={classes.drawerItem}>
                                    <FaUser className={classes.drawerIcon} />
                                    <span className={classes.drawerLinks}>
                                        About
                                    </span>
                                </div>
                            </NavLink>
                        </Fade>

                        <Fade left>
                            <NavLink
                                to='/#resume'
                                smooth={true}
                                spy='true'
                                duration={2000}
                            >
                                <div className={classes.drawerItem}>
                                    <HiDocumentText
                                        className={classes.drawerIcon}
                                    />
                                    <span className={classes.drawerLinks}>
                                        Resume
                                    </span>
                                </div>
                            </NavLink>
                        </Fade>

                        <Fade left>
                            <NavLink
                                to='/#services'
                                smooth={true}
                                spy='true'
                                duration={2000}
                            >
                                <div className={classes.drawerItem}>
                                    <BsFillGearFill
                                        className={classes.drawerIcon}
                                    />
                                    <span className={classes.drawerLinks}>
                                        Services
                                    </span>
                                </div>
                            </NavLink>
                        </Fade>

                        <Fade left>
                            <NavLink
                                to='/#blog'
                                smooth={true}
                                spy='true'
                                duration={2000}
                            >
                                <div className={classes.drawerItem}>
                                    <FaFolderOpen
                                        className={classes.drawerIcon}
                                    />
                                    <span className={classes.drawerLinks}>
                                        Blog
                                    </span>
                                </div>
                            </NavLink>
                        </Fade>

                        <Fade left>
                            <NavLink
                                to='/#contacts'
                                smooth={true}
                                spy='true'
                                duration={2000}
                            >
                                <div className={classes.drawerItem}>
                                    <MdPhone className={classes.drawerIcon} />
                                    <span className={classes.drawerLinks}>
                                        Contact
                                    </span>
                                </div>
                            </NavLink>
                        </Fade>
                    </div>
                </div>
            </Drawer>
        </div>
    );
}

render() {
    return (
      <div
        style={styles.tabCreatorContainer}
        onClick={() => {
          this.setState({ showPlayContextMenu: false });
        }}
      >
        {this.state.exporting && (
          <ScreenWideModal>
            <div style={styles.exportModal}>
              <div>Exporting Song...</div>
              <div style={{ margin: 10 }}>
                <ClipLoader />
              </div>
              <div>Don't resize the window for best results.</div>
            </div>
          </ScreenWideModal>
        )}
        {this.state.showNewSongWindow && (
          <NewSongWindow
            hide={() => {
              this.setState({ showNewSongWindow: false });
            }}
            onCreate={() => {
              //ask if they want to save this song

              this.setState({ showNewSongWindow: false });

              let kalimba = document.getElementById("kalimbaContainer");
              kalimba.scrollTop = kalimba.scrollHeight;
            }}
          />
        )}
        {/* TOOLBAR */}
        <div style={styles.controlPanelContainer}>
          {/* SONG CONTROL */}
          <div style={styles.songControlContainer}>
            {/* HOME BUTTON */}
            <ToolBarButton
              onClick={async () => {
                this.stopSong();
                await delay(1);
                this.props.history.push("/");
              }}
              name="Home"
            >
              <FaHome size={30} />
            </ToolBarButton>
            {/* NEW SONG */}
            <ToolBarButton
              onClick={() => {
                this.setState({ showNewSongWindow: true });
              }}
              name="New"
            >
              <FaFile size={25} />
            </ToolBarButton>
            {/* OPEN */}
            <ToolBarButton
              onClick={() => {
                this.openSong();
              }}
              name="Open"
            >
              <FaFolderOpen size={30} />
            </ToolBarButton>
            {/* SAVE */}
            <ToolBarButton
              onClick={() => {
                this.saveSong();
              }}
              name="Save"
            >
              <FaSave size={30} />
            </ToolBarButton>
            {/* EXPORT */}
            <ToolBarButton
              onClick={() => {
                this.exportToPDF();
              }}
              disabled={this.state.exporting || this.state.playing}
              selected={this.state.exporting}
              name="Export"
            >
              {this.state.exporting ? (
                <ClipLoader size={30} color="blue" />
              ) : (
                <FaFileExport size={30} />
              )}
            </ToolBarButton>
            {/* PLAY BUTTON */}
            <div style={{ position: "relative" }}>
              <ToolBarButton
                selected={this.state.playing}
                onClick={() => {
                  this.state.playing ? this.stopSong() : this.playSong(false);
                }}
                onContextMenu={() => {
                  this.setState({ showPlayContextMenu: true });
                }}
                name={this.state.playing ? "Stop" : "Play"}
              >
                {this.state.playing ? (
                  <FaStop color="red" size={30} />
                ) : (
                  <FaPlay color="blue" size={30} />
                )}
              </ToolBarButton>
              {this.state.showPlayContextMenu && (
                <PlayContextMenu
                  play={(fromMiddle) => {
                    this.state.playing
                      ? this.stopSong()
                      : this.playSong(fromMiddle);
                    this.setState({ showPlayContextMenu: false });
                  }}
                  isPlaying={this.state.playing}
                  stop={() => {
                    this.stopSong();
                  }}
                />
              )}
            </div>
          </div>
          {/* TITLE INPUT */}
          <div style={styles.titleContainer} id="titleandtempo">
            {!this.state.editTitle ? (
              <div
                onClick={() => {
                  this.setState({ editTitle: true });
                }}
                style={styles.songTitle}
              >
                {this.props.songTitle}
              </div>
            ) : (
              <input
                placeholder={this.props.songTitle}
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTitle: false });
                  }
                }}
                style={styles.titleInput}
                onChange={(e) => {
                  this.props.changeTitle(e.target.value);
                }}
              />
            )}
            {!this.state.editTempo ? (
              <div
                onClick={() => {
                  this.setState({ editTempo: true });
                }}
                style={{ margin: 5 }}
              >
                {this.props.tempo}
              </div>
            ) : (
              <input
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTempo: false });
                    this.props.changeTempo(this.state.enteredTempo);
                  }
                }}
                placeholder={this.props.tempo}
                style={styles.tempoInput}
                type="number"
                min="0"
                max="500"
                onChange={(e) => {
                  // this.props.changeTempo(e.target.value);
                  this.setState({ enteredTempo: e.target.value });
                }}
              />
            )}
          </div>
          {/* NOTE TOOLBAR */}
          <div style={styles.noteToolbarContainer}>
            {/* SELECTION MODE BUTTON */}
            <ToolBarButton
              selected={this.props.selectionMode}
              onClick={() => {
                this.props.toggleSelectionMode();
              }}
              name="Selection Mode"
            >
              <FaHandPointer />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            {/* EXTEND SONG BUTTON */}
            <ToolBarButton
              onClick={() => {
                this.props.extendSong();
              }}
              name="Extend Song"
            >
              <FaPlus />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            <NoteButton value={1} />
            <NoteButton value={2} />
            <NoteButton value={4} />
            <NoteButton value={8} />
            <NoteButton value={16} />
            <div style={styles.noteToolbarDivider} />
            <AccidentalButton value="♯" />
            <AccidentalButton value="♭" />
            <AccidentalButton value="♮" />
            <div style={styles.noteToolbarDivider} />
            {/* DOTTED BUTTON */}
            <ToolBarButton
              selected={this.props.dotted}
              onClick={() => {
                this.props.toggleDotted();
              }}
            >
              <div
                style={{
                  width: 10,
                  height: 10,
                  borderRadius: 5,
                  backgroundColor: this.props.dotted ? "blue" : "black",
                }}
              />
            </ToolBarButton>
            {/* REST BUTTON */}
            <ToolBarButton
              selected={this.props.rest}
              onClick={() => {
                this.props.toggleRest();
              }}
            >
              <img
                src={QuarterRest}
                style={{ width: 15, height: "auto" }}
                alt={"resticon"}
              />
            </ToolBarButton>
            {/* TRIPLET BUTTON */}
            <ToolBarButton
              selected={this.props.tripletMode}
              onClick={() => {
                this.props.toggleTriplet();
              }}
              name="Triplet"
            >
              -3-
            </ToolBarButton>
          </div>
        </div>
        {/* EVERYTHING BELOW TOOLBAR */}
        <div style={styles.lowerHalf}>
          <div style={{ flex: 1 }}></div>
          <div
            id="kalimbaContainer"
            style={{
              ...styles.kalimbaContainer,
              height: this.state.height - 90,
            }}
          >
            {this.state.kalimba !== null ? (
              <Kalimba
                kalimba={this.state.kalimba}
                currentNote={this.state.currentNoteIndex}
                playing={this.state.playing}
                visibleHeight={this.state.height}
                playFromNote={(index) => {
                  this.playSong(false, index);
                }}
                scrollBack={() => {
                  let kalimbaContainer = document.getElementById(
                    "kalimbaContainer"
                  );
                  kalimbaContainer.scrollTop += 50 * 25;
                }}
              />
            ) : (
              <div style={{ alignSelf: "center" }}>
                <ScaleLoader />
              </div>
            )}
          </div>
          <div style={{ flex: 1 }}></div>
        </div>
      </div>
    );
  }