@griddo/ax 10.3.23 → 10.3.25

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

@@ -47,11 +47,13 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
       label: "replace",
       icon: "change",
       action: replaceFile,
+      disabled,
     },
     {
       label: "delete",
       icon: "delete",
       action: removeFile,
+      disabled,
     },
   ];
 
@@ -82,7 +84,7 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
       )}
       {!value && (
         <>
-          <S.Field onClick={handleClick} data-testid="field-icon-wrapper">
+          <S.Field onClick={handleClick} data-testid="field-icon-wrapper" disabled={disabled}>
             <S.IconWrapper>
               <Icon name="File" size="24" />
             </S.IconWrapper>

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

@@ -2,20 +2,25 @@ import React from "react";
 import styled from "styled-components";
 import ActionMenu from "@ax/components/ActionMenu";
 
-const Field = styled.div`
+const Field = styled.div<{ disabled?: boolean }>`
   display: flex;
   width: 100%;
   height: ${(p) => p.theme.spacing.l};
-  background-color: ${(p) => p.theme.color.interactiveBackground};
+  background-color: ${(p) => (p.disabled ? p.theme.color.uiBackground03 : p.theme.color.interactiveBackground)};
   box-shadow: ${(p) => p.theme.shadow.shadowS};
   border-radius: ${(p) => p.theme.radii.s};
   justify-content: center;
   align-items: center;
-  cursor: pointer;
+  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   margin-top: ${(p) => p.theme.spacing.s};
   :hover {
-    background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
+    background-color: ${(p) => (p.disabled ? p.theme.color.uiBackground03 : p.theme.colors.overlayHoverPrimary)};
+  }
+  svg {
+    path {
+      fill: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
+    }
   }
 `;
 

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

@@ -3,7 +3,7 @@ import React, { memo, useEffect, useRef } from "react";
 import * as S from "./style";
 
 const SliderField = (props: ITextFieldProps): JSX.Element => {
-  const { value, min = 0, max = 100, defaultValue = min, step, prefix, suffix, onChange } = props;
+  const { value, min = 0, max = 100, defaultValue = min, step, prefix, suffix, onChange, disabled } = props;
   const bubbleRef = useRef<HTMLOutputElement>(null);
 
   const val = typeof value === "undefined" || value === null ? defaultValue : value;
@@ -32,7 +32,7 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
 
   return (
     <S.Slider data-testid="slider-component">
-      <S.Bubble data-testid="bubble-component" ref={bubbleRef}>
+      <S.Bubble data-testid="bubble-component" ref={bubbleRef} disabled={disabled}>
         {prefix && `${prefix} `}
         {val}
         {suffix && ` ${suffix}`}
@@ -44,6 +44,7 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
         max={max}
         step={step}
         onChange={handleChange}
+        disabled={disabled}
       />
     </S.Slider>
   );
@@ -60,6 +61,7 @@ export interface ITextFieldProps {
   suffix?: string;
   helptext?: string;
   onChange: (value: number) => void;
+  disabled?: boolean;
 }
 
 export default memo(SliderField);

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

@@ -135,23 +135,72 @@ const Input = styled.input.attrs({ type: "range" })`
   &:focus::-ms-fill-upper {
     background: ${(p) => p.theme.color.interactive01};
   }
+
+  &:disabled {
+    &::-webkit-slider-runnable-track {
+      pointer: default;
+      background: ${(p) => p.theme.color.interactiveDisabled};
+    }
+    &::-moz-range-track {
+      pointer: default;
+      background: ${(p) => p.theme.color.interactiveDisabled};
+    }
+    &::-ms-fill-lower {
+      background: ${(p) => p.theme.color.interactiveDisabled};
+    }
+
+    &::-ms-fill-upper {
+      background: ${(p) => p.theme.color.interactiveDisabled};
+    }
+
+    &::-webkit-slider-thumb {
+      pointer: default;
+      border-color: ${(p) => p.theme.color.interactiveDisabled};
+      &:hover {
+        box-shadow: none;
+      }
+      &:active {
+        background: ${(p) => p.theme.color.interactiveBackground};
+      }
+    }
+    &::-moz-range-thumb {
+      pointer: default;
+      border-color: ${(p) => p.theme.color.interactiveDisabled};
+      &:hover {
+        box-shadow: none;
+      }
+      &:active {
+        background: ${(p) => p.theme.color.interactiveBackground};
+      }
+    }
+    &::-ms-thumb {
+      pointer: default;
+      border-color: ${(p) => p.theme.color.interactiveDisabled};
+      &:hover {
+        box-shadow: none;
+      }
+      &:active {
+        background: ${(p) => p.theme.color.interactiveBackground};
+      }
+    }
+  }
 `;
 
-const Bubble = styled.output`
+const Bubble = styled.output<{ disabled?: boolean }>`
   position: absolute;
   top: 0;
-  background-color: ${(p) => p.theme.color.interactive01};
+  background-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
   color: ${(p) => p.theme.color.textHighEmphasisInverse};
   border-radius: ${(p) => p.theme.radii.s};
   padding: ${(p) => p.theme.spacing.xxs};
   transform: translateX(-50%);
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     transform: translateX(-50%);
     border-style: solid;
-    border-color: ${(p) => p.theme.color.interactive01} transparent;
+    border-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)} transparent;
     border-width: 3px 3px 0 3px;
     bottom: -3px;
     left: 50%;

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

@@ -16,17 +16,18 @@ const FieldWrapper = styled.div<{ error?: boolean; disabled?: boolean }>`
   &:focus-within {
     border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)};
   }
