@operato/data-grist 7.0.24 → 7.0.26

package/src/record-view/record-view-body.ts

@@ -7,19 +7,34 @@ import { customElement, property } from 'lit/decorators.js'
 import { ZERO_RECORD } from '../configure/zero-config'
 import { ColumnConfig, GristRecord } from '../types'
 import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'
-import { recordViewBodyKeydownHandler } from './event-handlers/record-view-body-keydown-handler'
 
 @customElement('ox-record-view-body')
 export class RecordViewBody extends LitElement {
   static styles = [
     css`
       :host {
+        display: block;
+        font-size: 16px; /* for ios safari */
+        place-content: center;
+      }
+
+      div[content] {
         display: grid;
-        grid-template-columns: 2fr 3fr 2fr 3fr;
+        grid-template-columns: 1fr 2fr;
         grid-auto-rows: min-content;
-        grid-gap: var(--record-view-gap);
-        padding: var(--record-view-padding);
-        font-size: 16px; /* for ios safari */
+        grid-gap: var(--record-view-gap, 16px);
+        padding: var(--record-view-padding, 16px);
+        box-sizing: border-box;
+      }
+
+      @media screen and (min-width: 601px) {
+        ox-grid-field {
+          max-width: 300px;
+        }
+
+        div[content] {
+          grid-template-columns: 1fr 1fr;
+        }
       }
 
       label {
@@ -31,6 +46,7 @@ export class RecordViewBody extends LitElement {
         font: var(--record-view-label-font);
         color: var(--record-view-label-color);
         text-align: right;
+        padding-right: var(--spacing-large);
       }
 
       label md-icon {
@@ -65,18 +81,6 @@ export class RecordViewBody extends LitElement {
         color: var(--record-view-focus-color);
         font-weight: bold;
       }
-
-      @media only screen and (max-width: 800px) {
-        :host {
-          grid-template-columns: 2fr 3fr;
-        }
-      }
-
-      @media (min-width: 1800px) {
-        :host {
-          grid-template-columns: 2fr 3fr 2fr 3fr 2fr 3fr;
-        }
-      }
     `
   ]
 
@@ -91,37 +95,62 @@ export class RecordViewBody extends LitElement {
 
     this.setAttribute('tabindex', '0')
 
-    this.renderRoot.addEventListener('keydown', recordViewBodyKeydownHandler.bind(this))
+    this.addEventListener('keydown', this._onKeyDown)
     this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener('keydown', this._onKeyDown)
+  }
+
+  _onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Tab') {
+      const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'))
+      const focused = this.renderRoot.querySelector('ox-grid-field[editing]')
+      const focusedIndex = fields.findIndex(field => field === focused)
+
+      let nextIndex = focusedIndex + (event.shiftKey ? -1 : 1)
+
+      if (nextIndex >= fields.length || nextIndex < 0) {
+        return // Let the default behavior happen if it's the last or first element
+      }
+
+      event.preventDefault()
+      fields[nextIndex]?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))
+    }
+  }
+
   render() {
     var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')
     var record = this.record
     var rowIndex = this.rowIndex
 
     return html`
-      ${columns.map(column => {
-        let { editable, mandatory } = column.record
-        if (typeof editable === 'function') {
-          editable = editable.call(this, record[column.name], column, record, rowIndex, this)
-        }
-
-        let dirtyFields = record['__dirtyfields__'] || {}
-
-        return html`
-          <label ?editable=${editable}
-            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label
-          >
-          <ox-grid-field
-            .rowIndex=${rowIndex}
-            .column=${column}
-            .record=${record}
-            .value=${record[column.name]}
-            ?dirty=${!!dirtyFields[column.name]}
-          ></ox-grid-field>
-        `
-      })}
+      <div content>
+        ${columns.map((column, index) => {
+          let { editable, mandatory } = column.record
+          if (typeof editable === 'function') {
+            editable = editable.call(this, record[column.name], column, record, rowIndex, this)
+          }
+
+          let dirtyFields = record['__dirtyfields__'] || {}
+
+          return html`
+            <label ?editable=${editable}
+              ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label
+            >
+            <ox-grid-field
+              .rowIndex=${rowIndex}
+              .column=${column}
+              .record=${record}
+              .value=${record[column.name]}
+              ?dirty=${!!dirtyFields[column.name]}
+              ?tabstop=${!!editable}
+            ></ox-grid-field>
+          `
+        })}
+      </div>
     `
   }