Fix/generator/groups

docs/demo-data.ts

@@ -439,7 +439,10 @@ export const mockData: DripTableRecordTypeWithSubtable<SampleRecordType, Subtabl
   {
     id: 1,
     name: '商品一',
-    pictureUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png',
+    pictureUrl: [
+      'https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png',
+      'https://img11.360buyimg.com/n1/jfs/t1/159786/31/30814/90307/6343dea0E9d5574ae/12d488e175b2525f.jpg.avif',
+    ],
     description: '商品是为了出售而生产的劳动成果',
     status: 'onSale',
     price: 7999,

packages/drip-table-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip-table-generator",
-  "version": "3.1.4-alpha.2",
+  "version": "3.1.4-alpha.3",
   "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/utils.ts

@@ -26,12 +26,12 @@ export const updateColumnItemByPath = (
     const items = columnSchema.options.items as DTGTableConfig['columns'][number];
     if (rest.length === 0) {
       const newSchema = cloneDeep(schema);
-      items[key] = items[key] && 'component' in items[key]
-        ? newSchema
-        : {
+      items[key] = items[key] && 'schema' in items[key]
+        ? {
           ...items[key],
           schema: newSchema,
-        };
+        }
+        : newSchema;
     } else {
       items[key] = updateColumnItemByPath(items[key], rest, schema);
     }
@@ -40,7 +40,7 @@ export const updateColumnItemByPath = (
       ? cloneDeep(schema)
       : updateColumnItemByPath(columnSchema.options[key] as DTGTableConfig['columns'][number], rest, schema);
   }
-  if ('schema' in (column ?? {})) {
+  if (column && 'schema' in column) {
     return { ...column, schema: columnSchema };
   }
   return columnSchema;

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

@@ -156,7 +156,11 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
                             customColumnAddPanel={props.customColumnAddPanel}
                             onClose={() => setDropDownIndex([])}
                             onConfirm={(column, tableIndex) => {
-                              props.onAddColumnItem([componentIndex], column as DripTableBuiltInColumnSchema, tableIndex);
+                              const columnSchema = {
+                                ...column,
+                                style: { width: `${100 / colLength}%` },
+                              } as DripTableBuiltInColumnSchema;
+                              props.onAddColumnItem([componentIndex], columnSchema, tableIndex);
                             }}
                           />
                         )}

packages/drip-table-generator/src/layouts/toolbar/index.tsx

@@ -8,12 +8,12 @@
 import './index.less';
 
 import { ArrowLeftOutlined, CloseOutlined, SaveOutlined } from '@ant-design/icons';
-import { Button, Tooltip } from 'antd';
-import { DripTableExtraOptions } from 'drip-table';
+import { Button, message, Tooltip } from 'antd';
+import { DripTableColumnSchema, DripTableExtraOptions } from 'drip-table';
 import React from 'react';
 
 import { GeneratorContext } from '@/context';
-import { TableConfigsContext } from '@/context/table-configs';
+import { DTGTableConfig, TableConfigsContext } from '@/context/table-configs';
 import { getSchemaValue } from '@/layouts/utils';
 import { DataSourceTypeAbbr, DripTableGeneratorProps } from '@/typing';
 
@@ -39,19 +39,47 @@ function generateDropdownProps(props: {
   };
 }
 
-const ModeSwitch = (props: { style?: React.CSSProperties; disabled?: boolean }) => (
-  <GeneratorContext.Consumer>
-    { ({ mode, setState }) => (
-      <Button
-        style={{ marginLeft: 24, borderRadius: '6px', ...props.style }}
-        onClick={() => setState({ mode: mode === 'edit' ? 'preview' : 'edit', drawerType: void 0 })}
-        disabled={props.disabled}
-      >
-        { mode === 'edit' ? '预览' : '编辑' }
-      </Button>
-    ) }
-  </GeneratorContext.Consumer>
-);
+const ModeSwitch = (props: { style?: React.CSSProperties; disabled?: boolean }) => {
+  const { tableConfigs } = React.useContext(TableConfigsContext);
+  const hasNullItem = (configs: DTGTableConfig[]) => {
+    const hasNullColumn = (columns: (DripTableColumnSchema | null)[]): boolean => {
+      for (const column of columns) {
+        if (column === null) {
+          return true;
+        }
+        if (column.component === 'group' && column.options?.items && hasNullColumn(column.options.items as (DripTableColumnSchema | null)[])) {
+          return true;
+        }
+      }
+      return false;
+    };
+    for (const config of configs) {
+      if (hasNullColumn(config.columns)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  return (
+    <GeneratorContext.Consumer>
+      { ({ mode, setState }) => (
+        <Button
+          style={{ marginLeft: 24, borderRadius: '6px', ...props.style }}
+          onClick={() => {
+            if (hasNullItem(tableConfigs)) {
+              message.warning('组合组件的子组件未设置完成，请设置完成后预览');
+              return;
+            }
+            setState({ mode: mode === 'edit' ? 'preview' : 'edit', drawerType: void 0 });
+          }}
+          disabled={props.disabled}
+        >
+          { mode === 'edit' ? '预览' : '编辑' }
+        </Button>
+      ) }
+    </GeneratorContext.Consumer>
+  );
+};
 
 const Toolbar = <
 RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,

packages/drip-table/package.json

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

packages/drip-table/src/components/cell-components/image/index.tsx

@@ -71,12 +71,12 @@ export default class DTCImage<RecordType extends DripTableRecordTypeBase> extend
     const options = this.props.schema.options;
     if (this.props.preview) {
       return (
-        <img
-          style={{
-            width: options.imageWidth,
-            height: options.imageHeight,
-          }}
-          src={this.value || options.imagePlaceholder || this.DEFAULT_IMAGE}
+        <Image
+          width={options.imageWidth}
+          height={options.imageHeight}
+          src={this.value}
+          preview={false}
+          fallback={options.imagePlaceholder || this.DEFAULT_IMAGE}
         />
       );
     }

packages/drip-table/src/wrapper/index.tsx

@@ -90,14 +90,14 @@ const DripTableWrapper = React.forwardRef(<
         const validateColumnSchema = (column: (typeof rtp.schema.columns)[number], path: string = 'column'): string | null => {
           let errorMessage: string | null = null;
           let schema: SchemaObject | undefined;
-          const BuiltInComponent = DripTableBuiltInComponents[column.component];
+          const BuiltInComponent = DripTableBuiltInComponents[column?.component];
           if (BuiltInComponent) {
             schema = BuiltInComponent.schema;
             if (!schema) {
               errorMessage = `Built-in component must contains a valid options ajv schema! (component: ${column.component})`;
             }
           } else {
-            const [libName, componentName] = column.component.split('::');
+            const [libName, componentName] = column?.component.split('::');
             if (libName && componentName) {
               schema = rtp.components?.[libName]?.[componentName]?.schema;
             }