diff --git a/package.json b/package.json index 5d72d8091f..80033981ae 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@codemirror/state": "^6.5.2", "@codemirror/view": "^6.38.1", "@mendix/pluggable-widgets-tools": "10.21.2", + "@prettier/plugin-xml": ">=3.4.1", "@testing-library/react": ">=15.0.6", "@types/big.js": "^6.2.2", "@types/node": "~22.14.0", @@ -75,7 +76,6 @@ "mime-types": "patches/mime-types.patch", "mobx-react-lite@4.0.7": "patches/mobx-react-lite@4.0.7.patch", "mobx@6.12.3": "patches/mobx@6.12.3.patch", - "rc-trigger": "patches/rc-trigger.patch", "react-big-calendar@0.19.2": "patches/react-big-calendar@0.19.2.patch", "react-dropzone": "patches/react-dropzone.patch" }, diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss index 79b2ac631b..6158e3d77d 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss @@ -307,52 +307,6 @@ $root: ".widget-datagrid"; width: 100%; } -.pagination-bar { - display: flex; - justify-content: flex-end; - white-space: nowrap; - align-items: baseline; - margin: 16px; - color: $pagination-caption-color; - - .paging-status { - padding: 0 8px 0; - } - - .pagination-button { - padding: 6px; - color: var(--gray-darker, $gray-darker); - border-color: transparent; - background-color: transparent; - - &:hover { - color: var(--brand-primary, $brand-primary); - border-color: transparent; - background-color: transparent; - } - - &:disabled { - border-color: transparent; - background-color: transparent; - } - - &:focus:not(:focus-visible) { - outline: none; - } - - &:focus-visible { - outline: 1px solid var(--brand-primary, $brand-primary); - } - } - .pagination-icon { - position: relative; - top: 4px; - display: inline-block; - width: 20px; - height: 20px; - } -} - /* Column selector for hidable columns outside DG context */ /* List of columns to select */ .column-selectors { @@ -522,6 +476,10 @@ $root: ".widget-datagrid"; } } +.widget-datagrid .progress-bar { + margin: var(--spacing-medium, 16px); +} + .widget-datagrid .widget-datagrid-load-more { display: block !important; margin: var(--spacing-small, 8px) 0; diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss index 4848ae75a7..38885d75b2 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss @@ -5,6 +5,7 @@ ========================================================================== */ $gallery-screen-lg: $screen-lg; $gallery-screen-md: $screen-md; +$root: ".widget-gallery"; @mixin grid-items($number, $suffix) { @for $i from 1 through $number { @@ -162,3 +163,19 @@ $gallery-screen-md: $screen-md; } } } + +#{$root}-btn-link { + cursor: pointer; + background: transparent; + border: none; + color: var(--link-color); + padding: 0.3em 0.5em; + border-radius: 6px; + display: inline-block; + white-space: nowrap; + + &:hover, + &:focus-visible { + background-color: var(--brand-primary-50, #e6e7f2); + } +} diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_pagination-bar.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_pagination-bar.scss new file mode 100644 index 0000000000..5e9e0e26cf --- /dev/null +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_pagination-bar.scss @@ -0,0 +1,44 @@ +.pagination-bar { + display: flex; + justify-content: flex-end; + white-space: nowrap; + align-items: baseline; + color: $pagination-caption-color; + + .paging-status { + padding: 0 8px 0; + } + + .pagination-button { + padding: 6px; + color: var(--gray-darker, $gray-darker); + border-color: transparent; + background-color: transparent; + + &:hover { + color: var(--brand-primary, $brand-primary); + border-color: transparent; + background-color: transparent; + } + + &:disabled { + border-color: transparent; + background-color: transparent; + } + + &:focus:not(:focus-visible) { + outline: none; + } + + &:focus-visible { + outline: 1px solid var(--brand-primary, $brand-primary); + } + } + .pagination-icon { + position: relative; + top: 4px; + display: inline-block; + width: 20px; + height: 20px; + } +} diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss index a9c5fb31c7..d27c9fc081 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss @@ -1,5 +1,6 @@ @import "../../../theme/web/custom-variables"; @import "variables"; +@import "pagination-bar"; @import "datagrid"; @import "datagrid-filters"; @import "datagrid-dropdown-filter"; diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx index c7e8f0b31a..0fb3991f3e 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx @@ -1,4 +1,5 @@ import { If } from "@mendix/widget-plugin-component-kit/If"; +import { Pagination as PagingButtons } from "@mendix/widget-plugin-grid/components/Pagination"; import cn from "classnames"; import { GUID, ObjectItem } from "mendix"; import { Selectable } from "mendix/preview/Selectable"; @@ -51,13 +52,18 @@ const numberOfItems = 3; const cls = { root: "widget-datagrid", topBar: "widget-datagrid-top-bar table-header", + pagingTop: "widget-datagrid-padding-top", + ptStart: "widget-datagrid-tb-start", + ptEnd: "widget-datagrid-tb-end", header: "widget-datagrid-header header-filters", content: "widget-datagrid-content", grid: "widget-datagrid-grid table", gridHeader: "widget-datagrid-grid-head", gridBody: "widget-datagrid-grid-body table-content", + footer: "widget-datagrid-footer table-footer", pb: "widget-datagrid-padding-bottom", pbStart: "widget-datagrid-pb-start", + pbMid: "widget-datagrid-pb-middle", pbEnd: "widget-datagrid-pb-end" }; @@ -79,9 +85,7 @@ export function preview(props: DatagridPreviewProps): ReactElement { - - - + ); @@ -96,8 +100,15 @@ function WidgetRoot({ children }: PropsWithChildren): ReactElement { ); } -function WidgetTopBar({ children }: PropsWithChildren): ReactElement { - return
{children}
; +function WidgetTopBar(): ReactElement { + return ( +
+
+
{useTopCounter() ? : null}
+
{usePagingTop() ? : null}
+
+
+ ); } function WidgetHeader(): ReactNode { @@ -113,8 +124,23 @@ function WidgetContent({ children }: PropsWithChildren): ReactElement { return
{children}
; } -function WidgetFooter({ children }: PropsWithChildren): ReactElement { - return
{children}
; +function WidgetFooter(): ReactElement { + const props = useProps(); + return ( +
+
+
{useBottomCounter() ? : null}
+
+ {props.pagination === "loadMore" ? ( + + ) : null} +
+
{usePagingBot() ? : null}
+
+
+ ); } function Grid({ children }: PropsWithChildren): ReactElement { @@ -269,14 +295,36 @@ function EmptyPlaceholder(): ReactElement { ); } -function PaddingBottom(): ReactElement { +const SelectionCounter = (): ReactNode => { + const props = useProps(); return ( -
-
-
+
+ + {props.selectedCountTemplateSingular} + +  |  +
); -} +}; + +const Pagination = (): ReactNode => { + const props = useProps(); + return ( + {}} + nextPage={() => {}} + numberOfItems={props.pageSize ?? 20} + page={0} + pageSize={props.pageSize ?? 10} + showPagingButtons={"always"} + previousPage={() => {}} + pagination={props.pagination} + /> + ); +}; function useColumns(): ColumnsPreviewType[] { const { columns } = useProps(); @@ -320,3 +368,25 @@ function useGridStyle(): CSSProperties { "--widgets-grid-template-columns": sizes.join(" ") } as CSSProperties; } + +function useTopCounter(): boolean { + const { itemSelection, selectionCounterPosition } = useProps(); + return itemSelection === "Multi" && selectionCounterPosition === "top"; +} + +function useBottomCounter(): boolean { + const { itemSelection, selectionCounterPosition } = useProps(); + return itemSelection === "Multi" && selectionCounterPosition === "bottom"; +} + +function usePagingTop(): boolean { + const props = useProps(); + const visible = props.showNumberOfRows || props.pagination === "buttons"; + return visible && props.pagingPosition !== "bottom"; +} + +function usePagingBot(): boolean { + const props = useProps(); + const visible = props.showNumberOfRows || props.pagination === "buttons"; + return visible && props.pagingPosition !== "top"; +} diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx index ccaf2820ad..5433e25ce2 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx @@ -13,11 +13,7 @@ export const WidgetFooter = observer(function WidgetFooter(): ReactElement | nul const selectionCounterVM = useSelectionCounterViewModel(); const customPagination = useCustomPagination(); - const showFooter = - selectionCounterVM.isBottomCounterVisible || - paging.paginationVisible || - paging.showVirtualScrollingWithRowCount || - paging.showLoadMore; + const showFooter = selectionCounterVM.isBottomCounterVisible || paging.paginationVisible || paging.loadMoreVisible; if (!showFooter) { return null; @@ -31,7 +27,7 @@ export const WidgetFooter = observer(function WidgetFooter(): ReactElement | nul
- +
+
+ ); +}; + +const Root = ({ children }: PropsWithChildren): ReactNode => { + const props = useProps(); + return ( +
+ {children} +
+ ); +}; + +const TopControls = (): ReactNode => { + return ( +
+
{useTopCounter() ? : null}
+
{usePagingTop() ? : null}
+
+ ); +}; - const clickActionHelper = useClickActionHelper({ onClick: props.onClick, onClickTrigger: "none" }); +const Header = (): ReactNode => { + const props = useProps(); - const itemEventsController = useItemEventsController( - selectHelper, - clickActionHelper, - focusController, - numberOfColumns, - props.itemSelectionMode + return ( +
+ +
+ +
); +}; - const sortAPI = useMemo( - () => - ({ - version: 1, - host: new SortStoreHost() - }) as const, - [] +const Item = ({ className }: { className?: string }): ReactNode => { + const props = useProps(); + return ( + +
+ ); +}; + +const Content = (): ReactNode => { + const props = useProps(); + const { desktopItems: lg, tabletItems: md, phoneItems: sm } = props; + const rows = 3; + const lgCount = (lg ?? 0) * rows - 1; + const mdCount = (md ?? 0) * rows - 1; + const smCount = (sm ?? 0) * rows - 1; return ( -
}> - ReactElement) => ( - - {renderWrapper(null)} - - ), - [emptyPlaceholder] - )} - header={ - - -
- - - } - showHeader - hasMoreItems={false} - items={items} - itemHelper={useItemPreviewHelper({ - contentValue: props.content, - hasOnClick: props.onClick !== null +
+
+ > + + {Array.from({ length: lgCount }).map((_, index) => ( + + ))} + {Array.from({ length: mdCount }).map((_, index) => ( + + ))} + {Array.from({ length: smCount }).map((_, index) => ( + + ))} +
); -} +}; + +const Footer = (): ReactNode => { + const props = useProps(); + return ( +
+
+
{useBottomCounter() ? : null}
+
+ {props.pagination === "loadMore" ? ( + {props.loadMoreButtonCaption} + ) : null} +
+
{usePagingBot() ? : null}
+
+
+ ); +}; export function preview(props: GalleryPreviewProps): ReactElement { return createElement(Preview, props); } + +function useTopCounter(): boolean { + const { itemSelection, selectionCountPosition } = useProps(); + return itemSelection === "Multi" && selectionCountPosition === "top"; +} + +function useBottomCounter(): boolean { + const { itemSelection, selectionCountPosition } = useProps(); + return itemSelection === "Multi" && selectionCountPosition === "bottom"; +} + +function usePagingTop(): boolean { + const props = useProps(); + const visible = props.showTotalCount || props.pagination === "buttons"; + return visible && props.pagingPosition !== "bottom"; +} + +function usePagingBot(): boolean { + const props = useProps(); + const visible = props.showTotalCount || props.pagination === "buttons"; + return visible && props.pagingPosition !== "top"; +} diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx index 4e2262c42a..1e98553069 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx @@ -1,126 +1,15 @@ -import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper"; -import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController"; -import { getColumnAndRowBasedOnIndex, useSelectionHelper } from "@mendix/widget-plugin-grid/selection"; -import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst"; -import { observer } from "mobx-react-lite"; -import { ReactElement, ReactNode, useCallback } from "react"; +import { ContainerProvider } from "brandi-react"; +import { ReactElement } from "react"; import { GalleryContainerProps } from "../typings/GalleryProps"; -import { Gallery as GalleryComponent } from "./components/Gallery"; -import { HeaderWidgetsHost } from "./components/HeaderWidgetsHost"; -import { useItemEventsController } from "./features/item-interaction/ItemEventsController"; -import { GridPositionsProps, useGridPositions } from "./features/useGridPositions"; -import { useItemHelper } from "./helpers/ItemHelper"; -import { GalleryContext, GalleryRootScope, useGalleryRootScope } from "./helpers/root-context"; -import { useGalleryJSActions } from "./helpers/useGalleryJSActions"; -import { useGalleryStore } from "./helpers/useGalleryStore"; -import { useItemSelectHelper } from "./helpers/useItemSelectHelper"; - -const Container = observer(function GalleryContainer(props: GalleryContainerProps): ReactElement { - const { rootStore, itemSelectHelper } = useGalleryRootScope(); - - const items = props.datasource.items ?? []; - const config: GridPositionsProps = { - desktopItems: props.desktopItems, - phoneItems: props.phoneItems, - tabletItems: props.tabletItems, - totalItems: items.length - }; - const { numberOfColumns, numberOfRows } = useGridPositions(config); - const getPositionCallback = useCallback( - (index: number) => getColumnAndRowBasedOnIndex(numberOfColumns, items.length, index), - [numberOfColumns, items.length] - ); - - const focusController = useFocusTargetController({ - rows: numberOfRows, - columns: numberOfColumns, - pageSize: props.pageSize - }); - - const clickActionHelper = useClickActionHelper({ onClick: props.onClick, onClickTrigger: props.onClickTrigger }); - - const itemEventsController = useItemEventsController( - itemSelectHelper, - clickActionHelper, - focusController, - numberOfColumns, - props.itemSelectionMode - ); - - const itemHelper = useItemHelper({ - classValue: props.itemClass, - contentValue: props.content, - clickValue: props.onClick - }); - - useGalleryJSActions(rootStore, itemSelectHelper); - - const header = {props.filtersPlaceholder}; - - return ( - ReactElement) => - props.showEmptyPlaceholder === "custom" ? renderWrapper(props.emptyPlaceholder) :
, - [props.emptyPlaceholder, props.showEmptyPlaceholder] - )} - emptyMessageTitle={props.emptyMessageTitle?.value} - header={header} - headerTitle={props.filterSectionTitle?.value} - ariaLabelListBox={props.ariaLabelListBox?.value} - showHeader={!!props.filtersPlaceholder} - hasMoreItems={props.datasource.hasMoreItems ?? false} - items={items} - itemHelper={itemHelper} - numberOfItems={props.datasource.totalCount} - page={rootStore.paging.currentPage} - pageSize={props.pageSize} - paging={rootStore.paging.showPagination} - paginationPosition={props.pagingPosition} - paginationType={props.pagination} - setPage={rootStore.paging.setPage} - showPagingButtons={props.showPagingButtons} - phoneItems={props.phoneItems} - style={props.style} - tabletItems={props.tabletItems} - tabIndex={props.tabIndex} - selectHelper={itemSelectHelper} - itemEventsController={itemEventsController} - focusController={focusController} - getPosition={getPositionCallback} - loadMoreButtonCaption={props.loadMoreButtonCaption?.value} - showRefreshIndicator={rootStore.loaderCtrl.showRefreshIndicator} - selectionCountPosition={props.selectionCountPosition} - /> - ); -}); - -function useCreateGalleryScope(props: GalleryContainerProps): GalleryRootScope { - const rootStore = useGalleryStore(props); - const selectionHelper = useSelectionHelper( - props.itemSelection, - props.datasource, - props.onSelectionChange, - props.keepSelection ? "always keep" : "always clear" - ); - const itemSelectHelper = useItemSelectHelper(props.itemSelection, selectionHelper); - - return useConst({ - rootStore, - selectionHelper, - itemSelectHelper, - selectionCountStore: rootStore.selectionCountStore - }); -} +import { GalleryWidget } from "./components/GalleryWidget"; +import { useGalleryContainer } from "./model/hooks/useGalleryContainer"; export function Gallery(props: GalleryContainerProps): ReactElement { - const scope = useCreateGalleryScope(props); + const container = useGalleryContainer(props); return ( - - - + + + ); } diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.xml b/packages/pluggableWidgets/gallery-web/src/Gallery.xml index f786af638b..465915afcd 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.xml +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.xml @@ -12,6 +12,10 @@ Filters placeholder + + Content placeholder + + Data source @@ -20,6 +24,42 @@ Refresh time (in seconds) + + + + Desktop columns + + + + Tablet columns + + + + Phone columns + + + + + + On click trigger + + + Single click + Double click + + + + On click action + + + + On selection change + + + + + + Selection @@ -29,8 +69,12 @@ + + Auto select first item + Automatically select the first item + - Item click toggles selection + Toggle on click Defines item selection behavior. Yes @@ -50,37 +94,21 @@ Off - - Clear selection label - Customize the label of the 'Clear section' button - - Clear selection - Selectie wissen - - - - Content placeholder + + + + Loading type + + Spinner + Skeleton + Show refresh indicator Show a refresh indicator when the data is being loaded. - - - Desktop columns - - - - Tablet columns - - - - Phone columns - - - Page size @@ -95,8 +123,12 @@ Load more - - Show total count + + Custom pagination + + + + Custom pagination @@ -107,6 +139,10 @@ Auto + + Show total count + + Position of pagination @@ -124,8 +160,29 @@ Laad meer + + Page size attribute + Attribute to set the page size dynamically. + + + + + + Page attribute + Attribute to set the page dynamically. + + + + + + Total count + Attribute to store current total count + + + + - + Empty message @@ -144,24 +201,6 @@ - - - On click trigger - - - Single click - Double click - - - - On click action - - - - On selection change - - - @@ -194,7 +233,7 @@ - + Filter section @@ -212,20 +251,30 @@ Item description Assistive technology will read this upon reaching each gallery item. + + - Item count singular + Row count singular Must include '%d' to denote number position - %d item selected - %d item geselecteerd + %d row selected + %d rij geselecteerd - Item count plural + Row count plural Must include '%d' to denote number position - %d items selected - %d items geselecteerd + %d rows selected + %d rijen geselecteerd + + + + Clear selection label + Customize the label of the 'Clear section' button + + Clear selection + Selectie wissen diff --git a/packages/pluggableWidgets/gallery-web/src/components/EmptyPlaceholder.tsx b/packages/pluggableWidgets/gallery-web/src/components/EmptyPlaceholder.tsx new file mode 100644 index 0000000000..e01fdcc597 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/EmptyPlaceholder.tsx @@ -0,0 +1,15 @@ +import { observer } from "mobx-react-lite"; +import { ReactNode } from "react"; +import { useEmptyPlaceholderVM } from "../model/hooks/injection-hooks"; + +export const EmptyPlaceholder = observer(function EmptyPlaceholder(): ReactNode { + const vm = useEmptyPlaceholderVM(); + + if (!vm.content) return null; + + return ( +
+
{vm.content}
+
+ ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx deleted file mode 100644 index 56d2b458b1..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator"; -import { Pagination } from "@mendix/widget-plugin-grid/components/Pagination"; -import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context"; -import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController"; -import { PositionInGrid, SelectActionHandler } from "@mendix/widget-plugin-grid/selection"; -import { ObjectItem } from "mendix"; -import { CSSProperties, ReactElement, ReactNode } from "react"; -import { GalleryItemHelper } from "../typings/GalleryItem"; -import { GalleryContent } from "./GalleryContent"; -import { GalleryFooter } from "./GalleryFooter"; -import { GalleryHeader } from "./GalleryHeader"; -import { GalleryRoot } from "./GalleryRoot"; -import { GalleryTopBar } from "./GalleryTopBar"; -import { ListBox } from "./ListBox"; -import { ListItem } from "./ListItem"; - -import { PaginationEnum, SelectionCountPositionEnum, ShowPagingButtonsEnum } from "typings/GalleryProps"; -import { LoadMore, LoadMoreButton as LoadMorePreview } from "../components/LoadMore"; -import { ItemEventsController } from "../typings/ItemEventsController"; -import { SelectionCounter } from "./SelectionCounter"; - -export interface GalleryProps { - className?: string; - desktopItems: number; - emptyPlaceholderRenderer?: (renderWrapper: (children: ReactNode) => ReactElement) => ReactElement; - emptyMessageTitle?: string; - header?: ReactNode; - headerTitle?: string; - showHeader: boolean; - hasMoreItems: boolean; - items: T[]; - numberOfItems?: number; - paging: boolean; - page: number; - pageSize: number; - paginationPosition?: "top" | "bottom" | "both"; - paginationType: PaginationEnum; - showPagingButtons: ShowPagingButtonsEnum; - showEmptyStatePreview?: boolean; - phoneItems: number; - setPage?: (computePage: (prevPage: number) => number) => void; - style?: CSSProperties; - tabletItems: number; - tabIndex?: number; - ariaLabelListBox?: string; - ariaLabelItem?: (item: T) => string | undefined; - preview?: boolean; - selectionCountPosition?: SelectionCountPositionEnum; - - // Helpers - focusController: FocusTargetController; - itemEventsController: ItemEventsController; - itemHelper: GalleryItemHelper; - selectHelper: SelectActionHandler; - getPosition: (index: number) => PositionInGrid; - loadMoreButtonCaption?: string; - showRefreshIndicator: boolean; -} - -export function Gallery(props: GalleryProps): ReactElement { - const { loadMoreButtonCaption = "Load more" } = props; - const pagination = props.paging ? ( - props.setPage && props.setPage(() => page)} - nextPage={() => props.setPage && props.setPage(prev => prev + 1)} - numberOfItems={props.numberOfItems} - page={props.page} - pageSize={props.pageSize} - previousPage={() => props.setPage && props.setPage(prev => prev - 1)} - pagination={props.paginationType} - showPagingButtons={props.showPagingButtons} - /> - ) : null; - - const showTopPagination = - props.paging && (props.paginationPosition === "top" || props.paginationPosition === "both"); - const showBottomPagination = - props.paging && (props.paginationPosition === "bottom" || props.paginationPosition === "both"); - - const selectionCounter = - !props.preview && props.selectionCountPosition !== "off" && props.selectHelper.selectionType === "Multi" ? ( - - ) : null; - - const showTopSelectionCounter = selectionCounter && props.selectionCountPosition === "top"; - const showBottomSelectionCounter = selectionCounter && props.selectionCountPosition === "bottom"; - - const showLoadMore = props.paginationType === "loadMore"; - const showFooter = showBottomSelectionCounter || showBottomPagination || showLoadMore; - - return ( - - -
- {showTopSelectionCounter && selectionCounter} - {showTopPagination &&
{pagination}
} -
- - {props.showHeader && {props.header}} - {props.showRefreshIndicator ? : null} - - {props.items.length > 0 && ( - - - {props.items.map((item, index) => ( - - ))} - - - )} - - {(props.items.length === 0 || props.showEmptyStatePreview) && - props.emptyPlaceholderRenderer && - props.emptyPlaceholderRenderer(children => ( -
-
{children}
-
- ))} - {showFooter && ( - -
- {showBottomSelectionCounter && ( -
{selectionCounter}
- )} - -
- {showBottomPagination && pagination} - {showLoadMore && - (props.preview ? ( - {loadMoreButtonCaption} - ) : ( - {loadMoreButtonCaption} - ))} -
-
- - )} - - ); -} diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryContent.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryContent.tsx index 45b0da9952..61965a9d70 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryContent.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryContent.tsx @@ -1,30 +1,21 @@ -import { InfiniteBodyProps, useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody"; +import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody"; import classNames from "classnames"; -import { ReactElement, ReactNode } from "react"; +import { observer } from "mobx-react-lite"; +import { PropsWithChildren, ReactElement } from "react"; +import { usePaginationConfig, usePaginationVM } from "../model/hooks/injection-hooks"; -type PickProps = "hasMoreItems" | "setPage" | "isInfinite"; - -export type GalleryContentProps = { - className?: string; - children?: ReactNode; -} & Pick; - -export function GalleryContent({ - children, - className, - hasMoreItems, - isInfinite, - setPage -}: GalleryContentProps): ReactElement { +export const GalleryContent = observer(function GalleryContent({ children }: PropsWithChildren): ReactElement { + const paginationVM = usePaginationVM(); + const isInfinite = usePaginationConfig().isVirtualScrolling; const [trackScrolling, bodySize, containerRef] = useInfiniteControl({ - hasMoreItems, + hasMoreItems: paginationVM.hasMoreItems, isInfinite, - setPage + setPage: paginationVM.setPage.bind(paginationVM) }); return (
0 ? { maxHeight: bodySize } : undefined} @@ -32,4 +23,4 @@ export function GalleryContent({ {children}
); -} +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryFooter.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryFooter.tsx index e9d9b88bfa..033b31f45e 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryFooter.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryFooter.tsx @@ -1,12 +1,6 @@ import classNames from "classnames"; -import { JSX, ReactElement } from "react"; +import { PropsWithChildren, ReactElement } from "react"; -type GalleryFooterProps = Omit; - -export function GalleryFooter({ children, className, ...rest }: GalleryFooterProps): ReactElement { - return ( -
- {children} -
- ); +export function GalleryFooter({ children, className }: PropsWithChildren<{ className?: string }>): ReactElement { + return
{children}
; } diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryFooterControls.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryFooterControls.tsx new file mode 100644 index 0000000000..0ba2b728c3 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryFooterControls.tsx @@ -0,0 +1,36 @@ +import { If } from "@mendix/widget-plugin-component-kit/If"; +import { observer } from "mobx-react-lite"; +import { ReactElement } from "react"; +import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks"; +import { SelectionCounter } from "../features/selection-counter/SelectionCounter"; +import { useCustomPagination, usePaginationConfig } from "../model/hooks/injection-hooks"; +import { LoadMore } from "./LoadMore"; +import { Pagination } from "./Pagination"; + +export const GalleryFooterControls = observer(function GalleryFooterControls(): ReactElement { + const counterVM = useSelectionCounterViewModel(); + const pgConfig = usePaginationConfig(); + const customPagination = useCustomPagination(); + const loadMoreButtonCaption = "Load more"; + + return ( +
+
+ + + +
+
+ + {loadMoreButtonCaption} + +
+
+ + + + {customPagination.get()} +
+
+ ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx index 5d0d96a09e..38df8e4df5 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx @@ -1,13 +1,31 @@ -import { JSX, ReactElement } from "react"; +import { getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context"; +import { getGlobalSelectionContext, useCreateSelectionContextValue } from "@mendix/widget-plugin-grid/selection"; +import { getGlobalSortContext } from "@mendix/widget-plugin-sorting/react/context"; +import { observer } from "mobx-react-lite"; +import { ReactElement } from "react"; +import { useFilterAPI, useMainGate, useSelectionHelper, useSortAPI } from "../model/hooks/injection-hooks"; -type GalleryHeaderProps = Omit; +const SelectionContext = getGlobalSelectionContext(); +const SortAPI = getGlobalSortContext(); +const FilterAPI = getGlobalFilterContextObject(); -export function GalleryHeader(props: GalleryHeaderProps): ReactElement | null { - const { children } = props; +export const GalleryHeader = observer(function GalleryHeader(): ReactElement | null { + const { filtersPlaceholder } = useMainGate().props; + const filterAPI = useFilterAPI(); + const sortAPI = useSortAPI(); + const selectionContext = useCreateSelectionContextValue(useSelectionHelper()); - if (!children) { + if (!filtersPlaceholder) { return null; } - return
; -} + return ( + + + +
{filtersPlaceholder}
+ + + + ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx new file mode 100644 index 0000000000..b430f9477c --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx @@ -0,0 +1,32 @@ +import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context"; +import { observer } from "mobx-react-lite"; +import { useGalleryConfig, useItems, useKeyNavFocus, useTextsService } from "../model/hooks/injection-hooks"; +import { ListBox } from "./ListBox"; +import { ListItem } from "./ListItem"; + +export const GalleryItems = observer(function GalleryItems() { + const items = useItems().get(); + const config = useGalleryConfig(); + const texts = useTextsService(); + const focusController = useKeyNavFocus(); + + if (items.length < 1) { + return null; + } + + return ( + + + {items.map((item, index) => ( + + ))} + + + ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx index bab0eee139..f4946b70af 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx @@ -1,25 +1,15 @@ import classNames from "classnames"; -import { JSX, ReactElement } from "react"; +import { observer } from "mobx-react-lite"; +import { PropsWithChildren, ReactElement } from "react"; +import { useGalleryRootVM } from "../model/hooks/injection-hooks"; -export type GalleryRootProps = Omit & { - selectable?: boolean; -}; - -export function GalleryRoot(props: GalleryRootProps): ReactElement { - const { className, selectable, children, ...rest } = props; +export const GalleryRoot = observer(function GalleryRoot(props: PropsWithChildren): ReactElement { + const { children } = props; + const vm = useGalleryRootVM(); return ( -
+
{children}
); -} +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryTobBarControls.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryTobBarControls.tsx new file mode 100644 index 0000000000..98a8da0b2c --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryTobBarControls.tsx @@ -0,0 +1,27 @@ +import { If } from "@mendix/widget-plugin-component-kit/If"; +import { observer } from "mobx-react-lite"; +import { ReactElement } from "react"; +import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks"; +import { SelectionCounter } from "../features/selection-counter/SelectionCounter"; +import { usePaginationConfig } from "../model/hooks/injection-hooks"; +import { Pagination } from "./Pagination"; + +export const GalleryTobBarControls = observer(function GalleryTobBarControls(): ReactElement { + const counterVM = useSelectionCounterViewModel(); + const pgConfig = usePaginationConfig(); + + return ( +
+
+ + + +
+
+ + + +
+
+ ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryWidget.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryWidget.tsx new file mode 100644 index 0000000000..6ae56d0843 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryWidget.tsx @@ -0,0 +1,30 @@ +import { ReactElement } from "react"; +import { EmptyPlaceholder } from "./EmptyPlaceholder"; +import { GalleryContent as Content } from "./GalleryContent"; +import { GalleryFooter as Footer } from "./GalleryFooter"; +import { GalleryFooterControls as FooterControls } from "./GalleryFooterControls"; +import { GalleryHeader as Header } from "./GalleryHeader"; +import { GalleryItems as Items } from "./GalleryItems"; +import { GalleryRoot as Root } from "./GalleryRoot"; +import { GalleryTobBarControls as TopBarControls } from "./GalleryTobBarControls"; +import { GalleryTopBar as TopBar } from "./GalleryTopBar"; +import { RefreshStatus } from "./RefreshStatus"; + +export function GalleryWidget(): ReactElement { + return ( + + + + +
+ + + + + +
+ +
+ + ); +} diff --git a/packages/pluggableWidgets/gallery-web/src/components/HeaderWidgetsHost.tsx b/packages/pluggableWidgets/gallery-web/src/components/HeaderWidgetsHost.tsx deleted file mode 100644 index bb6e871fa2..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/components/HeaderWidgetsHost.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context"; -import { getGlobalSelectionContext, useCreateSelectionContextValue } from "@mendix/widget-plugin-grid/selection"; -import { getGlobalSortContext } from "@mendix/widget-plugin-sorting/react/context"; -import { ReactElement, ReactNode } from "react"; -import { useGalleryRootScope } from "../helpers/root-context"; - -const SelectionContext = getGlobalSelectionContext(); -const SortAPI = getGlobalSortContext(); -const FilterAPI = getGlobalFilterContextObject(); - -export function HeaderWidgetsHost(props: { children?: ReactNode }): ReactElement { - const { selectionHelper, rootStore } = useGalleryRootScope(); - const selectionContext = useCreateSelectionContextValue(selectionHelper); - - return ( - - - {props.children} - - - ); -} diff --git a/packages/pluggableWidgets/gallery-web/src/components/ListBox.tsx b/packages/pluggableWidgets/gallery-web/src/components/ListBox.tsx index 3335e65d8f..866a55d3db 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/ListBox.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/ListBox.tsx @@ -1,12 +1,14 @@ import { SelectionType } from "@mendix/widget-plugin-grid/selection"; import classNames from "classnames"; -import { JSX, ReactElement } from "react"; +import { ReactElement, ReactNode } from "react"; -type ListBoxProps = Omit & { +type ListBoxProps = { lg: number; md: number; sm: number; selectionType: SelectionType; + children?: ReactNode; + className?: string; }; export function ListBox({ children, className, selectionType, lg, md, sm, ...rest }: ListBoxProps): ReactElement { diff --git a/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx b/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx index d0b1644472..5b1c8a0ca9 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx @@ -1,31 +1,37 @@ +import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps"; import classNames from "classnames"; import { ObjectItem } from "mendix"; -import { JSX, ReactElement, RefObject, useMemo } from "react"; -import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps"; -import { PositionInGrid, SelectActionHandler } from "@mendix/widget-plugin-grid/selection"; +import { computed } from "mobx"; +import { observer } from "mobx-react-lite"; +import { ReactElement, RefObject, useMemo } from "react"; import { getAriaProps } from "../features/item-interaction/get-item-aria-props"; +import { useGalleryItemVM, useItemEventsVM, useLayoutService, useSelectActions } from "../model/hooks/injection-hooks"; +import { ListItemButton } from "./ListItemButton"; -import { GalleryItemHelper } from "../typings/GalleryItem"; -import { ItemEventsController } from "../typings/ItemEventsController"; - -type ListItemProps = Omit & { - eventsController: ItemEventsController; - getPosition: (index: number) => PositionInGrid; - helper: GalleryItemHelper; +type ListItemProps = { item: ObjectItem; itemIndex: number; - selectHelper: SelectActionHandler; - preview?: boolean; - label?: string; }; -export function ListItem(props: ListItemProps): ReactElement { - const { eventsController, getPosition, helper, item, itemIndex, selectHelper, label, ...rest } = props; - const clickable = helper.hasOnClick(item) || selectHelper.selectionType !== "None"; - const ariaProps = getAriaProps(item, selectHelper, label); +export const ListItem = observer(function ListItem(props: ListItemProps): ReactElement { + const { item, itemIndex, ...rest } = props; + + const eventsVM = useItemEventsVM().get(); + const selectActions = useSelectActions(); + const itemVM = useGalleryItemVM(); + const getPosition = useLayoutService().getPositionFn; + + const isSelected = computed( + () => { + return selectActions.isSelected(item); + }, + { name: "[gallery]:@computed:ListItem:isSelected" } + ).get(); + const clickable = itemVM.hasOnClick(item) || selectActions.selectionType !== "None"; + const ariaProps = getAriaProps(selectActions.selectionType, isSelected, itemVM.label(item)); const { columnIndex, rowIndex } = getPosition(itemIndex); const keyNavProps = useFocusTargetProps({ columnIndex: columnIndex ?? -1, rowIndex }); - const handlers = useMemo(() => eventsController.getProps(item), [eventsController, item]); + const handlers = useMemo(() => eventsVM.getProps(item), [eventsVM, item]); return (
} tabIndex={keyNavProps.tabIndex} + data-selected={isSelected ? true : undefined} > - {helper.render(item)} + {itemVM.hasOnClick(item) === true ? ( + {itemVM.content(item)} + ) : ( + itemVM.content(item) + )}
); -} +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/LoadMore.tsx b/packages/pluggableWidgets/gallery-web/src/components/LoadMore.tsx index fd3a2ca232..4cc45ccb5b 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/LoadMore.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/LoadMore.tsx @@ -1,7 +1,7 @@ import cn from "classnames"; import { observer } from "mobx-react-lite"; import { JSX, ReactNode } from "react"; -import { useGalleryRootScope } from "../helpers/root-context"; +import { usePaginationVM, useTextsService } from "../model/hooks/injection-hooks"; export function LoadMoreButton(props: JSX.IntrinsicElements["button"]): ReactNode { return ( @@ -11,10 +11,9 @@ export function LoadMoreButton(props: JSX.IntrinsicElements["button"]): ReactNod ); } -export const LoadMore = observer(function LoadMore(props: { children: ReactNode }): ReactNode { - const { - rootStore: { paging } - } = useGalleryRootScope(); +export const LoadMore = observer(function LoadMore(): ReactNode { + const paging = usePaginationVM(); + const texts = useTextsService(); if (paging.pagination !== "loadMore") { return null; @@ -24,5 +23,5 @@ export const LoadMore = observer(function LoadMore(props: { children: ReactNode return null; } - return paging.setPage(n => n + 1)}>{props.children}; + return paging.setPage(n => n + 1)}>{texts.loadMoreCaption}; }); diff --git a/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx b/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx new file mode 100644 index 0000000000..bdbac0fe0b --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx @@ -0,0 +1,25 @@ +import { Pagination as PaginationComponent } from "@mendix/widget-plugin-grid/components/Pagination"; +import { observer } from "mobx-react-lite"; +import { ReactNode } from "react"; +import { usePaginationVM } from "../model/hooks/injection-hooks"; + +export const Pagination = observer(function Pagination(): ReactNode { + const paginationVM = usePaginationVM(); + + if (!paginationVM.paginationVisible) return null; + + return ( + 0} + gotoPage={page => paginationVM.setPage(page)} + nextPage={() => paginationVM.setPage(n => n + 1)} + numberOfItems={paginationVM.totalCount} + page={paginationVM.currentPage} + pageSize={paginationVM.pageSize} + showPagingButtons={paginationVM.showPagingButtons} + previousPage={() => paginationVM.setPage(n => n - 1)} + pagination={paginationVM.pagination} + /> + ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/RefreshIndicator.tsx b/packages/pluggableWidgets/gallery-web/src/components/RefreshIndicator.tsx new file mode 100644 index 0000000000..7e96a92703 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/RefreshIndicator.tsx @@ -0,0 +1,16 @@ +import classNames from "classnames"; +import { ReactElement } from "react"; + +type RefreshIndicatorProps = { + className?: string; +}; + +export function RefreshIndicator({ className }: RefreshIndicatorProps): ReactElement { + return ( +
+
+ +
+
+ ); +} diff --git a/packages/pluggableWidgets/gallery-web/src/components/RefreshStatus.tsx b/packages/pluggableWidgets/gallery-web/src/components/RefreshStatus.tsx new file mode 100644 index 0000000000..0b566baec3 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/RefreshStatus.tsx @@ -0,0 +1,19 @@ +import { observer } from "mobx-react-lite"; +import { ReactNode } from "react"; +import { useLoaderViewModel } from "../model/hooks/injection-hooks"; + +export const RefreshStatus = observer(function RefreshStatus(): ReactNode { + const loaderVM = useLoaderViewModel(); + + if (!loaderVM.showRefreshIndicator) return null; + + if (!loaderVM.isRefreshing) return null; + + return ( +
+
+ +
+
+ ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx b/packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx deleted file mode 100644 index 12d09ef397..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { If } from "@mendix/widget-plugin-component-kit/If"; -import { observer } from "mobx-react-lite"; -import { useGalleryRootScope } from "../helpers/root-context"; - -type SelectionCounterLocation = "top" | "bottom" | undefined; - -export const SelectionCounter = observer(function SelectionCounter({ - location -}: { - location?: SelectionCounterLocation; -}) { - const { selectionCountStore, itemSelectHelper } = useGalleryRootScope(); - - const containerClass = location === "top" ? "widget-gallery-tb-start" : "widget-gallery-pb-start"; - - const clearButtonAriaLabel = `${selectionCountStore.clearButtonLabel} (${selectionCountStore.selectedCount} selected)`; - - return ( - -
- - {selectionCountStore.selectedCountText} - -  |  - -
- - ); -}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/__tests__/Gallery.spec.tsx b/packages/pluggableWidgets/gallery-web/src/components/__tests__/Gallery.spec.tsx deleted file mode 100644 index 3551501fef..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/components/__tests__/Gallery.spec.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import { listAction, listExpression, setupIntersectionObserverStub } from "@mendix/widget-plugin-test-utils"; -import "@testing-library/jest-dom"; -import { render, waitFor } from "@testing-library/react"; -import { ObjectItem } from "mendix"; -import { createElement } from "react"; -import { ItemHelperBuilder } from "../../utils/builders/ItemHelperBuilder"; -import { mockItemHelperWithAction, mockProps, setup, withGalleryContext } from "../../utils/test-utils"; -import { Gallery } from "../Gallery"; - -jest.mock("@mendix/widget-plugin-component-kit/RefreshIndicator", () => ({ - RefreshIndicator: (_props: any) => createElement("div", { "data-testid": "refresh-indicator" }) -})); - -describe("Gallery", () => { - beforeAll(() => { - setupIntersectionObserverStub(); - }); - describe("DOM Structure", () => { - it("renders correctly", () => { - const { asFragment } = render(withGalleryContext()); - - expect(asFragment()).toMatchSnapshot(); - }); - - it("renders correctly with onclick event", () => { - const { asFragment } = render( - withGalleryContext() - ); - - expect(asFragment()).toMatchSnapshot(); - }); - - it("renders RefreshIndicator when `showRefreshIndicator` is true", () => { - const base = mockProps(); - const props = { ...base, showRefreshIndicator: true }; - const { getByTestId } = render(withGalleryContext()); - expect(getByTestId("refresh-indicator")).toBeInTheDocument(); - }); - - it("does not render RefreshIndicator when `showRefreshIndicator` is false", () => { - const base = mockProps(); - const props = { ...base, showRefreshIndicator: false }; - const { queryByTestId } = render(withGalleryContext()); - expect(queryByTestId("refresh-indicator")).toBeNull(); - }); - }); - - describe("with on click action", () => { - it("runs action on item click", async () => { - const execute = jest.fn(); - const props = mockProps({ onClick: listAction(mock => ({ ...mock(), execute })) }); - const { user, getAllByRole } = setup(withGalleryContext()); - const [item] = getAllByRole("listitem"); - - await user.click(item); - await waitFor(() => expect(execute).toHaveBeenCalledTimes(1)); - }); - - it("runs action on Enter|Space press when item is in focus", async () => { - const execute = jest.fn(); - const props = mockProps({ onClick: listAction(mock => ({ ...mock(), execute })) }); - const { user, getAllByRole } = setup(withGalleryContext(} />)); - const [item] = getAllByRole("listitem"); - - await user.tab(); - expect(item).toHaveFocus(); - await user.keyboard("[Enter]"); - await waitFor(() => expect(execute).toHaveBeenCalledTimes(1)); - await user.keyboard("[Space]"); - await waitFor(() => expect(execute).toHaveBeenCalledTimes(2)); - }); - }); - - describe("with different configurations per platform", () => { - it("contains correct classes for desktop", () => { - const { getByRole } = render(withGalleryContext()); - const list = getByRole("list"); - expect(list).toHaveClass("widget-gallery-lg-12"); - }); - - it("contains correct classes for tablet", () => { - const { getByRole } = render(withGalleryContext()); - const list = getByRole("list"); - expect(list).toHaveClass("widget-gallery-md-6"); - }); - - it("contains correct classes for phone", () => { - const { getByRole } = render(withGalleryContext()); - const list = getByRole("list"); - expect(list).toHaveClass("widget-gallery-sm-3"); - }); - }); - - describe("with custom classes", () => { - it("contains correct classes in the wrapper", () => { - const { container } = render(withGalleryContext()); - - expect(container.querySelector(".custom-class")).toBeVisible(); - }); - - it("contains correct classes in the items", () => { - const { getAllByRole } = render( - withGalleryContext( - - b.withItemClass(listExpression(() => "custom-class")) - )} - /> - ) - ); - const [item] = getAllByRole("listitem"); - - expect(item).toHaveClass("custom-class"); - }); - }); - - describe("with pagination", () => { - it("renders correctly", () => { - const { asFragment } = render( - withGalleryContext( - - ) - ); - - expect(asFragment()).toMatchSnapshot(); - }); - - it("triggers correct events on click next button", async () => { - const setPage = jest.fn(); - const { user, getByLabelText } = setup( - withGalleryContext( - - ) - ); - - const next = getByLabelText("Go to next page"); - await user.click(next); - await waitFor(() => expect(setPage).toHaveBeenCalledTimes(1)); - }); - }); - - describe("with empty option", () => { - it("renders correctly", () => { - const { asFragment } = render( - withGalleryContext( - renderWrapper(No items found)} - /> - ) - ); - - expect(asFragment()).toMatchSnapshot(); - }); - }); - - describe("with accessibility properties", () => { - it("renders correctly without items", () => { - const { asFragment } = render( - withGalleryContext( - renderWrapper(No items found)} - /> - ) - ); - - expect(asFragment()).toMatchSnapshot(); - }); - - it("renders correctly with items", () => { - const { asFragment } = render( - withGalleryContext( - `title for '${item.id}'`} - headerTitle="filter title" - emptyMessageTitle="empty message" - emptyPlaceholderRenderer={renderWrapper => renderWrapper(No items found)} - /> - ) - ); - - expect(asFragment()).toMatchSnapshot(); - }); - }); - - describe("without filters", () => { - it("renders structure without header container", () => { - const props = { ...mockProps(), showHeader: false, header: undefined }; - const { asFragment } = render(withGalleryContext()); - - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/__tests__/GalleryRoot.spec.tsx b/packages/pluggableWidgets/gallery-web/src/components/__tests__/GalleryRoot.spec.tsx new file mode 100644 index 0000000000..ac6d6b3f0f --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/__tests__/GalleryRoot.spec.tsx @@ -0,0 +1,30 @@ +import { render, RenderOptions } from "@testing-library/react"; +import { Container } from "brandi"; +import { ContainerProvider } from "brandi-react"; +import { ReactElement } from "react"; +import { createGalleryContainer } from "../../model/containers/createGalleryContainer"; +import { mockContainerProps } from "../../utils/mock-container-props"; +import { GalleryRoot } from "../GalleryRoot"; + +/** Function to bind hook context to provided container. */ +const renderWithContainer = ( + ui: ReactElement, + ct: Container, + options?: RenderOptions +): ReturnType => { + return render( + + {ui} + , + options + ); +}; + +describe("GalleryRoot", () => { + it("should render with correct className, style and tabIndex", () => { + const props = mockContainerProps(); + const [container] = createGalleryContainer({ ...props, tabIndex: 42, style: { color: "blue" } }); + const { asFragment } = renderWithContainer(, container); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap b/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap deleted file mode 100644 index 3c0d5c3e18..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap +++ /dev/null @@ -1,492 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Gallery DOM Structure renders correctly 1`] = ` - -
-
-
-
-
- -
-
-
-
- Item content -
-
- Item content -
-
- Item content -
-
-
-
- -`; - -exports[`Gallery DOM Structure renders correctly with onclick event 1`] = ` - -
-
-
-
-
- -
-
-
-
-
- Item content -
-
-
-
- Item content -
-
-
-
- Item content -
-
-
-
-
- -`; - -exports[`Gallery with accessibility properties renders correctly with items 1`] = ` - -
-
-
-
-
- -
-
-
-
- Item content -
-
- Item content -
-
- Item content -
-
-
-
- -`; - -exports[`Gallery with accessibility properties renders correctly without items 1`] = ` - -
-
-
-
-
- -
-
-
-
- - No items found - -
-
-
- -`; - -exports[`Gallery with empty option renders correctly 1`] = ` - -
-
-
-
-
- -
-
-
-
- - No items found - -
-
-
- -`; - -exports[`Gallery with pagination renders correctly 1`] = ` - -
-
-
-
-
- - - - Currently showing 1 to 10 of 20 - - - - -
-
-
-
-
- -
-
-
-
- Item content -
-
- Item content -
-
- Item content -
-
-
-
- -`; - -exports[`Gallery without filters renders structure without header container 1`] = ` - -
-
-
-
-
-
-
- Item content -
-
- Item content -
-
- Item content -
-
-
-
- -`; diff --git a/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/GalleryRoot.spec.tsx.snap b/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/GalleryRoot.spec.tsx.snap new file mode 100644 index 0000000000..60fba56ba6 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/GalleryRoot.spec.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GalleryRoot should render with correct className, style and tabIndex 1`] = ` + +
+ +`; diff --git a/packages/pluggableWidgets/gallery-web/src/controllers/QueryParamsController.ts b/packages/pluggableWidgets/gallery-web/src/controllers/QueryParamsController.ts deleted file mode 100644 index 9788829e95..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/controllers/QueryParamsController.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { DatasourceService } from "@mendix/widget-plugin-grid/main"; -import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch"; -import { SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; -import { SortInstruction } from "@mendix/widget-plugin-sorting/types/store"; - -import { FilterCondition } from "mendix/filters"; -import { reaction } from "mobx"; - -interface ObservableFilterStore { - filter: FilterCondition | undefined; -} - -interface ObservableSortStore { - sortOrder: SortInstruction[] | undefined; -} - -export class QueryParamsController implements SetupComponent { - private readonly _query: DatasourceService; - private readonly _filtersHost: ObservableFilterStore; - private readonly _sortHost: ObservableSortStore; - - constructor( - host: SetupComponentHost, - query: DatasourceService, - filters: ObservableFilterStore, - sort: ObservableSortStore - ) { - host.add(this); - - this._query = query; - this._filtersHost = filters; - this._sortHost = sort; - } - - setup(): () => void { - const [add, disposeAll] = disposeBatch(); - add( - reaction( - () => this._sortHost.sortOrder, - sortOrder => this._query.setSortOrder(sortOrder), - { fireImmediately: true } - ) - ); - add( - reaction( - () => this._filtersHost.filter, - filter => this._query.setFilter(filter), - { fireImmediately: true } - ) - ); - - return disposeAll; - } -} diff --git a/packages/pluggableWidgets/gallery-web/src/features/item-interaction/ItemEventsController.ts b/packages/pluggableWidgets/gallery-web/src/features/item-interaction/ItemEvents.viewModel.ts similarity index 71% rename from packages/pluggableWidgets/gallery-web/src/features/item-interaction/ItemEventsController.ts rename to packages/pluggableWidgets/gallery-web/src/features/item-interaction/ItemEvents.viewModel.ts index 36f7c9807b..baf52ccd34 100644 --- a/packages/pluggableWidgets/gallery-web/src/features/item-interaction/ItemEventsController.ts +++ b/packages/pluggableWidgets/gallery-web/src/features/item-interaction/ItemEvents.viewModel.ts @@ -1,24 +1,26 @@ -import { ObjectItem } from "mendix"; -import { useMemo } from "react"; import { ElementEntry, ElementProps } from "@mendix/widget-plugin-grid/event-switch/base"; -import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch"; import { ClickEntry, ClickEventSwitch } from "@mendix/widget-plugin-grid/event-switch/ClickEventSwitch"; +import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch"; +import { ClickActionHelper, ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper"; import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base"; +import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController"; +import { SelectActionsService } from "@mendix/widget-plugin-grid/main"; import { - SelectActionHandler, SelectAdjacentFx, SelectAllFx, SelectFx, - SelectionMode + SelectionMode, + SelectionType } from "@mendix/widget-plugin-grid/selection"; -import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController"; +import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main"; +import { ObjectItem } from "mendix"; +import { computed } from "mobx"; +import { createActionHandlers } from "./action-handlers"; import { EventEntryContext } from "./base"; import { createFocusTargetHandlers } from "./focus-target-handlers"; import { createItemHandlers } from "./item-handlers"; -import { createActionHandlers } from "./action-handlers"; -import { ClickActionHelper, ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper"; -export class ItemEventsController implements ItemEventsController { +export class ItemEventsViewModel { constructor( private contextFactory: (item: ObjectItem) => EventEntryContext, private selectFx: SelectFx, @@ -50,30 +52,33 @@ export class ItemEventsController implements ItemEventsController { } } -export function useItemEventsController( - selectHelper: SelectActionHandler, +export function createItemEventsVMAtom( + config: { + selectionType: SelectionType; + selectionMode: SelectionMode; + }, + selectActions: SelectActionsService, clickHelper: ClickActionHelper, focusController: FocusTargetController, - numberOfColumns: number, - selectionMode: SelectionMode -): ItemEventsController { - return useMemo( + numberOfColumns: ComputedAtom +): ComputedAtom { + const contextFactory = (item: ObjectItem): EventEntryContext => ({ + item, + selectionType: config.selectionType, + selectionMode: config.selectionMode, + clickTrigger: clickHelper.clickTrigger + }); + + return computed( () => - new ItemEventsController( - item => ({ - item, - selectionType: selectHelper.selectionType, - selectionMode, - clickTrigger: clickHelper.clickTrigger - }), - selectHelper.onSelect, - selectHelper.onSelectAll, + new ItemEventsViewModel( + contextFactory, + selectActions.select, + selectActions.selectPage, clickHelper.onExecuteAction, focusController.dispatch, - selectHelper.onSelectAdjacent, - numberOfColumns - ), - // eslint-disable-next-line react-hooks/exhaustive-deps - [selectHelper, focusController, numberOfColumns] + selectActions.selectAdjacent, + numberOfColumns.get() + ) ); } diff --git a/packages/pluggableWidgets/gallery-web/src/features/item-interaction/get-item-aria-props.ts b/packages/pluggableWidgets/gallery-web/src/features/item-interaction/get-item-aria-props.ts index 1efe9b6006..96a61eae20 100644 --- a/packages/pluggableWidgets/gallery-web/src/features/item-interaction/get-item-aria-props.ts +++ b/packages/pluggableWidgets/gallery-web/src/features/item-interaction/get-item-aria-props.ts @@ -1,5 +1,4 @@ -import { ObjectItem } from "mendix"; -import { SelectActionHandler } from "@mendix/widget-plugin-grid/selection"; +import { SelectionType } from "@mendix/widget-plugin-grid/selection"; type ListItemRole = "option" | "listitem"; @@ -10,11 +9,11 @@ type ListItemAriaProps = { "aria-label": string | undefined; }; -export function getAriaProps(item: ObjectItem, helper: SelectActionHandler, label?: string): ListItemAriaProps { - if (helper.selectionType === "Single" || helper.selectionType === "Multi") { +export function getAriaProps(selectionType: SelectionType, isSelected: boolean, label?: string): ListItemAriaProps { + if (selectionType === "Single" || selectionType === "Multi") { return { role: "option", - "aria-selected": helper.isSelected(item), + "aria-selected": isSelected, tabIndex: 0, "aria-label": label }; diff --git a/packages/pluggableWidgets/gallery-web/src/features/selection-counter/SelectionCounter.tsx b/packages/pluggableWidgets/gallery-web/src/features/selection-counter/SelectionCounter.tsx new file mode 100644 index 0000000000..b45e30d582 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/features/selection-counter/SelectionCounter.tsx @@ -0,0 +1,20 @@ +import { observer } from "mobx-react-lite"; +import { useSelectActions } from "../../model/hooks/injection-hooks"; +import { useSelectionCounterViewModel } from "./injection-hooks"; + +export const SelectionCounter = observer(function SelectionCounter() { + const selectionCounterVM = useSelectionCounterViewModel(); + const selectActions = useSelectActions(); + + return ( +
+ + {selectionCounterVM.selectedCountText} + +  |  + +
+ ); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/features/selection-counter/injection-hooks.ts b/packages/pluggableWidgets/gallery-web/src/features/selection-counter/injection-hooks.ts new file mode 100644 index 0000000000..d8e3349792 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/features/selection-counter/injection-hooks.ts @@ -0,0 +1,4 @@ +import { createInjectionHooks } from "brandi-react"; +import { GY_TOKENS } from "../../model/tokens"; + +export const [useSelectionCounterViewModel] = createInjectionHooks(GY_TOKENS.selectionCounterVM); diff --git a/packages/pluggableWidgets/gallery-web/src/stores/AttributeStorage.ts b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/AttributeStorage.ts similarity index 96% rename from packages/pluggableWidgets/gallery-web/src/stores/AttributeStorage.ts rename to packages/pluggableWidgets/gallery-web/src/features/settings-storage/AttributeStorage.ts index 2868f141b2..29c715976b 100644 --- a/packages/pluggableWidgets/gallery-web/src/stores/AttributeStorage.ts +++ b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/AttributeStorage.ts @@ -2,7 +2,7 @@ import { PlainJs } from "@mendix/filter-commons/typings/settings"; import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; import { EditableValue } from "mendix"; import { computed, makeObservable } from "mobx"; -import { ObservableStorage } from "../typings/storage"; +import { ObservableStorage } from "./storage"; type Gate = DerivedPropsGate<{ stateStorageAttr: EditableValue; diff --git a/packages/pluggableWidgets/gallery-web/src/stores/BrowserStorage.ts b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/BrowserStorage.ts similarity index 86% rename from packages/pluggableWidgets/gallery-web/src/stores/BrowserStorage.ts rename to packages/pluggableWidgets/gallery-web/src/features/settings-storage/BrowserStorage.ts index f569278940..15758781a1 100644 --- a/packages/pluggableWidgets/gallery-web/src/stores/BrowserStorage.ts +++ b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/BrowserStorage.ts @@ -1,5 +1,5 @@ import { PlainJs } from "@mendix/filter-commons/typings/settings"; -import { ObservableStorage } from "src/typings/storage"; +import { ObservableStorage } from "src/features/settings-storage/storage"; export class BrowserStorage implements ObservableStorage { constructor(private readonly _storageKey: string) {} diff --git a/packages/pluggableWidgets/gallery-web/src/stores/GalleryPersistentStateController.ts b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/GallerySettingsSync.service.ts similarity index 60% rename from packages/pluggableWidgets/gallery-web/src/stores/GalleryPersistentStateController.ts rename to packages/pluggableWidgets/gallery-web/src/features/settings-storage/GallerySettingsSync.service.ts index 1d8dcd5979..72f494f426 100644 --- a/packages/pluggableWidgets/gallery-web/src/stores/GalleryPersistentStateController.ts +++ b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/GallerySettingsSync.service.ts @@ -2,32 +2,20 @@ import { PlainJs, Serializable } from "@mendix/filter-commons/typings/settings"; import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch"; import { SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; import { action, comparer, computed, makeObservable, reaction } from "mobx"; -import { ObservableStorage } from "src/typings/storage"; - -interface GalleryPersistentStateControllerSpec { - filtersHost: Serializable; - sortHost: Serializable; - storage: ObservableStorage; - storeFilters: boolean; - storeSort: boolean; -} - -export class GalleryPersistentStateController implements SetupComponent { - private readonly _storage: ObservableStorage; - private readonly _filtersHost: Serializable; - private readonly _sortHost: Serializable; - readonly storeFilters: boolean; - readonly storeSort: boolean; +import { ObservableStorage } from "src/features/settings-storage/storage"; +import { GallerySettingsConfig } from "../../model/configs/GallerySettings.config"; +export class GallerySettingsSyncService implements SetupComponent { readonly schemaVersion: number = 1; - constructor(host: SetupComponentHost, spec: GalleryPersistentStateControllerSpec) { + constructor( + host: SetupComponentHost, + private filtersHost: Serializable, + private sortHost: Serializable, + private storage: ObservableStorage, + private config: GallerySettingsConfig + ) { host.add(this); - this._storage = spec.storage; - this._filtersHost = spec.filtersHost; - this._sortHost = spec.sortHost; - this.storeFilters = spec.storeFilters; - this.storeSort = spec.storeSort; makeObservable(this, { _persistentState: computed, @@ -41,13 +29,13 @@ export class GalleryPersistentStateController implements SetupComponent { // Write state to storage const clearWrite = reaction( () => this._persistentState, - data => this._storage.setData(data), + data => this.storage.setData(data), { delay: 250, equals: comparer.structural } ); // Update state from storage const clearRead = reaction( - () => this._storage.data, + () => this.storage.data, data => { if (data == null) { return; @@ -56,7 +44,7 @@ export class GalleryPersistentStateController implements SetupComponent { this.fromJSON(data); } else { console.warn("Invalid gallery settings. Reset storage to avoid conflicts."); - this._storage.setData(null); + this.storage.setData(null); } }, { fireImmediately: true, equals: comparer.structural } @@ -83,21 +71,21 @@ export class GalleryPersistentStateController implements SetupComponent { if (!this._validate(data)) { return; } - if (this.storeFilters) { - this._filtersHost.fromJSON(data.filters); + if (this.config.storeFilters) { + this.filtersHost.fromJSON(data.filters); } - if (this.storeSort) { - this._sortHost.fromJSON(data.sort); + if (this.config.storeSort) { + this.sortHost.fromJSON(data.sort); } } toJSON(): PlainJs { const data: PlainJs = { version: 1 }; - if (this.storeFilters) { - data.filters = this._filtersHost.toJSON(); + if (this.config.storeFilters) { + data.filters = this.filtersHost.toJSON(); } - if (this.storeSort) { - data.sort = this._sortHost.toJSON(); + if (this.config.storeSort) { + data.sort = this.sortHost.toJSON(); } return data; } diff --git a/packages/pluggableWidgets/gallery-web/src/features/settings-storage/create-settings-storage.ts b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/create-settings-storage.ts new file mode 100644 index 0000000000..5bd787fb9d --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/create-settings-storage.ts @@ -0,0 +1,27 @@ +import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; +import { EditableValue } from "mendix"; +import { GalleryGateProps } from "../../typings/GalleryGateProps"; +import { AttributeStorage } from "./AttributeStorage"; +import { BrowserStorage } from "./BrowserStorage"; +import { ObservableStorage } from "./storage"; + +export function createSettingsStorage( + host: SetupComponentHost, + gate: DerivedPropsGate +): ObservableStorage { + const props = gate.props; + + if (props.stateStorageType === "localStorage") { + return new BrowserStorage(props.name); + } + + if (props.stateStorageType === "attribute") { + if (!props.stateStorageAttr) { + throw new Error(`Gallery: attribute for settings storage is undefined.`); + } + + return new AttributeStorage(host, gate as DerivedPropsGate<{ stateStorageAttr: EditableValue }>); + } + + throw new Error(`Gallery: unknown storage type: ${props.stateStorageType}`); +} diff --git a/packages/pluggableWidgets/gallery-web/src/typings/storage.ts b/packages/pluggableWidgets/gallery-web/src/features/settings-storage/storage.ts similarity index 100% rename from packages/pluggableWidgets/gallery-web/src/typings/storage.ts rename to packages/pluggableWidgets/gallery-web/src/features/settings-storage/storage.ts diff --git a/packages/pluggableWidgets/gallery-web/src/features/useGridPositions.ts b/packages/pluggableWidgets/gallery-web/src/features/useGridPositions.ts deleted file mode 100644 index 2a7be17764..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/features/useGridPositions.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { ObjectItem } from "mendix"; -import { useEffect, useState } from "react"; -import { GalleryProps } from "../components/Gallery"; - -export type GridPositionsProps = Pick, "desktopItems" | "phoneItems" | "tabletItems"> & { - totalItems: number; -}; - -type GridPositionReturn = { - numberOfColumns: number; - numberOfRows: number; -}; - -function useWindowWidth(): number { - const [width, setWidth] = useState(window.innerWidth); - - useEffect(() => { - const updateWidth = (event: UIEvent): void => setWidth((event.target as Window).innerWidth); - - window.addEventListener("resize", updateWidth); - return () => window.removeEventListener("resize", updateWidth); - }, []); - - return width; -} - -type Breakpoint = "desktop" | "tablet" | "phone"; - -function mapBreakpoint(width: number): Breakpoint { - if (width < 768) { - return "phone"; - } - - if (width >= 768 && width < 992) { - return "tablet"; - } - - return "desktop"; -} - -function mapNumberOfColumns(config: GridPositionsProps, breakpoint: Breakpoint): number { - return config[`${breakpoint}Items`]; -} - -export function useGridPositions(config: GridPositionsProps): GridPositionReturn { - const width = useWindowWidth(); - const breakpoint = mapBreakpoint(width); - const numberOfColumns = mapNumberOfColumns(config, breakpoint); - const numberOfRows = Math.ceil(config.totalItems / numberOfColumns); - - return { - numberOfColumns: Math.min(numberOfColumns, config.totalItems), - numberOfRows - }; -} diff --git a/packages/pluggableWidgets/gallery-web/src/features/useGridPositionsPreview.ts b/packages/pluggableWidgets/gallery-web/src/features/useGridPositionsPreview.ts deleted file mode 100644 index 450b9ac380..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/features/useGridPositionsPreview.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { ObjectItem } from "mendix"; -import { RefObject, useEffect, useRef, useState } from "react"; -import { GalleryProps } from "../components/Gallery"; - -export type GridPositionsProps = Pick, "desktopItems" | "phoneItems" | "tabletItems"> & { - totalItems: number; -}; - -type GridPositionReturn = { - numberOfColumns: number; - numberOfRows: number; - numberOfItems: number; -}; - -function useObservedColumns(): [RefObject, number] { - const containerRef = useRef(null); - const [numberOfColumns, setNumberOfColumns] = useState(12); - - useEffect(() => { - if (!containerRef.current) return; - - const resizeObserver = new ResizeObserver(() => { - if (!containerRef.current) return; - - setNumberOfColumns( - getComputedStyle(containerRef.current.querySelector(".widget-gallery-items")!) - .getPropertyValue("grid-template-columns") - .split(" ").length - ); - }); - - resizeObserver.observe(containerRef.current); - - return () => resizeObserver.disconnect(); - }, []); - - return [containerRef, numberOfColumns]; -} - -export function useGridPositionsPreview( - config: GridPositionsProps -): GridPositionReturn & { containerRef: RefObject } { - const [containerRef, numberOfColumns] = useObservedColumns(); - const maxItems = numberOfColumns * 3; - const numberOfItems = Math.min(maxItems, config.totalItems); - const numberOfRows = Math.ceil(numberOfItems / numberOfColumns); - - return { - containerRef, - numberOfColumns, - numberOfRows, - numberOfItems - }; -} diff --git a/packages/pluggableWidgets/gallery-web/src/helpers/ItemHelper.tsx b/packages/pluggableWidgets/gallery-web/src/helpers/ItemHelper.tsx deleted file mode 100644 index 7cf81d2366..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/helpers/ItemHelper.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ListActionValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix"; -import { ReactNode, useMemo } from "react"; -import { GalleryItemHelper } from "../typings/GalleryItem"; -import { ListItemButton } from "../components/ListItemButton"; - -type ClassValue = ListExpressionValue | undefined; -type ContentValue = ListWidgetValue | undefined; -type ClickValue = ListActionValue | undefined; - -export class ItemHelper implements GalleryItemHelper { - private _classValue: ClassValue; - private _contentValue: ContentValue; - private _clickValue: ClickValue; - - constructor(classValue: ClassValue, contentValue: ContentValue, clickValue: ClickValue) { - this._classValue = classValue; - this._contentValue = contentValue; - this._clickValue = clickValue; - } - - itemClass(item: ObjectItem): string | undefined { - return this._classValue?.get(item).value; - } - - render(item: ObjectItem): ReactNode { - if (this.hasOnClick(item)) { - return {this._contentValue?.get(item)}; - } - - return this._contentValue?.get(item); - } - - hasOnClick(item: ObjectItem): boolean { - return !!this._clickValue?.get(item); - } -} - -export function useItemHelper(params: { - classValue: ClassValue; - contentValue: ContentValue; - clickValue: ClickValue; -}): ItemHelper { - return useMemo( - () => new ItemHelper(params.classValue, params.contentValue, params.clickValue), - [params.classValue, params.contentValue, params.clickValue] - ); -} diff --git a/packages/pluggableWidgets/gallery-web/src/helpers/ItemPreviewHelper.tsx b/packages/pluggableWidgets/gallery-web/src/helpers/ItemPreviewHelper.tsx deleted file mode 100644 index 1f208233e0..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/helpers/ItemPreviewHelper.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { ObjectItem } from "mendix"; -import { ReactNode, useMemo } from "react"; -import { GalleryItemHelper } from "../typings/GalleryItem"; -import { GalleryPreviewProps } from "../../typings/GalleryProps"; -import { ListItemButton } from "../components/ListItemButton"; - -type ContentValue = GalleryPreviewProps["content"]; - -export class ItemPreviewHelper implements GalleryItemHelper { - private _contentValue: ContentValue; - private _dropZoneCaption: string; - private _hasOnClick: boolean; - - constructor(contentValue: ContentValue, dropZoneCaption: string, hasOnClick: boolean) { - this._contentValue = contentValue; - this._dropZoneCaption = dropZoneCaption; - this._hasOnClick = hasOnClick; - } - - itemClass(_: ObjectItem): string | undefined { - return undefined; - } - - render(_: ObjectItem): ReactNode { - const { renderer: Renderer } = this._contentValue; - - const content = ( - -
- - ); - - if (this._hasOnClick) { - return {content}; - } - - return content; - } - - hasOnClick(_: ObjectItem): boolean { - return this._hasOnClick; - } -} - -export function useItemPreviewHelper(params: { contentValue: ContentValue; hasOnClick: boolean }): ItemPreviewHelper { - return useMemo( - () => new ItemPreviewHelper(params.contentValue, "Gallery item: Place widgets here", params.hasOnClick), - [params.contentValue, params.hasOnClick] - ); -} diff --git a/packages/pluggableWidgets/gallery-web/src/helpers/root-context.ts b/packages/pluggableWidgets/gallery-web/src/helpers/root-context.ts deleted file mode 100644 index a6b6611afb..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/helpers/root-context.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/main"; -import { SelectActionHandler, SelectionHelper } from "@mendix/widget-plugin-grid/selection"; -import { createContext, useContext } from "react"; -import { GalleryStore } from "../stores/GalleryStore"; - -export interface GalleryRootScope { - rootStore: GalleryStore; - selectionCountStore: SelectionCounterViewModel; - selectionHelper: SelectionHelper | undefined; - itemSelectHelper: SelectActionHandler; -} - -export const GalleryContext = createContext(null); - -export const useGalleryRootScope = (): GalleryRootScope => { - const contextValue = useContext(GalleryContext); - if (!contextValue) { - throw new Error("useGalleryRootContext must be used within a root context provider"); - } - return contextValue; -}; diff --git a/packages/pluggableWidgets/gallery-web/src/helpers/useGalleryJSActions.ts b/packages/pluggableWidgets/gallery-web/src/helpers/useGalleryJSActions.ts deleted file mode 100644 index 925a5d2583..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/helpers/useGalleryJSActions.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { useOnClearSelectionEvent, useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks"; -import { SelectActionHandler } from "@mendix/widget-plugin-grid/selection"; -import { GalleryStore } from "../stores/GalleryStore"; - -export function useGalleryJSActions(root: GalleryStore, selectActionHelper?: SelectActionHandler): void { - useOnResetFiltersEvent(root.name, root.id); - useOnClearSelectionEvent({ - widgetName: root.name, - listener: () => selectActionHelper?.onClearSelection() - }); -} diff --git a/packages/pluggableWidgets/gallery-web/src/helpers/useGalleryStore.ts b/packages/pluggableWidgets/gallery-web/src/helpers/useGalleryStore.ts deleted file mode 100644 index 4e18905962..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/helpers/useGalleryStore.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider"; -import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst"; -import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup"; -import { useEffect } from "react"; -import { GalleryContainerProps } from "../../typings/GalleryProps"; -import { GalleryPropsGate, GalleryStore } from "../stores/GalleryStore"; - -export function useGalleryStore(props: GalleryContainerProps): GalleryStore { - const gate = useGate(props); - const store = useSetup(() => new GalleryStore({ gate, ...props })); - return store; -} - -function useGate(props: GalleryContainerProps): GalleryPropsGate { - const gateProvider = useConst(() => new GateProvider(props)); - useEffect(() => gateProvider.setProps(props)); - return gateProvider.gate; -} diff --git a/packages/pluggableWidgets/gallery-web/src/helpers/useItemSelectHelper.ts b/packages/pluggableWidgets/gallery-web/src/helpers/useItemSelectHelper.ts deleted file mode 100644 index 050128f4e0..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/helpers/useItemSelectHelper.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useMemo } from "react"; -import { SelectActionHandler, SelectionHelper, WidgetSelectionProperty } from "@mendix/widget-plugin-grid/selection"; - -export function useItemSelectHelper( - selection: WidgetSelectionProperty, - selectionHelper: SelectionHelper | undefined -): SelectActionHandler { - // eslint-disable-next-line react-hooks/exhaustive-deps - return useMemo(() => new SelectActionHandler(selection, selectionHelper), [selectionHelper]); -} diff --git a/packages/pluggableWidgets/gallery-web/src/model/configs/Gallery.config.ts b/packages/pluggableWidgets/gallery-web/src/model/configs/Gallery.config.ts new file mode 100644 index 0000000000..7421723073 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/Gallery.config.ts @@ -0,0 +1,55 @@ +import { SelectionMode, SelectionType } from "@mendix/widget-plugin-grid/selection"; +import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; +import { GalleryContainerProps } from "../../../typings/GalleryProps"; + +export interface GalleryConfig { + id: string; + name: string; + // datasource + refreshIntervalMs: number; + // selection + selectionEnabled: boolean; + selectionType: SelectionType; + selectionMode: SelectionMode; + keepSelection: boolean; + autoSelect: boolean; + // settings + settingsStorageEnabled: boolean; + // grid settings + desktopItems: number; + tabletItems: number; + phoneItems: number; + filtersChannelName: string; +} + +export function galleryConfig(props: GalleryContainerProps): GalleryConfig { + const id = `${props.name}:Gallery@${generateUUID()}`; + + return { + id, + name: props.name, + refreshIntervalMs: 0, + selectionEnabled: isSelectionEnabled(props), + selectionType: selectionType(props), + selectionMode: props.itemSelectionMode, + keepSelection: props.keepSelection, + autoSelect: isAutoSelectEnabled(props), + settingsStorageEnabled: false, + desktopItems: props.desktopItems, + tabletItems: props.tabletItems, + phoneItems: props.phoneItems, + filtersChannelName: `${id}:events` + }; +} + +function isSelectionEnabled(props: GalleryContainerProps): boolean { + return props.itemSelection !== undefined; +} + +function selectionType(props: GalleryContainerProps): SelectionType { + return props.itemSelection ? props.itemSelection.type : "None"; +} + +function isAutoSelectEnabled(props: GalleryContainerProps): boolean { + return props.itemSelection?.type === "Multi" && props.autoSelect; +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts b/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts new file mode 100644 index 0000000000..8c3139b681 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts @@ -0,0 +1,62 @@ +import { PaginationEnum, PagingPositionEnum, ShowPagingButtonsEnum } from "../../../typings/GalleryProps"; +import { GalleryGateProps } from "../../typings/GalleryGateProps"; + +export interface GalleryPaginationConfig { + constPageSize: number; + customPaginationEnabled: boolean; + dynamicPageEnabled: boolean; + dynamicPageSizeEnabled: boolean; + isLimitBased: boolean; + isVirtualScrolling: boolean; + pagination: PaginationEnum; + paginationKind: PaginationKind; + pagingPosition: PagingPositionEnum; + requestTotalCount: boolean; + showPagingButtons: ShowPagingButtonsEnum; + showNumberOfItems: boolean; +} + +export type PaginationKind = `${PaginationEnum}.${ShowPagingButtonsEnum}` | "custom"; + +export function galleryPaginationConfig(props: GalleryGateProps): GalleryPaginationConfig { + const config: GalleryPaginationConfig = { + constPageSize: props.pageSize, + customPaginationEnabled: paginationKind(props) === "custom", + dynamicPageEnabled: dynamicPageEnabled(props), + dynamicPageSizeEnabled: dynamicPageSizeEnabled(props), + isLimitBased: isLimitBased(props), + isVirtualScrolling: props.pagination === "virtualScrolling", + pagination: props.pagination, + paginationKind: paginationKind(props), + pagingPosition: props.pagingPosition, + requestTotalCount: requestTotalCount(props), + showPagingButtons: props.showPagingButtons, + showNumberOfItems: props.showTotalCount + }; + + return Object.freeze(config); +} + +export function paginationKind(props: GalleryGateProps): PaginationKind { + if (props.useCustomPagination) { + return "custom"; + } + + return `${props.pagination}.${props.showPagingButtons}`; +} + +function isLimitBased(props: GalleryGateProps): boolean { + return props.pagination === "virtualScrolling" || props.pagination === "loadMore"; +} + +export function dynamicPageSizeEnabled(props: GalleryGateProps): boolean { + return props.dynamicPageSize !== undefined && !isLimitBased(props); +} + +export function dynamicPageEnabled(props: GalleryGateProps): boolean { + return props.dynamicPage !== undefined && !isLimitBased(props); +} + +function requestTotalCount(props: GalleryGateProps): boolean { + return props.pagination === "buttons" || props.showTotalCount; +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/configs/GallerySettings.config.ts b/packages/pluggableWidgets/gallery-web/src/model/configs/GallerySettings.config.ts new file mode 100644 index 0000000000..132f037a55 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/GallerySettings.config.ts @@ -0,0 +1,28 @@ +import { GalleryGateProps } from "../../typings/GalleryGateProps"; + +export interface GallerySettingsConfig { + storeFilters: boolean; + storeSort: boolean; + settingsSyncEnabled: boolean; +} + +export function settingsConfig(props: GalleryGateProps): GallerySettingsConfig { + return Object.freeze({ + storeFilters: props.storeFilters, + storeSort: props.storeSort, + settingsSyncEnabled: isSettingsSyncEnabled(props) + }); +} + +function isSettingsSyncEnabled(props: GalleryGateProps): boolean { + switch (props.stateStorageType) { + case "localStorage": { + return true; + } + case "attribute": { + return props.stateStorageAttr !== undefined; + } + default: + return false; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/configs/__tests__/GalleryPagination.config.spec.ts b/packages/pluggableWidgets/gallery-web/src/model/configs/__tests__/GalleryPagination.config.spec.ts new file mode 100644 index 0000000000..5df79cba32 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/__tests__/GalleryPagination.config.spec.ts @@ -0,0 +1,12 @@ +import { mockContainerProps } from "../../../utils/mock-container-props"; +import { galleryPaginationConfig } from "../GalleryPagination.config"; + +describe("galleryPaginationConfig", () => { + it("should create a frozen config object based on props", () => { + const props = mockContainerProps(); + const config = galleryPaginationConfig(props); + + expect(Object.isFrozen(config)).toBe(true); + // expect(config).toMatchSnapshot(); + }); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts new file mode 100644 index 0000000000..b99b961362 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts @@ -0,0 +1,360 @@ +import { WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context"; +import { CombinedFilter } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter"; +import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost"; +import { + createClickActionHelper, + createFocusController, + createSelectionHelper, + DatasourceService, + SelectActionsProvider +} from "@mendix/widget-plugin-grid/main"; +import { + createSetPageAction, + createSetPageSizeAction, + currentPageAtom, + customPaginationAtom, + dynamicPageAtom, + dynamicPageSizeAtom, + DynamicPaginationFeature, + PageControlService, + pageSizeAtom, + PaginationViewModel +} from "@mendix/widget-plugin-grid/pagination/main"; +import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms"; +import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; +import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost"; +import { Container, injected } from "brandi"; +import { createItemEventsVMAtom } from "../../features/item-interaction/ItemEvents.viewModel"; +import { createSettingsStorage } from "../../features/settings-storage/create-settings-storage"; +import { GallerySettingsSyncService } from "../../features/settings-storage/GallerySettingsSync.service"; +import { GalleryGateProps } from "../../typings/GalleryGateProps"; +import { EmptyPlaceholderViewModel } from "../../view-models/EmptyPlaceholder.viewModel"; +import { GalleryItemViewModel } from "../../view-models/GalleryItem.viewModel"; +import { GalleryRootViewModel } from "../../view-models/GalleryRoot.viewModel"; +import { GalleryConfig } from "../configs/Gallery.config"; +import { galleryPaginationConfig } from "../configs/GalleryPagination.config"; +import { settingsConfig } from "../configs/GallerySettings.config"; +import { itemsAtom } from "../models/items.model"; +import { layoutAtom, numberOfColumnsAtom } from "../models/layout.model"; +import { LayoutService } from "../services/Layout.service"; +import { LoaderService } from "../services/Loader.service"; +import { QueryParamsService } from "../services/QueryParams.service"; +import { SelectionGate } from "../services/SelectionGate.service"; +import { TextsService } from "../services/Texts.service"; +import { CORE_TOKENS as CORE, GY_TOKENS as GY } from "../tokens"; + +interface InitDependencies { + props: GalleryGateProps; + mainGate: DerivedPropsGate; + config: GalleryConfig; +} + +/** Just little utility object to group related bindings */ +interface BindingGroup { + /** Runs during container constructor. Use this hook to add new binding to the container. */ + define?(container: Container): void; + /** Runs on container init with deps. Use this hook to bind constants, configs and values that depend on props. */ + init?(container: Container, deps: InitDependencies): void; + /** This method runs after init phase. Use this hook to init instances and other "bootstrapping" work. */ + postInit?(container: Container, deps: InitDependencies): void; + /** This method runs only once. Should be used to inject dependencies. */ + inject?(): void; +} + +const _01_coreBindings: BindingGroup = { + inject() { + injected(itemsAtom, CORE.mainGate); + injected(TextsService, CORE.mainGate); + }, + init(container, { mainGate, config }) { + container.bind(CORE.mainGate).toConstant(mainGate); + container.bind(CORE.config).toConstant(config); + container.bind(CORE.items).toInstance(itemsAtom).inTransientScope(); + container.bind(CORE.texts).toInstance(TextsService).inTransientScope(); + } +}; + +const _02_queryBindings: BindingGroup = { + inject() { + injected(DatasourceService, CORE.setupService, GY.queryGate, GY.refreshInterval.optional); + injected(QueryParamsService, CORE.setupService, GY.query, GY.combinedFilter, GY.sortHost); + }, + define(container: Container) { + container.bind(GY.query).toInstance(DatasourceService).inSingletonScope(); + container.bind(GY.queryParams).toInstance(QueryParamsService).inSingletonScope(); + }, + init(container, { mainGate }) { + container.bind(GY.queryGate).toConstant(mainGate); + }, + postInit(container) { + // Create param service instance. + container.get(GY.queryParams); + } +}; + +const _03_filterBindings: BindingGroup = { + inject() { + injected(CombinedFilter, CORE.setupService, GY.combinedFilterConfig); + injected(WidgetFilterAPI, GY.parentChannelName, GY.filterHost); + }, + define(container: Container) { + container.bind(GY.filterAPI).toInstance(WidgetFilterAPI).inSingletonScope(); + container.bind(GY.filterHost).toInstance(CustomFilterHost).inSingletonScope(); + container.bind(GY.combinedFilter).toInstance(CombinedFilter).inSingletonScope(); + }, + init(container, { config }) { + container.bind(GY.parentChannelName).toConstant(config.filtersChannelName); + container.bind(GY.combinedFilterConfig).toConstant({ + stableKey: config.name, + inputs: [container.get(GY.filterHost)] + }); + }, + postInit(container, { props }) { + // Hydrate filters from props + container.get(GY.combinedFilter).hydrate(props.datasource.filter); + } +}; + +const _04_sortBindings: BindingGroup = { + inject() { + injected(SortStoreHost, GY.sortHostConfig.optional); + }, + define(container) { + container.bind(GY.sortHost).toInstance(SortStoreHost).inSingletonScope(); + }, + init(container, { props }) { + container.bind(GY.sortHostConfig).toConstant({ initSort: props.datasource.sortOrder }); + container.bind(GY.sortAPI).toConstant({ + version: 1, + host: container.get(GY.sortHost) as SortStoreHost + }); + } +}; + +const _05_viewBindings: BindingGroup = { + inject() { + injected(GalleryRootViewModel, CORE.mainGate); + injected(GalleryItemViewModel, CORE.mainGate); + injected(EmptyPlaceholderViewModel, CORE.mainGate, CORE.data.itemCount); + }, + define(container) { + container.bind(GY.galleryRootVM).toInstance(GalleryRootViewModel).inTransientScope(); + container.bind(GY.galleryItemVM).toInstance(GalleryItemViewModel).inTransientScope(); + container.bind(GY.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inTransientScope(); + } +}; + +const _06_loaderBindings: BindingGroup = { + inject() { + injected(LoaderService, GY.query, GY.loaderConfig); + }, + define(container: Container) { + container.bind(GY.loader).toInstance(LoaderService).inSingletonScope(); + }, + init(container, { props }) { + container.bind(GY.loaderConfig).toConstant({ + refreshIndicator: props.refreshIndicator, + showSilentRefresh: props.refreshInterval > 1 + }); + }, + postInit(container) { + container.get(GY.loader); + } +}; + +const _07_selectionBindings: BindingGroup = { + inject() { + injected( + SelectionCounterViewModel, + CORE.selection.selectedCount, + CORE.selection.selectedCounterTextsStore, + GY.selectionCounterConfig.optional + ); + injected(SelectionGate, CORE.mainGate); + injected(createSelectionHelper, CORE.setupService, GY.selectionGate, CORE.config.optional); + injected(SelectActionsProvider, GY.selectionType, GY.selectionHelper); + }, + define(container: Container) { + container.bind(GY.selectionCounterVM).toInstance(SelectionCounterViewModel).inSingletonScope(); + container.bind(GY.selectionGate).toInstance(SelectionGate).inTransientScope(); + container.bind(GY.selectActions).toInstance(SelectActionsProvider).inSingletonScope(); + container.bind(GY.selectionHelper).toInstance(createSelectionHelper).inSingletonScope(); + }, + init(container, { props, config }) { + container.bind(GY.selectionCounterConfig).toConstant({ position: props.selectionCountPosition }); + container.bind(GY.selectionType).toConstant(config.selectionType); + }, + postInit(container, { config }) { + // Create selection helper if selection is enabled + if (config.selectionEnabled) { + container.get(GY.selectionHelper); + } else { + container.bind(GY.selectionHelper).toConstant(null); + } + } +}; + +const _08_paginationBindings: BindingGroup = { + inject() { + injected(createSetPageAction, GY.query, GY.paging.paginationConfig, GY.paging.currentPage, GY.paging.pageSize); + injected( + createSetPageSizeAction, + GY.query, + GY.paging.paginationConfig, + GY.paging.currentPage, + CORE.pageSizeStore, + GY.paging.setPageAction + ); + injected(currentPageAtom, GY.query, GY.paging.pageSize, GY.paging.paginationConfig); + injected(dynamicPageAtom, CORE.mainGate, GY.paging.paginationConfig); + injected(dynamicPageSizeAtom, CORE.mainGate); + injected(PageControlService, CORE.mainGate, GY.paging.setPageSizeAction, GY.paging.setPageAction); + injected(pageSizeAtom, CORE.pageSizeStore); + injected( + PaginationViewModel, + GY.paging.paginationConfig, + GY.query, + GY.paging.currentPage, + GY.paging.pageSize, + GY.paging.setPageAction + ); + injected( + DynamicPaginationFeature, + CORE.setupService, + GY.paging.paginationConfig, + GY.paging.dynamicPage, + GY.paging.dynamicPageSize, + CORE.data.totalCount, + GY.paging.pageControl + ); + injected(customPaginationAtom, CORE.mainGate); + }, + define(container: Container) { + container.bind(GY.paging.currentPage).toInstance(currentPageAtom).inTransientScope(); + container.bind(GY.paging.customPagination).toInstance(customPaginationAtom).inTransientScope(); + container.bind(GY.paging.dynamicPage).toInstance(dynamicPageAtom).inTransientScope(); + container.bind(GY.paging.dynamicPageSize).toInstance(dynamicPageSizeAtom).inTransientScope(); + container.bind(GY.paging.dynamicPagination).toInstance(DynamicPaginationFeature).inSingletonScope(); + container.bind(GY.paging.pageControl).toInstance(PageControlService).inSingletonScope(); + container.bind(GY.paging.pageSize).toInstance(pageSizeAtom).inTransientScope(); + container.bind(GY.paging.paginationVM).toInstance(PaginationViewModel).inTransientScope(); + container.bind(GY.paging.setPageAction).toInstance(createSetPageAction).inSingletonScope(); + container.bind(GY.paging.setPageSizeAction).toInstance(createSetPageSizeAction).inSingletonScope(); + }, + init(container, { props }) { + const config = galleryPaginationConfig(props); + container.bind(GY.paging.paginationConfig).toConstant(config); + container.bind(CORE.initPageSize).toConstant(config.constPageSize); + }, + postInit(container) { + const config = container.get(GY.paging.paginationConfig); + const query = container.get(GY.query); + query.requestTotalCount(config.requestTotalCount); + query.setBaseLimit(config.constPageSize); + container.get(GY.paging.dynamicPagination); // Enable dynamic pagination feature + } +}; + +const _09_itemEventsBindings: BindingGroup = { + inject() { + injected(createClickActionHelper, CORE.setupService, CORE.mainGate); + injected(createFocusController, CORE.setupService, GY.virtualLayout); + injected(LayoutService, CORE.setupService, CORE.config, CORE.data.itemCount); + injected(layoutAtom, GY.layoutService, GY.paging.pageSize); + injected(numberOfColumnsAtom, GY.layoutService); + injected( + createItemEventsVMAtom, + CORE.config, + GY.selectActions, + GY.clickActionHelper, + GY.keyNavFocusService, + GY.numberOfColumns + ); + }, + define(container: Container) { + container.bind(GY.clickActionHelper).toInstance(createClickActionHelper).inSingletonScope(); + container.bind(GY.virtualLayout).toInstance(layoutAtom).inTransientScope(); + container.bind(GY.keyNavFocusService).toInstance(createFocusController).inSingletonScope(); + container.bind(GY.layoutService).toInstance(LayoutService).inSingletonScope(); + container.bind(GY.numberOfColumns).toInstance(numberOfColumnsAtom).inTransientScope(); + container.bind(GY.itemEventsVM).toInstance(createItemEventsVMAtom).inTransientScope(); + }, + init(container, { mainGate }) { + container.bind(CORE.mainGate).toConstant(mainGate); + } +}; + +const _10_settingsBindings: BindingGroup = { + inject() { + injected(createSettingsStorage, CORE.setupService, CORE.mainGate); + injected( + GallerySettingsSyncService, + CORE.setupService, + GY.filterHost, + GY.sortHost, + GY.settingsStorage, + GY.settingsConfig + ); + }, + define(container) { + container.bind(GY.settingsStorage).toInstance(createSettingsStorage).inSingletonScope(); + container.bind(GY.settingsService).toInstance(GallerySettingsSyncService).inSingletonScope(); + }, + init(container, { props }) { + const config = settingsConfig(props); + container.bind(GY.settingsConfig).toConstant(config); + + if (config.settingsSyncEnabled) { + // Start settings sync + container.get(GY.settingsService); + } + } +}; + +const groups = [ + _01_coreBindings, + _02_queryBindings, + _03_filterBindings, + _04_sortBindings, + _05_viewBindings, + _06_loaderBindings, + _07_selectionBindings, + _08_paginationBindings, + _09_itemEventsBindings, + _10_settingsBindings +]; + +// Inject tokens from groups +for (const grp of groups) { + grp.inject?.(); +} + +export class GalleryContainer extends Container { + id = `GalleryContainer@${generateUUID()}`; + + constructor(root: Container) { + super(); + this.extend(root); + + for (const grp of groups) { + grp.define?.(this); + } + } + + init(dependencies: { + props: GalleryGateProps; + mainGate: DerivedPropsGate; + config: GalleryConfig; + }): GalleryContainer { + for (const grp of groups) { + grp.init?.(this, dependencies); + } + + for (const grp of groups) { + grp.postInit?.(this, dependencies); + } + + return this; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts new file mode 100644 index 0000000000..792da15c84 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts @@ -0,0 +1,102 @@ +import { + hasMoreItemsAtom, + isAllItemsPresentAtom, + itemCountAtom, + limitAtom, + offsetAtom, + totalCountAtom +} from "@mendix/widget-plugin-grid/core/models/datasource.model"; +import { + isAllItemsSelectedAtom, + isCurrentPageSelectedAtom, + selectedCountMultiAtom, + selectionCounterTextsStore +} from "@mendix/widget-plugin-grid/core/models/selection.model"; +import { PageSizeStore } from "@mendix/widget-plugin-grid/pagination/main"; +import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; +import { Container, injected } from "brandi"; +import { GallerySetupService } from "../services/GallerySetup.service"; +import { TextsService } from "../services/Texts.service"; +import { CORE_TOKENS as CORE } from "../tokens"; +interface BindingGroup { + /** Runs during container constructor. Use this hook to add new binding to the container. */ + define?(container: Container): void; + /** This method runs only once. Should be used to inject dependencies. */ + inject?(): void; +} + +const _01_datasourceBindings: BindingGroup = { + inject() { + injected(hasMoreItemsAtom, CORE.mainGate); + injected(itemCountAtom, CORE.mainGate); + injected(limitAtom, CORE.mainGate); + injected(offsetAtom, CORE.mainGate); + injected(totalCountAtom, CORE.mainGate); + injected(isAllItemsPresentAtom, CORE.data.offset, CORE.data.hasMoreItems); + injected(selectedCountMultiAtom, CORE.mainGate); + injected(selectionCounterTextsStore, CORE.mainGate, CORE.selection.selectedCount); + }, + define(container: Container) { + container.bind(CORE.data.hasMoreItems).toInstance(hasMoreItemsAtom).inTransientScope(); + container.bind(CORE.data.itemCount).toInstance(itemCountAtom).inTransientScope(); + container.bind(CORE.data.limit).toInstance(limitAtom).inTransientScope(); + container.bind(CORE.data.offset).toInstance(offsetAtom).inTransientScope(); + container.bind(CORE.data.totalCount).toInstance(totalCountAtom).inTransientScope(); + container.bind(CORE.data.isAllItemsPresent).toInstance(isAllItemsPresentAtom).inTransientScope(); + container.bind(CORE.selection.selectedCount).toInstance(selectedCountMultiAtom).inTransientScope(); + } +}; + +const _02_selectionBindings: BindingGroup = { + define(container: Container) { + container.bind(CORE.selection.selectedCount).toInstance(selectedCountMultiAtom).inTransientScope(); + container.bind(CORE.selection.isCurrentPageSelected).toInstance(isCurrentPageSelectedAtom).inTransientScope(); + container + .bind(CORE.selection.selectedCounterTextsStore) + .toInstance(selectionCounterTextsStore) + .inTransientScope(); + container.bind(CORE.selection.isAllItemsSelected).toInstance(isAllItemsSelectedAtom).inTransientScope(); + } +}; + +const _03_paginationBindings: BindingGroup = { + inject() { + injected(PageSizeStore, CORE.initPageSize.optional); + }, + define(container: Container) { + container.bind(CORE.pageSizeStore).toInstance(PageSizeStore).inSingletonScope(); + } +}; + +const _04_textsBindings: BindingGroup = { + define(container: Container) { + container.bind(CORE.texts).toInstance(TextsService).inTransientScope(); + } +}; + +const groups = [_01_datasourceBindings, _02_selectionBindings, _03_paginationBindings, _04_textsBindings]; + +// Inject tokens from groups +for (const grp of groups) { + grp.inject?.(); +} + +/** + * Root container for bindings that can be shared down the hierarchy. + * Declare only bindings that needs to be shared across multiple containers. + * @remark Don't bind constants or directly prop-dependent values here. + * Prop-derived atoms/stores via dependency injection are acceptable. + */ +export class RootContainer extends Container { + id = `GalleryRootContainer@${generateUUID()}`; + constructor() { + super(); + + // Setup service + this.bind(CORE.setupService).toInstance(GallerySetupService).inSingletonScope(); + + for (const grp of groups) { + grp.define?.(this); + } + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/containers/__tests__/createGalleryContainer.spec.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/__tests__/createGalleryContainer.spec.ts new file mode 100644 index 0000000000..ea9431efd0 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/__tests__/createGalleryContainer.spec.ts @@ -0,0 +1,65 @@ +import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider"; +import { list } from "@mendix/widget-plugin-test-utils"; +import { SelectionSingleValue } from "mendix"; +import { mockContainerProps } from "../../../utils/mock-container-props"; +import { CORE_TOKENS as CORE, GY_TOKENS as GY } from "../../tokens"; +import { createGalleryContainer } from "../createGalleryContainer"; +import { GalleryContainer } from "../Gallery.container"; + +describe("createGalleryContainer", () => { + it("should create container with mock props", () => { + const [container, gateProvider] = createGalleryContainer(mockContainerProps()); + + expect(container).toBeInstanceOf(GalleryContainer); + expect(gateProvider).toBeInstanceOf(GateProvider); + }); + + it("should bind main provider gate to the container", () => { + const [container, gateProvider] = createGalleryContainer(mockContainerProps()); + + expect(container.get(CORE.mainGate)).toBe(gateProvider.gate); + }); + + it("bind itemCount to computed value", () => { + const [container] = createGalleryContainer(mockContainerProps()); + + const itemsCount = container.get(CORE.data.itemCount); + expect(itemsCount.get()).toBe(20); + }); + + it("should create selection helper", () => { + const selection = { type: "Single", selection: undefined } as SelectionSingleValue; + const [container] = createGalleryContainer({ ...mockContainerProps(), itemSelection: selection }); + const helper = container.get(GY.selectionHelper)!; + expect(helper.type).toBe("Single"); + expect(helper.isSelected({ id: 42 } as any)).toBe(false); + }); + + it("reacts to datasource changes in itemCount", () => { + const [container, gateProvider] = createGalleryContainer(mockContainerProps()); + + const itemsCount = container.get(CORE.data.itemCount); + + expect(itemsCount.get()).toBe(20); + + gateProvider.setProps({ + ...mockContainerProps(), + datasource: list(10) + }); + + expect(itemsCount.get()).toBe(10); + }); + + it("bind gallery config to the container", () => { + const props = mockContainerProps(); + const [container] = createGalleryContainer(props); + + const config = container.get(CORE.config); + expect(config).toBeDefined(); + expect(config).toMatchObject({ + name: "gallery_1", + refreshIntervalMs: 0, + selectionEnabled: false + }); + }); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/model/containers/createGalleryContainer.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/createGalleryContainer.ts new file mode 100644 index 0000000000..bec6051ae6 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/createGalleryContainer.ts @@ -0,0 +1,21 @@ +import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider"; +import { GalleryContainerProps } from "../../../typings/GalleryProps"; +import { GalleryGateProps } from "../../typings/GalleryGateProps"; +import { galleryConfig } from "../configs/Gallery.config"; +import { GalleryContainer } from "./Gallery.container"; +import { RootContainer } from "./Root.container"; + +export function createGalleryContainer( + props: GalleryContainerProps +): [GalleryContainer, GateProvider] { + const root = new RootContainer(); + const config = galleryConfig(props); + const mainProvider = new GateProvider(props); + const container = new GalleryContainer(root).init({ + props, + config, + mainGate: mainProvider.gate + }); + + return [container, mainProvider]; +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts new file mode 100644 index 0000000000..fbb866c3b5 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts @@ -0,0 +1,30 @@ +import { createInjectionHooks } from "brandi-react"; +import { CORE_TOKENS as CORE, GY_TOKENS as GY } from "../tokens"; + +export const [useGalleryRootVM] = createInjectionHooks(GY.galleryRootVM); +export const [useGalleryItemVM] = createInjectionHooks(GY.galleryItemVM); +export const [useEmptyPlaceholderVM] = createInjectionHooks(GY.emptyPlaceholderVM); + +export const [useMainGate] = createInjectionHooks(CORE.mainGate); +export const [useItems] = createInjectionHooks(CORE.items); +export const [useGalleryConfig] = createInjectionHooks(CORE.config); + +export const [useSelectActions] = createInjectionHooks(GY.selectActions); +export const [useSelectionHelper] = createInjectionHooks(GY.selectionHelper); + +export const [usePaginationConfig] = createInjectionHooks(GY.paging.paginationConfig); +export const [usePaginationVM] = createInjectionHooks(GY.paging.paginationVM); + +export const [useFilterAPI] = createInjectionHooks(GY.filterAPI); + +export const [useSortAPI] = createInjectionHooks(GY.sortAPI); + +export const [useTextsService] = createInjectionHooks(CORE.texts); + +export const [useKeyNavFocus] = createInjectionHooks(GY.keyNavFocusService); +export const [useItemEventsVM] = createInjectionHooks(GY.itemEventsVM); +export const [useLayoutService] = createInjectionHooks(GY.layoutService); + +export const [useLoaderViewModel] = createInjectionHooks(GY.loader); + +export const [useCustomPagination] = createInjectionHooks(GY.paging.customPagination); diff --git a/packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts b/packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts new file mode 100644 index 0000000000..e246f40185 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts @@ -0,0 +1,19 @@ +import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst"; +import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup"; + +import { Container } from "brandi"; +import { useEffect } from "react"; +import { GalleryContainerProps } from "../../../typings/GalleryProps"; +import { createGalleryContainer } from "../containers/createGalleryContainer"; +import { CORE_TOKENS as CORE } from "../tokens"; + +export function useGalleryContainer(props: GalleryContainerProps): Container { + const [container, mainProvider] = useConst(() => createGalleryContainer(props)); + + // Run setup hooks on mount + useSetup(() => container.get(CORE.setupService)); + + useEffect(() => mainProvider.setProps(props)); + + return container; +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/models/items.model.ts b/packages/pluggableWidgets/gallery-web/src/model/models/items.model.ts new file mode 100644 index 0000000000..f25fbebbf0 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/models/items.model.ts @@ -0,0 +1,11 @@ +import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { ObjectItem } from "mendix"; +import { computed } from "mobx"; +import { GalleryGateProps } from "../../typings/GalleryGateProps"; + +/** @injectable */ +export function itemsAtom(gate: DerivedPropsGate): ComputedAtom { + return computed(() => { + return gate.props.datasource?.items ?? []; + }); +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts b/packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts new file mode 100644 index 0000000000..eef1fb5d1b --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts @@ -0,0 +1,24 @@ +import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout"; +import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main"; +import { computed } from "mobx"; + +/** @injectable */ +export function layoutAtom( + layoutStore: { + numberOfRows: number; + numberOfColumns: number; + }, + pageSize: ComputedAtom +): ComputedAtom { + return computed( + () => { + return new VirtualGridLayout(layoutStore.numberOfRows, layoutStore.numberOfColumns, pageSize.get()); + }, + { name: "[gallery]:@computed:layoutAtom" } + ); +} + +/** @injectable */ +export function numberOfColumnsAtom(layoutStore: { numberOfColumns: number }): ComputedAtom { + return computed(() => layoutStore.numberOfColumns); +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/services/GallerySetup.service.ts b/packages/pluggableWidgets/gallery-web/src/model/services/GallerySetup.service.ts new file mode 100644 index 0000000000..5676a32616 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/services/GallerySetup.service.ts @@ -0,0 +1,4 @@ +import { SetupHost } from "@mendix/widget-plugin-mobx-kit/SetupHost"; + +/** Host for components implemented setup hook */ +export class GallerySetupService extends SetupHost {} diff --git a/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts b/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts new file mode 100644 index 0000000000..d50369eb90 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts @@ -0,0 +1,85 @@ +import { getColumnAndRowBasedOnIndex, PositionInGrid } from "@mendix/widget-plugin-grid/selection"; +import { ComputedAtom, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; +import { action, computed, makeAutoObservable } from "mobx"; +import { GalleryContainerProps } from "../../../typings/GalleryProps"; + +type Breakpoint = "desktop" | "tablet" | "phone"; + +export class LayoutService implements SetupComponent { + private width: number; + private resizeListener: ((event: UIEvent) => void) | null = null; + + constructor( + host: SetupComponentHost, + private config: Pick, + private itemCount: ComputedAtom + ) { + host.add(this); + this.width = window.innerWidth; + + makeAutoObservable(this, { + setWidth: action, + numberOfColumns: computed, + numberOfRows: computed, + setup: false + }); + } + + setWidth(width: number): void { + this.width = width; + } + + setup(): () => void { + this.resizeListener = (event: UIEvent): void => { + this.setWidth((event.target as Window).innerWidth); + }; + + window.addEventListener("resize", this.resizeListener); + + return () => { + if (this.resizeListener) { + window.removeEventListener("resize", this.resizeListener); + this.resizeListener = null; + } + }; + } + + private mapBreakpoint(width: number): Breakpoint { + if (width < 768) { + return "phone"; + } + + if (width >= 768 && width < 992) { + return "tablet"; + } + + return "desktop"; + } + + private mapNumberOfColumns(breakpoint: Breakpoint): number { + return this.config[`${breakpoint}Items`]; + } + + get breakpoint(): Breakpoint { + return this.mapBreakpoint(this.width); + } + + get numberOfColumns(): number { + const cols = this.mapNumberOfColumns(this.breakpoint); + return Math.min(cols, this.itemCount.get()); + } + + get numberOfRows(): number { + return Math.ceil(this.itemCount.get() / this.numberOfColumns); + } + + get getPositionFn(): (itemIndex: number) => PositionInGrid { + const numberOfColumns = this.numberOfColumns; + const total = this.itemCount.get(); + const fn = (index: number): PositionInGrid => { + return getColumnAndRowBasedOnIndex(numberOfColumns, total, index); + }; + + return fn; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts b/packages/pluggableWidgets/gallery-web/src/model/services/Loader.service.ts similarity index 54% rename from packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts rename to packages/pluggableWidgets/gallery-web/src/model/services/Loader.service.ts index 0585e621db..468fa7fe45 100644 --- a/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Loader.service.ts @@ -1,11 +1,10 @@ -import { DatasourceService } from "@mendix/widget-plugin-grid/main"; +import { QueryService } from "@mendix/widget-plugin-grid/main"; import { computed, makeObservable } from "mobx"; -export class DerivedLoaderController { +export class LoaderService { constructor( - private datasourceService: DatasourceService, - private refreshIndicator: boolean, - private showSilentRefresh: boolean + private query: QueryService, + private config: { refreshIndicator: boolean; showSilentRefresh: boolean } ) { makeObservable(this, { isFirstLoad: computed, @@ -15,17 +14,17 @@ export class DerivedLoaderController { } get isFirstLoad(): boolean { - return this.datasourceService.isFirstLoad; + return this.query.isFirstLoad; } get isFetchingNextBatch(): boolean { - return this.datasourceService.isFetchingNextBatch; + return this.query.isFetchingNextBatch; } get isRefreshing(): boolean { - const { isSilentRefresh, isRefreshing } = this.datasourceService; + const { isSilentRefresh, isRefreshing } = this.query; - if (this.showSilentRefresh) { + if (this.config.showSilentRefresh) { return isSilentRefresh || isRefreshing; } @@ -33,7 +32,7 @@ export class DerivedLoaderController { } get showRefreshIndicator(): boolean { - if (!this.refreshIndicator) { + if (!this.config.refreshIndicator) { return false; } diff --git a/packages/pluggableWidgets/gallery-web/src/model/services/QueryParams.service.ts b/packages/pluggableWidgets/gallery-web/src/model/services/QueryParams.service.ts new file mode 100644 index 0000000000..15431e1f21 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/services/QueryParams.service.ts @@ -0,0 +1,44 @@ +import { QueryService } from "@mendix/widget-plugin-grid/main"; +import { disposeBatch, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; +import { SortInstruction } from "@mendix/widget-plugin-sorting/types/store"; +import { FilterCondition } from "mendix/filters"; +import { reaction } from "mobx"; + +interface ObservableFilterStore { + filter: FilterCondition | undefined; +} + +interface ObservableSortStore { + sortOrder: SortInstruction[] | undefined; +} + +export class QueryParamsService implements SetupComponent { + constructor( + host: SetupComponentHost, + private query: QueryService, + private filters: ObservableFilterStore, + private sort: ObservableSortStore + ) { + host.add(this); + } + + setup(): () => void { + const [add, disposeAll] = disposeBatch(); + add( + reaction( + () => this.sort.sortOrder, + sortOrder => this.query.setSortOrder(sortOrder), + { fireImmediately: true } + ) + ); + add( + reaction( + () => this.filters.filter, + filter => this.query.setFilter(filter), + { fireImmediately: true } + ) + ); + + return disposeAll; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/services/SelectionGate.service.ts b/packages/pluggableWidgets/gallery-web/src/model/services/SelectionGate.service.ts new file mode 100644 index 0000000000..431f91ad4c --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/services/SelectionGate.service.ts @@ -0,0 +1,17 @@ +import { SelectionDynamicProps } from "@mendix/widget-plugin-grid/main"; +import { DerivedPropsGate, MappedGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { GalleryGateProps } from "../../typings/GalleryGateProps"; + +export class SelectionGate extends MappedGate { + constructor(gate: DerivedPropsGate) { + super(gate, map); + } +} + +function map(props: GalleryGateProps): SelectionDynamicProps { + return { + selection: props.itemSelection, + datasource: props.datasource, + onSelectionChange: props.onSelectionChange + }; +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/services/Texts.service.ts b/packages/pluggableWidgets/gallery-web/src/model/services/Texts.service.ts new file mode 100644 index 0000000000..1c33612956 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Texts.service.ts @@ -0,0 +1,21 @@ +import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { makeAutoObservable } from "mobx"; +import { GalleryGateProps } from "../../typings/GalleryGateProps"; + +export class TextsService { + constructor(private gate: DerivedPropsGate) { + makeAutoObservable(this); + } + + get headerAriaLabel(): string | undefined { + return this.gate.props.filterSectionTitle?.value; + } + + get listboxAriaLabel(): string | undefined { + return this.gate.props.ariaLabelListBox?.value; + } + + get loadMoreCaption(): string | undefined { + return this.gate.props.loadMoreButtonCaption?.value; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/tokens.ts b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts new file mode 100644 index 0000000000..d5dcddd98b --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts @@ -0,0 +1,143 @@ +/** Tokens to resolve dependencies from the container. */ + +import { Serializable } from "@mendix/filter-commons/typings/settings"; +import { FilterAPI } from "@mendix/widget-plugin-filtering/context"; +import { CombinedFilter, CombinedFilterConfig } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter"; +import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost"; +import { ClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper"; +import { GridPageControl } from "@mendix/widget-plugin-grid/interfaces/GridPageControl"; +import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController"; +import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout"; +import { + QueryService, + SelectActionsService, + SelectionDynamicProps, + SelectionHelperService +} from "@mendix/widget-plugin-grid/main"; +import { + DynamicPaginationFeature, + PageSizeStore, + PaginationViewModel, + SetPageAction +} from "@mendix/widget-plugin-grid/pagination/main"; +import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms"; +import { ComputedAtom, DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; +import { SortAPI } from "@mendix/widget-plugin-sorting/react/context"; +import { SortInstruction } from "@mendix/widget-plugin-sorting/types/store"; +import { token } from "brandi"; +import { ListValue, ObjectItem } from "mendix"; +import { ReactNode } from "react"; +import { ItemEventsViewModel } from "../features/item-interaction/ItemEvents.viewModel"; +import { GallerySettingsSyncService } from "../features/settings-storage/GallerySettingsSync.service"; +import { ObservableStorage } from "../features/settings-storage/storage"; +import { GalleryGateProps } from "../typings/GalleryGateProps"; +import { EmptyPlaceholderViewModel } from "../view-models/EmptyPlaceholder.viewModel"; +import { GalleryItemViewModel } from "../view-models/GalleryItem.viewModel"; +import { GalleryRootViewModel } from "../view-models/GalleryRoot.viewModel"; +import { GalleryConfig } from "./configs/Gallery.config"; +import { GalleryPaginationConfig } from "./configs/GalleryPagination.config"; +import { GallerySettingsConfig } from "./configs/GallerySettings.config"; +import { LayoutService } from "./services/Layout.service"; +import { LoaderService } from "./services/Loader.service"; +import { QueryParamsService } from "./services/QueryParams.service"; +import { TextsService } from "./services/Texts.service"; + +const label = (name: string): string => `Gallery[${name}]`; + +/** Core tokens shared across containers through root container. */ +export const CORE_TOKENS = { + data: { + hasMoreItems: token>(label("@computed:hasMoreItems")), + itemCount: token>(label("@computed:itemCount")), + limit: token>(label("@computed:limit")), + offset: token>(label("@computed:offset")), + totalCount: token>(label("@computed:totalCount")), + isAllItemsPresent: token>(label("@computed:isAllItemsPresent")) + }, + + mainGate: token>(label("@gate:mainGate")), + setupService: token(label("@service:setupService")), + config: token(label("@config:galleryConfig")), + items: token>(label("@computed:items")), + + selection: { + selectedCount: token>(label("@computed:selectedCount")), + isAllItemsSelected: token>(label("@computed:isAllItemsSelected")), + isCurrentPageSelected: token>(label("@computed:isCurrentPageSelected")), + selectedCounterTextsStore: token<{ + clearSelectionButtonLabel: string; + selectedCountText: string; + }>(label("@store:selectedCounterTextsStore")) + }, + + // pagination + initPageSize: token(label("@const:initPageSize")), + pageSizeStore: token(label("@store:PageSizeStore")), + + // texts + texts: token(label("@service:texts")) +}; + +export const GY_TOKENS = { + // query + query: token(label("@service:query")), + queryGate: token>(label("@gate:queryGate")), + refreshInterval: token(label("@const:refreshInterval")), + queryParams: token(label("@service:queryParams")), + + // filtering + combinedFilter: token(label("@service:combinedFilter")), + combinedFilterConfig: token(label("@config:combinedFilterConfig")), + filterAPI: token(label("@service:filterAPI")), + filterHost: token(label("@service:filterHost")), + parentChannelName: token(label("@const:parentChannelName")), + + // sorting + sortAPI: token(label("@service:sortAPI")), + sortHost: token<{ sortOrder: SortInstruction[] | undefined } & Serializable>(label("@service:sortHost")), + sortHostConfig: token<{ initSort: SortInstruction[] }>(label("@config:sortHostConfig")), + + // view models + galleryRootVM: token(label("@viewModel:galleryRootVM")), + galleryItemVM: token(label("@viewModel:galleryItemVM")), + emptyPlaceholderVM: token(label("@viewModel:emptyPlaceholderVM")), + + // loader + loaderConfig: token<{ refreshIndicator: boolean; showSilentRefresh: boolean }>(label("@config:loaderConfig")), + loader: token(label("@service:loader")), + + // selection + selectionCounterConfig: token<{ position: "top" | "bottom" | "off" }>(label("@config:selectionCounterConfig")), + selectionCounterVM: token(label("@viewModel:selectionCounterVM")), + selectionGate: token>(label("@gate:selectionGate")), + selectionHelper: token(label("@service:selectionHelper")), + selectActions: token(label("@service:selectActions")), + selectionType: token<"Single" | "Multi" | "None">(label("@const:selectionType")), + + // keyboard navigation, layout and click + clickActionHelper: token(label("@service:clickActionHelper")), + itemEventsVM: token>(label("@service:itemEventsVM")), + keyNavFocusService: token(label("@service:keyNavFocusService")), + layoutService: token(label("@service:layoutService")), + numberOfColumns: token>(label("@computed:numberOfColumns")), + virtualLayout: token>(label("@computed:virtualLayout")), + + paging: { + currentPage: token>(label("@computed:currentPage")), + customPagination: token>(label("@computed:customPagination")), + dynamicPage: token>(label("@computed:dynamicPage")), + dynamicPageSize: token>(label("@computed:dynamicPageSize")), + dynamicPagination: token(label("@feature:dynamicPagination")), + pageControl: token(label("@service:pageControl")), + pageSize: token>(label("@computed:pageSize")), + paginationConfig: token(label("@config:paginationConfig")), + paginationVM: token(label("@viewModel:paginationVM")), + setPageAction: token("@action:setPage"), + setPageSizeAction: token("@action:setPageSize") + }, + + // settings storage + settingsStorage: token(label("@store:settingsStorage")), + settingsService: token(label("@store:settingsService")), + settingsConfig: token(label("@config:settingsConfig")) +}; diff --git a/packages/pluggableWidgets/gallery-web/src/services/PaginationController.ts b/packages/pluggableWidgets/gallery-web/src/services/PaginationController.ts deleted file mode 100644 index 1e8482edc7..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/services/PaginationController.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { QueryService } from "@mendix/widget-plugin-grid/main"; - -type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore"; - -type ShowPagingButtonsEnum = "always" | "auto"; - -type PaginationKind = `${PaginationEnum}.${ShowPagingButtonsEnum}`; - -interface StaticProps { - pageSize: number; - pagination: PaginationEnum; - showPagingButtons: ShowPagingButtonsEnum; - showTotalCount: boolean; -} - -/** NOTE: Use gate for dynamic props */ -type PaginationControllerSpec = StaticProps & { - query: QueryService; -}; - -export class PaginationController { - private readonly _pageSize: number; - private readonly _query: QueryService; - readonly pagination: PaginationEnum; - readonly paginationKind: PaginationKind; - readonly showPagingButtons: ShowPagingButtonsEnum; - readonly showTotalCount: boolean; - - constructor(spec: PaginationControllerSpec) { - this._pageSize = spec.pageSize; - this._query = spec.query; - this.pagination = spec.pagination; - this.showPagingButtons = spec.showPagingButtons; - this.showTotalCount = spec.showTotalCount; - this.paginationKind = `${this.pagination}.${this.showPagingButtons}`; - this._setInitParams(); - } - - get isLimitBased(): boolean { - return this.pagination === "virtualScrolling" || this.pagination === "loadMore"; - } - - get pageSize(): number { - return this._pageSize; - } - - get currentPage(): number { - const { - _query: { limit, offset }, - pageSize - } = this; - return this.isLimitBased ? limit / pageSize : offset / pageSize; - } - - get showPagination(): boolean { - switch (this.paginationKind) { - case "buttons.always": - return true; - case "buttons.auto": { - const { totalCount = -1 } = this._query; - return totalCount > this._query.limit; - } - default: - return this.showTotalCount; - } - } - - get hasMoreItems(): boolean { - return this._query.hasMoreItems; - } - - private _setInitParams(): void { - if (this.pagination === "buttons" || this.showTotalCount) { - this._query.requestTotalCount(true); - } - - this._query.setBaseLimit(this.pageSize); - } - - setPage = (computePage: (prevPage: number) => number): void => { - const newPage = computePage(this.currentPage); - if (this.isLimitBased) { - this._query.setLimit(newPage * this.pageSize); - } else { - this._query.setOffset(newPage * this.pageSize); - } - }; -} diff --git a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts b/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts deleted file mode 100644 index 448a280229..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { createContextWithStub, FilterAPI } from "@mendix/widget-plugin-filtering/context"; -import { CombinedFilter } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter"; -import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost"; -import { DatasourceService, SelectionCounterViewModel } from "@mendix/widget-plugin-grid/main"; - -import { DerivedPropsGate, SetupHost } from "@mendix/widget-plugin-mobx-kit/main"; -import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; -import { SortAPI } from "@mendix/widget-plugin-sorting/react/context"; -import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost"; -import { DynamicValue, EditableValue, ListValue, SelectionMultiValue, SelectionSingleValue } from "mendix"; -import { PaginationEnum, StateStorageTypeEnum } from "../../typings/GalleryProps"; -import { DerivedLoaderController } from "../controllers/DerivedLoaderController"; -import { QueryParamsController } from "../controllers/QueryParamsController"; -import { PaginationController } from "../services/PaginationController"; -import { ObservableStorage } from "../typings/storage"; -import { AttributeStorage } from "./AttributeStorage"; -import { BrowserStorage } from "./BrowserStorage"; -import { GalleryPersistentStateController } from "./GalleryPersistentStateController"; - -interface DynamicProps { - datasource: ListValue; - stateStorageAttr?: EditableValue; - itemSelection?: SelectionSingleValue | SelectionMultiValue; - sCountFmtSingular?: DynamicValue; - sCountFmtPlural?: DynamicValue; - selectionCountPosition: "top" | "bottom" | "off"; -} - -interface StaticProps { - pagination: PaginationEnum; - showPagingButtons: "always" | "auto"; - showTotalCount: boolean; - pageSize: number; - name: string; - stateStorageType: StateStorageTypeEnum; - storeFilters: boolean; - storeSort: boolean; - refreshIndicator: boolean; - refreshInterval: number; -} - -export type GalleryPropsGate = DerivedPropsGate; - -type GalleryStoreSpec = StaticProps & { - gate: GalleryPropsGate; -}; - -export class GalleryStore extends SetupHost { - private readonly _query: DatasourceService; - private readonly _filtersHost: CustomFilterHost; - private readonly _sortHost: SortStoreHost; - private _storage: ObservableStorage | null = null; - - readonly id: string = `GalleryStore@${generateUUID()}`; - readonly name: string; - readonly paging: PaginationController; - readonly filterAPI: FilterAPI; - readonly sortAPI: SortAPI; - loaderCtrl: DerivedLoaderController; - selectionCountStore: SelectionCounterViewModel; - - constructor(spec: GalleryStoreSpec) { - super(); - - this.name = spec.name; - - this._query = new DatasourceService(this, spec.gate, spec.refreshInterval * 1000); - - this.paging = new PaginationController({ - query: this._query, - pageSize: spec.pageSize, - pagination: spec.pagination, - showPagingButtons: spec.showPagingButtons, - showTotalCount: spec.showTotalCount - }); - - this.selectionCountStore = new SelectionCounterViewModel(spec.gate, spec.gate.props.selectionCountPosition); - - this._filtersHost = new CustomFilterHost(); - - const combinedFilter = new CombinedFilter(this, { stableKey: spec.name, inputs: [this._filtersHost] }); - - this._sortHost = new SortStoreHost({ - initSort: spec.gate.props.datasource.sortOrder - }); - - new QueryParamsController(this, this._query, combinedFilter, this._sortHost); - - this.filterAPI = createContextWithStub({ - filterObserver: this._filtersHost, - parentChannelName: this.id - }); - - this.sortAPI = { - version: 1, - host: this._sortHost - }; - - this.loaderCtrl = new DerivedLoaderController(this._query, spec.refreshIndicator, spec.refreshInterval >= 1); - - const useStorage = spec.storeFilters || spec.storeSort; - if (useStorage) { - this.initPersistentStorage(spec, spec.gate); - } - - combinedFilter.hydrate(spec.gate.props.datasource.filter); - } - - initPersistentStorage(props: StaticProps, gate: GalleryPropsGate): void { - if (props.stateStorageType === "localStorage") { - this._storage = new BrowserStorage(this.name); - } else if (gate.props.stateStorageAttr) { - this._storage = new AttributeStorage( - this, - gate as DerivedPropsGate<{ stateStorageAttr: EditableValue }> - ); - } - - if (!this._storage) { - return; - } - - new GalleryPersistentStateController(this, { - storage: this._storage, - filtersHost: this._filtersHost, - sortHost: this._sortHost, - storeFilters: props.storeFilters, - storeSort: props.storeSort - }); - } -} diff --git a/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts new file mode 100644 index 0000000000..e2063040d3 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts @@ -0,0 +1,47 @@ +import { GalleryContainerProps } from "../../typings/GalleryProps"; + +/** Type to declare props available through main gate. */ +export type GalleryGateProps = Pick< + GalleryContainerProps, + | "name" + | "style" + | "class" + | "datasource" + | "tabIndex" + | "filterSectionTitle" + | "filtersPlaceholder" + | "refreshIndicator" + | "refreshInterval" + | "selectionCountPosition" + | "itemSelection" + | "onSelectionChange" + | "pagination" + | "pagingPosition" + | "showPagingButtons" + | "pageSize" + | "showTotalCount" + | "desktopItems" + | "tabletItems" + | "phoneItems" + | "ariaLabelListBox" + | "itemClass" + | "onClick" + | "onClickTrigger" + | "content" + | "ariaLabelItem" + | "totalCountValue" + | "clearSelectionButtonLabel" + | "selectedCountTemplateSingular" + | "selectedCountTemplatePlural" + | "dynamicPage" + | "dynamicPageSize" + | "useCustomPagination" + | "customPagination" + | "emptyMessageTitle" + | "emptyPlaceholder" + | "loadMoreButtonCaption" + | "stateStorageType" + | "stateStorageAttr" + | "storeFilters" + | "storeSort" +>; diff --git a/packages/pluggableWidgets/gallery-web/src/typings/GalleryItem.ts b/packages/pluggableWidgets/gallery-web/src/typings/GalleryItem.ts deleted file mode 100644 index e374ab3eb5..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/typings/GalleryItem.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ObjectItem } from "mendix"; -import { ReactNode } from "react"; - -export interface GalleryItemHelper { - hasOnClick(item: ObjectItem): boolean; - itemClass(item: ObjectItem): string | undefined; - render(item: ObjectItem): ReactNode; -} diff --git a/packages/pluggableWidgets/gallery-web/src/typings/ItemEventsController.ts b/packages/pluggableWidgets/gallery-web/src/typings/ItemEventsController.ts deleted file mode 100644 index 647da229d0..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/typings/ItemEventsController.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ObjectItem } from "mendix"; -import { ElementProps } from "@mendix/widget-plugin-grid/event-switch/base"; - -export interface ItemEventsController { - getProps: (item: ObjectItem) => ElementProps; -} diff --git a/packages/pluggableWidgets/gallery-web/src/utils/builders/ItemHelperBuilder.ts b/packages/pluggableWidgets/gallery-web/src/utils/builders/ItemHelperBuilder.ts deleted file mode 100644 index a16be1cc1b..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/utils/builders/ItemHelperBuilder.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { ListActionValue, ListExpressionValue, ListWidgetValue } from "mendix"; -import { listExp, listWidget } from "@mendix/widget-plugin-test-utils"; -import { ItemHelper } from "../../helpers/ItemHelper"; - -export class ItemHelperBuilder { - private class: ListExpressionValue | undefined = undefined; - private content: ListWidgetValue | undefined = undefined; - private action: ListActionValue | undefined = undefined; - - withItemClass(itemClass: ListExpressionValue): ItemHelperBuilder { - this.class = itemClass; - return this; - } - - withContent(val: ListWidgetValue): ItemHelperBuilder { - this.content = val; - return this; - } - - withAction(val: ListActionValue): ItemHelperBuilder { - this.action = val; - return this; - } - - build(): ItemHelper { - return new ItemHelper(this.class, this.content, this.action); - } - - static sample(patch?: (builder: ItemHelperBuilder) => void): ItemHelper { - const builder = new ItemHelperBuilder() - .withItemClass(listExp(() => "item-class")) - .withContent(listWidget(() => "Item content")); - - if (patch) { - patch(builder); - } - - return builder.build(); - } -} diff --git a/packages/pluggableWidgets/gallery-web/src/utils/mock-container-props.ts b/packages/pluggableWidgets/gallery-web/src/utils/mock-container-props.ts new file mode 100644 index 0000000000..7cf1ca0a2d --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/utils/mock-container-props.ts @@ -0,0 +1,32 @@ +import { list } from "@mendix/widget-plugin-test-utils"; +import { GalleryContainerProps } from "../../typings/GalleryProps"; + +export function mockContainerProps(): GalleryContainerProps { + return { + class: "gallery-test-class", + name: "gallery_1", + tabIndex: 0, + datasource: list(20), + refreshInterval: 0, + refreshIndicator: false, + itemSelectionMode: "clear", + keepSelection: false, + selectionCountPosition: "bottom", + desktopItems: 4, + tabletItems: 3, + phoneItems: 2, + pageSize: 10, + pagination: "buttons", + showTotalCount: false, + showPagingButtons: "auto", + pagingPosition: "bottom", + showEmptyPlaceholder: "none", + onClickTrigger: "single", + stateStorageType: "attribute", + storeFilters: false, + storeSort: false, + useCustomPagination: false, + autoSelect: false, + loadingType: "spinner" + }; +} diff --git a/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx deleted file mode 100644 index 0d5ac84aa3..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { ClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper"; -import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController"; -import { PositionController } from "@mendix/widget-plugin-grid/keyboard-navigation/PositionController"; -import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout"; -import { getColumnAndRowBasedOnIndex, SelectActionHandler } from "@mendix/widget-plugin-grid/selection"; -import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider"; -import { list, listAction, objectItems } from "@mendix/widget-plugin-test-utils"; -import { render, RenderResult } from "@testing-library/react"; -import userEvent, { UserEvent } from "@testing-library/user-event"; -import { ObjectItem } from "mendix"; -import { createElement, ReactElement } from "react"; -import { GalleryContainerProps } from "../../typings/GalleryProps"; -import { GalleryProps } from "../components/Gallery"; -import { ItemEventsController } from "../features/item-interaction/ItemEventsController"; -import { ItemHelper } from "../helpers/ItemHelper"; -import { GalleryContext, GalleryRootScope } from "../helpers/root-context"; -import { GalleryStore } from "../stores/GalleryStore"; -import { ItemHelperBuilder } from "./builders/ItemHelperBuilder"; - -export function setup(jsx: ReactElement): { user: UserEvent } & RenderResult { - return { - user: userEvent.setup(), - ...render(jsx) - }; -} - -export function mockItemHelperWithAction(execute: () => void): ItemHelper { - return ItemHelperBuilder.sample(builder => - builder.withAction( - listAction(mockAction => { - const action = mockAction(); - action.execute = execute; - return action; - }) - ) - ); -} - -export function createMockGalleryContext(): GalleryRootScope { - // Create minimal GalleryContainerProps for the store - const mockContainerProps: GalleryContainerProps = { - name: "gallery-test", - class: "gallery-test-class", - datasource: list(3), - itemSelectionMode: "clear", - desktopItems: 4, - tabletItems: 3, - phoneItems: 2, - pageSize: 10, - pagination: "buttons", - showTotalCount: false, - showPagingButtons: "always", - pagingPosition: "bottom", - showEmptyPlaceholder: "none", - onClickTrigger: "single", - stateStorageType: "localStorage", - storeFilters: false, - storeSort: false, - refreshIndicator: false, - keepSelection: false, - selectionCountPosition: "bottom", - refreshInterval: 0 - }; - - // Create a proper gate provider and gate - const gateProvider = new GateProvider(mockContainerProps); - const gate = gateProvider.gate; - - // Create real GalleryStore instance - const mockStore = new GalleryStore({ - gate, - name: "gallery-test", - pagination: "buttons", - showPagingButtons: "always", - showTotalCount: false, - pageSize: 10, - stateStorageType: "localStorage", - storeFilters: false, - storeSort: false, - refreshIndicator: false, - refreshInterval: 0 - }); - - const mockSelectHelper = new SelectActionHandler("None", undefined); - - return { - rootStore: mockStore, - selectionHelper: undefined, - itemSelectHelper: mockSelectHelper, - selectionCountStore: mockStore.selectionCountStore - }; -} - -export function withGalleryContext(component: ReactElement, context?: GalleryRootScope): ReactElement { - const contextValue = context || createMockGalleryContext(); - return createElement(GalleryContext.Provider, { value: contextValue }, component); -} - -type Helpers = { - selectHelper?: SelectActionHandler; - actionHelper?: ClickActionHelper; - focusController?: FocusTargetController; - itemEventsController?: ItemEventsController; -}; - -type Mocks = { - onClick?: ReturnType; -}; - -export function mockProps(params: Helpers & Mocks = {}): GalleryProps { - const { - onClick = undefined, - selectHelper = new SelectActionHandler("None", undefined), - actionHelper = new ClickActionHelper("single", onClick), - focusController = new FocusTargetController(new PositionController(), new VirtualGridLayout(3, 4, 10)), - itemEventsController = new ItemEventsController( - item => ({ - item, - selectionType: selectHelper.selectionType, - selectionMode: "clear", - clickTrigger: "single" - }), - selectHelper.onSelect, - selectHelper.onSelectAll, - actionHelper.onExecuteAction, - focusController.dispatch, - selectHelper.onSelectAdjacent, - 3 - ) - } = params; - - const itemHelper = ItemHelperBuilder.sample(builder => { - if (onClick) { - builder.withAction(onClick); - } - }); - - return { - hasMoreItems: false, - page: 0, - pageSize: 10, - paging: true, - paginationType: "buttons", - showPagingButtons: "always", - phoneItems: 2, - tabletItems: 3, - desktopItems: 4, - className: "my-gallery", - ariaLabelListBox: "Mock props ListBox aria label", - headerTitle: "Mock props header aria label", - items: objectItems(3), - itemHelper, - selectHelper, - showHeader: true, - header: , - itemEventsController, - focusController, - getPosition: (index: number) => getColumnAndRowBasedOnIndex(3, 3, index), - showRefreshIndicator: false - }; -} diff --git a/packages/pluggableWidgets/gallery-web/src/view-models/EmptyPlaceholder.viewModel.ts b/packages/pluggableWidgets/gallery-web/src/view-models/EmptyPlaceholder.viewModel.ts new file mode 100644 index 0000000000..c260b7dee5 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/view-models/EmptyPlaceholder.viewModel.ts @@ -0,0 +1,27 @@ +import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { DynamicValue } from "mendix"; +import { makeAutoObservable } from "mobx"; +import { ReactNode } from "react"; + +export class EmptyPlaceholderViewModel { + constructor( + private gate: DerivedPropsGate<{ + emptyMessageTitle?: DynamicValue; + emptyPlaceholder?: ReactNode; + }>, + private itemCount: ComputedAtom + ) { + makeAutoObservable(this); + } + + get content(): ReactNode { + if (this.itemCount.get() > 0) { + return null; + } + return this.gate.props.emptyPlaceholder; + } + + get sectionAriaLabel(): string | undefined { + return this.gate.props.emptyMessageTitle?.value; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/view-models/GalleryItem.viewModel.ts b/packages/pluggableWidgets/gallery-web/src/view-models/GalleryItem.viewModel.ts new file mode 100644 index 0000000000..07c1e0bdf6 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/view-models/GalleryItem.viewModel.ts @@ -0,0 +1,49 @@ +import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { ListActionValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix"; +import { makeAutoObservable } from "mobx"; +import { ReactNode } from "react"; + +export class GalleryItemViewModel { + constructor( + private gate: DerivedPropsGate<{ + itemClass?: ListExpressionValue; + content?: ListWidgetValue; + onClick?: ListActionValue; + ariaLabelItem?: ListExpressionValue; + }> + ) { + makeAutoObservable(this); + } + + private get classValue(): ListExpressionValue | undefined { + return this.gate.props.itemClass; + } + + private get contentValue(): ListWidgetValue | undefined { + return this.gate.props.content; + } + + private get clickValue(): ListActionValue | undefined { + return this.gate.props.onClick; + } + + private get labelValue(): ListExpressionValue | undefined { + return this.gate.props.ariaLabelItem; + } + + class(item: ObjectItem): string | undefined { + return this.classValue?.get(item).value; + } + + content(item: ObjectItem): ReactNode { + return this.contentValue?.get(item); + } + + label(item: ObjectItem): string | undefined { + return this.labelValue?.get(item).value; + } + + hasOnClick(item: ObjectItem): boolean { + return !!this.clickValue?.get(item); + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/view-models/GalleryRoot.viewModel.ts b/packages/pluggableWidgets/gallery-web/src/view-models/GalleryRoot.viewModel.ts new file mode 100644 index 0000000000..3564d7b182 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/view-models/GalleryRoot.viewModel.ts @@ -0,0 +1,27 @@ +import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { makeAutoObservable } from "mobx"; +import { CSSProperties } from "react"; + +export class GalleryRootViewModel { + constructor( + private gate: DerivedPropsGate<{ + style?: CSSProperties; + class?: string; + tabIndex?: number; + }> + ) { + makeAutoObservable(this); + } + + get className(): string | undefined { + return this.gate.props.class; + } + + get style(): CSSProperties | undefined { + return this.gate.props.style; + } + + get tabIndex(): number { + return this.gate.props.tabIndex ?? 0; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryItem.viewModel.spec.tsx b/packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryItem.viewModel.spec.tsx new file mode 100644 index 0000000000..0082391a01 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryItem.viewModel.spec.tsx @@ -0,0 +1,157 @@ +import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; +import { listAction, listExpression, listWidget } from "@mendix/widget-plugin-test-utils"; +import { ObjectItem } from "mendix"; +import { GalleryItemViewModel } from "../GalleryItem.viewModel"; + +describe("GalleryItemViewModel", () => { + const mockItem: ObjectItem = { id: "test-id" } as ObjectItem; + + it("should return class value from item", () => { + const mockGate = { + props: { + itemClass: listExpression(() => "item-class"), + content: undefined, + onClick: undefined, + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.class(mockItem)).toBe("item-class"); + }); + + it("should return undefined class when itemClass is not provided", () => { + const mockGate = { + props: { + itemClass: undefined, + content: undefined, + onClick: undefined, + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.class(mockItem)).toBeUndefined(); + }); + + it("should return different classes for different items", () => { + const item1 = { id: "item-1" } as ObjectItem; + const item2 = { id: "item-2" } as ObjectItem; + + const mockGate = { + props: { + itemClass: listExpression(item => (item === item1 ? "class-1" : "class-2")), + content: undefined, + onClick: undefined, + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.class(item1)).toBe("class-1"); + expect(viewModel.class(item2)).toBe("class-2"); + }); + + it("should return content from item", () => { + const mockContent =
Test Content
; + const mockGate = { + props: { + itemClass: undefined, + content: listWidget(() => mockContent), + onClick: undefined, + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.content(mockItem)).toBe(mockContent); + }); + + it("should return undefined content when content is not provided", () => { + const mockGate = { + props: { + itemClass: undefined, + content: undefined, + onClick: undefined, + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.content(mockItem)).toBeUndefined(); + }); + + it("should return aria label from item", () => { + const mockGate = { + props: { + itemClass: undefined, + content: undefined, + onClick: undefined, + ariaLabelItem: listExpression(() => "Item Label") + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.label(mockItem)).toBe("Item Label"); + }); + + it("should return undefined label when ariaLabelItem is not provided", () => { + const mockGate = { + props: { + itemClass: undefined, + content: undefined, + onClick: undefined, + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.label(mockItem)).toBeUndefined(); + }); + + it("should return true when onClick is available for item", () => { + const mockGate = { + props: { + itemClass: undefined, + content: undefined, + onClick: listAction(), + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.hasOnClick(mockItem)).toBe(true); + }); + + it("should return false when onClick is not provided", () => { + const mockGate = { + props: { + itemClass: undefined, + content: undefined, + onClick: undefined, + ariaLabelItem: undefined + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.hasOnClick(mockItem)).toBe(false); + }); + + it("should handle all props together", () => { + const mockContent = Item Content; + const mockGate = { + props: { + itemClass: listExpression(() => "gallery-item"), + content: listWidget(() => mockContent), + onClick: listAction(), + ariaLabelItem: listExpression(() => "Gallery Item Label") + } + } as unknown as DerivedPropsGate; + + const viewModel = new GalleryItemViewModel(mockGate); + expect(viewModel.class(mockItem)).toBe("gallery-item"); + expect(viewModel.content(mockItem)).toBe(mockContent); + expect(viewModel.label(mockItem)).toBe("Gallery Item Label"); + expect(viewModel.hasOnClick(mockItem)).toBe(true); + }); +}); diff --git a/packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryRoot.viewModel.spec.tsx b/packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryRoot.viewModel.spec.tsx new file mode 100644 index 0000000000..aa1dfbc352 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryRoot.viewModel.spec.tsx @@ -0,0 +1,39 @@ +import { renderHook } from "@testing-library/react"; +import { Container } from "brandi"; +import { ContainerProvider } from "brandi-react"; +import { ReactNode } from "react"; +import { createGalleryContainer } from "../../model/containers/createGalleryContainer"; +import { useGalleryRootVM } from "../../model/hooks/injection-hooks"; +import { mockContainerProps } from "../../utils/mock-container-props"; + +/** Function to bind hook context to provided container. */ +const withContainer = (ct: Container) => { + return function Wrapper({ children }: { children: ReactNode }) { + return ( + + {children} + + ); + }; +}; + +describe("GalleryRootViewModel", () => { + it("should return className, style and tabIndex from props", () => { + const props = mockContainerProps(); + const [container] = createGalleryContainer({ ...props, tabIndex: 2, style: { color: "red" } }); + const { result } = renderHook(() => useGalleryRootVM(), { wrapper: withContainer(container) }); + expect(result.current.className).toBe("gallery-test-class"); + expect(result.current.style).toMatchObject({ color: "red" }); + expect(result.current.tabIndex).toBe(2); + }); + + it("should change className, when gate props change", () => { + const props = mockContainerProps(); + const [container, gate] = createGalleryContainer({ ...props, class: "initial-class" }); + const { result } = renderHook(() => useGalleryRootVM(), { wrapper: withContainer(container) }); + expect(result.current.className).toBe("initial-class"); + + gate.setProps({ ...props, class: "updated-class" }); + expect(result.current.className).toBe("updated-class"); + }); +}); diff --git a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts index 8f5b2b1f24..4feffd44ad 100644 --- a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts +++ b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts @@ -5,11 +5,16 @@ */ import { ComponentType, CSSProperties, ReactNode } from "react"; import { ActionValue, DynamicValue, EditableValue, ListValue, ListActionValue, ListExpressionValue, ListWidgetValue, SelectionSingleValue, SelectionMultiValue } from "mendix"; +import { Big } from "big.js"; + +export type OnClickTriggerEnum = "single" | "double"; export type ItemSelectionModeEnum = "toggle" | "clear"; export type SelectionCountPositionEnum = "top" | "bottom" | "off"; +export type LoadingTypeEnum = "spinner" | "skeleton"; + export type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore"; export type ShowPagingButtonsEnum = "always" | "auto"; @@ -18,8 +23,6 @@ export type PagingPositionEnum = "bottom" | "top" | "both"; export type ShowEmptyPlaceholderEnum = "none" | "custom"; -export type OnClickTriggerEnum = "single" | "double"; - export type StateStorageTypeEnum = "attribute" | "localStorage"; export interface GalleryContainerProps { @@ -28,30 +31,36 @@ export interface GalleryContainerProps { style?: CSSProperties; tabIndex?: number; filtersPlaceholder?: ReactNode; + content?: ListWidgetValue; datasource: ListValue; refreshInterval: number; + desktopItems: number; + tabletItems: number; + phoneItems: number; + onClickTrigger: OnClickTriggerEnum; + onClick?: ListActionValue; + onSelectionChange?: ActionValue; itemSelection?: SelectionSingleValue | SelectionMultiValue; + autoSelect: boolean; itemSelectionMode: ItemSelectionModeEnum; keepSelection: boolean; selectionCountPosition: SelectionCountPositionEnum; - clearSelectionButtonLabel?: DynamicValue; - content?: ListWidgetValue; + loadingType: LoadingTypeEnum; refreshIndicator: boolean; - desktopItems: number; - tabletItems: number; - phoneItems: number; pageSize: number; pagination: PaginationEnum; - showTotalCount: boolean; + useCustomPagination: boolean; + customPagination?: ReactNode; showPagingButtons: ShowPagingButtonsEnum; + showTotalCount: boolean; pagingPosition: PagingPositionEnum; loadMoreButtonCaption?: DynamicValue; + dynamicPageSize?: EditableValue; + dynamicPage?: EditableValue; + totalCountValue?: EditableValue; showEmptyPlaceholder: ShowEmptyPlaceholderEnum; emptyPlaceholder?: ReactNode; itemClass?: ListExpressionValue; - onClickTrigger: OnClickTriggerEnum; - onClick?: ListActionValue; - onSelectionChange?: ActionValue; stateStorageType: StateStorageTypeEnum; stateStorageAttr?: EditableValue; storeFilters: boolean; @@ -62,6 +71,7 @@ export interface GalleryContainerProps { ariaLabelItem?: ListExpressionValue; selectedCountTemplateSingular?: DynamicValue; selectedCountTemplatePlural?: DynamicValue; + clearSelectionButtonLabel?: DynamicValue; } export interface GalleryPreviewProps { @@ -76,30 +86,36 @@ export interface GalleryPreviewProps { renderMode: "design" | "xray" | "structure"; translate: (text: string) => string; filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; + content: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; datasource: {} | { caption: string } | { type: string } | null; refreshInterval: number | null; + desktopItems: number | null; + tabletItems: number | null; + phoneItems: number | null; + onClickTrigger: OnClickTriggerEnum; + onClick: {} | null; + onSelectionChange: {} | null; itemSelection: "None" | "Single" | "Multi"; + autoSelect: boolean; itemSelectionMode: ItemSelectionModeEnum; keepSelection: boolean; selectionCountPosition: SelectionCountPositionEnum; - clearSelectionButtonLabel: string; - content: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; + loadingType: LoadingTypeEnum; refreshIndicator: boolean; - desktopItems: number | null; - tabletItems: number | null; - phoneItems: number | null; pageSize: number | null; pagination: PaginationEnum; - showTotalCount: boolean; + useCustomPagination: boolean; + customPagination: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; showPagingButtons: ShowPagingButtonsEnum; + showTotalCount: boolean; pagingPosition: PagingPositionEnum; loadMoreButtonCaption: string; + dynamicPageSize: string; + dynamicPage: string; + totalCountValue: string; showEmptyPlaceholder: ShowEmptyPlaceholderEnum; emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; itemClass: string; - onClickTrigger: OnClickTriggerEnum; - onClick: {} | null; - onSelectionChange: {} | null; stateStorageType: StateStorageTypeEnum; stateStorageAttr: string; onConfigurationChange: {} | null; @@ -111,4 +127,5 @@ export interface GalleryPreviewProps { ariaLabelItem: string; selectedCountTemplateSingular: string; selectedCountTemplatePlural: string; + clearSelectionButtonLabel: string; } diff --git a/packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts b/packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts index 960ef5f86a..2c2969ff03 100644 --- a/packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts +++ b/packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts @@ -8,7 +8,7 @@ import { computed } from "mobx"; export function itemCountAtom( gate: DerivedPropsGate<{ datasource: { items?: { length: number } } }> ): ComputedAtom { - return computed(() => gate.props.datasource.items?.length ?? -1); + return computed(() => gate.props.datasource.items?.length ?? -1, { name: "plugin:@computed:itemCountAtom" }); } /** @@ -36,7 +36,7 @@ export function offsetAtom(gate: DerivedPropsGate<{ datasource: { offset: number * @injectable */ export function limitAtom(gate: DerivedPropsGate<{ datasource: { limit: number } }>): ComputedAtom { - return computed(() => gate.props.datasource.limit); + return computed(() => gate.props.datasource.limit, { name: 'plugin:@computed:limitAtom' }); } /** diff --git a/packages/pluggableWidgets/datagrid-web/src/features/pagination/GridPageControl.ts b/packages/shared/widget-plugin-grid/src/interfaces/GridPageControl.ts similarity index 100% rename from packages/pluggableWidgets/datagrid-web/src/features/pagination/GridPageControl.ts rename to packages/shared/widget-plugin-grid/src/interfaces/GridPageControl.ts diff --git a/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts b/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts index be46545700..128ce9edc5 100644 --- a/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts +++ b/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts @@ -13,8 +13,13 @@ export function createFocusController( function setup(): void | (() => void) { return reaction( - () => layout.get(), - newLayout => controller.updateGridLayout(newLayout) + () => { + return layout.get(); + }, + newLayout => { + controller.updateGridLayout(newLayout); + }, + { name: "[plugin]:@reaction:createFocusController:layoutUpdate" } ); } diff --git a/packages/shared/widget-plugin-grid/src/main.ts b/packages/shared/widget-plugin-grid/src/main.ts index 07ddcf6a6c..a535f3d93a 100644 --- a/packages/shared/widget-plugin-grid/src/main.ts +++ b/packages/shared/widget-plugin-grid/src/main.ts @@ -4,14 +4,11 @@ export { createClickActionHelper } from "./helpers/createClickActionHelper"; export type { QueryService } from "./interfaces/QueryService"; export type { SelectActionsService } from "./interfaces/SelectActionsService"; export type { SelectionDynamicProps } from "./interfaces/SelectionDynamicProps"; -export { type SelectionHelperService } from "./interfaces/SelectionHelperService"; +export type { SelectionHelperService } from "./interfaces/SelectionHelperService"; export type { TaskProgressService } from "./interfaces/TaskProgressService"; export { createFocusController } from "./keyboard-navigation/createFocusController"; export { layoutAtom } from "./keyboard-navigation/layout.model"; -export { PageSizeStore } from "./pagination/PageSize.store"; -export * from "./pagination/pagination.model"; export { SelectAllService } from "./select-all/SelectAll.service"; -export { SelectionCounterViewModel } from "./selection-counter/SelectionCounter.viewModel"; export * from "./selection/context"; export { createSelectionHelper } from "./selection/createSelectionHelper"; export { SelectActionsProvider } from "./selection/SelectActionsProvider.service"; diff --git a/packages/pluggableWidgets/datagrid-web/src/features/pagination/DynamicPagination.feature.ts b/packages/shared/widget-plugin-grid/src/pagination/DynamicPagination.feature.ts similarity index 96% rename from packages/pluggableWidgets/datagrid-web/src/features/pagination/DynamicPagination.feature.ts rename to packages/shared/widget-plugin-grid/src/pagination/DynamicPagination.feature.ts index dc71cd4b18..dd822f9083 100644 --- a/packages/pluggableWidgets/datagrid-web/src/features/pagination/DynamicPagination.feature.ts +++ b/packages/shared/widget-plugin-grid/src/pagination/DynamicPagination.feature.ts @@ -1,6 +1,6 @@ import { ComputedAtom, disposeBatch, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; import { autorun, reaction } from "mobx"; -import { GridPageControl } from "./GridPageControl"; +import { GridPageControl } from "../interfaces/GridPageControl"; export class DynamicPaginationFeature implements SetupComponent { id = "DynamicPaginationFeature"; diff --git a/packages/pluggableWidgets/datagrid-web/src/features/pagination/PageControl.service.ts b/packages/shared/widget-plugin-grid/src/pagination/PageControl.service.ts similarity index 85% rename from packages/pluggableWidgets/datagrid-web/src/features/pagination/PageControl.service.ts rename to packages/shared/widget-plugin-grid/src/pagination/PageControl.service.ts index 69c7cf9a3c..8cbf987270 100644 --- a/packages/pluggableWidgets/datagrid-web/src/features/pagination/PageControl.service.ts +++ b/packages/shared/widget-plugin-grid/src/pagination/PageControl.service.ts @@ -1,8 +1,8 @@ -import { SetPageAction, SetPageSizeAction } from "@mendix/widget-plugin-grid/main"; import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; import { Big } from "big.js"; import { EditableValue } from "mendix"; -import { GridPageControl } from "./GridPageControl"; +import { GridPageControl } from "../interfaces/GridPageControl"; +import { SetPageAction, SetPageSizeAction } from "./pagination.model"; export class PageControlService implements GridPageControl { constructor( diff --git a/packages/pluggableWidgets/datagrid-web/src/features/pagination/Pagination.viewModel.ts b/packages/shared/widget-plugin-grid/src/pagination/Pagination.viewModel.ts similarity index 66% rename from packages/pluggableWidgets/datagrid-web/src/features/pagination/Pagination.viewModel.ts rename to packages/shared/widget-plugin-grid/src/pagination/Pagination.viewModel.ts index c617b66b03..4b434d141e 100644 --- a/packages/pluggableWidgets/datagrid-web/src/features/pagination/Pagination.viewModel.ts +++ b/packages/shared/widget-plugin-grid/src/pagination/Pagination.viewModel.ts @@ -1,15 +1,28 @@ -import { QueryService, SetPageAction } from "@mendix/widget-plugin-grid/main"; import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main"; import { computed, makeObservable } from "mobx"; -import { PaginationEnum, ShowPagingButtonsEnum } from "../../../typings/DatagridProps"; -import { PaginationConfig } from "./pagination.config"; +import { QueryService } from "../interfaces/QueryService"; +import { SetPageAction } from "./pagination.model"; + +type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore"; + +type ShowPagingButtonsEnum = "always" | "auto"; + +export type PaginationKind = `${PaginationEnum}.${ShowPagingButtonsEnum}` | "custom"; export class PaginationViewModel { readonly pagination: PaginationEnum; readonly showPagingButtons: ShowPagingButtonsEnum; constructor( - private config: PaginationConfig, + private config: { + pagination: PaginationEnum; + paginationKind: PaginationKind; + showPagingButtons: ShowPagingButtonsEnum; + // Gallery + showNumberOfItems?: boolean; + // Datagrid + showNumberOfRows?: boolean; + }, private query: QueryService, private currentPageAtom: ComputedAtom, private pageSizeAtom: ComputedAtom, @@ -22,8 +35,6 @@ export class PaginationViewModel { pageSize: computed, currentPage: computed, paginationVisible: computed, - showLoadMore: computed, - showVirtualScrollingWithRowCount: computed, hasMoreItems: computed, totalCount: computed }); @@ -49,16 +60,12 @@ export class PaginationViewModel { return false; } default: - return this.config.showNumberOfRows; + return this.config.showNumberOfItems || this.config.showNumberOfRows || false; } } - get showLoadMore(): boolean { - return this.hasMoreItems && this.pagination === "loadMore"; - } - - get showVirtualScrollingWithRowCount(): boolean { - return this.pagination === "virtualScrolling" && this.config.showNumberOfRows; + get loadMoreVisible(): boolean { + return this.pagination === "loadMore" && this.hasMoreItems; } get hasMoreItems(): boolean { diff --git a/packages/shared/widget-plugin-grid/src/pagination/main.ts b/packages/shared/widget-plugin-grid/src/pagination/main.ts new file mode 100644 index 0000000000..77aa03e20f --- /dev/null +++ b/packages/shared/widget-plugin-grid/src/pagination/main.ts @@ -0,0 +1,6 @@ +export type { GridPageControl } from "../interfaces/GridPageControl"; +export * from "./DynamicPagination.feature"; +export * from "./PageControl.service"; +export * from "./PageSize.store"; +export * from "./pagination.model"; +export * from "./Pagination.viewModel"; diff --git a/packages/shared/widget-plugin-grid/src/pagination/pagination.model.ts b/packages/shared/widget-plugin-grid/src/pagination/pagination.model.ts index 82afcf7392..babdcb79a3 100644 --- a/packages/shared/widget-plugin-grid/src/pagination/pagination.model.ts +++ b/packages/shared/widget-plugin-grid/src/pagination/pagination.model.ts @@ -1,13 +1,41 @@ -import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main"; +import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; import { action, computed } from "mobx"; +import { ReactNode } from "react"; import { QueryService } from "../main"; +/** Atom for the dynamic page index provided by the widget's props. */ +export function dynamicPageAtom( + gate: DerivedPropsGate<{ dynamicPage?: { value?: Big } }>, + config: { isLimitBased: boolean } +): ComputedAtom { + return computed(() => { + const page = gate.props.dynamicPage?.value?.toNumber() ?? -1; + if (config.isLimitBased) { + return Math.max(page, -1); + } + // Switch to zero-based index for offset-based pagination + return Math.max(page - 1, -1); + }); +} + /** - * Return observable atom holding page size. Value -1 means no meaningful page size is set. - * @injectable + * Return observable atom holding page size. + * Value -1 means no meaningful page size is set. */ -export function boundPageSize(get: () => number): ComputedAtom { - return computed(() => Math.max(get(), -1)); +export function dynamicPageSizeAtom( + gate: DerivedPropsGate<{ dynamicPageSize?: { value?: Big } }> +): ComputedAtom { + return computed(() => { + const pageSize = gate.props.dynamicPageSize?.value?.toNumber() ?? -1; + return Math.max(pageSize, -1); + }); +} + +/** Atom for custom pagination widgets. */ +export function customPaginationAtom( + gate: DerivedPropsGate<{ customPagination?: ReactNode }> +): ComputedAtom { + return computed(() => gate.props.customPagination); } /** @@ -26,6 +54,9 @@ export function currentPageAtom( return computed(() => { const size = pageSize.get(); const { limit, offset } = query; + if (size <= 0) { + return 0; + } return Math.floor(config.isLimitBased ? limit / size : offset / size); }); } diff --git a/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel.ts b/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel.ts deleted file mode 100644 index 76e41373ff..0000000000 --- a/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; -import { DynamicValue, SelectionMultiValue, SelectionSingleValue } from "mendix"; -import { makeAutoObservable } from "mobx"; - -interface DynamicProps { - itemSelection?: SelectionSingleValue | SelectionMultiValue; - selectedCountTemplateSingular?: DynamicValue; - selectedCountTemplatePlural?: DynamicValue; - clearSelectionButtonLabel?: DynamicValue; -} - -/** @injectable */ -export class SelectionCounterViewModel { - constructor( - private readonly gate: DerivedPropsGate, - private readonly position: "top" | "bottom" | "off" - ) { - makeAutoObservable(this); - } - - private get props(): DynamicProps { - return this.gate.props; - } - - private get formatSingular(): string { - return this.props.selectedCountTemplateSingular?.value || "%d item selected"; - } - - private get formatPlural(): string { - return this.props.selectedCountTemplatePlural?.value || "%d items selected"; - } - - get isTopCounterVisible(): boolean { - if (this.position !== "top") return false; - return this.selectedCount > 0; - } - - get isBottomCounterVisible(): boolean { - if (this.position !== "bottom") return false; - return this.selectedCount > 0; - } - - get clearButtonLabel(): string { - return this.props.clearSelectionButtonLabel?.value || "Clear selection"; - } - - get selectedCount(): number { - const { itemSelection } = this.props; - - if (!itemSelection) return 0; - if (itemSelection.type === "Single") return 0; - return itemSelection.selection.length; - } - - get selectedCountText(): string { - const count = this.selectedCount; - if (count > 1) return this.formatPlural.replace("%d", `${count}`); - if (count === 1) return this.formatSingular.replace("%d", "1"); - return ""; - } -} diff --git a/packages/shared/widget-plugin-grid/src/selection/helpers.ts b/packages/shared/widget-plugin-grid/src/selection/helpers.ts index cb979c06da..27502fb26b 100644 --- a/packages/shared/widget-plugin-grid/src/selection/helpers.ts +++ b/packages/shared/widget-plugin-grid/src/selection/helpers.ts @@ -1,14 +1,18 @@ -import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action"; -import type { ActionValue, ListValue, ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix"; +import type { ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix"; import { action, computed, makeObservable, observable } from "mobx"; -import { useEffect, useRef, useState } from "react"; import { MultiSelectionService } from "../interfaces/MultiSelectionService"; import { SingleSelectionService } from "../interfaces/SingleSelectionService"; import { Direction, MoveEvent1D, MoveEvent2D, MultiSelectionStatus, ScrollKeyCode, SelectionMode, Size } from "./types"; export class SingleSelectionHelper implements SingleSelectionService { type = "Single" as const; - constructor(private selectionValue: SelectionSingleValue) {} + constructor(private selectionValue: SelectionSingleValue) { + type PrivateMembers = "selectionValue"; + makeObservable(this, { + selectionValue: observable.ref, + updateProps: action + }); + } updateProps(value: SelectionSingleValue): void { this.selectionValue = value; @@ -341,80 +345,6 @@ export class MultiSelectionHelper implements MultiSelectionService { const clamp = (num: number, min: number, max: number): number => Math.min(Math.max(num, min), max); -/** @deprecated use container and createSelectionHelper instead. */ -export function useSelectionHelper( - selection: SelectionSingleValue | SelectionMultiValue | undefined, - dataSource: ListValue, - onSelectionChange: ActionValue | undefined, - keepSelection: Parameters[0] -): SelectionHelper | undefined { - const prevObjectListRef = useRef([]); - const firstLoadDone = useRef(false); - - useState(() => { - if (selection) { - selection.setKeepSelection(selectionStateHandler(keepSelection)); - } - }); - firstLoadDone.current ||= dataSource?.status !== "loading"; - - useEffect(() => { - const prevObjectList = prevObjectListRef.current; - const current = selection?.selection ?? []; - const currentObjectList = Array.isArray(current) ? current : [current]; - if (objectListEqual(prevObjectList, currentObjectList)) { - return; - } else { - prevObjectListRef.current = currentObjectList; - } - if (firstLoadDone.current) { - executeAction(onSelectionChange); - } - }, [selection?.selection, onSelectionChange]); - - const selectionHelper = useRef(undefined); - - if (selection !== undefined) { - if (selection.type === "Single") { - if (!selectionHelper.current) { - selectionHelper.current = new SingleSelectionHelper(selection); - } else { - (selectionHelper.current as SingleSelectionHelper).updateProps(selection); - } - } else { - if (!selectionHelper.current) { - selectionHelper.current = new MultiSelectionHelper(selection, dataSource.items ?? []); - } else { - (selectionHelper.current as MultiSelectionHelper).updateProps(selection, dataSource.items ?? []); - } - } - } - - return selectionHelper.current; -} - -type KeepSelectionHandler = (item: ObjectItem) => boolean; - -function selectionStateHandler( - keepSelection: "always keep" | "always clear" | KeepSelectionHandler -): KeepSelectionHandler { - if (typeof keepSelection === "function") { - return keepSelection; - } - return keepSelection === "always keep" ? () => true : () => false; -} - -export type SelectionHelper = SingleSelectionHelper | MultiSelectionHelper; - -function objectListEqual(a: ObjectItem[], b: ObjectItem[]): boolean { - if (a.length !== b.length) { - return false; - } - - const setB = new Set(b.map(obj => obj.id)); - return a.every(obj => setB.has(obj.id)); -} - export type PositionInGrid = { columnIndex: number; rowIndex: number; diff --git a/patches/rc-trigger.patch b/patches/rc-trigger.patch deleted file mode 100644 index 09acd2b1b0..0000000000 --- a/patches/rc-trigger.patch +++ /dev/null @@ -1,16 +0,0 @@ -diff --git a/HISTORY.md b/HISTORY.md -deleted file mode 100644 -index d51ff3eb84ae5367137933681a83e1044a74e069..0000000000000000000000000000000000000000 -diff --git a/package.json b/package.json -index a5a82acfebb2c5f84b75392669fcb839a3767f6e..0670b08b97943426db5518d377514b676402d0f7 100644 ---- a/package.json -+++ b/package.json -@@ -22,7 +22,7 @@ - "lib", - "assets/*.css" - ], -- "licenses": "MIT", -+ "license": "MIT", - "main": "./lib/index", - "module": "./es/index", - "config": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 05a97340ba..a80952cf09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,7 @@ overrides: '@codemirror/state': ^6.5.2 '@codemirror/view': ^6.38.1 '@mendix/pluggable-widgets-tools': 10.21.2 + '@prettier/plugin-xml': '>=3.4.1' '@testing-library/react': '>=15.0.6' '@types/big.js': ^6.2.2 '@types/node': ~22.14.0 @@ -41,9 +42,6 @@ patchedDependencies: mobx@6.12.3: hash: 39c55279e8f75c9a322eba64dd22e1a398f621c64bbfc3632e55a97f46edfeb9 path: patches/mobx@6.12.3.patch - rc-trigger: - hash: ed1e3ff08d043fe0d57534d0d74502691ed5cc3297839600375d33bb84c7be99 - path: patches/rc-trigger.patch react-big-calendar@0.19.2: hash: d8f03ab5a445efa65feb8cf9de6d013131afabc5b7e269c61364b2997ef90f94 path: patches/react-big-calendar@0.19.2.patch @@ -1566,6 +1564,12 @@ importers: '@mendix/widget-plugin-sorting': specifier: workspace:* version: link:../../shared/widget-plugin-sorting + brandi: + specifier: ^5.0.0 + version: 5.0.0 + brandi-react: + specifier: ^5.0.0 + version: 5.0.0(brandi@5.0.0)(react@18.3.1) classnames: specifier: ^2.5.1 version: 2.5.1 @@ -2686,7 +2690,7 @@ importers: specifier: ^9.34.0 version: 9.37.0 '@prettier/plugin-xml': - specifier: ^3.4.2 + specifier: '>=3.4.1' version: 3.4.2(prettier@3.5.3) eslint: specifier: ^9.34.0 @@ -4266,36 +4270,42 @@ packages: engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] + libc: [glibc] '@parcel/watcher-linux-arm-musl@2.5.1': resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==} engines: {node: '>= 10.0.0'} cpu: [arm] os: [linux] + libc: [musl] '@parcel/watcher-linux-arm64-glibc@2.5.1': resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] '@parcel/watcher-linux-arm64-musl@2.5.1': resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==} engines: {node: '>= 10.0.0'} cpu: [arm64] os: [linux] + libc: [musl] '@parcel/watcher-linux-x64-glibc@2.5.1': resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] + libc: [glibc] '@parcel/watcher-linux-x64-musl@2.5.1': resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==} engines: {node: '>= 10.0.0'} cpu: [x64] os: [linux] + libc: [musl] '@parcel/watcher-win32-arm64@2.5.1': resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==} @@ -4354,9 +4364,6 @@ packages: '@popperjs/core@2.11.8': resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} - '@prettier/plugin-xml@1.2.0': - resolution: {integrity: sha512-bFvVAZKs59XNmntYjyefn3K4TBykS6E+d6ZW8IcylAs88ZO+TzLhp0dPpi0VKfPzq1Nb+kpDnPRTiwb4zY6NgA==} - '@prettier/plugin-xml@3.4.2': resolution: {integrity: sha512-/UyNlHfkuLXG6Ed85KB0WBF283xn2yavR+UtRibBRUcvEJId2DSLdGXwJ/cDa1X++SWDPzq3+GSFniHjkNy7yg==} peerDependencies: @@ -4684,24 +4691,28 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [glibc] '@swc/core-linux-arm64-musl@1.13.5': resolution: {integrity: sha512-9+ZxFN5GJag4CnYnq6apKTnnezpfJhCumyz0504/JbHLo+Ue+ZtJnf3RhyA9W9TINtLE0bC4hKpWi8ZKoETyOQ==} engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [musl] '@swc/core-linux-x64-gnu@1.13.5': resolution: {integrity: sha512-WD530qvHrki8Ywt/PloKUjaRKgstQqNGvmZl54g06kA+hqtSE2FTG9gngXr3UJxYu/cNAjJYiBifm7+w4nbHbA==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [glibc] '@swc/core-linux-x64-musl@1.13.5': resolution: {integrity: sha512-Luj8y4OFYx4DHNQTWjdIuKTq2f5k6uSXICqx+FSabnXptaOBAbJHNbHT/06JZh6NRUouaf0mYXN0mcsqvkhd7Q==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [musl] '@swc/core-win32-arm64-msvc@1.13.5': resolution: {integrity: sha512-cZ6UpumhF9SDJvv4DA2fo9WIzlNFuKSkZpZmPG1c+4PFSEMy5DFOjBSllCvnqihCabzXzpn6ykCwBmHpy31vQw==} @@ -10637,6 +10648,7 @@ packages: whatwg-encoding@2.0.0: resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==} engines: {node: '>=12'} + deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation whatwg-fetch@3.6.20: resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==} @@ -12449,7 +12461,7 @@ snapshots: '@babel/preset-env': 7.28.3(@babel/core@7.28.4) '@babel/preset-react': 7.27.1(@babel/core@7.28.4) '@cfaester/enzyme-adapter-react-18': 0.6.0(enzyme@3.11.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@prettier/plugin-xml': 1.2.0 + '@prettier/plugin-xml': 3.4.2(prettier@3.5.3) '@rollup/plugin-alias': 5.1.1(rollup@3.29.5) '@rollup/plugin-babel': 6.1.0(@babel/core@7.28.4)(@types/babel__core@7.20.5)(rollup@3.29.5) '@rollup/plugin-commonjs': 28.0.7(rollup@3.29.5) @@ -12690,11 +12702,6 @@ snapshots: '@popperjs/core@2.11.8': {} - '@prettier/plugin-xml@1.2.0': - dependencies: - '@xml-tools/parser': 1.0.11 - prettier: 3.5.3 - '@prettier/plugin-xml@3.4.2(prettier@3.5.3)': dependencies: '@xml-tools/parser': 1.0.11