Generator panel export

docs/drip-table-generator/demo/component-settings.ts

@@ -1,6 +1,7 @@
-import { DataSourceTypeAbbr, DripTableGeneratorProps } from 'drip-table-generator';
+import { DripTableRecordTypeBase, DripTableRecordTypeWithSubtable } from 'drip-table';
+import { DripTableGeneratorProps } from 'drip-table-generator';
 
-const CustomGeneratorComponentPanel: DripTableGeneratorProps<DataSourceTypeAbbr<never>>['customComponentPanel'] = {
+const CustomGeneratorComponentPanel: DripTableGeneratorProps<DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, never>>['customComponentPanel'] = {
   mode: 'add',
   configs: [
     {

packages/drip-table-generator/.eslintrc.js

@@ -20,6 +20,13 @@ const javascriptRules = {
   'unicorn/no-array-reduce': 'off',
   'unicorn/prefer-switch': 'off',
   'unicorn/explicit-length-check': 'off',
+  'react/jsx-curly-spacing': [
+    'error',
+    {
+      when: 'always',
+      attributes: { when: 'never' },
+    },
+  ],
 };
 
 const typescriptRules = {

packages/drip-table-generator/package.json

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

packages/drip-table-generator/src/context/index.ts

@@ -5,11 +5,9 @@
  * @modifier : helloqian12138 ([email protected])
  * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
  */
-import { DripTableExtraOptions } from 'drip-table';
+import { DripTableExtraOptions, DripTableRecordTypeBase, DripTableRecordTypeWithSubtable, ExtractDripTableExtraOption } from 'drip-table';
 import { createContext } from 'react';
 
-import { DataSourceTypeAbbr } from '../typing';
-
 export type DripTableGeneratorStates = Omit<DripTableGeneratorContext, 'setState'>;
 
 export interface DripTableGeneratorContext {
@@ -27,7 +25,7 @@ export interface DripTableGeneratorContext {
   /**
    * 表格数据，generator 不解析具体数据结构，仅仅透传给 drip-table
    */
-  previewDataSource: DataSourceTypeAbbr<NonNullable<DripTableExtraOptions['SubtableDataSourceKey']>>[];
+  previewDataSource: DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<Partial<DripTableExtraOptions>, 'SubtableDataSourceKey'>>[];
   /**
    * 属性栏类型，根据类型展示不同的抽屉
    */

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

@@ -7,7 +7,7 @@
  */
 import { ExclamationCircleTwoTone } from '@ant-design/icons';
 import { Result } from 'antd';
-import { DripTableExtraOptions } from 'drip-table';
+import { DripTableExtraOptions, DripTableRecordTypeBase, DripTableRecordTypeWithSubtable, ExtractDripTableExtraOption } from 'drip-table';
 import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
 
@@ -16,10 +16,10 @@ import CustomForm from '@/components/CustomForm';
 import { GeneratorContext } from '@/context';
 import { DTGTableConfig, TableConfigsContext } from '@/context/table-configs';
 import { getColumnItemConfigs, getComponentsConfigs } from '@/layouts/utils';
-import { DataSourceTypeAbbr, DripTableGeneratorProps } from '@/typing';
+import { DripTableGeneratorProps } from '@/typing';
 
 interface ComponentConfigFormProps<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 > {
   customAttributeComponents: DripTableGeneratorProps<RecordType, ExtraOptions>['customAttributeComponents'];
@@ -32,12 +32,12 @@ interface ComponentConfigFormProps<
 const errorBoundary = (message?: string) => (
   <Result
     icon={<ExclamationCircleTwoTone />}
-    title={<div style={{ color: '#999' }}>{ message }</div>}
+    title={<div style={{ color: '#999' }}>{message}</div>}
   />
 );
 
 function ComponentConfigForm<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 >(props: ComponentConfigFormProps<RecordType, ExtraOptions>) {
   const { currentColumnID, currentTableID, previewDataSource } = React.useContext(GeneratorContext);
@@ -220,7 +220,7 @@ function ComponentConfigForm<
   };
   return (
     <TableConfigsContext.Consumer>
-      { ({ tableConfigs, setTableColumns }) => {
+      {({ tableConfigs, setTableColumns }) => {
         const tableIndex = tableConfigs.findIndex(item => item.tableId === currentTableID);
         const currentColumn = tableConfigs[tableIndex]?.columns.find(item => item.key === currentColumnID);
         if (!currentColumn) {
@@ -248,7 +248,7 @@ function ComponentConfigForm<
             }}
           />
         );
-      } }
+      }}
     </TableConfigsContext.Consumer>
   );
 }

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

@@ -9,7 +9,7 @@ import './index.less';
 
 import { ExclamationCircleTwoTone } from '@ant-design/icons';
 import { Result } from 'antd';
-import { DripTableExtraOptions } from 'drip-table';
+import { DripTableExtraOptions, DripTableRecordTypeBase, DripTableRecordTypeWithSubtable, ExtractDripTableExtraOption } from 'drip-table';
 import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
 
@@ -18,12 +18,12 @@ import CustomForm from '@/components/CustomForm';
 import { GeneratorContext } from '@/context';
 import { DTGTableConfig, TableConfigsContext } from '@/context/table-configs';
 import { getColumnItemConfigs, getComponentsConfigs } from '@/layouts/utils';
-import { DataSourceTypeAbbr, DripTableGeneratorProps } from '@/typing';
+import { DripTableGeneratorProps } from '@/typing';
 
 import { getColumnItemByPath, updateColumnItemByPath } from '../utils';
 
 interface ComponentItemConfigFormProps<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 > {
   containerType: 'group' | 'popover';
@@ -38,12 +38,12 @@ const errorBoundary = (message?: string) => (
   <Result
     className="jfe-drip-table-generator-component-item-config-result"
     icon={<ExclamationCircleTwoTone />}
-    title={<div style={{ color: '#999' }}>{ message }</div>}
+    title={<div style={{ color: '#999' }}>{message}</div>}
   />
 );
 
 function ComponentItemConfigForm<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 >(props: ComponentItemConfigFormProps<RecordType, ExtraOptions>) {
   const { currentColumnID, currentComponentPath, currentTableID, previewDataSource } = React.useContext(GeneratorContext);
@@ -210,7 +210,7 @@ function ComponentItemConfigForm<
   };
   return (
     <TableConfigsContext.Consumer>
-      { ({ tableConfigs, setTableColumns }) => {
+      {({ tableConfigs, setTableColumns }) => {
         const tableIndex = tableConfigs.findIndex(item => item.tableId === currentTableID);
         const currentColumn = tableConfigs[tableIndex]?.columns.find(item => item.key === currentColumnID);
         let currentColumnItem;
@@ -251,7 +251,7 @@ function ComponentItemConfigForm<
             }}
           />
         );
-      } }
+      }}
     </TableConfigsContext.Consumer>
   );
 }

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

@@ -5,20 +5,20 @@
  * @modifier : helloqian12138 ([email protected])
  * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
  */
-import { DripTableExtraOptions, DripTableSlotElementSchema } from 'drip-table';
+import { DripTableExtraOptions, DripTableRecordTypeBase, DripTableRecordTypeWithSubtable, DripTableSlotElementSchema, ExtractDripTableExtraOption } from 'drip-table';
 import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
 
 import { filterAttributes, filterAttributesByRegExp } from '@/utils';
 import CustomForm from '@/components/CustomForm';
 import { GeneratorContext } from '@/context';
 import { DTGTableConfig, TableConfigsContext } from '@/context/table-configs';
-import { DataSourceTypeAbbr, DripTableGeneratorProps, DTGComponentPropertySchema } from '@/typing';
+import { DripTableGeneratorProps, DTGComponentPropertySchema } from '@/typing';
 
 import { GlobalAttrFormConfigs } from './configs';
 
 interface GlobalConfigFormProps<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 > {
   customAttributeComponents: DripTableGeneratorProps<RecordType, ExtraOptions>['customAttributeComponents'];
@@ -28,7 +28,8 @@ interface GlobalConfigFormProps<
 }
 
 function GlobalConfigForm<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
+
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 >(props: GlobalConfigFormProps<RecordType, ExtraOptions>) {
   const context = React.useContext(GeneratorContext);
@@ -373,7 +374,7 @@ function GlobalConfigForm<
 
   return (
     <TableConfigsContext.Consumer>
-      { ({ tableConfigs, setTableConfigs }) => {
+      {({ tableConfigs, setTableConfigs }) => {
         const currentTableIndex = tableConfigs.findIndex(item => item.tableId === context.currentTableID);
         return (
           <CustomForm
@@ -392,7 +393,7 @@ function GlobalConfigForm<
             }}
           />
         );
-      } }
+      }}
     </TableConfigsContext.Consumer>
   );
 }

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

