@mohamed-karawia/library 0.1.13 → 0.1.17
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/Common Inputs/EditorComponent/EditorComponent.js +4 -2
- 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 +4 -19
- package/dist/stories/Events/EventsList/EventsList.js +2 -19
- package/dist/stories/Library/Folders/Folders.js +3 -9
- package/dist/stories/Library/Notes/Notes.js +0 -9
- 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 +26 -1
- package/dist/stories/Pages/Events/Events/Events.js +19 -1
- package/dist/stories/Pages/Library/Folders/Library.js +11 -1
- package/dist/stories/Pages/Library/Notes/Notes.js +11 -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-11/CardStyle11.js +7 -1
- package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js +3 -2
- package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js +27 -12
- package/dist/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
- package/dist/stories/Reusable Components/ReusableList/ReusableList.js +8 -6
- package/dist/stories/Sections/Sections.js +61 -0
- package/dist/stories/helpers/util.js +13 -7
- package/package.json +2 -2
- package/src/stories/Chat/Chat.jsx +3 -25
- package/src/stories/Common Inputs/EditorComponent/EditorComponent.jsx +3 -3
- 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 +2 -16
- package/src/stories/Events/EventsList/EventsList.jsx +1 -17
- package/src/stories/Library/Folders/Folders.jsx +1 -7
- package/src/stories/Library/Notes/Notes.jsx +0 -9
- 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 +27 -1
- package/src/stories/Pages/Events/Events/Events.jsx +18 -0
- package/src/stories/Pages/Library/Folders/Library.jsx +13 -1
- package/src/stories/Pages/Library/Notes/Notes.jsx +30 -18
- 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-11/CardStyle11.jsx +5 -0
- package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx +5 -2
- package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx +14 -8
- package/src/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
- package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +17 -6
- package/src/stories/Sections/Sections.jsx +53 -0
- package/src/stories/helpers/util.js +10 -6
@@ -60,6 +60,15 @@ const MusicAlbums = (props) => {
|
|
60
60
|
const cardClicked = (index, cardProps) => {
|
61
61
|
console.log(cardProps)
|
62
62
|
}
|
63
|
+
|
64
|
+
const notes = [
|
65
|
+
{title: 'Study notes', date: '15/11/2020'},
|
66
|
+
{title: 'Music notes', date: '14/12/2020'},
|
67
|
+
{title: 'Workout notes', date: '5/8/2021'},
|
68
|
+
{title: 'Gaming notes', date: '14/4/2023'},
|
69
|
+
{title: 'Working notes', date: '5/6/2021'},
|
70
|
+
]
|
71
|
+
|
63
72
|
return (
|
64
73
|
<BaseMaterial {...worldStyles.containerStyle} {...props}>
|
65
74
|
<Navbar />
|
@@ -104,7 +113,7 @@ const MusicAlbums = (props) => {
|
|
104
113
|
hideTitle
|
105
114
|
>
|
106
115
|
<ViewAlbums
|
107
|
-
|
116
|
+
title="Music Albums"
|
108
117
|
albums={albums}
|
109
118
|
cardIconClicked={cardIconClicked}
|
110
119
|
onAddAlbum={onAddAlbum}
|
@@ -116,34 +125,39 @@ const MusicAlbums = (props) => {
|
|
116
125
|
iconSize: 25
|
117
126
|
}
|
118
127
|
}}
|
128
|
+
customCardStyles={{
|
129
|
+
darkOnHover: true,
|
130
|
+
controlsStyles: {
|
131
|
+
showOnHover: true,
|
132
|
+
position: 'center',
|
133
|
+
dropdownFontColor: "white",
|
134
|
+
iconBorderRadius: 100,
|
135
|
+
iconSize: 40,
|
136
|
+
iconsGap: 10,
|
137
|
+
iconColor: 'white',
|
138
|
+
containerPadding: 20,
|
139
|
+
}
|
140
|
+
}}
|
119
141
|
cardClicked={cardClicked}
|
120
|
-
|
142
|
+
/>
|
121
143
|
</SpaceContainer>
|
122
144
|
|
123
145
|
</Center>
|
124
146
|
<Right>
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
}}
|
140
|
-
headerStyles={{
|
141
|
-
controlsStyles: {
|
142
|
-
iconColor: 'red',
|
143
|
-
},
|
144
|
-
}}
|
145
|
-
/> */}
|
146
|
-
|
147
|
+
<WidgetContainer
|
148
|
+
widgetType='notes'
|
149
|
+
widgetProps={{
|
150
|
+
notes,
|
151
|
+
headerStyles:{
|
152
|
+
padding: 10,
|
153
|
+
headerBackground: 'black',
|
154
|
+
titleColor: '#ffff',
|
155
|
+
controlsStyles: {
|
156
|
+
iconSize: 25
|
157
|
+
}
|
158
|
+
}}
|
159
|
+
}
|
160
|
+
/>
|
147
161
|
</Right>
|
148
162
|
</Body>
|
149
163
|
</BaseMaterial>
|
@@ -105,7 +105,13 @@ const Album = (props) => {
|
|
105
105
|
addPhoto={onAddPhoto}
|
106
106
|
deletePhoto={onDeletePhoto}
|
107
107
|
cardIconClicked={cardIconClicked}
|
108
|
-
columnsNumber={2}
|
108
|
+
columnsNumber={2}
|
109
|
+
headerStyles={{
|
110
|
+
padding: 10,
|
111
|
+
controlsStyles: {
|
112
|
+
iconSize: 25
|
113
|
+
}
|
114
|
+
}} />
|
109
115
|
</SpaceContainer>
|
110
116
|
|
111
117
|
</Center>
|
@@ -36,6 +36,15 @@ const Albums = (props) => {
|
|
36
36
|
{ img: img6, title: 'Album 6', count: '24' },
|
37
37
|
])
|
38
38
|
|
39
|
+
const folders = [
|
40
|
+
{ title: 'Folder one', description: 'Discription for folder one' },
|
41
|
+
{ title: 'Folder two', description: 'Discription for folder two' },
|
42
|
+
{ title: 'Folder three', description: 'Discription for folder three' },
|
43
|
+
{ title: 'Folder four', description: 'Discription for folder four' },
|
44
|
+
{ title: 'Folder five', description: 'Discription for folder five' },
|
45
|
+
{ title: 'Folder six', description: 'Discription for folder six' },
|
46
|
+
]
|
47
|
+
|
39
48
|
const cardIconClicked = (action, index) => {
|
40
49
|
switch (action) {
|
41
50
|
case 'delete':
|
@@ -118,27 +127,20 @@ const Albums = (props) => {
|
|
118
127
|
|
119
128
|
</Center>
|
120
129
|
<Right>
|
121
|
-
|
122
|
-
widgetType='
|
123
|
-
controlsStyles={{
|
124
|
-
iconColor: 'black',
|
125
|
-
dropdownBackground: 'black',
|
126
|
-
dropdownFontColor: 'white',
|
127
|
-
}}
|
130
|
+
<WidgetContainer
|
131
|
+
widgetType='folders'
|
128
132
|
widgetProps={{
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
}}
|
141
|
-
/> */}
|
133
|
+
folders,
|
134
|
+
columnsNumber: 3,
|
135
|
+
customCardStyles:{
|
136
|
+
cardPadding: 10,
|
137
|
+
iconColor: '#ff2d2d',
|
138
|
+
controlsStyles: {
|
139
|
+
iconColor:'#FE1744'
|
140
|
+
}
|
141
|
+
}}
|
142
|
+
}
|
143
|
+
/>
|
142
144
|
|
143
145
|
</Right>
|
144
146
|
</Body>
|
@@ -115,14 +115,6 @@ const ViewAlbum = ({
|
|
115
115
|
data={album}
|
116
116
|
type="flat"
|
117
117
|
cardStyle="card-style-6"
|
118
|
-
headerStyles={{
|
119
|
-
padding: 10,
|
120
|
-
headerBackground: props.headerBackground,
|
121
|
-
titleColor: props.titleColor,
|
122
|
-
controlsStyles: {
|
123
|
-
iconSize: 25
|
124
|
-
}
|
125
|
-
}}
|
126
118
|
columnsNumber={columnsNumber}
|
127
119
|
galleryColumnGap={columnGap}
|
128
120
|
galleryRowGap={rowGap}
|
@@ -18,36 +18,11 @@ const galleryControls = [
|
|
18
18
|
|
19
19
|
const ViewAlbums = ({
|
20
20
|
albums,
|
21
|
-
cardBackgroundColor,
|
22
|
-
cardTitleColor,
|
23
|
-
cardTitleFontSize,
|
24
|
-
albumTitleColor,
|
25
|
-
countColor,
|
26
|
-
countFontSize,
|
27
21
|
columnsNumber,
|
28
22
|
columnGap,
|
29
23
|
rowGap,
|
30
24
|
...props }) => {
|
31
25
|
|
32
|
-
const cardStyles = {
|
33
|
-
darkOnHover: true,
|
34
|
-
cardBackgroundColor,
|
35
|
-
cardTitleColor,
|
36
|
-
cardTitleFontSize,
|
37
|
-
countColor,
|
38
|
-
countFontSize,
|
39
|
-
controlsStyles: {
|
40
|
-
showOnHover: true,
|
41
|
-
position: 'center',
|
42
|
-
dropdownFontColor: "white",
|
43
|
-
iconBorderRadius: 100,
|
44
|
-
iconSize: 40,
|
45
|
-
iconsGap: 10,
|
46
|
-
iconColor: 'white',
|
47
|
-
containerPadding: 20,
|
48
|
-
}
|
49
|
-
}
|
50
|
-
|
51
26
|
const [showModal, setShowModal] = useState(false)
|
52
27
|
|
53
28
|
const onIconClicked = (action) => {
|
@@ -80,14 +55,6 @@ const ViewAlbums = ({
|
|
80
55
|
data={albums}
|
81
56
|
type="flat"
|
82
57
|
cardStyle="card-style-6"
|
83
|
-
headerStyles={{
|
84
|
-
padding: 10,
|
85
|
-
headerBackground: props.headerBackground,
|
86
|
-
titleColor: props.titleColor,
|
87
|
-
controlsStyles: {
|
88
|
-
iconSize: 25
|
89
|
-
}
|
90
|
-
}}
|
91
58
|
columnsNumber={columnsNumber}
|
92
59
|
galleryColumnGap={columnGap}
|
93
60
|
galleryRowGap={rowGap}
|
@@ -95,7 +62,6 @@ const ViewAlbums = ({
|
|
95
62
|
iconClicked={onIconClicked}
|
96
63
|
cardControls={cardControls}
|
97
64
|
cardIconClicked={cardIconClicked}
|
98
|
-
customCardStyles={cardStyles}
|
99
65
|
{...props} />
|
100
66
|
|
101
67
|
<Modal
|
@@ -113,7 +79,7 @@ const ViewAlbums = ({
|
|
113
79
|
}
|
114
80
|
|
115
81
|
const Container = styled.div`
|
116
|
-
|
82
|
+
width: 100%;
|
117
83
|
`
|
118
84
|
|
119
85
|
ViewAlbums.defaultProps = {
|
@@ -19,14 +19,19 @@ const CardStyle10 = ({
|
|
19
19
|
props.iconClicked(action, props.index)
|
20
20
|
}
|
21
21
|
|
22
|
+
const cardClicked = () => {
|
23
|
+
props.cardClicked()
|
24
|
+
}
|
25
|
+
|
22
26
|
|
23
27
|
return (
|
24
28
|
<Card
|
29
|
+
onClick={cardClicked}
|
25
30
|
onMouseEnter={e => setShowIcons(true)}
|
26
31
|
onMouseLeave={e => setShowIcons(false)}
|
27
32
|
{...props}>
|
28
33
|
<SvgWrapper {...props}>
|
29
|
-
<AiFillFolderOpen />
|
34
|
+
<AiFillFolderOpen {...props}/>
|
30
35
|
</SvgWrapper>
|
31
36
|
<Content {...props}>
|
32
37
|
<Title {...props}>{title}</Title>
|
@@ -42,7 +47,6 @@ const CardStyle10 = ({
|
|
42
47
|
iconSize={20}
|
43
48
|
iconsGap={10}
|
44
49
|
maxIcons={0}
|
45
|
-
iconColor='#FE1744'
|
46
50
|
dropdownFontSize={10}
|
47
51
|
{...props.controlsStyles} />
|
48
52
|
</Card>
|
@@ -64,10 +68,10 @@ const Content = styled(globalContent)`
|
|
64
68
|
|
65
69
|
const SvgWrapper = styled.div`
|
66
70
|
|
67
|
-
svg{
|
71
|
+
& svg{
|
68
72
|
width: 70px;
|
69
73
|
height: 70px;
|
70
|
-
fill: ${props => props.iconColor}
|
74
|
+
fill: ${(props) => props.iconColor}
|
71
75
|
}
|
72
76
|
`
|
73
77
|
|
@@ -15,8 +15,13 @@ const CardStyle11 = ({ title, date, ...props }) => {
|
|
15
15
|
props.iconClicked(action, props.index)
|
16
16
|
}
|
17
17
|
|
18
|
+
const cardClicked = () => {
|
19
|
+
props.cardClicked()
|
20
|
+
}
|
21
|
+
|
18
22
|
return (
|
19
23
|
<Card
|
24
|
+
onClick={cardClicked}
|
20
25
|
{...props}>
|
21
26
|
<SvgWrapper {...props}>
|
22
27
|
<BiNotepad />
|
@@ -17,7 +17,7 @@ const CardStyle3 = ({ title, description, path, ...props }) => {
|
|
17
17
|
}
|
18
18
|
|
19
19
|
return (
|
20
|
-
<
|
20
|
+
<Card
|
21
21
|
onClick={cardClicked}
|
22
22
|
onMouseEnter={e => setShowIcons(true)}
|
23
23
|
onMouseLeave={e => setShowIcons(false)}
|
@@ -33,7 +33,7 @@ const CardStyle3 = ({ title, description, path, ...props }) => {
|
|
33
33
|
show={showIcons}
|
34
34
|
onIconClicked={iconCliked}
|
35
35
|
{...props.controlsStyles} />}
|
36
|
-
</
|
36
|
+
</Card>
|
37
37
|
)
|
38
38
|
}
|
39
39
|
|
@@ -42,6 +42,9 @@ const Content = styled(globalContent)`
|
|
42
42
|
row-gap: ${props => props.rowGap}px;
|
43
43
|
`
|
44
44
|
|
45
|
+
const Card = styled(MainCard)`
|
46
|
+
cursor: pointer;
|
47
|
+
`
|
45
48
|
|
46
49
|
CardStyle3.defaultProps = {}
|
47
50
|
|
@@ -6,29 +6,31 @@ import PropTypes from "prop-types";
|
|
6
6
|
import {
|
7
7
|
MainCard,
|
8
8
|
globalContent,
|
9
|
-
Title,
|
9
|
+
Title as glboalTitle,
|
10
10
|
Img
|
11
11
|
} from '../globalCardStyles';
|
12
12
|
|
13
13
|
const CardStyle9 = ({ username, answered, img, status, ...props }) => {
|
14
14
|
console.log(props)
|
15
15
|
|
16
|
-
const
|
17
|
-
|
16
|
+
const onAction = (action) => {
|
17
|
+
props.iconClicked(action)
|
18
18
|
}
|
19
19
|
|
20
20
|
return (
|
21
|
-
<Card
|
21
|
+
<Card
|
22
|
+
|
23
|
+
{...props}>
|
22
24
|
<ImgWrapper {...props}>
|
23
25
|
<Img src={img} />
|
24
26
|
</ImgWrapper>
|
25
27
|
<Content {...props}>
|
26
|
-
<Title {...props}>{username}</Title>
|
28
|
+
<Title onClick={() => props.cardClicked()} {...props}>{username}</Title>
|
27
29
|
<Answered>Questions Answered: {answered}</Answered>
|
28
30
|
<Buttons>
|
29
|
-
<Accept onClick={
|
30
|
-
<Decline >Decline</Decline>
|
31
|
-
{status === 'pending' && <Review>In Review</Review>}
|
31
|
+
<Accept onClick={() => onAction('accept')}>Accept</Accept>
|
32
|
+
<Decline onClick={() => onAction('decline')}>Decline</Decline>
|
33
|
+
{status === 'pending' && <Review onClick={() => onAction('review')}>In Review</Review>}
|
32
34
|
</Buttons>
|
33
35
|
</Content>
|
34
36
|
</Card>
|
@@ -55,6 +57,10 @@ const Content = styled(globalContent)`
|
|
55
57
|
justify-content: space-between;
|
56
58
|
`
|
57
59
|
|
60
|
+
const Title = styled(glboalTitle)`
|
61
|
+
cursor: pointer;
|
62
|
+
`
|
63
|
+
|
58
64
|
const Answered = styled.h5`
|
59
65
|
font-weight: 300;
|
60
66
|
`
|
@@ -7,7 +7,7 @@ export const MainCard = styled.div`
|
|
7
7
|
}
|
8
8
|
font-family: sans-serif;
|
9
9
|
display: flex;
|
10
|
-
background-color: ${props => props.cardBackgroundColor || '
|
10
|
+
background-color: ${props => props.cardBackgroundColor || 'transparent'};
|
11
11
|
border-radius: ${props => props.cardRadius}px;
|
12
12
|
border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
|
13
13
|
align-items: center;
|
@@ -7,15 +7,24 @@ 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) => {
|
14
23
|
props.iconClicked(action)
|
15
24
|
}
|
16
25
|
|
17
|
-
const clicked = (index) => {
|
18
|
-
props.cardClicked(index)
|
26
|
+
const clicked = (index, cardProps) => {
|
27
|
+
props.cardClicked(index, cardProps)
|
19
28
|
}
|
20
29
|
|
21
30
|
const cardIconClicked = (action, index) => {
|
@@ -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,18 +42,18 @@ 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)} 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-11': (<CardStyle11 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)} />),
|
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]
|
57
59
|
};
|
@@ -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
|
}
|