@dxos/react-ui-grid 0.6.11 → 0.6.12-main.5cc132e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/lib/browser/index.mjs +65 -3
  2. package/dist/lib/browser/index.mjs.map +3 -3
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/Grid.d.ts +3 -1
  5. package/dist/types/src/Grid.d.ts.map +1 -1
  6. package/dist/types/src/Grid.stories.d.ts +5 -0
  7. package/dist/types/src/Grid.stories.d.ts.map +1 -1
  8. package/package.json +8 -7
  9. package/src/Grid.stories.tsx +5 -0
  10. package/src/Grid.tsx +79 -3
package/dist/lib/browser/index.mjs CHANGED
@@ -1,18 +1,80 @@
1
1
  // packages/ui/react-ui-grid/src/Grid.tsx
2
2
  import "@dxos/lit-grid/dx-grid.pcss";
3
3
  import { createComponent } from "@lit/react";
4
- import React from "react";
4
+ import React, { useCallback, useRef, useState } from "react";
5
5
  import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
6
+ import { listener, useTextEditor } from "@dxos/react-ui-editor";
7
+ import { isNotFalsy } from "@dxos/util";
6
8
  var DxGrid = createComponent({
7
9
  tagName: "dx-grid",
8
10
  elementClass: NaturalDxGrid,
9
11
  react: React,
10
12
  events: {
11
- onAxisResize: "dx-axis-resize"
13
+ onAxisResize: "dx-axis-resize",
14
+ onEdit: "dx-edit-request"
12
15
  }
13
16
  });
17
+ var initialBox = {
18
+ insetInlineStart: 0,
19
+ insetBlockStart: 0,
20
+ inlineSize: 0,
21
+ blockSize: 0
22
+ };
14
23
  var Grid = (props) => {
15
- return /* @__PURE__ */ React.createElement(DxGrid, props);
24
+ const gridRef = useRef(null);
25
+ const [editBox, setEditBox] = useState(initialBox);
26
+ const [editing, setEditing] = useState(null);
27
+ const { parentRef: textboxRef, focusAttributes, view } = useTextEditor(() => ({
28
+ id: props.id,
29
+ autoFocus: !!editing,
30
+ extensions: [
31
+ listener({
32
+ onFocus: (focusing) => {
33
+ if (!focusing && editing) {
34
+ setEditing(null);
35
+ }
36
+ }
37
+ })
38
+ ].filter(isNotFalsy)
39
+ }), [
40
+ editing
41
+ ]);
42
+ const handleEdit = useCallback((event) => {
43
+ setEditBox(event.cellBox);
44
+ setEditing(event.cellIndex);
45
+ props?.onEdit?.(event);
46
+ }, []);
47
+ const handleEditorKeyDown = useCallback((event) => {
48
+ if (editing) {
49
+ switch (event.key) {
50
+ case "Enter":
51
+ setEditing(null);
52
+ gridRef.current?.refocus("down");
53
+ break;
54
+ case "Escape":
55
+ setEditing(null);
56
+ gridRef.current?.refocus();
57
+ break;
58
+ }
59
+ }
60
+ }, [
61
+ editing,
62
+ view
63
+ ]);
64
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
65
+ className: "absolute z-[1] hidden data-[editing=true]:block border p-px border-accentSurface",
66
+ "data-editing": !!editing,
67
+ ...focusAttributes,
68
+ style: editBox,
69
+ tabIndex: editing ? 0 : -1,
70
+ onKeyDown: handleEditorKeyDown,
71
+ ref: textboxRef
72
+ }), /* @__PURE__ */ React.createElement(DxGrid, {
73
+ ...props,
74
+ mode: editing ? "edit" : "browse",
75
+ onEdit: handleEdit,
76
+ ref: gridRef
77
+ }));
16
78
  };
