react-icons/fa#FaHandPointer JavaScript Examples
The following examples show how to use
react-icons/fa#FaHandPointer.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: TabCreator.js From kalimba-tabs with MIT License | 4 votes |
|
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>
);
}
