1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import { Box, Collapse, Flex, IconButton } from '@chakra-ui/react'
import React, {
JSXElementConstructor,
ReactChild,
ReactElement,
ReactNode,
useContext,
useEffect,
useState,
} from 'react'
import { BiCaretDownCircle, BiChevronDownCircle, BiCircle } from 'react-icons/bi'
import { ComponentLike, ComponentPropsWithoutNode } from 'rehype-react'
import { VscCircleFilled, VscCircleOutline } from 'react-icons/vsc'
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@chakra-ui/icons'
import { NoteContext } from '../../util/NoteContext'
export interface SectionProps {
children: any
className: string
}
export const Section = (props: SectionProps) => {
const {
children,
className, // outline
} = props
const [open, setOpen] = useState(true)
const { collapse } = useContext(NoteContext)
useEffect(() => {
setOpen(!collapse)
}, [collapse])
if (className === 'h0Wrapper headingWrapper') {
return <Box className="preHeadingContent"> {children}</Box>
}
const kids = children as ReactChild[]
return (
<Box className={'sec'}>
<Box display="block">
<Flex className="headingFlex" alignItems="baseline">
{open && kids.length > 0 ? (
<>
<IconButton
className="viewerHeadingButton"
_focus={{}}
_active={{}}
aria-label="Expand heading"
//mr={1}
size="xs"
variant="subtle"
icon={<ChevronUpIcon />}
onClick={() => setOpen(!open)}
height={2}
width={2}
/>
<IconButton
className="outlineHeadingButton"
_focus={{}}
_active={{}}
aria-label="Expand heading"
//mr={1}
size="xs"
variant="subtle"
icon={<VscCircleOutline />}
onClick={() => setOpen(!open)}
height={2}
width={2}
/>
</>
) : (
<>
<IconButton
className="viewerHeadingButton"
_active={{}}
_focus={{}}
aria-label="Collapse heading"
//mr={1}
height={2}
width={2}
size="xs"
variant="subtle"
icon={<ChevronDownIcon />}
onClick={() => setOpen(!open)}
/>
<IconButton
className="outlineHeadingButton"
_active={{}}
_focus={{}}
aria-label="Collapse heading"
//mr={1}
height={2}
width={2}
size="xs"
variant="subtle"
icon={<VscCircleFilled />}
onClick={() => setOpen(!open)}
/>
</>
)}
{kids[0]}
</Flex>
</Box>
{open && <Box className="sectionContent">{kids.slice(1)}</Box>}
</Box>
)
}
|
