@griddo/ax 10.2.25 → 10.3.0

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

@@ -1,15 +1,14 @@
 import React from "react";
 
 import { useModal } from "@ax/hooks";
+import { ISite } from "@ax/types";
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
-import { Icon, Modal, TextField } from "@ax/components";
-import FileDragAndDrop from "./FileDragAndDrop";
-import { MAX_SIZE } from "./store";
+import { Icon, Modal, TextField, FileGallery } from "@ax/components";
 
 import * as S from "./style";
 
 const FileField = (props: IFileFieldProps): JSX.Element => {
-  const { disabled, value, onChange } = props;
+  const { disabled, value, site, onChange } = props;
 
   const { isOpen, toggleModal } = useModal(false);
 
@@ -88,7 +87,7 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
               <Icon name="File" size="24" />
             </S.IconWrapper>
           </S.Field>
-          <S.HelpText>Valid formats: {validFormats.join(", ")}. Max. size: {MAX_SIZE}MB</S.HelpText>
+          <S.HelpText>Valid formats: {validFormats.join(", ")}. Max. size: 50MB</S.HelpText>
         </>
       )}
       {value && (
@@ -100,8 +99,8 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
         </S.Component>
       )}
-      <Modal isOpen={isOpen} hide={toggleModal} size="M" title="Select file">
-        {isOpen && <FileDragAndDrop validFormats={validFormats} addFile={addFile} />}
+      <Modal isOpen={isOpen} hide={toggleModal} size="XL" title="Select file">
+        {isOpen && <FileGallery validFormats={validFormats} addFile={addFile} toggleModal={toggleModal} site={site} />}
       </Modal>
     </>
   );
@@ -111,6 +110,7 @@ export interface IFileFieldProps {
   value: any;
   onChange: (value: any) => void;
   disabled?: boolean;
+  site: ISite | null;
 }
 
 export default FileField;

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

@@ -16,6 +16,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
     className,
     onChange,
     onBlur,
+    onKeyDown,
     inputType = "text",
     disabled,
     iconPosition = "out",
@@ -89,6 +90,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
         name={name}
         onChange={handleOnChange}
         onBlur={handleOnBlur}
+        onKeyDown={onKeyDown}
         placeholder={placeholder}
         autoComplete={autoComplete}
         error={error}
@@ -128,6 +130,7 @@ interface ITextFieldProps {
   onClickIcon?: () => void;
   className?: string;
   onBlur?: (value: string) => void;
+  onKeyDown?: () => void;
   disabled?: boolean;
   iconPosition?: string;
   prefix?: string;

package/src/components/FileGallery/FolderItem/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { IFolder } from "@ax/types";
+import { Icon, Tooltip } from "@ax/components";
+import { trimText } from "@ax/helpers";
+
+import * as S from "./style";
+
+const FolderItem = (props: IProps) => {
+  const { folder, onClick } = props;
+  const { id, folderName } = folder;
+
+  const handleClick = () => onClick(id);
+
+  const FolderTitle = () =>
+    folderName.length > 15 ? (
+      <Tooltip content={folderName}>
+        <S.Title>{trimText(folderName, 15)}</S.Title>
+      </Tooltip>
+    ) : (
+      <S.Title>{folderName}</S.Title>
+    );
+
+  return (
+      <S.Wrapper onClick={handleClick}>
+        <S.IconWrapper>
+          <Icon name="project" size="24" />
+        </S.IconWrapper>
+        <FolderTitle />
+      </S.Wrapper>
+  );
+};
+
+interface IProps {
+  folder: IFolder;
+  onClick(folderID: number): void;
+}
+
+export default FolderItem;

package/src/components/FileGallery/FolderItem/style.tsx

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  position: relative;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-radius: ${p => p.theme.radii.s};
+  display: flex;
+  align-items: center;
+  min-width: 165px;
+  max-width: 180px;
+  height: 40px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  margin-left: ${(p) => p.theme.spacing.m};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Wrapper, IconWrapper, Title };

package/src/components/FileGallery/GalleryPanel/DetailPanel/index.tsx

