@contentful/field-editor-reference 5.18.0 → 5.20.0
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/__fixtures__/FakeSdk.js +3 -3
- package/dist/cjs/__fixtures__/asset/index.js +10 -10
- package/dist/cjs/__fixtures__/content-type/index.js +1 -1
- package/dist/cjs/__fixtures__/entry/index.js +7 -7
- package/dist/cjs/__fixtures__/fixtures.js +8 -6
- package/dist/cjs/__fixtures__/locale/index.js +2 -2
- package/dist/cjs/__fixtures__/space/index.js +1 -1
- package/dist/cjs/assets/MultipleMediaEditor.js +7 -5
- package/dist/cjs/assets/SingleMediaEditor.js +6 -4
- package/dist/cjs/assets/WrappedAssetCard/AssetCardActions.js +21 -19
- package/dist/cjs/assets/WrappedAssetCard/FetchingWrappedAssetCard.js +18 -11
- package/dist/cjs/assets/WrappedAssetCard/WrappedAssetCard.js +20 -11
- package/dist/cjs/assets/WrappedAssetCard/WrappedAssetLink.js +12 -9
- package/dist/cjs/assets/index.js +3 -3
- package/dist/cjs/common/EntityStore.js +53 -53
- package/dist/cjs/common/MultipleReferenceEditor.js +20 -11
- package/dist/cjs/common/ReferenceEditor.js +7 -5
- package/dist/cjs/common/SingleReferenceEditor.js +11 -7
- package/dist/cjs/common/SortableLinkList.js +14 -14
- package/dist/cjs/common/customCardTypes.js +4 -2
- package/dist/cjs/common/queryClient.js +102 -0
- package/dist/cjs/common/useContentTypePermissions.js +3 -1
- package/dist/cjs/common/useEditorPermissions.js +15 -3
- package/dist/cjs/common/useEditorPermissions.spec.js +13 -12
- package/dist/cjs/components/AssetThumbnail/AssetThumbnail.js +5 -3
- package/dist/cjs/components/CreateEntryLinkButton/CreateEntryLinkButton.js +13 -9
- package/dist/cjs/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.js +17 -15
- package/dist/cjs/components/CreateEntryLinkButton/CreateEntryMenuTrigger.js +29 -19
- package/dist/cjs/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.js +14 -12
- package/dist/cjs/components/LinkActions/CombinedLinkActions.js +28 -21
- package/dist/cjs/components/LinkActions/LinkActions.js +17 -15
- package/dist/cjs/components/LinkActions/LinkEntityActions.js +26 -17
- package/dist/cjs/components/LinkActions/NoLinkPermissionsInfo.js +5 -3
- package/dist/cjs/components/LinkActions/helpers.js +10 -5
- package/dist/cjs/components/LinkActions/redesignStyles.js +4 -4
- package/dist/cjs/components/LinkActions/styles.js +1 -1
- package/dist/cjs/components/MissingEntityCard/MissingEntityCard.js +11 -9
- package/dist/cjs/components/ResourceEntityErrorCard/ResourceEntityErrorCard.js +6 -4
- package/dist/cjs/components/ResourceEntityErrorCard/UnsupportedEntityCard.js +6 -4
- package/dist/cjs/components/ScheduledIconWithTooltip/ScheduleTooltip.js +10 -8
- package/dist/cjs/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.js +9 -4
- package/dist/cjs/components/ScheduledIconWithTooltip/formatDateAndTime.js +5 -4
- package/dist/cjs/components/SpaceName/SpaceName.js +10 -8
- package/dist/cjs/components/index.js +12 -12
- package/dist/cjs/entries/MultipleEntryReferenceEditor.js +9 -7
- package/dist/cjs/entries/SingleEntryReferenceEditor.js +7 -5
- package/dist/cjs/entries/WrappedEntryCard/FetchingWrappedEntryCard.js +20 -11
- package/dist/cjs/entries/WrappedEntryCard/WrappedEntryCard.js +23 -17
- package/dist/cjs/entries/index.js +3 -3
- package/dist/cjs/index.js +38 -34
- package/dist/cjs/resources/Cards/ContentfulEntryCard.js +13 -4
- package/dist/cjs/resources/Cards/ResourceCard.js +16 -12
- package/dist/cjs/resources/Cards/ResourceCard.spec.js +20 -17
- package/dist/cjs/resources/MultipleResourceReferenceEditor.js +20 -17
- package/dist/cjs/resources/MultipleResourceReferenceEditor.spec.js +34 -13
- package/dist/cjs/resources/SingleResourceReferenceEditor.js +11 -9
- package/dist/cjs/resources/SingleResourceReferenceEditor.spec.js +13 -6
- package/dist/cjs/resources/testHelpers/resourceEditorHelpers.js +12 -5
- package/dist/cjs/resources/useResourceLinkActions.js +11 -2
- package/dist/cjs/types.js +3 -3
- package/dist/cjs/utils/fromFieldValidations.js +2 -1
- package/dist/cjs/utils/useSortIDs.js +6 -4
- package/dist/esm/__fixtures__/FakeSdk.js +3 -3
- package/dist/esm/assets/MultipleMediaEditor.js +3 -3
- package/dist/esm/assets/SingleMediaEditor.js +2 -2
- package/dist/esm/assets/WrappedAssetCard/AssetCardActions.js +12 -12
- package/dist/esm/assets/WrappedAssetCard/FetchingWrappedAssetCard.js +14 -9
- package/dist/esm/assets/WrappedAssetCard/WrappedAssetCard.js +15 -7
- package/dist/esm/assets/WrappedAssetCard/WrappedAssetLink.js +7 -6
- package/dist/esm/common/EntityStore.js +40 -42
- package/dist/esm/common/MultipleReferenceEditor.js +16 -9
- package/dist/esm/common/ReferenceEditor.js +2 -2
- package/dist/esm/common/SingleReferenceEditor.js +7 -5
- package/dist/esm/common/SortableLinkList.js +12 -12
- package/dist/esm/common/queryClient.js +44 -0
- package/dist/esm/common/useContentTypePermissions.js +3 -1
- package/dist/esm/common/useEditorPermissions.js +15 -3
- package/dist/esm/common/useEditorPermissions.spec.js +13 -12
- package/dist/esm/components/AssetThumbnail/AssetThumbnail.js +1 -1
- package/dist/esm/components/CreateEntryLinkButton/CreateEntryLinkButton.js +7 -5
- package/dist/esm/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.js +12 -12
- package/dist/esm/components/CreateEntryLinkButton/CreateEntryMenuTrigger.js +23 -15
- package/dist/esm/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.js +9 -8
- package/dist/esm/components/LinkActions/CombinedLinkActions.js +30 -19
- package/dist/esm/components/LinkActions/LinkActions.js +9 -9
- package/dist/esm/components/LinkActions/LinkEntityActions.js +18 -11
- package/dist/esm/components/LinkActions/NoLinkPermissionsInfo.js +1 -1
- package/dist/esm/components/LinkActions/helpers.js +7 -2
- package/dist/esm/components/MissingEntityCard/MissingEntityCard.js +6 -6
- package/dist/esm/components/ResourceEntityErrorCard/ResourceEntityErrorCard.js +2 -2
- package/dist/esm/components/ResourceEntityErrorCard/UnsupportedEntityCard.js +2 -2
- package/dist/esm/components/ScheduledIconWithTooltip/ScheduleTooltip.js +3 -3
- package/dist/esm/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.js +5 -2
- package/dist/esm/components/ScheduledIconWithTooltip/formatDateAndTime.js +11 -2
- package/dist/esm/components/SpaceName/SpaceName.js +5 -5
- package/dist/esm/entries/MultipleEntryReferenceEditor.js +5 -5
- package/dist/esm/entries/SingleEntryReferenceEditor.js +3 -3
- package/dist/esm/entries/WrappedEntryCard/FetchingWrappedEntryCard.js +15 -8
- package/dist/esm/entries/WrappedEntryCard/WrappedEntryCard.js +18 -14
- package/dist/esm/index.js +1 -0
- package/dist/esm/resources/Cards/ContentfulEntryCard.js +9 -2
- package/dist/esm/resources/Cards/ResourceCard.js +12 -10
- package/dist/esm/resources/Cards/ResourceCard.spec.js +12 -11
- package/dist/esm/resources/MultipleResourceReferenceEditor.js +14 -13
- package/dist/esm/resources/MultipleResourceReferenceEditor.spec.js +30 -11
- package/dist/esm/resources/SingleResourceReferenceEditor.js +6 -6
- package/dist/esm/resources/SingleResourceReferenceEditor.spec.js +9 -4
- package/dist/esm/resources/testHelpers/resourceEditorHelpers.js +9 -2
- package/dist/esm/resources/useResourceLinkActions.js +11 -2
- package/dist/esm/utils/fromFieldValidations.js +1 -0
- package/dist/esm/utils/useSortIDs.js +2 -2
- package/dist/types/common/EntityStore.d.ts +1 -1
- package/dist/types/common/queryClient.d.ts +9 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
const _react = _interop_require_wildcard(require("react"));
|
|
5
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
6
6
|
require("@testing-library/jest-dom/extend-expect");
|
|
7
7
|
const _react1 = require("@testing-library/react");
|
|
8
8
|
const _EntityStore = require("../common/EntityStore");
|
|
@@ -29,7 +29,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
|
|
|
29
29
|
if (cache && cache.has(obj)) {
|
|
30
30
|
return cache.get(obj);
|
|
31
31
|
}
|
|
32
|
-
var newObj = {
|
|
32
|
+
var newObj = {
|
|
33
|
+
__proto__: null
|
|
34
|
+
};
|
|
33
35
|
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
34
36
|
for(var key in obj){
|
|
35
37
|
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
@@ -85,16 +87,18 @@ const fieldDefinition = {
|
|
|
85
87
|
describe('Single resource editor', ()=>{
|
|
86
88
|
it('renders the action button when no value is set', async ()=>{
|
|
87
89
|
const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
|
|
88
|
-
(0, _react1.render)(_react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {
|
|
90
|
+
(0, _react1.render)(/*#__PURE__*/ _react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {
|
|
89
91
|
isInitiallyDisabled: false,
|
|
90
92
|
sdk: sdk,
|
|
91
93
|
hasCardEditActions: true,
|
|
92
94
|
viewType: "card",
|
|
95
|
+
// @ts-expect-error unused...
|
|
93
96
|
parameters: {}
|
|
94
97
|
}));
|
|
95
98
|
const button = await _react1.screen.findByText('Add existing content');
|
|
96
99
|
expect(button).toBeDefined();
|
|
97
100
|
_react1.fireEvent.click(button);
|
|
101
|
+
// @ts-expect-error wait app-sdk version update
|
|
98
102
|
const dialogFn = sdk.dialogs.selectSingleResourceEntry;
|
|
99
103
|
expect(dialogFn).toHaveBeenCalledTimes(1);
|
|
100
104
|
const options = dialogFn.mock.calls[0][0];
|
|
@@ -104,13 +108,14 @@ describe('Single resource editor', ()=>{
|
|
|
104
108
|
});
|
|
105
109
|
it('renders custom actions when passed', async ()=>{
|
|
106
110
|
const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
|
|
107
|
-
(0, _react1.render)(_react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {
|
|
111
|
+
(0, _react1.render)(/*#__PURE__*/ _react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {
|
|
108
112
|
isInitiallyDisabled: false,
|
|
109
113
|
sdk: sdk,
|
|
110
114
|
hasCardEditActions: true,
|
|
111
115
|
viewType: "card",
|
|
116
|
+
// @ts-expect-error unused...
|
|
112
117
|
parameters: {},
|
|
113
|
-
renderCustomActions: ()
|
|
118
|
+
renderCustomActions: ()=>/*#__PURE__*/ _react.createElement("div", {
|
|
114
119
|
"data-testid": "custom-actions"
|
|
115
120
|
})
|
|
116
121
|
}));
|
|
@@ -134,16 +139,18 @@ describe('Single resource editor', ()=>{
|
|
|
134
139
|
}
|
|
135
140
|
});
|
|
136
141
|
mockedResources[`Contentful:Entry.crn:test:::content:spaces/x-space/entries/linkedEntryId`] = info;
|
|
137
|
-
(0, _react1.render)(_react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {
|
|
142
|
+
(0, _react1.render)(/*#__PURE__*/ _react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {
|
|
138
143
|
isInitiallyDisabled: false,
|
|
139
144
|
sdk: sdk,
|
|
140
145
|
hasCardEditActions: true,
|
|
141
146
|
viewType: "card",
|
|
142
147
|
apiUrl: "test-contentful",
|
|
143
148
|
getEntryRouteHref: jest.fn(),
|
|
149
|
+
// @ts-expect-error unused...
|
|
144
150
|
parameters: {}
|
|
145
151
|
}));
|
|
146
152
|
expect(_EntityStore.useResource).toHaveBeenCalled();
|
|
153
|
+
// ensure the card is rendered
|
|
147
154
|
const title = await _react1.screen.findByText('Title of linked entry');
|
|
148
155
|
await _react1.screen.findByText('X Space');
|
|
149
156
|
const theCard = title.closest('[data-test-id="cf-ui-entry-card"]');
|
|
@@ -9,11 +9,11 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
mockSdkForField: function() {
|
|
13
|
-
return mockSdkForField;
|
|
14
|
-
},
|
|
15
12
|
createFakeEntryResource: function() {
|
|
16
13
|
return createFakeEntryResource;
|
|
14
|
+
},
|
|
15
|
+
mockSdkForField: function() {
|
|
16
|
+
return mockSdkForField;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
function mockSdkForField(fieldDefinition, fieldValue) {
|
|
@@ -22,13 +22,17 @@ function mockSdkForField(fieldDefinition, fieldValue) {
|
|
|
22
22
|
getValue: jest.fn(()=>fieldValue),
|
|
23
23
|
setValue: jest.fn(()=>Promise.resolve(undefined)),
|
|
24
24
|
removeValue: jest.fn(),
|
|
25
|
+
// eslint-disable-next-line -- test helper
|
|
25
26
|
onSchemaErrorsChanged: ()=>{},
|
|
27
|
+
// eslint-disable-next-line -- test helper
|
|
26
28
|
onIsDisabledChanged: ()=>{},
|
|
29
|
+
// eslint-disable-next-line -- test helper
|
|
27
30
|
onValueChanged: ()=>{},
|
|
28
31
|
...fieldDefinition,
|
|
29
32
|
locale: 'en'
|
|
30
33
|
},
|
|
31
34
|
dialogs: {
|
|
35
|
+
// @ts-expect-error wait app-sdk version update
|
|
32
36
|
selectSingleResourceEntry: jest.fn().mockResolvedValue({
|
|
33
37
|
sys: {
|
|
34
38
|
type: 'Entry',
|
|
@@ -68,15 +72,18 @@ function mockSdkForField(fieldDefinition, fieldValue) {
|
|
|
68
72
|
contentType: 'testCT'
|
|
69
73
|
},
|
|
70
74
|
space: {
|
|
75
|
+
// @ts-expect-error wait app-sdk version update
|
|
76
|
+
// eslint-disable-next-line -- test helper
|
|
71
77
|
onEntityChanged: ()=>{}
|
|
72
78
|
},
|
|
79
|
+
// @ts-expect-error
|
|
73
80
|
navigator: {
|
|
74
81
|
onSlideInNavigation: ()=>()=>({})
|
|
75
82
|
}
|
|
76
83
|
};
|
|
77
84
|
}
|
|
78
|
-
const createFakeEntryResource = ({ title
|
|
79
|
-
const { id: spaceId
|
|
85
|
+
const createFakeEntryResource = ({ title, id, space })=>{
|
|
86
|
+
const { id: spaceId, name: spaceName } = space;
|
|
80
87
|
return {
|
|
81
88
|
resource: {
|
|
82
89
|
sys: {
|
|
@@ -29,7 +29,7 @@ const getUpdatedValue = (field, entries, apiUrl)=>{
|
|
|
29
29
|
return toLinkItem(entries[0], apiUrl);
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
function useResourceLinkActions({ dialogs
|
|
32
|
+
function useResourceLinkActions({ dialogs, field, onAfterLink, apiUrl }) {
|
|
33
33
|
const handleAfterLink = (0, _react.useCallback)((entries)=>{
|
|
34
34
|
if (!onAfterLink) {
|
|
35
35
|
return;
|
|
@@ -51,10 +51,14 @@ function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl }) {
|
|
|
51
51
|
]);
|
|
52
52
|
const multiple = field.type === 'Array';
|
|
53
53
|
const onLinkExisting = (0, _react.useMemo)(()=>{
|
|
54
|
-
const promptSelection = multiple ? async ()
|
|
54
|
+
const promptSelection = multiple ? async ()=>// @ts-expect-error wait for update of app-sdk version
|
|
55
|
+
await dialogs.selectMultipleResourceEntries({
|
|
56
|
+
// @ts-expect-error wait for update of app-sdk version
|
|
55
57
|
allowedResources: field.allowedResources
|
|
56
58
|
}) : async ()=>[
|
|
59
|
+
// @ts-expect-error wait for update of app-sdk version
|
|
57
60
|
await dialogs.selectSingleResourceEntry({
|
|
61
|
+
// @ts-expect-error wait for update of app-sdk version
|
|
58
62
|
allowedResources: field.allowedResources
|
|
59
63
|
})
|
|
60
64
|
];
|
|
@@ -65,6 +69,7 @@ function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl }) {
|
|
|
65
69
|
}
|
|
66
70
|
onLinkedExisting(res);
|
|
67
71
|
};
|
|
72
|
+
// @ts-expect-error wait for update of app-sdk version
|
|
68
73
|
}, [
|
|
69
74
|
dialogs,
|
|
70
75
|
field.allowedResources,
|
|
@@ -73,7 +78,9 @@ function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl }) {
|
|
|
73
78
|
]);
|
|
74
79
|
return {
|
|
75
80
|
onLinkExisting,
|
|
81
|
+
// @ts-expect-error
|
|
76
82
|
onLinkedExisting,
|
|
83
|
+
// hardcoded values to match interface for standard reference field actions
|
|
77
84
|
entityType: 'Entry',
|
|
78
85
|
contentTypes: [],
|
|
79
86
|
canCreateEntity: false,
|
|
@@ -82,7 +89,9 @@ function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl }) {
|
|
|
82
89
|
isDisabled: false,
|
|
83
90
|
isEmpty: false,
|
|
84
91
|
isFull: false,
|
|
92
|
+
// eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
|
|
85
93
|
onCreate: async ()=>{},
|
|
94
|
+
// eslint-disable-next-line -- hardcoded values to match interface for standard reference field actions
|
|
86
95
|
onCreated: ()=>{}
|
|
87
96
|
};
|
|
88
97
|
}
|
package/dist/cjs/types.js
CHANGED
|
@@ -9,14 +9,14 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
+
Asset: function() {
|
|
13
|
+
return _fieldeditorshared.Asset;
|
|
14
|
+
},
|
|
12
15
|
Entry: function() {
|
|
13
16
|
return _fieldeditorshared.Entry;
|
|
14
17
|
},
|
|
15
18
|
File: function() {
|
|
16
19
|
return _fieldeditorshared.File;
|
|
17
|
-
},
|
|
18
|
-
Asset: function() {
|
|
19
|
-
return _fieldeditorshared.Asset;
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
22
|
const _fieldeditorshared = require("@contentful/field-editor-shared");
|
|
@@ -8,13 +8,14 @@ Object.defineProperty(exports, "fromFieldValidations", {
|
|
|
8
8
|
return fromFieldValidations;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _isNumber = _interop_require_default(require("lodash/isNumber"));
|
|
11
|
+
const _isNumber = /*#__PURE__*/ _interop_require_default(require("lodash/isNumber"));
|
|
12
12
|
function _interop_require_default(obj) {
|
|
13
13
|
return obj && obj.__esModule ? obj : {
|
|
14
14
|
default: obj
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
function fromFieldValidations(field) {
|
|
18
|
+
// eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/no-explicit-any
|
|
18
19
|
const validations = [
|
|
19
20
|
...field.validations,
|
|
20
21
|
...field.type === 'Array' ? field.items?.validations ?? [] : []
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "useSortIDs", {
|
|
|
8
8
|
return useSortIDs;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _react = _interop_require_wildcard(require("react"));
|
|
11
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
12
12
|
const _sortable = require("@dnd-kit/sortable");
|
|
13
13
|
function _getRequireWildcardCache(nodeInterop) {
|
|
14
14
|
if (typeof WeakMap !== "function") return null;
|
|
@@ -31,7 +31,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
|
|
|
31
31
|
if (cache && cache.has(obj)) {
|
|
32
32
|
return cache.get(obj);
|
|
33
33
|
}
|
|
34
|
-
var newObj = {
|
|
34
|
+
var newObj = {
|
|
35
|
+
__proto__: null
|
|
36
|
+
};
|
|
35
37
|
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
36
38
|
for(var key in obj){
|
|
37
39
|
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
@@ -51,7 +53,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
|
|
|
51
53
|
}
|
|
52
54
|
const useSortIDs = (items)=>{
|
|
53
55
|
const ids = (items || []).map((item, index)=>{
|
|
54
|
-
const { type
|
|
56
|
+
const { type } = item.sys;
|
|
55
57
|
return {
|
|
56
58
|
id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
|
|
57
59
|
};
|
|
@@ -60,7 +62,7 @@ const useSortIDs = (items)=>{
|
|
|
60
62
|
_react.default.useEffect(()=>{
|
|
61
63
|
if (items.length !== sortIDs.length) {
|
|
62
64
|
const ids = items.map((item, index)=>{
|
|
63
|
-
const { type
|
|
65
|
+
const { type } = item.sys;
|
|
64
66
|
return {
|
|
65
67
|
id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
|
|
66
68
|
};
|
|
@@ -49,7 +49,7 @@ export function newReferenceEditorFakeSdk(props) {
|
|
|
49
49
|
locales,
|
|
50
50
|
cmaAdapter: createFakeCMAAdapter({
|
|
51
51
|
Entry: {
|
|
52
|
-
get: async ({ entryId
|
|
52
|
+
get: async ({ entryId })=>{
|
|
53
53
|
if (props?.fetchDelay) {
|
|
54
54
|
await delay(props.fetchDelay);
|
|
55
55
|
}
|
|
@@ -66,7 +66,7 @@ export function newReferenceEditorFakeSdk(props) {
|
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
68
|
Asset: {
|
|
69
|
-
get: async ({ assetId
|
|
69
|
+
get: async ({ assetId })=>{
|
|
70
70
|
if (props?.fetchDelay) {
|
|
71
71
|
await delay(props.fetchDelay);
|
|
72
72
|
}
|
|
@@ -91,7 +91,7 @@ export function newReferenceEditorFakeSdk(props) {
|
|
|
91
91
|
}
|
|
92
92
|
},
|
|
93
93
|
ContentType: {
|
|
94
|
-
get: async ({ contentTypeId
|
|
94
|
+
get: async ({ contentTypeId })=>{
|
|
95
95
|
if (contentTypeId === contentTypes.published.sys.id) {
|
|
96
96
|
return contentTypes.published;
|
|
97
97
|
}
|
|
@@ -12,16 +12,16 @@ const styles = {
|
|
|
12
12
|
})
|
|
13
13
|
};
|
|
14
14
|
export function MultipleMediaEditor(props) {
|
|
15
|
-
return React.createElement(MultipleReferenceEditor, {
|
|
15
|
+
return /*#__PURE__*/ React.createElement(MultipleReferenceEditor, {
|
|
16
16
|
...props,
|
|
17
17
|
entityType: "Asset"
|
|
18
|
-
}, (childrenProps)
|
|
18
|
+
}, (childrenProps)=>/*#__PURE__*/ React.createElement(SortableLinkList, {
|
|
19
19
|
...childrenProps,
|
|
20
20
|
sortingStrategy: childrenProps.viewType === 'card' ? rectSortingStrategy : verticalListSortingStrategy,
|
|
21
21
|
className: cx({
|
|
22
22
|
[styles.gridContainer]: childrenProps.viewType === 'card'
|
|
23
23
|
})
|
|
24
|
-
}, ({ items
|
|
24
|
+
}, ({ items, item, index, isDisabled, DragHandle })=>/*#__PURE__*/ React.createElement(FetchingWrappedAssetCard, {
|
|
25
25
|
...childrenProps,
|
|
26
26
|
isDisabled: isDisabled,
|
|
27
27
|
key: `${item.sys.id}-${index}`,
|
|
@@ -2,10 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import { SingleReferenceEditor } from '../common/SingleReferenceEditor';
|
|
3
3
|
import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard';
|
|
4
4
|
export function SingleMediaEditor(props) {
|
|
5
|
-
return React.createElement(SingleReferenceEditor, {
|
|
5
|
+
return /*#__PURE__*/ React.createElement(SingleReferenceEditor, {
|
|
6
6
|
...props,
|
|
7
7
|
entityType: "Asset"
|
|
8
|
-
}, ({ entityId
|
|
8
|
+
}, ({ entityId, isDisabled, setValue })=>/*#__PURE__*/ React.createElement(FetchingWrappedAssetCard, {
|
|
9
9
|
...props,
|
|
10
10
|
viewType: "big_card",
|
|
11
11
|
assetId: entityId,
|
|
@@ -42,42 +42,42 @@ function downloadAsset(url) {
|
|
|
42
42
|
window.open(url, '_blank', 'noopener,noreferrer');
|
|
43
43
|
}
|
|
44
44
|
export function renderAssetInfo(props) {
|
|
45
|
-
const { entityFile
|
|
45
|
+
const { entityFile } = props;
|
|
46
46
|
const fileName = get(entityFile, 'fileName');
|
|
47
47
|
const mimeType = get(entityFile, 'contentType');
|
|
48
48
|
const fileSize = get(entityFile, 'details.size');
|
|
49
49
|
const image = get(entityFile, 'details.image');
|
|
50
50
|
return [
|
|
51
|
-
React.createElement(Menu.SectionTitle, {
|
|
51
|
+
/*#__PURE__*/ React.createElement(Menu.SectionTitle, {
|
|
52
52
|
key: "file-section"
|
|
53
53
|
}, "File info"),
|
|
54
|
-
React.createElement(Menu.Item, {
|
|
54
|
+
/*#__PURE__*/ React.createElement(Menu.Item, {
|
|
55
55
|
key: "file-information",
|
|
56
56
|
className: styles.fileInformation.menuItem,
|
|
57
57
|
isDisabled: true
|
|
58
|
-
}, React.createElement("dl", {
|
|
58
|
+
}, /*#__PURE__*/ React.createElement("dl", {
|
|
59
59
|
className: styles.fileInformation.dl
|
|
60
|
-
}, fileName && React.createElement(React.Fragment, null, React.createElement("dt", null, "File Name:"), React.createElement(Text, {
|
|
60
|
+
}, fileName && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("dt", null, "File Name:"), /*#__PURE__*/ React.createElement(Text, {
|
|
61
61
|
as: "dd",
|
|
62
62
|
isTruncated: true
|
|
63
|
-
}, fileName)), mimeType && React.createElement(React.Fragment, null, React.createElement("dt", null, "File Type:"), React.createElement(Text, {
|
|
63
|
+
}, fileName)), mimeType && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("dt", null, "File Type:"), /*#__PURE__*/ React.createElement(Text, {
|
|
64
64
|
as: "dd",
|
|
65
65
|
isTruncated: true
|
|
66
|
-
}, mimeType)), fileSize && React.createElement(React.Fragment, null, React.createElement("dt", null, "Size:"), React.createElement("dd", null, shortenStorageUnit(fileSize, 'B'))), image && React.createElement(React.Fragment, null, React.createElement("dt", null, "Dimensions:"), React.createElement("dd", null, `${image.width} × ${image.height}`))))
|
|
66
|
+
}, mimeType)), fileSize && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("dt", null, "Size:"), /*#__PURE__*/ React.createElement("dd", null, shortenStorageUnit(fileSize, 'B'))), image && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("dt", null, "Dimensions:"), /*#__PURE__*/ React.createElement("dd", null, `${image.width} × ${image.height}`))))
|
|
67
67
|
];
|
|
68
68
|
}
|
|
69
69
|
export function renderActions(props) {
|
|
70
|
-
const { entityFile
|
|
70
|
+
const { entityFile, isDisabled, onEdit, onRemove } = props;
|
|
71
71
|
return [
|
|
72
|
-
React.createElement(Menu.SectionTitle, {
|
|
72
|
+
/*#__PURE__*/ React.createElement(Menu.SectionTitle, {
|
|
73
73
|
key: "section-title"
|
|
74
74
|
}, "Actions"),
|
|
75
|
-
onEdit ? React.createElement(Menu.Item, {
|
|
75
|
+
onEdit ? /*#__PURE__*/ React.createElement(Menu.Item, {
|
|
76
76
|
key: "edit",
|
|
77
77
|
onClick: onEdit,
|
|
78
78
|
testId: "card-action-edit"
|
|
79
79
|
}, "Edit") : null,
|
|
80
|
-
entityFile ? React.createElement(Menu.Item, {
|
|
80
|
+
entityFile ? /*#__PURE__*/ React.createElement(Menu.Item, {
|
|
81
81
|
key: "download",
|
|
82
82
|
onClick: ()=>{
|
|
83
83
|
if (typeof entityFile.url === 'string') {
|
|
@@ -86,7 +86,7 @@ export function renderActions(props) {
|
|
|
86
86
|
},
|
|
87
87
|
testId: "card-action-download"
|
|
88
88
|
}, "Download") : null,
|
|
89
|
-
onRemove ? React.createElement(Menu.Item, {
|
|
89
|
+
onRemove ? /*#__PURE__*/ React.createElement(Menu.Item, {
|
|
90
90
|
key: "remove",
|
|
91
91
|
disabled: isDisabled,
|
|
92
92
|
onClick: onRemove,
|
|
@@ -5,8 +5,8 @@ import { MissingEntityCard } from '../../components';
|
|
|
5
5
|
import { WrappedAssetCard } from './WrappedAssetCard';
|
|
6
6
|
import { WrappedAssetLink } from './WrappedAssetLink';
|
|
7
7
|
export function FetchingWrappedAssetCard(props) {
|
|
8
|
-
const { data: asset
|
|
9
|
-
const { getEntityScheduledActions
|
|
8
|
+
const { data: asset, status } = useEntity('Asset', props.assetId);
|
|
9
|
+
const { getEntityScheduledActions } = useEntityLoader();
|
|
10
10
|
const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Asset', props.assetId), [
|
|
11
11
|
getEntityScheduledActions,
|
|
12
12
|
props.assetId
|
|
@@ -18,11 +18,12 @@ export function FetchingWrappedAssetCard(props) {
|
|
|
18
18
|
entity: 'Asset'
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
|
|
21
22
|
}, [
|
|
22
23
|
asset
|
|
23
24
|
]);
|
|
24
25
|
const onEdit = async ()=>{
|
|
25
|
-
const { slide
|
|
26
|
+
const { slide } = await props.sdk.navigator.openAsset(props.assetId, {
|
|
26
27
|
slideIn: true
|
|
27
28
|
});
|
|
28
29
|
props.onAction && props.onAction({
|
|
@@ -44,7 +45,7 @@ export function FetchingWrappedAssetCard(props) {
|
|
|
44
45
|
};
|
|
45
46
|
return React.useMemo(()=>{
|
|
46
47
|
if (status === 'error') {
|
|
47
|
-
const card = React.createElement(MissingEntityCard, {
|
|
48
|
+
const card = /*#__PURE__*/ React.createElement(MissingEntityCard, {
|
|
48
49
|
entityType: "Asset",
|
|
49
50
|
asSquare: props.viewType !== 'link',
|
|
50
51
|
isDisabled: props.isDisabled,
|
|
@@ -61,7 +62,7 @@ export function FetchingWrappedAssetCard(props) {
|
|
|
61
62
|
}
|
|
62
63
|
return card;
|
|
63
64
|
}
|
|
64
|
-
const { getEntityUrl
|
|
65
|
+
const { getEntityUrl } = props;
|
|
65
66
|
const size = props.viewType === 'big_card' ? 'default' : 'small';
|
|
66
67
|
const commonProps = {
|
|
67
68
|
asset,
|
|
@@ -76,24 +77,25 @@ export function FetchingWrappedAssetCard(props) {
|
|
|
76
77
|
};
|
|
77
78
|
if (props.viewType === 'link') {
|
|
78
79
|
if (status === 'loading') {
|
|
79
|
-
return React.createElement(EntryCard, {
|
|
80
|
+
return /*#__PURE__*/ React.createElement(EntryCard, {
|
|
80
81
|
size: "small",
|
|
81
82
|
isLoading: true
|
|
82
83
|
});
|
|
83
84
|
}
|
|
84
|
-
return React.createElement(WrappedAssetLink, {
|
|
85
|
+
return /*#__PURE__*/ React.createElement(WrappedAssetLink, {
|
|
85
86
|
...commonProps,
|
|
86
87
|
href: commonProps.entityUrl,
|
|
87
88
|
getEntityScheduledActions: loadEntityScheduledActions
|
|
88
89
|
});
|
|
89
90
|
}
|
|
90
91
|
if (status === 'loading') {
|
|
91
|
-
return React.createElement(AssetCard, {
|
|
92
|
+
return /*#__PURE__*/ React.createElement(AssetCard, {
|
|
92
93
|
size: size,
|
|
93
94
|
isLoading: true
|
|
94
95
|
});
|
|
95
96
|
}
|
|
96
97
|
function renderDefaultCard(props) {
|
|
98
|
+
// isClickable has a default value, so omit it from the props
|
|
97
99
|
const builtinCardProps = {
|
|
98
100
|
...commonProps,
|
|
99
101
|
...props,
|
|
@@ -101,19 +103,22 @@ export function FetchingWrappedAssetCard(props) {
|
|
|
101
103
|
asset: (props?.entity) || commonProps.asset,
|
|
102
104
|
getAssetUrl: getEntityUrl
|
|
103
105
|
};
|
|
104
|
-
return React.createElement(WrappedAssetCard, builtinCardProps);
|
|
106
|
+
return /*#__PURE__*/ React.createElement(WrappedAssetCard, builtinCardProps);
|
|
105
107
|
}
|
|
106
108
|
if (props.renderCustomCard) {
|
|
107
109
|
const customProps = {
|
|
108
110
|
...commonProps,
|
|
109
111
|
entity: commonProps.asset
|
|
110
112
|
};
|
|
113
|
+
// LinkActionsProps are injected higher SingleReferenceEditor/MultipleReferenceEditor
|
|
111
114
|
const renderedCustomCard = props.renderCustomCard(customProps, {}, renderDefaultCard);
|
|
115
|
+
// Only `false` indicates to render the original card. E.g. `null` would result in no card.
|
|
112
116
|
if (renderedCustomCard !== false) {
|
|
113
117
|
return renderedCustomCard;
|
|
114
118
|
}
|
|
115
119
|
}
|
|
116
120
|
return renderDefaultCard();
|
|
121
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
|
|
117
122
|
}, [
|
|
118
123
|
props,
|
|
119
124
|
status,
|
|
@@ -3,6 +3,7 @@ import { AssetCard } from '@contentful/f36-components';
|
|
|
3
3
|
import { ClockIcon } from '@contentful/f36-icons';
|
|
4
4
|
import tokens from '@contentful/f36-tokens';
|
|
5
5
|
import { entityHelpers } from '@contentful/field-editor-shared';
|
|
6
|
+
// @ts-expect-error
|
|
6
7
|
import mimetype from '@contentful/mimetype';
|
|
7
8
|
import { css } from 'emotion';
|
|
8
9
|
import { MissingEntityCard, ScheduledIconWithTooltip } from '../../components';
|
|
@@ -28,6 +29,7 @@ const styles = {
|
|
|
28
29
|
const defaultProps = {
|
|
29
30
|
isClickable: true
|
|
30
31
|
};
|
|
32
|
+
// eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/no-explicit-any
|
|
31
33
|
function getFileType(file) {
|
|
32
34
|
if (!file) {
|
|
33
35
|
return 'archive';
|
|
@@ -39,10 +41,11 @@ function getFileType(file) {
|
|
|
39
41
|
return groupToIconMap[groupName] || 'archive';
|
|
40
42
|
}
|
|
41
43
|
export const WrappedAssetCard = (props)=>{
|
|
42
|
-
const { className
|
|
44
|
+
const { className, onEdit, getAssetUrl, onRemove, size, isDisabled, isSelected, isClickable } = props;
|
|
45
|
+
// @ts-expect-error
|
|
43
46
|
const status = entityHelpers.getEntryStatus(props.asset.sys);
|
|
44
47
|
if (status === 'deleted') {
|
|
45
|
-
return React.createElement(MissingEntityCard, {
|
|
48
|
+
return /*#__PURE__*/ React.createElement(MissingEntityCard, {
|
|
46
49
|
entityType: "Asset",
|
|
47
50
|
asSquare: true,
|
|
48
51
|
isDisabled: props.isDisabled,
|
|
@@ -57,7 +60,7 @@ export const WrappedAssetCard = (props)=>{
|
|
|
57
60
|
});
|
|
58
61
|
const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
|
|
59
62
|
const href = getAssetUrl ? getAssetUrl(props.asset.sys.id) : undefined;
|
|
60
|
-
return React.createElement(AssetCard, {
|
|
63
|
+
return /*#__PURE__*/ React.createElement(AssetCard, {
|
|
61
64
|
as: href ? 'a' : 'article',
|
|
62
65
|
type: getFileType(entityFile),
|
|
63
66
|
title: entityTitle,
|
|
@@ -65,22 +68,27 @@ export const WrappedAssetCard = (props)=>{
|
|
|
65
68
|
isSelected: isSelected,
|
|
66
69
|
href: href,
|
|
67
70
|
status: status,
|
|
68
|
-
icon: React.createElement(ScheduledIconWithTooltip, {
|
|
71
|
+
icon: /*#__PURE__*/ React.createElement(ScheduledIconWithTooltip, {
|
|
69
72
|
getEntityScheduledActions: props.getEntityScheduledActions,
|
|
70
73
|
entityType: "Asset",
|
|
71
74
|
entityId: props.asset.sys.id
|
|
72
|
-
}, React.createElement(ClockIcon, {
|
|
75
|
+
}, /*#__PURE__*/ React.createElement(ClockIcon, {
|
|
73
76
|
className: styles.scheduleIcon,
|
|
74
77
|
size: "small",
|
|
75
78
|
variant: "muted",
|
|
76
79
|
testId: "schedule-icon"
|
|
77
80
|
})),
|
|
78
81
|
src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
|
|
79
|
-
onClick:
|
|
82
|
+
onClick: // Providing an onClick handler messes up with some rich text
|
|
83
|
+
// features e.g. pressing ENTER on a card to add a new paragraph
|
|
84
|
+
// underneath. It's crucial not to pass a custom handler when
|
|
85
|
+
// isClickable is disabled which in the case of RT it's.
|
|
86
|
+
isClickable ? (e)=>{
|
|
80
87
|
e.preventDefault();
|
|
81
88
|
onEdit && onEdit();
|
|
82
89
|
} : undefined,
|
|
83
|
-
onKeyDown
|
|
90
|
+
/* todo - remove this when onKeyDown is allowed as a prop for BaseCard in forma 36
|
|
91
|
+
// @ts-expect-error */ onKeyDown: isClickable ? (e)=>{
|
|
84
92
|
if (e.key === 'Enter' && onEdit) {
|
|
85
93
|
e.preventDefault();
|
|
86
94
|
onEdit();
|
|
@@ -12,10 +12,11 @@ const styles = {
|
|
|
12
12
|
})
|
|
13
13
|
};
|
|
14
14
|
export const WrappedAssetLink = (props)=>{
|
|
15
|
-
const { className
|
|
15
|
+
const { className, href, onEdit, onRemove, isDisabled } = props;
|
|
16
|
+
// @ts-expect-error
|
|
16
17
|
const status = entityHelpers.getEntryStatus(props.asset.sys);
|
|
17
18
|
if (status === 'deleted') {
|
|
18
|
-
return React.createElement(MissingEntityCard, {
|
|
19
|
+
return /*#__PURE__*/ React.createElement(MissingEntityCard, {
|
|
19
20
|
entityType: "Asset",
|
|
20
21
|
isDisabled: props.isDisabled,
|
|
21
22
|
onRemove: props.onRemove
|
|
@@ -28,7 +29,7 @@ export const WrappedAssetLink = (props)=>{
|
|
|
28
29
|
defaultTitle: 'Untitled'
|
|
29
30
|
});
|
|
30
31
|
const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
|
|
31
|
-
return React.createElement(EntryCard, {
|
|
32
|
+
return /*#__PURE__*/ React.createElement(EntryCard, {
|
|
32
33
|
as: href ? 'a' : 'article',
|
|
33
34
|
contentType: "Asset",
|
|
34
35
|
title: entityTitle,
|
|
@@ -36,14 +37,14 @@ export const WrappedAssetLink = (props)=>{
|
|
|
36
37
|
href: href,
|
|
37
38
|
size: "small",
|
|
38
39
|
status: status,
|
|
39
|
-
thumbnailElement: entityFile && isValidImage(entityFile) ? React.createElement(AssetThumbnail, {
|
|
40
|
+
thumbnailElement: entityFile && isValidImage(entityFile) ? /*#__PURE__*/ React.createElement(AssetThumbnail, {
|
|
40
41
|
file: entityFile
|
|
41
42
|
}) : undefined,
|
|
42
|
-
icon: React.createElement(ScheduledIconWithTooltip, {
|
|
43
|
+
icon: /*#__PURE__*/ React.createElement(ScheduledIconWithTooltip, {
|
|
43
44
|
getEntityScheduledActions: props.getEntityScheduledActions,
|
|
44
45
|
entityType: "Asset",
|
|
45
46
|
entityId: props.asset.sys.id
|
|
46
|
-
}, React.createElement(ClockIcon, {
|
|
47
|
+
}, /*#__PURE__*/ React.createElement(ClockIcon, {
|
|
47
48
|
className: styles.scheduleIcon,
|
|
48
49
|
size: "small",
|
|
49
50
|
variant: "muted",
|