@griddo/ax 10.3.7 → 10.3.8

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

@@ -9,7 +9,7 @@ import { IconAction, FloatingPanel, Select, Tag } from "@ax/components";
 import AutoPanel from "./AutoPanel";
 import ItemList from "./ItemList";
 import ManualPanel from "./ManualPanel";
-import { useReference, ReferenceProvider, IReferenceState } from "./Context";
+import { useReference, ReferenceProvider, IReferenceState, ISource, IRefField } from "./Context";
 
 import * as S from "./style";
 
@@ -21,7 +21,7 @@ const ReferenceFieldWithProvider = (props: IReferenceFieldProps) => (
 
 const ReferenceField = (props: IReferenceFieldProps) => {
   const {
-    source,
+    sources,
     value,
     onChange,
     disabled,
@@ -44,9 +44,10 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const singleMode = selectionType && selectionType.length === 1;
   const isAuto = mode === "auto";
   const hasMaxItems = !!(value && value.fixed && maxItems && !isAuto && value.fixed.length >= maxItems);
+  const sourcesIDs = sources.map((source: ISource) => source.structuredData);
 
   const handleMode = (mode: string) => {
-    const { fixed, order, quantity, filter, allLanguages, preferenceLanguage, fullRelations = false } = state;
+    const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false } = state;
 
     const manualSources: string[] = state.selectedItems.reduce(
       (unique: string[], selItem: IStructuredDataContent) =>
@@ -54,34 +55,36 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       []
     );
 
-    const resetSource = mode === "manual" || source.length === 1 ? source : manualSources;
+    const resetSource = mode === "manual" || sourcesIDs.length === 1 ? sourcesIDs : manualSources;
+    const mappedSources: ISource[] = resetSource.map((source: string) => {
+      return { structuredData: source, filters: [], filterOperator: "OR", globalOperator: "AND" };
+    });
 
     const newValue =
       mode === "auto"
         ? {
             mode,
-            source,
+            sources: mappedSources,
             order,
             quantity,
-            filter,
             fullRelations,
             allLanguages,
             preferenceLanguage,
           }
         : {
             mode,
-            source,
+            sources,
             fixed,
             fullRelations,
           };
     onChange(newValue);
-    setModeAndSource(mode, resetSource);
-    handleValidation && handleValidation(value.fixed, validators);
+    setModeAndSource(mode, mappedSources);
+    resetValidation && resetValidation();
   };
 
   useEffect(() => {
     const getSourcesTitles = async () => {
-      const response = await structuredData.getDataTitles(source);
+      const response = await structuredData.getDataTitles(sourcesIDs);
       if (isReqOk(response?.status)) {
         return response.data;
       } else {
@@ -93,7 +96,11 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     let isMounted = true;
     if (isMounted) {
       getSourcesTitles().then((result: IDataSource[]) => {
-        let newState = { ...state, ...value, sourceTitles: result };
+        let sources = value && value.sources;
+        if (mode === "auto" && !sources && sourcesIDs[0]) {
+          sources = [{ structuredData: sourcesIDs[0], filters: [], filterOperator: "OR", globalOperator: "AND" }];
+        }
+        let newState = { ...state, ...value, sourceTitles: result, sources };
         if (value?.order) {
           const [order, orderDirection = "ASC"] = value.order.split("-");
           newState = { ...newState, order, orderDirection };
@@ -123,7 +130,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     toggleModal();
   };
 
-  const handleListDelete = (fixed: string[]) => {
+  const handleListDelete = (fixed: number[]) => {
     const newValue = {
       mode,
       fixed,
@@ -132,6 +139,14 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     resetValidation && resetValidation();
   };
 
+  const handleListMove = (fixed: number[]) => {
+    const newValue = {
+      mode,
+      fixed,
+    };
+    onChange(newValue);
+  };
+
   const icon = isAuto ? "edit" : "add";
 
   const defaultOrders: any = {
@@ -150,17 +165,19 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     <S.DataWrapper data-testid="auto-data-wrapper">
       <S.SourcesWrapper>
         {value &&
-          value.source &&
-          value.source.map((singleSource: string) => {
-            const srcFilters = state.filter.filter((f: any) => f.source === singleSource);
-            const srcTitle: any = state.sourceTitles.find((sour: any) => sour.id === singleSource);
-            const title = srcTitle ? srcTitle.title : "";
+          value.sources &&
+          value.sources.map((singleSource: ISource) => {
+            const srcTitle: { id: string; title: string } = state.sourceTitles.find(
+              (source: { id: string; title: string }) => source.id === singleSource.structuredData
+            );
             return (
-              <S.TypeContainer key={singleSource}>
-                <S.Title>{title}</S.Title>
-                {srcFilters.map((f: any) => (
-                  <Tag key={f.label} text={f.label} />
-                ))}
+              <S.TypeContainer key={singleSource.structuredData}>
+                <S.Title>{srcTitle?.title}</S.Title>
+                <div>
+                  {singleSource.filters?.map((f: any) => (
+                    <Tag key={f.label} text={f.category ? `${f.category}: ${f.label}` : f.label} color={f.color} />
+                  ))}
+                </div>
               </S.TypeContainer>
             );
           })}
@@ -196,7 +213,12 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const dataBlock = isAuto ? (
     <AutoData />
   ) : (
-    <ItemList items={value?.fixed ? value.fixed : []} handleListDelete={handleListDelete} site={value?.site} />
+    <ItemList
+      items={value?.fixed ? value.fixed : []}
+      handleListDelete={handleListDelete}
+      handleListMove={handleListMove}
+      site={value?.site}
+    />
   );
 
   return (
@@ -234,8 +256,8 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 };
 
 export interface IReferenceFieldProps {
-  source: string[];
-  value?: any;
+  sources: ISource[];
+  value?: IRefField;
   onChange: (value: any) => void;
   disabled?: boolean;
   site: ISite | null;

package/src/components/Fields/ReferenceField/style.tsx

@@ -32,6 +32,7 @@ const SourcesWrapper = styled.div`
 `;
 
 const TypeContainer = styled.div`
+  display: flex;
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 

package/src/components/Fields/Select/style.tsx

@@ -7,36 +7,36 @@ export const StyledSelect = styled(Select)<{
   alignRight: boolean | undefined;
   maxWidth?: number;
 }>`
-  ${(p) => p.theme.textStyle?.fieldContent};
-  color: ${(p) => p.theme.color?.textHighEmphasis};
-  margin-bottom: ${(p) => p.theme.spacing?.xxs};
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
 
   .react-select__control {
-    background-color: ${(p) => p.theme.color?.interactiveBackground};
+    background-color: ${(p) => p.theme.color.interactiveBackground};
     box-sizing: border-box;
     border-radius: 4px;
-    border-color: ${(p) => (p.error ? p.theme.color?.error : p.theme.color?.uiLine)};
+    border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.uiLine)};
     box-shadow: none;
-    height: ${(p) => p.theme.spacing?.l};
-    max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
+    height: ${(p) => p.theme.spacing.l};
+    max-width: calc(${(p) => p.theme.spacing.xl} * 6);
     cursor: pointer;
 
     :hover {
-      border-color: ${(p) => (p.error ? p.theme.color?.error : p.theme.color?.uiLine)};
+      border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.uiLine)};
     }
     .react-select__placeholder {
-      color: ${(p) => p.theme.color?.textLowEmphasis};
+      color: ${(p) => p.theme.color.textLowEmphasis};
     }
     .react-select__indicator-separator {
       display: none;
     }
     .react-select__indicator {
-      color: ${(p) => (p.isDisabled ? p.theme.color?.interactiveDisabled : p.theme.color?.interactive01)};
+      color: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
     }
   }
 
   .react-select__control--is-focused {
-    border-color: ${(p) => (p.error ? p.theme.color?.error : p.theme.color?.interactive01)} !important;
+    border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)} !important;
   }
 
   .react-select__control--menu-is-open {
@@ -46,50 +46,50 @@ export const StyledSelect = styled(Select)<{
   }
 
   .react-select__control--is-disabled {
-    border-color: ${(p) => p.theme.color?.interactiveDisabled};
+    border-color: ${(p) => p.theme.color.interactiveDisabled};
   }
 
   .react-select__menu {
     box-shadow: none;
     border-radius: 4px;
-    min-width: calc(${(p) => p.theme.spacing?.xl} * 2);
-    max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
+    min-width: calc(${(p) => p.theme.spacing.xl} * 2);
+    max-width: calc(${(p) => p.theme.spacing.xl} * 6);
     margin-top: 0;
     z-index: 99;
     .react-select__menu-list {
       border: 1px solid ${(p) => p.theme.color.uiLine};
       border-radius: 4px;
-      max-height: calc(${(p) => p.theme.spacing?.l} * 3);
+      max-height: calc(${(p) => p.theme.spacing.l} * 3);
       overflow: auto;
       padding: 0;
       .react-select__option {
-        background-color: ${(p) => p.theme.color?.interactiveBackground};
-        min-height: ${(p) => p.theme.spacing?.l};
+        background-color: ${(p) => p.theme.color.interactiveBackground};
+        min-height: ${(p) => p.theme.spacing.l};
         padding: ${(p) => `13px ${p.theme.spacing.s} 12px ${p.theme.spacing.s}`};
         &:first-child {
           ${(p) =>
             p.hasEmptyOption &&
             css`
               font-style: italic;
-              color: ${(p) => p.theme.color?.textLowEmphasis};
-              background-color: ${(p) => p.theme.color?.uiLineInverse};
+              color: ${(p) => p.theme.color.textLowEmphasis};
+              background-color: ${(p) => p.theme.color.uiLineInverse};
             `}
         }
         :hover {
           cursor: pointer;
-          background-color: ${(p) => p.theme.color?.overlayHoverPrimary};
+          background-color: ${(p) => p.theme.color.overlayHoverPrimary};
         }
         :focus {
-          background-color: ${(p) => p.theme.color?.overlayFocusPrimary};
-          border: 0.5px solid ${(p) => p.theme.color?.interactive02};
+          background-color: ${(p) => p.theme.color.overlayFocusPrimary};
+          border: 0.5px solid ${(p) => p.theme.color.interactive02};
         }
         :active {
-          background-color: ${(p) => p.theme.color?.overlayPressedPrimary};
+          background-color: ${(p) => p.theme.color.overlayPressedPrimary};
         }
       }
       .react-select__option--is-selected {
-        color: ${(p) => p.theme.color?.textHighEmphasis};
-        background-color: ${(p) => p.theme.color?.overlayPressedPrimary};
+        color: ${(p) => p.theme.color.textHighEmphasis};
+        background-color: ${(p) => p.theme.color.overlayPressedPrimary};
       }
     }
   }

package/src/components/Tag/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-  const { type, text, color, icon, onDeleteAction } = props;
+  const { type, text, color, icon, rounded = true, onDeleteAction } = props;
 
   const handleClick = () => {
     if (onDeleteAction) {
@@ -39,7 +39,7 @@ const Tag = (props: ITagProps): JSX.Element => {
       );
     default:
       return (
-        <S.TagFixed color={color} data-testid="tag-fixed">
+        <S.TagFixed color={color} rounded={rounded} data-testid="tag-fixed">
           <S.TagText>
             <S.Title data-testid="tag-fixed-title">{text}</S.Title>
             {deleteIcon}
@@ -53,6 +53,7 @@ export interface ITagProps {
   type?: "status" | "fixed" | "interactive" | "square" | undefined;
   text: string;
   color?: string;
+  rounded?: boolean;
   icon?: string;
   onDeleteAction?: () => void;
 }

package/src/components/Tag/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const TagStatus = styled.div`
+const TagStatus = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   background-color: #ffffff;
   border: 1px solid ${(p) => p.theme.color.uiLine};
@@ -12,7 +12,7 @@ export const TagStatus = styled.div`
   text-transform: capitalize;
 `;
 
-export const TagSquare = styled.div<{ color: string | undefined }>`
+const TagSquare = styled.div<{ color?: string; }>`
   ${(p) => p.theme.textStyle.uiXS};
   display: flex;
   background-color: ${(p) => (p.color ? p.color : p.theme.colors.uiBackground01)};
@@ -24,7 +24,7 @@ export const TagSquare = styled.div<{ color: string | undefined }>`
   text-transform: capitalize;
 `;
 
-export const Bullet = styled.span<{ color: string | undefined }>`
+const Bullet = styled.span<{ color?: string }>`
   background-color: ${(p) => (p.color ? p.color : `#4096D6`)};
   display: inline-block;
   width: 8px;
@@ -33,10 +33,10 @@ export const Bullet = styled.span<{ color: string | undefined }>`
   margin-right: 4px;
 `;
 
-export const TagFixed = styled.div<{ color: string | undefined }>`
+const TagFixed = styled.div<{ color?: string; rounded: boolean; }>`
   ${(p) => p.theme.textStyle.uiS};
   background-color: ${(p) => (p.color ? p.color : p.theme.color.interactive02)};
-  border-radius: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.rounded ? p.theme.spacing.s : "0"};
   box-sizing: border-box;
   color: ${(p) => p.theme.color.textMediumEmphasis};
   display: inline-block;
@@ -45,9 +45,9 @@ export const TagFixed = styled.div<{ color: string | undefined }>`
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const Title = styled.div``;
+const Title = styled.div``;
 
-export const IconWrapper = styled.div`
+const IconWrapper = styled.div`
   height: 16px;
   margin-left: ${(p) => p.theme.spacing.xxs};
   cursor: pointer;
@@ -58,7 +58,7 @@ export const IconWrapper = styled.div`
   }
 `;
 
-export const IconTag = styled.div`
+const IconTag = styled.div`
   height: 16px;
   margin-right: ${(p) => p.theme.spacing.xs};
   svg {
@@ -68,7 +68,9 @@ export const IconTag = styled.div`
   }
 `;
 
-export const TagText = styled.div`
+const TagText = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export { TagStatus, TagSquare, Bullet, TagFixed, Title, IconWrapper, IconTag, TagText };

package/src/hooks/content.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useLayoutEffect } from "react";
 import { IEmptyStateProps } from "@ax/types";
 import { useWindowSize } from "./window";
 
-const useCategoryColors = (): any => {
+const useCategoryColors = (categories?: string[]): any => {
   const fixedColors = [
     "#FFE695",
     "#C1F0FF",
@@ -19,6 +19,11 @@ const useCategoryColors = (): any => {
   const colors = [...fixedColors];
   const [categoryColors, setCategoryColors] = useState({});
 
+  useEffect(() => {
+    categories && addCategoryColors(categories);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [categories]);
+
   const getColor = () => {
     return "hsl(" + 360 * Math.random() + "," + (25 + 70 * Math.random()) + "%," + (85 + 10 * Math.random()) + "%)";
   };