\n"
"Language-Team: Plone i18n {placeholder}
- {data.headline && ( -
-
- {
- !isEditMode &&
- listingRef.current.scrollIntoView({ behavior: 'smooth' });
- onPaginationChange(e, { activePage });
- }}
- firstItem={null}
- lastItem={null}
- prevItem={{
- content: 0,
+ })}
+ >
+ {data.headline}
+
+ )}
+ {listingItems?.length > 0 ? (
+
- ) : isEditMode ? (
-
+
+ ) : isEditMode ? (
+
+ {
+ !isEditMode &&
+ listingRef.current.scrollIntoView({ behavior: 'smooth' });
+ onPaginationChange(e, { activePage });
+ }}
+ firstItem={null}
+ lastItem={null}
+ prevItem={{
+ content:
+ )}
+
+ {isFolderContentsListing && (
+
+
+
+
+
+ ) : (
+
+ {hasLoaded && NoResults && (
+
+
+
+
)}
-
- {isFolderContentsListing && (
-
-
-
-
-
- ) : (
-
- {hasLoaded && NoResults && (
-
-
-
-
-
+
);
});
diff --git a/src/components/manage/Blocks/Listing/View.jsx b/src/components/manage/Blocks/Listing/View.jsx
index 5c69b38b0d..b70adfdf0b 100644
--- a/src/components/manage/Blocks/Listing/View.jsx
+++ b/src/components/manage/Blocks/Listing/View.jsx
@@ -7,15 +7,11 @@ import { ListingBlockBody as ListingBody } from '@plone/volto/components';
const View = (props) => {
const { data, path, pathname, className } = props;
- const HeadlineTag = data.headlineTag || 'h2';
return (
- {data.headline && (
- {data.headline}
- )}
);
diff --git a/src/components/manage/Blocks/Listing/__snapshots__/ListingBody.test.jsx.snap b/src/components/manage/Blocks/Listing/__snapshots__/ListingBody.test.jsx.snap
index d91cbc9314..e81db3c83f 100644
--- a/src/components/manage/Blocks/Listing/__snapshots__/ListingBody.test.jsx.snap
+++ b/src/components/manage/Blocks/Listing/__snapshots__/ListingBody.test.jsx.snap
@@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a ListingBody component 1`] = `
-
+
{
+const getListingBlockAsyncData = ({
+ dispatch,
+ id,
+ data,
+ path,
+ blocksConfig,
+}) => {
const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
return [
@@ -14,8 +20,10 @@ export default ({ dispatch, data, path, blocksConfig }) => {
? { fullobjects: 1 }
: { metadata_fields: '_all' }),
},
- data.block,
+ id,
),
),
];
};
+
+export default getListingBlockAsyncData;
diff --git a/src/components/manage/Blocks/Listing/withQuerystringResults.jsx b/src/components/manage/Blocks/Listing/withQuerystringResults.jsx
index d675fc050a..1b552e674b 100644
--- a/src/components/manage/Blocks/Listing/withQuerystringResults.jsx
+++ b/src/components/manage/Blocks/Listing/withQuerystringResults.jsx
@@ -14,11 +14,16 @@ function getDisplayName(WrappedComponent) {
export default function withQuerystringResults(WrappedComponent) {
function WithQuerystringResults(props) {
- const { data = {}, properties: content, path, variation } = props;
+ const {
+ data = {},
+ id = data.block,
+ properties: content,
+ path,
+ variation,
+ } = props;
const { settings } = config;
const querystring = data.querystring || data; // For backwards compat with data saved before Blocks schema. Note, this is also how the Search block passes data to ListingBody
- const { block } = data;
const { b_size = settings.defaultPageSize } = querystring; // batchsize
// save the path so it won't trigger dispatch on eager router location change
@@ -45,32 +50,32 @@ export default function withQuerystringResults(WrappedComponent) {
const folderItems = content?.is_folderish ? content.items : [];
const hasQuery = querystring?.query?.length > 0;
- const hasLoaded = hasQuery ? !querystringResults?.[block]?.loading : true;
+ const hasLoaded = hasQuery ? !querystringResults?.[id]?.loading : true;
const listingItems =
- querystring?.query?.length > 0 && querystringResults?.[block]
- ? querystringResults?.[block]?.items || []
+ querystring?.query?.length > 0 && querystringResults?.[id]
+ ? querystringResults?.[id]?.items || []
: folderItems;
const showAsFolderListing = !hasQuery && content?.items_total > b_size;
const showAsQueryListing =
- hasQuery && querystringResults?.[block]?.total > b_size;
+ hasQuery && querystringResults?.[id]?.total > b_size;
const totalPages = showAsFolderListing
? Math.ceil(content.items_total / b_size)
: showAsQueryListing
- ? Math.ceil(querystringResults[block].total / b_size)
+ ? Math.ceil(querystringResults[id].total / b_size)
: 0;
const prevBatch = showAsFolderListing
? content.batching?.prev
: showAsQueryListing
- ? querystringResults[block].batching?.prev
+ ? querystringResults[id].batching?.prev
: null;
const nextBatch = showAsFolderListing
? content.batching?.next
: showAsQueryListing
- ? querystringResults[block].batching?.next
+ ? querystringResults[id].batching?.next
: null;
const isImageGallery =
@@ -80,7 +85,7 @@ export default function withQuerystringResults(WrappedComponent) {
useDeepCompareEffect(() => {
if (hasQuery) {
dispatch(
- getQueryStringResults(initialPath, adaptedQuery, block, currentPage),
+ getQueryStringResults(initialPath, adaptedQuery, id, currentPage),
);
} else if (isImageGallery && !hasQuery) {
// when used as image gallery, it doesn't need a query to list children
@@ -98,14 +103,14 @@ export default function withQuerystringResults(WrappedComponent) {
},
],
},
- block,
+ id,
),
);
} else {
dispatch(getContent(initialPath, null, null, currentPage));
}
}, [
- block,
+ id,
isImageGallery,
adaptedQuery,
hasQuery,
@@ -118,7 +123,7 @@ export default function withQuerystringResults(WrappedComponent) {
setCurrentPage(activePage)}
- total={querystringResults?.[block]?.total}
+ total={querystringResults?.[id]?.total}
batch_size={b_size}
currentPage={currentPage}
totalPages={totalPages}
diff --git a/src/components/manage/Blocks/Search/SearchBlockEdit.jsx b/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
index 3f5b57bf91..0a3f222e9b 100644
--- a/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
+++ b/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useEffect } from 'react';
import { defineMessages } from 'react-intl';
import { compose } from 'redux';
@@ -60,9 +59,11 @@ const SearchBlockEdit = (props) => {
};
const { query = {} } = data || {};
- useDeepCompareEffect(() => {
+ // We don't need deep compare here, as this is just json serializable data.
+ const deepQuery = JSON.stringify(query);
+ useEffect(() => {
onTriggerSearch();
- }, [query, onTriggerSearch]);
+ }, [deepQuery, onTriggerSearch]);
return (
<>
diff --git a/src/components/manage/Blocks/Search/SearchBlockView.jsx b/src/components/manage/Blocks/Search/SearchBlockView.jsx
index 49135a6fe6..55580cd79a 100644
--- a/src/components/manage/Blocks/Search/SearchBlockView.jsx
+++ b/src/components/manage/Blocks/Search/SearchBlockView.jsx
@@ -57,7 +57,7 @@ const applyDefaults = (data, root) => {
};
const SearchBlockView = (props) => {
- const { data, searchData, mode = 'view', variation } = props;
+ const { id, data, searchData, mode = 'view', variation } = props;
const Layout = variation.view;
@@ -89,6 +89,7 @@ const SearchBlockView = (props) => {
setSelectedView={setSelectedView}
>
(kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
- [],
- );
+ // Note Ideally the searchtext functionality should be restructured as being just
+ // another facet. But right now it's the same. This means that if a searchText
+ // is provided, it will override the SearchableText facet.
+ // If there is no searchText, the SearchableText in the query remains in effect.
+ // TODO eventually the searchText should be a distinct facet from SearchableText, and
+ // the two conditions could be combined, in comparison to the current state, when
+ // one overrides the other.
if (searchText) {
+ params.query = params.query.reduce(
+ // Remove SearchableText from query
+ (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+ [],
+ );
params.query.push({
i: 'SearchableText',
o: 'plone.app.querystring.operation.string.contains',
@@ -278,8 +282,14 @@ const withSearch = (options) => (WrappedComponent) => {
const timeoutRef = React.useRef();
const facetSettings = data?.facets;
+ const deepQuery = JSON.stringify(data.query);
const onTriggerSearch = React.useCallback(
- (toSearchText, toSearchFacets, toSortOn, toSortOrder) => {
+ (
+ toSearchText = undefined,
+ toSearchFacets = undefined,
+ toSortOn = undefined,
+ toSortOrder = undefined,
+ ) => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(
() => {
@@ -287,7 +297,7 @@ const withSearch = (options) => (WrappedComponent) => {
id,
query: data.query || {},
facets: toSearchFacets || facets,
- searchText: toSearchText,
+ searchText: toSearchText || searchText,
sortOn: toSortOn || sortOn,
sortOrder: toSortOrder || sortOrder,
facetSettings,
@@ -301,11 +311,14 @@ const withSearch = (options) => (WrappedComponent) => {
toSearchFacets ? inputDelay / 3 : inputDelay,
);
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[
- data.query,
+ // Use deep comparison of data.query
+ deepQuery,
facets,
id,
setLocationSearchData,
+ searchText,
sortOn,
sortOrder,
facetSettings,
diff --git a/src/components/manage/Blocks/ToC/Edit.jsx b/src/components/manage/Blocks/ToC/Edit.jsx
index 8932e9919b..fa31414fb6 100644
--- a/src/components/manage/Blocks/ToC/Edit.jsx
+++ b/src/components/manage/Blocks/ToC/Edit.jsx
@@ -26,6 +26,7 @@ class Edit extends Component {
}}
onChangeBlock={this.props.onChangeBlock}
formData={this.props.data}
+ block={this.props.block}
/>
diff --git a/src/components/manage/Contents/Contents.jsx b/src/components/manage/Contents/Contents.jsx
index 3e8c7708a2..291ed46c62 100644
--- a/src/components/manage/Contents/Contents.jsx
+++ b/src/components/manage/Contents/Contents.jsx
@@ -290,6 +290,10 @@ const messages = defineMessages({
id: 'This Page is referenced by the following items:',
defaultMessage: 'This Page is referenced by the following items:',
},
+ deleteItemCountMessage: {
+ id: 'Total items to be deleted:',
+ defaultMessage: 'Total items to be deleted:',
+ },
deleteItemMessage: {
id: 'Items to be deleted:',
defaultMessage: 'Items to be deleted:',
@@ -418,6 +422,8 @@ class Contents extends Component {
this.paste = this.paste.bind(this);
this.fetchContents = this.fetchContents.bind(this);
this.orderTimeout = null;
+ this.deleteItemsToShowThreshold = 10;
+
this.state = {
selected: [],
showDelete: false,
@@ -427,6 +433,7 @@ class Contents extends Component {
showProperties: false,
showWorkflow: false,
itemsToDelete: [],
+ showAllItemsToDelete: true,
items: this.props.items,
filter: '',
currentPage: 0,
@@ -456,7 +463,6 @@ class Contents extends Component {
this.fetchContents();
this.setState({ isClient: true });
}
-
async componentDidUpdate(_, prevState) {
if (
this.state.itemsToDelete !== prevState.itemsToDelete &&
@@ -468,6 +474,8 @@ class Contents extends Component {
this.getFieldById(item, 'UID'),
),
),
+ showAllItemsToDelete:
+ this.state.itemsToDelete.length < this.deleteItemsToShowThreshold,
});
}
}
@@ -788,18 +796,20 @@ class Contents extends Component {
*/
onMoveToTop(event, { value }) {
const id = this.state.items[value]['@id'];
- value = this.state.currentPage * this.state.pageSize + value;
- this.props.orderContent(
- getBaseUrl(this.props.pathname),
- id.replace(/^.*\//, ''),
- -value,
- );
- this.setState(
- {
- currentPage: 0,
- },
- () => this.fetchContents(),
- );
+ this.props
+ .orderContent(
+ getBaseUrl(this.props.pathname),
+ id.replace(/^.*\//, ''),
+ 'top',
+ )
+ .then(() => {
+ this.setState(
+ {
+ currentPage: 0,
+ },
+ () => this.fetchContents(),
+ );
+ });
}
/**
@@ -810,18 +820,21 @@ class Contents extends Component {
* @returns {undefined}
*/
onMoveToBottom(event, { value }) {
- this.onOrderItem(
- this.state.items[value]['@id'],
- value,
- this.state.items.length - 1 - value,
- false,
- );
- this.onOrderItem(
- this.state.items[value]['@id'],
- value,
- this.state.items.length - 1 - value,
- true,
- );
+ const id = this.state.items[value]['@id'];
+ this.props
+ .orderContent(
+ getBaseUrl(this.props.pathname),
+ id.replace(/^.*\//, ''),
+ 'bottom',
+ )
+ .then(() => {
+ this.setState(
+ {
+ currentPage: 0,
+ },
+ () => this.fetchContents(),
+ );
+ });
}
/**
@@ -1188,16 +1201,35 @@ class Contents extends Component {
diff --git a/src/components/manage/Controlpanels/AddonsControlpanel.jsx b/src/components/manage/Controlpanels/AddonsControlpanel.jsx
index a1f8a8b384..1248c90cbf 100644
--- a/src/components/manage/Controlpanels/AddonsControlpanel.jsx
+++ b/src/components/manage/Controlpanels/AddonsControlpanel.jsx
@@ -43,7 +43,7 @@ const messages = defineMessages({
addAddons: {
id: 'Add Addons',
defaultMessage:
- 'To make new add-ons show up here, add them to your buildout configuration, run buildout, and restart the server process. For detailed instructions see',
+ 'To make new add-ons show up here, add them to your configuration, build, and restart the server process. For detailed instructions see',
},
addonsSettings: {
id: 'Add-ons Settings',
@@ -380,11 +380,11 @@ class AddonsControlpanel extends Component {
- To make new add-ons show up here, add them to your buildout configuration, run buildout, and restart the server process. For detailed instructions see
+ To make new add-ons show up here, add them to your configuration, build, and restart the server process. For detailed instructions see
diff --git a/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
index e8accacfc2..aafd79a1dd 100644
--- a/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
@@ -24,7 +24,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
className="ui attached segment"
>
{this.props.intl.formatMessage( - messages.deleteItemMessage, - )} + messages.deleteItemCountMessage, + ) + ` ${this.state.itemsToDelete.length}`}
-
- {map(this.state.itemsToDelete, (item) => (
-
- - {this.getFieldById(item, 'title')} - - ))} + {map( + this.state.showAllItemsToDelete + ? this.state.itemsToDelete + : this.state.itemsToDelete.slice( + 0, + this.deleteItemsToShowThreshold, + ), + (item) => ( +
- + {this.getFieldById(item, 'title')} + + ), + )}
diff --git a/src/components/manage/Controlpanels/AddonsControlpanel.jsx b/src/components/manage/Controlpanels/AddonsControlpanel.jsx
index a1f8a8b384..1248c90cbf 100644
--- a/src/components/manage/Controlpanels/AddonsControlpanel.jsx
+++ b/src/components/manage/Controlpanels/AddonsControlpanel.jsx
@@ -43,7 +43,7 @@ const messages = defineMessages({
addAddons: {
id: 'Add Addons',
defaultMessage:
- 'To make new add-ons show up here, add them to your buildout configuration, run buildout, and restart the server process. For detailed instructions see',
+ 'To make new add-ons show up here, add them to your configuration, build, and restart the server process. For detailed instructions see',
},
addonsSettings: {
id: 'Add-ons Settings',
@@ -380,11 +380,11 @@ class AddonsControlpanel extends Component {
-
+
{map(filter(controlpanels, { group }), (controlpanel) => (
diff --git a/src/components/manage/Controlpanels/__snapshots__/AddonsControlpanel.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/AddonsControlpanel.test.jsx.snap
index 220fa5bff8..78ea65bb56 100644
--- a/src/components/manage/Controlpanels/__snapshots__/AddonsControlpanel.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/AddonsControlpanel.test.jsx.snap
@@ -31,10 +31,10 @@ exports[`AddonsControlpanel renders an addon control component 1`] = `
>
Activate and deactivate add-ons in the lists below.
- To make new add-ons show up here, add them to your buildout configuration, run buildout, and restart the server process. For detailed instructions see
+ To make new add-ons show up here, add them to your configuration, build, and restart the server process. For detailed instructions see
diff --git a/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
index e8accacfc2..aafd79a1dd 100644
--- a/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/Controlpanels.test.jsx.snap
@@ -24,7 +24,7 @@ exports[`Controlpanels renders a controlpanels component 1`] = `
className="ui attached segment"
>
{
+const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex, uid) => {
// Because of the margin rendering rules, there is no easy
// way to calculate the offset of the placeholder.
//
@@ -13,12 +13,16 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
//
// To get a placeholder that looks good in all cases, we
// fill up the space between the previous and the next element.
- const childrenArray = [...draggedDOM.parentNode.children];
+ const queryAttr = 'data-rbd-droppable-id';
+ const domQuery = `[${queryAttr}='${uid}']`;
+ const parentDOM = document.querySelector(domQuery);
+
+ const childrenArray = [...parentDOM.children];
// Remove the source element
childrenArray.splice(sourceIndex, 1);
// Also remove the placeholder that the library always inserts at the end
childrenArray.splice(-1, 1);
- const parentRect = draggedDOM.parentNode.getBoundingClientRect();
+ const parentRect = parentDOM.getBoundingClientRect();
const prevNode = childrenArray[destinationIndex - 1];
const nextNode = childrenArray[destinationIndex];
let top, bottom;
@@ -40,9 +44,7 @@ const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
return {
clientY: top,
clientHeight: bottom - top,
- clientX: parseFloat(
- window.getComputedStyle(draggedDOM.parentNode).paddingLeft,
- ),
+ clientX: parseFloat(window.getComputedStyle(parentDOM).paddingLeft),
clientWidth: draggedDOM.clientWidth,
};
};
@@ -63,17 +65,22 @@ const DragDropList = (props) => {
// queueing timed action
const timer = useRef(null);
- const onDragStart = React.useCallback((event) => {
- clearTimeout(timer.current);
- const queryAttr = 'data-rbd-draggable-id';
- const domQuery = `[${queryAttr}='${event.draggableId}']`;
- const draggedDOM = document.querySelector(domQuery);
- if (!draggedDOM) {
- return;
- }
- const sourceIndex = event.source.index;
- setPlaceholderProps(getPlaceholder(draggedDOM, sourceIndex, sourceIndex));
- }, []);
+ const onDragStart = React.useCallback(
+ (event) => {
+ clearTimeout(timer.current);
+ const queryAttr = 'data-rbd-draggable-id';
+ const domQuery = `[${queryAttr}='${event.draggableId}']`;
+ const draggedDOM = document.querySelector(domQuery);
+ if (!draggedDOM) {
+ return;
+ }
+ const sourceIndex = event.source.index;
+ setPlaceholderProps(
+ getPlaceholder(draggedDOM, sourceIndex, sourceIndex, uid),
+ );
+ },
+ [uid],
+ );
const onDragEnd = React.useCallback(
(result) => {
@@ -84,30 +91,33 @@ const DragDropList = (props) => {
[onMoveItem],
);
- const onDragUpdate = React.useCallback((update) => {
- clearTimeout(timer.current);
- setPlaceholderProps({});
- if (!update.destination) {
- return;
- }
- const draggableId = update.draggableId;
- const queryAttr = 'data-rbd-draggable-id';
- const domQuery = `[${queryAttr}='${draggableId}']`;
- const draggedDOM = document.querySelector(domQuery);
- if (!draggedDOM) {
- return;
- }
- const sourceIndex = update.source.index;
- const destinationIndex = update.destination.index;
- // Wait until the animations have finished, to make it look good.
- timer.current = setTimeout(
- () =>
- setPlaceholderProps(
- getPlaceholder(draggedDOM, sourceIndex, destinationIndex),
- ),
- 250,
- );
- }, []);
+ const onDragUpdate = React.useCallback(
+ (update) => {
+ clearTimeout(timer.current);
+ setPlaceholderProps({});
+ if (!update.destination) {
+ return;
+ }
+ const draggableId = update.draggableId;
+ const queryAttr = 'data-rbd-draggable-id';
+ const domQuery = `[${queryAttr}='${draggableId}']`;
+ const draggedDOM = document.querySelector(domQuery);
+ if (!draggedDOM) {
+ return;
+ }
+ const sourceIndex = update.source.index;
+ const destinationIndex = update.destination.index;
+ // Wait until the animations have finished, to make it look good.
+ timer.current = setTimeout(
+ () =>
+ setPlaceholderProps(
+ getPlaceholder(draggedDOM, sourceIndex, destinationIndex, uid),
+ ),
+ 250,
+ );
+ },
+ [uid],
+ );
const AsDomComponent = as;
return (
@@ -116,7 +126,18 @@ const DragDropList = (props) => {
onDragUpdate={onDragUpdate}
onDragEnd={onDragEnd}
>
-
+ {
+ const index = rubric.source.index;
+ return children({
+ child: childList[index][1],
+ childId: childList[index][0],
+ index,
+ draginfo: provided,
+ });
+ }}
+ >
{(provided, snapshot) => (
+