+
+  svg {
+    path {
+      fill: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
+    }
+  }
 `;
 
 const IconWrapper = styled.div`
   width: ${(p) => p.theme.spacing.m};
   height: ${(p) => p.theme.spacing.m};
   margin-left: auto;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
 `;
 
 const SelectWrapper = styled.div`

package/src/components/FileGallery/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, memo, useRef, useCallback, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 
-import { IFile, IFilesFolder, IFolder, IFolderTree, IGetFolderParams, IRootState, ISite } from "@ax/types";
+import { IFile, IFilesFolder, IFolder, IFolderTree, IGetFolderParams, IQueryValue, IRootState, ISite } from "@ax/types";
 import {
   Loader,
   Tabs,
@@ -12,6 +12,8 @@ import {
   Tooltip,
   Icon,
   BackFolder,
+  SearchTagsBar,
+  FilterTagsBar,
 } from "@ax/components";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 import { usePermission, useResizable } from "@ax/hooks";
@@ -63,9 +65,8 @@ const FileGallery = (props: IProps): JSX.Element => {
 
   const [ref] = useResizable();
 
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState<string>("");
   const isSearching = searchQuery.length > 0;
 
@@ -104,11 +105,11 @@ const FileGallery = (props: IProps): JSX.Element => {
       folderID: currentFolderID,
       search: searchQuery,
       loading: false,
-      query: currentFilterQuery,
+      query: filterQuery,
     };
 
     return params;
-  }, [currentFolderID, searchQuery, selectedTab, currentFilterQuery]);
+  }, [currentFolderID, searchQuery, selectedTab, filterQuery]);
 
   useLayoutEffect(() => {
     return () => {
@@ -168,20 +169,15 @@ const FileGallery = (props: IProps): JSX.Element => {
     await getFolderContent(params);
   };
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+  const sortItems = async (orderPointer: IQueryValue[], isAscending: boolean) => {
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), isAscending);
     setSortedListStatus(sortedState);
 
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
-  };
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) =>
+    setFiltersSelection(filterPointer, filtersSelected);
 
   const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
 
@@ -219,7 +215,12 @@ const FileGallery = (props: IProps): JSX.Element => {
           </S.Header>
         )}
         <S.Search>
