@contentful/field-editor-reference 5.31.0 → 5.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/CreateEntryLinkButton/CreateEntryMenuTrigger.js +11 -5
- package/dist/cjs/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.js +41 -0
- package/dist/esm/components/CreateEntryLinkButton/CreateEntryMenuTrigger.js +12 -6
- package/dist/esm/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.js +41 -0
- package/package.json +2 -2
|
@@ -102,6 +102,12 @@ const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentT
|
|
|
102
102
|
const textField = (0, _react.useRef)(null);
|
|
103
103
|
const menuListRef = (0, _react.useRef)(null);
|
|
104
104
|
const [dropdownWidth, setDropdownWidth] = (0, _react.useState)();
|
|
105
|
+
const filteredContentTypes = (0, _react.useMemo)(()=>contentTypes.filter((contentType)=>{
|
|
106
|
+
const annotations = (0, _get.default)(contentType, 'metadata.annotations.ContentType', []);
|
|
107
|
+
return !annotations.some((annotation)=>(0, _get.default)(annotation, 'sys.id') === 'Contentful:ExperienceType');
|
|
108
|
+
}), [
|
|
109
|
+
contentTypes
|
|
110
|
+
]);
|
|
105
111
|
const hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
|
|
106
112
|
const closeMenu = ()=>setOpen(false);
|
|
107
113
|
(0, _react.useEffect)(()=>{
|
|
@@ -148,10 +154,10 @@ const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentT
|
|
|
148
154
|
const renderSearchResultsCount = (resultsLength)=>resultsLength ? _react.default.createElement(_f36components.Menu.SectionTitle, {
|
|
149
155
|
testId: "add-entru-menu-search-results"
|
|
150
156
|
}, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
|
|
151
|
-
const isSearchable =
|
|
157
|
+
const isSearchable = filteredContentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
|
|
152
158
|
const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
|
|
153
|
-
const suggestedContentType =
|
|
154
|
-
const
|
|
159
|
+
const suggestedContentType = filteredContentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
|
|
160
|
+
const searchFilteredContentTypes = filteredContentTypes.filter((ct)=>!searchInput || (0, _get.default)(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
|
|
155
161
|
return _react.default.createElement("span", {
|
|
156
162
|
className: styles.wrapper,
|
|
157
163
|
ref: wrapper,
|
|
@@ -185,10 +191,10 @@ const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentT
|
|
|
185
191
|
onChange: (e)=>setSearchInput(e.target.value)
|
|
186
192
|
}), _react.default.createElement(_f36icons.SearchIcon, {
|
|
187
193
|
className: styles.searchIcon
|
|
188
|
-
})), _react.default.createElement(_f36components.Menu.Divider, null)), searchInput && renderSearchResultsCount(
|
|
194
|
+
})), _react.default.createElement(_f36components.Menu.Divider, null)), searchInput && renderSearchResultsCount(searchFilteredContentTypes.length), suggestedContentType && !searchInput && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_f36components.Menu.SectionTitle, null, "Suggested Content Type"), _react.default.createElement(_f36components.Menu.Item, {
|
|
189
195
|
testId: "suggested",
|
|
190
196
|
onClick: ()=>handleSelect(suggestedContentType)
|
|
191
|
-
}, (0, _get.default)(suggestedContentType, 'name')), _react.default.createElement(_f36components.Menu.Divider, null)), !searchInput && _react.default.createElement(_f36components.Menu.SectionTitle, null, contentTypesLabel),
|
|
197
|
+
}, (0, _get.default)(suggestedContentType, 'name')), _react.default.createElement(_f36components.Menu.Divider, null)), !searchInput && _react.default.createElement(_f36components.Menu.SectionTitle, null, contentTypesLabel), searchFilteredContentTypes.length ? searchFilteredContentTypes.map((contentType, i)=>_react.default.createElement(_f36components.Menu.Item, {
|
|
192
198
|
testId: "contentType",
|
|
193
199
|
key: `${(0, _get.default)(contentType, 'name')}-${i}`,
|
|
194
200
|
onClick: ()=>handleSelect(contentType)
|
|
@@ -76,6 +76,25 @@ const CONTENT_TYPE_3 = {
|
|
|
76
76
|
id: 'ID_3'
|
|
77
77
|
}
|
|
78
78
|
};
|
|
79
|
+
const EXPERIENCE_TYPE = {
|
|
80
|
+
name: 'experience-type',
|
|
81
|
+
sys: {
|
|
82
|
+
id: 'ID_4'
|
|
83
|
+
},
|
|
84
|
+
metadata: {
|
|
85
|
+
annotations: {
|
|
86
|
+
ContentType: [
|
|
87
|
+
{
|
|
88
|
+
sys: {
|
|
89
|
+
id: 'Contentful:ExperienceType',
|
|
90
|
+
type: 'Link',
|
|
91
|
+
linkType: 'Annotation'
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
};
|
|
79
98
|
describe('CreateEntryMenuTrigger general', ()=>{
|
|
80
99
|
const props = {
|
|
81
100
|
contentTypes: [
|
|
@@ -189,4 +208,26 @@ describe('CreateEntryMenuTrigger general', ()=>{
|
|
|
189
208
|
expect(suggestedContentType).toBeDefined();
|
|
190
209
|
expect(suggestedContentType.textContent).toBe(props.contentTypes[0].name);
|
|
191
210
|
});
|
|
211
|
+
it('filters out content types with Contentful:ExperienceType annotation', ()=>{
|
|
212
|
+
const contentTypesWithExperience = [
|
|
213
|
+
CONTENT_TYPE_1,
|
|
214
|
+
CONTENT_TYPE_2,
|
|
215
|
+
CONTENT_TYPE_3,
|
|
216
|
+
EXPERIENCE_TYPE
|
|
217
|
+
];
|
|
218
|
+
const { getByTestId, getAllByTestId } = (0, _react1.render)(_react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
|
|
219
|
+
...props,
|
|
220
|
+
contentTypes: contentTypesWithExperience
|
|
221
|
+
}, stub));
|
|
222
|
+
(0, _react1.act)(()=>{
|
|
223
|
+
_react1.fireEvent.click(getByTestId('menu-trigger'));
|
|
224
|
+
});
|
|
225
|
+
const contentTypeItems = getAllByTestId('contentType');
|
|
226
|
+
expect(contentTypeItems).toHaveLength(3);
|
|
227
|
+
expect(contentTypeItems[0].textContent).toBe('name-1');
|
|
228
|
+
expect(contentTypeItems[1].textContent).toBe('name-2');
|
|
229
|
+
expect(contentTypeItems[2].textContent).toBe('name-3');
|
|
230
|
+
const experienceTypeItem = contentTypeItems.find((item)=>item.textContent === 'experience-type');
|
|
231
|
+
expect(experienceTypeItem).toBeUndefined();
|
|
232
|
+
});
|
|
192
233
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect } from 'react';
|
|
1
|
+
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
|
2
2
|
import { TextInput, Menu } from '@contentful/f36-components';
|
|
3
3
|
import { SearchIcon } from '@contentful/f36-icons';
|
|
4
4
|
import tokens from '@contentful/f36-tokens';
|
|
@@ -46,6 +46,12 @@ export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, c
|
|
|
46
46
|
const textField = useRef(null);
|
|
47
47
|
const menuListRef = useRef(null);
|
|
48
48
|
const [dropdownWidth, setDropdownWidth] = useState();
|
|
49
|
+
const filteredContentTypes = useMemo(()=>contentTypes.filter((contentType)=>{
|
|
50
|
+
const annotations = get(contentType, 'metadata.annotations.ContentType', []);
|
|
51
|
+
return !annotations.some((annotation)=>get(annotation, 'sys.id') === 'Contentful:ExperienceType');
|
|
52
|
+
}), [
|
|
53
|
+
contentTypes
|
|
54
|
+
]);
|
|
49
55
|
const hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
|
|
50
56
|
const closeMenu = ()=>setOpen(false);
|
|
51
57
|
useEffect(()=>{
|
|
@@ -92,10 +98,10 @@ export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, c
|
|
|
92
98
|
const renderSearchResultsCount = (resultsLength)=>resultsLength ? React.createElement(Menu.SectionTitle, {
|
|
93
99
|
testId: "add-entru-menu-search-results"
|
|
94
100
|
}, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
|
|
95
|
-
const isSearchable =
|
|
101
|
+
const isSearchable = filteredContentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
|
|
96
102
|
const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
|
|
97
|
-
const suggestedContentType =
|
|
98
|
-
const
|
|
103
|
+
const suggestedContentType = filteredContentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
|
|
104
|
+
const searchFilteredContentTypes = filteredContentTypes.filter((ct)=>!searchInput || get(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
|
|
99
105
|
return React.createElement("span", {
|
|
100
106
|
className: styles.wrapper,
|
|
101
107
|
ref: wrapper,
|
|
@@ -129,10 +135,10 @@ export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, c
|
|
|
129
135
|
onChange: (e)=>setSearchInput(e.target.value)
|
|
130
136
|
}), React.createElement(SearchIcon, {
|
|
131
137
|
className: styles.searchIcon
|
|
132
|
-
})), React.createElement(Menu.Divider, null)), searchInput && renderSearchResultsCount(
|
|
138
|
+
})), React.createElement(Menu.Divider, null)), searchInput && renderSearchResultsCount(searchFilteredContentTypes.length), suggestedContentType && !searchInput && React.createElement(React.Fragment, null, React.createElement(Menu.SectionTitle, null, "Suggested Content Type"), React.createElement(Menu.Item, {
|
|
133
139
|
testId: "suggested",
|
|
134
140
|
onClick: ()=>handleSelect(suggestedContentType)
|
|
135
|
-
}, get(suggestedContentType, 'name')), React.createElement(Menu.Divider, null)), !searchInput && React.createElement(Menu.SectionTitle, null, contentTypesLabel),
|
|
141
|
+
}, get(suggestedContentType, 'name')), React.createElement(Menu.Divider, null)), !searchInput && React.createElement(Menu.SectionTitle, null, contentTypesLabel), searchFilteredContentTypes.length ? searchFilteredContentTypes.map((contentType, i)=>React.createElement(Menu.Item, {
|
|
136
142
|
testId: "contentType",
|
|
137
143
|
key: `${get(contentType, 'name')}-${i}`,
|
|
138
144
|
onClick: ()=>handleSelect(contentType)
|
|
@@ -26,6 +26,25 @@ const CONTENT_TYPE_3 = {
|
|
|
26
26
|
id: 'ID_3'
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
+
const EXPERIENCE_TYPE = {
|
|
30
|
+
name: 'experience-type',
|
|
31
|
+
sys: {
|
|
32
|
+
id: 'ID_4'
|
|
33
|
+
},
|
|
34
|
+
metadata: {
|
|
35
|
+
annotations: {
|
|
36
|
+
ContentType: [
|
|
37
|
+
{
|
|
38
|
+
sys: {
|
|
39
|
+
id: 'Contentful:ExperienceType',
|
|
40
|
+
type: 'Link',
|
|
41
|
+
linkType: 'Annotation'
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
};
|
|
29
48
|
describe('CreateEntryMenuTrigger general', ()=>{
|
|
30
49
|
const props = {
|
|
31
50
|
contentTypes: [
|
|
@@ -139,4 +158,26 @@ describe('CreateEntryMenuTrigger general', ()=>{
|
|
|
139
158
|
expect(suggestedContentType).toBeDefined();
|
|
140
159
|
expect(suggestedContentType.textContent).toBe(props.contentTypes[0].name);
|
|
141
160
|
});
|
|
161
|
+
it('filters out content types with Contentful:ExperienceType annotation', ()=>{
|
|
162
|
+
const contentTypesWithExperience = [
|
|
163
|
+
CONTENT_TYPE_1,
|
|
164
|
+
CONTENT_TYPE_2,
|
|
165
|
+
CONTENT_TYPE_3,
|
|
166
|
+
EXPERIENCE_TYPE
|
|
167
|
+
];
|
|
168
|
+
const { getByTestId, getAllByTestId } = render(React.createElement(CreateEntryMenuTrigger, {
|
|
169
|
+
...props,
|
|
170
|
+
contentTypes: contentTypesWithExperience
|
|
171
|
+
}, stub));
|
|
172
|
+
act(()=>{
|
|
173
|
+
fireEvent.click(getByTestId('menu-trigger'));
|
|
174
|
+
});
|
|
175
|
+
const contentTypeItems = getAllByTestId('contentType');
|
|
176
|
+
expect(contentTypeItems).toHaveLength(3);
|
|
177
|
+
expect(contentTypeItems[0].textContent).toBe('name-1');
|
|
178
|
+
expect(contentTypeItems[1].textContent).toBe('name-2');
|
|
179
|
+
expect(contentTypeItems[2].textContent).toBe('name-3');
|
|
180
|
+
const experienceTypeItem = contentTypeItems.find((item)=>item.textContent === 'experience-type');
|
|
181
|
+
expect(experienceTypeItem).toBeUndefined();
|
|
182
|
+
});
|
|
142
183
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-reference",
|
|
3
|
-
"version": "5.31.
|
|
3
|
+
"version": "5.31.1",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"registry": "https://npm.pkg.github.com/"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "05beff8083e711ec10c00a95e49ce0ea6135db08"
|
|
68
68
|
}
|