extract GridRowSummary

elastic · Nov 22, 2024 · e1f3ade · e1f3ade
1 parent f8cf272
commit e1f3ade
Showing 1 changed file with 35 additions and 17 deletions.
diff --git a/packages/kbn-grid-layout/grid/grid_row.tsx b/packages/kbn-grid-layout/grid/grid_row.tsx
@@ -232,23 +232,11 @@ export const GridRow = forwardRef<
         `}
       >
         {rowIndex !== 0 && (
-          <>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup gutterSize="s">
-              <EuiButtonIcon
-                color="text"
-                aria-label={i18n.translate('kbnGridLayout.row.toggleCollapse', {
-                  defaultMessage: 'Toggle collapse',
-                })}
-                iconType={isCollapsed ? 'arrowRight' : 'arrowDown'}
-                onClick={toggleIsCollapsed}
-              />
-              <EuiTitle size="xs">
-                <h2>{rowTitle}</h2>
-              </EuiTitle>
-            </EuiFlexGroup>
-            <EuiSpacer size="s" />
-          </>
+          <GridRowSummary
+            isCollapsed={isCollapsed}
+            toggleIsCollapsed={toggleIsCollapsed}
+            rowTitle={rowTitle}
+          />
         )}
         {!isCollapsed && (
           <div
@@ -268,3 +256,33 @@ export const GridRow = forwardRef<
     );
   }
 );
+
+const GridRowSummary = ({
+  isCollapsed,
+  toggleIsCollapsed,
+  rowTitle,
+}: {
+  isCollapsed: boolean;
+  toggleIsCollapsed: () => void;
+  rowTitle?: string;
+}) => {
+  return (
+    <>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup gutterSize="s">
+        <EuiButtonIcon
+          color="text"
+          aria-label={i18n.translate('kbnGridLayout.row.toggleCollapse', {
+            defaultMessage: 'Toggle collapse',
+          })}
+          iconType={isCollapsed ? 'arrowRight' : 'arrowDown'}
+          onClick={toggleIsCollapsed}
+        />
+        <EuiTitle size="xs">
+          <h2>{rowTitle}</h2>
+        </EuiTitle>
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+    </>
+  );
+};