@griddo/ax 11.7.1 → 11.7.2-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.7.1",
+  "version": "11.7.2-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -223,5 +223,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38d318f83977dd42f6ad1f304d22601b0ecc2ea1"
+  "gitHead": "4ca323e472df8391683ce2e8200b090b9c35855d"
 }

package/src/components/Button/style.tsx

@@ -55,6 +55,7 @@ const Button = styled.button<{ iconFill: boolean }>`
   }
   svg {
     position: absolute;
+    left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: ${(p) => p.theme.spacing.s};

package/src/components/Fields/FormContainer/FormModal/index.tsx

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { FormContent, GetFormsParams, IModal, IQueryValue, IRootState } from "@ax/types";
 import {
   Button,
+  CategoryFilter,
   EmptyState,
   ErrorToast,
   FilterTagsBar,
@@ -19,21 +20,7 @@ import { formsActions } from "@ax/containers/Forms";
 import * as S from "./style";
 
 const FormModal = (props: IFormModal): JSX.Element => {
-  const {
-    isOpen,
-    toggleModal,
-    site,
-    forms,
-    categories,
-    getForms,
-    selectedForm,
-    setSelectedForm,
-    selectForm,
-    filters,
-    filterValues,
-    resetFilterQuery,
-    filterItems,
-  } = props;
+  const { isOpen, toggleModal, site, forms, categories, getForms, selectedForm, setSelectedForm, selectForm } = props;
 
   const tabs: string[] = [];
   if (site) {
@@ -49,6 +36,9 @@ const FormModal = (props: IFormModal): JSX.Element => {
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const initialState = formCategories.reduce((a, v) => ({ ...a, [v.value]: [{ value: "all", label: "All" }] }), {});
+  const [filterValues, setFilterValues] = useState<Record<string, IQueryValue[]>>(initialState);
+
   const siteID = site && selectedTab !== "Global" ? site : null;
   const isFiltering = searchQuery.length > 0 || Object.values(filterValues).length;
 
@@ -98,6 +88,33 @@ const FormModal = (props: IFormModal): JSX.Element => {
     }
   };
 
+  const filterItems = (filterPointer: string, filtersSelected: IQueryValue[]) =>
+    setFilterValues((state) => ({ ...state, [filterPointer]: filtersSelected }));
+
+  const resetFilterQuery = () => setFilterValues(initialState);
+
+  const filters = formCategories ? (
+    <S.Filters>
+      {formCategories.map((formCategory, i: number) => (
+        <S.FilterWrapper key={formCategory.value}>
+          <CategoryFilter
+            filterItems={filterItems}
+            value={filterValues[formCategory.value]}
+            formCategory={formCategory}
+            siteID={siteID}
+            pointer={formCategory.value}
+            autoWidth={true}
+            menuPosition={i === formCategories.length - 1 && !isGlobal ? "right" : "left"}
+            hideValues={categories}
+            hideOnLoading={true}
+          />
+        </S.FilterWrapper>
+      ))}
+    </S.Filters>
+  ) : (
+    <></>
+  );
+
   const emptySearchStateProps = {
     icon: "search",
     title: "Oh! No Results Found",
@@ -184,10 +201,6 @@ interface IFormModal extends IModal {
   setSelectedForm: Dispatch<SetStateAction<FormContent | null>>;
   selectForm(): void;
   categories?: string[];
-  filters: JSX.Element;
-  filterValues: Record<string, IQueryValue[]>;
-  resetFilterQuery(): void;
-  filterItems(filterPointer: string, filtersSelected: IQueryValue[]): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/Fields/FormContainer/index.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { useModal, usePermission } from "@ax/hooks";
-import { getSchemaFormCategories, trimText } from "@ax/helpers";
-import { ActionMenu, CategoryFilter, HiddenField, Icon } from "@ax/components";
-import { FormContent, IQueryValue, ISite } from "@ax/types";
+import { trimText } from "@ax/helpers";
+import { ActionMenu, HiddenField, Icon } from "@ax/components";
+import { FormContent, ISite } from "@ax/types";
 
 import FormModal from "./FormModal";
 
@@ -14,16 +14,9 @@ const FormContainer = (props: IFormContainerProps): JSX.Element => {
   const { title: formTitle } = value || { title: "" };
 
   const isEmpty = !value;
-  const isGlobal = !site;
-  const schemaFormCategories = getSchemaFormCategories();
 
   const { isOpen, toggleModal } = useModal();
   const [selectedForm, setSelectedForm] = useState<FormContent | null>(value || null);
-  const initialState = schemaFormCategories.reduce(
-    (a, v) => ({ ...a, [v.value]: [{ value: "all", label: "All" }] }),
-    {}
-  );
-  const [filterValues, setFilterValues] = useState<Record<string, IQueryValue[]>>(initialState);
 
   const addFormPermission = site ? "forms.addFormsToPage" : "global.forms.addFormsToPage";
   const overwriteFormPermission = site ? "forms.overwriteDataForms" : "global.forms.overwriteDataForms";
@@ -53,31 +46,6 @@ const FormContainer = (props: IFormContainerProps): JSX.Element => {
       ]
     : [];
 
-  const filterItems = (filterPointer: string, filtersSelected: IQueryValue[]) =>
-    setFilterValues((state) => ({ ...state, [filterPointer]: filtersSelected }));
-
-  const resetFilterQuery = () => setFilterValues(initialState);
-
-  const filters = (
-    <S.Filters>
-      {schemaFormCategories.map((formCategory, i: number) => (
-        <S.FilterWrapper key={formCategory.value}>
-          <CategoryFilter
-            filterItems={filterItems}
-            value={filterValues[formCategory.value]}
-            formCategory={formCategory}
-            siteID={site?.id || null}
-            pointer={formCategory.value}
-            autoWidth={true}
-            menuPosition={i === schemaFormCategories.length - 1 && !isGlobal ? "right" : "left"}
-            hideValues={formCategories}
-            hideOnLoading={true}
-          />
-        </S.FilterWrapper>
-      ))}
-    </S.Filters>
-  );
-
   return (
     <>
       {isEmpty ? (
@@ -109,10 +77,6 @@ const FormContainer = (props: IFormContainerProps): JSX.Element => {
           setSelectedForm={setSelectedForm}
           selectForm={handleSelectForm}
           categories={formCategories}
-          filters={filters}
-          filterValues={filterValues}
-          resetFilterQuery={resetFilterQuery}
-          filterItems={filterItems}
         />
       )}
     </>

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -72,7 +72,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
       setOptions(filters);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [siteID]);
 
   useEffect(() => {
     const parsedValue = Array.isArray(value) ? value.map((val) => val.value) : [];

package/src/modules/FileDrive/style.tsx

@@ -3,7 +3,6 @@ import { FieldsBehavior } from "@ax/components";
 
 const Wrapper = styled.div`
   display: flex;
-  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   height: 100%;
 `;
 

package/src/modules/MediaGallery/style.tsx

@@ -3,7 +3,6 @@ import { FieldsBehavior } from "@ax/components";
 
 const Wrapper = styled.div`
   display: flex;
-  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   height: 100%;
 `;
 

package/src/modules/Settings/Globals/NavigationModules/style.tsx

@@ -2,7 +2,6 @@ import styled from "styled-components";
 
 const Wrapper = styled.div`
   border-top: 1px solid ${(p) => p.theme.color.uiLine};
-  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   margin: ${(p) => p.theme.spacing.m} 0;
   padding: ${(p) => p.theme.spacing.m} 0;
 `;