diff --git a/src/bundle/Resources/public/scss/ui/modules/_universal.discovery.scss b/src/bundle/Resources/public/scss/ui/modules/_universal.discovery.scss index 1b66e1e2e7..13bfec06d7 100644 --- 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 index dcb415521b..112a96f281 100644 --- 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/src/bundle/Resources/public/scss/ui/modules/universal-discovery/mixins/_collapsible-arrow.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/mixins/_collapsible-arrow.scss new file mode 100644 index 0000000000..c6f1e12c42 --- /dev/null +++ b/src/bundle/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 index 3764841d60..2cee7df40e 100644 --- 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 index f44f4f1c17..d0d85f5adc 100644 --- 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 index 43fda05aeb..85c1926771 100644 --- 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/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js index 7dc7dd0b86..f369cde86d 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js +++ b/src/bundle/ui-dev/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 ( -
+
{ + refSelectedLocationsItem.current = node; + parseTooltip(node); + }} + >
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js index 782722d1b6..50199d90dd 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js +++ b/src/bundle/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 && ; + if (!ItemComponent) { + throw new Error(`SelectedItemsPanel: component for ${selectedItem.type} not provided in configuration.`); + } + + return ; })}
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js index 010f4b082d..57a1821f45 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js +++ b/src/bundle/ui-dev/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 ( -
+
{ + refSelectedLocationsItem.current = node; + parseTooltip(node); + }} + >
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 index 8f9109b713..f98cdc18ac 100644 --- 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 index 35189083ee..5cd7cfd2fb 100644 --- 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 }),