@griddo/ax 11.10.16 → 11.10.17-rc.0

package/src/modules/FileDrive/BulkListHeader/style.tsx

@@ -1,6 +1,7 @@
-import styled from "styled-components";
 import { BulkSelectionOptions } from "@ax/components";
 
+import styled from "styled-components";
+
 const BulkWrapper = styled.div`
   width: 100%;
   span {
@@ -9,9 +10,9 @@ const BulkWrapper = styled.div`
 `;
 
 const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
-  padding: ${(p) => `0 0 ${p.theme.spacing.m} 0`};
-  margin-top: ${(p) => `-${p.theme.spacing.xs}`};
-  margin-bottom: ${(p) => `-${p.theme.spacing.xs}`};
+  padding: 0;
+  margin: 0;
+  padding-right: ${(p) => p.theme.spacing.s};
 `;
 
 export { BulkWrapper, StyledBulkSelectionOptions };

package/src/modules/FileDrive/FileModal/DetailPanel/index.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
-import { Button, FieldsBehavior, IconAction, Tabs } from "@ax/components";
-import { IFile, IRootState } from "@ax/types";
+import { Button, FieldsBehavior, IconAction } from "@ax/components";
 import { fileDriveActions } from "@ax/containers/FileDrive";
+import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
 import { useModal } from "@ax/hooks";
-import { DeleteFileModal } from "../../atoms";
-import UsageContent from "./UsageContent";
+import { LOCALE } from "@ax/locales";
+import type { IFile, IRootState } from "@ax/types";
 
+import { DeleteFileModal } from "../../atoms";
 import * as S from "./style";