@@ -0,0 +1,164 @@
+import React, { memo, useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { IRootState, IFile } from "@ax/types";
+import { Button, FieldsBehavior, IconAction } from "@ax/components";
+import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
+import { fileDriveActions } from "@ax/containers/FileDrive";
+import { getFileIcon } from "../../utils";
+
+import * as S from "./style";
+
+const GalleryDetailPanel = (props: IProps) => {
+  const { selectedFile, isSaving, isAllowedToEdit, setFile, updateFile } = props;
+  const { title, alt, tags, fileName, uploadDate, fileType, sizeBytes } = selectedFile || {};
+
+  const initState: IFormState = { title: title || "", alt: alt || "", tags: tags || [] };
+  const [form, setForm] = useState(initState);
+
+  useEffect(() => {
+    setForm(initState);
+  }, [selectedFile]);
+
+  const updateFormField = (field: string, value: string) => setForm((state) => ({ ...state, [field]: value }));
+
+  const handleTitle = (newValue: string) => updateFormField("title", newValue);
+
+  const handleAlt = (newValue: string) => updateFormField("alt", newValue);
+
+  const handleTags = (newValue: string) => updateFormField("tags", newValue);
+
+  const handleSave = async () =>
+    selectedFile && (await updateFile(selectedFile.id, form, selectedFile?.site || "global", false));
+
+  const handleSaveAndAdd = async () => {
+    selectedFile && (await updateFile(selectedFile.id, form, selectedFile?.site || "global", false));
+    setFile(form);
+  };
+
+  const handleAdd = () => setFile(form);
+
+  const handleOpenUrl = () => {
+    if (selectedFile) {
+      const win = window.open(selectedFile.url, "_blank");
+      if (win) {
+        win.focus();
+      }
+    }
+  };
+
+  const handleCopyUrl = () => selectedFile && navigator.clipboard.writeText(selectedFile.url);
+
+  const iconUrl = fileType ? `/img/icons/${getFileIcon(fileType)}` : "";
+
+  return (
+    <S.DetailPanelWrapper>
+      <S.PanelForm>
+        <S.InfoWrapper>
+          <S.IconWrapper>
+            <img src={iconUrl} alt={`${fileType} Icon`} />
+          </S.IconWrapper>
+          <S.Name>{fileName}</S.Name>
+          <S.InfoRow>
+            <strong>Uploaded:</strong> {uploadDate && getFormattedDateWithTimezone(uploadDate, "d MMM Y")}
+          </S.InfoRow>
+          <S.InfoRow>
+            <strong>Type:</strong> {fileType}
+          </S.InfoRow>
+          <S.InfoRow>
+            <strong>Size:</strong> {sizeBytes && formatBytes(sizeBytes)}
+          </S.InfoRow>
+          <S.ButtonsWrapper>
+            <Button type="button" onClick={handleCopyUrl} buttonStyle="line">
+              Copy URL
+            </Button>
+            <IconAction icon="OpenOutside" size="m" onClick={handleOpenUrl} />
+          </S.ButtonsWrapper>
+        </S.InfoWrapper>
+        <S.FormWrapper>
+          {isAllowedToEdit ? (
+            <>
+              <FieldsBehavior
+                title="Title"
+                name="title"
+                value={form.title}
+                fieldType="TextField"
+                onChange={handleTitle}
+              />
+              <FieldsBehavior
+                title="Alternative text"
+                name="alt"
+                value={form.alt}
+                fieldType="TextField"
+                onChange={handleAlt}
+              />
+            </>
+          ) : (
+            <>
+              <S.Label>Title</S.Label>
+              <S.FieldText>{form.title}</S.FieldText>
+              <S.Label>Alternative text</S.Label>
+              <S.FieldText>{form.alt}</S.FieldText>
+            </>
+          )}
+          <FieldsBehavior
+            title="Tags"
+            value={form.tags}
+            fieldType="TagsField"
+            onChange={handleTags}
+            disabled={!isAllowedToEdit}
+          />
+        </S.FormWrapper>
+      </S.PanelForm>
+      <S.PanelActions>
+        {isAllowedToEdit ? (
+          <>
+            <Button type="button" buttonStyle="line" onClick={handleSave} disabled={isSaving}>
+              {isSaving ? `Saving` : `Save`}
+            </Button>
+            <Button type="button" onClick={handleSaveAndAdd} disabled={isSaving}>
+              {isSaving ? `Saving` : `Save & Add`}
+            </Button>
+          </>
+        ) : (
+          <Button type="button" onClick={handleAdd}>
+            Add file
+          </Button>
+        )}
+      </S.PanelActions>
+    </S.DetailPanelWrapper>
+  );
+};
+
+export interface IDetailPanelProps {
+  setFile: (fileData: any) => void;
+  selectedFile: IFile | null;
+  isSaving: boolean;
+  isAllowedToEdit: boolean;
+}
+
+interface IFormState {
+  alt: string;
+  title: string;
+  tags: string[];
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  isSaving: state.app.isSaving,
+});
+
+export interface IDispatchProps {
+  updateFile(
+    fileID: number,
+    data: { title: string; alt: string; tags: string[] },
+    siteID: number | "global",
+    loading: boolean
+  ): Promise<boolean>;
+}
+
+const mapDispatchToProps = {
+  updateFile: fileDriveActions.updateFile,
+};
+
+type IProps = IDetailPanelProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(memo(GalleryDetailPanel));

package/src/components/FileGallery/GalleryPanel/DetailPanel/style.tsx

