@mohamed-karawia/library 0.1.21 → 0.1.22

package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx

@@ -31,14 +31,15 @@ const ViewAlbum = ({
     cardTitleColor,
     cardTitleFontSize,
     descColor,
+    community,
     ...props }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<ViewAlbum album={album}/>)
+    const [centerContext, setCenterContext] = useState(<ViewAlbum preview={true} album={album} />)
 
     const formChanged = (values) => {
         console.log('context changed')
-        setCenterContext(<ViewAlbum album={album} {...values} />)
+        setCenterContext(<ViewAlbum preview={true} album={album} {...values} />)
     }
 
     let tabs = [
@@ -50,19 +51,6 @@ const ViewAlbum = ({
         }
     ]
 
-    const sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling', component: (<Tabs
-                        title="Video Album Config"
-                        tabs={tabs}
-                    />)
-                }
-            ]
-        }
-    ]
 
     const cardStyles = {
         darkOnHover: true,
@@ -85,15 +73,17 @@ const ViewAlbum = ({
     }
 
     const onHeaderIconClicked = (action) => {
-        switch (action) {
-            case 'add':
-                setShowModal(true)
-                break;
-            case 'config':
-                setShowConfigModal(true)
-                break;
-            default:
-                break;
+        if (!props.preview) {
+            switch (action) {
+                case 'add':
+                    setShowModal(true)
+                    break;
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
         }
     }
 
@@ -111,6 +101,11 @@ const ViewAlbum = ({
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -137,23 +132,24 @@ const ViewAlbum = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}>
                 <Tabs
-                        title="Video Album Config"
-                        tabs={tabs}
-                        id='styling'
-                    >
-                        <VideoAlbumPreview 
+                    title="Video Album Config"
+                    tabs={tabs}
+                    id='styling'
+                >
+                    <VideoAlbumPreview
                         componentProps={{ album, preview: true }}
                         formChanged={formChanged}
                         id="preview" />
-                        <Community
-                            center={centerContext}
-                            id="community" />
-                    </Tabs>
+                    <Community
+                        center={centerContext}
+                        community={community}
+                        id="community" />
+                </Tabs>
             </Modal>
         </Container>
     )

package/src/stories/store/communities.js

@@ -64,37 +64,35 @@ export const community = {
                 }
             ],
             styles: {
-                header: {
+                headerStyles: {
 
                 },
-                body: {
-                    sectionHeaderStyles: {
-                        padding: 2,
-                        headerBackground: "#00ADC4",
-                        titleColor: "white"
-                    },
-                    customCardStyles: {
-                        cardPadding: 6,
-                        cardTitleFontSize: 15,
-                        cardBackgroundColor: "white",
-                        cardTitleColor: "#00ADC4",
-                        cardBorderSize: 1,
-                        cardBorderColor: "#00ADC4",
-                        onHoverBackgroundColor: "#d3d3d3",
-                        controlsStyles: {
-                            showOnHover: true,
-                            iconColor: "#00ADC4"
-                        }
-                    },
-                    borderRadius: 10,
-                    primaryColor: "#00ADC4",
-                    iconsColor: "#00ADC4",
-                    backgroundColor: "white",
-                    discColor: "gray",
-                    dateColor: "gray",
-                    iconColor: "#00ADC4",
-                    cardTitleFontSize: 15
+                sectionHeaderStyles: {
+                    padding: 2,
+                    headerBackground: "#00ADC4",
+                    titleColor: "white"
                 },
+                customCardStyles: {
+                    cardPadding: 6,
+                    cardTitleFontSize: 15,
+                    cardBackgroundColor: "white",
+                    cardTitleColor: "#00ADC4",
+                    cardBorderSize: 1,
+                    cardBorderColor: "#00ADC4",
+                    onHoverBackgroundColor: "#d3d3d3",
+                    controlsStyles: {
+                        showOnHover: true,
+                        iconColor: "#00ADC4"
+                    }
+                },
+                borderRadius: 10,
+                primaryColor: "#00ADC4",
+                iconsColor: "#00ADC4",
+                backgroundColor: "white",
+                discColor: "gray",
+                dateColor: "gray",
+                iconColor: "#00ADC4",
+                cardTitleFontSize: 15
 
             }
         }
@@ -487,7 +485,7 @@ export const community = {
                     { img: 'https://images.unsplash.com/photo-1574031493536-05e45f214ab6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8em9vfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60', title: 'Album 4', count: '24' },
                     { img: 'https://images.unsplash.com/photo-1458832463097-ab73e7b4fc4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fHpvb3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60', title: 'Album 5', count: '24' },
                     { img: 'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHpvb3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60', title: 'Album 6', count: '24' },
-                    
+
                 ],
                 title: 'My Albums'
             },