WiP: remake dropdown

eea · May 13, 2024 · 0c8dedb · 0c8dedb
1 parent 1e0ebed
commit 0c8dedb
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -32,10 +32,10 @@
     "sanitize-html": "2.7.3"
   },
   "devDependencies": {
-    "cypress": "13.1.0",
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress": "13.1.0",
     "cypress-fail-fast": "^5.0.1",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",

diff --git a/src/components/manage/Blocks/CountryFlag/Edit.jsx b/src/components/manage/Blocks/CountryFlag/Edit.jsx
@@ -10,17 +10,21 @@ import countryNames from './data/countries';
 class Edit extends Component {
   getSchema = () => {
     const schema = CountryFlagSchema();
-    schema.properties.country_name.choices = Object.keys(countryNames).map(
-      (k) => [k, countryNames[k]],
-    );
+    schema.properties.country_name.choices = Object.keys(
+      countryNames,
+    ).map((k) => [k, countryNames[k]]);
     return schema;
   };
 
   render() {
     const schema = this.getSchema();
+
     return (
       <div className="block">
-        <CountryFlagView data={this.props.data} />
+        <CountryFlagView
+          path={this.props.pathname || ''}
+          data={this.props.data}
+        />
 
         <SidebarPortal selected={this.props.selected}>
           <InlineForm

diff --git a/src/components/manage/Blocks/CountryFlag/View.jsx b/src/components/manage/Blocks/CountryFlag/View.jsx
@@ -1,9 +1,11 @@
 import { useHistory } from 'react-router-dom';
 import React from 'react';
+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';
 
 const MaybeDropdown = ({ children, countries, value, dropdown = false }) => {
   const history = useHistory();
@@ -30,60 +32,81 @@ const MaybeDropdown = ({ children, countries, value, dropdown = false }) => {
   );
 };
 
-const CountryFlagView = ({ data = {}, metadata, properties }) => {
-  const {
-    country_name: countryCode,
-    render_as,
-    show_name,
-    show_flag,
-    show_dropdown,
-  } = data;
-  const Tag = render_as ? render_as.toLowerCase() : 'h2';
-  const [flag, setFlag] = React.useState();
-  const contentdata = metadata || properties;
-  const siblings = contentdata?.['@components']?.siblings?.items || [];
+const CountryFlagView = withQuerystringResults(
+  // ({ data = {}, metadata, properties }) => {
+  (props) => {
+    const {
+      country_name: countryCode,
+      render_as,
+      show_name,
+      show_flag,
+      show_dropdown,
+    } = props.data;
+    const Tag = render_as ? render_as.toLowerCase() : 'h2';
+    const [flag, setFlag] = React.useState();
+    const contentdata = props.metadata || props.properties;
+    const siblings = contentdata?.['@components']?.siblings?.items || [];
 
-  React.useEffect(() => {
-    if (countryCode) {
-      const code = countryCode.toLowerCase();
-      import(
-        /* webpackChunkName: "flags" */
-        /* webpackMode: "lazy" */
-        /* webpackExports: ["default", "named"] */
+    // const subrequestID = contentdata?.UID;
+    // const querystring = props.data.querystring;
+    // const hasQuery = querystring?.query?.length > 0;
+    // const querystringResults = useSelector(
+    //   (state) => state.querystringsearch.subrequests,
+    // );
 
-        `./data/svg/${code}.svg`
-      ).then((module) => {
-        setFlag(module.default);
-      });
-    }
-  });
-  const countryTitles = Object.values(countryNames);
+    // const listingItems = hasQuery
+    //   ? querystringResults?.[subrequestID]?.items || []
+    //   : siblings;
 
-  // 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));
+    // console.log('props', props);
+    console.log('listingItems', props.listingItems);
+    // console.log('data', props.data);
+    // console.log('contentdata', contentdata);
 
-  const countryFlag =
-    (countryCode && show_flag && flag && (
-      <img alt={countryNames[countryCode]} src={flag} />
-    )) ||
-    'no country';
+    React.useEffect(() => {
+      if (countryCode) {
+        const code = countryCode.toLowerCase();
+        import(
+          /* webpackChunkName: "flags" */
+          /* webpackMode: "lazy" */
+          /* webpackExports: ["default", "named"] */
 
-  return (
-    <div className="country-flag">
-      {countryFlag}
-      {countryCode && show_name && (
-        <Tag>
-          <MaybeDropdown
-            dropdown={show_dropdown}
-            countries={countries}
-            value={countryNames[countryCode]}
-          >
-            {countryNames[countryCode]}
-          </MaybeDropdown>
-        </Tag>
-      )}
-    </div>
-  );
-};
+          `./data/svg/${code}.svg`
+        ).then((module) => {
+          setFlag(module.default);
+        });
+      }
+    });
+    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;
+
+    const countryFlag =
+      (countryCode && show_flag && flag && (
+        <img alt={countryNames[countryCode]} src={flag} />
+      )) ||
+      'no country';
+
+    return (
+      <div className="country-flag">
+        {countryFlag}
+        {countryCode && show_name && (
+          <Tag>
+            <MaybeDropdown
+              dropdown={show_dropdown}
+              countries={countries}
+              value={countryNames[countryCode]}
+            >
+              {countryNames[countryCode]}
+            </MaybeDropdown>
+          </Tag>
+        )}
+      </div>
+    );
+  },
+);
 
 export default CountryFlagView;
diff --git a/src/components/manage/Blocks/CountryFlag/schema.js b/src/components/manage/Blocks/CountryFlag/schema.js
@@ -13,6 +13,11 @@ const CountryFlagSchema = () => {
         title: 'Settings',
         fields: ['show_name', 'show_flag', 'show_dropdown', 'render_as'], // title
       },
+      {
+        id: 'dropdownItems',
+        title: 'Dropdown items',
+        fields: ['querystring'],
+      },
     ],
 
     properties: {
@@ -35,6 +40,10 @@ const CountryFlagSchema = () => {
         title: 'Show dropdown',
         type: 'boolean',
       },
+      querystring: {
+        title: 'Criteria',
+        widget: 'querystring',
+      },
     },
 
     required: ['country_name'],