@designbasekorea/figma-ui 0.1.75 → 0.1.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +16 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +16 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -101,16 +101,28 @@ const FigmaHeader = ({ children, actions = [], searchBar, sticky = true, classNa
|
|
|
101
101
|
};
|
|
102
102
|
FigmaHeader.displayName = 'FigmaHeader';
|
|
103
103
|
|
|
104
|
-
const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t }) => {
|
|
104
|
+
const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t, collapsible = false, defaultCollapsed = false, onCollapseChange }) => {
|
|
105
105
|
const sectionRef = useRef(null);
|
|
106
|
+
const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
|
|
106
107
|
const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : {};
|
|
107
108
|
const classes = [
|
|
108
109
|
'designbase-figma-section',
|
|
109
110
|
!isEnabled && 'designbase-figma-section--disabled',
|
|
111
|
+
collapsible && 'designbase-figma-section--collapsible',
|
|
112
|
+
isCollapsed && collapsible && 'designbase-figma-section--collapsed',
|
|
110
113
|
className,
|
|
111
114
|
]
|
|
112
115
|
.filter(Boolean)
|
|
113
116
|
.join(' ');
|
|
117
|
+
const handleHeaderClick = () => {
|
|
118
|
+
if (collapsible) {
|
|
119
|
+
const newCollapsed = !isCollapsed;
|
|
120
|
+
setIsCollapsed(newCollapsed);
|
|
121
|
+
if (onCollapseChange) {
|
|
122
|
+
onCollapseChange(newCollapsed, dataCategory);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
114
126
|
useEffect(() => {
|
|
115
127
|
if (!enableScrollNavigation || !onActiveSectionChange || !sectionRef.current)
|
|
116
128
|
return;
|
|
@@ -132,12 +144,13 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
|
|
|
132
144
|
};
|
|
133
145
|
}, [enableScrollNavigation, dataCategory, headerHeight, onActiveSectionChange]);
|
|
134
146
|
return (React.createElement("section", { ref: sectionRef, className: classes, ...(dataCategory ? { 'data-category': dataCategory } : {}), style: sectionStyle },
|
|
135
|
-
title && (React.createElement("div", { className: "designbase-figma-section__header" },
|
|
147
|
+
title && (React.createElement("div", { className: "designbase-figma-section__header", onClick: collapsible ? handleHeaderClick : undefined, style: collapsible ? { cursor: 'pointer' } : undefined },
|
|
136
148
|
React.createElement("h2", { className: "designbase-figma-section__title" }, resolveText(t, title)),
|
|
137
149
|
React.createElement("div", { className: "designbase-figma-section__controls" },
|
|
138
150
|
iconButton,
|
|
151
|
+
collapsible && (React.createElement("span", { className: `designbase-figma-section__collapse-icon ${isCollapsed ? 'designbase-figma-section__collapse-icon--collapsed' : ''}` }, "\u25BC")),
|
|
139
152
|
onToggle && (React.createElement(Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
|
|
140
|
-
React.createElement("div", { className: `designbase-figma-section__content ${!isEnabled ? 'designbase-figma-section__content--hidden' : ''}` }, children)));
|
|
153
|
+
React.createElement("div", { className: `designbase-figma-section__content ${!isEnabled ? 'designbase-figma-section__content--hidden' : ''} ${isCollapsed && collapsible ? 'designbase-figma-section__content--collapsed' : ''}` }, children)));
|
|
141
154
|
};
|
|
142
155
|
FigmaSection.displayName = 'FigmaSection';
|
|
143
156
|
const scrollToSection = (category, headerHeight = 94) => {
|