From 87a8c83048cad6ec4db796a9d0a3c76e14f5d2d4 Mon Sep 17 00:00:00 2001 From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com> Date: Tue, 23 Dec 2025 10:58:36 +0100 Subject: [PATCH 1/6] feat: start container migration --- .../pluggableWidgets/gallery-web/package.json | 2 + .../src/model/configs/Gallery.config.ts | 16 +++ .../src/model/containers/Gallery.container.ts | 123 ++++++++++++++++++ .../src/model/containers/Root.container.ts | 20 +++ .../model/services/GallerySetup.service.ts | 4 + .../src/model/services/QueryParams.service.ts | 44 +++++++ .../gallery-web/src/model/tokens.ts | 41 ++++++ .../src/typings/GalleryGateProps.ts | 4 + pnpm-lock.yaml | 6 + 9 files changed, 260 insertions(+) create mode 100644 packages/pluggableWidgets/gallery-web/src/model/configs/Gallery.config.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/services/GallerySetup.service.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/services/QueryParams.service.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/tokens.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts diff --git a/packages/pluggableWidgets/gallery-web/package.json b/packages/pluggableWidgets/gallery-web/package.json index 81d9012097..16a68cea99 100644 --- a/packages/pluggableWidgets/gallery-web/package.json +++ b/packages/pluggableWidgets/gallery-web/package.json @@ -46,6 +46,8 @@ "@mendix/widget-plugin-filtering": "workspace:*", "@mendix/widget-plugin-mobx-kit": "workspace:^", "@mendix/widget-plugin-sorting": "workspace:*", + "brandi": "^5.0.0", + "brandi-react": "^5.0.0", "classnames": "^2.5.1", "mobx": "6.12.3", "mobx-react-lite": "4.0.7" 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..af17c6db71 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/Gallery.config.ts @@ -0,0 +1,16 @@ +import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; +import { GalleryContainerProps } from "../../../typings/GalleryProps"; + +export interface GalleryConfig { + id: string; + name: string; +} + +export function galleryConfig(props: GalleryContainerProps): GalleryConfig { + const id = `${props.name}:Gallery@${generateUUID()}`; + + return { + id, + name: props.name + }; +} 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..5e3b0215eb --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts @@ -0,0 +1,123 @@ +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 { DatasourceService } from "@mendix/widget-plugin-grid/main"; +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 { GalleryGateProps } from "../../typings/GalleryGateProps"; +import { GalleryConfig } from "../configs/Gallery.config"; +import { QueryParamsService } from "../services/QueryParams.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. */ + define?(container: Container): void; + /** Runs on container init with deps. */ + init?(container: Container, deps: InitDependencies): void; + /** This method runs after init phase. */ + postInit?(container: Container): void; + /** This method runs only once. Should be used to inject dependencies. */ + inject?(): void; +} + +const coreBindings: BindingGroup = { + init(container, { mainGate, config }) { + container.bind(CORE.mainGate).toConstant(mainGate); + container.bind(CORE.config).toConstant(config); + } +}; + +const queryBindings: BindingGroup = { + 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); + }, + inject() { + injected(DatasourceService, CORE.setupService, GY.queryGate, GY.refreshInterval.optional); + injected(QueryParamsService, CORE.setupService, GY.query, GY.combinedFilter, GY.sortHost); + } +}; + +const filterBindings: BindingGroup = { + 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.combinedFilterConfig).toConstant({ + stableKey: config.name, + inputs: [container.get(GY.filterHost)] + }); + }, + inject() { + injected(CombinedFilter, CORE.setupService, GY.combinedFilterConfig); + injected(WidgetFilterAPI, GY.parentChannelName, GY.filterHost); + } +}; + +const sortBindings: BindingGroup = { + define(container) { + container.bind(GY.sortHost).toInstance(SortStoreHost).inSingletonScope(); + }, + init(container, { props }) { + container.bind(GY.sortHostConfig).toConstant({ initSort: props.datasource.sortOrder }); + }, + inject() { + injected(SortStoreHost, GY.sortHostConfig.optional); + } +}; + +const groups = [coreBindings, queryBindings, filterBindings, sortBindings]; + +// 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; + }): void { + for (const grp of groups) { + grp.init?.(this, dependencies); + } + + this.postInit(); + } + + private postInit(): void { + for (const grp of groups) { + grp.postInit?.(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..4e21762ede --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts @@ -0,0 +1,20 @@ +import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; +import { Container } from "brandi"; +import { GallerySetupService } from "../services/GallerySetup.service"; +import { CORE_TOKENS as CORE } from "../tokens"; + +/** + * 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(); + } +} 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/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/tokens.ts b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts new file mode 100644 index 0000000000..eeef948a89 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts @@ -0,0 +1,41 @@ +/** Tokens to resolve dependencies from the container. */ + +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 { QueryService } from "@mendix/widget-plugin-grid/main"; +import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; +import { SortInstruction } from "@mendix/widget-plugin-sorting/types/store"; +import { token } from "brandi"; +import { ListValue } from "mendix"; +import { GalleryGateProps } from "../typings/GalleryGateProps"; +import { GalleryConfig } from "./configs/Gallery.config"; +import { QueryParamsService } from "./services/QueryParams.service"; + +const label = (name: string): string => `Gallery/${name}`; + +/** Core tokens shared across containers through root container. */ +export const CORE_TOKENS = { + mainGate: token>(label("@gate:mainGate")), + setupService: token(label("@service:setupService")), + config: token(label("@config:galleryConfig")) +}; + +export const GY_TOKENS = { + // datasource + 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 + sortHost: token<{ sortOrder: SortInstruction[] | undefined }>(label("@service:sortHost")), + sortHostConfig: token<{ initSort: SortInstruction[] }>(label("@config:sortHostConfig")) +}; 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..8afe10c688 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts @@ -0,0 +1,4 @@ +import { GalleryContainerProps } from "../../typings/GalleryProps"; + +/** Type to declare props available through main gate. */ +export type GalleryGateProps = Pick; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a058423185..176ae8fca4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1563,6 +1563,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 From d1e8c7fdb55df07f4aef132032a3e15bed3687a9 Mon Sep 17 00:00:00 2001 From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com> Date: Mon, 29 Dec 2025 14:03:53 +0100 Subject: [PATCH 2/6] feat: add gallery v2 --- .../src/components/WidgetRoot.tsx | 1 + .../gallery-web/src/Gallery.tsx | 125 ++---------------- .../src/components/GalleryHeader.tsx | 13 +- .../src/components/GalleryRoot.tsx | 27 ++-- .../gallery-web/src/components/GalleryV2.tsx | 15 +++ .../features/base/GalleryRoot.viewModel.ts | 27 ++++ .../src/model/containers/Gallery.container.ts | 20 ++- .../containers/createGalleryContainer.ts | 21 +++ .../src/model/hooks/injection-hooks.ts | 5 + .../src/model/hooks/useGalleryContainer.ts | 13 ++ .../src/model/services/Texts.service.ts | 13 ++ .../gallery-web/src/model/tokens.ts | 6 +- .../src/typings/GalleryGateProps.ts | 5 +- 13 files changed, 145 insertions(+), 146 deletions(-) create mode 100644 packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/features/base/GalleryRoot.viewModel.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/containers/createGalleryContainer.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/services/Texts.service.ts diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx index d005ac1201..df477acb54 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx @@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite"; import { PropsWithChildren, ReactElement } from "react"; import { useDatagridRootVM } from "../model/hooks/injection-hooks"; +/** @remark vm source `WidgetRoot.viewModel.ts` */ export const WidgetRoot = observer(function WidgetRoot({ children }: PropsWithChildren): ReactElement { const vm = useDatagridRootVM(); diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx index 4e2262c42a..18990717f6 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx @@ -1,126 +1,19 @@ -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 { ContainerProvider } from "brandi-react"; import { observer } from "mobx-react-lite"; -import { ReactElement, ReactNode, useCallback } from "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"; +import { useGalleryContainer } from "./model/hooks/useGalleryContainer"; -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} - /> - ); +const GalleryWidget = observer(function GalleryWidget(): ReactElement { + return
; }); -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 - }); -} - export function Gallery(props: GalleryContainerProps): ReactElement { - const scope = useCreateGalleryScope(props); + const container = useGalleryContainer(props); return ( - - - + + + ); } diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx index 5d0d96a09e..81d7a5f95b 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx @@ -1,13 +1,12 @@ -import { JSX, ReactElement } from "react"; +import { ReactElement } from "react"; +import { useMainGate } from "../model/hooks/injection-hooks"; -type GalleryHeaderProps = Omit; +export function GalleryHeader(): ReactElement | null { + const { filtersPlaceholder } = useMainGate().props; -export function GalleryHeader(props: GalleryHeaderProps): ReactElement | null { - const { children } = props; - - if (!children) { + if (!filtersPlaceholder) { return null; } - return
; + return
{filtersPlaceholder}
; } diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx index bab0eee139..889c9e7050 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx @@ -1,25 +1,16 @@ 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; +/** @remark vm source `GalleryRoot.viewModel.ts` */ +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/GalleryV2.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx new file mode 100644 index 0000000000..2128720327 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx @@ -0,0 +1,15 @@ +import { ReactElement } from "react"; +import { GalleryHeader as Header } from "./GalleryHeader"; +import { GalleryRoot as Root } from "./GalleryRoot"; +import { GalleryTopBar as TopBar } from "./GalleryTopBar"; + +export function Gallery(): ReactElement { + return ( + + +
+ +
+ + ); +} diff --git a/packages/pluggableWidgets/gallery-web/src/features/base/GalleryRoot.viewModel.ts b/packages/pluggableWidgets/gallery-web/src/features/base/GalleryRoot.viewModel.ts new file mode 100644 index 0000000000..3564d7b182 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/features/base/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/model/containers/Gallery.container.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts index 5e3b0215eb..41be63b6c4 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts @@ -6,6 +6,7 @@ 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 { GalleryRootViewModel } from "../../features/base/GalleryRoot.viewModel"; import { GalleryGateProps } from "../../typings/GalleryGateProps"; import { GalleryConfig } from "../configs/Gallery.config"; import { QueryParamsService } from "../services/QueryParams.service"; @@ -84,7 +85,16 @@ const sortBindings: BindingGroup = { } }; -const groups = [coreBindings, queryBindings, filterBindings, sortBindings]; +const viewBindings: BindingGroup = { + define(container) { + container.bind(GY.galleryRootVM).toInstance(GalleryRootViewModel).inSingletonScope(); + }, + inject() { + injected(GalleryRootViewModel, CORE.mainGate); + } +}; + +const groups = [coreBindings, queryBindings, filterBindings, sortBindings, viewBindings]; // Inject tokens from groups for (const grp of groups) { @@ -107,17 +117,21 @@ export class GalleryContainer extends Container { props: GalleryGateProps; mainGate: DerivedPropsGate; config: GalleryConfig; - }): void { + }): GalleryContainer { for (const grp of groups) { grp.init?.(this, dependencies); } this.postInit(); + + return this; } - private postInit(): void { + private postInit(): GalleryContainer { for (const grp of groups) { grp.postInit?.(this); } + + return this; } } 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..3b9fc55ec3 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts @@ -0,0 +1,5 @@ +import { createInjectionHooks } from "brandi-react"; +import { CORE_TOKENS as CORE, GY_TOKENS as GY } from "../tokens"; + +export const [useGalleryRootVM] = createInjectionHooks(GY.galleryRootVM); +export const [useMainGate] = createInjectionHooks(CORE.mainGate); 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..cdf4b3cec0 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts @@ -0,0 +1,13 @@ +import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst"; +import { Container } from "brandi"; +import { useEffect } from "react"; +import { GalleryContainerProps } from "../../../typings/GalleryProps"; +import { createGalleryContainer } from "../containers/createGalleryContainer"; + +export function useGalleryContainer(props: GalleryContainerProps): Container { + const [container, mainProvider] = useConst(() => createGalleryContainer(props)); + + useEffect(() => mainProvider.setProps(props)); + + return container; +} 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..82345cafd0 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Texts.service.ts @@ -0,0 +1,13 @@ +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; + } +} diff --git a/packages/pluggableWidgets/gallery-web/src/model/tokens.ts b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts index eeef948a89..8254f740a6 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/tokens.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts @@ -8,6 +8,7 @@ import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx import { SortInstruction } from "@mendix/widget-plugin-sorting/types/store"; import { token } from "brandi"; import { ListValue } from "mendix"; +import { GalleryRootViewModel } from "../features/base/GalleryRoot.viewModel"; import { GalleryGateProps } from "../typings/GalleryGateProps"; import { GalleryConfig } from "./configs/Gallery.config"; import { QueryParamsService } from "./services/QueryParams.service"; @@ -37,5 +38,8 @@ export const GY_TOKENS = { // sorting sortHost: token<{ sortOrder: SortInstruction[] | undefined }>(label("@service:sortHost")), - sortHostConfig: token<{ initSort: SortInstruction[] }>(label("@config:sortHostConfig")) + sortHostConfig: token<{ initSort: SortInstruction[] }>(label("@config:sortHostConfig")), + + // gallery root + galleryRootVM: token(label("@viewModel:galleryRootVM")) }; diff --git a/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts index 8afe10c688..b01bf3565d 100644 --- a/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts +++ b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts @@ -1,4 +1,7 @@ import { GalleryContainerProps } from "../../typings/GalleryProps"; /** Type to declare props available through main gate. */ -export type GalleryGateProps = Pick; +export type GalleryGateProps = Pick< + GalleryContainerProps, + "name" | "style" | "class" | "datasource" | "tabIndex" | "filterSectionTitle" | "filtersPlaceholder" +>; From 593f8e17867e0eb0cd54ab24971ca604106e3ff5 Mon Sep 17 00:00:00 2001 From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com> Date: Mon, 29 Dec 2025 15:06:49 +0100 Subject: [PATCH 3/6] feat: start pagination --- .../gallery-web/src/components/GalleryV2.tsx | 16 ++++ .../gallery-web/src/components/Pagination.tsx | 6 ++ .../src/model/containers/Gallery.container.ts | 59 ++++++++----- .../services/Loder.service.ts} | 19 ++-- .../gallery-web/src/model/tokens.ts | 7 +- .../src/services/PaginationController.ts | 88 ------------------- .../gallery-web/src/stores/GalleryStore.ts | 6 +- .../src/typings/GalleryGateProps.ts | 11 ++- 8 files changed, 88 insertions(+), 124 deletions(-) create mode 100644 packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx rename packages/pluggableWidgets/gallery-web/src/{controllers/DerivedLoaderController.ts => model/services/Loder.service.ts} (54%) delete mode 100644 packages/pluggableWidgets/gallery-web/src/services/PaginationController.ts diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx index 2128720327..e72dad268f 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx @@ -1,4 +1,5 @@ import { ReactElement } from "react"; +import { GalleryFooter } from "./GalleryFooter"; import { GalleryHeader as Header } from "./GalleryHeader"; import { GalleryRoot as Root } from "./GalleryRoot"; import { GalleryTopBar as TopBar } from "./GalleryTopBar"; @@ -10,6 +11,21 @@ export function Gallery(): ReactElement {
+ +
+ {showBottomSelectionCounter &&
{selectionCounter}
} + +
+ {showBottomPagination && pagination} + {props.paginationType === "loadMore" && + (props.preview ? ( + {loadMoreButtonCaption} + ) : ( + {loadMoreButtonCaption} + ))} +
+
+ ); } 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..2fff223875 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx @@ -0,0 +1,6 @@ +import { observer } from "mobx-react-lite"; +import { ReactElement } from "react"; + +export const Pagination = observer(function Pagination(): ReactElement { + return
Pagination
; +}); diff --git a/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts index 41be63b6c4..8417c6e856 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts @@ -9,6 +9,7 @@ import { Container, injected } from "brandi"; import { GalleryRootViewModel } from "../../features/base/GalleryRoot.viewModel"; import { GalleryGateProps } from "../../typings/GalleryGateProps"; import { GalleryConfig } from "../configs/Gallery.config"; +import { LoaderService } from "../services/Loder.service"; import { QueryParamsService } from "../services/QueryParams.service"; import { CORE_TOKENS as CORE, GY_TOKENS as GY } from "../tokens"; @@ -25,7 +26,7 @@ interface BindingGroup { /** Runs on container init with deps. */ init?(container: Container, deps: InitDependencies): void; /** This method runs after init phase. */ - postInit?(container: Container): void; + postInit?(container: Container, deps: InitDependencies): void; /** This method runs only once. Should be used to inject dependencies. */ inject?(): void; } @@ -38,6 +39,10 @@ const coreBindings: BindingGroup = { }; const 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(); @@ -48,14 +53,14 @@ const queryBindings: BindingGroup = { postInit(container) { // Create param service instance. container.get(GY.queryParams); - }, - inject() { - injected(DatasourceService, CORE.setupService, GY.queryGate, GY.refreshInterval.optional); - injected(QueryParamsService, CORE.setupService, GY.query, GY.combinedFilter, GY.sortHost); } }; const 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(); @@ -67,34 +72,52 @@ const filterBindings: BindingGroup = { inputs: [container.get(GY.filterHost)] }); }, - inject() { - injected(CombinedFilter, CORE.setupService, GY.combinedFilterConfig); - injected(WidgetFilterAPI, GY.parentChannelName, GY.filterHost); + postInit(container, { props }) { + // Hydrate filters from props + container.get(GY.combinedFilter).hydrate(props.datasource.filter); } }; const 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 }); - }, - inject() { - injected(SortStoreHost, GY.sortHostConfig.optional); } }; const viewBindings: BindingGroup = { + inject() { + injected(GalleryRootViewModel, CORE.mainGate); + }, define(container) { container.bind(GY.galleryRootVM).toInstance(GalleryRootViewModel).inSingletonScope(); - }, + } +}; + +const loaderBindings: BindingGroup = { inject() { - injected(GalleryRootViewModel, CORE.mainGate); + 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 groups = [coreBindings, queryBindings, filterBindings, sortBindings, viewBindings]; +const groups = [coreBindings, queryBindings, filterBindings, sortBindings, viewBindings, loaderBindings]; // Inject tokens from groups for (const grp of groups) { @@ -122,14 +145,8 @@ export class GalleryContainer extends Container { grp.init?.(this, dependencies); } - this.postInit(); - - return this; - } - - private postInit(): GalleryContainer { for (const grp of groups) { - grp.postInit?.(this); + grp.postInit?.(this, dependencies); } return this; diff --git a/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts b/packages/pluggableWidgets/gallery-web/src/model/services/Loder.service.ts similarity index 54% rename from packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts rename to packages/pluggableWidgets/gallery-web/src/model/services/Loder.service.ts index 0585e621db..468fa7fe45 100644 --- a/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Loder.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/tokens.ts b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts index 8254f740a6..2ad397515b 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/tokens.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts @@ -11,6 +11,7 @@ import { ListValue } from "mendix"; import { GalleryRootViewModel } from "../features/base/GalleryRoot.viewModel"; import { GalleryGateProps } from "../typings/GalleryGateProps"; import { GalleryConfig } from "./configs/Gallery.config"; +import { LoaderService } from "./services/Loder.service"; import { QueryParamsService } from "./services/QueryParams.service"; const label = (name: string): string => `Gallery/${name}`; @@ -41,5 +42,9 @@ export const GY_TOKENS = { sortHostConfig: token<{ initSort: SortInstruction[] }>(label("@config:sortHostConfig")), // gallery root - galleryRootVM: token(label("@viewModel:galleryRootVM")) + galleryRootVM: token(label("@viewModel:galleryRootVM")), + + // loader + loaderConfig: token<{ refreshIndicator: boolean; showSilentRefresh: boolean }>(label("@config:loaderConfig")), + loader: token(label("@service:loader")) }; 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 index 448a280229..d96116969f 100644 --- a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts +++ b/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts @@ -9,8 +9,8 @@ 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 { LoaderService } from "../model/services/Loder.service"; import { PaginationController } from "../services/PaginationController"; import { ObservableStorage } from "../typings/storage"; import { AttributeStorage } from "./AttributeStorage"; @@ -56,7 +56,7 @@ export class GalleryStore extends SetupHost { readonly paging: PaginationController; readonly filterAPI: FilterAPI; readonly sortAPI: SortAPI; - loaderCtrl: DerivedLoaderController; + loaderCtrl: LoaderService; selectionCountStore: SelectionCounterViewModel; constructor(spec: GalleryStoreSpec) { @@ -96,7 +96,7 @@ export class GalleryStore extends SetupHost { host: this._sortHost }; - this.loaderCtrl = new DerivedLoaderController(this._query, spec.refreshIndicator, spec.refreshInterval >= 1); + this.loaderCtrl = new LoaderService(this._query, spec.refreshIndicator, spec.refreshInterval >= 1); const useStorage = spec.storeFilters || spec.storeSort; if (useStorage) { diff --git a/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts index b01bf3565d..436cece14e 100644 --- a/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts +++ b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts @@ -3,5 +3,14 @@ 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" + | "name" + | "style" + | "class" + | "datasource" + | "tabIndex" + | "filterSectionTitle" + | "filtersPlaceholder" + | "refreshIndicator" + | "refreshInterval" + | "selectionCountPosition" >; From 8742c1044088190b35a581b5455d36218e75bf04 Mon Sep 17 00:00:00 2001 From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com> Date: Fri, 30 Jan 2026 09:43:04 +0100 Subject: [PATCH 4/6] feat: move to brandi --- .../features/pagination/pagination.model.ts | 32 -- .../model/containers/Datagrid.container.ts | 24 +- .../datagrid-web/src/model/tokens.ts | 12 +- .../gallery-web/src/Gallery.editorPreview.tsx | 109 +--- .../gallery-web/src/Gallery.tsx | 6 +- .../gallery-web/src/Gallery.xml | 87 +++- .../src/components/EmptyPlaceholder.tsx | 15 + .../gallery-web/src/components/Gallery.tsx | 167 ------ .../src/components/GalleryContent.tsx | 31 +- .../src/components/GalleryFooter.tsx | 12 +- .../src/components/GalleryFooterControls.tsx | 35 ++ .../src/components/GalleryHeader.tsx | 25 +- .../src/components/GalleryItems.tsx | 32 ++ .../src/components/GalleryRoot.tsx | 1 - .../src/components/GalleryTobBarControls.tsx | 26 + .../gallery-web/src/components/GalleryV2.tsx | 31 -- .../src/components/GalleryWidget.tsx | 28 + .../src/components/HeaderWidgetsHost.tsx | 22 - .../gallery-web/src/components/ListBox.tsx | 6 +- .../gallery-web/src/components/ListItem.tsx | 48 +- .../gallery-web/src/components/LoadMore.tsx | 14 +- .../gallery-web/src/components/Pagination.tsx | 25 +- .../src/components/SelectionCounter.tsx | 35 -- .../src/components/__tests__/Gallery.spec.tsx | 209 -------- .../components/__tests__/GalleryRoot.spec.tsx | 30 ++ .../__snapshots__/Gallery.spec.tsx.snap | 492 ------------------ .../__snapshots__/GalleryRoot.spec.tsx.snap | 11 + ...sController.ts => ItemEvents.viewModel.ts} | 63 +-- .../item-interaction/get-item-aria-props.ts | 4 +- .../selection-counter/SelectionCounter.tsx | 20 + .../selection-counter/injection-hooks.ts | 4 + .../src/features/useGridPositions.ts | 55 -- .../src/features/useGridPositionsPreview.ts | 54 -- .../gallery-web/src/helpers/ItemHelper.tsx | 47 -- .../src/helpers/ItemPreviewHelper.tsx | 50 -- .../gallery-web/src/helpers/root-context.ts | 21 - .../src/helpers/useGalleryJSActions.ts | 11 - .../src/helpers/useGalleryStore.ts | 18 - .../src/helpers/useItemSelectHelper.ts | 10 - .../src/model/configs/Gallery.config.ts | 37 +- .../model/configs/GalleryPagination.config.ts | 60 +++ .../GalleryPagination.config.spec.ts | 12 + .../src/model/containers/Gallery.container.ts | 203 +++++++- .../src/model/containers/Root.container.ts | 82 ++- .../__tests__/createGalleryContainer.spec.ts | 65 +++ .../src/model/hooks/injection-hooks.ts | 21 + .../src/model/models/items.model.ts | 11 + .../src/model/models/layout.model.ts | 19 + .../src/model/services/Layout.service.ts | 87 ++++ .../{Loder.service.ts => Loader.service.ts} | 0 .../model/services/SelectionGate.service.ts | 17 + .../src/model/services/Texts.service.ts | 4 + .../gallery-web/src/model/tokens.ts | 104 +++- .../gallery-web/src/stores/GalleryStore.ts | 131 ----- .../src/typings/GalleryGateProps.ts | 26 + .../src/utils/builders/ItemHelperBuilder.ts | 40 -- .../src/utils/mock-container-props.ts | 33 ++ .../gallery-web/src/utils/test-utils.tsx | 161 ------ .../view-models/EmptyPlaceholder.viewModel.ts | 27 + .../src/view-models/GalleryItem.viewModel.ts | 49 ++ .../GalleryRoot.viewModel.ts | 0 .../__tests__/GalleryItem.viewModel.spec.tsx | 157 ++++++ .../__tests__/GalleryRoot.viewModel.spec.tsx | 39 ++ .../gallery-web/typings/GalleryProps.d.ts | 25 +- .../src/interfaces}/GridPageControl.ts | 0 .../shared/widget-plugin-grid/src/main.ts | 5 +- .../pagination/DynamicPagination.feature.ts | 2 +- .../src}/pagination/PageControl.service.ts | 4 +- .../src}/pagination/Pagination.viewModel.ts | 33 +- .../widget-plugin-grid/src/pagination/main.ts | 7 + .../src/pagination/pagination.model.ts | 38 +- 71 files changed, 1543 insertions(+), 1878 deletions(-) delete mode 100644 packages/pluggableWidgets/datagrid-web/src/features/pagination/pagination.model.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/components/EmptyPlaceholder.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/components/GalleryFooterControls.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/components/GalleryTobBarControls.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/components/GalleryWidget.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/components/HeaderWidgetsHost.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/components/__tests__/Gallery.spec.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/components/__tests__/GalleryRoot.spec.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap create mode 100644 packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/GalleryRoot.spec.tsx.snap rename packages/pluggableWidgets/gallery-web/src/features/item-interaction/{ItemEventsController.ts => ItemEvents.viewModel.ts} (71%) create mode 100644 packages/pluggableWidgets/gallery-web/src/features/selection-counter/SelectionCounter.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/features/selection-counter/injection-hooks.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/features/useGridPositions.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/features/useGridPositionsPreview.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/helpers/ItemHelper.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/helpers/ItemPreviewHelper.tsx delete mode 100644 packages/pluggableWidgets/gallery-web/src/helpers/root-context.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/helpers/useGalleryJSActions.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/helpers/useGalleryStore.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/helpers/useItemSelectHelper.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/configs/__tests__/GalleryPagination.config.spec.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/containers/__tests__/createGalleryContainer.spec.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/models/items.model.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts rename packages/pluggableWidgets/gallery-web/src/model/services/{Loder.service.ts => Loader.service.ts} (100%) create mode 100644 packages/pluggableWidgets/gallery-web/src/model/services/SelectionGate.service.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/utils/builders/ItemHelperBuilder.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/utils/mock-container-props.ts delete mode 100644 packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/view-models/EmptyPlaceholder.viewModel.ts create mode 100644 packages/pluggableWidgets/gallery-web/src/view-models/GalleryItem.viewModel.ts rename packages/pluggableWidgets/gallery-web/src/{features/base => view-models}/GalleryRoot.viewModel.ts (100%) create mode 100644 packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryItem.viewModel.spec.tsx create mode 100644 packages/pluggableWidgets/gallery-web/src/view-models/__tests__/GalleryRoot.viewModel.spec.tsx rename packages/{pluggableWidgets/datagrid-web/src/features/pagination => shared/widget-plugin-grid/src/interfaces}/GridPageControl.ts (100%) rename packages/{pluggableWidgets/datagrid-web/src/features => shared/widget-plugin-grid/src}/pagination/DynamicPagination.feature.ts (96%) rename packages/{pluggableWidgets/datagrid-web/src/features => shared/widget-plugin-grid/src}/pagination/PageControl.service.ts (85%) rename packages/{pluggableWidgets/datagrid-web/src/features => shared/widget-plugin-grid/src}/pagination/Pagination.viewModel.ts (69%) create mode 100644 packages/shared/widget-plugin-grid/src/pagination/main.ts diff --git a/packages/pluggableWidgets/datagrid-web/src/features/pagination/pagination.model.ts b/packages/pluggableWidgets/datagrid-web/src/features/pagination/pagination.model.ts deleted file mode 100644 index 7d19cf3143..0000000000 --- a/packages/pluggableWidgets/datagrid-web/src/features/pagination/pagination.model.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { boundPageSize } from "@mendix/widget-plugin-grid/main"; -import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main"; -import { computed } from "mobx"; -import { ReactNode } from "react"; - -/** 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); - }); -} - -/** Atom for the dynamic page size. */ -export function dynamicPageSizeAtom( - gate: DerivedPropsGate<{ dynamicPageSize?: { value?: Big } }> -): ComputedAtom { - return boundPageSize(() => gate.props.dynamicPageSize?.value?.toNumber() ?? -1); -} - -export function customPaginationAtom( - gate: DerivedPropsGate<{ customPagination?: ReactNode }> -): ComputedAtom { - return computed(() => gate.props.customPagination); -} diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts index 2493dfe82c..733fd39f9e 100644 --- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts +++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts @@ -6,15 +6,23 @@ import { createClickActionHelper, createFocusController, createSelectionHelper, - createSetPageAction, - createSetPageSizeAction, - currentPageAtom, DatasourceService, layoutAtom, - pageSizeAtom, SelectActionsProvider, TaskProgressService } 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"; @@ -22,11 +30,7 @@ import { Container, injected } from "brandi"; import { MainGateProps } from "../../../typings/MainGateProps"; import { WidgetRootViewModel } from "../../features/base/WidgetRoot.viewModel"; import { EmptyPlaceholderViewModel } from "../../features/empty-message/EmptyPlaceholder.viewModel"; -import { DynamicPaginationFeature } from "../../features/pagination/DynamicPagination.feature"; -import { PageControlService } from "../../features/pagination/PageControl.service"; import { paginationConfig } from "../../features/pagination/pagination.config"; -import { customPaginationAtom, dynamicPageAtom, dynamicPageSizeAtom } from "../../features/pagination/pagination.model"; -import { PaginationViewModel } from "../../features/pagination/Pagination.viewModel"; import { createCellEventsController } from "../../features/row-interaction/CellEventsController"; import { creteCheckboxEventsController } from "../../features/row-interaction/CheckboxEventsController"; import { SelectAllModule } from "../../features/select-all/SelectAllModule.container"; @@ -39,8 +43,8 @@ import { rowClassProvider } from "../models/rows.model"; import { DatasourceParamsController } from "../services/DatasourceParamsController"; import { DerivedLoaderController } from "../services/DerivedLoaderController"; import { SelectionGate } from "../services/SelectionGate.service"; -import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens"; import { GridSizeStore } from "../stores/GridSize.store"; +import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens"; // base injected(ColumnGroupStore, CORE.setupService, CORE.mainGate, CORE.config, DG.filterHost); @@ -48,7 +52,7 @@ injected(DatasourceParamsController, CORE.setupService, DG.query, DG.combinedFil injected(DatasourceService, CORE.setupService, DG.queryGate, DG.refreshInterval.optional); injected(GridBasicData, CORE.mainGate); injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.selectionDialogVM); -injected(GridSizeStore, CORE.atoms.hasMoreItems, DG.paginationConfig, DG.setPageAction); +injected(GridSizeStore, CORE.atoms.hasMoreItems, DG.paginationConfig, DG.setPageAction.optional); /** Pagination **/ injected(createSetPageAction, DG.query, DG.paginationConfig, DG.currentPage, DG.pageSize); diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts index cdcf6d5911..cfe55f1015 100644 --- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts +++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts @@ -10,9 +10,15 @@ import { SelectAllService, SelectionDynamicProps, SelectionHelperService, - SetPageAction, TaskProgressService } from "@mendix/widget-plugin-grid/main"; +import { + DynamicPaginationFeature, + GridPageControl, + PageSizeStore, + PaginationViewModel, + SetPageAction +} from "@mendix/widget-plugin-grid/pagination/main"; import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature"; import { BarStore, @@ -27,9 +33,6 @@ import { CSSProperties, ReactNode } from "react"; import { MainGateProps } from "../../typings/MainGateProps"; import { WidgetRootViewModel } from "../features/base/WidgetRoot.viewModel"; import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel"; -import { DynamicPaginationFeature } from "../features/pagination/DynamicPagination.feature"; -import { GridPageControl } from "../features/pagination/GridPageControl"; -import { PaginationViewModel } from "../features/pagination/Pagination.viewModel"; import { PaginationConfig } from "../features/pagination/pagination.config"; import { CellEventsController } from "../features/row-interaction/CellEventsController"; import { CheckboxEventsController } from "../features/row-interaction/CheckboxEventsController"; @@ -45,7 +48,6 @@ import { RowClassProvider } from "./models/rows.model"; import { DatagridSetupService } from "./services/DatagridSetup.service"; import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController"; import { TextsService } from "./services/Texts.service"; -import { PageSizeStore } from "./stores/PageSize.store"; import { GridSizeStore } from "./stores/GridSize.store"; /** Tokens to resolve dependencies from the container. */ diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx index e1994c0b37..ce1859a112 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx @@ -1,112 +1,19 @@ import { enableStaticRendering } from "mobx-react-lite"; enableStaticRendering(true); -import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper"; -import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController"; -import { getColumnAndRowBasedOnIndex } from "@mendix/widget-plugin-grid/selection"; -import { getGlobalSortContext } from "@mendix/widget-plugin-sorting/react/context"; -import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost"; -import { GUID, ObjectItem } from "mendix"; -import { createElement, ReactElement, ReactNode, RefObject, useCallback, useMemo } from "react"; +import { createElement, ReactElement } from "react"; import { GalleryPreviewProps } from "../typings/GalleryProps"; -import { Gallery as GalleryComponent } from "./components/Gallery"; -import { useItemEventsController } from "./features/item-interaction/ItemEventsController"; -import { useGridPositionsPreview } from "./features/useGridPositionsPreview"; -import { useItemPreviewHelper } from "./helpers/ItemPreviewHelper"; -import { useItemSelectHelper } from "./helpers/useItemSelectHelper"; import "./ui/GalleryPreview.scss"; -const SortAPI = getGlobalSortContext(); - function Preview(props: GalleryPreviewProps): ReactElement { - const { emptyPlaceholder } = props; - const { numberOfColumns, numberOfRows, containerRef, numberOfItems } = useGridPositionsPreview({ - phoneItems: props.phoneItems ?? 1, - tabletItems: props.tabletItems ?? 1, - desktopItems: props.desktopItems ?? 1, - totalItems: props.pageSize ?? 3 - }); - - const items: ObjectItem[] = Array.from({ length: numberOfItems }).map((_, index) => ({ - id: String(index) as GUID - })); - - const selectHelper = useItemSelectHelper(props.itemSelection, undefined); - - const getPositionCallback = useCallback( - (index: number) => getColumnAndRowBasedOnIndex(numberOfColumns, items.length, index), - [numberOfColumns, items.length] - ); - - const focusController = useFocusTargetController({ - rows: numberOfRows, - columns: numberOfColumns, - pageSize: props.pageSize ?? 0 - }); - - const clickActionHelper = useClickActionHelper({ onClick: props.onClick, onClickTrigger: "none" }); - - const itemEventsController = useItemEventsController( - selectHelper, - clickActionHelper, - focusController, - numberOfColumns, - props.itemSelectionMode - ); - - const sortAPI = useMemo( - () => - ({ - version: 1, - host: new SortStoreHost() - }) as const, - [] - ); - return ( -
}> - ReactElement) => ( - - {renderWrapper(null)} - - ), - [emptyPlaceholder] - )} - header={ - - -
- - - } - showHeader - hasMoreItems={false} - items={items} - itemHelper={useItemPreviewHelper({ - contentValue: props.content, - hasOnClick: props.onClick !== null - })} - numberOfItems={props.pageSize!} - page={0} - pageSize={props.pageSize!} - paging={props.pagination === "buttons"} - paginationPosition={props.pagingPosition} - paginationType={props.pagination} - showPagingButtons={props.showPagingButtons} - showEmptyStatePreview={props.showEmptyPlaceholder === "custom"} - phoneItems={props.phoneItems!} - tabletItems={props.tabletItems!} - selectHelper={selectHelper} - itemEventsController={itemEventsController} - focusController={focusController} - getPosition={getPositionCallback} - showRefreshIndicator={false} - preview - /> +
+ FIX ME: Preview for gallery +
+ +
+ +
); } diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx index 18990717f6..1e98553069 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx @@ -1,13 +1,9 @@ import { ContainerProvider } from "brandi-react"; -import { observer } from "mobx-react-lite"; import { ReactElement } from "react"; import { GalleryContainerProps } from "../typings/GalleryProps"; +import { GalleryWidget } from "./components/GalleryWidget"; import { useGalleryContainer } from "./model/hooks/useGalleryContainer"; -const GalleryWidget = observer(function GalleryWidget(): ReactElement { - return
; -}); - export function Gallery(props: GalleryContainerProps): ReactElement { const container = useGalleryContainer(props); diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.xml b/packages/pluggableWidgets/gallery-web/src/Gallery.xml index f786af638b..96501e5432 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.xml +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.xml @@ -95,6 +95,14 @@ Load more + + Custom pagination + + + + Custom pagination + + Show total count @@ -124,6 +132,27 @@ 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 + + + + @@ -162,6 +191,48 @@ + + + Row count singular + Must include '%d' to denote number position + + %d row selected + %d rij geselecteerd + + + + Row count plural + Must include '%d' to denote number position + + %d rows selected + %d rijen geselecteerd + + + + Select all text + + + Select all rows in the data source + Selecteer alle rijen in de gegevensbron + + + + Select all template + This caption used when total count is available. + + Select all %d rows in the data source + Selecteer alle %d rijen in de gegevensbron + + + + Select status template + + + All %d rows selected. + Alle %d rijen geselecteerd. + + + @@ -212,22 +283,6 @@ Item description Assistive technology will read this upon reaching each gallery item. - - Item count singular - Must include '%d' to denote number position - - %d item selected - %d item geselecteerd - - - - Item count plural - Must include '%d' to denote number position - - %d items selected - %d items geselecteerd - - 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..fe7c5c838a 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().isLimitBased; 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..508a17780b --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryFooterControls.tsx @@ -0,0 +1,35 @@ +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 { LoadMore } from "./LoadMore"; +import { Pagination } from "./Pagination"; + +export const GalleryFooterControls = observer(function GalleryFooterControls(): ReactElement { + const counterVM = useSelectionCounterViewModel(); + const pgConfig = usePaginationConfig(); + const loadMoreButtonCaption = "Load more"; + + return ( +
+
+ + + +
+
+ + {loadMoreButtonCaption} + +
+
+ + + +
+
+ ); +} +) \ No newline at end of file diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx index 81d7a5f95b..4e01b2fd99 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryHeader.tsx @@ -1,12 +1,29 @@ +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 { useMainGate } from "../model/hooks/injection-hooks"; +import { useFilterAPI, useMainGate, useSelectionHelper, useSortAPI } from "../model/hooks/injection-hooks"; -export function GalleryHeader(): ReactElement | null { +const SelectionContext = getGlobalSelectionContext(); +const SortAPI = getGlobalSortContext(); +const FilterAPI = getGlobalFilterContextObject(); + +export const GalleryHeader = observer(function GalleryHeader(): ReactElement | null { const { filtersPlaceholder } = useMainGate().props; + const filterAPI = useFilterAPI(); + const sortAPI = useSortAPI(); + const selectionContext = useCreateSelectionContextValue(useSelectionHelper()); if (!filtersPlaceholder) { return null; } - return
{filtersPlaceholder}
; -} + 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..0e6aa5ed7c --- /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 === 0) { + return
Empty
; + } + + 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 889c9e7050..f4946b70af 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryRoot.tsx @@ -3,7 +3,6 @@ import { observer } from "mobx-react-lite"; import { PropsWithChildren, ReactElement } from "react"; import { useGalleryRootVM } from "../model/hooks/injection-hooks"; -/** @remark vm source `GalleryRoot.viewModel.ts` */ export const GalleryRoot = observer(function GalleryRoot(props: PropsWithChildren): ReactElement { const { children } = props; const vm = useGalleryRootVM(); 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..eb8bfbd85f --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryTobBarControls.tsx @@ -0,0 +1,26 @@ +import { If } from "@mendix/widget-plugin-component-kit/If"; +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 function GalleryTobBarControls(): ReactElement { + const counterVM = useSelectionCounterViewModel(); + const pgConfig = usePaginationConfig(); + + return ( +
+
+ + + + +
+ +
+ +
+
+ ); +} diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx deleted file mode 100644 index e72dad268f..0000000000 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryV2.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { ReactElement } from "react"; -import { GalleryFooter } from "./GalleryFooter"; -import { GalleryHeader as Header } from "./GalleryHeader"; -import { GalleryRoot as Root } from "./GalleryRoot"; -import { GalleryTopBar as TopBar } from "./GalleryTopBar"; - -export function Gallery(): ReactElement { - return ( - - -
- -
- -
- {showBottomSelectionCounter &&
{selectionCounter}
} - -
- {showBottomPagination && pagination} - {props.paginationType === "loadMore" && - (props.preview ? ( - {loadMoreButtonCaption} - ) : ( - {loadMoreButtonCaption} - ))} -
-
- - - ); -} 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..cf016313d5 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryWidget.tsx @@ -0,0 +1,28 @@ +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"; + +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..ddedc94ad2 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx @@ -1,31 +1,30 @@ +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 { 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 clickable = itemVM.hasOnClick(item) || selectActions.selectionType !== "None"; + const ariaProps = getAriaProps(item, selectActions, 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} > - {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..df9c4e9118 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 } from "../model/hooks/injection-hooks"; export function LoadMoreButton(props: JSX.IntrinsicElements["button"]): ReactNode { return ( @@ -11,10 +11,8 @@ 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(); if (paging.pagination !== "loadMore") { return null; @@ -24,5 +22,9 @@ 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)}> + Fix me: Add load more caption from props + + ); }); diff --git a/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx b/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx index 2fff223875..bdbac0fe0b 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/Pagination.tsx @@ -1,6 +1,25 @@ +import { Pagination as PaginationComponent } from "@mendix/widget-plugin-grid/components/Pagination"; import { observer } from "mobx-react-lite"; -import { ReactElement } from "react"; +import { ReactNode } from "react"; +import { usePaginationVM } from "../model/hooks/injection-hooks"; -export const Pagination = observer(function Pagination(): ReactElement { - return
Pagination
; +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/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/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..52192a23a3 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,5 @@ +import { SelectActionsService } from "@mendix/widget-plugin-grid/interfaces/SelectActionsService"; import { ObjectItem } from "mendix"; -import { SelectActionHandler } from "@mendix/widget-plugin-grid/selection"; type ListItemRole = "option" | "listitem"; @@ -10,7 +10,7 @@ type ListItemAriaProps = { "aria-label": string | undefined; }; -export function getAriaProps(item: ObjectItem, helper: SelectActionHandler, label?: string): ListItemAriaProps { +export function getAriaProps(item: ObjectItem, helper: SelectActionsService, label?: string): ListItemAriaProps { if (helper.selectionType === "Single" || helper.selectionType === "Multi") { return { role: "option", 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/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 index af17c6db71..aa7f1df8ea 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/configs/Gallery.config.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/Gallery.config.ts @@ -1,9 +1,25 @@ +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 { @@ -11,6 +27,25 @@ export function galleryConfig(props: GalleryContainerProps): GalleryConfig { return { id, - name: props.name + name: props.name, + refreshIntervalMs: 0, + selectionEnabled: isSelectionEnabled(props), + selectionType: selectionType(props), + selectionMode: props.itemSelectionMode, + keepSelection: props.keepSelection, + autoSelect: false, + 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"; +} 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..3915b10b57 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts @@ -0,0 +1,60 @@ +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; + pagination: PaginationEnum; + paginationKind: PaginationKind; + pagingPosition: PagingPositionEnum; + requestTotalCount: boolean; + showPagingButtons: ShowPagingButtonsEnum; + showTotalCount: 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), + pagination: props.pagination, + paginationKind: paginationKind(props), + pagingPosition: props.pagingPosition, + requestTotalCount: requestTotalCount(props), + showPagingButtons: props.showPagingButtons, + showTotalCount: props.showTotalCount + }; + + return Object.freeze(config); +} + +export function paginationKind(props: GalleryGateProps): PaginationKind { + if (1 * Math.random()) { + 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 Math.random !== undefined && !isLimitBased(props); +} + +export function dynamicPageEnabled(props: GalleryGateProps): boolean { + return Math.random !== undefined && !isLimitBased(props); +} + +function requestTotalCount(props: GalleryGateProps): boolean { + return props.pagination === "buttons" || props.showTotalCount; +} 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 index 8417c6e856..8b2d546260 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Gallery.container.ts @@ -1,16 +1,44 @@ 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 { DatasourceService } from "@mendix/widget-plugin-grid/main"; +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 { GalleryRootViewModel } from "../../features/base/GalleryRoot.viewModel"; +import { createItemEventsVMAtom } from "../../features/item-interaction/ItemEvents.viewModel"; 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 { LoaderService } from "../services/Loder.service"; +import { galleryPaginationConfig } from "../configs/GalleryPagination.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 { @@ -21,24 +49,30 @@ interface InitDependencies { /** Just little utility object to group related bindings */ interface BindingGroup { - /** Runs during container constructor. */ + /** Runs during container constructor. Use this hook to add new binding to the container. */ define?(container: Container): void; - /** Runs on container init with deps. */ + /** 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. */ + /** 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 coreBindings: BindingGroup = { +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 queryBindings: BindingGroup = { +const _02_queryBindings: BindingGroup = { inject() { injected(DatasourceService, CORE.setupService, GY.queryGate, GY.refreshInterval.optional); injected(QueryParamsService, CORE.setupService, GY.query, GY.combinedFilter, GY.sortHost); @@ -56,7 +90,7 @@ const queryBindings: BindingGroup = { } }; -const filterBindings: BindingGroup = { +const _03_filterBindings: BindingGroup = { inject() { injected(CombinedFilter, CORE.setupService, GY.combinedFilterConfig); injected(WidgetFilterAPI, GY.parentChannelName, GY.filterHost); @@ -67,6 +101,7 @@ const filterBindings: BindingGroup = { 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)] @@ -78,7 +113,7 @@ const filterBindings: BindingGroup = { } }; -const sortBindings: BindingGroup = { +const _04_sortBindings: BindingGroup = { inject() { injected(SortStoreHost, GY.sortHostConfig.optional); }, @@ -87,19 +122,27 @@ const sortBindings: BindingGroup = { }, 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 viewBindings: BindingGroup = { +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).inSingletonScope(); + container.bind(GY.galleryRootVM).toInstance(GalleryRootViewModel).inTransientScope(); + container.bind(GY.galleryItemVM).toInstance(GalleryItemViewModel).inTransientScope(); + container.bind(GY.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inTransientScope(); } }; -const loaderBindings: BindingGroup = { +const _06_loaderBindings: BindingGroup = { inject() { injected(LoaderService, GY.query, GY.loaderConfig); }, @@ -117,7 +160,139 @@ const loaderBindings: BindingGroup = { } }; -const groups = [coreBindings, queryBindings, filterBindings, sortBindings, viewBindings, loaderBindings]; +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 groups = [ + _01_coreBindings, + _02_queryBindings, + _03_filterBindings, + _04_sortBindings, + _05_viewBindings, + _06_loaderBindings, + _07_selectionBindings, + _08_paginationBindings, + _09_itemEventsBindings +]; // Inject tokens from groups for (const grp of groups) { diff --git a/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts index 4e21762ede..445451e9d8 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts @@ -1,7 +1,83 @@ +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 } from "brandi"; +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 = { + 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. @@ -16,5 +92,9 @@ export class RootContainer extends Container { // 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/hooks/injection-hooks.ts b/packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts index 3b9fc55ec3..fd33dcc465 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/hooks/injection-hooks.ts @@ -2,4 +2,25 @@ 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); 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..a826bb470f --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts @@ -0,0 +1,19 @@ +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(() => new VirtualGridLayout(layoutStore.numberOfRows, layoutStore.numberOfColumns, pageSize.get())); +} + +/** @injectable */ +export function numberOfColumnsAtom(layoutStore: { numberOfColumns: number }): ComputedAtom { + return computed(() => layoutStore.numberOfColumns); +} 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..18ee35ff2d --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts @@ -0,0 +1,87 @@ +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, { + breakpoint: computed, + numberOfColumns: computed, + numberOfRows: computed, + getPositionFn: computed, + setWidth: action, + 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/model/services/Loder.service.ts b/packages/pluggableWidgets/gallery-web/src/model/services/Loader.service.ts similarity index 100% rename from packages/pluggableWidgets/gallery-web/src/model/services/Loder.service.ts rename to packages/pluggableWidgets/gallery-web/src/model/services/Loader.service.ts 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 index 82345cafd0..4db58c95be 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/services/Texts.service.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Texts.service.ts @@ -10,4 +10,8 @@ export class TextsService { get headerAriaLabel(): string | undefined { return this.gate.props.filterSectionTitle?.value; } + + get listboxAriaLabel(): string | undefined { + return this.gate.props.ariaLabelListBox?.value; + } } diff --git a/packages/pluggableWidgets/gallery-web/src/model/tokens.ts b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts index 2ad397515b..a4ec5d9560 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/tokens.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/tokens.ts @@ -3,28 +3,79 @@ 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 { QueryService } from "@mendix/widget-plugin-grid/main"; -import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; +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 } from "mendix"; -import { GalleryRootViewModel } from "../features/base/GalleryRoot.viewModel"; +import { ListValue, ObjectItem } from "mendix"; +import { ReactNode } from "react"; +import { ItemEventsViewModel } from "../features/item-interaction/ItemEvents.viewModel"; 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 { LoaderService } from "./services/Loder.service"; +import { GalleryPaginationConfig } from "./configs/GalleryPagination.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}`; +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")) + 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 = { - // datasource + // query query: token(label("@service:query")), queryGate: token>(label("@gate:queryGate")), refreshInterval: token(label("@const:refreshInterval")), @@ -38,13 +89,46 @@ export const GY_TOKENS = { parentChannelName: token(label("@const:parentChannelName")), // sorting + sortAPI: token(label("@service:sortAPI")), sortHost: token<{ sortOrder: SortInstruction[] | undefined }>(label("@service:sortHost")), sortHostConfig: token<{ initSort: SortInstruction[] }>(label("@config:sortHostConfig")), - // gallery root + // 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")) + 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") + } }; 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 d96116969f..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 { QueryParamsController } from "../controllers/QueryParamsController"; -import { LoaderService } from "../model/services/Loder.service"; -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: LoaderService; - 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 LoaderService(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 index 436cece14e..2e3628d1af 100644 --- a/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts +++ b/packages/pluggableWidgets/gallery-web/src/typings/GalleryGateProps.ts @@ -13,4 +13,30 @@ export type GalleryGateProps = Pick< | "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" >; 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..ae010d9a5d --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/utils/mock-container-props.ts @@ -0,0 +1,33 @@ +import { dynamic, 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, + selectAllTemplate: dynamic("%d items selected"), + selectAllText: dynamic("Select all"), + allSelectedText: dynamic("All items selected") + }; +} 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/features/base/GalleryRoot.viewModel.ts b/packages/pluggableWidgets/gallery-web/src/view-models/GalleryRoot.viewModel.ts similarity index 100% rename from packages/pluggableWidgets/gallery-web/src/features/base/GalleryRoot.viewModel.ts rename to packages/pluggableWidgets/gallery-web/src/view-models/GalleryRoot.viewModel.ts 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..44b46b92ee 100644 --- a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts +++ b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts @@ -5,6 +5,7 @@ */ 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 ItemSelectionModeEnum = "toggle" | "clear"; @@ -42,16 +43,26 @@ export interface GalleryContainerProps { phoneItems: number; pageSize: number; pagination: PaginationEnum; + useCustomPagination: boolean; + customPagination?: ReactNode; showTotalCount: boolean; showPagingButtons: ShowPagingButtonsEnum; pagingPosition: PagingPositionEnum; loadMoreButtonCaption?: DynamicValue; + dynamicPageSize?: EditableValue; + dynamicPage?: EditableValue; + totalCountValue?: EditableValue; showEmptyPlaceholder: ShowEmptyPlaceholderEnum; emptyPlaceholder?: ReactNode; itemClass?: ListExpressionValue; onClickTrigger: OnClickTriggerEnum; onClick?: ListActionValue; onSelectionChange?: ActionValue; + selectedCountTemplateSingular?: DynamicValue; + selectedCountTemplatePlural?: DynamicValue; + selectAllText: DynamicValue; + selectAllTemplate: DynamicValue; + allSelectedText: DynamicValue; stateStorageType: StateStorageTypeEnum; stateStorageAttr?: EditableValue; storeFilters: boolean; @@ -60,8 +71,6 @@ export interface GalleryContainerProps { emptyMessageTitle?: DynamicValue; ariaLabelListBox?: DynamicValue; ariaLabelItem?: ListExpressionValue; - selectedCountTemplateSingular?: DynamicValue; - selectedCountTemplatePlural?: DynamicValue; } export interface GalleryPreviewProps { @@ -90,16 +99,26 @@ export interface GalleryPreviewProps { phoneItems: number | null; pageSize: number | null; pagination: PaginationEnum; + useCustomPagination: boolean; + customPagination: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; showTotalCount: boolean; showPagingButtons: ShowPagingButtonsEnum; 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; + selectedCountTemplateSingular: string; + selectedCountTemplatePlural: string; + selectAllText: string; + selectAllTemplate: string; + allSelectedText: string; stateStorageType: StateStorageTypeEnum; stateStorageAttr: string; onConfigurationChange: {} | null; @@ -109,6 +128,4 @@ export interface GalleryPreviewProps { emptyMessageTitle: string; ariaLabelListBox: string; ariaLabelItem: string; - selectedCountTemplateSingular: string; - selectedCountTemplatePlural: string; } 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/main.ts b/packages/shared/widget-plugin-grid/src/main.ts index 07ddcf6a6c..7014596ebc 100644 --- a/packages/shared/widget-plugin-grid/src/main.ts +++ b/packages/shared/widget-plugin-grid/src/main.ts @@ -4,14 +4,13 @@ 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 69% 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..c6a48929e8 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,18 +60,10 @@ 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 hasMoreItems(): boolean { return this.query.hasMoreItems; } 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..a2e62ff4aa --- /dev/null +++ b/packages/shared/widget-plugin-grid/src/pagination/main.ts @@ -0,0 +1,7 @@ +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..79c43feb20 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); } /** From 719c753bb247d32122f67c9b9beeab17f704623a Mon Sep 17 00:00:00 2001 From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com> Date: Fri, 30 Jan 2026 15:04:20 +0100 Subject: [PATCH 5/6] fixes --- .../gallery-web/src/components/GalleryItems.tsx | 4 ++-- .../gallery-web/src/components/ListItem.tsx | 10 +++++++++- .../features/item-interaction/get-item-aria-props.ts | 9 ++++----- .../src/model/hooks/useGalleryContainer.ts | 6 ++++++ .../gallery-web/src/model/models/layout.model.ts | 7 +++++-- .../gallery-web/src/model/services/Layout.service.ts | 10 ++++++---- .../src/core/models/datasource.model.ts | 4 ++-- .../src/keyboard-navigation/createFocusController.ts | 12 +++++++++--- .../widget-plugin-grid/src/selection/helpers.ts | 8 +++++++- 9 files changed, 50 insertions(+), 20 deletions(-) diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx index 0e6aa5ed7c..b430f9477c 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx @@ -10,8 +10,8 @@ export const GalleryItems = observer(function GalleryItems() { const texts = useTextsService(); const focusController = useKeyNavFocus(); - if (items.length === 0) { - return
Empty
; + if (items.length < 1) { + return null; } return ( diff --git a/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx b/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx index ddedc94ad2..20ebac20f7 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx @@ -1,6 +1,7 @@ import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps"; import classNames from "classnames"; import { ObjectItem } from "mendix"; +import { computed, trace } from "mobx"; import { observer } from "mobx-react-lite"; import { ReactElement, RefObject, useMemo } from "react"; import { getAriaProps } from "../features/item-interaction/get-item-aria-props"; @@ -20,8 +21,15 @@ export const ListItem = observer(function ListItem(props: ListItemProps): ReactE const itemVM = useGalleryItemVM(); const getPosition = useLayoutService().getPositionFn; + const isSelected = computed( + () => { + trace(); + return selectActions.isSelected(item); + }, + { name: "[gallery]:@computed:ListItem:isSelected" } + ).get(); const clickable = itemVM.hasOnClick(item) || selectActions.selectionType !== "None"; - const ariaProps = getAriaProps(item, selectActions, itemVM.label(item)); + const ariaProps = getAriaProps(selectActions.selectionType, isSelected, itemVM.label(item)); const { columnIndex, rowIndex } = getPosition(itemIndex); const keyNavProps = useFocusTargetProps({ columnIndex: columnIndex ?? -1, rowIndex }); const handlers = useMemo(() => eventsVM.getProps(item), [eventsVM, item]); 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 52192a23a3..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 { SelectActionsService } from "@mendix/widget-plugin-grid/interfaces/SelectActionsService"; -import { ObjectItem } from "mendix"; +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: SelectActionsService, 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/model/hooks/useGalleryContainer.ts b/packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts index cdf4b3cec0..e246f40185 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts @@ -1,12 +1,18 @@ 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/layout.model.ts b/packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts index a826bb470f..1b38719922 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts @@ -1,6 +1,6 @@ import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout"; import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main"; -import { computed } from "mobx"; +import { computed, trace } from "mobx"; /** @injectable */ export function layoutAtom( @@ -10,7 +10,10 @@ export function layoutAtom( }, pageSize: ComputedAtom ): ComputedAtom { - return computed(() => new VirtualGridLayout(layoutStore.numberOfRows, layoutStore.numberOfColumns, pageSize.get())); + return computed(() => { + trace() + return new VirtualGridLayout(layoutStore.numberOfRows, layoutStore.numberOfColumns, pageSize.get()) + }, { name: '[gallery]:@computed:layoutAtom' }); } /** @injectable */ diff --git a/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts b/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts index 18ee35ff2d..22ad524b7b 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts @@ -1,6 +1,6 @@ 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 { action, computed, makeAutoObservable, trace } from "mobx"; import { GalleryContainerProps } from "../../../typings/GalleryProps"; type Breakpoint = "desktop" | "tablet" | "phone"; @@ -18,13 +18,15 @@ export class LayoutService implements SetupComponent { this.width = window.innerWidth; makeAutoObservable(this, { - breakpoint: computed, + setWidth: action, numberOfColumns: computed, numberOfRows: computed, - getPositionFn: computed, - setWidth: action, setup: false }); + + trace(this, "width"); + trace(this, "numberOfColumns"); + trace(this, "numberOfRows"); } setWidth(width: number): void { 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/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts b/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts index be46545700..0b055b7426 100644 --- a/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts +++ b/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts @@ -1,5 +1,5 @@ import { ComputedAtom, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main"; -import { reaction } from "mobx"; +import { reaction, trace } from "mobx"; import { FocusTargetController } from "./FocusTargetController"; import { PositionController } from "./PositionController"; import { VirtualGridLayout } from "./VirtualGridLayout"; @@ -13,8 +13,14 @@ export function createFocusController( function setup(): void | (() => void) { return reaction( - () => layout.get(), - newLayout => controller.updateGridLayout(newLayout) + () => { + trace(); + return layout.get() + }, + newLayout => { + controller.updateGridLayout(newLayout) + }, + { name: "[plugin]:@reaction:createFocusController:layoutUpdate" } ); } diff --git a/packages/shared/widget-plugin-grid/src/selection/helpers.ts b/packages/shared/widget-plugin-grid/src/selection/helpers.ts index cb979c06da..cffbb2b004 100644 --- a/packages/shared/widget-plugin-grid/src/selection/helpers.ts +++ b/packages/shared/widget-plugin-grid/src/selection/helpers.ts @@ -8,7 +8,13 @@ import { Direction, MoveEvent1D, MoveEvent2D, MultiSelectionStatus, ScrollKeyCod 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; From 1492bce56f028b90f521715416fb2d4cb8457a78 Mon Sep 17 00:00:00 2001 From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com> Date: Mon, 2 Feb 2026 18:07:34 +0100 Subject: [PATCH 6/6] chore: small fixes --- package.json | 2 +- .../gallery-web/src/Gallery.xml | 218 ++++++++++-------- .../model/configs/GalleryPagination.config.ts | 6 +- .../src/model/containers/Root.container.ts | 4 +- .../gallery-web/typings/GalleryProps.d.ts | 38 +-- .../src/pagination/pagination.model.ts | 3 + patches/rc-trigger.patch | 16 -- pnpm-lock.yaml | 43 ++-- 8 files changed, 189 insertions(+), 141 deletions(-) delete mode 100644 patches/rc-trigger.patch 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/pluggableWidgets/gallery-web/src/Gallery.xml b/packages/pluggableWidgets/gallery-web/src/Gallery.xml index 96501e5432..2023361b60 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,14 +69,34 @@ + + Selection method + + + Checkbox + Row click + + + + Auto select first row + Automatically select the first row + - Item click toggles selection + Toggle on click Defines item selection behavior. Yes No + + "Select all" checkbox + Displays a checkbox in the grid header that allows selecting or deselecting all rows on the current page. + + + "Select all" across pages + Shows a banner with the option to select all rows across all pages when all rows on the current page are selected. + Keep selection If enabled, selected items will stay selected unless cleared by the user or a Nanoflow. @@ -50,37 +110,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 @@ -103,10 +147,6 @@ Custom pagination - - Show total count - - Show paging buttons @@ -115,6 +155,10 @@ Auto + + Show total count + + Position of pagination @@ -154,7 +198,7 @@ - + Empty message @@ -173,24 +217,59 @@ - - - On click trigger - + + + + + Store configuration in + When Browser local storage is selected, the configuration is scoped to a browser profile. This configuration is not tied to a Mendix user. - Single click - Double click + Attribute + Browser local storage - - On click action + + Attribute + Attribute containing the personalized configuration of the capabilities. This configuration is automatically stored and loaded. The attribute requires Unlimited String. + + + + + + On change - - On selection change + + Store filters + + + + Store sort + + + + + + Filter section + Assistive technology will read this upon reaching a filtering or sorting section. + + + Empty message + Assistive technology will read this upon reaching an empty message section. + + + Content description + Assistive technology will read this upon reaching gallery. + + + Item description + Assistive technology will read this upon reaching each gallery item. + + + Row count singular @@ -208,7 +287,7 @@ %d rijen geselecteerd - + Select all text @@ -232,56 +311,13 @@ Alle %d rijen geselecteerd. - - - - - - Store configuration in - When Browser local storage is selected, the configuration is scoped to a browser profile. This configuration is not tied to a Mendix user. - - Attribute - Browser local storage - - - - Attribute - Attribute containing the personalized configuration of the capabilities. This configuration is automatically stored and loaded. The attribute requires Unlimited String. - - - - - - On change - - - - Store filters - - - - Store sort - - - - - - - - Filter section - Assistive technology will read this upon reaching a filtering or sorting section. - - - Empty message - Assistive technology will read this upon reaching an empty message section. - - - Content description - Assistive technology will read this upon reaching gallery. - - - Item description - Assistive technology will read this upon reaching each gallery item. + + Clear selection label + Customize the label of the 'Clear section' button + + Clear selection + Selectie wissen + diff --git a/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts b/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts index 3915b10b57..665fd27699 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/configs/GalleryPagination.config.ts @@ -36,7 +36,7 @@ export function galleryPaginationConfig(props: GalleryGateProps): GalleryPaginat } export function paginationKind(props: GalleryGateProps): PaginationKind { - if (1 * Math.random()) { + if (props.useCustomPagination) { return "custom"; } @@ -48,11 +48,11 @@ function isLimitBased(props: GalleryGateProps): boolean { } export function dynamicPageSizeEnabled(props: GalleryGateProps): boolean { - return Math.random !== undefined && !isLimitBased(props); + return props.dynamicPageSize !== undefined && !isLimitBased(props); } export function dynamicPageEnabled(props: GalleryGateProps): boolean { - return Math.random !== undefined && !isLimitBased(props); + return props.dynamicPage !== undefined && !isLimitBased(props); } function requestTotalCount(props: GalleryGateProps): boolean { diff --git a/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts index 445451e9d8..792da15c84 100644 --- a/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts +++ b/packages/pluggableWidgets/gallery-web/src/model/containers/Root.container.ts @@ -35,7 +35,6 @@ const _01_datasourceBindings: BindingGroup = { 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(); @@ -61,6 +60,9 @@ const _02_selectionBindings: BindingGroup = { }; const _03_paginationBindings: BindingGroup = { + inject() { + injected(PageSizeStore, CORE.initPageSize.optional); + }, define(container: Container) { container.bind(CORE.pageSizeStore).toInstance(PageSizeStore).inSingletonScope(); } diff --git a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts index 44b46b92ee..55504f8130 100644 --- a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts +++ b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts @@ -7,10 +7,6 @@ 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 ItemSelectionModeEnum = "toggle" | "clear"; - -export type SelectionCountPositionEnum = "top" | "bottom" | "off"; - export type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore"; export type ShowPagingButtonsEnum = "always" | "auto"; @@ -21,6 +17,12 @@ export type ShowEmptyPlaceholderEnum = "none" | "custom"; export type OnClickTriggerEnum = "single" | "double"; +export type ItemSelectionMethodEnum = "checkbox" | "rowClick"; + +export type ItemSelectionModeEnum = "toggle" | "clear"; + +export type SelectionCountPositionEnum = "top" | "bottom" | "off"; + export type StateStorageTypeEnum = "attribute" | "localStorage"; export interface GalleryContainerProps { @@ -31,11 +33,6 @@ export interface GalleryContainerProps { filtersPlaceholder?: ReactNode; datasource: ListValue; refreshInterval: number; - itemSelection?: SelectionSingleValue | SelectionMultiValue; - itemSelectionMode: ItemSelectionModeEnum; - keepSelection: boolean; - selectionCountPosition: SelectionCountPositionEnum; - clearSelectionButtonLabel?: DynamicValue; content?: ListWidgetValue; refreshIndicator: boolean; desktopItems: number; @@ -63,6 +60,14 @@ export interface GalleryContainerProps { selectAllText: DynamicValue; selectAllTemplate: DynamicValue; allSelectedText: DynamicValue; + itemSelection?: SelectionSingleValue | SelectionMultiValue; + itemSelectionMethod: ItemSelectionMethodEnum; + autoSelect: boolean; + itemSelectionMode: ItemSelectionModeEnum; + showSelectAllToggle: boolean; + enableSelectAll: boolean; + keepSelection: boolean; + selectionCountPosition: SelectionCountPositionEnum; stateStorageType: StateStorageTypeEnum; stateStorageAttr?: EditableValue; storeFilters: boolean; @@ -71,6 +76,7 @@ export interface GalleryContainerProps { emptyMessageTitle?: DynamicValue; ariaLabelListBox?: DynamicValue; ariaLabelItem?: ListExpressionValue; + clearSelectionButtonLabel?: DynamicValue; } export interface GalleryPreviewProps { @@ -87,11 +93,6 @@ export interface GalleryPreviewProps { filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; datasource: {} | { caption: string } | { type: string } | null; refreshInterval: number | null; - itemSelection: "None" | "Single" | "Multi"; - itemSelectionMode: ItemSelectionModeEnum; - keepSelection: boolean; - selectionCountPosition: SelectionCountPositionEnum; - clearSelectionButtonLabel: string; content: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; refreshIndicator: boolean; desktopItems: number | null; @@ -119,6 +120,14 @@ export interface GalleryPreviewProps { selectAllText: string; selectAllTemplate: string; allSelectedText: string; + itemSelection: "None" | "Single" | "Multi"; + itemSelectionMethod: ItemSelectionMethodEnum; + autoSelect: boolean; + itemSelectionMode: ItemSelectionModeEnum; + showSelectAllToggle: boolean; + enableSelectAll: boolean; + keepSelection: boolean; + selectionCountPosition: SelectionCountPositionEnum; stateStorageType: StateStorageTypeEnum; stateStorageAttr: string; onConfigurationChange: {} | null; @@ -128,4 +137,5 @@ export interface GalleryPreviewProps { emptyMessageTitle: string; ariaLabelListBox: string; ariaLabelItem: string; + clearSelectionButtonLabel: string; } 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 79c43feb20..babdcb79a3 100644 --- a/packages/shared/widget-plugin-grid/src/pagination/pagination.model.ts +++ b/packages/shared/widget-plugin-grid/src/pagination/pagination.model.ts @@ -54,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/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 176ae8fca4..d60c2cf5de 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 @@ -2689,7 +2687,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 @@ -4269,36 +4267,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==} @@ -4357,9 +4361,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: @@ -4687,24 +4688,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==} @@ -10640,6 +10645,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==} @@ -12452,7 +12458,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) @@ -12495,7 +12501,7 @@ snapshots: identity-obj-proxy: 3.0.0 jasmine: 3.99.0 jasmine-core: 3.99.1 - jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest: 29.7.0(@types/node@22.14.1) jest-environment-jsdom: 29.7.0 jest-jasmine2: 29.7.0 jest-junit: 13.2.0 @@ -12693,11 +12699,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 @@ -17014,6 +17015,18 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 + jest@29.7.0(@types/node@22.14.1): + dependencies: + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + '@jest/types': 29.6.3 + import-local: 3.2.0 + jest-cli: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - supports-color + - ts-node + jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)): dependencies: '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) @@ -19815,7 +19828,7 @@ snapshots: bs-logger: 0.2.6 fast-json-stable-stringify: 2.1.0 handlebars: 4.7.8 - jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)) + jest: 29.7.0(@types/node@22.14.1) json5: 2.2.3 lodash.memoize: 4.1.2 make-error: 1.3.6