datocms-react-ui 1.1.1 → 2.0.1
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/cjs/Canvas/index.js +1 -2
- package/dist/cjs/Canvas/index.js.map +1 -1
- package/dist/cjs/ContextInspector/index.js +37 -186
- package/dist/cjs/ContextInspector/index.js.map +1 -1
- package/dist/cjs/generateStyleFromCtx/index.js.map +1 -1
- package/dist/esm/Canvas/index.d.ts +3 -3
- package/dist/esm/Canvas/index.js +1 -2
- package/dist/esm/Canvas/index.js.map +1 -1
- package/dist/esm/ContextInspector/index.d.ts +1 -1
- package/dist/esm/ContextInspector/index.js +38 -187
- package/dist/esm/ContextInspector/index.js.map +1 -1
- package/dist/esm/generateStyleFromCtx/index.d.ts +2 -2
- package/dist/esm/generateStyleFromCtx/index.js.map +1 -1
- package/dist/types/Canvas/index.d.ts +3 -3
- package/dist/types/ContextInspector/index.d.ts +1 -1
- package/dist/types/generateStyleFromCtx/index.d.ts +2 -2
- package/package.json +3 -3
- package/src/Canvas/index.tsx +4 -8
- package/src/ContextInspector/index.tsx +45 -195
- package/src/generateStyleFromCtx/index.ts +2 -2
- package/types.json +1222 -1175
|
@@ -1,39 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
-
function step(op) {
|
|
15
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
-
while (_) try {
|
|
17
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
-
switch (op[0]) {
|
|
20
|
-
case 0: case 1: t = op; break;
|
|
21
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
-
default:
|
|
25
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
-
if (t[2]) _.ops.pop();
|
|
30
|
-
_.trys.pop(); continue;
|
|
31
|
-
}
|
|
32
|
-
op = body.call(thisArg, _);
|
|
33
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
1
|
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
38
2
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
39
3
|
if (ar || !(i in from)) {
|
|
@@ -43,11 +7,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
43
7
|
}
|
|
44
8
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
45
9
|
};
|
|
46
|
-
|
|
47
|
-
import React, { useEffect, useState } from 'react';
|
|
10
|
+
import React, { useState } from 'react';
|
|
48
11
|
import { Button, useCtx } from '..';
|
|
49
12
|
import s from './styles.module.css.json';
|
|
50
|
-
|
|
13
|
+
import { manifest } from 'datocms-plugin-sdk';
|
|
14
|
+
var baseUrl = 'https://github.com/datocms/plugins-sdk/blob/master/packages/sdk/';
|
|
51
15
|
function copyTextToClipboard(text) {
|
|
52
16
|
var textArea = document.createElement('textarea');
|
|
53
17
|
textArea.style.position = 'fixed';
|
|
@@ -72,104 +36,12 @@ function copyTextToClipboard(text) {
|
|
|
72
36
|
}
|
|
73
37
|
document.body.removeChild(textArea);
|
|
74
38
|
}
|
|
75
|
-
function
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
function findChildrenById(manifest, id) {
|
|
82
|
-
return manifest.children.find(function (child) { return child.id === id; });
|
|
83
|
-
}
|
|
84
|
-
function findShortText(signature) {
|
|
85
|
-
return ((signature.comment &&
|
|
86
|
-
addFinalPeriod(signature.comment.summary.map(function (chunk) { return chunk.text; }).join(''))) ||
|
|
87
|
-
null);
|
|
88
|
-
}
|
|
89
|
-
function findFirstTag(signature, tagName) {
|
|
90
|
-
if (!signature.comment || !signature.comment.blockTags) {
|
|
91
|
-
return null;
|
|
92
|
-
}
|
|
93
|
-
var tagNode = signature.comment.blockTags.find(function (tag) { return tag.tag === tagName; });
|
|
94
|
-
if (!tagNode) {
|
|
95
|
-
return null;
|
|
96
|
-
}
|
|
97
|
-
return tagNode.content.map(function (chunk) { return chunk.text; }).join('');
|
|
98
|
-
}
|
|
99
|
-
function findExample(signature) {
|
|
100
|
-
var _a;
|
|
101
|
-
var example = findFirstTag(signature, '@example');
|
|
102
|
-
if (!example) {
|
|
103
|
-
return null;
|
|
104
|
-
}
|
|
105
|
-
var lines = example
|
|
106
|
-
.split(/\n/)
|
|
107
|
-
.filter(function (l, i, all) { return l.length !== 0 || (i !== 0 && i !== all.length - 1); });
|
|
108
|
-
var spacesPerLine = lines.map(function (line) {
|
|
109
|
-
var spaces = line.match(/^\s*/);
|
|
110
|
-
return spaces ? spaces[0].length : 0;
|
|
111
|
-
});
|
|
112
|
-
var commonIndentation = Math.min.apply(Math, spacesPerLine);
|
|
113
|
-
var result = lines
|
|
114
|
-
.map(function (line) { return line.substring(commonIndentation); })
|
|
115
|
-
.join('\n');
|
|
116
|
-
return (_a = result.match(/```[a-z]*\n([\s\S]*?)\n```/)) === null || _a === void 0 ? void 0 : _a[1].trim();
|
|
117
|
-
}
|
|
118
|
-
function buildCtx(manifest, definition) {
|
|
119
|
-
if (definition.type.type === 'intersection') {
|
|
120
|
-
var result = [];
|
|
121
|
-
for (var _i = 0, _a = definition.type.types; _i < _a.length; _i++) {
|
|
122
|
-
var elementInIntersection = _a[_i];
|
|
123
|
-
if (elementInIntersection.type === 'reference') {
|
|
124
|
-
var innerDefinition = findChildrenById(manifest, elementInIntersection.id);
|
|
125
|
-
result = __spreadArray(__spreadArray([], result, true), [buildCtx(manifest, innerDefinition)], false);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
return result.flat().filter(function (x) { return x; });
|
|
129
|
-
}
|
|
130
|
-
if (definition.type.type === 'reflection') {
|
|
131
|
-
var properties = definition.type.declaration.children.filter(function (child) {
|
|
132
|
-
return !['mode', 'getSettings', 'setHeight', 'bodyPadding'].includes(child.name);
|
|
133
|
-
});
|
|
134
|
-
if (properties.length === 0) {
|
|
135
|
-
return null;
|
|
136
|
-
}
|
|
137
|
-
return {
|
|
138
|
-
name: definition.name,
|
|
139
|
-
description: findShortText(definition),
|
|
140
|
-
properties: properties.map(function (child) {
|
|
141
|
-
var _a, _b;
|
|
142
|
-
if ((_b = (_a = child.type) === null || _a === void 0 ? void 0 : _a.declaration) === null || _b === void 0 ? void 0 : _b.signatures) {
|
|
143
|
-
child.signatures = child.type.declaration.signatures;
|
|
144
|
-
}
|
|
145
|
-
if (child.signatures) {
|
|
146
|
-
var signature = child.signatures[0];
|
|
147
|
-
return {
|
|
148
|
-
name: child.name,
|
|
149
|
-
type: 'function',
|
|
150
|
-
description: findShortText(signature),
|
|
151
|
-
example: findExample(signature),
|
|
152
|
-
group: definition.name,
|
|
153
|
-
lineNumber: child.sources[0].line,
|
|
154
|
-
};
|
|
155
|
-
}
|
|
156
|
-
return {
|
|
157
|
-
name: child.name,
|
|
158
|
-
type: 'property',
|
|
159
|
-
description: findShortText(child),
|
|
160
|
-
example: findExample(child),
|
|
161
|
-
groupDescription: findShortText(definition),
|
|
162
|
-
group: definition.name,
|
|
163
|
-
lineNumber: child.sources[0].line,
|
|
164
|
-
};
|
|
165
|
-
}),
|
|
166
|
-
};
|
|
167
|
-
}
|
|
168
|
-
if (definition.type.type === 'reference') {
|
|
169
|
-
var innerDefinition = findChildrenById(manifest, definition.type.id);
|
|
170
|
-
return buildCtx(manifest, innerDefinition);
|
|
171
|
-
}
|
|
172
|
-
throw new Error("Don\t know how to handle ".concat(definition));
|
|
39
|
+
function capitalize(input) {
|
|
40
|
+
var transformed = input
|
|
41
|
+
.replace(/([A-Z])/g, ' $1')
|
|
42
|
+
.trim()
|
|
43
|
+
.toLowerCase();
|
|
44
|
+
return transformed.charAt(0).toUpperCase() + transformed.slice(1);
|
|
173
45
|
}
|
|
174
46
|
var ExpandablePane = function (_a) {
|
|
175
47
|
var children = _a.children, label = _a.label;
|
|
@@ -179,33 +51,8 @@ var ExpandablePane = function (_a) {
|
|
|
179
51
|
open && React.createElement("div", { className: s.panelBody }, children)));
|
|
180
52
|
};
|
|
181
53
|
export function ContextInspector() {
|
|
182
|
-
var _this = this;
|
|
183
54
|
var ctx = useCtx();
|
|
184
|
-
var
|
|
185
|
-
useEffect(function () {
|
|
186
|
-
var runner = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
187
|
-
var response, manifest, connectParameters, hook, signature, ctxParameter;
|
|
188
|
-
return __generator(this, function (_a) {
|
|
189
|
-
switch (_a.label) {
|
|
190
|
-
case 0: return [4 /*yield*/, fetch('https://unpkg.com/datocms-plugin-sdk/types.json')];
|
|
191
|
-
case 1:
|
|
192
|
-
response = _a.sent();
|
|
193
|
-
return [4 /*yield*/, response.json()];
|
|
194
|
-
case 2:
|
|
195
|
-
manifest = _a.sent();
|
|
196
|
-
connectParameters = manifest.children.find(function (child) { return child.name === 'FullConnectParameters'; });
|
|
197
|
-
hook = connectParameters.type.declaration.children.find(function (hook) { return hook.name === ctx.mode; });
|
|
198
|
-
signature = hook.signatures
|
|
199
|
-
? hook.signatures[0]
|
|
200
|
-
: hook.type.declaration.signatures[0];
|
|
201
|
-
ctxParameter = signature.parameters.find(function (p) { return p.name === 'ctx'; });
|
|
202
|
-
setGroups(buildCtx(manifest, findChildrenById(manifest, ctxParameter.type.id)));
|
|
203
|
-
return [2 /*return*/];
|
|
204
|
-
}
|
|
205
|
-
});
|
|
206
|
-
}); };
|
|
207
|
-
runner();
|
|
208
|
-
}, [setGroups]);
|
|
55
|
+
var hook = manifest.hooks[ctx.mode];
|
|
209
56
|
var handleCopy = function (text) {
|
|
210
57
|
copyTextToClipboard(text);
|
|
211
58
|
ctx.notice('Copied to clipboard!');
|
|
@@ -213,30 +60,34 @@ export function ContextInspector() {
|
|
|
213
60
|
var handleRun = function (example) {
|
|
214
61
|
Function("\n \"use strict\";\n return(\n async function(ctx) {\n try {\n ".concat(example, "\n } catch(e) {\n console.error(e);\n await ctx.alert('Execution failed! See console for errors!');\n }\n }\n )\n "))()(ctx);
|
|
215
62
|
};
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
React.createElement(
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
63
|
+
if (!hook.ctxArgument) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
var groups = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], manifest.baseCtx.properties, true), (hook.ctxArgument.additionalProperties || []), true), manifest.baseCtx.methods, true), (hook.ctxArgument.additionalMethods || []), true);
|
|
67
|
+
return (React.createElement("div", { className: s.inspector }, groups.map(function (group) {
|
|
68
|
+
var _a, _b;
|
|
69
|
+
return (React.createElement(ExpandablePane, { label: group.name ? capitalize(group.name) : 'Other', key: group.name },
|
|
70
|
+
React.createElement("div", { className: s.propertyGroup },
|
|
71
|
+
((_a = group.comment) === null || _a === void 0 ? void 0 : _a.comment) && (React.createElement("div", { className: s.groupDescription }, (_b = group.comment) === null || _b === void 0 ? void 0 : _b.comment)),
|
|
72
|
+
Object.entries(group.items).map(function (_a) {
|
|
73
|
+
var _b, _c;
|
|
74
|
+
var name = _a[0], info = _a[1];
|
|
75
|
+
return (React.createElement("div", { key: name, className: s.propertyOrMethod },
|
|
76
|
+
React.createElement("div", { className: s.propertyOrMethodBody },
|
|
77
|
+
React.createElement("a", { className: s.propertyOrMethodName, href: "".concat(baseUrl).concat(info.location.filePath, "#L").concat(info.location.lineNumber), target: "_blank", rel: "noreferrer" },
|
|
78
|
+
name,
|
|
79
|
+
info.type.startsWith('(') ? info.type : ": ".concat(info.type)),
|
|
80
|
+
React.createElement("div", null, (_b = info.comment) === null || _b === void 0 ? void 0 : _b.comment)),
|
|
81
|
+
!info.type.startsWith('(') && (React.createElement("div", { className: s.propertyOrMethodExample },
|
|
82
|
+
React.createElement("pre", null, JSON.stringify(ctx[name], null, 2)),
|
|
83
|
+
React.createElement("div", { className: s.propertyOrMethodExampleActions },
|
|
84
|
+
React.createElement(Button, { type: "button", buttonSize: "xxs", onClick: handleCopy.bind(null, JSON.stringify(ctx[name], null, 2)) }, "Copy value")))),
|
|
85
|
+
((_c = info.comment) === null || _c === void 0 ? void 0 : _c.example) && (React.createElement("div", { className: s.propertyOrMethodExample },
|
|
86
|
+
React.createElement("pre", null, info.comment.example),
|
|
87
|
+
React.createElement("div", { className: s.propertyOrMethodExampleActions },
|
|
88
|
+
React.createElement(Button, { type: "button", buttonSize: "xxs", buttonType: "primary", onClick: handleRun.bind(null, info.comment.example) }, "Run example"),
|
|
89
|
+
React.createElement(Button, { type: "button", buttonSize: "xxs", onClick: handleCopy.bind(null, info.comment.example) }, "Copy example"))))));
|
|
90
|
+
}))));
|
|
240
91
|
})));
|
|
241
92
|
}
|
|
242
93
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContextInspector/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContextInspector/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type { RenderProperties } from 'datocms-plugin-sdk';
|
|
2
1
|
import type { CSSProperties } from 'react';
|
|
3
|
-
|
|
2
|
+
import { BaseCtx } from '../Canvas';
|
|
3
|
+
export declare function generateStyleFromCtx(ctx: BaseCtx, noBodyPadding?: boolean): CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/generateStyleFromCtx/index.ts"],"names":[],"mappings":";;;;;;;;;;;AAGA,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,KAAK,GAAG,CAAC,WAAW,EAAE,EAAE;QAC7B,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,WAAI,CAAC,CAAC,WAAW,EAAE,CAAE,EAArB,CAAqB,CAAC,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/generateStyleFromCtx/index.ts"],"names":[],"mappings":";;;;;;;;;;;AAGA,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,KAAK,GAAG,CAAC,WAAW,EAAE,EAAE;QAC7B,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,WAAI,CAAC,CAAC,WAAW,EAAE,CAAE,EAArB,CAAqB,CAAC,CAAC;AAC7D,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,GAAY,EACZ,aAAqB;IAArB,8BAAA,EAAA,qBAAqB;IAErB,kBACE,OAAO,EAAE,aAAa;YACpB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,UAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC/C,MAAM,CAAC,WAAW,CACnB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,EAAM;;YAAL,CAAC,QAAA,EAAE,CAAC,QAAA;QAAM,OAAA;YAC5C,CAAC,YAAK,WAAW,CAAC,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;YAC1B;gBACE,YAAK,WAAW,CAAC,UAAG,CAAC,kBAAe,CAAC,CAAE;gBACvC,CAAA,MAAA,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,KAAI,SAAS;aACpD;SACF,CAAA;KAAA,CAAC,CACH,EACD;AACJ,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ImposedSizePluginFrameCtx } from 'datocms-plugin-sdk';
|
|
2
2
|
import React, { type ReactNode } from 'react';
|
|
3
|
-
export declare type BaseCtx =
|
|
3
|
+
export declare type BaseCtx = ImposedSizePluginFrameCtx<any, {}, {}>;
|
|
4
4
|
export declare const CtxContext: React.Context<BaseCtx | null>;
|
|
5
|
-
export declare function useCtx<T extends BaseCtx>(): T;
|
|
5
|
+
export declare function useCtx<T extends BaseCtx = BaseCtx>(): T;
|
|
6
6
|
export declare type CanvasProps = {
|
|
7
7
|
ctx: BaseCtx;
|
|
8
8
|
noAutoResizer?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare function ContextInspector(): JSX.Element;
|
|
2
|
+
export declare function ContextInspector(): JSX.Element | null;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type { RenderProperties } from 'datocms-plugin-sdk';
|
|
2
1
|
import type { CSSProperties } from 'react';
|
|
3
|
-
|
|
2
|
+
import { BaseCtx } from '../Canvas';
|
|
3
|
+
export declare function generateStyleFromCtx(ctx: BaseCtx, noBodyPadding?: boolean): CSSProperties;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datocms-react-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "React components to use inside DatoCMS plugins",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datocms",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"classnames": "^2.3.1",
|
|
44
|
-
"datocms-plugin-sdk": "^
|
|
44
|
+
"datocms-plugin-sdk": "^2.0.1",
|
|
45
45
|
"react-intersection-observer": "^8.31.0",
|
|
46
46
|
"react-select": "^5.2.1",
|
|
47
47
|
"scroll-into-view-if-needed": "^2.2.20"
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"postcss-nested": "^5.0.6",
|
|
58
58
|
"typedoc": "^0.23.20"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "8db42fb5778d563908adb0e06c334f49bb207cd4"
|
|
61
61
|
}
|
package/src/Canvas/index.tsx
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
2
|
import type {
|
|
3
|
-
|
|
4
|
-
RenderProperties,
|
|
3
|
+
ImposedSizePluginFrameCtx,
|
|
5
4
|
SizingUtilities,
|
|
6
5
|
} from 'datocms-plugin-sdk';
|
|
7
6
|
import React, {
|
|
@@ -13,12 +12,12 @@ import React, {
|
|
|
13
12
|
import { generateStyleFromCtx } from '../generateStyleFromCtx';
|
|
14
13
|
import s from './styles.module.css.json';
|
|
15
14
|
|
|
16
|
-
export type BaseCtx =
|
|
15
|
+
export type BaseCtx = ImposedSizePluginFrameCtx<any, {}, {}>;
|
|
17
16
|
|
|
18
17
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
19
18
|
export const CtxContext = createContext<BaseCtx | null>(null);
|
|
20
19
|
|
|
21
|
-
export function useCtx<T extends BaseCtx>(): T {
|
|
20
|
+
export function useCtx<T extends BaseCtx = BaseCtx>(): T {
|
|
22
21
|
const ctx = useContext(CtxContext);
|
|
23
22
|
|
|
24
23
|
if (!ctx) {
|
|
@@ -535,10 +534,7 @@ export function Canvas({
|
|
|
535
534
|
const { mode } = ctx as unknown as { mode: string };
|
|
536
535
|
|
|
537
536
|
useEffect(() => {
|
|
538
|
-
if (
|
|
539
|
-
!['renderPage', 'renderItemFormSidebar'].includes(mode) &&
|
|
540
|
-
!noAutoResizer
|
|
541
|
-
) {
|
|
537
|
+
if (!noAutoResizer && 'startAutoResizer' in ctx) {
|
|
542
538
|
const ctxWithAutoResizer = ctx as unknown as SizingUtilities;
|
|
543
539
|
ctxWithAutoResizer.startAutoResizer();
|
|
544
540
|
|