@mohamed-karawia/library 0.1.11 → 0.1.15

package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx

@@ -18,7 +18,9 @@ const CardStyle9 = ({ username, answered, img, status, ...props }) => {
     }
 
     return (
-        <Card {...props}>
+        <Card 
+            onClick={() => props.cardClicked()}
+        {...props}>
             <ImgWrapper {...props}>
                 <Img src={img} />
             </ImgWrapper>

package/src/stories/Reusable Components/Gallery/Gallery.jsx

@@ -14,8 +14,8 @@ const Gallery = ({ data, cardStyle, customCardStyles, type, cardControls = null,
         props.iconClicked(action)
     }
 
-    const clicked = (index) => {
-        props.cardClicked(index)
+    const clicked = (index, cardProps) => {
+        props.cardClicked(index, cardProps)
     }
 
     const cardIconClicked = (action, index) => {

package/src/stories/Reusable Components/ReusableList/ReusableList.jsx

@@ -14,8 +14,8 @@ const ReusableList = ({ data, cardStyle, customCardStyles, type, cardControls =
         props.iconClicked(action)
     }
 
-    const clicked = (index) => {
-        props.cardClicked(index)
+    const clicked = (index, cardProps) => {
+        props.cardClicked(index, cardProps)
     }
 
     const cardIconClicked = (action, index) => {

package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.jsx

@@ -13,7 +13,12 @@ const WidgetContainer = ({
     ...props
 }) => {
 
-    const child = getWidgetType(widgetType, widgetProps)
+    const cardClicked = (path) => {
+       props.cardClicked(path)
+    }
+
+    const child = getWidgetType(widgetType, widgetProps, cardClicked)
+
 
     const iconCliked = (action) => {
         console.log(action)
@@ -39,6 +44,7 @@ const WidgetContainer = ({
 const Container = styled.div`
     display: flex;
     flex-direction: column;
+    width: 100%;
 `
 
 const Body = styled.div`

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx

@@ -7,6 +7,7 @@ import Comments from '../Comments/Comments';
 import RichTextInput from '../../Common Inputs/RichTextInput/RichTextInput';
 
 const VideoSpace = ({
+    videoSrc,
     title,
     discription,
     date,
@@ -29,7 +30,8 @@ const VideoSpace = ({
     return (
         <Container backgroundColor={backgroundColor}>
             <VideoPlayer
-                iconsColor={iconsColor} />
+                iconsColor={iconsColor}
+                src={videoSrc} />
             <VideoDetails detailsPadding={detailsPadding}>
                 <Top>
                     <Title titleFontSize={titleFontSize} titleColor={titleColor}>{title}</Title>

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

@@ -79,21 +79,12 @@ const ViewAlbum = ({
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 columnsNumber={3}
                 galleryColumnGap={10}
                 galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
-                cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
                 {...props}

package/src/stories/helpers/util.js

@@ -44,21 +44,21 @@ export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls
 	const cardTypes = {
 		'card-style-1': (<CardStyle1 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} />),
 		'card-style-2': (<CardStyle2 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
-		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
+		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={(path) => clicked(path)}/>),
 		'card-style-4': (<CardStyle4 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
-		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
+		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-7': (<CardStyle7 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-8': (<CardStyle8 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
-		'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
+		'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-10': (<CardStyle10 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
-		'card-style-11': (<CardStyle11 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
+		'card-style-11': (<CardStyle11 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 	}
 	return cardTypes[cardType]
 };
 
-export const getWidgetType = (widgetType, props) => {
+export const getWidgetType = (widgetType, props, cardClicked) => {
 	const widgetTypes = {
-		'list': (<ReusableList {...props}/>),
+		'list': (<ReusableList cardClicked={(path) => cardClicked(path)} {...props}/>),
 		'music player': (<MusicPlayerWidget {...props} />),
 		'logo': (<LogoWidget {...props}/>),
 		'video player': (<VideoPlayer {...props}/>)