@operato/data-grist 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/handlers/contextmenu-tree-mutation.ts

@@ -0,0 +1,98 @@
+import { html } from 'lit'
+import { OxPopupMenu } from '@operato/popup'
+
+import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, GristData, GristRecord } from '../types'
+
+function dispatchEvent(field: DataGridField, event: string) {
+  field.dispatchEvent(
+    new CustomEvent(event, {
+      bubbles: true,
+      composed: true,
+      detail: field
+    })
+  )
+}
+
+/*
+ * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
+ * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
+ */
+export const ContextMenuTreeMutation = function (
+  columns: ColumnConfig[],
+  data: GristData,
+  column: ColumnConfig,
+  record: GristRecord,
+  rowIndex: number,
+  field: DataGridField,
+  event: Event
+): void {
+  const e = event as PointerEvent
+  if (!('pageX' in e && 'pageY' in e)) {
+    return
+  }
+
+  e.preventDefault()
+
+  OxPopupMenu.open({
+    template: html`
+      <ox-popup-menuitem
+        label="add sibling node"
+        @click=${() => {
+          dispatchEvent(field, 'add-sibling-node')
+        }}
+      >
+        <mwc-icon slot="icon">add</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="add child node"
+        @click=${() => {
+          dispatchEvent(field, 'add-child-node')
+        }}
+      >
+        <mwc-icon slot="icon">playlist_add</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="move up"
+        @click=${() => {
+          dispatchEvent(field, 'move-up')
+        }}
+      >
+        <mwc-icon slot="icon">arrow_upward</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="move down"
+        @click=${() => {
+          dispatchEvent(field, 'move-down')
+        }}
+      >
+        <mwc-icon slot="icon">arrow_downward</mwc-icon>
+      </ox-popup-menuitem>
+
+      <div separator></div>
+
+      <ox-popup-menuitem
+        label="collapse all"
+        @click=${() => {
+          dispatchEvent(field, 'collapse-all')
+        }}
+      >
+        <mwc-icon slot="icon">unfold_less</mwc-icon>
+      </ox-popup-menuitem>
+
+      <ox-popup-menuitem
+        label="expand all"
+        @click=${() => {
+          dispatchEvent(field, 'expand-all')
+        }}
+      >
+        <mwc-icon slot="icon">unfold_more</mwc-icon>
+      </ox-popup-menuitem>
+    `,
+    top: e.pageY,
+    left: e.pageX
+  })
+}

package/src/handlers/registry.ts

@@ -1,4 +1,5 @@
 import { GristEventHandler } from '../types'
+import { ContextMenuTreeMutation } from './contextmenu-tree-mutation'
 import { MoveDown } from './move-down'
 import { MoveUp } from './move-up'
 import { RecordCopy } from './record-copy'
@@ -16,7 +17,8 @@ var HANDLERS: {
   'move-up': MoveUp as GristEventHandler,
   'move-down': MoveDown as GristEventHandler,
   'record-copy': RecordCopy as GristEventHandler,
-  'record-delete': RecordDelete as GristEventHandler
+  'record-delete': RecordDelete as GristEventHandler,
+  'contextmenu-tree-mutation': ContextMenuTreeMutation as GristEventHandler
 }
 
 export function registerGristEventHandler(type: string, handler: GristEventHandler) {

package/src/renderers/ox-grist-renderer-tree.ts

@@ -74,8 +74,8 @@ export class OxGristRendererTree extends OxGristRenderer {
       border-radius: 2px;
     }
 
-    span[label][selected] {
-      background-color: var(--primary-color, #1890ff);
+    span[label] {
+      flex: 1;
     }
 
     span[checkbox][checked='checked']::before {
@@ -182,4 +182,8 @@ export class OxGristRendererTree extends OxGristRenderer {
 
     this.requestUpdate()
   }
+
+  get editableOnClick() {
+    return false
+  }
 }

package/src/types.ts

@@ -111,7 +111,8 @@ export type GristEventHandler = (
   column?: ColumnConfig,
   record?: GristRecord,
   rowIndex?: number,
-  target?: any
+  target?: any,
+  e?: Event
 ) => void
 
 export type AccumulatorFunc =
@@ -160,7 +161,7 @@ export type LabelConfig =
       renderer: LabelRenderer
     }
 
-export type LabelRenderer = () => void
+export type LabelRenderer = (column: ColumnConfig) => void
 
 export type ColumnWidthCallback = (column: ColumnConfig) => string
 
@@ -234,6 +235,7 @@ export type GristEventHandlerSet = {
   click?: GristEventHandler
   dblclick?: GristEventHandler
   focus?: GristEventHandler
+  contextmenu?: GristEventHandler
 }
 
 export type ListConfig = {

package/stories/tree-column-with-checkbox.stories.ts

@@ -40,6 +40,7 @@ const fetchHandler: FetchHandler = async ({ page, limit }) => {
               name: 'subitem' + idx,
               description: 'sub items...',
               active: Math.round(Math.random() * 2) % 2 ? true : false,
+              accval: Math.random(),
               children: [
                 ...Array.from({ length: 3 }, (_, idx2) => {
                   return {
@@ -91,7 +92,7 @@ const config = {
       label: true,
       header: 'name',
       record: {
-        editable: false,
+        editable: true,
         options: {
           selectable: true /* with checkbox */
         }
@@ -99,7 +100,10 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 200,
-      fixed: true
+      fixed: true,
+      handlers: {
+        contextmenu: 'contextmenu-tree-mutation'
+      }
     },
     {
       type: 'gutter',
@@ -157,6 +161,7 @@ const config = {
     }
   ],
   rows: {
+    appendable: false,
     selectable: {
       multiple: true
     },
@@ -210,7 +215,7 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+    href="https://fonts.googleapis.com/css?family=Material+Icons"
     rel="stylesheet"
   />
   <link href="/themes/app-theme.css" rel="stylesheet" />

package/stories/tree-column.stories.ts

@@ -40,6 +40,7 @@ const fetchHandler: FetchHandler = async ({ page, limit }) => {
               name: 'subitem' + idx,
               description: 'sub items...',
               active: Math.round(Math.random() * 2) % 2 ? true : false,
+              accval: Math.random(),
               children: [
                 ...Array.from({ length: 3 }, (_, idx2) => {
                   return {
@@ -91,7 +92,7 @@ const config = {
       label: true,
       header: 'name',
       record: {
-        editable: false,
+        editable: true,
         options: {
           selectable: false
         }
@@ -99,7 +100,10 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 200,
-      fixed: true
+      fixed: true,
+      handlers: {
+        contextmenu: 'contextmenu-tree-mutation'
+      }
     },
     {
       type: 'gutter',
@@ -157,6 +161,7 @@ const config = {
     }
   ],
   rows: {
+    appendable: false,
     selectable: {
       multiple: true
     },
@@ -209,7 +214,7 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+    href="https://fonts.googleapis.com/css?family=Material+Icons"
     rel="stylesheet"
   />
   <link href="/themes/app-theme.css" rel="stylesheet" />