diff --git a/.changeset/friendly-brooms-warn.md b/.changeset/friendly-brooms-warn.md new file mode 100644 index 00000000..4bb4c419 --- /dev/null +++ b/.changeset/friendly-brooms-warn.md @@ -0,0 +1,6 @@ +--- +"@genseki/react": patch +--- + +Support custom banner + diff --git a/examples/erp/genseki/collections/posts.tsx b/examples/erp/genseki/collections/posts.tsx index b8f04818..6524cc9c 100644 --- a/examples/erp/genseki/collections/posts.tsx +++ b/examples/erp/genseki/collections/posts.tsx @@ -226,6 +226,10 @@ export const postsCollection = createPlugin('posts', (app) => { create: true, delete: true, }, + banner: { + title: 'Posts Banner', + description: 'A collection of posts', + }, layout: Layout, page: CustomListPage, }) diff --git a/examples/erp/genseki/collections/tags.ts b/examples/erp/genseki/collections/tags.ts index de979b57..a0395ed2 100644 --- a/examples/erp/genseki/collections/tags.ts +++ b/examples/erp/genseki/collections/tags.ts @@ -32,6 +32,10 @@ export const tagsCollection = createPlugin('tags', (app) => { create: true, delete: true, }, + banner: { + title: 'Tags Banner', + description: 'A collection of tags', + }, }) ) .addPageAndApiRouter(collection.create(fields, {})) diff --git a/packages/react/src/core/collection/index.tsx b/packages/react/src/core/collection/index.tsx index 6ae074d5..dca94910 100644 --- a/packages/react/src/core/collection/index.tsx +++ b/packages/react/src/core/collection/index.tsx @@ -346,6 +346,10 @@ export type CollectionListConfig< * @param actions will decide whether or not to show actios in `list` view screen, This is not related to available features of collection, but rather only visible UI part of the `list` page */ toolbar?: CollectionToolbarActions + banner?: { + title?: string + description?: string + } } export type CollectionUpdateApiArgs< @@ -599,6 +603,7 @@ export class CollectionBuilder< search={config.configuration?.search} sortBy={config.configuration?.sortBy} toolbar={config.toolbar} + banner={config.banner} > {page} diff --git a/packages/react/src/react/views/collections/list/banner.tsx b/packages/react/src/react/views/collections/list/banner.tsx index f1376733..28147596 100644 --- a/packages/react/src/react/views/collections/list/banner.tsx +++ b/packages/react/src/react/views/collections/list/banner.tsx @@ -7,6 +7,8 @@ import { formatSlug } from '../../../utils/format-slug' interface BannerProps { slug: string + title?: string + description?: string } export function Banner(props: BannerProps) { @@ -29,10 +31,10 @@ export function Banner(props: BannerProps) {
- {formatSlug(props.slug)} + {props.title ?? formatSlug(props.slug)} - A collection + {props.description ?? 'A collection'}
diff --git a/packages/react/src/react/views/collections/list/context.tsx b/packages/react/src/react/views/collections/list/context.tsx index 891d714a..98b60407 100644 --- a/packages/react/src/react/views/collections/list/context.tsx +++ b/packages/react/src/react/views/collections/list/context.tsx @@ -52,6 +52,10 @@ export interface CollectionListContextValue { search?: string[] sortBy?: ([string, 'asc' | 'desc'] | [string])[] toolbar?: CollectionToolbarActions + banner?: { + title?: string + description?: string + } // Helper functions deleteRows: (rows?: string[]) => void @@ -67,6 +71,10 @@ export interface CollectionListProviderProps { search?: string[] sortBy?: ([string, 'asc' | 'desc'] | [string])[] toolbar?: CollectionToolbarActions + banner?: { + title?: string + description?: string + } } /** @@ -114,13 +122,19 @@ function _CollectionListProvider(props: CollectionListProvid const components: CollectionListComponents = useMemo( () => ({ - ListBanner: () => , + ListBanner: () => ( + + ), ListTable: (props) => , ListTableToolbar: (props) => , ListTableContainer: (props) => , ListTablePagination: (props) => , }), - [context.slug] + [context.slug, rest.banner?.title, rest.banner?.description] ) return ( @@ -137,6 +151,7 @@ function _CollectionListProvider(props: CollectionListProvid components, invalidateList, deleteRows, + banner: rest.banner, }} > {children} diff --git a/packages/react/src/react/views/collections/list/default.tsx b/packages/react/src/react/views/collections/list/default.tsx index aabc1645..d4ad7272 100644 --- a/packages/react/src/react/views/collections/list/default.tsx +++ b/packages/react/src/react/views/collections/list/default.tsx @@ -12,7 +12,11 @@ export function DefaultCollectionListPage() { return ( <> - + columns={context.columns} onRowClick={undefined} />