Try add layout action (#320)

Author: itwillwork

src/lib/kit/components/Layouts/Column/Column.scss

@@ -11,19 +11,19 @@
         min-height: var(--df-column-first-row-min-height, 28px);
         display: flex;
         margin-bottom: auto;
-        flex-direction: column;
+        flex-direction: row;
         flex-shrink: 0;
 
         &-inner {
-            display: inline;
+            flex-grow: 1;
             margin-top: auto;
             margin-bottom: auto;
         }
 
-        &::after {
-            content: '';
-            width: 100%;
-            flex-shrink: 1;
+        &-action {
+            padding-left: var(--g-spacing-2);
+            margin-top: auto;
+            margin-bottom: auto;
         }
     }
 

src/lib/kit/components/Layouts/Column/Column.tsx

@@ -14,14 +14,17 @@ import './Column.scss';
 
 const b = block('column');
 
-interface ColumnProps {}
+interface ColumnProps {
+    action?: React.ReactNode;
+}
 
 const ColumnBase = <T extends FieldValue, S extends Spec>({
     name,
     spec,
     input,
     meta,
     children,
+    action,
 }: LayoutProps<T, undefined, undefined, S> & ColumnProps) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
     const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
@@ -47,6 +50,7 @@ const ColumnBase = <T extends FieldValue, S extends Spec>({
                         </span>
                     ) : null}
                 </div>
+                {Boolean(action) && <div className={b('first-row-action')}>{action}</div>}
             </div>
             <div className={b('second-row')}>
                 <div className={b('second-row-inner')}>

src/lib/kit/components/Layouts/Row/Row.scss

@@ -24,6 +24,10 @@
             margin-bottom: auto;
         }
 
+        &-action {
+            padding-left: var(--g-spacing-2);
+        }
+
         &::after {
             content: '';
             width: 100%;

src/lib/kit/components/Layouts/Row/Row.tsx

@@ -16,6 +16,7 @@ const b = block('row');
 
 interface RowProps {
     verboseDescription?: boolean;
+    action?: React.ReactNode;
 }
 
 const RowBase = <T extends FieldValue, S extends Spec>({
@@ -24,6 +25,7 @@ const RowBase = <T extends FieldValue, S extends Spec>({
     input,
     meta,
     verboseDescription,
+    action,
     children,
 }: LayoutProps<T, undefined, undefined, S> & RowProps) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
@@ -49,6 +51,7 @@ const RowBase = <T extends FieldValue, S extends Spec>({
                             </Text>
                         </span>
                     ) : null}
+                    {Boolean(action) && <span className={b('left-action')}>{action}</span>}
                 </div>
             </div>
             <div className={b('right')}>