@mohamed-karawia/library 0.1.15 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stories/Chat/Chat.js +5 -26
- package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js +1 -1
- package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js +2 -12
- package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js +1 -16
- package/dist/stories/Library/Folders/Folders.js +1 -2
- package/dist/stories/Library/ViewNote/ViewNote.js +7 -10
- package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +1 -8
- package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +3 -6
- package/dist/stories/Navbar/Navbar.js +14 -44
- package/dist/stories/Pages/Chat/Chat.js +13 -1
- package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js +11 -1
- package/dist/stories/Pages/Enrollment/Forms/Forms.js +21 -1
- package/dist/stories/Pages/Library/Folders/Library.js +5 -0
- package/dist/stories/Pages/Music/MusicAlbum/Music.js +5 -0
- package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +43 -1
- package/dist/stories/Pages/Photos/Album/Album.js +7 -1
- package/dist/stories/Pages/Photos/Albums/Albums.js +34 -1
- package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +0 -8
- package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +3 -36
- package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +7 -3
- package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js +3 -2
- package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js +26 -15
- package/dist/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
- package/dist/stories/Reusable Components/ReusableList/ReusableList.js +6 -4
- package/dist/stories/Sections/Sections.js +61 -0
- package/dist/stories/helpers/util.js +11 -5
- package/package.json +1 -1
- package/src/stories/Chat/Chat.jsx +3 -25
- package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx +1 -0
- package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx +1 -10
- package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx +0 -15
- package/src/stories/Library/Folders/Folders.jsx +1 -3
- package/src/stories/Library/ViewNote/ViewNote.jsx +1 -12
- package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +0 -7
- package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +1 -4
- package/src/stories/Navbar/Navbar.jsx +50 -48
- package/src/stories/Pages/Chat/Chat.jsx +17 -4
- package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx +11 -1
- package/src/stories/Pages/Enrollment/Forms/Forms.jsx +20 -0
- package/src/stories/Pages/Library/Folders/Library.jsx +5 -0
- package/src/stories/Pages/Music/MusicAlbum/Music.jsx +9 -3
- package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +38 -24
- package/src/stories/Pages/Photos/Album/Album.jsx +7 -1
- package/src/stories/Pages/Photos/Albums/Albums.jsx +22 -20
- package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +0 -8
- package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +1 -35
- package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +8 -4
- package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx +5 -2
- package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx +12 -8
- package/src/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
- package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +15 -4
- package/src/stories/Sections/Sections.jsx +53 -0
- package/src/stories/helpers/util.js +9 -5
@@ -7,7 +7,16 @@ import { getCardStyle } from '../../helpers/util';
|
|
7
7
|
import CardStyle3 from '../Cards/Card-style-3/CardStyle3';
|
8
8
|
import ReusableHeader from '../ReusableHeader/ReusableHeader';
|
9
9
|
|
10
|
-
const ReusableList = ({
|
10
|
+
const ReusableList = ({
|
11
|
+
data,
|
12
|
+
cardStyle,
|
13
|
+
customCardStyles,
|
14
|
+
type,
|
15
|
+
cardControls = null,
|
16
|
+
headerStyles,
|
17
|
+
sectionHeaderStyles,
|
18
|
+
...props
|
19
|
+
}) => {
|
11
20
|
let child;
|
12
21
|
|
13
22
|
const iconCliked = (action) => {
|
@@ -33,7 +42,7 @@ const ReusableList = ({ data, cardStyle, customCardStyles, type, cardControls =
|
|
33
42
|
} else {
|
34
43
|
child = data.map(section => (
|
35
44
|
<Section priority={section.priority}>
|
36
|
-
<
|
45
|
+
<ReusableHeader title={section.title} {...sectionHeaderStyles} />
|
37
46
|
<SectionBody>
|
38
47
|
{mapOverCardsData(section.data)}
|
39
48
|
</SectionBody>
|
@@ -48,7 +57,7 @@ const ReusableList = ({ data, cardStyle, customCardStyles, type, cardControls =
|
|
48
57
|
title={props.listTitle}
|
49
58
|
controls={props.listControls}
|
50
59
|
iconClicked={iconCliked}
|
51
|
-
{...
|
60
|
+
{...headerStyles}
|
52
61
|
/>}
|
53
62
|
<ListBody {...props}>
|
54
63
|
{child}
|
@@ -97,7 +106,9 @@ ReusableList.propTypes = {
|
|
97
106
|
customCardStyles: PropTypes.object,
|
98
107
|
listRowGap: PropTypes.number,
|
99
108
|
listTitle: PropTypes.string,
|
100
|
-
hideTitle: PropTypes.bool
|
109
|
+
hideTitle: PropTypes.bool,
|
110
|
+
headerStyles: PropTypes.object,
|
111
|
+
sectionHeaderStyles: PropTypes.object
|
101
112
|
};
|
102
113
|
|
103
114
|
export default ReusableList
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import React, {useState} from 'react';
|
2
|
+
import PropTypes from 'prop-types';
|
3
|
+
import styled from 'styled-components';
|
4
|
+
|
5
|
+
import ReusableList from '../Reusable Components/ReusableList/ReusableList';
|
6
|
+
|
7
|
+
|
8
|
+
|
9
|
+
const Sections = ({sections, ...props}) => {
|
10
|
+
const [center, setCenter] = useState(sections[0].data[0].component)
|
11
|
+
|
12
|
+
const cardClicked = (index, cardProps) => {
|
13
|
+
setCenter(cardProps.component)
|
14
|
+
}
|
15
|
+
|
16
|
+
return (
|
17
|
+
<Container {...props}>
|
18
|
+
<Left>
|
19
|
+
<ReusableList
|
20
|
+
type='sectioned'
|
21
|
+
data={sections}
|
22
|
+
cardStyle='card-style-3'
|
23
|
+
cardClicked={cardClicked}
|
24
|
+
{...props}
|
25
|
+
/>
|
26
|
+
</Left>
|
27
|
+
<Center>{center}</Center>
|
28
|
+
</Container>
|
29
|
+
)
|
30
|
+
}
|
31
|
+
|
32
|
+
const Container = styled.div`
|
33
|
+
background-color: ${props => props.backgroundColor};
|
34
|
+
background-color: #414141;
|
35
|
+
display: flex;
|
36
|
+
`
|
37
|
+
|
38
|
+
const Left = styled.div`
|
39
|
+
flex: 1;
|
40
|
+
`
|
41
|
+
|
42
|
+
const Center = styled.div`
|
43
|
+
flex: 3;
|
44
|
+
`
|
45
|
+
|
46
|
+
Sections.defaultProps = {};
|
47
|
+
|
48
|
+
Sections.propTypes = {
|
49
|
+
sections: PropTypes.array.isRequired,
|
50
|
+
backgroundColor: PropTypes.string,
|
51
|
+
}
|
52
|
+
|
53
|
+
export default Sections;
|
@@ -15,6 +15,8 @@ import ReusableList from '../Reusable Components/ReusableList/ReusableList';
|
|
15
15
|
import MusicPlayerWidget from '../Widgets/MusicPlayerWidget/MusicPlayerWidget';
|
16
16
|
import LogoWidget from '../Widgets/LogoWidget/LogoWidget';
|
17
17
|
import VideoPlayer from '../VideoAlbum/VideoPlayer/VideoPlayer';
|
18
|
+
import Notes from '../Library/Notes/Notes';
|
19
|
+
import Folders from '../Library/Folders/Folders'
|
18
20
|
|
19
21
|
export const stringSearch = (str, word) => {
|
20
22
|
str = str.toUpperCase();
|
@@ -40,17 +42,17 @@ export const addObjectToArray = (arr, obj) => {
|
|
40
42
|
return newArray;
|
41
43
|
}
|
42
44
|
|
43
|
-
export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked) => {
|
45
|
+
export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked, onAction) => {
|
44
46
|
const cardTypes = {
|
45
47
|
'card-style-1': (<CardStyle1 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} />),
|
46
48
|
'card-style-2': (<CardStyle2 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
|
47
|
-
'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={(
|
49
|
+
'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)}/>),
|
48
50
|
'card-style-4': (<CardStyle4 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
|
49
51
|
'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
|
50
52
|
'card-style-7': (<CardStyle7 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
|
51
53
|
'card-style-8': (<CardStyle8 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
|
52
|
-
'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)}
|
53
|
-
'card-style-10': (<CardStyle10 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
|
54
|
+
'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)}/>),
|
55
|
+
'card-style-10': (<CardStyle10 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
|
54
56
|
'card-style-11': (<CardStyle11 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
|
55
57
|
}
|
56
58
|
return cardTypes[cardType]
|
@@ -61,7 +63,9 @@ export const getWidgetType = (widgetType, props, cardClicked) => {
|
|
61
63
|
'list': (<ReusableList cardClicked={(path) => cardClicked(path)} {...props}/>),
|
62
64
|
'music player': (<MusicPlayerWidget {...props} />),
|
63
65
|
'logo': (<LogoWidget {...props}/>),
|
64
|
-
'video player': (<VideoPlayer {...props}/>)
|
66
|
+
'video player': (<VideoPlayer {...props}/>),
|
67
|
+
'notes': (<Notes {...props}/>),
|
68
|
+
'folders': (<Folders {...props}/>),
|
65
69
|
}
|
66
70
|
return widgetTypes[widgetType]
|
67
71
|
}
|