after CR

ibexa · Dec 5, 2024 · d13fcb7 · d13fcb7
1 parent 3a0bd10
commit d13fcb7
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 63 deletions.
diff --git a/src/bundle/Resources/public/scss/ui/modules/_universal.discovery.scss b/src/bundle/Resources/public/scss/ui/modules/_universal.discovery.scss
@@ -1,3 +1,4 @@
+@import 'universal-discovery/mixins/collapsible-arrow';
 @import 'universal-discovery/mixins/filters-panel';
 @import 'universal-discovery/mixins/filters-row';
 @import 'universal-discovery/mixins/selected.items.panel.item';

diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss
@@ -43,26 +43,7 @@
         border-width: calculateRem(1px) 0;
         box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);
 
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            z-index: 1;
-            top: 50%;
-            width: calculateRem(6px);
-            height: calculateRem(1px);
-            background: $ibexa-color-dark;
-        }
-
-        &::before {
-            transform: rotate(225deg);
-            right: calculateRem(12px);
-        }
-
-        &::after {
-            transform: rotate(-225deg);
-            right: calculateRem(16px);
-        }
+        @include collapsible-arrow;
     }
 
     &__content {

diff --git a/...undle/Resources/public/scss/ui/modules/universal-discovery/mixins/_collapsible-arrow.scss b/...undle/Resources/public/scss/ui/modules/universal-discovery/mixins/_collapsible-arrow.scss
@@ -0,0 +1,32 @@
+@mixin collapsible-arrow {
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        width: calculateRem(6px);
+        height: calculateRem(1px);
+        background: $ibexa-color-dark;
+    }
+
+    &::before {
+        transform: rotate(225deg);
+        right: calculateRem(12px);
+    }
+
+    &::after {
+        transform: rotate(-225deg);
+        right: calculateRem(16px);
+    }
+}
+
+@mixin collapsible-arrow-collapsed-state {
+    &::before {
+        transform: rotate(135deg);
+    }
+
+    &::after {
+        transform: rotate(-135deg);
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/mixins/_filters-panel.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/mixins/_filters-panel.scss
@@ -39,13 +39,7 @@
                     box-shadow: none;
                     border-bottom-color: transparent;
 
-                    &:before {
-                        transform: rotate(135deg);
-                    }
-
-                    &:after {
-                        transform: rotate(-135deg);
-                    }
+                    @include collapsible-arrow-collapsed-state;
                 }
 
                 &__collapsible-content {
@@ -71,26 +65,7 @@
         border-width: calculateRem(1px) 0;
         box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);
 
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            z-index: 1;
-            top: 50%;
-            width: calculateRem(6px);
-            height: calculateRem(1px);
-            background: $ibexa-color-dark;
-        }
-
-        &::before {
-            transform: rotate(225deg);
-            right: calculateRem(12px);
-        }
-
-        &::after {
-            transform: rotate(-225deg);
-            right: calculateRem(16px);
-        }
+        @include collapsible-arrow;
     }
 
     &__collapsible-content {

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js
@@ -33,10 +33,14 @@ const FiltersPanel = ({ children, isApplyButtonEnabled, makeSearch, clearFilters
 };
 
 FiltersPanel.propTypes = {
-    children: PropTypes.node.isRequired,
+    children: PropTypes.node,
     isApplyButtonEnabled: PropTypes.bool.isRequired,
     makeSearch: PropTypes.func.isRequired,
     clearFilters: PropTypes.func.isRequired,
 };
 
+FiltersPanel.defaultProps = {
+    children: null,
+};
+
 export default FiltersPanel;
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.row.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.row.js
@@ -19,8 +19,12 @@ const FiltersRow = ({ children, title, extraClasses }) => {
 
 FiltersRow.propTypes = {
     children: PropTypes.node.isRequired,
-    extraClasses: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
+    extraClasses: PropTypes.string,
 };
 
+FiltersRow.defaultProps = {
+    extraClasses: '',
+}
+
 export default FiltersRow;
diff --git a/...ev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js b/...ev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useContext, useMemo, useRef } from 'react';
 
 import {
     parse as parseTooltip,
@@ -36,12 +36,14 @@ const SelectedItemsPanelItem = ({ item, thumbnailData, name, description }) => {
         });
     }, []);
 
-    useEffect(() => {
-        parseTooltip(refSelectedLocationsItem.current);
-    }, []);
-
     return (
-        <div className="c-selected-items-panel-item" ref={refSelectedLocationsItem}>
+        <div
+            className="c-selected-items-panel-item"
+            ref={(node) => {
+                refSelectedLocationsItem.current = node;
+                parseTooltip(node);
+            }}
+        >
             <div className="c-selected-items-panel-item__image-wrapper">
                 <Thumbnail thumbnailData={thumbnailData} iconExtraClasses="ibexa-icon--small" />
             </div>

diff --git a/.../ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js b/.../ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js
@@ -111,7 +111,11 @@ const SelectedItemsPanel = () => {
                     {selectedItems.map((selectedItem) => {
                         const ItemComponent = itemsComponentsMap[selectedItem.type].component;
 
-                        return ItemComponent && <ItemComponent key={`${selectedItem.type}-${selectedItem.id}`} item={selectedItem} />;
+                        if (!ItemComponent) {
+                            throw new Error(`SelectedItemsPanel: component for ${selectedItem.type} not provided in configuration.`);
+                        }
+
+                        return <ItemComponent key={`${selectedItem.type}-${selectedItem.id}`} item={selectedItem} />;
                     })}
                 </div>
             </div>

diff --git a/.../src/modules/universal-discovery/components/selected-locations/selected.locations.item.js b/.../src/modules/universal-discovery/components/selected-locations/selected.locations.item.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useContext, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -38,12 +38,14 @@ const SelectedLocationsItem = ({ location, permissions }) => {
     const version = location.ContentInfo.Content.CurrentVersion.Version;
     const thumbnailData = version ? version.Thumbnail : {};
 
-    useEffect(() => {
-        parseTooltip(refSelectedLocationsItem.current);
-    }, []);
-
     return (
-        <div className="c-selected-locations-item" ref={refSelectedLocationsItem}>
+        <div
+            className="c-selected-locations-item"
+            ref={(node) => {
+                refSelectedLocationsItem.current = node;
+                parseTooltip(node);
+            }}
+        >
             <div className="c-selected-locations-item__image-wrapper">
                 <Thumbnail thumbnailData={thumbnailData} iconExtraClasses="ibexa-icon--small" />
             </div>

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js
@@ -14,7 +14,6 @@ const SortSwitcher = ({ isDisabled, disabledConfig }) => {
         setSorting(option.sortClause);
         setSortOrder(option.sortOrder);
     };
-
     const disabledParams = {};
 
     if (isDisabled && disabledConfig) {

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/hooks/usePaginableFetch.js b/src/bundle/ui-dev/src/modules/universal-discovery/hooks/usePaginableFetch.js
@@ -47,6 +47,7 @@ export const usePaginableFetch = ({ itemsPerPage, extraFetchParams }, fetchFunct
 
     useEffect(() => {
         dispatch({ type: FETCH_START });
+
         const offset = state.pageIndex * itemsPerPage;
         const { abortController } = fetchFunction({ ...restInfo, limit: itemsPerPage, offset, ...extraFetchParams }, (data) =>
             dispatch({ type: FETCH_END, data }),