@dxos/react-ui-grid 0.6.12-staging.e11e696 → 0.6.12
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.
- package/dist/lib/browser/index.mjs +5 -69
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/Grid.d.ts +5 -51
- package/dist/types/src/Grid.d.ts.map +1 -1
- package/dist/types/src/Grid.stories.d.ts +3 -11
- package/dist/types/src/Grid.stories.d.ts.map +1 -1
- package/package.json +9 -11
- package/src/Grid.stories.tsx +4 -23
- package/src/Grid.tsx +6 -117
|
@@ -1,84 +1,20 @@
|
|
|
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
|
|
5
|
-
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
6
|
-
import React, { forwardRef, useCallback, useLayoutEffect, useState } from "react";
|
|
4
|
+
import React from "react";
|
|
7
5
|
import { DxGrid as NaturalDxGrid } from "@dxos/lit-grid";
|
|
8
|
-
import { useForwardedRef } from "@dxos/react-ui";
|
|
9
6
|
var DxGrid = createComponent({
|
|
10
7
|
tagName: "dx-grid",
|
|
11
8
|
elementClass: NaturalDxGrid,
|
|
12
9
|
react: React,
|
|
13
10
|
events: {
|
|
14
|
-
onAxisResize: "dx-axis-resize"
|
|
15
|
-
onEdit: "dx-edit-request",
|
|
16
|
-
onSelect: "dx-grid-cells-select"
|
|
11
|
+
onAxisResize: "dx-axis-resize"
|
|
17
12
|
}
|
|
18
13
|
});
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
insetBlockStart: 0,
|
|
22
|
-
inlineSize: 0,
|
|
23
|
-
blockSize: 0
|
|
24
|
-
};
|
|
25
|
-
var GRID_NAME = "Grid";
|
|
26
|
-
var [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
|
|
27
|
-
var [GridProvider, useGridContext] = createGridContext(GRID_NAME);
|
|
28
|
-
var GridRoot = ({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope }) => {
|
|
29
|
-
const [editing = null, setEditing] = useControllableState({
|
|
30
|
-
prop: propsEditing,
|
|
31
|
-
defaultProp: defaultEditing,
|
|
32
|
-
onChange: onEditingChange
|
|
33
|
-
});
|
|
34
|
-
const [editBox, setEditBox] = useState(initialBox);
|
|
35
|
-
return /* @__PURE__ */ React.createElement(GridProvider, {
|
|
36
|
-
id,
|
|
37
|
-
editing,
|
|
38
|
-
setEditing,
|
|
39
|
-
editBox,
|
|
40
|
-
setEditBox,
|
|
41
|
-
scope: __gridScope
|
|
42
|
-
}, children);
|
|
43
|
-
};
|
|
44
|
-
GridRoot.displayName = GRID_NAME;
|
|
45
|
-
var GRID_CONTENT_NAME = "GridContent";
|
|
46
|
-
var GridContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
47
|
-
const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
|
|
48
|
-
const dxGrid = useForwardedRef(forwardedRef);
|
|
49
|
-
useLayoutEffect(() => {
|
|
50
|
-
if (dxGrid.current && props.getCells) {
|
|
51
|
-
dxGrid.current.getCells = props.getCells;
|
|
52
|
-
dxGrid.current.requestUpdate("initialCells");
|
|
53
|
-
}
|
|
54
|
-
}, [
|
|
55
|
-
props.getCells
|
|
56
|
-
]);
|
|
57
|
-
const handleEdit = useCallback((event) => {
|
|
58
|
-
setEditBox(event.cellBox);
|
|
59
|
-
setEditing({
|
|
60
|
-
index: event.cellIndex,
|
|
61
|
-
initialContent: event.initialContent
|
|
62
|
-
});
|
|
63
|
-
}, []);
|
|
64
|
-
return /* @__PURE__ */ React.createElement(DxGrid, {
|
|
65
|
-
...props,
|
|
66
|
-
gridId: id,
|
|
67
|
-
mode: editing ? "edit" : "browse",
|
|
68
|
-
onEdit: handleEdit,
|
|
69
|
-
ref: dxGrid
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
GridContent.displayName = GRID_CONTENT_NAME;
|
|
73
|
-
var Grid = {
|
|
74
|
-
Root: GridRoot,
|
|
75
|
-
Content: GridContent
|
|
14
|
+
var Grid = (props) => {
|
|
15
|
+
return /* @__PURE__ */ React.createElement(DxGrid, props);
|
|
76
16
|
};
|
|
77
17
|
export {
|
|
78
|
-
Grid
|
|
79
|
-
GridContent,
|
|
80
|
-
GridRoot,
|
|
81
|
-
createGridScope,
|
|
82
|
-
useGridContext
|
|
18
|
+
Grid
|
|
83
19
|
};
|
|
84
20
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Grid.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": ["createComponent", "
|
|
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"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-grid/src/Grid.tsx":{"bytes":
|
|
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}}}
|
package/dist/types/src/Grid.d.ts
CHANGED
|
@@ -1,54 +1,8 @@
|
|
|
1
1
|
import '@dxos/lit-grid/dx-grid.pcss';
|
|
2
|
-
import
|
|
3
|
-
import { type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
type DxGridElement = NaturalDxGrid;
|
|
7
|
-
declare const DxGrid: import("@lit/react").ReactWebComponent<NaturalDxGrid, {
|
|
8
|
-
onAxisResize: EventName<DxAxisResize>;
|
|
9
|
-
onEdit: EventName<DxEditRequest>;
|
|
10
|
-
onSelect: EventName<DxGridCellsSelect>;
|
|
11
|
-
}>;
|
|
12
|
-
type GridEditBox = DxEditRequest['cellBox'];
|
|
13
|
-
type GridEditing = {
|
|
14
|
-
index: DxEditRequest['cellIndex'];
|
|
15
|
-
initialContent: DxEditRequest['initialContent'];
|
|
16
|
-
} | null;
|
|
17
|
-
type GridContextValue = {
|
|
18
|
-
id: string;
|
|
19
|
-
editing: GridEditing;
|
|
20
|
-
setEditing: (nextEditing: GridEditing) => void;
|
|
21
|
-
editBox: GridEditBox;
|
|
22
|
-
setEditBox: (nextEditBox: GridEditBox) => void;
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { type DxAxisResize, type DxGridProps } from '@dxos/lit-grid';
|
|
4
|
+
export type GridProps = DxGridProps & {
|
|
5
|
+
onAxisResize: (event: DxAxisResize) => void;
|
|
23
6
|
};
|
|
24
|
-
|
|
25
|
-
__gridScope?: Scope;
|
|
26
|
-
};
|
|
27
|
-
declare const createGridScope: import("@radix-ui/react-context").CreateScope;
|
|
28
|
-
declare const useGridContext: (consumerName: string, scope: Scope<GridContextValue | undefined>) => GridContextValue;
|
|
29
|
-
type GridRootProps = PropsWithChildren<{
|
|
30
|
-
id: string;
|
|
31
|
-
} & Partial<{
|
|
32
|
-
editing: GridEditing;
|
|
33
|
-
defaultEditing: GridEditing;
|
|
34
|
-
onEditingChange: (nextEditing: GridEditing) => void;
|
|
35
|
-
}>>;
|
|
36
|
-
declare const GridRoot: {
|
|
37
|
-
({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
|
|
38
|
-
displayName: string;
|
|
39
|
-
};
|
|
40
|
-
type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
|
|
41
|
-
getCells?: NonNullable<NaturalDxGrid['getCells']>;
|
|
42
|
-
};
|
|
43
|
-
declare const GridContent: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
|
|
44
|
-
export declare const Grid: {
|
|
45
|
-
Root: {
|
|
46
|
-
({ id, editing: propsEditing, defaultEditing, onEditingChange, children, __gridScope, }: GridScopedProps<GridRootProps>): React.JSX.Element;
|
|
47
|
-
displayName: string;
|
|
48
|
-
};
|
|
49
|
-
Content: React.ForwardRefExoticComponent<Omit<GridScopedProps<GridContentProps>, "ref"> & React.RefAttributes<NaturalDxGrid>>;
|
|
50
|
-
};
|
|
51
|
-
export { GridRoot, GridContent, useGridContext, createGridScope };
|
|
52
|
-
export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
|
|
53
|
-
export type { DxGridRange, DxGridAxisMeta, DxGridCells } from '@dxos/lit-grid';
|
|
7
|
+
export declare const Grid: (props: GridProps) => React.JSX.Element;
|
|
54
8
|
//# sourceMappingURL=Grid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/Grid.tsx"],"names":[],"mappings":"
|
|
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,20 +1,13 @@
|
|
|
1
|
-
import '
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { type GridContentProps, type GridRootProps } from './Grid';
|
|
4
|
-
type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
|
|
1
|
+
import { type GridProps } from './Grid';
|
|
5
2
|
declare const _default: {
|
|
6
3
|
title: string;
|
|
7
|
-
component: (
|
|
4
|
+
component: (props: GridProps) => import("react").JSX.Element;
|
|
8
5
|
decorators: import("@storybook/react/*").Decorator[];
|
|
9
|
-
parameters: {
|
|
10
|
-
layout: string;
|
|
11
|
-
};
|
|
12
6
|
};
|
|
13
7
|
export default _default;
|
|
14
8
|
export declare const Basic: {
|
|
15
9
|
args: {
|
|
16
|
-
|
|
17
|
-
initialCells: {
|
|
10
|
+
cells: {
|
|
18
11
|
'1,1': {
|
|
19
12
|
value: string;
|
|
20
13
|
};
|
|
@@ -45,7 +38,6 @@ export declare const Basic: {
|
|
|
45
38
|
};
|
|
46
39
|
};
|
|
47
40
|
onAxisResize: (event: import("packages/ui/lit-grid/dist/types/src").DxAxisResize) => void;
|
|
48
|
-
onEditingChange: (event: import("./Grid").GridEditing) => void;
|
|
49
41
|
};
|
|
50
42
|
};
|
|
51
43
|
//# sourceMappingURL=Grid.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/Grid.stories.tsx"],"names":[],"mappings":"
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-grid",
|
|
3
|
-
"version": "0.6.12
|
|
3
|
+
"version": "0.6.12",
|
|
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,24 +22,22 @@
|
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@lit/react": "^1.0.5",
|
|
25
|
-
"@
|
|
26
|
-
"@
|
|
27
|
-
"@dxos/
|
|
28
|
-
"@dxos/
|
|
29
|
-
"@dxos/react-ui-theme": "0.6.12-staging.e11e696",
|
|
30
|
-
"@dxos/util": "0.6.12-staging.e11e696"
|
|
25
|
+
"@dxos/lit-grid": "0.6.12",
|
|
26
|
+
"@dxos/react-ui": "0.6.12",
|
|
27
|
+
"@dxos/react-ui-theme": "0.6.12",
|
|
28
|
+
"@dxos/util": "0.6.12"
|
|
31
29
|
},
|
|
32
30
|
"devDependencies": {
|
|
33
31
|
"@types/react": "~18.2.0",
|
|
34
32
|
"@types/react-dom": "~18.2.0",
|
|
35
33
|
"react": "~18.2.0",
|
|
36
34
|
"react-dom": "~18.2.0",
|
|
37
|
-
"vite": "5.4
|
|
38
|
-
"@dxos/storybook-utils": "0.6.12
|
|
35
|
+
"vite": "^5.3.4",
|
|
36
|
+
"@dxos/storybook-utils": "0.6.12"
|
|
39
37
|
},
|
|
40
38
|
"peerDependencies": {
|
|
41
|
-
"react": "
|
|
42
|
-
"react-dom": "
|
|
39
|
+
"react": "^18.0.0",
|
|
40
|
+
"react-dom": "^18.0.0"
|
|
43
41
|
},
|
|
44
42
|
"publishConfig": {
|
|
45
43
|
"access": "public"
|
package/src/Grid.stories.tsx
CHANGED
|
@@ -2,35 +2,19 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
5
|
import { withTheme } from '@dxos/storybook-utils';
|
|
10
6
|
|
|
11
|
-
import { Grid, type
|
|
12
|
-
|
|
13
|
-
type StoryGridProps = GridContentProps & Pick<GridRootProps, 'onEditingChange'>;
|
|
14
|
-
|
|
15
|
-
const StoryGrid = ({ onEditingChange, ...props }: StoryGridProps) => {
|
|
16
|
-
return (
|
|
17
|
-
<Grid.Root id='story' onEditingChange={onEditingChange}>
|
|
18
|
-
<Grid.Content {...props} />
|
|
19
|
-
</Grid.Root>
|
|
20
|
-
);
|
|
21
|
-
};
|
|
7
|
+
import { Grid, type GridProps } from './Grid';
|
|
22
8
|
|
|
23
9
|
export default {
|
|
24
10
|
title: 'react-ui-grid/Grid',
|
|
25
|
-
component:
|
|
11
|
+
component: Grid,
|
|
26
12
|
decorators: [withTheme],
|
|
27
|
-
parameters: { layout: 'fullscreen' },
|
|
28
13
|
};
|
|
29
14
|
|
|
30
15
|
export const Basic = {
|
|
31
16
|
args: {
|
|
32
|
-
|
|
33
|
-
initialCells: {
|
|
17
|
+
cells: {
|
|
34
18
|
'1,1': {
|
|
35
19
|
// end: '8,1',
|
|
36
20
|
value: 'Weekly sales report',
|
|
@@ -54,8 +38,5 @@ export const Basic = {
|
|
|
54
38
|
onAxisResize: (event) => {
|
|
55
39
|
console.log('[axis resize]', event);
|
|
56
40
|
},
|
|
57
|
-
|
|
58
|
-
console.log('[edit]', event);
|
|
59
|
-
},
|
|
60
|
-
} satisfies StoryGridProps,
|
|
41
|
+
} satisfies GridProps,
|
|
61
42
|
};
|
package/src/Grid.tsx
CHANGED
|
@@ -1,25 +1,12 @@
|
|
|
1
1
|
//
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
|
-
|
|
5
4
|
import '@dxos/lit-grid/dx-grid.pcss';
|
|
6
5
|
|
|
7
6
|
import { createComponent, type EventName } from '@lit/react';
|
|
8
|
-
import
|
|
9
|
-
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
10
|
-
import React, {
|
|
11
|
-
type ComponentProps,
|
|
12
|
-
forwardRef,
|
|
13
|
-
type PropsWithChildren,
|
|
14
|
-
useCallback,
|
|
15
|
-
useLayoutEffect,
|
|
16
|
-
useState,
|
|
17
|
-
} from 'react';
|
|
18
|
-
|
|
19
|
-
import { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';
|
|
20
|
-
import { useForwardedRef } from '@dxos/react-ui';
|
|
7
|
+
import React from 'react';
|
|
21
8
|
|
|
22
|
-
type
|
|
9
|
+
import { type DxAxisResize, DxGrid as NaturalDxGrid, type DxGridProps } from '@dxos/lit-grid';
|
|
23
10
|
|
|
24
11
|
const DxGrid = createComponent({
|
|
25
12
|
tagName: 'dx-grid',
|
|
@@ -27,111 +14,13 @@ const DxGrid = createComponent({
|
|
|
27
14
|
react: React,
|
|
28
15
|
events: {
|
|
29
16
|
onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,
|
|
30
|
-
onEdit: 'dx-edit-request' as EventName<DxEditRequest>,
|
|
31
|
-
onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,
|
|
32
17
|
},
|
|
33
18
|
});
|
|
34
19
|
|
|
35
|
-
type
|
|
36
|
-
|
|
37
|
-
const initialBox = {
|
|
38
|
-
insetInlineStart: 0,
|
|
39
|
-
insetBlockStart: 0,
|
|
40
|
-
inlineSize: 0,
|
|
41
|
-
blockSize: 0,
|
|
42
|
-
} satisfies GridEditBox;
|
|
43
|
-
|
|
44
|
-
type GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;
|
|
45
|
-
|
|
46
|
-
type GridContextValue = {
|
|
47
|
-
id: string;
|
|
48
|
-
editing: GridEditing;
|
|
49
|
-
setEditing: (nextEditing: GridEditing) => void;
|
|
50
|
-
editBox: GridEditBox;
|
|
51
|
-
setEditBox: (nextEditBox: GridEditBox) => void;
|
|
20
|
+
export type GridProps = DxGridProps & {
|
|
21
|
+
onAxisResize: (event: DxAxisResize) => void;
|
|
52
22
|
};
|
|
53
23
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
const GRID_NAME = 'Grid';
|
|
57
|
-
|
|
58
|
-
const [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);
|
|
59
|
-
|
|
60
|
-
const [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);
|
|
61
|
-
|
|
62
|
-
type GridRootProps = PropsWithChildren<
|
|
63
|
-
{ id: string } & Partial<{
|
|
64
|
-
editing: GridEditing;
|
|
65
|
-
defaultEditing: GridEditing;
|
|
66
|
-
onEditingChange: (nextEditing: GridEditing) => void;
|
|
67
|
-
}>
|
|
68
|
-
>;
|
|
69
|
-
|
|
70
|
-
const GridRoot = ({
|
|
71
|
-
id,
|
|
72
|
-
editing: propsEditing,
|
|
73
|
-
defaultEditing,
|
|
74
|
-
onEditingChange,
|
|
75
|
-
children,
|
|
76
|
-
__gridScope,
|
|
77
|
-
}: GridScopedProps<GridRootProps>) => {
|
|
78
|
-
const [editing = null, setEditing] = useControllableState({
|
|
79
|
-
prop: propsEditing,
|
|
80
|
-
defaultProp: defaultEditing,
|
|
81
|
-
onChange: onEditingChange,
|
|
82
|
-
});
|
|
83
|
-
const [editBox, setEditBox] = useState<GridEditBox>(initialBox);
|
|
84
|
-
return (
|
|
85
|
-
<GridProvider
|
|
86
|
-
id={id}
|
|
87
|
-
editing={editing}
|
|
88
|
-
setEditing={setEditing}
|
|
89
|
-
editBox={editBox}
|
|
90
|
-
setEditBox={setEditBox}
|
|
91
|
-
scope={__gridScope}
|
|
92
|
-
>
|
|
93
|
-
{children}
|
|
94
|
-
</GridProvider>
|
|
95
|
-
);
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
GridRoot.displayName = GRID_NAME;
|
|
99
|
-
|
|
100
|
-
type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
|
|
101
|
-
getCells?: NonNullable<NaturalDxGrid['getCells']>;
|
|
24
|
+
export const Grid = (props: GridProps) => {
|
|
25
|
+
return <DxGrid {...props} />;
|
|
102
26
|
};
|
|
103
|
-
|
|
104
|
-
const GRID_CONTENT_NAME = 'GridContent';
|
|
105
|
-
|
|
106
|
-
const GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {
|
|
107
|
-
const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);
|
|
108
|
-
const dxGrid = useForwardedRef(forwardedRef);
|
|
109
|
-
|
|
110
|
-
// Needed instead of `useEffect` to ensure the DxGrid ref is defined.
|
|
111
|
-
useLayoutEffect(() => {
|
|
112
|
-
if (dxGrid.current && props.getCells) {
|
|
113
|
-
dxGrid.current.getCells = props.getCells;
|
|
114
|
-
dxGrid.current.requestUpdate('initialCells');
|
|
115
|
-
}
|
|
116
|
-
}, [props.getCells]);
|
|
117
|
-
|
|
118
|
-
const handleEdit = useCallback((event: DxEditRequest) => {
|
|
119
|
-
setEditBox(event.cellBox);
|
|
120
|
-
setEditing({ index: event.cellIndex, initialContent: event.initialContent });
|
|
121
|
-
}, []);
|
|
122
|
-
|
|
123
|
-
return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={dxGrid} />;
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
GridContent.displayName = GRID_CONTENT_NAME;
|
|
127
|
-
|
|
128
|
-
export const Grid = {
|
|
129
|
-
Root: GridRoot,
|
|
130
|
-
Content: GridContent,
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
export { GridRoot, GridContent, useGridContext, createGridScope };
|
|
134
|
-
|
|
135
|
-
export type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };
|
|
136
|
-
|
|
137
|
-
export type { DxGridRange, DxGridAxisMeta, DxGridCells } from '@dxos/lit-grid';
|