Fix/generator/group in popover

packages/drip-table-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip-table-generator",
-  "version": "3.1.4-alpha.6",
+  "version": "3.1.4-alpha.7",
   "description": "A visualization tool for generating schema of drip-table.",
   "main": "dist/index.min.js",
   "module": "lib/index.js",

packages/drip-table-generator/src/layouts/attributes-layout/component-configs/index.tsx

@@ -78,15 +78,15 @@ const ComponentConfigForm = <
       if (typeof iconConfig === 'string') {
         formData['options.mode'] = 'library';
         formData['options.icon'] = iconConfig;
-        formData['options.iconRender'] = '';
+        formData['options.icon.render'] = '';
       } else if (typeof iconConfig.name === 'string') {
         formData['options.mode'] = 'library';
         formData['options.icon'] = iconConfig?.name;
-        formData['options.iconRender'] = '';
+        formData['options.icon.render'] = '';
       } else {
         formData['options.mode'] = 'custom';
         formData['options.icon'] = '';
-        formData['options.iconRender'] = iconConfig?.html || iconConfig?.render;
+        formData['options.icon.render'] = iconConfig?.html || iconConfig?.render;
       }
     }
     if (columnConfigs.component === 'button') {
@@ -125,11 +125,11 @@ const ComponentConfigForm = <
     if (currentColumn?.component === 'icon') {
       if (formData['options.mode'] === 'custom') {
         uiProps.icon = {
-          render: uiProps.iconRender,
+          render: uiProps['icon.render'],
         };
       }
       delete uiProps.mode;
-      delete uiProps.iconRender;
+      delete uiProps['icon.render'];
     }
     if (dataProps.width && !Number.isNaN(Number(dataProps.width))) {
       dataProps.width = Number(dataProps.width);

packages/drip-table-generator/src/layouts/attributes-layout/component-item-config/index.tsx

@@ -10,6 +10,7 @@ import './index.less';
 import { ExclamationCircleTwoTone } from '@ant-design/icons';
 import { Result } from 'antd';
 import { DripTableExtraOptions } from 'drip-table';
+import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
 
 import { filterAttributes } from '@/utils';
@@ -58,7 +59,7 @@ const ComponentItemConfigForm = <
     icons: props.icons,
   });
 
-  const decodeColumnConfigs = (columnConfigs?: DTGTableConfig['columns'][number], defaultData?: Record<string, unknown>) => {
+  const decodeColumnConfigs = (columnConfigs: DTGTableConfig['columns'][number], defaultData?: Record<string, unknown>) => {
     const formData: Record<string, unknown> = {};
     if (typeof columnConfigs?.title === 'string') {
       formData.title = columnConfigs.title;
@@ -73,6 +74,25 @@ const ComponentItemConfigForm = <
         formData[`style.${key}`] = columnConfigs.style?.[key];
       });
     }
+    if (columnConfigs.component === 'icon') {
+      const iconConfig = columnConfigs?.options?.icon as Record<string, unknown> | string ?? '';
+      if (typeof iconConfig === 'string') {
+        formData['options.mode'] = 'library';
+        formData['options.icon'] = iconConfig;
+        formData['options.icon.render'] = '';
+      } else if (typeof iconConfig.name === 'string') {
+        formData['options.mode'] = 'library';
+        formData['options.icon'] = iconConfig?.name;
+        formData['options.icon.render'] = '';
+      } else {
+        formData['options.mode'] = 'custom';
+        formData['options.icon'] = '';
+        formData['options.icon.render'] = iconConfig?.html || iconConfig?.render;
+      }
+    }
+    if (columnConfigs.component === 'button') {
+      formData['options.popconfirm'] = !!columnConfigs.options.popconfirm;
+    }
     return formData;
   };
 
@@ -99,6 +119,15 @@ const ComponentItemConfigForm = <
         dataProps[key] = formData[key];
       }
     });
