diff options
Diffstat (limited to 'src/client/views/newlightbox/Header')
| -rw-r--r-- | src/client/views/newlightbox/Header/LightboxHeader.tsx | 97 | ||||
| -rw-r--r-- | src/client/views/newlightbox/Header/index.ts | 2 |
2 files changed, 48 insertions, 51 deletions
diff --git a/src/client/views/newlightbox/Header/LightboxHeader.tsx b/src/client/views/newlightbox/Header/LightboxHeader.tsx index a272ce294..882d28fba 100644 --- a/src/client/views/newlightbox/Header/LightboxHeader.tsx +++ b/src/client/views/newlightbox/Header/LightboxHeader.tsx @@ -1,62 +1,59 @@ -import './LightboxHeader.scss'; +import { Button, IconButton, Size, Type } from 'browndash-components'; import * as React from 'react'; -import { INewLightboxHeader } from "./utils"; -import { NewLightboxView } from '../NewLightboxView'; +import { BsBookmark, BsBookmarkFill } from 'react-icons/bs'; +import { MdTravelExplore } from 'react-icons/md'; +import { Doc } from '../../../../fields/Doc'; import { StrCast } from '../../../../fields/Types'; +import { Colors } from '../../global/globalEnums'; +import { DocumentView } from '../../nodes/DocumentView'; +import { NewLightboxView } from '../NewLightboxView'; import { EditableText } from '../components/EditableText'; import { getType } from '../utils'; -import { Button, IconButton, Size, Type } from 'browndash-components'; -import { MdExplore, MdTravelExplore } from 'react-icons/md' -import { BsBookmark, BsBookmarkFill } from 'react-icons/bs' -import { Doc } from '../../../../fields/Doc'; -import { LightboxView } from '../../LightboxView'; -import { Colors } from '../../global/globalEnums'; - +import './LightboxHeader.scss'; +import { INewLightboxHeader } from './utils'; -export const NewLightboxHeader = (props: INewLightboxHeader) => { - const {height = 100, width} = props; - const [doc, setDoc] = React.useState<Doc | undefined>(LightboxView.LightboxDoc) - const [editing, setEditing] = React.useState<boolean>(false) - const [title, setTitle] = React.useState<JSX.Element | null>( - (null) - ) +export function NewLightboxHeader(props: INewLightboxHeader) { + const { height = 100, width } = props; + const [doc, setDoc] = React.useState<Doc | undefined>(DocumentView.LightboxDoc()); + const [editing, setEditing] = React.useState<boolean>(false); + const [title, setTitle] = React.useState<JSX.Element | null>(null); React.useEffect(() => { - let lbDoc = LightboxView.LightboxDoc - setDoc(lbDoc) + const lbDoc = DocumentView.LightboxDoc(); + setDoc(lbDoc); if (lbDoc) { setTitle( - <EditableText - editing={editing} - text={StrCast(lbDoc.title)} - onEdit={(newText: string) => { - if(lbDoc) lbDoc.title = newText; - }} - setEditing={setEditing} - />) + <EditableText + editing={editing} + text={StrCast(lbDoc.title)} + onEdit={(newText: string) => { + if (lbDoc) lbDoc.title = newText; + }} + setEditing={setEditing} + /> + ); } - }, [LightboxView.LightboxDoc]) + }, [DocumentView.LightboxDoc()]); - const [saved, setSaved] = React.useState<boolean>(false) + const [saved, setSaved] = React.useState<boolean>(false); - if (!doc) return null - else return <div className={`newLightboxHeader-container`} onPointerDown={(e) => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> - <div className={`title-container`}> - <div className={`lb-label`}>Title</div> - {title} - </div> - <div className={`type-container`}> - <div className={`lb-label`}>Type</div> - <div className={`type`}>{getType(StrCast(doc.type))}</div> - </div> - <div style={{gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill/> : <BsBookmark/>}/> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill/> : <BsBookmark/>}/> - </div> - <div style={{gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}> - <Button onClick={() => { - console.log(NewLightboxView.ExploreMode) - NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode) - }} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text={"t-SNE 2D Embeddings"} icon={<MdTravelExplore/>}/> + if (!doc) return null; + return ( + <div className="newLightboxHeader-container" onPointerDown={e => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> + <div className="title-container"> + <div className="lb-label">Title</div> + {title} + </div> + <div className="type-container"> + <div className="lb-label">Type</div> + <div className="type">{getType(StrCast(doc.type))}</div> + </div> + <div style={{ gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + </div> + <div style={{ gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <Button onClick={() => NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode)} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text="t-SNE 2D Embeddings" icon={<MdTravelExplore />} /> + </div> </div> - </div> -}
\ No newline at end of file + ); +} diff --git a/src/client/views/newlightbox/Header/index.ts b/src/client/views/newlightbox/Header/index.ts index 090677c16..88a533585 100644 --- a/src/client/views/newlightbox/Header/index.ts +++ b/src/client/views/newlightbox/Header/index.ts @@ -1 +1 @@ -export * from './LightboxHeader'
\ No newline at end of file +export * from './LightboxHeader'; |