Skip to content

Commit ed72587

Browse files
TylerAPfleddererTylerAPfledderer
committed
revert(expandable-info): revert from forwardRef 
1 parent 356d3d7 commit ed72587

File tree

1 file changed

+114
-121
lines changed

1 file changed

+114
-121
lines changed

‎src/components/ExpandableInfo.tsx‎

Lines changed: 114 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
Center,
77
ChakraProps,
88
Collapse,
9-
forwardRef,
109
Heading,
1110
HStack,
1211
Icon,
@@ -28,135 +27,129 @@ export interface IProps extends ChakraProps {
2827
className?: string
2928
}
3029

31-
const ExpandableInfo = forwardRef<IProps, "div">(
32-
(
33-
{
34-
image,
35-
title,
36-
contentPreview,
37-
children,
38-
background,
39-
forceOpen,
40-
className,
41-
...rest
42-
},
43-
ref
44-
) => {
45-
const { isOpen, getButtonProps, getDisclosureProps } = useDisclosure({
46-
defaultIsOpen: forceOpen,
47-
})
30+
const ExpandableInfo: React.FC<IProps> = ({
31+
image,
32+
title,
33+
contentPreview,
34+
children,
35+
background,
36+
forceOpen,
37+
className,
38+
...rest
39+
}) => {
40+
const { isOpen, getButtonProps, getDisclosureProps } = useDisclosure({
41+
defaultIsOpen: forceOpen,
42+
})
4843

49-
const chevronFlip = {
50-
collapsed: {
51-
rotate: 0,
52-
transition: {
53-
duration: 0.1,
54-
},
44+
const chevronFlip = {
45+
collapsed: {
46+
rotate: 0,
47+
transition: {
48+
duration: 0.1,
5549
},
56-
expanded: {
57-
rotate: 180,
58-
transition: {
59-
duration: 0.4,
60-
},
50+
},
51+
expanded: {
52+
rotate: 180,
53+
transition: {
54+
duration: 0.4,
6155
},
62-
}
56+
},
57+
}
6358

64-
const animateToggle = isOpen ? "expanded" : "collapsed"
59+
const animateToggle = isOpen ? "expanded" : "collapsed"
6560

66-
return (
67-
<VStack
68-
border="1px solid"
69-
borderColor="border"
70-
borderRadius="2px"
71-
p={6}
72-
mb={4}
73-
spacing="0"
74-
background={background ?? "background"}
75-
position="relative"
76-
_hover={{
77-
"& img": {
78-
transform: "scale(1.08)",
79-
transition: "transform 0.1s",
80-
},
81-
}}
82-
ref={ref}
83-
{...rest}
61+
return (
62+
<VStack
63+
border="1px solid"
64+
borderColor="border"
65+
borderRadius="2px"
66+
p={6}
67+
mb={4}
68+
spacing="0"
69+
background={background ?? "background"}
70+
position="relative"
71+
_hover={{
72+
"& img": {
73+
transform: "scale(1.08)",
74+
transition: "transform 0.1s",
75+
},
76+
}}
77+
{...rest}
78+
>
79+
<Stack
80+
justify="space-between"
81+
align="center"
82+
gap={{ base: 8, md: 12 }}
83+
flexDirection={{ base: "column", md: "row" }}
84+
width="full"
8485
>
85-
<Stack
86-
justify="space-between"
87-
align="center"
88-
gap={{ base: 8, md: 12 }}
89-
flexDirection={{ base: "column", md: "row" }}
90-
width="full"
91-
>
92-
{image && <GatsbyImage image={image} alt="" />}
93-
<HStack gap={12} width="full">
94-
<Box mr={4}>
95-
<HStack
96-
width="full"
97-
my={4}
98-
sx={{
99-
img: {
100-
mr: 6,
101-
},
102-
}}
103-
>
104-
<Heading
105-
mt="0"
106-
mb={1}
107-
fontSize={{ base: "2xl", md: "2rem" }}
108-
fontWeight="600"
109-
lineHeight="1.4"
110-
>
111-
{title}
112-
</Heading>
113-
</HStack>
114-
<Text color="text200" mb="0">
115-
{contentPreview}
116-
</Text>
117-
</Box>
118-
</HStack>
119-
{!forceOpen && (
120-
<Center
121-
as={motion.div}
122-
variants={chevronFlip}
123-
animate={animateToggle}
124-
initial={false}
125-
{...getButtonProps()}
126-
width={{ base: "full", md: "5rem" }}
127-
minHeight={{ base: "full", md: "10rem" }}
128-
cursor="pointer"
129-
_hover={{
130-
"& svg": {
131-
transform: "scale(1.25)",
132-
transition: "transform 0.1s",
86+
{image && <GatsbyImage image={image} alt="" />}
87+
<HStack gap={12} width="full">
88+
<Box mr={4}>
89+
<HStack
90+
width="full"
91+
my={4}
92+
sx={{
93+
img: {
94+
mr: 6,
13395
},
13496
}}
13597
>
136-
<Icon as={MdExpandMore} boxSize="initial" size="36" />
137-
</Center>
138-
)}
139-
</Stack>
140-
<Collapse
141-
{...getDisclosureProps()}
142-
in={isOpen}
143-
startingHeight="0"
144-
endingHeight="100%"
145-
initial={false}
146-
>
147-
<Box
148-
color="text"
149-
mt={8}
150-
borderTop="1px solid"
151-
borderColor="border"
152-
paddingTop={6}
153-
>
154-
{children}
98+
<Heading
99+
mt="0"
100+
mb={1}
101+
fontSize={{ base: "2xl", md: "2rem" }}
102+
fontWeight="600"
103+
lineHeight="1.4"
104+
>
105+
{title}
106+
</Heading>
107+
</HStack>
108+
<Text color="text200" mb="0">
109+
{contentPreview}
110+
</Text>
155111
</Box>
156-
</Collapse>
157-
</VStack>
158-
)
159-
}
160-
)
112+
</HStack>
113+
{!forceOpen && (
114+
<Center
115+
as={motion.div}
116+
variants={chevronFlip}
117+
animate={animateToggle}
118+
initial={false}
119+
{...getButtonProps()}
120+
width={{ base: "full", md: "5rem" }}
121+
minHeight={{ base: "full", md: "10rem" }}
122+
cursor="pointer"
123+
_hover={{
124+
"& svg": {
125+
transform: "scale(1.25)",
126+
transition: "transform 0.1s",
127+
},
128+
}}
129+
>
130+
<Icon as={MdExpandMore} boxSize="initial" size="36" />
131+
</Center>
132+
)}
133+
</Stack>
134+
<Collapse
135+
{...getDisclosureProps()}
136+
in={isOpen}
137+
startingHeight="0"
138+
endingHeight="100%"
139+
initial={false}
140+
>
141+
<Box
142+
color="text"
143+
mt={8}
144+
borderTop="1px solid"
145+
borderColor="border"
146+
paddingTop={6}
147+
>
148+
{children}
149+
</Box>
150+
</Collapse>
151+
</VStack>
152+
)
153+
}
161154

162155
export default ExpandableInfo

0 commit comments

Comments
 (0)