+import UsageContent from "./UsageContent";
 
 const DetailPanel = (props: IProps) => {
 	const {
@@ -30,6 +31,7 @@ const DetailPanel = (props: IProps) => {
 	const [selectedTab, setSelectedTab] = useState("details");
 	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		const initState: IFormState = { title: title || "", alt: alt || "", tags: tags || [] };
 		setForm(initState);
@@ -138,7 +140,7 @@ const DetailPanel = (props: IProps) => {
 									fieldType="TagsField"
 									onChange={handleTags}
 									disabled={!isAllowedToEdit}
-									helptext="Type a tag and press enter to create it"
+									helptext={LOCALE.fields.tags.helptext}
 								/>
 							</S.FileForm>
 						</S.Content>

package/src/modules/FileDrive/index.tsx

@@ -1,25 +1,27 @@
-import React, { useRef, useEffect, useState, useCallback, useLayoutEffect } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import {
+	BackFolder,
 	Button,
 	EmptyState,
 	ErrorToast,
+	FilterTagsBar,
 	Icon,
 	IconAction,
-	MainWrapper,
-	TableList,
 	Loading,
-	Tooltip,
-	Toast,
+	MainWrapper,
 	Modal,
-	Tabs,
-	BackFolder,
 	SearchField,
 	SearchTagsBar,
-	FilterTagsBar,
+	TableList,
+	Tabs,
+	Toast,
+	Tooltip,
 } from "@ax/components";
-import {
+import { fileDriveActions } from "@ax/containers/FileDrive";
+import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
+import type {
 	IBulkAction,
 	IFile,
 	IFilesFolder,
@@ -29,24 +31,22 @@ import {
 	IQueryValue,
 	IRootState,
 } from "@ax/types";
-import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
-import { fileDriveActions } from "@ax/containers/FileDrive";
 
-import GridItem from "./GridItem";
-import ListItem from "./ListItem";
-import BulkListHeader from "./BulkListHeader";
-import FolderItem from "./FolderItem";
+import { DeleteFileModal, MoveItemModal, NewFolderModal, NotSavedModal } from "./atoms";
 import Breadcrumb from "./Breadcrumb";
-import FolderTree from "./FolderTree";
+import BulkGridHeader from "./BulkGridHeader";
+import BulkListHeader from "./BulkListHeader";
 import FileDragAndDrop from "./FileDragAndDrop";
+import SortBy from "./FileFilters/SortBy";
+import Type from "./FileFilters/Type";
 import FileModal from "./FileModal";
-import BulkGridHeader from "./BulkGridHeader";
-import { DeleteFileModal, MoveItemModal, NewFolderModal, NotSavedModal } from "./atoms";
+import FolderItem from "./FolderItem";
+import FolderTree from "./FolderTree";
+import GridItem from "./GridItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
-import { getSortedListStatus } from "./utils";
-import Type from "./FileFilters/Type";
-import SortBy from "./FileFilters/SortBy";
+import ListItem from "./ListItem";
 import UploadItem from "./UploadItem";
+import { getSortedListStatus } from "./utils";
 
 import * as S from "./style";
 
@@ -459,6 +459,7 @@ const FileDrive = (props: IProps) => {
 			bulkActions={bulkActions}
 			isSearching={isSearching}
 			setHoverCheck={setHoverCheck}
+			selectedItems={selectedItems}
 		/>
 	);
 
@@ -614,7 +615,7 @@ const FileDrive = (props: IProps) => {
 
 	const filters = (
 		<S.Filters>
-			<Type filterItems={filterItems} value={filterValues["filterType"]} />
+			<Type filterItems={filterItems} value={filterValues.filterType} />
 			<SortBy sortItems={sortItems} sortedState={sortedListStatus} />
 		</S.Filters>
 	);
@@ -711,6 +712,7 @@ const FileDrive = (props: IProps) => {
 											totalItems={totalItems}
 											selectItems={selectItems}
 											bulkActions={bulkActions}
+											selectedItems={selectedItems}
 										/>
 									)}
 									{!hasFolders && isRoot && !isSearching && <NewFolderButton />}
@@ -860,7 +862,7 @@ const mapStateToProps = (state: IRootState) => ({
 	currentFolderContent: state.fileDrive.currentFolderContent,
 	currentFolderID: state.fileDrive.currentFolderID,
 	breadcrumb: state.fileDrive.breadcrumb,
-	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+	currentSiteID: state.sites.currentSiteInfo?.id ?? null,
 	displayMode: state.fileDrive.displayMode,
 	selectedTab: state.fileDrive.selectedTab,
 });

package/src/modules/Forms/FormCategoriesList/BulkHeader/TableHeader/style.tsx

@@ -1,12 +1,14 @@
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m}`};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/Forms/FormCategoriesList/BulkHeader/index.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import type { IBulkSelectedItems } from "@ax/hooks";
+
 import TableHeader from "./TableHeader";
 
 import * as S from "./style";
 
 const BulkHeader = (props: IProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, totalItems, isScrolling, bulkActions, setHoverCheck } = props;
+	const { showBulk, checkState, selectItems, totalItems, isScrolling, bulkActions, setHoverCheck, selectedItems } =
+		props;
 
 	return showBulk ? (
 		<S.StyledBulkSelectionOptions
@@ -12,6 +14,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			actions={bulkActions}
 			selectItems={selectItems}
 			totalItems={totalItems}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -32,6 +35,7 @@ interface IProps {
 	isScrolling: boolean;
 	bulkActions: { icon: string; text: string; action: () => void }[];
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Forms/FormCategoriesList/BulkHeader/style.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import styled from "styled-components";
 import { BulkSelectionOptions } from "@ax/components";
 
+import styled from "styled-components";
+
 const StyledBulkSelectionOptions = styled((props) => <BulkSelectionOptions {...props} />)`
-  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+  // padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
 `;
 
 export { StyledBulkSelectionOptions };

package/src/modules/Forms/FormCategoriesList/index.tsx

@@ -1,11 +1,18 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
+
+import { EmptyState, ErrorToast, MainWrapper, SearchTagsBar, TableList, Toast } from "@ax/components";
+import { formsActions } from "@ax/containers/Forms";
+import { getSchemaFormCategories } from "@ax/helpers";
+import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import type { FormCategoriesOrderParams, FormCategory, IRootState } from "@ax/types";
+
 import {
 	closestCenter,
 	DndContext,
-	DragEndEvent,
-	DragStartEvent,
+	type DragEndEvent,
+	type DragStartEvent,
 	KeyboardSensor,
 	PointerSensor,
 	useSensor,
@@ -13,18 +20,11 @@ import {
 } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
-import { formsActions } from "@ax/containers/Forms";
-import { IRootState, FormCategory, FormCategoriesOrderParams } from "@ax/types";
-import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
-import { MainWrapper, TableList, ErrorToast, Toast, EmptyState, SearchTagsBar } from "@ax/components";
-import { getSchemaFormCategories } from "@ax/helpers";
-
+import FormsMenu from "../FormsMenu";
 import { DeleteModal } from "./atoms";
+import BulkHeader from "./BulkHeader";
 import CategoryItem from "./CategoryItem";
 import CategoryPanel from "./CategoryPanel";
-import BulkHeader from "./BulkHeader";
-import FormsMenu from "../FormsMenu";
-
 import * as S from "./style";
 
 const FormCategoriesList = (props: IProps): JSX.Element => {
@@ -128,6 +128,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 	const TableHeader = (
 		<BulkHeader
 			showBulk={areItemsSelected(catIds)}
+			selectedItems={selectedItems}
 			totalItems={totalItems}
 			selectItems={selectItems}
 			checkState={checkState}

package/src/modules/Forms/FormList/BulkHeader/TableHeader/style.tsx

@@ -1,12 +1,15 @@
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  align-items: center;
+  // padding: ${(p) => p.theme.spacing.m};
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/Forms/FormList/BulkHeader/index.tsx

@@ -1,10 +1,12 @@
-import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IQueryValue } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IQueryValue } from "@ax/types";
+
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
 	const {
+		selectedItems,
 		showBulk,
 		checkState,
 		selectItems,
@@ -27,6 +29,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			actions={bulkActions}
 			selectItems={selectItems}
 			totalItems={totalItems}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -60,6 +63,7 @@ interface IProps {
 	siteID: number | null;
 	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Forms/FormList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import {
@@ -6,37 +6,37 @@ import {
 	ErrorToast,
 	FilterTagsBar,
 	MainWrapper,
+	Notification,
 	SearchTagsBar,
 	TableList,
 	Toast,
-	Notification,
 } from "@ax/components";
-import {
-	IQueryValue,
-	IRootState,
-	ISite,
+import { appActions } from "@ax/containers/App";
+import { formsActions } from "@ax/containers/Forms";
+import { ITEMS_PER_PAGE } from "@ax/containers/Forms/constants";
+import { getFormTemplates, getSchemaFormCategories } from "@ax/helpers";
+import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast } from "@ax/hooks";
+import type {
 	FormContent,
-	ISchema,
+	FormState,
 	GetFormsParams,
 	ILanguage,
-	FormState,
 	INotification,
+	IQueryValue,
+	IRootState,
+	ISchema,
+	ISite,
 } from "@ax/types";
-import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast } from "@ax/hooks";
-import { appActions } from "@ax/containers/App";
-import { formsActions } from "@ax/containers/Forms";
-import { ITEMS_PER_PAGE } from "@ax/containers/Forms/constants";
-import { getFormTemplates, getSchemaFormCategories } from "@ax/helpers";
-import Summary from "./Summary";
-import BulkHeader from "./BulkHeader";
-import FormItem from "./FormItem";
-import { TemplateModal } from "./TemplateModal";
-import FormsMenu from "../FormsMenu";
+
 import { DeleteModal, UnPublishModal } from "../atoms";
+import FormsMenu from "../FormsMenu";
 import { getAllLangFormsIds, getSortedListStatus } from "../utils";
+import BulkHeader from "./BulkHeader";
+import FormItem from "./FormItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
-
+import Summary from "./Summary";
 import * as S from "./style";
+import { TemplateModal } from "./TemplateModal";
 
 const FormList = (props: IUserListProps): JSX.Element => {
 	const {
@@ -254,6 +254,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 
 	const TableHeader = (
 		<BulkHeader
+			selectedItems={selectedItems}
 			filterValues={filterValues}
 			showBulk={areItemsSelected(formIds)}
 			selectAllItems={handleSelectAll}

package/src/modules/MediaGallery/BulkGridHeader/GridHeader/style.tsx

@@ -6,6 +6,8 @@ const Header = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-left: ${(p) => p.theme.spacing.m};
+  min-height: 40px;
+  padding-inline: 8px;
 `;
 
 const CheckWrapper = styled.div`

package/src/modules/MediaGallery/BulkGridHeader/index.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import { IBulkAction } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IBulkAction } from "@ax/types";
 
 import GridHeader from "./GridHeader";
 
 import * as S from "./style";
 
 const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions } = props;
+	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, selectedItems } = props;
 
 	return showBulk ? (
 		<S.BulkWrapper>
@@ -16,6 +16,7 @@ const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
 				actions={bulkActions}
 				selectItems={selectItems}
 				totalItems={totalItems}
+				selectedItems={selectedItems}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -30,6 +31,7 @@ export interface IBulkHeaderProps {
 	selectAllItems: () => void;
 	totalItems: number;
 	bulkActions: IBulkAction[];
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkGridHeader;

package/src/modules/MediaGallery/BulkGridHeader/style.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "styled-components";
 import { BulkSelectionOptions } from "@ax/components";
 
+import styled from "styled-components";
+
 const BulkWrapper = styled.div`
   width: 100%;
   span {
@@ -10,8 +10,10 @@ const BulkWrapper = styled.div`
 `;
 
 const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
-  padding: ${(p) => `0 0 0 ${p.theme.spacing.xs}`};
-  height: ${(p) => p.theme.spacing.s};
+    padding:0;
+    padding-right: 16px;
+    margin-left: 16px;
+    width: auto;
 `;
 
 export { BulkWrapper, StyledBulkSelectionOptions };

package/src/modules/MediaGallery/BulkListHeader/TableHeader/style.tsx

@@ -1,12 +1,13 @@
-import styled from "styled-components";
-
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding-bottom: ${(p) => p.theme.spacing.m};
+  align-items: center;
+  min-height: 40px;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
 `;
 

package/src/modules/MediaGallery/BulkListHeader/index.tsx

@@ -1,12 +1,13 @@
-import React from "react";
-import { IBulkAction } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IBulkAction } from "@ax/types";
 
 import TableHeader from "./TableHeader";
 
 import * as S from "./style";
 
 const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, setHoverCheck } = props;
+	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, setHoverCheck, selectedItems } =
+		props;
 
 	return showBulk ? (
 		<S.BulkWrapper>
@@ -16,6 +17,7 @@ const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
 				actions={bulkActions}
 				selectItems={selectItems}
 				totalItems={totalItems}
+				selectedItems={selectedItems}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -37,6 +39,7 @@ export interface IBulkHeaderProps {
 	totalItems: number;
 	bulkActions: IBulkAction[];
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkListHeader;

package/src/modules/MediaGallery/BulkListHeader/style.tsx

@@ -1,6 +1,7 @@
-import styled from "styled-components";
 import { BulkSelectionOptions } from "@ax/components";
 
+import styled from "styled-components";
+
 const BulkWrapper = styled.div`
   width: 100%;
   span {
@@ -9,9 +10,7 @@ const BulkWrapper = styled.div`
 `;
 
 const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
-  padding: ${(p) => `0 0 ${p.theme.spacing.m} 0`};
-  margin-top: ${(p) => `-${p.theme.spacing.xs}`};
-  margin-bottom: ${(p) => `-${p.theme.spacing.xs}`};
+  padding-left: 0;
 `;
 
 export { BulkWrapper, StyledBulkSelectionOptions };

package/src/modules/MediaGallery/ImageModal/DetailPanel/index.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { formatBytes, getFileExtension, getFormattedDateWithTimezone } from "@ax/helpers";
 import { Button, FieldsBehavior, IconAction, Tabs } from "@ax/components";
-import { IGetFolderParams, IImage, IRootState } from "@ax/types";
 import { galleryActions } from "@ax/containers/Gallery";
+import { formatBytes, getFileExtension, getFormattedDateWithTimezone } from "@ax/helpers";
 import { useModal } from "@ax/hooks";
-import { DeleteFileModal } from "../../atoms";
-import UsageContent from "./UsageContent";
+import { LOCALE } from "@ax/locales";
+import type { IGetFolderParams, IImage, IRootState } from "@ax/types";
 
+import { DeleteFileModal } from "../../atoms";
 import * as S from "./style";
+import UsageContent from "./UsageContent";
 
 const DetailPanel = (props: IProps) => {
 	const {
@@ -142,7 +143,7 @@ const DetailPanel = (props: IProps) => {
 									fieldType="TagsField"
 									onChange={handleTags}
 									disabled={!isAllowedToEdit}
-									helptext="Type a tag and press enter to create it"
+									helptext={LOCALE.fields.tags.helptext}
 								/>
 							</S.FileForm>
 						</S.Content>