aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/views/search/IconBar.tsx291
-rw-r--r--src/client/views/search/IconButton.tsx34
2 files changed, 36 insertions, 289 deletions
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 1e66023e4..52eba8027 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -28,319 +28,54 @@ library.add(faBan);
export interface IconBarProps {
updateIcon(icons: string[]): void;
- // getSelectedTypes(): string[];
- // getRemovedTypes(): string[];
getIcons(): string[]
allIcons: string[];
updateSelected(list: any[]): void;
}
-
-
@observer
export class IconBar extends React.Component<IconBarProps> {
static Instance: IconBar;
-
- @observable originalSelected: string[] = [];
- // @observable originalSelectedNodes: string[] = this.props.getSelectedTypes();
- // @observable originalRemovedNodes: string[] = this.props.getSelectedTypes();
-
- @observable removeType: boolean = false;
- // @observable added: any[];
- // @observable removed: any[];
- // @observable selected: any[];
-
+
allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
- allDivs: any = [];
- @observable list: string[];
+ @observable typesToFind: string[];
+ @observable public ResetClicked: boolean = false;
+ public Reset: number = 0;
constructor(props: IconBarProps) {
super(props);
+ this.typesToFind = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
IconBar.Instance = this;
- console.log("constructing")
- this.list = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
- console.log(this.list)
- // this.added = [];
- // this.removed = [];
- // this.selected = [];
- // this.originalSelected = this.props.getIcons();
- // console.log("ICONS")
- // console.log(this.props.getIcons())
- // console.log(this.originalSelected)
}
- // @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);
- // }
-
-
- // componentDidMount = () => {
- // //i KNOW this is bad i just can't get this to re render eeeeeeeek
- // this.forceUpdate();
- // }
-
- // @action.bound
- // resetIconFilters = () => {
- // this.unselectAllRefs();
- // // lmao sorry
- // this.forceUpdate();
- // }
-
-
- // @action.bound
- // unselectAllRefs() {
- // this.resetDataRemoved();
- // this.resetDataSelected();
- // this.removed = [];
- // this.added = [];
- // }
-
- // @action.bound
- // resetDataSelected() {
- // this.allRefs.forEach(element => {
- // if (element.current) {
- // element.current.setAttribute("data-selected", "false");
- // }
- // });
- // }
-
- // @action.bound
- // resetDataRemoved() {
- // this.allRefs.forEach(element => {
- // if (element.current) {
- // element.current.setAttribute("data-removed", "false");
- // }
- // });
- // }
-
- // @action.bound
- // alternateSelectedRef(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
- // let newRef: HTMLDivElement | null;
- // if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
- // else { newRef = ref; }
- // if (newRef) {
- // if (newRef.getAttribute("data-selected") === "true") {
- // newRef.setAttribute("data-selected", "false");
- // }
- // else {
- // newRef.setAttribute("data-selected", "true");
- // }
- // }
- // }
-
- // @action.bound
- // setToRemove(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
- // let newRef: HTMLDivElement | null;
- // if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
- // else { newRef = ref; }
- // if (newRef) newRef.setAttribute("data-removed", "true");
- // }
-
- // @action.bound
- // setToAdd(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
- // let newRef: HTMLDivElement | null;
- // if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
- // else { newRef = ref; }
- // if (newRef) newRef.setAttribute("data-removed", "false");
- // }
-
@action.bound
onClick = (value: string) => {
-console.log("hello!")
+ console.log("hello!")
}
- // //TODO: this needs help
- // @action.bound
- // onClick = (value: string) => {
- // let icons: string[] = this.props.getIcons();
- // let ref: any = this.getRef(value);
- // // if(ref) this.alternateSelectedRef(ref);
-
- // if (value === DocTypes.NONE) {
- // icons = this.props.allIcons;
- // // if its none, change the color of all the other circles
- // this.resetIconFilters();
- // }
-
- // //if type should be removed
- // if (this.removeType) {
- // if (this.added.length !== 0) {
- // icons = this.props.allIcons;
- // this.resetIconFilters();
- // this.added = [];
- // icons = _.without(icons, value);
- // this.removed.push(ref);
- // this.setToRemove(ref)
- // ref.setAttribute("data-selected", "true")
- // }
- // else {
- // //if it's included in the list, remove it
- // if (icons.includes(value)) {
- // icons = _.without(icons, value);
- // this.removed.push(ref);
- // this.setToRemove(ref);
- // ref.setAttribute("data-selected", "true")
- // }
- // //if it's not included, add it back
- // else {
- // icons.push(value);
- // //take it out of removed list
- // this.removed = _.without(this.removed, this.getRef(value));
- // ref.setAttribute("data-selected", "false")
- // }
- // }
- // this.selected = this.removed;
- // }
- // //if type should be added
- // else {
- // if (this.removed.length !== 0) {
- // icons = this.props.allIcons;
- // this.resetIconFilters();
- // this.removed = [];
- // icons = [value];
- // this.added.push(ref);
- // this.setToAdd(ref)
- // ref.setAttribute("data-selected", "true")
- // }
- // else {
- // //if its included in the list, remove it
- // if (icons.includes(value)) {
- // icons = _.without(icons, value);
- // this.added = _.without(this.added, this.getRef(value))
- // ref.setAttribute("data-selected", "false")
- // }
- // //if its not included in the list, add it
- // else {
- // icons.push(value);
- // this.added.push(ref)
- // this.setToAdd(ref)
- // ref.setAttribute("data-selected", "true")
- // }
- // }
- // this.selected = this.added;
- // }
-
- // this.props.updateIcon(icons);
- // this.props.updateSelected(this.selected);
- // //ok i know that this is bad but i dont know how else to get it to rerender and change the classname,
- // //any help here is greatly appreciated thanks frens
- // this.forceUpdate();
- // }
-
- //checks if option is selected based on the attribute data-selected
- // //this is for visual purposes
- // @action.bound
- // isRefSelected = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
- // let newRef: HTMLDivElement | null;
- // if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
- // else { newRef = ref; }
- // if (newRef) {
- // if (newRef.getAttribute("data-selected") === "true") {
- // return true;
- // }
- // return false;
- // }
- // }
-
- //checks attribues of ref to return whether or not a type should be specifically included in the search
- // @action.bound
- // getInitialSelectedStatus = (type: string) => {
- // console.log(this.originalSelected)
- // if (this.originalSelected.includes(type)) {
- // return "true";
- // }
- // return "false";
- // }
-
- //checks attributes of ref to return whether or not it should be excluded from search results
- // //this is for visual purposes
- // @action.bound
- // isRemoved = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
- // let newRef: HTMLDivElement | null;
- // if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
- // else { newRef = ref; }
- // if (newRef) {
- // if (newRef.getAttribute("data-removed") === "true") {
- // return true;
- // }
- // return false;
- // }
- // }
-
- //gets status upon mounting if a doc type should be removed from the results
- // @action.bound
- // getInitialRemovedStatus = (type: string) => {
- // if (!this.originalSelected.includes(type)) {
- // return "true";
- // }
- // return "false";
-
-
- // }
-
- // @action.bound
+ @action.bound
getList = (): string[] => {
- // console.log(this.list)
- return this.list;
+ return this.typesToFind;
}
@action.bound
updateList(newList: string[]) {
- this.list = newList;
+ this.typesToFind = newList;
}
@action.bound
resetSelf() {
- console.log("resetting eventually")
- const children = this.props.children;
- console.log(children)
- React.Children.map(children, child => {
- console.log(child)
- })
- // IconButton.Instance.reset();
- // let filterName: string;
- // let el: HTMLElement | null;
- // this.allIcons.forEach(typeName => {
- // filterName = typeName + "-filter";
- // el = document.getElementById(filterName);
-
- // });
+ this.ResetClicked = true;
+ this.typesToFind = this.allIcons;
}
render() {
- let element;
return (
<div>
<div className="filter icon-title">Filter by type of node</div>
<div className="filter icon-bar">
- <div className="filter type-outer">
+ <div className="filter type-outer">
<div className={"type-icon none not-selected"}
onClick={this.resetSelf}>
<FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
@@ -348,7 +83,7 @@ console.log("hello!")
<div className="filter-description">Clear</div>
</div>
{this.allIcons.map((type: string) =>
- <IconButton type={type} onClick={this.onClick} getList={this.getList} updateList = {this.updateList} resetSelf = {this.resetSelf}/>
+ <IconButton type={type} onClick={this.onClick} getList={this.getList} updateList={this.updateList} />
)}
</div>
</div>
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index e10074c9f..9af4b3a93 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
import "./SearchBox.scss";
import "./IconBar.scss";
import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons';
@@ -9,6 +9,7 @@ import { library, icon } from '@fortawesome/fontawesome-svg-core';
import { DocTypes } from '../../documents/Documents';
import '../globalCssVariables.scss';
import * as _ from "lodash";
+import { IconBar } from './IconBar';
library.add(faSearch);
library.add(faObjectGroup);
@@ -27,10 +28,6 @@ interface IconButtonProps {
onClick(type: string): void;
getList(): string[];
updateList(list: string[]): void;
- resetSelf(): void;
- // addToSelected(type: string): void;
- // removeFromSelected(type: string): void;
- // resetAddedAndRemoved(): void;
}
@observer
@@ -42,12 +39,30 @@ export class IconButton extends React.Component<IconButtonProps>{
@observable removeType = false;
@observable hover = false;
+ private _reactionDisposer?: IReactionDisposer;
+
static Instance: IconButton;
- constructor(props: IconButtonProps){
+ constructor(props: IconButtonProps) {
super(props);
IconButton.Instance = this;
}
+ componentDidMount() {
+ this._reactionDisposer = reaction(
+ () => IconBar.Instance.ResetClicked,
+ () => {
+ if (IconBar.Instance.ResetClicked) {
+ this.reset()
+ IconBar.Instance.Reset++;
+ if (IconBar.Instance.Reset === 9) {
+ IconBar.Instance.Reset = 0;
+ IconBar.Instance.ResetClicked = false;
+ }
+ }
+ }
+ )
+ }
+
@action
downKeyHandler = (e: KeyboardEvent) => {
if (e.key !== "Control") return;
@@ -162,11 +177,11 @@ export class IconButton extends React.Component<IconButtonProps>{
//if it is selected already
else {
this.isSelected = false;
- if(this.isAdded){
+ if (this.isAdded) {
this.isAdded = false;
_.pull(newList, this.props.type);
}
- if(this.isRemoved){
+ if (this.isRemoved) {
this.isRemoved = false;
newList.push(this.props.type)
}
@@ -187,12 +202,10 @@ export class IconButton extends React.Component<IconButtonProps>{
selectedRemoved = {
opacity: 0.2,
- // backgroundColor: "red"
}
notSelected = {
opacity: 0.6,
- // backgroundColor: "red"
}
hoverStyle = {
@@ -211,7 +224,6 @@ export class IconButton extends React.Component<IconButtonProps>{
@action.bound
public reset() {
- console.log("resetting ", this.props.type)
this.isSelected = false;
this.isAdded = false;
this.isRemoved = false;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-31 12:01:32 +0000