17
79
  export {
18
80
  Grid
package/dist/lib/browser/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/Grid.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport React from 'react';\n\nimport { type DxAxisResize, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n },\n});\n\nexport type GridProps = DxGridProps & {\n onAxisResize: (event: DxAxisResize) => void;\n};\n\nexport const Grid = (props: GridProps) => {\n return <DxGrid {...props} />;\n};\n"],
5
- "mappings": ";AAGA,OAAO;AAEP,SAASA,uBAAuC;AAChD,OAAOC,WAAW;AAElB,SAA4BC,UAAUC,qBAAuC;AAE7E,IAAMC,SAASC,gBAAgB;EAC7BC,SAAS;EACTC,cAAcC;EACdC,OAAOC;EACPC,QAAQ;IACNC,cAAc;EAChB;AACF,CAAA;AAMO,IAAMC,OAAO,CAACC,UAAAA;AACnB,SAAO,sBAAA,cAACV,QAAWU,KAAAA;AACrB;",
6
- "names": ["createComponent", "React", "DxGrid", "NaturalDxGrid", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "Grid", "props"]
4
+ "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport React, { type KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';\nimport { listener, useTextEditor } from '@dxos/react-ui-editor';\nimport { isNotFalsy } from '@dxos/util';\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n },\n});\n\nexport type GridProps = DxGridProps & {\n id: string;\n onAxisResize: (event: DxAxisResize) => void;\n onEdit: (event: DxEditRequest) => void;\n};\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies DxEditRequest['cellBox'];\n\nexport const Grid = (props: GridProps) => {\n const gridRef = useRef<NaturalDxGrid | null>(null);\n const [editBox, setEditBox] = useState<DxEditRequest['cellBox']>(initialBox);\n const [editing, setEditing] = useState<DxEditRequest['cellIndex'] | null>(null);\n\n const {\n parentRef: textboxRef,\n focusAttributes,\n view,\n } = useTextEditor(\n () => ({\n id: props.id,\n autoFocus: !!editing,\n extensions: [\n listener({\n onFocus: (focusing: boolean) => {\n if (!focusing && editing) {\n setEditing(null);\n }\n },\n }),\n ].filter(isNotFalsy),\n }),\n [editing],\n );\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing(event.cellIndex);\n props?.onEdit?.(event);\n }, []);\n\n const handleEditorKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (editing) {\n switch (event.key) {\n case 'Enter':\n // console.warn('to do: save content');\n setEditing(null);\n gridRef.current?.refocus('down');\n break;\n case 'Escape':\n setEditing(null);\n gridRef.current?.refocus();\n break;\n }\n }\n },\n [editing, view],\n );\n\n return (\n <>\n <div\n className='absolute z-[1] hidden data-[editing=true]:block border p-px border-accentSurface'\n data-editing={!!editing}\n {...focusAttributes}\n style={editBox}\n tabIndex={editing ? 0 : -1}\n onKeyDown={handleEditorKeyDown}\n ref={textboxRef}\n />\n <DxGrid {...props} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={gridRef} />\n </>\n );\n};\n"],
5
+ "mappings": ";AAIA,OAAO;AAEP,SAASA,uBAAuC;AAChD,OAAOC,SAA6BC,aAAaC,QAAQC,gBAAgB;AAEzE,SAAgDC,UAAUC,qBAAuC;AACjG,SAASC,UAAUC,qBAAqB;AACxC,SAASC,kBAAkB;AAE3B,IAAMC,SAASC,gBAAgB;EAC7BC,SAAS;EACTC,cAAcC;EACdC,OAAOC;EACPC,QAAQ;IACNC,cAAc;IACdC,QAAQ;EACV;AACF,CAAA;AAQA,IAAMC,aAAa;EACjBC,kBAAkB;EAClBC,iBAAiB;EACjBC,YAAY;EACZC,WAAW;AACb;AAEO,IAAMC,OAAO,CAACC,UAAAA;AACnB,QAAMC,UAAUC,OAA6B,IAAA;AAC7C,QAAM,CAACC,SAASC,UAAAA,IAAcC,SAAmCX,UAAAA;AACjE,QAAM,CAACY,SAASC,UAAAA,IAAcF,SAA4C,IAAA;AAE1E,QAAM,EACJG,WAAWC,YACXC,iBACAC,KAAI,IACFC,cACF,OAAO;IACLC,IAAIb,MAAMa;IACVC,WAAW,CAAC,CAACR;IACbS,YAAY;MACVC,SAAS;QACPC,SAAS,CAACC,aAAAA;AACR,cAAI,CAACA,YAAYZ,SAAS;AACxBC,uBAAW,IAAA;UACb;QACF;MACF,CAAA;MACAY,OAAOC,UAAAA;EACX,IACA;IAACd;GAAQ;AAGX,QAAMe,aAAaC,YAAY,CAACC,UAAAA;AAC9BnB,eAAWmB,MAAMC,OAAO;AACxBjB,eAAWgB,MAAME,SAAS;AAC1BzB,WAAOP,SAAS8B,KAAAA;EAClB,GAAG,CAAA,CAAE;AAEL,QAAMG,sBAAsBJ,YAC1B,CAACC,UAAAA;AACC,QAAIjB,SAAS;AACX,cAAQiB,MAAMI,KAAG;QACf,KAAK;AAEHpB,qBAAW,IAAA;AACXN,kBAAQ2B,SAASC,QAAQ,MAAA;AACzB;QACF,KAAK;AACHtB,qBAAW,IAAA;AACXN,kBAAQ2B,SAASC,QAAAA;AACjB;MACJ;IACF;EACF,GACA;IAACvB;IAASK;GAAK;AAGjB,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACmB,OAAAA;IACCC,WAAU;IACVC,gBAAc,CAAC,CAAC1B;IACf,GAAGI;IACJuB,OAAO9B;IACP+B,UAAU5B,UAAU,IAAI;IACxB6B,WAAWT;IACXU,KAAK3B;MAEP,sBAAA,cAACzB,QAAAA;IAAQ,GAAGgB;IAAOqC,MAAM/B,UAAU,SAAS;IAAUb,QAAQ4B;IAAYe,KAAKnC;;AAGrF;",
6
+ "names": ["createComponent", "React", "useCallback", "useRef", "useState", "DxGrid", "NaturalDxGrid", "listener", "useTextEditor", "isNotFalsy", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "Grid", "props", "gridRef", "useRef", "editBox", "setEditBox", "useState", "editing", "setEditing", "parentRef", "textboxRef", "focusAttributes", "view", "useTextEditor", "id", "autoFocus", "extensions", "listener", "onFocus", "focusing", "filter", "isNotFalsy", "handleEdit", "useCallback", "event", "cellBox", "cellIndex", "handleEditorKeyDown", "key", "current", "refocus", "div", "className", "data-editing", "style", "tabIndex", "onKeyDown", "ref", "mode"]
7
7
  }