@@ -11,12 +11,12 @@ import './index.less';
 import { CloseOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import classNames from 'classnames';
-import { DripTableExtraOptions } from 'drip-table';
+import { DripTableExtraOptions, DripTableRecordTypeBase, DripTableRecordTypeWithSubtable, ExtractDripTableExtraOption } from 'drip-table';
 import React from 'react';
 
 import { GeneratorContext } from '@/context';
 import { TableConfigsContext } from '@/context/table-configs';
-import { DataSourceTypeAbbr, DripTableGeneratorProps } from '@/typing';
+import { DripTableGeneratorProps } from '@/typing';
 
 import { getComponentsConfigs } from '../utils';
 import ComponentConfigForm from './component-configs';
@@ -25,7 +25,7 @@ import GlobalConfigForm from './global-configs';
 import { getColumnItemByPath } from './utils';
 
 function AttributesLayout<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 >(props: DripTableGeneratorProps<RecordType, ExtraOptions>) {
   const body = React.useRef<HTMLDivElement>(null);
@@ -44,7 +44,7 @@ function AttributesLayout<
 
   return (
     <GeneratorContext.Consumer>
-      { ({ currentTableID, currentColumnID, currentComponentPath, drawerType, setState }) => {
+      {({ currentTableID, currentColumnID, currentComponentPath, drawerType, setState }) => {
         const currentTable = tableConfigs.find(item => item.tableId === currentTableID);
         const currentColumn = currentTable?.columns.find(item => item.key === currentColumnID);
         const isContainerColumn = currentColumn && (currentColumn.component === 'group' || currentColumn.component === 'popover');
@@ -73,31 +73,31 @@ function AttributesLayout<
                   currentComponentID: void 0,
                 })}
               />
-              <span className="jfe-drip-table-generator-attributes-layout-title">{ drawerType ? drawerTitleMapper[drawerType] : '' }</span>
-              { drawerType === 'column'
+              <span className="jfe-drip-table-generator-attributes-layout-title">{drawerType ? drawerTitleMapper[drawerType] : ''}</span>
+              {drawerType === 'column'
                 ? (
                   <span className="jfe-drip-table-generator-attributes-layout-component-title">
                     组件 &gt;
-                    { ' ' }
-                    { getComponentName(currentColumn?.component || '') }
+                    {' '}
+                    {getComponentName(currentColumn?.component || '')}
                   </span>
                 )
-                : null }
-              { drawerType === 'column-item'
+                : null}
+              {drawerType === 'column-item'
                 ? (
                   <span className="jfe-drip-table-generator-attributes-layout-component-title">
-                    { currentColumnItem ? `子组件 > ${getComponentName(currentColumnItem?.component)}` : '' }
+                    {currentColumnItem ? `子组件 > ${getComponentName(currentColumnItem?.component)}` : ''}
                   </span>
                 )
-                : null }
-              { drawerType === 'table'
+                : null}
+              {drawerType === 'table'
                 ? (
                   <span className="jfe-drip-table-generator-attributes-layout-component-title">
                     表格ID：
-                    { currentTableID }
+                    {currentTableID}
                   </span>
                 )
-                : null }
+                : null}
             </div>
             <div className="jfe-drip-table-generator-attributes-layout-attributes-drawer-body" ref={body}>
               {
@@ -136,7 +136,7 @@ function AttributesLayout<
             </div>
           </div>
         );
-      } }
+      }}
     </GeneratorContext.Consumer>
   );
 }

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

