@blaze-cms/plugin-data-ui 0.146.0-node18-tooltips.42 → 0.146.0-node18-core-styles-tooltips.58

package/src/components/ListingTable/SearchFilter/SearchContainer.js

@@ -23,20 +23,17 @@ const SearchContainer = ({
   const displaySearchFilter = keywordFiltersToUse.length > 0;
   const displaySelectFilters = selectFiltersToDisplay.length > 0;
 
-  const { keywordSearchProperties, keywordSearchLabels } = useMemo(
-    () => {
-      const labels = [];
-      const properties = [];
+  const { keywordSearchProperties, keywordSearchLabels } = useMemo(() => {
+    const labels = [];
+    const properties = [];
 
-      keywordFiltersToUse.forEach(([property, { label }]) => {
-        if (label) labels.push(label);
-        properties.push(property);
-      });
+    keywordFiltersToUse.forEach(([property, { label }]) => {
+      if (label) labels.push(label);
+      properties.push(property);
+    });
 
-      return { keywordSearchProperties: properties, keywordSearchLabels: labels };
-    },
-    [keywordFiltersToUse]
-  );
+    return { keywordSearchProperties: properties, keywordSearchLabels: labels };
+  }, [keywordFiltersToUse]);
 
   const { gqlFields, rawQuery } = useMemo(
     () => buildQueryFields(selectFiltersToDisplay, schema.id),
@@ -52,101 +49,93 @@ const SearchContainer = ({
     fetchPolicy: 'cache-and-network'
   });
 
-  const filterData = useMemo(
-    () => {
-      const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = data || {};
-      const proccessedData = [];
-      Object.entries(aggregations).forEach(([key, { buckets }]) => {
-        proccessedData.push(
-          Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []
-        );
-      });
-
-      return proccessedData;
-    },
-    [data]
-  );
+  const filterData = useMemo(() => {
+    const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = data || {};
+    const proccessedData = [];
+    Object.entries(aggregations).forEach(([key, { buckets }]) => {
+      proccessedData.push(
+        Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []
+      );
+    });
 
-  useEffect(
-    () => {
-      if (!filterData.length) {
-        setSelectOptions([]);
-        return;
-      }
-
-      (async () => {
-        const results = await Promise.all(
-          filterData.map(async ([property, ids]) => {
-            try {
-              if (!ids || !ids.length) return {};
-
-              const [, selectionDetails] =
-                selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) ||
-                [];
-
-              if (!selectionDetails) return null;
-
-              if (!selectionDetails.relation) {
-                return {
-                  id: property,
-                  label: selectionDetails.label,
-                  options: ids.map(value => [value, value])
-                };
-              }
-              const query = getQuery('GET_ENTITY_SCHEMA');
-              const {
-                data: {
-                  getEntitySchemas: [relationSchema]
-                }
-              } = await apolloClient.query({
-                query,
-                variables: { identifier: selectionDetails.relation.entityIdentifier }
-              });
-
-              const {
-                data: { result: selected = [] }
-              } = await apolloClient
-                .query({
-                  query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
-                  variables: {
-                    where: {
-                      id: {
-                        _in: ids
-                      }
-                    },
-                    sort: [{ property: 'name', direction: 'asc' }]
-                  }
-                })
-                // eslint-disable-next-line no-console
-                .catch(e => console.error(e));
+    return proccessedData;
+  }, [data]);
+
+  useEffect(() => {
+    if (!filterData.length) {
+      setSelectOptions([]);
+      return;
+    }
+
+    (async () => {
+      const results = await Promise.all(
+        filterData.map(async ([property, ids]) => {
+          try {
+            if (!ids || !ids.length) return {};
+
+            const [, selectionDetails] =
+              selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) || [];
+
+            if (!selectionDetails) return null;
 
+            if (!selectionDetails.relation) {
               return {
                 id: property,
                 label: selectionDetails.label,
-                options: selected.map(item => [item.id, item.name])
+                options: ids.map(value => [value, value])
               };
-            } catch {
-              return null;
             }
-          })
-        );
+            const query = getQuery('GET_ENTITY_SCHEMA');
+            const {
+              data: {
+                getEntitySchemas: [relationSchema]
+              }
+            } = await apolloClient.query({
+              query,
+              variables: { identifier: selectionDetails.relation.entityIdentifier }
+            });
+
+            const {
+              data: { result: selected = [] }
+            } = await apolloClient
+              .query({
+                query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
+                variables: {
+                  where: {
+                    id: {
+                      _in: ids
+                    }
+                  },
+                  sort: [{ property: 'name', direction: 'asc' }]
+                }
+              })
+              // eslint-disable-next-line no-console
+              .catch(e => console.error(e));
+
+            return {
+              id: property,
+              label: selectionDetails.label,
+              options: selected.map(item => [item.id, item.name])
+            };
+          } catch {
+            return null;
+          }
+        })
+      );
 
-        setSelectOptions(results.filter(Boolean));
-      })();
-    },
-    [apolloClient, filterData, schema, selectFiltersToDisplay]
-  );
+      setSelectOptions(results.filter(Boolean));
+    })();
+  }, [apolloClient, filterData, schema, selectFiltersToDisplay]);
 
   const updateFilters = useCallback(
     (term, filters) => updateListFilters(term, filters, setListFilters, keywordSearchProperties),
     [setListFilters, keywordSearchProperties]
   );
 
-  const handleSearch = useCallback(() => updateFilters(searchTerm, selectedFilters), [
-    searchTerm,
-    selectedFilters,
-    updateFilters
-  ]);
+  const handleSearch = useCallback(
+    () => updateFilters(searchTerm, selectedFilters),
+    [searchTerm, selectedFilters, updateFilters]
+  );
   const handleSearchChange = useCallback(e => setSearchTerm(e.target.value), []);
   const handleEnterKey = useCallback(
     e => {
@@ -154,19 +143,16 @@ const SearchContainer = ({
     },
     [handleSearch]
   );
-  const handleReset = useCallback(
-    () => {
-      setSearchTerm('');
-      setSelectedFilters(
-        Object.keys(selectedFilters).reduce(
-          (acc, key) => ({ ...acc, [key]: DEFAULT_FILTER_OPTION_LABEL }),
-          {}
-        )
-      );
-      updateFilters('', {});
-    },
-    [selectedFilters, updateFilters]
-  );
+  const handleReset = useCallback(() => {
+    setSearchTerm('');
+    setSelectedFilters(
+      Object.keys(selectedFilters).reduce(
+        (acc, key) => ({ ...acc, [key]: DEFAULT_FILTER_OPTION_LABEL }),
+        {}
+      )
+    );
+    updateFilters('', {});
+  }, [selectedFilters, updateFilters]);
   const handleSelect = useCallback(
     (property, event) => {
       const { value } = event;
@@ -200,20 +186,19 @@ const SearchContainer = ({
       {displaySelectFilters &&
         selectOptions.map(({ id, options, label }) => (
           <>
-            {options &&
-              !!options.length && (
-                <div className="search-container__select-wrapper">
-                  <Select
-                    label={label}
-                    id={id}
-                    name={id}
-                    onChange={event => handleSelect(id, event)}
-                    options={options}
-                    value={selectedFilters[id]}
-                    defaultTextValue={DEFAULT_FILTER_OPTION_LABEL}
-                  />
-                </div>
-              )}
+            {options && !!options.length && (
+              <div className="search-container__select-wrapper">
+                <Select
+                  label={label}
+                  id={id}
+                  name={id}
+                  onChange={event => handleSelect(id, event)}
+                  options={options}
+                  value={selectedFilters[id]}
+                  defaultTextValue={DEFAULT_FILTER_OPTION_LABEL}
+                />
+              </div>
+            )}
           </>
         ))}
 

package/src/components/Tabs/index.js

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tab, TabItem } from '@blaze-react/tab';
-import {
-  useReadFromCache,
-  GET_CURRENT_TAB_ID,
-  TabsContextProvider
-} from '@blaze-cms/admin-ui-utils';
+import { useTabsContext, TabsContextProvider } from '@blaze-cms/admin-ui-utils';
 import {
   PAGE_BUILDER_TAB,
   PAGE_BUILDER_TAB_INDEX,
@@ -14,7 +10,7 @@ import {
 } from '../../constants';
 
 const Tabs = ({ children, onTabChange, enabled }) => {
-  const { currentTabId } = useReadFromCache({ query: GET_CURRENT_TAB_ID }) || EDITOR_VIEW_TAB_INDEX;
+  const { currentTabId = EDITOR_VIEW_TAB_INDEX } = useTabsContext() || {};
   const [activeAccordions, setActiveAccordions] = useState([]);
 
   if (!enabled) return children;

package/src/utils/hoc/withContext.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useMainContext, MainContext } from '@blaze-cms/admin-ui-utils';
 
-export const withContext = Component => props => {
-  const contexts = useMainContext(MainContext);
-  return <Component {...props} {...contexts} />;
-};
+export const withContext = Component =>
+  function (props) {
+    const contexts = useMainContext(MainContext);
+    return <Component {...props} {...contexts} />;
+  };