+    if (column?.component === 'icon') {
+      if (formData['options.mode'] === 'custom') {
+        uiProps.icon = {
+          render: uiProps['icon.render'],
+        };
+      }
+      delete uiProps.mode;
+      delete uiProps['icon.render'];
+    }
     if (dataProps.width && !Number.isNaN(Number(dataProps.width))) {
       dataProps.width = Number(dataProps.width);
     }
@@ -152,7 +181,7 @@ const ComponentItemConfigForm = <
           <CustomForm<DTGTableConfig['columns'][number]>
             primaryKey="key"
             configs={columnConfig ? columnConfig.attrSchema.filter(item => item.name !== 'width') || [] : []}
-            data={currentColumnItem}
+            data={cloneDeep(currentColumnItem)}
             decodeData={decodeColumnConfigs}
             encodeData={formData => encodeColumnConfigs(formData, currentColumnItem)}
             extendKeys={['ui:props', 'options']}

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/group.tsx

@@ -57,7 +57,7 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
   if (columnToRender?.component === 'group') {
     const options = columnToRender.options;
     const gutter = options.gutter ?? [0, 0];
-    const rootColumn = props.path.length > 0 ? props.tableConfig.columns[props.path[0]] : props.column;
+    const rootColumn = props.tableConfig.columns[props.columnIndex];
     return (
       <div
         className="jfe-drip-table-generator-workstation-table-cell-group-wrapper"
@@ -74,7 +74,7 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
               justify={options.horizontalAlign}
               wrap={options.wrap}
               className="jfe-drip-table-generator-workstation-table-cell-group-row"
-              style={{ minHeight: 60 / options.layout.length }}
+              style={{ minHeight: 40 / options.layout.length }}
             >
               { Array.from({ length: colLength }, (v, i) => i).map((col, colIndex) => {
                 const componentIndex = getIndex(options.layout, rowIndex, colIndex);
@@ -90,7 +90,7 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
                     })}
                     style={{
                       ...itemColumn && 'style' in itemColumn && 'schema' in itemColumn ? itemColumn.style : {},
-                      padding: `${gutter[0]}px ${gutter[1]}px`,
+                      margin: `${gutter[0]}px ${gutter[1]}px`,
                       minWidth: `${100 / colLength}%`,
                       width: 'max-content',
                     }}

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/index.less

@@ -9,7 +9,7 @@
 @prefixCls: jfe-drip-table-generator-workstation-table-cell;
 
 .@{prefixCls}-group-wrapper {
-  min-height: 80px;
+  min-height: 40px;
   height: max-content;
   margin: 1px;
   width: 100%;
@@ -31,6 +31,7 @@
   border: 1px solid transparent;
   text-align: center;
   word-break: break-word;
+  padding: 6px;
 
   &:hover,
   &.empty {

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/cell/popover.tsx

@@ -55,12 +55,14 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,>(props: PopoverCell
     const options = props.column.options;
     return (
       <Popover
+        overlayStyle={typeof options.overlayStyle === 'object' ? options.overlayStyle : void 0}
+        overlayInnerStyle={typeof options.overlayInnerStyle === 'object' ? options.overlayInnerStyle : void 0}
         content={(
           <div
             className={classNames('jfe-drip-table-generator-workstation-table-cell-group-col', {
               checked: options.popover.key === currentComponentID,
             })}
-            style={{ position: 'relative' }}
+            style={{ position: 'relative', padding: '8px' }}
             onClick={(e) => {
               e.stopPropagation();
               props.onClick?.('column-item', {

packages/drip-table-generator/src/table-components/icon.ts

@@ -48,7 +48,7 @@ export default {
       visible: (_1: unknown, formData?: Record<string, unknown>) => formData?.['options.mode'] === 'library',
     },
     {
-      name: 'options.iconRender',
+      name: 'options.icon.render',
       group: '属性',
       'ui:title': '自定义图标',
       'ui:type': 'code-editor',

packages/drip-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip-table",
-  "version": "3.0.3-alpha.3",
+  "version": "3.0.3-alpha.4",
   "description": "A tiny and powerful enterprise-class solution for building tables.",
   "main": "dist/index.min.js",
   "module": "lib/index.js",