diff options
Diffstat (limited to 'src/client/views/search/IconButton.tsx')
| -rw-r--r-- | src/client/views/search/IconButton.tsx | 270 |
1 files changed, 255 insertions, 15 deletions
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index 30dd3676d..e10074c9f 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -3,34 +3,274 @@ import { observer } from 'mobx-react'; import { observable, action, runInAction } from 'mobx'; import "./SearchBox.scss"; import "./IconBar.scss"; -import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons'; +import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { library, icon } from '@fortawesome/fontawesome-svg-core'; +import { DocTypes } from '../../documents/Documents'; +import '../globalCssVariables.scss'; +import * as _ from "lodash"; + +library.add(faSearch); +library.add(faObjectGroup); +library.add(faImage); +library.add(faStickyNote); +library.add(faFilePdf); +library.add(faFilm); +library.add(faMusic); +library.add(faLink); +library.add(faChartBar); +library.add(faGlobeAsia); +library.add(faBan); interface IconButtonProps { - ref: React.RefObject<HTMLDivElement>; - isRefSelected(r: any): boolean; - isRemoved(ref: any): boolean; type: string; - getInitialSelectedStatus(ref: any): string; - getInitialRemovedStatus(ref: any): string; - onClick(t: string): void; - icon: any; + onClick(type: string): void; + getList(): string[]; + updateList(list: string[]): void; + resetSelf(): void; + // addToSelected(type: string): void; + // removeFromSelected(type: string): void; + // resetAddedAndRemoved(): void; } @observer export class IconButton extends React.Component<IconButtonProps>{ + @observable isSelected: boolean = false; + @observable isAdded: boolean = false; + @observable isRemoved: boolean = false; + @observable removeType = false; + @observable hover = false; + + static Instance: IconButton; + constructor(props: IconButtonProps){ + super(props); + IconButton.Instance = this; + } + + @action + downKeyHandler = (e: KeyboardEvent) => { + if (e.key !== "Control") return; + this.removeType = true; + e.preventDefault(); + e.stopPropagation(); + document.body.style.cursor = "not-allowed"; + } + + @action + upKeyHandler = (e: KeyboardEvent) => { + e.preventDefault(); + e.stopPropagation(); + this.removeType = false; + document.body.style.cursor = "default"; + + } + + componentWillMount() { + document.removeEventListener("keydown", this.downKeyHandler); + document.addEventListener("keydown", this.downKeyHandler); + document.removeEventListener("keyup", this.upKeyHandler); + document.addEventListener("keyup", this.upKeyHandler); + } + + componentWillUnMount() { + document.removeEventListener("keyup", this.upKeyHandler); + document.removeEventListener("keydown", this.downKeyHandler); + } + + @action.bound + getIcon() { + switch (this.props.type) { + case (DocTypes.NONE): + return faBan; + case (DocTypes.AUDIO): + return faMusic; + case (DocTypes.COL): + return faObjectGroup; + case (DocTypes.HIST): + return faChartBar; + case (DocTypes.IMG): + return faImage; + case (DocTypes.LINK): + return faLink; + case (DocTypes.PDF): + return faFilePdf; + case (DocTypes.TEXT): + return faStickyNote; + case (DocTypes.VID): + return faVideo; + case (DocTypes.WEB): + return faGlobeAsia; + default: + return faCaretDown; + } + } + + public getType(): string { + return this.props.type; + } + + public getIsSelected(): boolean { + return this.isSelected; + } + + public getIsRemoved() { + return this.isRemoved; + } + + public getIsAdded() { + return this.isAdded; + } + + @action.bound + onClick() { + let newList: string[] = this.props.getList(); + + //if it's not already selected + if (!this.isSelected) { + this.isSelected = true; + + //if actions pertain to removal + if (this.removeType) { + this.isAdded = false; + if (!this.isRemoved) { + _.pull(newList, this.props.type); + this.isRemoved = true; + } + else { + newList.push(this.props.type); + this.isRemoved = false; + } + } + // if actions pertain to adding + else { + this.isRemoved = false; + if (!this.isAdded) { + if (newList.length === 9) { + newList = [this.props.type]; + } else { + newList.push(this.props.type); + } + this.isAdded = true; + } + else { + _.pull(newList, this.props.type); + this.isAdded = false; + } + } + } + //if it is selected already + else { + this.isSelected = false; + if(this.isAdded){ + this.isAdded = false; + _.pull(newList, this.props.type); + } + if(this.isRemoved){ + this.isRemoved = false; + newList.push(this.props.type) + } + + + this.isAdded = false; + this.isRemoved = false; + } + + this.props.onClick(this.props.type); + this.props.updateList(newList); + } + + selectedAdded = { + opacity: 1, + backgroundColor: "#c2c2c5" //$alt-accent + } + + selectedRemoved = { + opacity: 0.2, + // backgroundColor: "red" + } + + notSelected = { + opacity: 0.6, + // backgroundColor: "red" + } + + hoverStyle = { + opacity: 1, + backgroundColor: "#c2c2c5" //$alt-accent + } + + hoverRemoveStyle = { + opacity: 0.2, + backgroundColor: "transparent", + } + + banStyle = { + opacity: 1, + } + + @action.bound + public reset() { + console.log("resetting ", this.props.type) + this.isSelected = false; + this.isAdded = false; + this.isRemoved = false; + } + + @action + onMouseLeave = () => { + this.hover = false; + } + + @action + onMouseEnter = () => { + this.hover = true; + } + + getFA = () => { + switch (this.props.type) { + case (DocTypes.NONE): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faBan} />); + case (DocTypes.AUDIO): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faMusic} />) + case (DocTypes.COL): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faObjectGroup} />) + case (DocTypes.HIST): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faChartBar} />) + case (DocTypes.IMG): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faImage} />) + case (DocTypes.LINK): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faLink} />) + case (DocTypes.PDF): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faFilePdf} />) + case (DocTypes.TEXT): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faStickyNote} />) + case (DocTypes.VID): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faVideo} />) + case (DocTypes.WEB): + return (<FontAwesomeIcon className="fontawesome-icon" icon={faGlobeAsia} />) + default: + return (<FontAwesomeIcon className="fontawesome-icon" icon={faCaretDown} />) + } + } + render() { return ( - <div className="type-outer"> - <div className={"type-icon filter " + (this.props.isRefSelected(this.props.ref) ? "selected " + (this.props.isRemoved(this.props.ref) ? "removed" : "add") : "not-selected")} - ref={this.props.ref} - data-selected={this.props.getInitialSelectedStatus(this.props.type)} - data-removed={this.props.getInitialRemovedStatus(this.props.type)} - onClick={() => { this.props.onClick(this.props.type); }}> - <FontAwesomeIcon className="fontawesome-icon" icon={this.props.icon} /> + <div className="type-outer" id={this.props.type + "-filter"} + onMouseEnter={this.onMouseEnter} + onMouseLeave={this.onMouseLeave} + onClick={this.onClick}> + <div className="type-icon" id={this.props.type + "-icon"} + style={this.hover ? this.removeType ? this.hoverRemoveStyle : this.hoverStyle : + !this.isSelected ? this.notSelected : + this.isAdded ? this.selectedAdded : + this.isRemoved ? this.selectedRemoved : this.notSelected} + > + {this.getFA()} </div> + <div className="ban-icon" + style={this.hover ? (this.removeType ? this.banStyle : { opacity: 0 }) : (this.isSelected ? this.isRemoved ? this.banStyle : { opacity: 0 } : { opacity: 0 })}> + <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div> <div className="filter-description">{this.props.type}</div> </div> ); |