|
1 | | -import React from "react"; |
2 | | - |
3 | | -import './sectionGallery.css'; |
4 | | -import { SectionGalleryToolbar } from "./sectionGalleryToolbar"; |
5 | | -import { SectionGalleryLayout } from "./sectionGalleryLayout"; |
6 | | -import { SectionDataListLayout } from "./sectionDataListLayout"; |
7 | | -import { SectionGalleryWrapper } from "./sectionGalleryWrapper"; |
8 | | - |
9 | | -/** |
10 | | - * Helper component returns gallery of items with search toolbar and switchable gallery/data list views. |
11 | | - * @param {Object} illustrations - Object of preview images mapped to their snake_case item display name |
12 | | - * @param {string} section - Name of the navigation section to create the gallery within |
13 | | - * @param {Object} galleryItemsData - Object containing the image location & summary text mapped to the gallery item's hyphenated-name |
14 | | - * @param {string} [placeholderText=Search by name] - Optional text to be displayed as placeholder for SearchInput |
15 | | - * @param {string} [countText= items] - Optional text to be displayed after the number of search results |
16 | | - * @param {string} [initialLayout=grid] - Optional text to indicate whether to default to grid or list layout |
17 | | - * @param {Boolean} [hasGridText=false] - Optional boolean to toggle text on grid layout cards |
18 | | - * @param {Boolean} [hasGridImages=false] - Optional boolean to toggle images on grid layout cards |
19 | | - * @param {Boolean} [hasListText=false] - Optional boolean to toggle text on list layout rows |
20 | | - * @param {Boolean} [hasListImages=false] - Optional boolean to toggle images on list layout rows |
21 | | - * @param {Boolean} [isFullWidth=true] - Optional boolean to disable component from exceeding default max-width for page |
22 | | -*/ |
23 | | - |
24 | | -export const SectionGallery = ({ |
25 | | - illustrations, |
26 | | - section, |
27 | | - subsection = null, |
28 | | - includeSubsections = false, |
29 | | - parseSubsections = false, |
30 | | - galleryItemsData, |
31 | | - placeholderText, |
32 | | - countText, |
33 | | - initialLayout = "grid", |
34 | | - hasGridText = false, |
35 | | - hasGridImages = true, |
36 | | - hasListText = true, |
37 | | - hasListImages = true, |
38 | | - isFullWidth = true, |
39 | | - onlyShowInGalleryData = false |
40 | | -}) => ( |
41 | | - <SectionGalleryWrapper |
42 | | - illustrations={illustrations} |
43 | | - section={section} |
44 | | - subsection={subsection} |
45 | | - includeSubsections={includeSubsections} |
46 | | - parseSubsections={parseSubsections} |
47 | | - galleryItemsData={galleryItemsData} |
48 | | - initialLayout={initialLayout} |
49 | | - isFullWidth={isFullWidth} |
50 | | - onlyShowInGalleryData={onlyShowInGalleryData} |
51 | | - > |
52 | | - {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => ( |
53 | | - <> |
54 | | - <SectionGalleryToolbar |
55 | | - galleryItems={sectionGalleryItems} |
56 | | - searchTerm={searchTerm} |
57 | | - setSearchTerm={setSearchTerm} |
58 | | - layoutView={layoutView} |
59 | | - setLayoutView={setLayoutView} |
60 | | - placeholderText={placeholderText} |
61 | | - countText={countText} |
62 | | - /> |
63 | | - <SectionGalleryLayout |
64 | | - galleryItems={sectionGalleryItems} |
65 | | - layoutView={layoutView} |
66 | | - hasGridText={hasGridText} |
67 | | - hasGridImages={hasGridImages} |
68 | | - /> |
69 | | - <SectionDataListLayout |
70 | | - galleryItems={sectionGalleryItems} |
71 | | - layoutView={layoutView} |
72 | | - hasListText={hasListText} |
73 | | - hasListImages={hasListImages} |
74 | | - /> |
75 | | - </> |
76 | | - )} |
77 | | - </SectionGalleryWrapper> |
78 | | -); |
| 1 | +export * from './sectionGallery.jsx'; |
0 commit comments