diff options
Diffstat (limited to 'components/Sidebar/index.tsx')
| -rw-r--r-- | components/Sidebar/index.tsx | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx new file mode 100644 index 0000000..957669c --- /dev/null +++ b/components/Sidebar/index.tsx @@ -0,0 +1,253 @@ +import React, { useContext, useEffect, useRef, useState } from 'react' + +import { Toolbar } from './Toolbar' +import { TagBar } from './TagBar' +import { Note } from './Note' + +import { + Button, + Slide, + VStack, + Flex, + Heading, + Box, + IconButton, + Tooltip, + HStack, + TagLabel, + Tag, + TagRightIcon, +} from '@chakra-ui/react' +import { Collapse } from './Collapse' +import { Scrollbars } from 'react-custom-scrollbars-2' +import { + ChevronLeftIcon, + ChevronRightIcon, + CloseIcon, + HamburgerIcon, + ViewIcon, + ViewOffIcon, +} from '@chakra-ui/icons' +import { BiDotsVerticalRounded, BiFile, BiNetworkChart } from 'react-icons/bi' +import { BsReverseLayoutSidebarInsetReverse } from 'react-icons/bs' + +import { GraphData, NodeObject, LinkObject } from 'force-graph' +import { OrgRoamNode } from '../../api' +import { ThemeContext } from '../../util/themecontext' +import { LinksByNodeId, NodeByCite, NodeById, Scope } from '../../pages/index' +import { Resizable } from 're-resizable' +import { usePersistantState } from '../../util/persistant-state' +import { initialFilter, TagColors } from '../config' + +export interface SidebarProps { + isOpen: boolean + onClose: any + onOpen: any + nodeById: NodeById + previewNode: NodeObject + setPreviewNode: any + linksByNodeId: LinksByNodeId + nodeByCite: NodeByCite + setSidebarHighlightedNode: any + canUndo: any + canRedo: any + resetPreviewNode: any + previousPreviewNode: any + nextPreviewNode: any + openContextMenu: any + scope: Scope + setScope: any + windowWidth: number + filter: typeof initialFilter + setFilter: any + tagColors: TagColors + setTagColors: any +} + +const Sidebar = (props: SidebarProps) => { + const { + isOpen, + onOpen, + onClose, + previewNode, + setPreviewNode, + nodeById, + linksByNodeId, + nodeByCite, + setSidebarHighlightedNode, + canUndo, + canRedo, + resetPreviewNode, + previousPreviewNode, + nextPreviewNode, + openContextMenu, + scope, + setScope, + windowWidth, + filter, + setFilter, + tagColors, + setTagColors, + } = props + + const { highlightColor } = useContext(ThemeContext) + const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>() + const [sidebarWidth, setSidebarWidth] = usePersistantState<number>('sidebarWidth', 400) + + useEffect(() => { + if (!previewNode?.id) { + onClose() + return + } + onOpen() + setPreviewRoamNode(previewNode as OrgRoamNode) + }, [previewNode?.id]) + + const [justification, setJustification] = useState(1) + const justificationList = ['justify', 'start', 'end', 'center'] + const [font, setFont] = useState('sans serif') + const [indent, setIndent] = useState(0) + //maybe want to close it when clicking outside, but not sure + //const outsideClickRef = useRef(); + return ( + <Collapse + animateOpacity={false} + dimension="width" + in={isOpen} + //style={{ position: 'relative' }} + unmountOnExit + startingSize={0} + style={{ height: '100vh' }} + > + <Resizable + size={{ height: '100vh', width: sidebarWidth }} + onResizeStop={(e, direction, ref, d) => { + setSidebarWidth((curr: number) => curr + d.width) + }} + enable={{ + top: false, + right: false, + bottom: false, + left: true, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false, + }} + minWidth="220px" + maxWidth={windowWidth - 200} + > + <Flex flexDir="column" h="100vh" pl={2} color="black" bg="alt.100" width="100%"> + <Flex + //whiteSpace="nowrap" + // overflow="hidden" + // textOverflow="ellipsis" + pl={4} + alignItems="center" + color="black" + width="100%" + > + <Flex flexShrink={0}> + <BiFile + onContextMenu={(e) => { + e.preventDefault() + openContextMenu(previewNode, e) + }} + /> + </Flex> + <Flex + whiteSpace="nowrap" + textOverflow="ellipsis" + overflow="hidden" + onContextMenu={(e) => { + e.preventDefault() + openContextMenu(previewNode, e) + }} + > + <Heading + pl={2} + whiteSpace="nowrap" + textOverflow="ellipsis" + overflow="hidden" + lineHeight={1} + size="sm" + fontWeight={600} + color={'gray.800'} + > + {previewRoamNode?.title} + </Heading> + </Flex> + <Flex flexDir="row" ml="auto"> + <IconButton + // eslint-disable-next-line react/jsx-no-undef + m={1} + icon={<BiDotsVerticalRounded />} + aria-label="Options" + variant="subtle" + onClick={(e) => { + openContextMenu(previewNode, e, { + left: undefined, + top: 12, + right: -windowWidth + 20, + bottom: undefined, + }) + }} + /> + </Flex> + </Flex> + <Toolbar + {...{ + setJustification, + setIndent, + setFont, + justification, + setPreviewNode, + canUndo, + canRedo, + resetPreviewNode, + previousPreviewNode, + nextPreviewNode, + }} + /> + {/* <Scrollbars + * //autoHeight + * autoHeightMax={600} + * autoHide + * renderThumbVertical={({ style, ...props }) => ( + * <Box + * style={{ + * ...style, + * borderRadius: 0, + * // backgroundColor: highlightColor, + * }} + * //color="alt.100" + * {...props} + * /> + * )} + * > */} + <VStack flexGrow={1} overflow="scroll" alignItems="left" bg="alt.100" paddingLeft={4}> + <TagBar + {...{ filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode }} + /> + <Note + {...{ + setPreviewNode, + previewNode, + nodeById, + nodeByCite, + setSidebarHighlightedNode, + justification, + justificationList, + linksByNodeId, + openContextMenu, + }} + /> + </VStack> + {/*</Scrollbars>*/} + </Flex> + </Resizable> + </Collapse> + ) +} + +export default Sidebar |