@sitecore-jss/sitecore-jss-react 23.0.0-canary.2 → 23.0.0-canary.21
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/components/Date.js +3 -5
- package/dist/cjs/components/ErrorBoundary.js +18 -2
- package/dist/cjs/components/Image.js +5 -10
- package/dist/cjs/components/Link.js +5 -8
- package/dist/cjs/components/Placeholder.js +3 -10
- package/dist/cjs/components/PlaceholderCommon.js +15 -58
- package/dist/cjs/components/RichText.js +10 -11
- package/dist/cjs/components/SitecoreContext.js +0 -8
- package/dist/cjs/components/Text.js +3 -6
- package/dist/cjs/enhancers/withDatasourceCheck.js +1 -4
- package/dist/cjs/enhancers/withPlaceholder.js +2 -2
- package/dist/cjs/enhancers/withSitecoreContext.js +1 -2
- package/dist/cjs/index.js +1 -28
- package/dist/cjs/utils.js +1 -16
- package/dist/esm/components/Date.js +2 -5
- package/dist/esm/components/ErrorBoundary.js +18 -2
- package/dist/esm/components/Image.js +4 -10
- package/dist/esm/components/Link.js +5 -8
- package/dist/esm/components/Placeholder.js +3 -10
- package/dist/esm/components/PlaceholderCommon.js +16 -59
- package/dist/esm/components/RichText.js +11 -12
- package/dist/esm/components/SitecoreContext.js +0 -8
- package/dist/esm/components/Text.js +2 -6
- package/dist/esm/enhancers/withDatasourceCheck.js +1 -4
- package/dist/esm/enhancers/withPlaceholder.js +2 -2
- package/dist/esm/enhancers/withSitecoreContext.js +2 -3
- package/dist/esm/index.js +1 -11
- package/dist/esm/utils.js +0 -14
- package/package.json +3 -6
- package/types/ComponentBuilder.d.ts +0 -1
- package/types/components/Date.d.ts +2 -4
- package/types/components/EditFrame.d.ts +0 -1
- package/types/components/ErrorBoundary.d.ts +0 -1
- package/types/components/File.d.ts +0 -1
- package/types/components/HiddenRendering.d.ts +0 -1
- package/types/components/Image.d.ts +2 -4
- package/types/components/Link.d.ts +3 -5
- package/types/components/MissingComponent.d.ts +0 -1
- package/types/components/Placeholder.d.ts +0 -1
- package/types/components/PlaceholderCommon.d.ts +12 -4
- package/types/components/RichText.d.ts +3 -5
- package/types/components/SitecoreContext.d.ts +0 -21
- package/types/components/Text.d.ts +2 -4
- package/types/components/VisitorIdentification.d.ts +0 -1
- package/types/components/sharedTypes.d.ts +1 -8
- package/types/enhancers/withComponentFactory.d.ts +0 -1
- package/types/enhancers/withDatasourceCheck.d.ts +0 -1
- package/types/enhancers/withEditorChromes.d.ts +0 -1
- package/types/enhancers/withPlaceholder.d.ts +0 -1
- package/types/enhancers/withSitecoreContext.d.ts +1 -3
- package/types/index.d.ts +1 -11
- package/types/utils.d.ts +0 -9
- package/dist/cjs/components/BYOCComponent.js +0 -122
- package/dist/cjs/components/BYOCWrapper.js +0 -18
- package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js +0 -22
- package/dist/cjs/components/DesignLibrary.js +0 -72
- package/dist/cjs/components/EditingScripts.js +0 -47
- package/dist/cjs/components/FEaaSComponent.js +0 -151
- package/dist/cjs/components/FEaaSWrapper.js +0 -18
- package/dist/cjs/components/FieldMetadata.js +0 -29
- package/dist/cjs/components/Form.js +0 -80
- package/dist/cjs/components/PlaceholderMetadata.js +0 -63
- package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js +0 -63
- package/dist/cjs/enhancers/withFieldMetadata.js +0 -60
- package/dist/esm/components/BYOCComponent.js +0 -91
- package/dist/esm/components/BYOCWrapper.js +0 -11
- package/dist/esm/components/DefaultEmptyFieldEditingComponents.js +0 -14
- package/dist/esm/components/DesignLibrary.js +0 -45
- package/dist/esm/components/EditingScripts.js +0 -40
- package/dist/esm/components/FEaaSComponent.js +0 -119
- package/dist/esm/components/FEaaSWrapper.js +0 -11
- package/dist/esm/components/FieldMetadata.js +0 -22
- package/dist/esm/components/Form.js +0 -52
- package/dist/esm/components/PlaceholderMetadata.js +0 -56
- package/dist/esm/enhancers/withEmptyFieldEditingComponent.js +0 -36
- package/dist/esm/enhancers/withFieldMetadata.js +0 -33
- package/types/components/BYOCComponent.d.ts +0 -91
- package/types/components/BYOCWrapper.d.ts +0 -4
- package/types/components/DefaultEmptyFieldEditingComponents.d.ts +0 -10
- package/types/components/DesignLibrary.d.ts +0 -3
- package/types/components/EditingScripts.d.ts +0 -8
- package/types/components/FEaaSComponent.d.ts +0 -72
- package/types/components/FEaaSWrapper.d.ts +0 -4
- package/types/components/FieldMetadata.d.ts +0 -18
- package/types/components/Form.d.ts +0 -30
- package/types/components/PlaceholderMetadata.d.ts +0 -29
- package/types/enhancers/withEmptyFieldEditingComponent.d.ts +0 -28
- package/types/enhancers/withFieldMetadata.d.ts +0 -17
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { EditMode, LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
|
|
3
|
-
import { useSitecoreContext } from '../enhancers/withSitecoreContext';
|
|
4
|
-
import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
|
|
5
|
-
import { getDesignLibraryScriptLink } from '@sitecore-jss/sitecore-jss/editing';
|
|
6
|
-
/**
|
|
7
|
-
* - Renders client scripts and data for editing/preview mode for Pages
|
|
8
|
-
* - Renders script required for the Design Library (when RenderingType is `component`).
|
|
9
|
-
* This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
|
|
10
|
-
* @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
|
|
11
|
-
*/
|
|
12
|
-
export const EditingScripts = () => {
|
|
13
|
-
var _a;
|
|
14
|
-
const { sitecoreContext: { pageState, editMode, clientData, clientScripts, renderingType }, api, } = useSitecoreContext();
|
|
15
|
-
// Don't render anything if not in editing/preview mode and rendering type is not component
|
|
16
|
-
if (renderingType !== RenderingType.Component &&
|
|
17
|
-
(pageState === LayoutServicePageState.Normal || pageState === LayoutServicePageState.Preview)) {
|
|
18
|
-
return React.createElement(React.Fragment, null);
|
|
19
|
-
}
|
|
20
|
-
// In case of RenderingType.Component - render only the script for Design Libnrary
|
|
21
|
-
if (renderingType === RenderingType.Component) {
|
|
22
|
-
// Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
|
|
23
|
-
const now = new Date();
|
|
24
|
-
const hour = String(now.getUTCHours()).padStart(2, '0');
|
|
25
|
-
const day = String(now.getUTCDate()).padStart(2, '0');
|
|
26
|
-
const month = String(now.getUTCMonth() + 1).padStart(2, '0');
|
|
27
|
-
const year = String(now.getUTCFullYear());
|
|
28
|
-
const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
|
|
29
|
-
const scriptUrl = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
|
|
30
|
-
return (React.createElement(React.Fragment, null,
|
|
31
|
-
React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
|
|
32
|
-
}
|
|
33
|
-
if (editMode === EditMode.Metadata) {
|
|
34
|
-
const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
|
|
35
|
-
return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
|
|
36
|
-
clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
|
|
37
|
-
Object.keys(jssClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
|
|
38
|
-
}
|
|
39
|
-
return React.createElement(React.Fragment, null);
|
|
40
|
-
};
|
|
@@ -1,119 +0,0 @@
|
|
|
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
|
-
import React from 'react';
|
|
11
|
-
import * as FEAAS from '@sitecore-feaas/clientside/react';
|
|
12
|
-
import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
|
|
13
|
-
import { getDataFromFields } from '../utils';
|
|
14
|
-
export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
|
|
15
|
-
/**
|
|
16
|
-
* @param {FEaaSComponentProps} props component props
|
|
17
|
-
*/
|
|
18
|
-
export const FEaaSComponent = (props) => {
|
|
19
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
20
|
-
const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
|
|
21
|
-
if (!props.template &&
|
|
22
|
-
(!props.params ||
|
|
23
|
-
!props.params.LibraryId ||
|
|
24
|
-
!props.params.ComponentId ||
|
|
25
|
-
!props.params.ComponentVersion ||
|
|
26
|
-
!props.params.ComponentHostName ||
|
|
27
|
-
!computedRevision)) {
|
|
28
|
-
// Missing FEaaS component required props
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
// combine fetchedData from server with datasource data (if present)
|
|
32
|
-
const data = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
|
|
33
|
-
// FEaaS control would still be hydrated by client
|
|
34
|
-
// we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
|
|
35
|
-
// this also allows component to fall back to full client-side rendering when template or src is empty
|
|
36
|
-
// FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
|
|
37
|
-
return (React.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId, version: (_e = props.params) === null || _e === void 0 ? void 0 : _e.ComponentVersion, component: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentId, instance: (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentInstanceId, revision: computedRevision, fetch: [] }));
|
|
38
|
-
};
|
|
39
|
-
/**
|
|
40
|
-
* Fetches server component props required for server rendering, based on rendering params.
|
|
41
|
-
* Component endpoint will either be retrieved from params or from endpointOverride
|
|
42
|
-
* @param {FEaaSComponentParams} params component params
|
|
43
|
-
* @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
|
|
44
|
-
* @param {string} [endpointOverride] optional override for component endpoint
|
|
45
|
-
*/
|
|
46
|
-
export function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
|
|
47
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
48
|
-
const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
|
|
49
|
-
const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
|
|
50
|
-
let template = '';
|
|
51
|
-
let fetchedData = {};
|
|
52
|
-
const fetchDataOptions = params.ComponentDataOverride
|
|
53
|
-
? JSON.parse(params.ComponentDataOverride)
|
|
54
|
-
: {};
|
|
55
|
-
try {
|
|
56
|
-
template = yield fetchComponentTemplate(src, params, revisionFallback);
|
|
57
|
-
fetchedData = yield fetchData(fetchDataOptions);
|
|
58
|
-
}
|
|
59
|
-
catch (e) {
|
|
60
|
-
console.error(e);
|
|
61
|
-
}
|
|
62
|
-
return {
|
|
63
|
-
fetchedData,
|
|
64
|
-
revisionFallback,
|
|
65
|
-
template,
|
|
66
|
-
};
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* @param {string} src component endpoint
|
|
71
|
-
* @param {FEaaSComponentParams} params rendering parameters for FEAAS component
|
|
72
|
-
* @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
|
|
73
|
-
*/
|
|
74
|
-
function fetchComponentTemplate(src, params, revisionFallback) {
|
|
75
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
76
|
-
try {
|
|
77
|
-
const { template } = yield FEAAS.fetchComponent(src);
|
|
78
|
-
return template;
|
|
79
|
-
}
|
|
80
|
-
catch (error) {
|
|
81
|
-
console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
|
|
82
|
-
revisionFallback}" is present`);
|
|
83
|
-
throw error;
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Fetches component data based on the provided data options.
|
|
89
|
-
* This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
|
|
90
|
-
* @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
|
|
91
|
-
* @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
|
|
92
|
-
* or rejects with an error if data fetching encounters an issue.
|
|
93
|
-
* @throws {Error} If an error occurs during data fetching, it is propagated as an error.
|
|
94
|
-
*/
|
|
95
|
-
function fetchData(dataOptions) {
|
|
96
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
97
|
-
try {
|
|
98
|
-
const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
|
|
99
|
-
return fetchedData;
|
|
100
|
-
}
|
|
101
|
-
catch (error) {
|
|
102
|
-
console.error('Fetch FEAAS component data settings failed');
|
|
103
|
-
throw error;
|
|
104
|
-
}
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Build component endpoint URL from component's params
|
|
109
|
-
* @param {FEaaSComponentParams} params rendering parameters for FEAAS component
|
|
110
|
-
* @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
|
|
111
|
-
* @returns component endpoint URL
|
|
112
|
-
*/
|
|
113
|
-
export const composeComponentEndpoint = (params, revisionFallback) => {
|
|
114
|
-
const revision = params.ComponentRevision || revisionFallback;
|
|
115
|
-
const hostname = params.ComponentHostName.startsWith('https://')
|
|
116
|
-
? params.ComponentHostName
|
|
117
|
-
: `https://${params.ComponentHostName}`;
|
|
118
|
-
return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
|
|
119
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { FEaaSComponent } from './FEaaSComponent';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
|
|
4
|
-
export const FEaaSWrapper = (props) => {
|
|
5
|
-
var _a, _b;
|
|
6
|
-
const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
|
|
7
|
-
const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
|
|
8
|
-
return (React.createElement("div", { className: styles, id: id ? id : undefined },
|
|
9
|
-
React.createElement("div", { className: "component-content" },
|
|
10
|
-
React.createElement(FEaaSComponent, Object.assign({}, props)))));
|
|
11
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { MetadataKind } from '@sitecore-jss/sitecore-jss/editing';
|
|
3
|
-
/**
|
|
4
|
-
* The component which renders field metadata markup
|
|
5
|
-
* @param {FieldMetadataProps} props the props of the component
|
|
6
|
-
* @returns metadata markup wrapped around children
|
|
7
|
-
*/
|
|
8
|
-
export const FieldMetadata = (props) => {
|
|
9
|
-
const data = JSON.stringify(props.metadata);
|
|
10
|
-
const attributes = {
|
|
11
|
-
type: 'text/sitecore',
|
|
12
|
-
chrometype: 'field',
|
|
13
|
-
className: 'scpm',
|
|
14
|
-
};
|
|
15
|
-
const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Open });
|
|
16
|
-
const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Close });
|
|
17
|
-
return (React.createElement(React.Fragment, null,
|
|
18
|
-
React.createElement("code", Object.assign({}, codeOpenAttributes), data),
|
|
19
|
-
props.children,
|
|
20
|
-
React.createElement("code", Object.assign({}, codeCloseAttributes))));
|
|
21
|
-
};
|
|
22
|
-
FieldMetadata.displayName = 'FieldMetadata';
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/* eslint-disable prefer-const */
|
|
2
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { form } from '@sitecore-jss/sitecore-jss';
|
|
4
|
-
import { useSitecoreContext } from '../enhancers/withSitecoreContext';
|
|
5
|
-
let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
|
|
6
|
-
/**
|
|
7
|
-
* Mock function to replace the form module functions for `testing` purposes.
|
|
8
|
-
* @param {any} formModule - The form module to mock
|
|
9
|
-
*/
|
|
10
|
-
export const mockFormModule = (formModule) => {
|
|
11
|
-
executeScriptElements = formModule.executeScriptElements;
|
|
12
|
-
loadForm = formModule.loadForm;
|
|
13
|
-
subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
|
|
14
|
-
};
|
|
15
|
-
export const Form = ({ params, rendering }) => {
|
|
16
|
-
var _a, _b, _c, _d, _e;
|
|
17
|
-
const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
|
|
18
|
-
const [error, setError] = useState(false);
|
|
19
|
-
const [content, setContent] = useState('');
|
|
20
|
-
const context = useSitecoreContext();
|
|
21
|
-
const formRef = useRef(null);
|
|
22
|
-
const isEditing = context.sitecoreContext.pageEditing;
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
var _a, _b, _c, _d;
|
|
25
|
-
if (!content) {
|
|
26
|
-
loadForm((_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
|
|
27
|
-
.then(setContent)
|
|
28
|
-
.catch(() => {
|
|
29
|
-
if (isEditing) {
|
|
30
|
-
console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
|
|
31
|
-
}
|
|
32
|
-
setError(true);
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
}, [content, params.FormId, (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl, isEditing]);
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
if (!content || !formRef.current)
|
|
38
|
-
return;
|
|
39
|
-
formRef.current.innerHTML = content;
|
|
40
|
-
executeScriptElements(formRef.current);
|
|
41
|
-
// If we are in editing mode, we don't want to send any events
|
|
42
|
-
if (!isEditing) {
|
|
43
|
-
subscribeToFormSubmitEvent(formRef.current, rendering.uid);
|
|
44
|
-
}
|
|
45
|
-
}, [content, isEditing, rendering.uid]);
|
|
46
|
-
if (isEditing) {
|
|
47
|
-
if (error) {
|
|
48
|
-
return (React.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
return React.createElement("div", { ref: formRef, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined });
|
|
52
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { getDynamicPlaceholderPattern, isDynamicPlaceholder, } from '@sitecore-jss/sitecore-jss/layout';
|
|
3
|
-
import { MetadataKind, DEFAULT_PLACEHOLDER_UID } from '@sitecore-jss/sitecore-jss/editing';
|
|
4
|
-
/**
|
|
5
|
-
* A React component to generate metadata blocks for a placeholder or rendering.
|
|
6
|
-
* It utilizes dynamic attributes based on whether the component acts as a placeholder
|
|
7
|
-
* or as a rendering to properly render the surrounding code blocks.
|
|
8
|
-
* @param {object} props The properties passed to the component.
|
|
9
|
-
* @param {ComponentRendering} props.rendering The rendering data.
|
|
10
|
-
* @param {string} [props.placeholderName] The name of the placeholder.
|
|
11
|
-
* @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
|
|
12
|
-
* @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
|
|
13
|
-
*/
|
|
14
|
-
export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
|
|
15
|
-
const getCodeBlockAttributes = (kind, id, placeholderName) => {
|
|
16
|
-
const chrometype = placeholderName ? 'placeholder' : 'rendering';
|
|
17
|
-
const attributes = {
|
|
18
|
-
type: 'text/sitecore',
|
|
19
|
-
chrometype: chrometype,
|
|
20
|
-
className: 'scpm',
|
|
21
|
-
kind: kind,
|
|
22
|
-
};
|
|
23
|
-
if (kind === MetadataKind.Open) {
|
|
24
|
-
if (chrometype === 'placeholder' && placeholderName) {
|
|
25
|
-
let phId = '';
|
|
26
|
-
for (const placeholder of Object.keys(rendering.placeholders)) {
|
|
27
|
-
if (placeholderName === placeholder) {
|
|
28
|
-
phId = id
|
|
29
|
-
? `${placeholderName}_${id}`
|
|
30
|
-
: `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
|
|
31
|
-
break;
|
|
32
|
-
}
|
|
33
|
-
// Check if the placeholder is a dynamic placeholder
|
|
34
|
-
if (isDynamicPlaceholder(placeholder)) {
|
|
35
|
-
const pattern = getDynamicPlaceholderPattern(placeholder);
|
|
36
|
-
// Check if the placeholder matches the dynamic placeholder pattern
|
|
37
|
-
if (pattern.test(placeholderName)) {
|
|
38
|
-
phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
|
|
39
|
-
break;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
attributes.id = phId;
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
attributes.id = id;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
return attributes;
|
|
50
|
-
};
|
|
51
|
-
const renderComponent = (uid, placeholderName) => (React.createElement(React.Fragment, null,
|
|
52
|
-
React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Open, uid, placeholderName))),
|
|
53
|
-
children,
|
|
54
|
-
React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Close, uid, placeholderName)))));
|
|
55
|
-
return React.createElement(React.Fragment, null, renderComponent(rendering.uid, placeholderName));
|
|
56
|
-
};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import { isFieldValueEmpty, } from '@sitecore-jss/sitecore-jss/layout';
|
|
3
|
-
/**
|
|
4
|
-
* Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
|
|
5
|
-
* @param {ComponentType<FieldComponentProps>} FieldComponent the field component
|
|
6
|
-
* @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
|
|
7
|
-
*/
|
|
8
|
-
export function withEmptyFieldEditingComponent(FieldComponent, options) {
|
|
9
|
-
const getEmptyFieldEditingComponent = (props) => {
|
|
10
|
-
var _a;
|
|
11
|
-
const { editable = true } = props;
|
|
12
|
-
if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && isFieldValueEmpty(props.field)) {
|
|
13
|
-
const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
|
|
14
|
-
let resolvedProps = props;
|
|
15
|
-
// If no custom empty field editing component is provided, we can omit unnecessary props
|
|
16
|
-
// to do not insert them to html
|
|
17
|
-
if (!props.emptyFieldEditingComponent) {
|
|
18
|
-
resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
|
|
19
|
-
}
|
|
20
|
-
return React.createElement(Component, Object.assign({}, resolvedProps));
|
|
21
|
-
}
|
|
22
|
-
return null;
|
|
23
|
-
};
|
|
24
|
-
if (options.isForwardRef) {
|
|
25
|
-
// eslint-disable-next-line react/display-name
|
|
26
|
-
return forwardRef((props, ref) => {
|
|
27
|
-
const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
|
|
28
|
-
return (emptyFieldEditingComponent || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
// eslint-disable-next-line react/display-name
|
|
32
|
-
return (props) => {
|
|
33
|
-
const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
|
|
34
|
-
return emptyFieldEditingComponent || React.createElement(FieldComponent, Object.assign({}, props));
|
|
35
|
-
};
|
|
36
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import { FieldMetadata } from '../components/FieldMetadata';
|
|
3
|
-
/**
|
|
4
|
-
* Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
|
|
5
|
-
* @param {ComponentType<FieldComponentProps>} FieldComponent the field component
|
|
6
|
-
* @param {boolean} isForwardRef set to 'true' if forward reference is needed
|
|
7
|
-
*/
|
|
8
|
-
export function withFieldMetadata(FieldComponent, isForwardRef = false) {
|
|
9
|
-
if (isForwardRef) {
|
|
10
|
-
// eslint-disable-next-line react/display-name
|
|
11
|
-
return forwardRef((props, ref) => {
|
|
12
|
-
var _a;
|
|
13
|
-
const { editable = true } = props;
|
|
14
|
-
const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
|
|
15
|
-
if (!metadata || !editable) {
|
|
16
|
-
return React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
|
|
17
|
-
}
|
|
18
|
-
return (React.createElement(FieldMetadata, { metadata: metadata },
|
|
19
|
-
React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
// eslint-disable-next-line react/display-name
|
|
23
|
-
return (props) => {
|
|
24
|
-
var _a;
|
|
25
|
-
const { editable = true } = props;
|
|
26
|
-
const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
|
|
27
|
-
if (!metadata || !editable) {
|
|
28
|
-
return React.createElement(FieldComponent, Object.assign({}, props));
|
|
29
|
-
}
|
|
30
|
-
return (React.createElement(FieldMetadata, { metadata: metadata },
|
|
31
|
-
React.createElement(FieldComponent, Object.assign({}, props))));
|
|
32
|
-
};
|
|
33
|
-
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
/// <reference types="@types/react" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { ComponentFields, ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
|
|
4
|
-
import { MissingComponentProps } from './MissingComponent';
|
|
5
|
-
import * as FEAAS from '@sitecore-feaas/clientside/react';
|
|
6
|
-
export declare const BYOC_COMPONENT_RENDERING_NAME = "BYOCComponent";
|
|
7
|
-
/**
|
|
8
|
-
* FEaaS props for server rendering.
|
|
9
|
-
*/
|
|
10
|
-
type BYOCServerProps = {
|
|
11
|
-
/**
|
|
12
|
-
* Fetched data from server component props for server rendering, based on rendering params.
|
|
13
|
-
*/
|
|
14
|
-
fetchedData?: FEAAS.DataScopes;
|
|
15
|
-
};
|
|
16
|
-
/**
|
|
17
|
-
* Data from rendering params on Sitecore's BYOC rendering
|
|
18
|
-
*/
|
|
19
|
-
export type BYOCComponentParams = {
|
|
20
|
-
/**
|
|
21
|
-
* Name of the component to render
|
|
22
|
-
*/
|
|
23
|
-
ComponentName?: string;
|
|
24
|
-
/**
|
|
25
|
-
* JSON props to pass into rendered component
|
|
26
|
-
*/
|
|
27
|
-
ComponentProps?: string;
|
|
28
|
-
/**
|
|
29
|
-
* A JSON object with data sources to be fetched and passed to the component
|
|
30
|
-
*/
|
|
31
|
-
ComponentDataOverride?: string;
|
|
32
|
-
/**
|
|
33
|
-
* A string with classes that can be used to apply themes, via SXA functionality
|
|
34
|
-
*/
|
|
35
|
-
styles?: string;
|
|
36
|
-
RenderingIdentifier?: string;
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* Props for BYOCComponent. Includes components list to load external components from.
|
|
40
|
-
*/
|
|
41
|
-
export type BYOCComponentClientProps = {
|
|
42
|
-
/**
|
|
43
|
-
* rendering data
|
|
44
|
-
*/
|
|
45
|
-
rendering: ComponentRendering;
|
|
46
|
-
/**
|
|
47
|
-
* rendering params
|
|
48
|
-
*/
|
|
49
|
-
params?: BYOCComponentParams;
|
|
50
|
-
/**
|
|
51
|
-
* fields from datasource items to be passed as rendered child component props
|
|
52
|
-
*/
|
|
53
|
-
fields?: ComponentFields;
|
|
54
|
-
/**
|
|
55
|
-
* Error component override. To be shown when Renderer or underlying component throws
|
|
56
|
-
*/
|
|
57
|
-
errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
|
|
58
|
-
/**
|
|
59
|
-
* Override to indicate missing component situations. Would be shown when BYOC component is not registered
|
|
60
|
-
* or ComponentName is missing
|
|
61
|
-
*/
|
|
62
|
-
missingComponentComponent?: React.ComponentClass<MissingComponentProps> | React.FC<MissingComponentProps>;
|
|
63
|
-
};
|
|
64
|
-
export type BYOCComponentProps = BYOCComponentClientProps & BYOCServerProps;
|
|
65
|
-
type ErrorComponentProps = {
|
|
66
|
-
[prop: string]: unknown;
|
|
67
|
-
error?: Error;
|
|
68
|
-
};
|
|
69
|
-
/**
|
|
70
|
-
* BYOCComponent facilitate the rendering of external components. It manages potential errors,
|
|
71
|
-
* missing components, and customization of error messages or alternative rendering components.
|
|
72
|
-
* @param {ByocComponentProps} props component props
|
|
73
|
-
* @returns dynamicly rendered component or Missing Component error frame
|
|
74
|
-
*/
|
|
75
|
-
export declare class BYOCComponent extends React.Component<BYOCComponentProps> {
|
|
76
|
-
state: Readonly<{
|
|
77
|
-
error?: Error;
|
|
78
|
-
}>;
|
|
79
|
-
constructor(props: BYOCComponentProps);
|
|
80
|
-
static getDerivedStateFromError(error: Error): {
|
|
81
|
-
error: Error;
|
|
82
|
-
};
|
|
83
|
-
componentDidCatch(error: Error): void;
|
|
84
|
-
render(): React.JSX.Element;
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* Fetches server component props required for server rendering, based on rendering params.
|
|
88
|
-
* @param {BYOCComponentParams} params component params
|
|
89
|
-
*/
|
|
90
|
-
export declare function fetchBYOCComponentServerProps(params: BYOCComponentParams): Promise<BYOCServerProps>;
|
|
91
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="@types/react" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export declare const DefaultEmptyFieldEditingComponentText: React.FC<{
|
|
4
|
-
[key: string]: unknown;
|
|
5
|
-
tag?: string;
|
|
6
|
-
}>;
|
|
7
|
-
export declare const DefaultEmptyFieldEditingComponentImage: React.FC<{
|
|
8
|
-
[key: string]: unknown;
|
|
9
|
-
className?: string;
|
|
10
|
-
}>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { JSX } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* - Renders client scripts and data for editing/preview mode for Pages
|
|
4
|
-
* - Renders script required for the Design Library (when RenderingType is `component`).
|
|
5
|
-
* This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
|
|
6
|
-
* @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
|
|
7
|
-
*/
|
|
8
|
-
export declare const EditingScripts: () => JSX.Element;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { JSX } from 'react';
|
|
2
|
-
import * as FEAAS from '@sitecore-feaas/clientside/react';
|
|
3
|
-
import { ComponentFields, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
|
|
4
|
-
export declare const FEAAS_COMPONENT_RENDERING_NAME = "FEaaSComponent";
|
|
5
|
-
/**
|
|
6
|
-
* Params from a Sitecore FEaaS rendering
|
|
7
|
-
*/
|
|
8
|
-
export type FEaaSComponentParams = {
|
|
9
|
-
LibraryId?: string;
|
|
10
|
-
ComponentId?: string;
|
|
11
|
-
ComponentVersion?: string;
|
|
12
|
-
ComponentRevision?: RevisionType;
|
|
13
|
-
ComponentHostName?: string;
|
|
14
|
-
ComponentInstanceId?: string;
|
|
15
|
-
ComponentDataOverride?: string;
|
|
16
|
-
ComponentHTMLOverride?: string;
|
|
17
|
-
styles?: string;
|
|
18
|
-
RenderingIdentifier?: string;
|
|
19
|
-
};
|
|
20
|
-
type RevisionType = number | 'staged' | 'published' | 'saved';
|
|
21
|
-
/**
|
|
22
|
-
* FEaaS props for server rendering.
|
|
23
|
-
*/
|
|
24
|
-
type FEaaSComponentServerProps = {
|
|
25
|
-
/**
|
|
26
|
-
* HTML template for presentation rendered inside the component
|
|
27
|
-
*/
|
|
28
|
-
template?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Default revision to be fetched. Should be 'staged' for editing/preview. Can be overriden by params.ComponentRevision
|
|
31
|
-
*/
|
|
32
|
-
revisionFallback?: RevisionType;
|
|
33
|
-
/**
|
|
34
|
-
* Fetched data from server component props for server rendering, based on rendering params.
|
|
35
|
-
*/
|
|
36
|
-
fetchedData?: FEAAS.DataScopes;
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* FEaaS props for client side component. Should be used as fallback when server props are not provided.
|
|
40
|
-
* Would also be passed on server to avoid hydration issues
|
|
41
|
-
*/
|
|
42
|
-
type FEaaSComponentClientProps = {
|
|
43
|
-
/**
|
|
44
|
-
* parameters from Sitecore's FEAAS component
|
|
45
|
-
*/
|
|
46
|
-
params?: FEaaSComponentParams;
|
|
47
|
-
/**
|
|
48
|
-
* field data from component's datasource
|
|
49
|
-
*/
|
|
50
|
-
fields?: ComponentFields;
|
|
51
|
-
};
|
|
52
|
-
export type FEaaSComponentProps = FEaaSComponentServerProps & FEaaSComponentClientProps;
|
|
53
|
-
/**
|
|
54
|
-
* @param {FEaaSComponentProps} props component props
|
|
55
|
-
*/
|
|
56
|
-
export declare const FEaaSComponent: (props: FEaaSComponentProps) => JSX.Element;
|
|
57
|
-
/**
|
|
58
|
-
* Fetches server component props required for server rendering, based on rendering params.
|
|
59
|
-
* Component endpoint will either be retrieved from params or from endpointOverride
|
|
60
|
-
* @param {FEaaSComponentParams} params component params
|
|
61
|
-
* @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
|
|
62
|
-
* @param {string} [endpointOverride] optional override for component endpoint
|
|
63
|
-
*/
|
|
64
|
-
export declare function fetchFEaaSComponentServerProps(params: FEaaSComponentParams, pageState?: LayoutServicePageState, endpointOverride?: string): Promise<FEaaSComponentProps>;
|
|
65
|
-
/**
|
|
66
|
-
* Build component endpoint URL from component's params
|
|
67
|
-
* @param {FEaaSComponentParams} params rendering parameters for FEAAS component
|
|
68
|
-
* @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
|
|
69
|
-
* @returns component endpoint URL
|
|
70
|
-
*/
|
|
71
|
-
export declare const composeComponentEndpoint: (params: FEaaSComponentParams, revisionFallback: RevisionType) => string;
|
|
72
|
-
export {};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/// <reference types="@types/react" />
|
|
2
|
-
import React, { JSX } from 'react';
|
|
3
|
-
interface FieldMetadataProps {
|
|
4
|
-
metadata: {
|
|
5
|
-
[key: string]: unknown;
|
|
6
|
-
};
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* The component which renders field metadata markup
|
|
11
|
-
* @param {FieldMetadataProps} props the props of the component
|
|
12
|
-
* @returns metadata markup wrapped around children
|
|
13
|
-
*/
|
|
14
|
-
export declare const FieldMetadata: {
|
|
15
|
-
(props: FieldMetadataProps): JSX.Element;
|
|
16
|
-
displayName: string;
|
|
17
|
-
};
|
|
18
|
-
export {};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
/// <reference types="@types/react" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
|
|
4
|
-
/**
|
|
5
|
-
* Mock function to replace the form module functions for `testing` purposes.
|
|
6
|
-
* @param {any} formModule - The form module to mock
|
|
7
|
-
*/
|
|
8
|
-
export declare const mockFormModule: (formModule: any) => void;
|
|
9
|
-
/**
|
|
10
|
-
* Shape of the Form component rendering data.
|
|
11
|
-
* FormId is the rendering parameter that specifies the ID of the Sitecore Form to render.
|
|
12
|
-
*/
|
|
13
|
-
export type FormProps = {
|
|
14
|
-
rendering: ComponentRendering;
|
|
15
|
-
params: {
|
|
16
|
-
/**
|
|
17
|
-
* The ID of the Sitecore Form to render.
|
|
18
|
-
*/
|
|
19
|
-
FormId: string;
|
|
20
|
-
/**
|
|
21
|
-
* The CSS class to apply to the form.
|
|
22
|
-
*/
|
|
23
|
-
styles?: string;
|
|
24
|
-
/**
|
|
25
|
-
* The unique identifier of the rendering.
|
|
26
|
-
*/
|
|
27
|
-
RenderingIdentifier?: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
export declare const Form: ({ params, rendering }: FormProps) => React.JSX.Element;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/// <reference types="@types/react" />
|
|
2
|
-
import { ReactNode, JSX } from 'react';
|
|
3
|
-
import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
|
|
4
|
-
/**
|
|
5
|
-
* Props containing the component data to render.
|
|
6
|
-
*/
|
|
7
|
-
export interface PlaceholderMetadataProps {
|
|
8
|
-
rendering: ComponentRendering;
|
|
9
|
-
placeholderName?: string;
|
|
10
|
-
children?: ReactNode;
|
|
11
|
-
}
|
|
12
|
-
export type CodeBlockAttributes = {
|
|
13
|
-
type: string;
|
|
14
|
-
chrometype: string;
|
|
15
|
-
className: string;
|
|
16
|
-
kind: string;
|
|
17
|
-
id?: string;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* A React component to generate metadata blocks for a placeholder or rendering.
|
|
21
|
-
* It utilizes dynamic attributes based on whether the component acts as a placeholder
|
|
22
|
-
* or as a rendering to properly render the surrounding code blocks.
|
|
23
|
-
* @param {object} props The properties passed to the component.
|
|
24
|
-
* @param {ComponentRendering} props.rendering The rendering data.
|
|
25
|
-
* @param {string} [props.placeholderName] The name of the placeholder.
|
|
26
|
-
* @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
|
|
27
|
-
* @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
|
|
28
|
-
*/
|
|
29
|
-
export declare const PlaceholderMetadata: ({ rendering, placeholderName, children, }: PlaceholderMetadataProps) => JSX.Element;
|