PaginationInfo improvements/fixes

ibexa · Oct 25, 2023 · 8ad1218 · 8ad1218
1 parent a88e280
commit 8ad1218
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 23 deletions.
diff --git a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff
@@ -326,11 +326,6 @@
         <target state="new">View</target>
         <note>key: view_switcher.view</note>
       </trans-unit>
-      <trans-unit id="5ae5a511a5c344781ad0caa53efe7b33429c6132" resname="viewing_message">
-        <source>Viewing %viewingCount% out of %totalCount% sub-items</source>
-        <target state="new">Viewing %viewingCount% out of %totalCount% sub-items</target>
-        <note>key: viewing_message</note>
-      </trans-unit>
     </body>
   </file>
 </xliff>
diff --git a/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff b/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff
@@ -231,6 +231,11 @@
         <target state="new">Select destination</target>
         <note>key: move.title</note>
       </trans-unit>
+      <trans-unit id="d31e50b1f33f2682ff35901dc7d7c4ea646ca922" resname="pagination.info.viewing_message">
+        <source>Viewing %viewingCount% out of %totalCount% items</source>
+        <target state="new">Viewing %viewingCount% out of %totalCount% items</target>
+        <note>key: pagination.info.viewing_message</note>
+      </trans-unit>
       <trans-unit id="fde645e6790429ce2f904099b7aa2712224be9aa" resname="popup.close.label">
         <source>Close</source>
         <target state="new">Close</target>

diff --git a/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js b/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js
@@ -1,28 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { createCssClassNames } from '../helpers/css.class.names';
 
 const { Translator } = window;
 
-const PaginationInfo = ({ totalCount, viewingCount }) => {
+const PaginationInfo = ({ totalCount, viewingCount, extraClasses }) => {
     if (totalCount === 0) {
         return null;
     }
 
+    const className = createCssClassNames({
+        'ibexa-pagination__info': true,
+        [extraClasses]: true,
+    });
     const message = Translator.trans(
-        /*@Desc("Viewing %viewingCount% out of %totalCount% items")*/ 'viewing_message',
+        /*@Desc("Viewing %viewingCount% out of %totalCount% items")*/ 'pagination.info.viewing_message',
         {
             viewingCount,
             totalCount,
         },
-        'ibexa_sub_items',
+        'ibexa_universal_discovery_widget',
     );
 
-    return <div className="m-sub-items__pagination-info ibexa-pagination__info" dangerouslySetInnerHTML={{ __html: message }} />;
+    return <div className={className} dangerouslySetInnerHTML={{ __html: message }} />;
 };
 
 PaginationInfo.propTypes = {
     totalCount: PropTypes.number.isRequired,
     viewingCount: PropTypes.number.isRequired,
+    extraClasses: PropTypes.string,
+};
+
+PaginationInfo.defaultProps = {
+    extraClasses: '',
 };
 
 export default PaginationInfo;
diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js
@@ -9,6 +9,7 @@ import ActionButton from './components/action-btn/action.btn.js';
 import Pagination from '../common/pagination/pagination.js';
 import NoItemsComponent from './components/no-items/no.items.component.js';
 import Icon from '../common/icon/icon.js';
+import PaginationInfo from '../common/pagination/pagination.info.js';
 
 import deepClone from '../common/helpers/deep.clone.helper.js';
 import { updateLocationPriority, loadLocation as loadLocationService } from './services/sub.items.service';
@@ -1121,22 +1122,9 @@ export default class SubItemsModule extends Component {
      */
     renderPaginationInfo() {
         const { totalCount, activePageItems } = this.state;
-
-        if (totalCount === 0) {
-            return null;
-        }
-
         const viewingCount = activePageItems ? activePageItems.length : 0;
-        const message = Translator.trans(
-            /*@Desc("Viewing %viewingCount% out of %totalCount% sub-items")*/ 'viewing_message',
-            {
-                viewingCount,
-                totalCount,
-            },
-            'ibexa_sub_items',
-        );
 
-        return <div className="m-sub-items__pagination-info ibexa-pagination__info" dangerouslySetInnerHTML={{ __html: message }} />;
+        return <PaginationInfo totalCount={totalCount} viewingCount={viewingCount} extraClasses="m-sub-items__pagination-info" />;
     }
 
     /**