diff options
Diffstat (limited to 'src/client/views/linking/LinkMenuGroup.tsx')
-rw-r--r-- | src/client/views/linking/LinkMenuGroup.tsx | 27 |
1 files changed, 17 insertions, 10 deletions
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index 60def5d45..f99a18db2 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -1,14 +1,17 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable react/require-default-props */ +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import * as React from 'react'; import { Doc, StrListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { Cast, DocCast } from '../../../fields/Types'; +import { DocumentType } from '../../documents/DocumentTypes'; import { LinkManager } from '../../util/LinkManager'; import { DocumentView } from '../nodes/DocumentView'; import './LinkMenu.scss'; import { LinkMenuItem } from './LinkMenuItem'; -import * as React from 'react'; -import { DocumentType } from '../../documents/DocumentTypes'; interface LinkMenuGroupProps { sourceDoc: Doc; @@ -22,25 +25,24 @@ interface LinkMenuGroupProps { @observer export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> { private _menuRef = React.createRef<HTMLDivElement>(); + @observable _collapsed = false; getBackgroundColor = (): string | undefined => { - const link_relationshipList = StrListCast(Doc.UserDoc().link_relationshipList); + const linkRelationshipList = StrListCast(Doc.UserDoc().link_relationshipList); const linkColorList = StrListCast(Doc.UserDoc().link_ColorList); let color: string | undefined; // if this link's relationship property is not default "link", set its color - if (link_relationshipList) { - const relationshipIndex = link_relationshipList.indexOf(this.props.groupType); + if (linkRelationshipList) { + const relationshipIndex = linkRelationshipList.indexOf(this.props.groupType); const RGBcolor: string = linkColorList[relationshipIndex]; if (RGBcolor) { - //set opacity to 0.25 by modifiying the rgb string + // set opacity to 0.25 by modifiying the rgb string color = RGBcolor.slice(0, RGBcolor.length - 1) + ', 0.25)'; } } return color; }; - @observable _collapsed = false; - render() { const set = new Set<Doc>(this.props.group); const groupItems = Array.from(set.keys()).map(linkDoc => { @@ -76,7 +78,12 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> { return ( <div className="linkMenu-group" ref={this._menuRef}> - <div className="linkMenu-group-name" onClick={action(() => (this._collapsed = !this._collapsed))} style={{ background: this.getBackgroundColor() }}> + <div + className="linkMenu-group-name" + onClick={action(() => { + this._collapsed = !this._collapsed; + })} + style={{ background: this.getBackgroundColor() }}> <p className={this.props.groupType === '*' || this.props.groupType === '' ? '' : 'expand-one'}> {this.props.groupType}:</p> </div> {this._collapsed ? null : <div className="linkMenu-group-wrapper">{groupItems}</div>} |