-
Notifications
You must be signed in to change notification settings - Fork 1
/
psuedo.yaml
159 lines (123 loc) · 3.96 KB
/
psuedo.yaml
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
// Import the necessary libraries
Library: @headlessui/react
- Import: Transition
Library: tailwindcss
// Define a new React component called 'AnimatedClampedText'
Component AnimatedClampedText:
Props:
- clampLine: Integer
- children: ReactNode
// Define the component's state
State:
- isExpanded: false
// Define a function for updating state
Function toggleExpandState:
- Modify isExpanded with !isExpanded
// Define an event handler for user interactions
EventHandler handleToggleExpand:
- Call toggleExpandState
// Render the component
Render:
- Display <div> with class "container":
- Display <Transition> with appropriate configuration:
- Display <div> with class "content" and conditional styles for clamping text based on isExpanded state and clampLine prop
- Display children
- Display <button> with class "toggle-button" and onClick event set to handleToggleExpand
- If isExpanded:
- Display "Show less"
- Else:
- Display "Show more"
// End of AnimatedClampedText
DOCS
Component API
Transition
Prop Default Description
show —
Boolean
Whether the children should be shown or hidden.
as div
String | Component
The element or component to render in place of the Transition itself.
appear false
Boolean
Whether the transition should run on initial mount.
unmount true
Boolean
Whether the element should be unmounted or hidden based on the show state.
enter —
String
Classes to add to the transitioning element during the entire enter phase.
enterFrom —
String
Classes to add to the transitioning element before the enter phase starts.
enterTo —
String
Classes to add to the transitioning element immediately after the enter phase starts.
entered —
String
Classes to add to the transitioning element once the transition is done. These classes will persist after that, until it's time to leave.
leave —
String
Classes to add to the transitioning element during the entire leave phase.
leaveFrom —
String
Classes to add to the transitioning element before the leave phase starts.
leaveTo —
String
Classes to add to the transitioning element immediately after the leave phase starts.
beforeEnter —
() => void
Callback which is called before we start the enter transition.
afterEnter —
() => void
Callback which is called after we finished the enter transition.
beforeLeave —
() => void
Callback which is called before we start the leave transition.
afterLeave —
() => void
Callback which is called after we finished the leave transition.
Transition.Child
Prop Default Description
as div
String | Component
The element or component to render in place of the Transition itself.
appear false
Boolean
Whether the transition should run on initial mount.
unmount true
Boolean
Whether the element should be unmounted or hidden based on the show state.
enter —
String
Classes to add to the transitioning element during the entire enter phase.
enterFrom —
String
Classes to add to the transitioning element before the enter phase starts.
enterTo —
String
Classes to add to the transitioning element immediately after the enter phase starts.
entered —
String
Classes to add to the transitioning element once the transition is done. These classes will persist after that, until it's time to leave.
leave —
String
Classes to add to the transitioning element during the entire leave phase.
leaveFrom —
String
Classes to add to the transitioning element before the leave phase starts.
leaveTo —
String
Classes to add to the transitioning element immediately after the leave phase starts.
beforeEnter —
() => void
Callback which is called before we start the enter transition.
afterEnter —
() => void
Callback which is called after we finished the enter transition.
beforeLeave —
() => void
Callback which is called before we start the leave transition.
afterLeave —
() => void
Callback which is called after we finished the leave transition.