feat: countryFlag block customize dropdown items

eea · May 14, 2024 · 93fe45b · 93fe45b
1 parent 0fc177a
commit 93fe45b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 34 deletions.
diff --git a/src/components/manage/Blocks/CountryFlag/Edit.jsx b/src/components/manage/Blocks/CountryFlag/Edit.jsx
@@ -6,6 +6,7 @@ import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import CountryFlagSchema from './schema';
 import CountryFlagView from './View';
 import countryNames from './data/countries';
+import './styles.less';
 
 class Edit extends Component {
   getSchema = () => {
@@ -24,6 +25,8 @@ class Edit extends Component {
         <CountryFlagView
           path={this.props.pathname || ''}
           data={this.props.data}
+          metadata={this.props.metadata}
+          id={this.props.id}
         />
 
         <SidebarPortal selected={this.props.selected}>

diff --git a/src/components/manage/Blocks/CountryFlag/View.jsx b/src/components/manage/Blocks/CountryFlag/View.jsx
@@ -1,11 +1,12 @@
 import { useHistory } from 'react-router-dom';
 import React from 'react';
-import { useSelector } from 'react-redux';
+// import { useSelector } from 'react-redux';
 import countryNames from './data/countries';
 import './styles.less';
 import { Dropdown } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import withQuerystringResults from '@plone/volto/components/manage/Blocks/Listing/withQuerystringResults';
+import PreviewImage from '@eeacms/volto-listing-block/PreviewImage';
 
 const MaybeDropdown = ({ children, countries, value, dropdown = false }) => {
   const history = useHistory();
@@ -15,14 +16,16 @@ const MaybeDropdown = ({ children, countries, value, dropdown = false }) => {
   }
 
   const options = countries.map((c) => ({ text: c.title, value: c['@id'] }));
+  // const defaultValue = countries.filter((c) => c.title === value);
 
   return (
     <Dropdown
+      fluid
       selection
       className="countries-dd"
       text={children}
       options={options}
-      defaultValue={value}
+      // defaultValue={defaultValue.length > 0 ? defaultValue[0]['@id'] : null}
       icon="angle down"
       onChange={(_, { value }) => {
         const url = flattenToAppURL(value);
@@ -46,22 +49,9 @@ const CountryFlagView = withQuerystringResults(
     const [flag, setFlag] = React.useState();
     const contentdata = props.metadata || props.properties;
     const siblings = contentdata?.['@components']?.siblings?.items || [];
-
-    // const subrequestID = contentdata?.UID;
-    // const querystring = props.data.querystring;
-    // const hasQuery = querystring?.query?.length > 0;
-    // const querystringResults = useSelector(
-    //   (state) => state.querystringsearch.subrequests,
-    // );
-
-    // const listingItems = hasQuery
-    //   ? querystringResults?.[subrequestID]?.items || []
-    //   : siblings;
-
-    // console.log('props', props);
-    console.log('listingItems', props.listingItems);
-    // console.log('data', props.data);
-    // console.log('contentdata', contentdata);
+    const pageTitle = props.metadata.title;
+    const previewImageUrl =
+      contentdata && contentdata['@id'] + '/@@images/preview_image/thumb';
 
     React.useEffect(() => {
       if (countryCode) {
@@ -77,33 +67,38 @@ const CountryFlagView = withQuerystringResults(
         });
       }
     });
-    const countryTitles = Object.values(countryNames);
-
     // TODO: we might as well use the Title everywhere, since we use it for the siblings
     // const countries = siblings.filter((f) => countryTitles.includes(f.title));
     const countries =
-      props.listingItems.length > 0 ? props.listingItems : siblings;
+      props.listingItems.length > 0
+        ? props.listingItems
+        : siblings.filter((s) => s.title !== pageTitle);
 
     const countryFlag =
       (countryCode && show_flag && flag && (
         <img alt={countryNames[countryCode]} src={flag} />
       )) ||
-      'no country';
+      (contentdata?.preview_image ? (
+        <PreviewImage item={contentdata} preview_image_url={previewImageUrl} />
+      ) : (
+        ''
+      ));
+    const displayName =
+      (countryCode && show_name && countryNames[countryCode]) || pageTitle;
 
     return (
       <div className="country-flag">
         {countryFlag}
-        {countryCode && show_name && (
-          <Tag>
-            <MaybeDropdown
-              dropdown={show_dropdown}
-              countries={countries}
-              value={countryNames[countryCode]}
-            >
-              {countryNames[countryCode]}
-            </MaybeDropdown>
-          </Tag>
-        )}
+
+        <Tag>
+          <MaybeDropdown
+            dropdown={show_dropdown}
+            countries={countries}
+            value={displayName}
+          >
+            {displayName}
+          </MaybeDropdown>
+        </Tag>
       </div>
     );
   },

diff --git a/src/components/manage/Blocks/CountryFlag/styles.less b/src/components/manage/Blocks/CountryFlag/styles.less
@@ -8,7 +8,7 @@
   align-items: center;
 
   img {
-    width: 100px;
+    width: 100px !important;
     padding-right: 1.2em;
   }
 
@@ -46,6 +46,10 @@
     min-width: auto;
     border: 1px solid #f1f1f1 !important;
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08) !important;
+
+    .selected.item {
+      color: #003159;
+    }
   }
 
   i.icon {