diff options
author | bob <bcz@cs.brown.edu> | 2019-09-03 16:47:52 -0400 |
---|---|---|
committer | bob <bcz@cs.brown.edu> | 2019-09-03 16:47:52 -0400 |
commit | 25e8cc61f67bed3063dc81997d31f29e451b5610 (patch) | |
tree | 3381aa45ceddd72068385d260473403f30fb693f /src/client/views/linking/LinkMenu.tsx | |
parent | 7e87aa4b7e0125482c87ab61f4a0de14e774558d (diff) | |
parent | a4d36f835b5c43351d1761034b61513b000445ba (diff) |
merged with master
Diffstat (limited to 'src/client/views/linking/LinkMenu.tsx')
-rw-r--r-- | src/client/views/linking/LinkMenu.tsx | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx new file mode 100644 index 000000000..842ce45b1 --- /dev/null +++ b/src/client/views/linking/LinkMenu.tsx @@ -0,0 +1,76 @@ +import { action, observable } from "mobx"; +import { observer } from "mobx-react"; +import { DocumentView } from "../nodes/DocumentView"; +import { LinkEditor } from "./LinkEditor"; +import './LinkMenu.scss'; +import React = require("react"); +import { Doc } from "../../../new_fields/Doc"; +import { LinkManager } from "../../util/LinkManager"; +import { LinkMenuGroup } from "./LinkMenuGroup"; +import { faTrash } from '@fortawesome/free-solid-svg-icons'; +import { library } from "@fortawesome/fontawesome-svg-core"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +library.add(faTrash); + +interface Props { + docView: DocumentView; + changeFlyout: () => void; + addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void; +} + +@observer +export class LinkMenu extends React.Component<Props> { + + @observable private _editingLink?: Doc; + + @action + componentWillReceiveProps() { + this._editingLink = undefined; + } + + clearAllLinks = () => { + LinkManager.Instance.deleteAllLinksOnAnchor(this.props.docView.props.Document); + } + + renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => { + let linkItems: Array<JSX.Element> = []; + groups.forEach((group, groupType) => { + linkItems.push( + <LinkMenuGroup + key={groupType} + docView={this.props.docView} + sourceDoc={this.props.docView.props.Document} + group={group} + groupType={groupType} + showEditor={action((linkDoc: Doc) => this._editingLink = linkDoc)} + addDocTab={this.props.addDocTab} /> + ); + }); + + // if source doc has no links push message + if (linkItems.length === 0) linkItems.push(<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>); + + return linkItems; + } + + render() { + let sourceDoc = this.props.docView.props.Document; + let groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); + if (this._editingLink === undefined) { + return ( + <div className="linkMenu"> + <button className="linkEditor-button linkEditor-clearButton" onClick={() => this.clearAllLinks()} title="Clear all links"><FontAwesomeIcon icon="trash" size="sm" /></button> + {/* <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input> */} + <div className="linkMenu-list"> + {this.renderAllGroups(groups)} + </div> + </div> + ); + } else { + return ( + <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)}></LinkEditor> + ); + } + } +}
\ No newline at end of file |