amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/TableView.tsx

@@ -14,7 +14,7 @@ import {
   RendererInfo,
   VRendererConfig
 } from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
 import {VRenderer} from '../component/VRenderer';
 import {TableViewEditor} from '../component/TableViewEditor';
 import {TableViewSchema} from 'amis/lib/renderers/TableView';
@@ -179,35 +179,75 @@ export class TableViewPlugin extends BasePlugin {
   panelBody = [
     getSchemaTpl('tabs', [
       {
-        title: '常规',
+        title: '属性',
+        className: 'p-none',
         body: [
-          {type: 'input-text', label: '宽度', name: 'width', clearable: true},
-          {
-            type: 'input-text',
-            label: '默认内边距',
-            name: 'padding',
-            clearable: true
-          },
-          {
-            type: 'switch',
-            name: 'border',
-            mode: 'inline',
-            className: 'w-full',
-            label: '是否显示边框'
-          },
-          {
-            label: '边框颜色',
-            type: 'input-color',
-            name: 'borderColor'
-          }
+          getSchemaTpl('collapseGroup', [
+            {
+              title: '常用',
+              body: [
+                {
+                  label: '标题',
+                  name: 'caption',
+                  type: 'input-text'
+                },
+                {
+                  label: '标题位置',
+                  name: 'captionSide',
+                  type: 'button-group-select',
+                  size: 'sm',
+                  mode: 'row',
+                  className: 'ae-buttonGroupSelect--justify',
+                  visibleOn: 'this.caption',
+                  options: [
+                    {label: '顶部', value: 'top'},
+                    {label: '底部', value: 'bottom'}
+                  ]
+                },
+                {
+                  type: 'input-text',
+                  label: '视图宽度',
+                  name: 'width',
+                  clearable: true
+                },
+                {
+                  type: 'input-text',
+                  label: '单元格默认内间距',
+                  name: 'padding',
+                  clearable: true
+                },
+                {
+                  label: '显示边框',
+                  name: 'border',
+                  type: 'switch',
+                  mode: 'row',
+                  inputClassName: 'inline-flex justify-between flex-row-reverse'
+                },
+                {
+                  label: '边框颜色',
+                  type: 'input-color',
+                  name: 'borderColor',
+                  visibleOn: 'this.border',
+                  pipeIn: defaultValue('#eceff8')
+                }
+              ]
+            }
+          ])
         ]
       },
       {
         title: '外观',
-        body: [getSchemaTpl('className'), getSchemaTpl('style')]
+        className: 'p-none',
+        body: getSchemaTpl('collapseGroup', [
+          ...getSchemaTpl('style:common'),
+          {
+            title: 'CSS 类名',
+            body: [getSchemaTpl('className')]
+          }
+        ])
       },
       {
-        title: '显隐',
+        title: '状态',
         body: [getSchemaTpl('visible')]
       }
     ])
@@ -228,6 +268,7 @@ export class TableViewPlugin extends BasePlugin {
       const id = td.$$id;
       return (
         <VRenderer
+          type={info.type}
           plugin={info.plugin}
           renderer={info.renderer}
           key={id}
@@ -257,6 +298,7 @@ export class TableViewPlugin extends BasePlugin {
       const id = tr.$$id;
       return (
         <VRenderer
+          type={info.type}
           plugin={info.plugin}
           renderer={info.renderer}
           key={id}
@@ -280,77 +322,126 @@ export class TableViewPlugin extends BasePlugin {
     panelTitle: '单元格',
     panelBodyCreator: (context: BaseEventContext) => {
       return [
-        {
-          label: '单元格背景色',
-          type: 'input-color',
-          name: 'background'
-        },
-        {
-          label: '文字颜色',
-          type: 'input-color',
-          name: 'color'
-        },
-        {
-          type: 'switch',
-          name: 'bold',
-          mode: 'inline',
-          className: 'w-full',
-          label: '文字加粗'
-        },
-        {
-          type: 'input-number',
-          name: 'padding',
-          label: '内边距'
-        },
-        {
-          type: 'select',
-          name: 'align',
-          label: '水平对齐',
-          options: [
-            {
-              label: '左',
-              value: 'left'
-            },
-            {
-              label: '中',
-              value: 'center'
-            },
-            {
-              label: '右',
-              value: 'right'
-            }
-          ]
-        },
-        {
-          type: 'select',
-          name: 'valign',
-          label: '垂直对齐',
-          options: [
-            {
-              label: '顶',
-              value: 'top'
-            },
-            {
-              label: '中',
-              value: 'middle'
-            },
-            {
-              label: '底',
-              value: 'bottom'
-            }
-          ]
-        },
-        {
-          type: 'input-number',
-          name: 'rowspan',
-          label: '跨几行'
-        },
-        {
-          type: 'input-number',
-          name: 'colspan',
-          label: '跨几列'
-        },
-        getSchemaTpl('style')
+        getSchemaTpl('tabs', [
+          {
+            title: '属性',
+            className: 'p-none',
+            body: [
+              getSchemaTpl('collapseGroup', [
+                {
+                  title: '显示',
+                  body: [
+                    {
+                      label: '背景色',
+                      type: 'input-color',
+                      name: 'background'
+                    },
+                    {
+                      label: '文字颜色',
+                      type: 'input-color',
+                      name: 'color'
+                    },
+                    {
+                      label: '文字加粗',
+                      name: 'bold',
+                      type: 'switch',
+                      mode: 'row',
+                      inputClassName:
+                        'inline-flex justify-between flex-row-reverse'
+                    }
+                  ]
+                },
+                {
+                  title: '布局',
+                  body: [
+                    {
+                      type: 'input-text',
+                      label: '单元格宽度',
+                      name: 'width',
+                      clearable: true
+                    },
+                    {
+                      type: 'input-number',
+                      name: 'padding',
+                      label: '单元格内边距'
+                    },
+                    {
+                      label: '水平对齐',
+                      name: 'align',
+                      type: 'button-group-select',
+                      size: 'sm',
+                      mode: 'row',
+                      className: 'ae-buttonGroupSelect--justify',
+                      options: [
+                        {
+                          label: '',
+                          value: 'left',
+                          icon: 'fa fa-align-left'
+                        },
+                        {
+                          label: '',
+                          value: 'center',
+                          icon: 'fa fa-align-center'
+                        },
+                        {
+                          label: '',
+                          value: 'right',
+                          icon: 'fa fa-align-right'
+                        },
+                        {
+                          label: '',
+                          value: 'justify',
+                          icon: 'fa fa-align-justify'
+                        }
+                      ]
+                    },
+                    {
+                      label: '垂直对齐',
+                      name: 'valign',
+                      type: 'button-group-select',
+                      size: 'sm',
+                      mode: 'row',
+                      className: 'ae-buttonGroupSelect--justify',
+                      options: [
+                        {
+                          label: '顶部',
+                          value: 'top'
+                        },
+                        {
+                          label: '居中',
+                          value: 'middle'
+                        },
+                        {
+                          label: '底部',
+                          value: 'bottom'
+                        },
+                        {
+                          label: '基线对齐',
+                          value: 'baseline'
+                        }
+                      ]
+                    },
+                    {
+                      type: 'input-number',
+                      name: 'colspan',
+                      label: '水平合并列数'
+                    },
+                    {
+                      type: 'input-number',
+                      name: 'rowspan',
+                      label: '垂直合并列数'
+                    }
+                  ]
+                }
+              ])
+            ]
+          },
+          {
+            title: '外观',
+            className: 'p-none',
+            body: getSchemaTpl('collapseGroup', getSchemaTpl('style:common'))
+          }
+        ])
       ];
     }
   };
@@ -359,16 +450,28 @@ export class TableViewPlugin extends BasePlugin {
     panelTitle: ' 行',
     panelBodyCreator: (context: BaseEventContext) => {
       return [
-        {
-          label: '行背景色',
-          type: 'input-color',
-          name: 'background'
-        },
-        {
-          label: '行高度',
-          type: 'input-number',
-          name: 'height'
-        }
+        getSchemaTpl('tabs', [
+          {
+            title: '属性',
+            body: [
+              {
+                label: '行高度',
+                type: 'input-number',
+                name: 'height'
+              },
+              {
+                label: '行背景色',
+                type: 'input-color',
+                name: 'background'
+              }
+            ]
+          },
+          {
+            title: '外观',
+            className: 'p-none',
+            body: getSchemaTpl('collapseGroup', getSchemaTpl('style:common'))
+          }
+        ])
       ];
     }
   };
@@ -391,6 +494,7 @@ export class TableViewPlugin extends BasePlugin {
     panels: Array<BasicPanelItem>
   ) {
     super.buildEditorPanel(context, panels);
+    const store = this.manager.store;
     if (context.info.schemaPath.endsWith('/td')) {
       panels.push({
         key: 'td',
@@ -403,7 +507,8 @@ export class TableViewPlugin extends BasePlugin {
             : this.tdVRendererConfig.panelControls!,
           body: this.tdVRendererConfig.panelBodyCreator
             ? this.tdVRendererConfig.panelBodyCreator(context)
-            : this.tdVRendererConfig.panelBody!
+            : this.tdVRendererConfig.panelBody!,
+          panelById: store.activeId
         })
       });
     } else if (context.info.schemaPath.endsWith('/tr')) {
@@ -418,7 +523,8 @@ export class TableViewPlugin extends BasePlugin {
             : this.trVRendererConfig.panelControls!,
           body: this.trVRendererConfig.panelBodyCreator
             ? this.trVRendererConfig.panelBodyCreator(context)
-            : this.trVRendererConfig.panelBody!
+            : this.trVRendererConfig.panelBody!,
+          panelById: store.activeId
         })
       });
     }