@@ -9,18 +9,18 @@ import './index.less';
 
 import { Modal } from 'antd';
 import classNames from 'classnames';
-import { DripTableExtraOptions } from 'drip-table';
+import { DripTableExtraOptions, DripTableRecordTypeBase, DripTableRecordTypeWithSubtable, ExtractDripTableExtraOption } from 'drip-table';
 import React from 'react';
 
 import { GeneratorContext } from '@/context';
 
-import { DataSourceTypeAbbr, DripTableGeneratorProps } from '../typing';
+import { DripTableGeneratorProps } from '../typing';
 import AttributesLayout from './attributes-layout';
 import TableWorkStation from './table-workstation';
 import Toolbar from './toolbar';
 
 function GeneratorLayout<
-  RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
+  RecordType extends DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, ExtractDripTableExtraOption<ExtraOptions, 'SubtableDataSourceKey'>>,
   ExtraOptions extends Partial<DripTableExtraOptions> = never,
 >(props: DripTableGeneratorProps<RecordType, ExtraOptions>) {
   const { drawerType } = React.useContext(GeneratorContext);
@@ -29,15 +29,15 @@ function GeneratorLayout<
       className="jfe-drip-table-generator-layouts-model-container"
       style={{ ...props.style, width: props.width ?? props.style?.width ?? 1000, height: props.height ?? props.style?.height ?? 640 }}
     >
-      { props.showToolbar !== false && <Toolbar {...props} /> }
+      {props.showToolbar !== false && <Toolbar {...props} />}
       <div className={classNames('jfe-drip-table-generator-layouts-wrapper', { full: props.showToolbar === false })}>
         <div className={classNames('jfe-drip-table-generator-layouts-table-workstation', {
           fixed: (drawerType === 'column' || drawerType === 'column-item') && props.showAttributeLayout !== false,
         })}
         >
           <TableWorkStation {...props} />
         </div>
-        { props.showAttributeLayout !== false && <AttributesLayout {...props} /> }
+        {props.showAttributeLayout !== false && <AttributesLayout {...props} />}
       </div>
     </div>
   ), [
@@ -49,15 +49,15 @@ function GeneratorLayout<
         className="jfe-drip-table-generator-layouts-container"
         style={{ ...props.style, width: props.width ?? props.style?.width ?? '100%', height: props.height ?? props.style?.height ?? '100%' }}
       >
-        { props.showToolbar !== false && <Toolbar {...props} /> }
+        {props.showToolbar !== false && <Toolbar {...props} />}
         <div className={classNames('jfe-drip-table-generator-layouts-wrapper', { full: props.showToolbar === false })}>
           <div className={classNames('jfe-drip-table-generator-layouts-table-workstation', {
             fixed: drawerType && props.showAttributeLayout !== false,
           })}
           >
             <TableWorkStation {...props} />
           </div>
-          { props.showAttributeLayout !== false && <AttributesLayout {...props} /> }
+          {props.showAttributeLayout !== false && <AttributesLayout {...props} />}
         </div>
       </div>
     )