package/dist/lib/browser/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytes":2180,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1186},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"exports":["Grid"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytesInOutput":412},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0}},"bytes":508}}}
1
+ {"inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytes":9408,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":5069},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Grid"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytesInOutput":2142},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0}},"bytes":2238}}}
package/dist/types/src/Grid.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import '@dxos/lit-grid/dx-grid.pcss';
2
2
  import React from 'react';
3
- import { type DxAxisResize, type DxGridProps } from '@dxos/lit-grid';
3
+ import { type DxAxisResize, type DxEditRequest, type DxGridProps } from '@dxos/lit-grid';
4
4
  export type GridProps = DxGridProps & {
5
+ id: string;
5
6
  onAxisResize: (event: DxAxisResize) => void;
7
+ onEdit: (event: DxEditRequest) => void;
6
8
  };
7
9
  export declare const Grid: (props: GridProps) => React.JSX.Element;
8
10
  //# sourceMappingURL=Grid.d.ts.map
package/dist/types/src/Grid.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,6BAA6B,CAAC;AAGrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,YAAY,EAA2B,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAW9F,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,IAAI,UAAW,SAAS,sBAEpC,CAAC"}
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,6BAA6B,CAAC;AAGrC,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAA2B,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAclH,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,IAAI,UAAW,SAAS,sBAiEpC,CAAC"}
package/dist/types/src/Grid.stories.d.ts CHANGED
@@ -3,10 +3,14 @@ declare const _default: {
3
3
  title: string;
4
4
  component: (props: GridProps) => import("react").JSX.Element;
5
5
  decorators: import("@storybook/react/*").Decorator[];
6
+ parameters: {
7
+ layout: string;
8
+ };
6
9
  };
7
10
  export default _default;
8
11
  export declare const Basic: {
9
12
  args: {
13
+ id: string;
10
14
  cells: {
11
15
  '1,1': {
12
16
  value: string;
@@ -38,6 +42,7 @@ export declare const Basic: {
38
42
  };
39
43
  };
40
44
  onAxisResize: (event: import("packages/ui/lit-grid/dist/types/src").DxAxisResize) => void;
45
+ onEdit: (event: import("packages/ui/lit-grid/dist/types/src").DxEditRequest) => void;
41
46
  };
42
47
  };
43
48
  //# sourceMappingURL=Grid.stories.d.ts.map
package/dist/types/src/Grid.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/Grid.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;;;;;;AAE9C,wBAIE;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,CAAC"}
1
+ {"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/Grid.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;AAE9C,wBAKE;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BjB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-grid",
3
- "version": "0.6.11",
3
+ "version": "0.6.12-main.5cc132e",
4
4
  "description": "React component which manages a `dx-grid` Lit web component.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,18 +22,19 @@
22
22
  ],
23
23
  "dependencies": {
24
24
  "@lit/react": "^1.0.5",
25
- "@dxos/react-ui": "0.6.11",
26
- "@dxos/lit-grid": "0.6.11",
27
- "@dxos/react-ui-theme": "0.6.11",
28
- "@dxos/util": "0.6.11"
25
+ "@dxos/lit-grid": "0.6.12-main.5cc132e",
26
+ "@dxos/react-ui": "0.6.12-main.5cc132e",
27
+ "@dxos/react-ui-theme": "0.6.12-main.5cc132e",
28
+ "@dxos/react-ui-editor": "0.6.12-main.5cc132e",
29
+ "@dxos/util": "0.6.12-main.5cc132e"
29
30
  },
30
31
  "devDependencies": {
31
32
  "@types/react": "~18.2.0",
32
33
  "@types/react-dom": "~18.2.0",
33
34
  "react": "~18.2.0",
34
35
  "react-dom": "~18.2.0",
35
- "vite": "^5.3.4",
36
- "@dxos/storybook-utils": "0.6.11"
36
+ "vite": "5.4.7",
37
+ "@dxos/storybook-utils": "0.6.12-main.5cc132e"
37
38
  },
38
39
  "peerDependencies": {
39
40
  "react": "^18.0.0",
package/src/Grid.stories.tsx CHANGED
@@ -10,10 +10,12 @@ export default {
10
10
  title: 'react-ui-grid/Grid',
11
11
  component: Grid,
12
12
  decorators: [withTheme],
13
+ parameters: { layout: 'fullscreen' },
13
14
  };
14
15
 
15
16
  export const Basic = {
16
17
  args: {
18
+ id: 'story',
17
19
  cells: {
18
20
  '1,1': {
19
21
  // end: '8,1',
@@ -38,5 +40,8 @@ export const Basic = {
38
40
  onAxisResize: (event) => {
39
41
  console.log('[axis resize]', event);
40
42
  },
43
+ onEdit: (event) => {
44
+ console.log('[edit]', event);
45
+ },
41
46
  } satisfies GridProps,
42
47
  };
package/src/Grid.tsx CHANGED
@@ -1,12 +1,15 @@
1
1
  //
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
+
4
5
  import '@dxos/lit-grid/dx-grid.pcss';
5
6
 
6
7
  import { createComponent, type EventName } from '@lit/react';
7
- import React from 'react';
8
+ import React, { type KeyboardEvent, useCallback, useRef, useState } from 'react';
8
9
 
9
- import { type DxAxisResize, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';
10
+ import { type DxAxisResize, type DxEditRequest, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';
11
+ import { listener, useTextEditor } from '@dxos/react-ui-editor';
12
+ import { isNotFalsy } from '@dxos/util';
10
13
 
11
14
  const DxGrid = createComponent({
12
15
  tagName: 'dx-grid',
@@ -14,13 +17,86 @@ const DxGrid = createComponent({
14
17
  react: React,
15
18
  events: {
16
19
  onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,
20
+ onEdit: 'dx-edit-request' as EventName<DxEditRequest>,
17
21
  },
18
22
  });
19
23
 
20
24
  export type GridProps = DxGridProps & {
25
+ id: string;
21
26
  onAxisResize: (event: DxAxisResize) => void;
27
+ onEdit: (event: DxEditRequest) => void;
22
28
  };
23
29
 
30
+ const initialBox = {
31
+ insetInlineStart: 0,
32
+ insetBlockStart: 0,
33
+ inlineSize: 0,
34
+ blockSize: 0,
35
+ } satisfies DxEditRequest['cellBox'];
36
+
24
37
  export const Grid = (props: GridProps) => {
25
- return <DxGrid {...props} />;
38
+ const gridRef = useRef<NaturalDxGrid | null>(null);
39
+ const [editBox, setEditBox] = useState<DxEditRequest['cellBox']>(initialBox);
40
+ const [editing, setEditing] = useState<DxEditRequest['cellIndex'] | null>(null);
41
+
42
+ const {
43
+ parentRef: textboxRef,
44
+ focusAttributes,
45
+ view,
46
+ } = useTextEditor(
47
+ () => ({
48
+ id: props.id,
49
+ autoFocus: !!editing,
50
+ extensions: [
51
+ listener({
52
+ onFocus: (focusing: boolean) => {
53
+ if (!focusing && editing) {
54
+ setEditing(null);
55
+ }
56
+ },
57
+ }),
58
+ ].filter(isNotFalsy),
59
+ }),
60
+ [editing],
61
+ );
62
+
63
+ const handleEdit = useCallback((event: DxEditRequest) => {
64
+ setEditBox(event.cellBox);
65
+ setEditing(event.cellIndex);
66
+ props?.onEdit?.(event);
67
+ }, []);
68
+
69
+ const handleEditorKeyDown = useCallback(
70
+ (event: KeyboardEvent) => {
71
+ if (editing) {
72
+ switch (event.key) {
73
+ case 'Enter':
74
+ // console.warn('to do: save content');
75
+ setEditing(null);
76
+ gridRef.current?.refocus('down');
77
+ break;
78
+ case 'Escape':
79
+ setEditing(null);
80
+ gridRef.current?.refocus();
81
+ break;
82
+ }
83
+ }
84
+ },
85
+ [editing, view],
86
+ );
87
+
88
+ return (
89
+ <>
90
+ <div
91
+ className='absolute z-[1] hidden data-[editing=true]:block border p-px border-accentSurface'
92
+ data-editing={!!editing}
93
+ {...focusAttributes}
94
+ style={editBox}
95
+ tabIndex={editing ? 0 : -1}
96
+ onKeyDown={handleEditorKeyDown}
97
+ ref={textboxRef}
98
+ />
99
+ <DxGrid {...props} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={gridRef} />
100
+ </>
101
+ );
26
102
  };