@@ -0,0 +1,113 @@
+import styled from "styled-components";
+
+const DetailPanelWrapper = styled.div`
+  position: relative;
+  opacity: ${(p) => (p.hidden ? "0" : "1")};
+  transition: opacity 0.1s;
+  height: 100%;
+  width: 100%;
+`;
+
+const PanelActions = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  button:not(:first-child) {
+    margin-left: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const PanelForm = styled.div`
+  position: relative;
+  width: 100%;
+  height: calc(${(p) => p.theme.spacing.xl} * 8);
+  overflow: auto;
+`;
+
+const InfoRow = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const InfoWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.s}`};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  strong {
+    font-weight: 600;
+  }
+`;
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+  margin-top: ${(p) => p.theme.spacing.s};
+  align-items: center;
+
+  button:first-child {
+    margin-right: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  overflow-wrap: break-word;
+`;
+
+const FormWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} 0 ${p.theme.spacing.s}`};
+`;
+
+const Url = styled.div`
+  display: flex;
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  border-radius: 4px;
+  width: 100%;
+  height: ${(p) => p.theme.spacing.l};
+  padding: 0 ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const IconWrapper = styled.div`
+  width: 42px;
+  height: 40px;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Label = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const FieldText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+export {
+  DetailPanelWrapper,
+  PanelActions,
+  PanelForm,
+  InfoRow,
+  InfoWrapper,
+  ButtonsWrapper,
+  Name,
+  FormWrapper,
+  Url,
+  IconWrapper,
+  Label,
+  FieldText,
+};

package/src/components/FileGallery/GalleryPanel/index.tsx

@@ -0,0 +1,42 @@
+import React, { memo } from "react";
+
+import { IFile } from "@ax/types";
+
+import DetailPanel from "./DetailPanel";
+import FileDragAndDrop from "@ax/modules/FileDrive/FileDragAndDrop";
+
+import * as S from "./style";
+
+const GalleryPanel = (props: IGalleryPanelProps) => {
+  const { selectedFile, validFormats, setFile, scope, currentFolderID, isAllowedToAdd, isAllowedToEdit, handleUpload } =
+    props;
+
+  return (
+    <S.GalleryPanel>
+      {!selectedFile ? (
+        <FileDragAndDrop
+          validFormats={validFormats}
+          folderID={currentFolderID}
+          handleUpload={handleUpload}
+          siteID={scope}
+          isAllowedToUpload={isAllowedToAdd}
+        />
+      ) : (
+        <DetailPanel selectedFile={selectedFile} setFile={setFile} isAllowedToEdit={isAllowedToEdit} />
+      )}
+    </S.GalleryPanel>
+  );
+};
+
+export interface IGalleryPanelProps {
+  selectedFile: IFile | null;
+  validFormats: string[];
+  setFile: (fileData: any) => void;
+  scope: number | "global";
+  currentFolderID: number | null;
+  handleUpload: (file: IFile[]) => void;
+  isAllowedToEdit: boolean;
+  isAllowedToAdd: boolean;
+}
+
+export default memo(GalleryPanel);

package/src/components/FileGallery/GalleryPanel/style.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const GalleryPanel = styled.div`
+  background-color: ${p => p.theme.color.uiBarBackground};
+  width: ${p => `calc(${p.theme.spacing.xl} * 5)`};
+  flex-shrink: 0;
+`;

package/src/components/FileGallery/GridItem/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { IFile } from "@ax/types";
+import { getFormattedDateWithTimezone, trimText } from "@ax/helpers";
+import { Tooltip } from "@ax/components";
+import { getFileIcon } from "../utils";
+
+import * as S from "./style";
+
+const GridItem = (props: IProps) => {
+  const { file, onClick, isSelected } = props;
+  const { fileName, fileType, uploadDate } = file;
+
+  const handleClick = () => onClick(file);
+
+  const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
+
+  const FileTitle = () =>
+    fileName.length > 30 ? (
+      <Tooltip content={fileName}>
+        <S.Name>{trimText(fileName, 30)}</S.Name>
+      </Tooltip>
+    ) : (
+      <S.Name>{fileName}</S.Name>
+    );
+
+  return (
+    <S.Wrapper onClick={handleClick} isSelected={isSelected}>
+      <S.Header>
+        <S.IconWrapper>
+          <img src={iconUrl} alt={`${fileType} Icon`} />
+        </S.IconWrapper>
+      </S.Header>
+      <FileTitle />
+      <S.Info>
+        <S.Tag>{getFormattedDateWithTimezone(uploadDate, "d MMM Y")}</S.Tag>
+      </S.Info>
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  file: IFile;
+  onClick(file: IFile): void;
+  isSelected: boolean;
+}
+
+export default GridItem;

package/src/components/FileGallery/GridItem/style.tsx

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div<{ isSelected: boolean }>`
+  position: relative;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: ${(p) => p.isSelected ? `2px solid ${p.theme.color.interactive01}` : `1px solid ${p.theme.color.uiLine}`};
+  border-radius: ${p => p.theme.radii.s};
+  display: flex;
+  flex-direction: column;
+  padding: ${(p) => p.theme.spacing.s};
+  min-width: 165px;
+  max-width: 170px;
+  height: 144px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const IconWrapper = styled.div`
+  width: 42px;
+  height: 40px;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  word-break: break-word;
+`;
+
+const Info = styled.div`
+  display: flex;
+  margin-top: auto;
+`;
+
+const Tag = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-radius: 20px;
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding: 2px 8px;
+  margin-right: ${(p) => p.theme.spacing.xxs};
+`;
+
+export { Wrapper, Header, Name, Info, IconWrapper, Tag };