diff options
| -rw-r--r-- | src/client/views/search/SearchItem.tsx | 62 |
1 files changed, 50 insertions, 12 deletions
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 37283e0fb..63baf625e 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -58,6 +58,7 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> { super(props); this.fetchDocuments(); + } async fetchDocuments() { @@ -180,18 +181,29 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem search => {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true } ); + this._reactionDisposer2 = reaction( + () => this._useIcons, + el=> {console.log("YUH"); + setTimeout(() =>(this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null), 1); + } + ); + Doc.SetSearchQuery(this.query); this.rootDoc.searchMatch = true; } componentWillUnmount() { this.rootDoc.searchMatch = undefined; this._reactionDisposer && this._reactionDisposer(); + this._reactionDisposer2 && this._reactionDisposer2(); + } @observable searchPos: number|undefined =0; private _reactionDisposer?: IReactionDisposer; + private _reactionDisposer2?: IReactionDisposer; + @computed get highlightPos(){return NumCast(this.rootDoc.searchIndex)} @@ -243,9 +255,12 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem layoutresult.indexOf(DocumentType.LINK) !== -1 ? faLink : layoutresult.indexOf(DocumentType.WEB) !== -1 ? faGlobeAsia : faCaretUp; - return <div onClick={action(() => { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} > + return <div><div onClick={action(() => { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} > <FontAwesomeIcon icon={button} size="2x" /> - </div>; + </div> + <div className="searchItem-label">{this.rootDoc.type ? this.rootDoc.type : "Other"}</div> + </div> + ; } collectionRef = React.createRef<HTMLDivElement>(); @@ -380,10 +395,36 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem SearchBox.Instance.submitSearch(); }) } + + @action + returnLines(){ + if (!this._displayLines) { + return <div style={{height:50, width: 10}} + onPointerDown={action(() => { + this._displayLines = !this._displayLines; + //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); + })} + //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} + > + {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div id={i.toString()} className="searchItem-highlighting">`${l}`</div>)} + </div>;; + } + else { + return <button style={{padding:2}} onClick={action(() => { this._displayLines = false; + })} > + <FontAwesomeIcon icon="arrow-up" size="sm" /> + </button>; + } + } + + //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); + + @observable _displayLines: boolean = true; returnButtons(){ return <div> - {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} + {this.returnLines()} + {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} <button onClick={this.nextHighlight} style={{padding:2}}> <FontAwesomeIcon icon="arrow-up" size="sm" /> </button> @@ -393,6 +434,9 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem </div> } + private _mainRef: React.RefObject<HTMLDivElement> = React.createRef(); + + render() { const doc1 = Cast(this.rootDoc!.anchor1, Doc); const doc2 = Cast(this.rootDoc!.anchor2, Doc); @@ -429,26 +473,20 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem } else { return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}> - <div className="searchItem" onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}> + <div ref={this._mainRef} className="searchItem" onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}> <div className="searchItem-body" onClick={this.onClick}> <div className="searchItem-title-container"> <div className="searchItem-title" style={{height:"10px", overflow:"hidden", textOverflow:"ellipsis"}}>{StrCast(this.rootDoc.title)}</div> <div className="searchItem-highlighting"> {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}</div> - {/* {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div id={i.toString()} className="searchItem-highlighting">{l}</div>)} */} + <div className={`icon-${this._displayLines ? "q" : "a"}`}> {NumCast(this.rootDoc.length) > 1? this.returnButtons(): null} - {/* <button onClick={this.nextHighlight} style={{padding:2}}> - <FontAwesomeIcon icon="arrow-up" size="sm" /> - </button> - <button onClick={this.nextHighlight2} style={{padding:2}}> - <FontAwesomeIcon icon="arrow-down" size="sm" /> - </button> */} + </div> </div> </div> <div className="searchItem-info" style={{ width: this._useIcons ? "30px" : "100%" }}> <div className={`icon-${this._useIcons ? "icons" : "live"}`}> <div className="searchItem-type" title="Click to Preview" onPointerDown={this.onPointerDown}>{this.DocumentIcon()}</div> - <div className="searchItem-label">{this.rootDoc.type ? this.rootDoc.type : "Other"}</div> </div> </div> <div className="searchItem-context" title="Drag as document"> |