Merge pull request #3777 from VisActor/refactor/vtable-editors-unifiedStyle

Refactor/vtable editors unified style

Author: fangsmile

packages/vtable-editors/src/date-input-editor.ts

@@ -18,6 +18,19 @@ export class DateInputEditor extends InputEditor implements IEditor {
     input.style.position = 'absolute';
     input.style.backgroundColor = '#FFFFFF';
 
+    input.style.borderRadius = '0px';
+    input.style.border = '2px solid #d9d9d9';
+    // #region 为了保证input在focus时，没有圆角
+    input.addEventListener('focus', () => {
+      input.style.borderColor = '#4A90E2';
+      input.style.outline = 'none';
+    });
+
+    input.addEventListener('blur', () => {
+      input.style.borderColor = '#d9d9d9';
+      // input.style.boxShadow = 'none';
+    });
+
     this.element = input;
     this.container.appendChild(input);
     // 测试successCallback 调用是否正确

packages/vtable-editors/src/list-editor.ts

@@ -12,7 +12,6 @@ export class ListEditor implements IEditor {
   successCallback?: () => void;
 
   constructor(editorConfig: ListEditorConfig) {
-    console.log('listEditor constructor');
     this.editorConfig = editorConfig;
   }
 
@@ -25,6 +24,21 @@ export class ListEditor implements IEditor {
     select.style.width = '100%';
     select.style.boxSizing = 'border-box';
     select.style.backgroundColor = '#FFFFFF';
+    select.style.borderRadius = '0px';
+    select.style.border = '2px solid #d9d9d9';
+    // #region 为了保证input在focus时，没有圆角
+    select.addEventListener('focus', () => {
+      select.style.borderColor = '#4A90E2';
+      select.style.outline = 'none';
+    });
+
+    select.addEventListener('blur', () => {
+      select.style.borderColor = '#d9d9d9';
+      // input.style.boxShadow = 'none';
+    });
+
+
+
     this.element = select;
 
     // create option tags
@@ -72,10 +86,18 @@ export class ListEditor implements IEditor {
   }
 
   adjustPosition(rect: RectProps) {
-    this.element.style.top = rect.top + 'px';
-    this.element.style.left = rect.left + 'px';
-    this.element.style.width = rect.width + 'px';
-    this.element.style.height = rect.height + 'px';
+
+    //使border均分input位置rect的上下左右
+    const borderWidth = 2;
+    const top = rect.top - borderWidth / 2;
+    const left = rect.left - borderWidth / 2;
+    const width = rect.width + borderWidth;
+    const height = rect.height + borderWidth;
+
+    this.element.style.top =top + 'px';
+    this.element.style.left =left + 'px';
+    this.element.style.width = width + 'px';
+    this.element.style.height = height + 'px';
   }
 
   endEditing() {

packages/vtable-editors/src/textArea-editor.ts

@@ -28,8 +28,22 @@ export class TextAreaEditor implements IEditor {
     input.style.boxSizing = 'border-box';
     input.style.backgroundColor = '#FFFFFF';
 
-    this.element = input;
+    input.style.borderRadius = '0px';
+    input.style.border = '2px solid #d9d9d9';
+
+    // #region 为了保证input在focus时，没有圆角
+    input.addEventListener('focus', () => {
+      input.style.borderColor = '#4A90E2';
+      input.style.outline = 'none';
+    });
+
+    input.addEventListener('blur', () => {
+      input.style.borderColor = '#d9d9d9';
+      // input.style.boxShadow = 'none';
+      input.style.outline = 'none';
+    });
 
+    this.element = input;
     this.container.appendChild(input);
 
     // 监听键盘事件
@@ -69,10 +83,19 @@ export class TextAreaEditor implements IEditor {
   }
 
   adjustPosition(rect: RectProps) {
-    this.element.style.top = rect.top + 'px';
-    this.element.style.left = rect.left + 'px';
-    this.element.style.width = rect.width + 'px';
-    this.element.style.height = rect.height + 'px';
+
+
+    //使border均分input位置rect的上下左右
+    const borderWidth = 2;
+    const top = rect.top - borderWidth / 2;
+    const left = rect.left - borderWidth / 2;
+    const width = rect.width + borderWidth;
+    const height = rect.height + borderWidth;
+
+    this.element.style.top = top + 'px';
+    this.element.style.left = left + 'px';
+    this.element.style.width = width + 'px';
+    this.element.style.height = height + 'px';
   }
 
   endEditing() {

packages/vtable-plugins/demo/highlight-header/highlight-header.ts

@@ -2,6 +2,8 @@ import * as VTable from '@visactor/vtable';
 import { bindDebugTool } from '@visactor/vtable/es/scenegraph/debug-tool';
 import * as VTable_editors from '@visactor/vtable-editors';
 
+// import * as VTable_editors from '../../../vtable-editors/src/index'; // 直接引入，省的需要在vtable-editors中rushx build。
+
 import { HighlightHeaderWhenSelectCellPlugin } from '../../src';
 const CONTAINER_ID = 'vTable';
 const generatePersons = count => {
@@ -24,11 +26,19 @@ export function createTable() {
   const input_editor = new VTable_editors.InputEditor();
   VTable.register.editor('input-editor', input_editor);
 
+  const textArea_editor = new VTable_editors.TextAreaEditor();
+  VTable.register.editor('textArea-editor', textArea_editor);
+
+  const date_input_editor = new VTable_editors.DateInputEditor();
+  const list_editor = new VTable_editors.ListEditor({ values: ['girl', 'boy'] });
+  VTable.register.editor('date_input_editor', date_input_editor);
+  VTable.register.editor('list_editor', list_editor);
+
   const records = generatePersons(20);
   const columns: VTable.ColumnsDefine = [
     {
       field: 'id',
-      title: 'ID',
+      title: 'ID ( input-editor )',
       width: 'auto',
       minWidth: 50,
       sort: true,
@@ -37,9 +47,10 @@ export function createTable() {
     },
     {
       field: 'email1',
-      title: 'email',
-      width: 200,
+      title: 'email ( textArea-editor )',
+      width: 300,
       sort: true,
+      editor: 'textArea-editor',
       style: {
         underline: true,
         underlineDash: [2, 0],
@@ -48,13 +59,15 @@ export function createTable() {
     },
     {
       field: 'date1',
-      title: 'birthday',
-      width: 200
+      title: 'birthday ( date_input_editor )',
+      width: 300,
+      editor: 'date_input_editor'
     },
     {
       field: 'sex',
-      title: 'sex',
-      width: 100
+      title: 'sex ( list_editor )',
+      width: 300,
+      editor: 'list_editor'
     }
   ];
 
@@ -70,6 +83,8 @@ export function createTable() {
       outsideClickDeselect: true,
       headerSelectMode: 'body'
     },
+
+    editCellTrigger: 'click',
     autoWrapText: true,
     editor: 'input-editor',
     menu: {