-          <SearchField onChange={setSearchQuery} placeholder="Type file’s name, title, or #tag" autoFocus={false} />
+          <SearchField
+            onChange={setSearchQuery}
+            value={searchQuery}
+            placeholder="Type file’s name, title, or #tag"
+            autoFocus={false}
+          />
         </S.Search>
         <S.GalleryWrapper ref={galleryRef}>
           {isGlobalTab && isSiteView && (
@@ -237,6 +238,15 @@ const FileGallery = (props: IProps): JSX.Element => {
             </S.LoadingWrapper>
           ) : (
             <>
+              <S.SearchTags>
+                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <FilterTagsBar
+                  filters={filterValues}
+                  setFilters={setFiltersSelection}
+                  labels={{ filterType: "Type" }}
+                  resetFilters={resetFilterQuery}
+                />
+              </S.SearchTags>
               {!isRoot && !isSearching && <Breadcrumb breadcrumb={breadcrumb} onClick={updateCurrentFolder} />}
               {(hasFolders || (!isRoot && !isSearching)) && (
                 <S.SectionWrapper>

package/src/components/FileGallery/style.tsx

@@ -70,6 +70,7 @@ const GalleryWrapper = styled.div`
   position: relative;
   background-color: ${(p) => p.theme.color.uiBackground01};
   overflow: auto;
+  padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
 `;
 
 const Grid = styled.div`
@@ -113,7 +114,7 @@ const SectionWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: ${(p) => p.theme.spacing.m};
+  padding-top: ${(p) => p.theme.spacing.m};
 `;
 
 const SectionHeader = styled.div`
@@ -165,6 +166,15 @@ const ResizeHandle = styled.div`
   }
 `;
 
+const SearchTags = styled.div`
+  & > div:nth-child(1){
+    margin-top: ${p => p.theme.spacing.m};
+  }
+  & > div:nth-child(2){
+    margin-top: ${p => p.theme.spacing.xs};
+  }
+`;
+
 export {
   Wrapper,
   FolderPanel,
@@ -186,4 +196,5 @@ export {
   FoldersWrapper,
   FoldersIconWrapper,
   ResizeHandle,
+  SearchTags,
 };

package/src/components/FilterTagsBar/index.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { IQueryValue } from "@ax/types";
+import Button from "../Button";
+
+import * as S from "./style";
+
+const FilterTagsBar = (props: IFilterTagsBarProps): JSX.Element => {
+  const { filters, labels, setFilters, resetFilters } = props;
+
+  const tags: string[] = [];
+  filters &&
+    Object.keys(filters)
+      .filter((key: string) => Object.keys(labels).includes(key))
+      .forEach((key: string) => {
+        Array.isArray(filters[key]) &&
+          filters[key].forEach((filter: IQueryValue) => {
+            if (filter && filter.value !== "all") {
+              tags.push(`${labels[key]}: ${filter.label}`);
+            }
+          });
+      });
+
+  const deleteTag = (tagText: string) => {
+    const values = tagText.split(":");
+    const key = Object.keys(labels).find((key) => labels[key] === values[0]);
+    if (key) {
+      const newFilters: IQueryValue[] = filters[key].filter((filter: IQueryValue) => filter.label !== values[1].trim());
+      setFilters(key, newFilters);
+    }
+  };
+
+  const handleDeleteAll = () => resetFilters();
+
+  return tags.length > 0 ? (
+    <S.Wrapper>
+      <S.Text>Selected filters</S.Text>
+      <S.TagList>
+        {tags.map((tag: string, index: number) => {
+          const handleDeleteTag = () => deleteTag(tag);
+          return <S.StyledTag key={index} text={tag} color="#FFFFFF" onDeleteAction={handleDeleteTag} />;
+        })}
+      </S.TagList>
+      <S.ButtonWrapper>
+        <Button type="button" buttonStyle="minimal" icon="close" onClick={handleDeleteAll}>
+          Clear All
+        </Button>
+      </S.ButtonWrapper>
+    </S.Wrapper>
+  ) : (
+    <></>
+  );
+};
+
+export interface IFilterTagsBarProps {
+  filters: Record<string, any>;
+  labels: Record<string, string | undefined>;
+  setFilters: (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => void;
+  resetFilters: () => void;
+}
+
+export default FilterTagsBar;

package/src/components/FilterTagsBar/style.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import Tag from "../Tag";
+
+const Wrapper = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  width: 100%;
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+  align-items: center;
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-right: ${(p) => p.theme.spacing.xs};
+  flex-shrink: 0;
+`;
+
+const StyledTag = styled(Tag)`
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const TagList = styled.div``;
+
+const ButtonWrapper = styled.div`
+  margin-left: auto;
+  flex-shrink: 0;
+`;
+
+export { Wrapper, TagList, Text, StyledTag, ButtonWrapper }

package/src/components/FloatingMenu/index.tsx

@@ -22,10 +22,14 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 
   useEffect(() => {
     if (isOpen && menuOptions?.current) {
-      const bounding = menuOptions.current.getBoundingClientRect();
+      const bounding = menuOptions.current.children[0].getBoundingClientRect();
+      const boundingChild = menuOptions.current.children[0] && menuOptions.current.children[0].getBoundingClientRect();
       if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
         menuOptions.current.scrollIntoView({ block: "end", behavior: "smooth" });
       }
+      if (boundingChild && boundingChild.right > window.innerWidth) {
+        menuOptions.current.style.right = "130px";
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);

package/src/components/Gallery/GalleryFilters/Orientation/index.tsx

@@ -1,22 +1,30 @@
 import React, { useState } from "react";
 
 import { FloatingMenu, Icon, ListTitle, ListItem } from "@ax/components";
-
 import { areEquals } from "@ax/helpers";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const Orientation = ({ filterItems }: IOrientationProps): JSX.Element => {
+  const selectAllOption = "all";
   const initialState = ["all"];
+  const pointer = "orientation";
   const [selectedValue, setSelectedValue] = useState(initialState);
 
-  const setQuery = (selection: any) => {
+  const filters: Record<string, string> = {
+    all: "All",
+    landscape: "Horizontal",
+    portrait: "Vertical",
+    square: "Square",
+  };
+
+  const setQuery = (selection: string) => {
     if (!selection.length) {
-      selection = initialState;
+      selection = selectAllOption;
     }
     setSelectedValue([selection]);
-    const pointer = "orientation";
-    filterItems(pointer, selection);
+    filterItems(pointer, [{ value: selection, label: filters[selection] }]);
   };
 
   const isActive = !areEquals(selectedValue, initialState);
@@ -53,7 +61,7 @@ const Orientation = ({ filterItems }: IOrientationProps): JSX.Element => {
 };
 
 export interface IOrientationProps {
-  filterItems(pointer: string, filter: string): void;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
 }
 
 export default Orientation;

package/src/components/Gallery/GalleryFilters/SortBy/index.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const SortBy = ({ sortItems, sortedState }: ISortByProps): JSX.Element => {
   const { isAscending, sortedByName, sortedByDate, sortedBySize } = sortedState;
-  const sortBy = (pointer: string, isAscending: boolean) => sortItems(pointer, isAscending);
+
+  const sortBy = (pointer: string, isAscending: boolean) =>
+    sortItems([{ value: pointer, label: pointer }], isAscending);
+
   const sortAscendingName = () => sortBy("name", true);
   const sortDescendingName = () => sortBy("name", false);
   const sortAscendingDate = () => sortBy("date", true);
@@ -33,21 +37,33 @@ const SortBy = ({ sortItems, sortedState }: ISortByProps): JSX.Element => {
   return (
     <FloatingMenu Button={Header} position="center">
       <ListTitle>Name Sorting</ListTitle>
-      <ListItem isSelected={sortedByName && isAscending} onClick={sortAscendingName}>Ascendent</ListItem>
-      <ListItem isSelected={sortedByName && !isAscending} onClick={sortDescendingName}>Descendent</ListItem>
+      <ListItem isSelected={sortedByName && isAscending} onClick={sortAscendingName}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedByName && !isAscending} onClick={sortDescendingName}>
+        Descendent
+      </ListItem>
       <ListTitle>Date sorting</ListTitle>
-      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortDescendingDate}>Newest first</ListItem>
-      <ListItem isSelected={sortedByDate && isAscending} onClick={sortAscendingDate}>Oldest first</ListItem>
+      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortDescendingDate}>
+        Newest first
+      </ListItem>
+      <ListItem isSelected={sortedByDate && isAscending} onClick={sortAscendingDate}>
+        Oldest first
+      </ListItem>
       <ListTitle>Size sorting</ListTitle>
-      <ListItem isSelected={sortedBySize && isAscending} onClick={sortAscendingSize}>Ascendent</ListItem>
-      <ListItem isSelected={sortedBySize && !isAscending} onClick={sortDescendingSize}>Descendent</ListItem>
+      <ListItem isSelected={sortedBySize && isAscending} onClick={sortAscendingSize}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedBySize && !isAscending} onClick={sortDescendingSize}>
+        Descendent
+      </ListItem>
     </FloatingMenu>
   );
 };
 
 export interface ISortByProps {
   sortedState: ISortedListStatus;
-  sortItems(orderPointer: string, isAscendent: boolean): void;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): void;
 }
 
 interface ISortedListStatus {

package/src/components/Gallery/GalleryFilters/Type/index.tsx

@@ -1,22 +1,29 @@
 import React, { useState } from "react";
 
 import { FloatingMenu, Icon, ListTitle, ListItem } from "@ax/components";
-
 import { areEquals } from "@ax/helpers";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const Type = ({ filterItems }: ITypeProps): JSX.Element => {
+  const selectAllOption = "all";
   const initialState = ["all"];
+  const pointer = "format";
   const [selectedValue, setSelectedValue] = useState(initialState);
 
-  const setQuery = (selection: any) => {
+  const filters: Record<string, string> = {
+    all: "All",
+    bitmap: "Image",
+    vectorial: "Icons",
+  };
+
+  const setQuery = (selection: string) => {
     if (!selection.length) {
-      selection = initialState;
+      selection = selectAllOption;
     }
     setSelectedValue([selection]);
-    const pointer = "format";
-    filterItems(pointer, selection);
+    filterItems(pointer, [{ value: selection, label: filters[selection] }]);
   };
 
   const isActive = !areEquals(selectedValue, initialState);
@@ -36,15 +43,21 @@ const Type = ({ filterItems }: ITypeProps): JSX.Element => {
   return (
     <FloatingMenu Button={Header} position="center" closeOnSelect={true}>
       <ListTitle>Filter by type</ListTitle>
-      <ListItem isSelected={selectedValue.includes("all")} onClick={() => setQuery("all")}>All</ListItem>
-      <ListItem isSelected={selectedValue.includes("bitmap")} onClick={() => setQuery("bitmap")}>Image</ListItem>
-      <ListItem isSelected={selectedValue.includes("vectorial")} onClick={() => setQuery("vectorial")}>Icons</ListItem>
+      <ListItem isSelected={selectedValue.includes("all")} onClick={() => setQuery("all")}>
+        All
+      </ListItem>
+      <ListItem isSelected={selectedValue.includes("bitmap")} onClick={() => setQuery("bitmap")}>
+        Image
+      </ListItem>
+      <ListItem isSelected={selectedValue.includes("vectorial")} onClick={() => setQuery("vectorial")}>
+        Icons
+      </ListItem>
     </FloatingMenu>
   );
 };
 
 export interface ITypeProps {
-  filterItems(pointer: string, filter: string): void;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
 }
 
 export default Type;

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/style.tsx

@@ -44,9 +44,10 @@ export const DragSubtitle = styled.div`
 
 export const DragIcon = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.s};
+  display: flex;
+  justify-content: center;
 `;
 
-
 export const UploadingStatus = styled.div`
   transition: opacity 0.1s;
 `;