@dotcms/react 0.0.1-beta.13 → 0.0.1-beta.15
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/README.md +161 -79
- package/{es.regexp.to-string.esm.js → es.json.stringify.esm.js} +99 -156
- package/index.esm.js +69 -12
- package/next.esm.js +18 -232
- package/package.json +3 -3
- package/src/lib/next/__test__/mock.d.ts +1 -1
- package/src/lib/next/components/Column/Column.d.ts +1 -1
- package/src/lib/next/components/Container/Container.d.ts +1 -1
- package/src/lib/next/components/Container/ContainerFallbacks.d.ts +2 -2
- package/src/lib/next/components/Contentlet/Contentlet.d.ts +1 -1
- package/src/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.d.ts +1 -2
- package/src/lib/next/components/DotCMSLayoutBody/components/ErrorMessage.d.ts +1 -4
- package/src/lib/next/components/FallbackComponent/FallbackComponent.d.ts +1 -1
- package/src/lib/next/components/Row/Row.d.ts +1 -1
- package/src/lib/next/contexts/DotCMSPageContext.d.ts +1 -2
- package/src/lib/next/hooks/useIsDevMode.d.ts +2 -5
- package/src/lib/next/types.d.ts +0 -421
- package/src/lib/next/utils/index.d.ts +0 -136
package/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { s as styleInject, f as
|
|
2
|
+
import { s as styleInject, a as anObject$6, f as functionCall, h as hasOwnProperty_1, o as objectIsPrototypeOf, b as functionName, d as defineBuiltIn$6, c as fails$3, t as toString$4, e as functionUncurryThis, r as requireObjectCoercible$1, g as toIntegerOrInfinity$1, i as iteratorDefine, j as internalState, k as createIterResultObject$2, w as wellKnownSymbol$4, l as descriptors, m as classofRaw$1, n as aCallable$2, p as functionBindNative, q as makeBuiltInExports, u as objectDefineProperty, v as getMethod$2, x as iterators, y as getBuiltIn$1, z as isCallable$2, A as classof$3, B as inspectSource$1, C as createPropertyDescriptor$2, D as isNullOrUndefined$1, E as tryToString$1, F as toObject$1, G as lengthOfArrayLike$1, H as global$3, I as arraySlice$2, _ as _export, J as setToStringTag$2, K as iteratorCreateConstructor, L as isObject$1, M as objectCreate, N as objectAssign } from './es.json.stringify.esm.js';
|
|
3
3
|
import { useState, useEffect, createContext, useRef, useContext, createElement, forwardRef } from 'react';
|
|
4
4
|
import { isInsideEditor, initEditor, updateNavigation, destroyEditor, postMessageToEditor, CLIENT_ACTIONS, DotCmsClient, NOTIFY_CLIENT, initInlineEditing } from '@dotcms/client';
|
|
5
5
|
import { createUVESubscription } from '@dotcms/uve';
|
|
@@ -479,6 +479,63 @@ function DotcmsLayout(dotPageProps) {
|
|
|
479
479
|
});
|
|
480
480
|
}
|
|
481
481
|
|
|
482
|
+
var anObject$5 = anObject$6;
|
|
483
|
+
|
|
484
|
+
// `RegExp.prototype.flags` getter implementation
|
|
485
|
+
// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
|
|
486
|
+
var regexpFlags = function () {
|
|
487
|
+
var that = anObject$5(this);
|
|
488
|
+
var result = '';
|
|
489
|
+
if (that.hasIndices) result += 'd';
|
|
490
|
+
if (that.global) result += 'g';
|
|
491
|
+
if (that.ignoreCase) result += 'i';
|
|
492
|
+
if (that.multiline) result += 'm';
|
|
493
|
+
if (that.dotAll) result += 's';
|
|
494
|
+
if (that.unicode) result += 'u';
|
|
495
|
+
if (that.unicodeSets) result += 'v';
|
|
496
|
+
if (that.sticky) result += 'y';
|
|
497
|
+
return result;
|
|
498
|
+
};
|
|
499
|
+
|
|
500
|
+
var call$5 = functionCall;
|
|
501
|
+
var hasOwn$2 = hasOwnProperty_1;
|
|
502
|
+
var isPrototypeOf$1 = objectIsPrototypeOf;
|
|
503
|
+
var regExpFlags = regexpFlags;
|
|
504
|
+
|
|
505
|
+
var RegExpPrototype$1 = RegExp.prototype;
|
|
506
|
+
|
|
507
|
+
var regexpGetFlags = function (R) {
|
|
508
|
+
var flags = R.flags;
|
|
509
|
+
return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$2(R, 'flags') && isPrototypeOf$1(RegExpPrototype$1, R)
|
|
510
|
+
? call$5(regExpFlags, R) : flags;
|
|
511
|
+
};
|
|
512
|
+
|
|
513
|
+
var PROPER_FUNCTION_NAME = functionName.PROPER;
|
|
514
|
+
var defineBuiltIn$5 = defineBuiltIn$6;
|
|
515
|
+
var anObject$4 = anObject$6;
|
|
516
|
+
var $toString$2 = toString$4;
|
|
517
|
+
var fails$2 = fails$3;
|
|
518
|
+
var getRegExpFlags = regexpGetFlags;
|
|
519
|
+
|
|
520
|
+
var TO_STRING = 'toString';
|
|
521
|
+
var RegExpPrototype = RegExp.prototype;
|
|
522
|
+
var nativeToString = RegExpPrototype[TO_STRING];
|
|
523
|
+
|
|
524
|
+
var NOT_GENERIC = fails$2(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
|
|
525
|
+
// FF44- RegExp#toString has a wrong name
|
|
526
|
+
var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
|
|
527
|
+
|
|
528
|
+
// `RegExp.prototype.toString` method
|
|
529
|
+
// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
|
|
530
|
+
if (NOT_GENERIC || INCORRECT_NAME) {
|
|
531
|
+
defineBuiltIn$5(RegExpPrototype, TO_STRING, function toString() {
|
|
532
|
+
var R = anObject$4(this);
|
|
533
|
+
var pattern = $toString$2(R.source);
|
|
534
|
+
var flags = $toString$2(getRegExpFlags(R));
|
|
535
|
+
return '/' + pattern + '/' + flags;
|
|
536
|
+
}, { unsafe: true });
|
|
537
|
+
}
|
|
538
|
+
|
|
482
539
|
var uncurryThis$9 = functionUncurryThis;
|
|
483
540
|
var toIntegerOrInfinity = toIntegerOrInfinity$1;
|
|
484
541
|
var toString$3 = toString$4;
|
|
@@ -547,7 +604,7 @@ defineIterator(String, 'String', function (iterated) {
|
|
|
547
604
|
return createIterResultObject$1(point, false);
|
|
548
605
|
});
|
|
549
606
|
|
|
550
|
-
var fails$1 = fails$
|
|
607
|
+
var fails$1 = fails$3;
|
|
551
608
|
var wellKnownSymbol$3 = wellKnownSymbol$4;
|
|
552
609
|
var DESCRIPTORS$5 = descriptors;
|
|
553
610
|
var IS_PURE = isPure;
|
|
@@ -632,7 +689,7 @@ var anInstance$2 = function (it, Prototype) {
|
|
|
632
689
|
};
|
|
633
690
|
|
|
634
691
|
var call$4 = functionCall;
|
|
635
|
-
var anObject$3 = anObject$
|
|
692
|
+
var anObject$3 = anObject$6;
|
|
636
693
|
var getMethod$1 = getMethod$2;
|
|
637
694
|
|
|
638
695
|
var iteratorClose$1 = function (iterator, kind, value) {
|
|
@@ -655,7 +712,7 @@ var iteratorClose$1 = function (iterator, kind, value) {
|
|
|
655
712
|
return value;
|
|
656
713
|
};
|
|
657
714
|
|
|
658
|
-
var anObject$2 = anObject$
|
|
715
|
+
var anObject$2 = anObject$6;
|
|
659
716
|
var iteratorClose = iteratorClose$1;
|
|
660
717
|
|
|
661
718
|
// call something on iterator step with safe closing on error
|
|
@@ -679,7 +736,7 @@ var isArrayIteratorMethod$1 = function (it) {
|
|
|
679
736
|
};
|
|
680
737
|
|
|
681
738
|
var uncurryThis$6 = functionUncurryThis;
|
|
682
|
-
var fails = fails$
|
|
739
|
+
var fails = fails$3;
|
|
683
740
|
var isCallable$1 = isCallable$2;
|
|
684
741
|
var classof$2 = classof$3;
|
|
685
742
|
var getBuiltIn = getBuiltIn$1;
|
|
@@ -755,7 +812,7 @@ var getIteratorMethod$3 = function (it) {
|
|
|
755
812
|
|
|
756
813
|
var call$3 = functionCall;
|
|
757
814
|
var aCallable = aCallable$2;
|
|
758
|
-
var anObject$1 = anObject$
|
|
815
|
+
var anObject$1 = anObject$6;
|
|
759
816
|
var tryToString = tryToString$1;
|
|
760
817
|
var getIteratorMethod$2 = getIteratorMethod$3;
|
|
761
818
|
|
|
@@ -1014,7 +1071,7 @@ var safeGetBuiltIn$1 = function (name) {
|
|
|
1014
1071
|
return descriptor && descriptor.value;
|
|
1015
1072
|
};
|
|
1016
1073
|
|
|
1017
|
-
var defineBuiltIn$4 = defineBuiltIn$
|
|
1074
|
+
var defineBuiltIn$4 = defineBuiltIn$6;
|
|
1018
1075
|
|
|
1019
1076
|
var defineBuiltIns$1 = function (target, src, options) {
|
|
1020
1077
|
for (var key in src) defineBuiltIn$4(target, key, src[key], options);
|
|
@@ -1072,7 +1129,7 @@ var call$1 = functionCall;
|
|
|
1072
1129
|
var uncurryThis$4 = functionUncurryThis;
|
|
1073
1130
|
var DESCRIPTORS$2 = descriptors;
|
|
1074
1131
|
var USE_NATIVE_URL$1 = urlConstructorDetection;
|
|
1075
|
-
var defineBuiltIn$3 = defineBuiltIn$
|
|
1132
|
+
var defineBuiltIn$3 = defineBuiltIn$6;
|
|
1076
1133
|
var defineBuiltInAccessor$2 = defineBuiltInAccessor$3;
|
|
1077
1134
|
var defineBuiltIns = defineBuiltIns$1;
|
|
1078
1135
|
var setToStringTag$1 = setToStringTag$2;
|
|
@@ -1083,7 +1140,7 @@ var isCallable = isCallable$2;
|
|
|
1083
1140
|
var hasOwn$1 = hasOwnProperty_1;
|
|
1084
1141
|
var bind$1 = functionBindContext;
|
|
1085
1142
|
var classof = classof$3;
|
|
1086
|
-
var anObject = anObject$
|
|
1143
|
+
var anObject = anObject$6;
|
|
1087
1144
|
var isObject = isObject$1;
|
|
1088
1145
|
var $toString$1 = toString$4;
|
|
1089
1146
|
var create = objectCreate;
|
|
@@ -1487,7 +1544,7 @@ var USE_NATIVE_URL = urlConstructorDetection;
|
|
|
1487
1544
|
var global = global$3;
|
|
1488
1545
|
var bind = functionBindContext;
|
|
1489
1546
|
var uncurryThis$3 = functionUncurryThis;
|
|
1490
|
-
var defineBuiltIn$2 = defineBuiltIn$
|
|
1547
|
+
var defineBuiltIn$2 = defineBuiltIn$6;
|
|
1491
1548
|
var defineBuiltInAccessor$1 = defineBuiltInAccessor$3;
|
|
1492
1549
|
var anInstance = anInstance$2;
|
|
1493
1550
|
var hasOwn = hasOwnProperty_1;
|
|
@@ -2538,7 +2595,7 @@ $({ target: 'URL', proto: true, enumerable: true }, {
|
|
|
2538
2595
|
}
|
|
2539
2596
|
});
|
|
2540
2597
|
|
|
2541
|
-
var defineBuiltIn$1 = defineBuiltIn$
|
|
2598
|
+
var defineBuiltIn$1 = defineBuiltIn$6;
|
|
2542
2599
|
var uncurryThis$2 = functionUncurryThis;
|
|
2543
2600
|
var toString$1 = toString$4;
|
|
2544
2601
|
var validateArgumentsLength$1 = validateArgumentsLength$4;
|
|
@@ -2587,7 +2644,7 @@ if (params$1 + '' !== 'a=2') {
|
|
|
2587
2644
|
}, { enumerable: true, unsafe: true });
|
|
2588
2645
|
}
|
|
2589
2646
|
|
|
2590
|
-
var defineBuiltIn = defineBuiltIn$
|
|
2647
|
+
var defineBuiltIn = defineBuiltIn$6;
|
|
2591
2648
|
var uncurryThis$1 = functionUncurryThis;
|
|
2592
2649
|
var toString = toString$4;
|
|
2593
2650
|
var validateArgumentsLength = validateArgumentsLength$4;
|
package/next.esm.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, useContext, useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react';
|
|
3
|
-
import { s as styleInject } from './es.
|
|
3
|
+
import { s as styleInject } from './es.json.stringify.esm.js';
|
|
4
4
|
import { getUVEState } from '@dotcms/uve';
|
|
5
|
+
import { DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_REACT, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getContainersData, getContentletsInContainer, getDotContainerAttributes, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
|
|
5
6
|
import { UVE_MODE } from '@dotcms/uve/types';
|
|
6
7
|
|
|
7
8
|
/**
|
|
@@ -20,18 +21,15 @@ const DotCMSPageContext = /*#__PURE__*/createContext({
|
|
|
20
21
|
* A React hook that determines if the current environment is in development mode.
|
|
21
22
|
*
|
|
22
23
|
* The hook returns `true` if either:
|
|
23
|
-
* - The
|
|
24
|
-
* - The application is running inside the DotCMS editor (as determined by `isInsideEditor()`).
|
|
24
|
+
* - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
|
|
25
25
|
*
|
|
26
|
-
* @param {DotCMSPageRendererMode} [renderMode] - Optional override for the render mode.
|
|
27
26
|
* @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
|
|
28
27
|
*/
|
|
29
|
-
const useIsDevMode =
|
|
28
|
+
const useIsDevMode = () => {
|
|
30
29
|
const {
|
|
31
30
|
mode
|
|
32
31
|
} = useContext(DotCMSPageContext);
|
|
33
|
-
const
|
|
34
|
-
const [isDevMode, setIsDevMode] = useState(effectiveMode === 'development');
|
|
32
|
+
const [isDevMode, setIsDevMode] = useState(mode === 'development');
|
|
35
33
|
useEffect(() => {
|
|
36
34
|
var _getUVEState;
|
|
37
35
|
// Inside UVE we rely on the UVE state to determine if we are in development mode
|
|
@@ -41,9 +39,8 @@ const useIsDevMode = renderMode => {
|
|
|
41
39
|
setIsDevMode(isUVEInEditor);
|
|
42
40
|
return;
|
|
43
41
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}, [renderMode, mode]);
|
|
42
|
+
setIsDevMode(mode === DEVELOPMENT_MODE);
|
|
43
|
+
}, [mode]);
|
|
47
44
|
return isDevMode;
|
|
48
45
|
};
|
|
49
46
|
|
|
@@ -52,17 +49,12 @@ const useIsDevMode = renderMode => {
|
|
|
52
49
|
*
|
|
53
50
|
* @return {JSX.Element} Error message component
|
|
54
51
|
*/
|
|
55
|
-
const ErrorMessage = ({
|
|
56
|
-
|
|
57
|
-
}) => {
|
|
52
|
+
const ErrorMessage = () => {
|
|
53
|
+
const isDevMode = useIsDevMode();
|
|
58
54
|
useEffect(() => {
|
|
59
55
|
console.warn('Missing required layout.body property in page');
|
|
60
56
|
}, []);
|
|
61
|
-
|
|
62
|
-
if (!isDevMode) {
|
|
63
|
-
return null;
|
|
64
|
-
}
|
|
65
|
-
return jsxs("div", {
|
|
57
|
+
return isDevMode && jsxs("div", {
|
|
66
58
|
"data-testid": "error-message",
|
|
67
59
|
style: {
|
|
68
60
|
padding: '1rem',
|
|
@@ -97,207 +89,6 @@ var css_248z = ".Column-module_col-start-1__xylw6 {\n grid-column-start: 1;\n
|
|
|
97
89
|
var styles = {"col-start-1":"Column-module_col-start-1__xylw6","col-start-2":"Column-module_col-start-2__Mod81","col-start-3":"Column-module_col-start-3__HHbXB","col-start-4":"Column-module_col-start-4__Uk-Qj","col-start-5":"Column-module_col-start-5__jlV8e","col-start-6":"Column-module_col-start-6__oi8k0","col-start-7":"Column-module_col-start-7__EmPky","col-start-8":"Column-module_col-start-8__hLI1h","col-start-9":"Column-module_col-start-9__Kcv9X","col-start-10":"Column-module_col-start-10__-MOrt","col-start-11":"Column-module_col-start-11__gDEQM","col-start-12":"Column-module_col-start-12__omVX6","col-end-1":"Column-module_col-end-1__Ho2y9","col-end-2":"Column-module_col-end-2__KwFu9","col-end-3":"Column-module_col-end-3__vfbJk","col-end-4":"Column-module_col-end-4__d4pyL","col-end-5":"Column-module_col-end-5__6yPd4","col-end-6":"Column-module_col-end-6__xQpAX","col-end-7":"Column-module_col-end-7__CCF7e","col-end-8":"Column-module_col-end-8__fVWEi","col-end-9":"Column-module_col-end-9__tpIGv","col-end-10":"Column-module_col-end-10__SX75K","col-end-11":"Column-module_col-end-11__9K1zv","col-end-12":"Column-module_col-end-12__oqTiE","col-end-13":"Column-module_col-end-13__L-nK9"};
|
|
98
90
|
styleInject(css_248z);
|
|
99
91
|
|
|
100
|
-
const endClassMap = {
|
|
101
|
-
1: 'col-end-1',
|
|
102
|
-
2: 'col-end-2',
|
|
103
|
-
3: 'col-end-3',
|
|
104
|
-
4: 'col-end-4',
|
|
105
|
-
5: 'col-end-5',
|
|
106
|
-
6: 'col-end-6',
|
|
107
|
-
7: 'col-end-7',
|
|
108
|
-
8: 'col-end-8',
|
|
109
|
-
9: 'col-end-9',
|
|
110
|
-
10: 'col-end-10',
|
|
111
|
-
11: 'col-end-11',
|
|
112
|
-
12: 'col-end-12',
|
|
113
|
-
13: 'col-end-13'
|
|
114
|
-
};
|
|
115
|
-
const startClassMap = {
|
|
116
|
-
1: 'col-start-1',
|
|
117
|
-
2: 'col-start-2',
|
|
118
|
-
3: 'col-start-3',
|
|
119
|
-
4: 'col-start-4',
|
|
120
|
-
5: 'col-start-5',
|
|
121
|
-
6: 'col-start-6',
|
|
122
|
-
7: 'col-start-7',
|
|
123
|
-
8: 'col-start-8',
|
|
124
|
-
9: 'col-start-9',
|
|
125
|
-
10: 'col-start-10',
|
|
126
|
-
11: 'col-start-11',
|
|
127
|
-
12: 'col-start-12'
|
|
128
|
-
};
|
|
129
|
-
/**
|
|
130
|
-
* @internal
|
|
131
|
-
*
|
|
132
|
-
* Combine classes into a single string.
|
|
133
|
-
*
|
|
134
|
-
* @param {string[]} classes
|
|
135
|
-
* @returns {string} Combined classes
|
|
136
|
-
*/
|
|
137
|
-
const combineClasses = classes => classes.filter(Boolean).join(' ');
|
|
138
|
-
/**
|
|
139
|
-
* @internal
|
|
140
|
-
*
|
|
141
|
-
* Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
|
|
142
|
-
* Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
|
|
143
|
-
*
|
|
144
|
-
* @example
|
|
145
|
-
* ```typescript
|
|
146
|
-
* const classes = getColumnPositionClasses({
|
|
147
|
-
* leftOffset: 1, // Starts at the first column
|
|
148
|
-
* width: 6 // Spans 6 columns
|
|
149
|
-
* });
|
|
150
|
-
* // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
|
|
151
|
-
* ```
|
|
152
|
-
*
|
|
153
|
-
* @param {DotPageAssetLayoutColumn} column - Column configuration object
|
|
154
|
-
* @param {number} column.leftOffset - Starting position (0-based) in the grid
|
|
155
|
-
* @param {number} column.width - Number of columns to span
|
|
156
|
-
* @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
|
|
157
|
-
*/
|
|
158
|
-
const getColumnPositionClasses = column => {
|
|
159
|
-
const {
|
|
160
|
-
leftOffset,
|
|
161
|
-
width
|
|
162
|
-
} = column;
|
|
163
|
-
const startClass = startClassMap[leftOffset];
|
|
164
|
-
const endClass = endClassMap[leftOffset + width];
|
|
165
|
-
return {
|
|
166
|
-
startClass,
|
|
167
|
-
endClass
|
|
168
|
-
};
|
|
169
|
-
};
|
|
170
|
-
/**
|
|
171
|
-
* @internal
|
|
172
|
-
*
|
|
173
|
-
* Helper function that returns an object containing the dotCMS data attributes.
|
|
174
|
-
* @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
|
|
175
|
-
* @param {string} container - The container to get the attributes for
|
|
176
|
-
* @returns {DotContentletAttributes} The dotCMS data attributes
|
|
177
|
-
*/
|
|
178
|
-
function getDotContentletAttributes(contentlet, container) {
|
|
179
|
-
return {
|
|
180
|
-
'data-dot-identifier': contentlet == null ? void 0 : contentlet.identifier,
|
|
181
|
-
'data-dot-basetype': contentlet == null ? void 0 : contentlet.baseType,
|
|
182
|
-
'data-dot-title': (contentlet == null ? void 0 : contentlet.widgetTitle) || (contentlet == null ? void 0 : contentlet.title),
|
|
183
|
-
'data-dot-inode': contentlet == null ? void 0 : contentlet.inode,
|
|
184
|
-
'data-dot-type': contentlet == null ? void 0 : contentlet.contentType,
|
|
185
|
-
'data-dot-container': container,
|
|
186
|
-
'data-dot-on-number-of-pages': contentlet == null ? void 0 : contentlet.onNumberOfPages
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
/**
|
|
190
|
-
* @internal
|
|
191
|
-
*
|
|
192
|
-
* Retrieves container data from a DotCMS page asset using the container reference.
|
|
193
|
-
* This function processes the container information and returns a standardized format
|
|
194
|
-
* for container editing.
|
|
195
|
-
*
|
|
196
|
-
* @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
|
|
197
|
-
* @param {DotCMSColumnContainer} columContainer - The container reference from the layout
|
|
198
|
-
* @throws {Error} When page asset is invalid or container is not found
|
|
199
|
-
* @returns {EditableContainerData} Formatted container data for editing
|
|
200
|
-
*
|
|
201
|
-
* @example
|
|
202
|
-
* const containerData = getContainersData(pageAsset, containerRef);
|
|
203
|
-
* // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
|
|
204
|
-
*/
|
|
205
|
-
const getContainersData = (dotCMSPageAsset, columContainer) => {
|
|
206
|
-
var _containerStructures$, _container$parentPerm, _container$maxContent;
|
|
207
|
-
const {
|
|
208
|
-
identifier,
|
|
209
|
-
uuid
|
|
210
|
-
} = columContainer;
|
|
211
|
-
const dotContainer = dotCMSPageAsset.containers[identifier];
|
|
212
|
-
if (!dotContainer) {
|
|
213
|
-
return null;
|
|
214
|
-
}
|
|
215
|
-
const {
|
|
216
|
-
containerStructures,
|
|
217
|
-
container
|
|
218
|
-
} = dotContainer;
|
|
219
|
-
const acceptTypes = (_containerStructures$ = containerStructures == null ? void 0 : containerStructures.map(structure => structure.contentTypeVar).join(',')) != null ? _containerStructures$ : '';
|
|
220
|
-
const variantId = container == null || (_container$parentPerm = container.parentPermissionable) == null ? void 0 : _container$parentPerm.variantId;
|
|
221
|
-
const maxContentlets = (_container$maxContent = container == null ? void 0 : container.maxContentlets) != null ? _container$maxContent : 0;
|
|
222
|
-
const path = container == null ? void 0 : container.path;
|
|
223
|
-
return {
|
|
224
|
-
uuid,
|
|
225
|
-
variantId,
|
|
226
|
-
acceptTypes,
|
|
227
|
-
maxContentlets,
|
|
228
|
-
identifier: path != null ? path : identifier
|
|
229
|
-
};
|
|
230
|
-
};
|
|
231
|
-
/**
|
|
232
|
-
* @internal
|
|
233
|
-
*
|
|
234
|
-
* Retrieves the contentlets (content items) associated with a specific container.
|
|
235
|
-
* Handles different UUID formats and provides warning for missing contentlets.
|
|
236
|
-
*
|
|
237
|
-
* @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
|
|
238
|
-
* @param {DotCMSColumnContainer} columContainer - The container reference from the layout
|
|
239
|
-
* @returns {DotCMSContentlet[]} Array of contentlets in the container
|
|
240
|
-
*
|
|
241
|
-
* @example
|
|
242
|
-
* const contentlets = getContentletsInContainer(pageAsset, containerRef);
|
|
243
|
-
* // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
|
|
244
|
-
*/
|
|
245
|
-
const getContentletsInContainer = (dotCMSPageAsset, columContainer) => {
|
|
246
|
-
const {
|
|
247
|
-
identifier,
|
|
248
|
-
uuid
|
|
249
|
-
} = columContainer;
|
|
250
|
-
const {
|
|
251
|
-
contentlets
|
|
252
|
-
} = dotCMSPageAsset.containers[identifier];
|
|
253
|
-
const contentletsInContainer = contentlets[`uuid-${uuid}`] || contentlets[`uuid-dotParser_${uuid}`] || [];
|
|
254
|
-
if (!contentletsInContainer) {
|
|
255
|
-
console.warn(`We couldn't find the contentlets for the container with the identifier ${identifier} and the uuid ${uuid} becareful by adding content to this container.\nWe recommend to change the container in the layout and add the content again.`);
|
|
256
|
-
}
|
|
257
|
-
return contentletsInContainer;
|
|
258
|
-
};
|
|
259
|
-
/**
|
|
260
|
-
* @internal
|
|
261
|
-
*
|
|
262
|
-
* Generates the required DotCMS data attributes for a container element.
|
|
263
|
-
* These attributes are used by DotCMS for container identification and functionality.
|
|
264
|
-
*
|
|
265
|
-
* @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
|
|
266
|
-
* @returns {DotContainerAttributes} Object containing all necessary data attributes
|
|
267
|
-
*
|
|
268
|
-
* @example
|
|
269
|
-
* const attributes = getDotContainerAttributes({
|
|
270
|
-
* uuid: '123',
|
|
271
|
-
* identifier: 'cont1',
|
|
272
|
-
* acceptTypes: 'type1,type2',
|
|
273
|
-
* maxContentlets: 5
|
|
274
|
-
* });
|
|
275
|
-
* // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
|
|
276
|
-
*/
|
|
277
|
-
function getDotContainerAttributes({
|
|
278
|
-
uuid,
|
|
279
|
-
identifier,
|
|
280
|
-
acceptTypes,
|
|
281
|
-
maxContentlets
|
|
282
|
-
}) {
|
|
283
|
-
return {
|
|
284
|
-
'data-dot-object': 'container',
|
|
285
|
-
'data-dot-accept-types': acceptTypes,
|
|
286
|
-
'data-dot-identifier': identifier,
|
|
287
|
-
'data-max-contentlets': maxContentlets.toString(),
|
|
288
|
-
'data-dot-uuid': uuid
|
|
289
|
-
};
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
const EMPTY_CONTAINER_STYLE = {
|
|
293
|
-
width: '100%',
|
|
294
|
-
backgroundColor: '#ECF0FD',
|
|
295
|
-
display: 'flex',
|
|
296
|
-
justifyContent: 'center',
|
|
297
|
-
alignItems: 'center',
|
|
298
|
-
color: '#030E32',
|
|
299
|
-
height: '10rem'
|
|
300
|
-
};
|
|
301
92
|
/**
|
|
302
93
|
* @internal
|
|
303
94
|
*
|
|
@@ -309,7 +100,7 @@ const EMPTY_CONTAINER_STYLE = {
|
|
|
309
100
|
* @param {string} props.identifier - Container identifier
|
|
310
101
|
* @returns {JSX.Element | null} Message about missing container or null in production
|
|
311
102
|
*/
|
|
312
|
-
const
|
|
103
|
+
const ContainerNotFound = ({
|
|
313
104
|
identifier
|
|
314
105
|
}) => {
|
|
315
106
|
const isDevMode = useIsDevMode();
|
|
@@ -324,7 +115,7 @@ const ContainerNoFound = ({
|
|
|
324
115
|
}
|
|
325
116
|
return jsxs("div", {
|
|
326
117
|
"data-testid": "container-not-found",
|
|
327
|
-
style:
|
|
118
|
+
style: EMPTY_CONTAINER_STYLE_REACT,
|
|
328
119
|
children: ["This container with identifier ", identifier, " was not found."]
|
|
329
120
|
});
|
|
330
121
|
};
|
|
@@ -342,7 +133,7 @@ const EmptyContainer = dotAttributes => {
|
|
|
342
133
|
return null;
|
|
343
134
|
}
|
|
344
135
|
return jsx("div", Object.assign({}, dotAttributes, {
|
|
345
|
-
style:
|
|
136
|
+
style: EMPTY_CONTAINER_STYLE_REACT,
|
|
346
137
|
children: jsx("span", {
|
|
347
138
|
"data-testid": "empty-container-message",
|
|
348
139
|
children: "This container is empty."
|
|
@@ -493,7 +284,7 @@ function CustomComponent({
|
|
|
493
284
|
if (UserComponent) {
|
|
494
285
|
return jsx(UserComponent, Object.assign({}, contentlet));
|
|
495
286
|
}
|
|
496
|
-
const UserNoComponent = userComponents[
|
|
287
|
+
const UserNoComponent = userComponents[CUSTOM_NO_COMPONENT];
|
|
497
288
|
return jsx(FallbackComponent, {
|
|
498
289
|
UserNoComponent: UserNoComponent,
|
|
499
290
|
contentlet: contentlet
|
|
@@ -528,7 +319,7 @@ function Container({
|
|
|
528
319
|
const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
|
|
529
320
|
const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
|
|
530
321
|
if (!containerData) {
|
|
531
|
-
return jsx(
|
|
322
|
+
return jsx(ContainerNotFound, {
|
|
532
323
|
identifier: container.identifier
|
|
533
324
|
});
|
|
534
325
|
}
|
|
@@ -598,7 +389,7 @@ function Column({
|
|
|
598
389
|
const Row = ({
|
|
599
390
|
row
|
|
600
391
|
}) => {
|
|
601
|
-
const customRowClass =
|
|
392
|
+
const customRowClass = combineClasses([row.styleClass || '', styles$1.row]);
|
|
602
393
|
return jsx("div", {
|
|
603
394
|
className: "dot-row-container",
|
|
604
395
|
children: jsx("div", {
|
|
@@ -634,11 +425,6 @@ const DotCMSLayoutBody = ({
|
|
|
634
425
|
}) => {
|
|
635
426
|
var _page$layout;
|
|
636
427
|
const dotCMSPageBody = page == null || (_page$layout = page.layout) == null ? void 0 : _page$layout.body;
|
|
637
|
-
if (!dotCMSPageBody) {
|
|
638
|
-
return jsx(ErrorMessage, {
|
|
639
|
-
mode: _mode
|
|
640
|
-
});
|
|
641
|
-
}
|
|
642
428
|
const contextValue = {
|
|
643
429
|
pageAsset: page,
|
|
644
430
|
userComponents: _components,
|
|
@@ -646,9 +432,9 @@ const DotCMSLayoutBody = ({
|
|
|
646
432
|
};
|
|
647
433
|
return jsx(DotCMSPageContext.Provider, {
|
|
648
434
|
value: contextValue,
|
|
649
|
-
children: dotCMSPageBody.rows.map((row, index) => jsx(Row, {
|
|
435
|
+
children: dotCMSPageBody ? dotCMSPageBody.rows.map((row, index) => jsx(Row, {
|
|
650
436
|
row: row
|
|
651
|
-
}, index))
|
|
437
|
+
}, index)) : jsx(ErrorMessage, {})
|
|
652
438
|
});
|
|
653
439
|
};
|
|
654
440
|
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dotcms/react",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"react": ">=18",
|
|
6
6
|
"react-dom": ">=18",
|
|
7
|
-
"@dotcms/client": "0.0.1-beta.
|
|
8
|
-
"@dotcms/uve": "0.0.1-beta.
|
|
7
|
+
"@dotcms/client": "0.0.1-beta.15",
|
|
8
|
+
"@dotcms/uve": "0.0.1-beta.15",
|
|
9
9
|
"@tinymce/tinymce-react": "^5.1.1"
|
|
10
10
|
},
|
|
11
11
|
"description": "Official React Components library to render a dotCMS page.",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '
|
|
1
|
+
import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '@dotcms/uve/types';
|
|
2
2
|
export declare const MOCK_COLUMN: DotPageAssetLayoutColumn;
|
|
3
3
|
export declare const MOCK_CONTAINER: DotCMSColumnContainer;
|
|
4
4
|
export declare const MOCK_PAGE_ASSET: DotCMSPageAsset;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DotContainerAttributes } from '
|
|
1
|
+
import { DotContainerAttributes } from '@dotcms/uve/types';
|
|
2
2
|
/**
|
|
3
3
|
* @internal
|
|
4
4
|
*
|
|
@@ -10,7 +10,7 @@ import { DotContainerAttributes } from '../../utils';
|
|
|
10
10
|
* @param {string} props.identifier - Container identifier
|
|
11
11
|
* @returns {JSX.Element | null} Message about missing container or null in production
|
|
12
12
|
*/
|
|
13
|
-
export declare const
|
|
13
|
+
export declare const ContainerNotFound: ({ identifier }: {
|
|
14
14
|
identifier: string;
|
|
15
15
|
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
16
16
|
/**
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { DotCMSPageRendererMode } from '
|
|
3
|
-
import { DotCMSContentlet, DotCMSPageAsset } from '../../types';
|
|
2
|
+
import { DotCMSContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/uve/types';
|
|
4
3
|
interface DotCMSLayoutBodyProps {
|
|
5
4
|
page: DotCMSPageAsset;
|
|
6
5
|
components: Record<string, React.ComponentType<DotCMSContentlet>>;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import { DotCMSPageRendererMode } from '../../../contexts/DotCMSPageContext';
|
|
2
1
|
/**
|
|
3
2
|
* Error message component for when the page body is missing
|
|
4
3
|
*
|
|
5
4
|
* @return {JSX.Element} Error message component
|
|
6
5
|
*/
|
|
7
|
-
export declare const ErrorMessage: (
|
|
8
|
-
mode: DotCMSPageRendererMode;
|
|
9
|
-
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
6
|
+
export declare const ErrorMessage: () => false | import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { DotCMSContentlet, DotCMSPageAsset } from '
|
|
3
|
-
export type DotCMSPageRendererMode = 'production' | 'development';
|
|
2
|
+
import { DotCMSContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/uve/types';
|
|
4
3
|
/**
|
|
5
4
|
* @internal
|
|
6
5
|
*
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import { DotCMSPageRendererMode } from '../contexts/DotCMSPageContext';
|
|
2
1
|
/**
|
|
3
2
|
* @internal
|
|
4
3
|
* A React hook that determines if the current environment is in development mode.
|
|
5
4
|
*
|
|
6
5
|
* The hook returns `true` if either:
|
|
7
|
-
* - The
|
|
8
|
-
* - The application is running inside the DotCMS editor (as determined by `isInsideEditor()`).
|
|
6
|
+
* - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
|
|
9
7
|
*
|
|
10
|
-
* @param {DotCMSPageRendererMode} [renderMode] - Optional override for the render mode.
|
|
11
8
|
* @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
|
|
12
9
|
*/
|
|
13
|
-
export declare const useIsDevMode: (
|
|
10
|
+
export declare const useIsDevMode: () => boolean;
|