@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
@@ -34,19 +34,10 @@ const DetailedForm = ({
|
|
34
34
|
data={questions}
|
35
35
|
type='flat'
|
36
36
|
cardStyle='card-style-3'
|
37
|
-
headerStyles={{
|
38
|
-
padding: 10,
|
39
|
-
headerBackground: '#FE1744',
|
40
|
-
titleColor: '#ffff',
|
41
|
-
controlsStyles: {
|
42
|
-
dropdownBackground: 'black',
|
43
|
-
dropdownFontColor: 'white',
|
44
|
-
dropdownItemHoverColor: '#FE1744'
|
45
|
-
},
|
46
|
-
}}
|
47
37
|
customCardStyles={{
|
48
38
|
cardPadding: 10
|
49
39
|
}}
|
40
|
+
{...props}
|
50
41
|
/>
|
51
42
|
<Buttons>
|
52
43
|
<Accept onClick={onAccept}>Accept</Accept>
|
@@ -8,25 +8,11 @@ const ViewForms = ({
|
|
8
8
|
}) => {
|
9
9
|
return (
|
10
10
|
<List
|
11
|
-
listTitle="Submitted
|
11
|
+
listTitle="Submitted Forms"
|
12
12
|
data={data}
|
13
13
|
cardStyle="card-style-9"
|
14
14
|
type="sectioned"
|
15
|
-
|
16
|
-
cardTitleColor: 'white',
|
17
|
-
cardBackgroundColor: 'black',
|
18
|
-
cardPadding: 10
|
19
|
-
}}
|
20
|
-
headerStyles={{
|
21
|
-
padding: 10,
|
22
|
-
headerBackground: '#FE1744',
|
23
|
-
titleColor: '#ffff',
|
24
|
-
controlsStyles: {
|
25
|
-
dropdownBackground: 'black',
|
26
|
-
dropdownFontColor: 'white',
|
27
|
-
dropdownItemHoverColor: '#FE1744'
|
28
|
-
},
|
29
|
-
}}
|
15
|
+
{...props}
|
30
16
|
/>
|
31
17
|
)
|
32
18
|
}
|
@@ -60,28 +60,12 @@ const EventsList = ({
|
|
60
60
|
data={events}
|
61
61
|
type='flat'
|
62
62
|
cardStyle="card-style-11"
|
63
|
-
headerStyles={{
|
64
|
-
padding: 10,
|
65
|
-
headerBackground: '#FE1744',
|
66
|
-
titleColor: '#ffff',
|
67
|
-
controlsStyles: {
|
68
|
-
iconSize: 25
|
69
|
-
}
|
70
|
-
}}
|
71
|
-
customCardStyles={{
|
72
|
-
iconColor,
|
73
|
-
cardTitleFontSize,
|
74
|
-
cardTitleColor,
|
75
|
-
cardPadding,
|
76
|
-
controlsStyles: {
|
77
|
-
iconColor: '#FE1744'
|
78
|
-
}
|
79
|
-
}}
|
80
63
|
listControls={listControls}
|
81
64
|
cardControls={cardControls}
|
82
65
|
iconClicked={onIconClicked}
|
83
66
|
cardClicked={cardClicked}
|
84
67
|
cardIconClicked={cardIconClicked}
|
68
|
+
{...props}
|
85
69
|
/>
|
86
70
|
<Modal
|
87
71
|
modalIsOpen={showModal}
|
@@ -23,7 +23,6 @@ const Folders = ({
|
|
23
23
|
rowGap,
|
24
24
|
cardClicked,
|
25
25
|
iconColor,
|
26
|
-
headerStyles,
|
27
26
|
...props
|
28
27
|
}) => {
|
29
28
|
const [showModal, setShowModal] = useState(false);
|
@@ -58,7 +57,6 @@ const Folders = ({
|
|
58
57
|
data={folders}
|
59
58
|
type="flat"
|
60
59
|
cardStyle="card-style-10"
|
61
|
-
headerStyles={headerStyles}
|
62
60
|
columnsNumber={columnsNumber}
|
63
61
|
galleryColumnGap={columnGap}
|
64
62
|
galleryRowGap={rowGap}
|
@@ -68,10 +66,6 @@ const Folders = ({
|
|
68
66
|
cardIconClicked={cardIconClicked}
|
69
67
|
cardControls={cardControls}
|
70
68
|
rowsHeight={140}
|
71
|
-
customCardStyles={{
|
72
|
-
cardPadding: 10,
|
73
|
-
iconColor
|
74
|
-
}}
|
75
69
|
{...props} />
|
76
70
|
<Modal
|
77
71
|
modalIsOpen={showModal}
|
@@ -91,7 +85,7 @@ const Folders = ({
|
|
91
85
|
}
|
92
86
|
|
93
87
|
const Container = styled.div`
|
94
|
-
|
88
|
+
background-color: transparent;
|
95
89
|
`
|
96
90
|
|
97
91
|
Folders.defaultProps = {};
|
@@ -60,15 +60,6 @@ const Notes = ({
|
|
60
60
|
data={notes}
|
61
61
|
type='flat'
|
62
62
|
cardStyle="card-style-11"
|
63
|
-
customCardStyles={{
|
64
|
-
iconColor,
|
65
|
-
cardTitleFontSize,
|
66
|
-
cardTitleColor,
|
67
|
-
cardPadding,
|
68
|
-
controlsStyles: {
|
69
|
-
iconColor: '#FE1744'
|
70
|
-
}
|
71
|
-
}}
|
72
63
|
listControls={listControls}
|
73
64
|
cardControls={cardControls}
|
74
65
|
iconClicked={onIconClicked}
|
@@ -2,19 +2,8 @@ import React from 'react';
|
|
2
2
|
|
3
3
|
import Editor from '../../Common Inputs/EditorComponent/EditorComponent';
|
4
4
|
|
5
|
-
const ViewNote = () => {
|
5
|
+
const ViewNote = ({data, ...props}) => {
|
6
6
|
|
7
|
-
const data = {
|
8
|
-
blocks: [
|
9
|
-
{
|
10
|
-
type: "header",
|
11
|
-
data: {
|
12
|
-
text: "New Note",
|
13
|
-
level: 1
|
14
|
-
}
|
15
|
-
}
|
16
|
-
]
|
17
|
-
}
|
18
7
|
|
19
8
|
return (
|
20
9
|
<Editor data={data}/>
|
@@ -59,13 +59,6 @@ const ViewAlbum = ({
|
|
59
59
|
listControls={listControls}
|
60
60
|
cardControls={cardControls}
|
61
61
|
cardIconClicked={cardIconClicked}
|
62
|
-
customCardStyles={{
|
63
|
-
cardBackgroundColor: cardBackgroundColor,
|
64
|
-
cardTitleColor: songTitleColor,
|
65
|
-
controlsStyles: {
|
66
|
-
iconColor: 'black'
|
67
|
-
}
|
68
|
-
}}
|
69
62
|
{...props}
|
70
63
|
/>
|
71
64
|
<Modal
|
@@ -21,14 +21,12 @@ const galleryControls = [
|
|
21
21
|
|
22
22
|
const ViewAlbums = ({
|
23
23
|
albums,
|
24
|
-
cardBackgroundColor,
|
25
24
|
albumTitleColor,
|
26
25
|
descColor,
|
27
26
|
...props
|
28
27
|
}) => {
|
29
28
|
const cardStyles = {
|
30
29
|
darkOnHover: true,
|
31
|
-
cardBackgroundColor: cardBackgroundColor,
|
32
30
|
cardTitleColor: albumTitleColor,
|
33
31
|
descColor,
|
34
32
|
controlsStyles: {
|
@@ -87,7 +85,6 @@ const ViewAlbums = ({
|
|
87
85
|
iconClicked={onHeaderIconClicked}
|
88
86
|
cardControls={cardControls}
|
89
87
|
cardIconClicked={cardIconClicked}
|
90
|
-
customCardStyles={cardStyles}
|
91
88
|
{...props}
|
92
89
|
/>
|
93
90
|
<Modal
|
@@ -106,7 +103,7 @@ const ViewAlbums = ({
|
|
106
103
|
)
|
107
104
|
}
|
108
105
|
const Container = styled.div`
|
109
|
-
|
106
|
+
width: 100%;
|
110
107
|
`
|
111
108
|
|
112
109
|
ViewAlbums.defaultProps = {
|
@@ -4,14 +4,11 @@ import Select from 'react-select';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import CustomAutoComplete from '../Common Inputs/CustomAutoComplete/CustomAutoComplete';
|
6
6
|
import BaseMaterial from '../Containers/BaseMaterial';
|
7
|
-
|
8
|
-
import
|
9
|
-
import
|
10
|
-
import
|
11
|
-
import
|
12
|
-
import medal from '../assets/medal-svgrepo-com.svg';
|
13
|
-
import settings from '../assets/settings-svgrepo-com.svg';
|
14
|
-
import search from '../assets/search-svgrepo-com.svg';
|
7
|
+
|
8
|
+
import { AiFillHome, AiFillCompass, AiOutlineSearch, AiFillSetting, AiFillBell } from "react-icons/ai";
|
9
|
+
import { MdAddBox } from "react-icons/md";
|
10
|
+
import { BiMedal } from "react-icons/bi";
|
11
|
+
import { IoBasketSharp } from "react-icons/io5";
|
15
12
|
|
16
13
|
/* icon size can sm md lg @sm by default*/
|
17
14
|
/* icon background color @transparent by default*/
|
@@ -92,30 +89,30 @@ const Navbar = ({ iconSize, iconBackgroundColor, navbarColor, dropDownItemHeight
|
|
92
89
|
<BaseMaterial>
|
93
90
|
<NavBar color={navbarColor}>
|
94
91
|
<UniverseContainer>
|
95
|
-
<IconContainer
|
96
|
-
<
|
92
|
+
<IconContainer >
|
93
|
+
<AiFillHome size={iconSize} color={iconBackgroundColor} />
|
97
94
|
</IconContainer>
|
98
|
-
<IconContainer
|
99
|
-
<
|
95
|
+
<IconContainer >
|
96
|
+
<MdAddBox size={iconSize} color={iconBackgroundColor} />
|
100
97
|
</IconContainer>
|
101
98
|
<div style={{ width: '200px' }}>
|
102
99
|
<Select options={options} styles={{ color: 'blue' }} />
|
103
100
|
</div>
|
104
101
|
</UniverseContainer>
|
105
102
|
<DiscoverContainer>
|
106
|
-
<IconContainer
|
107
|
-
<
|
103
|
+
<IconContainer>
|
104
|
+
<AiFillCompass size={iconSize} color={iconBackgroundColor} />
|
108
105
|
</IconContainer>
|
109
|
-
<IconContainer
|
110
|
-
<
|
106
|
+
<IconContainer>
|
107
|
+
<BiMedal size={iconSize} color={iconBackgroundColor}/>
|
111
108
|
</IconContainer>
|
112
|
-
<IconContainer
|
113
|
-
<
|
109
|
+
<IconContainer>
|
110
|
+
<IoBasketSharp size={iconSize} color={iconBackgroundColor}/>
|
114
111
|
</IconContainer>
|
115
112
|
</DiscoverContainer>
|
116
113
|
<SearchContainer>
|
117
114
|
<SearchBar>
|
118
|
-
<
|
115
|
+
<AiOutlineSearch color={iconBackgroundColor} />
|
119
116
|
|
120
117
|
<Formik
|
121
118
|
initialValues={initialValues}
|
@@ -171,11 +168,11 @@ const Navbar = ({ iconSize, iconBackgroundColor, navbarColor, dropDownItemHeight
|
|
171
168
|
<UserName>illo</UserName>
|
172
169
|
</ProfileContainer>
|
173
170
|
<SettingsContainer>
|
174
|
-
<IconContainer
|
175
|
-
<
|
171
|
+
<IconContainer>
|
172
|
+
<AiFillSetting size={iconSize} color={iconBackgroundColor}/>
|
176
173
|
</IconContainer>
|
177
|
-
<IconContainer
|
178
|
-
<
|
174
|
+
<IconContainer>
|
175
|
+
<AiFillBell size={iconSize} color={iconBackgroundColor}/>
|
179
176
|
</IconContainer>
|
180
177
|
</SettingsContainer>
|
181
178
|
</ProfileBar>
|
@@ -218,22 +215,8 @@ const UniverseContainer = styled('div')({
|
|
218
215
|
|
219
216
|
const IconContainer = styled.div`
|
220
217
|
flex: 0 0 auto;
|
221
|
-
|
222
|
-
|
223
|
-
? '30px'
|
224
|
-
: props.size === 'md'
|
225
|
-
? '35px'
|
226
|
-
: props.size === 'lg'
|
227
|
-
? '40px'
|
228
|
-
: '30px'};
|
229
|
-
height: ${(props) =>
|
230
|
-
props.size === 'sm'
|
231
|
-
? '30px'
|
232
|
-
: props.size === 'md'
|
233
|
-
? '35px'
|
234
|
-
: props.size === 'lg'
|
235
|
-
? '40px'
|
236
|
-
: '30px'};
|
218
|
+
|
219
|
+
|
237
220
|
display: flex;
|
238
221
|
align-items: center;
|
239
222
|
margin-left: 0px;
|
@@ -241,7 +224,26 @@ const IconContainer = styled.div`
|
|
241
224
|
border-radius: 20px;
|
242
225
|
flex-direction: row;
|
243
226
|
justify-content: center;
|
244
|
-
|
227
|
+
|
228
|
+
& svg {
|
229
|
+
width: ${(props) =>
|
230
|
+
props.size === 'sm'
|
231
|
+
? '30px'
|
232
|
+
: props.size === 'md'
|
233
|
+
? '35px'
|
234
|
+
: props.size === 'lg'
|
235
|
+
? '40px'
|
236
|
+
: '30px'};
|
237
|
+
};
|
238
|
+
height: ${(props) =>
|
239
|
+
props.size === 'sm'
|
240
|
+
? '30px'
|
241
|
+
: props.size === 'md'
|
242
|
+
? '35px'
|
243
|
+
: props.size === 'lg'
|
244
|
+
? '40px'
|
245
|
+
: '30px'};
|
246
|
+
fill: ${(props) => props.color || 'transparent'};
|
245
247
|
`;
|
246
248
|
|
247
249
|
const Icon = styled.img`
|
@@ -249,18 +251,18 @@ const Icon = styled.img`
|
|
249
251
|
props.size === 'sm'
|
250
252
|
? '20px'
|
251
253
|
: props.size === 'md'
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
254
|
+
? '25px'
|
255
|
+
: props.size === 'lg'
|
256
|
+
? '30px'
|
257
|
+
: '20px'};
|
256
258
|
height: ${(props) =>
|
257
259
|
props.size === 'sm'
|
258
260
|
? '20px'
|
259
261
|
: props.size === 'md'
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
262
|
+
? '25px'
|
263
|
+
: props.size === 'lg'
|
264
|
+
? '30px'
|
265
|
+
: '20px'};
|
264
266
|
`;
|
265
267
|
|
266
268
|
const DiscoverContainer = styled('div')({
|
@@ -67,13 +67,26 @@ const Chat = ({
|
|
67
67
|
discription="Lorem ipsum dolor sit amet consectetur."
|
68
68
|
hideTitle
|
69
69
|
>
|
70
|
-
<ChatSpace
|
71
|
-
|
70
|
+
<ChatSpace
|
71
|
+
data={data}
|
72
|
+
users={users}
|
73
|
+
title={'Chat'}
|
74
|
+
headerStyles={{
|
75
|
+
padding: 10,
|
76
|
+
headerBackground: '#00ADC4',
|
77
|
+
titleColor: '#ffff',
|
78
|
+
controlsStyles: {
|
79
|
+
iconSize: 25
|
80
|
+
}
|
81
|
+
}}
|
82
|
+
customCardStyles={{
|
83
|
+
cardTitleColor: '#00ADC4',
|
84
|
+
}}
|
85
|
+
/>
|
72
86
|
</SpaceContainer>
|
73
|
-
|
74
87
|
</Center>
|
75
88
|
<Right>
|
76
|
-
|
89
|
+
|
77
90
|
</Right>
|
78
91
|
</Body>
|
79
92
|
</BaseMaterial>
|
@@ -86,7 +86,17 @@ const DetailedForm = (props) => {
|
|
86
86
|
<Detailed
|
87
87
|
userName="User Name"
|
88
88
|
userImg="https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png"
|
89
|
-
questions={questions}
|
89
|
+
questions={questions}
|
90
|
+
headerStyles={{
|
91
|
+
padding: 10,
|
92
|
+
headerBackground: '#FE1744',
|
93
|
+
titleColor: '#ffff',
|
94
|
+
controlsStyles: {
|
95
|
+
dropdownBackground: 'black',
|
96
|
+
dropdownFontColor: 'white',
|
97
|
+
dropdownItemHoverColor: '#FE1744'
|
98
|
+
},
|
99
|
+
}} />
|
90
100
|
|
91
101
|
</SpaceContainer>
|
92
102
|
|
@@ -69,6 +69,14 @@ const Forms = (props) => {
|
|
69
69
|
},
|
70
70
|
])
|
71
71
|
|
72
|
+
const cardClicked = (index, cardProps) => {
|
73
|
+
console.log(cardProps)
|
74
|
+
}
|
75
|
+
|
76
|
+
const onAction = (action, index) => {
|
77
|
+
console.log(action)
|
78
|
+
}
|
79
|
+
|
72
80
|
return (
|
73
81
|
<BaseMaterial {...worldStyles.containerStyle} {...props}>
|
74
82
|
<Navbar />
|
@@ -113,7 +121,25 @@ const Forms = (props) => {
|
|
113
121
|
hideTitle
|
114
122
|
>
|
115
123
|
<ViewForms
|
116
|
-
data={forms}
|
124
|
+
data={forms}
|
125
|
+
cardClicked={cardClicked}
|
126
|
+
cardIconClicked={onAction}
|
127
|
+
headerStyles={{
|
128
|
+
padding: 10,
|
129
|
+
headerBackground: '#FE1744',
|
130
|
+
titleColor: '#ffff',
|
131
|
+
controlsStyles: {
|
132
|
+
dropdownBackground: 'black',
|
133
|
+
dropdownFontColor: 'white',
|
134
|
+
dropdownItemHoverColor: '#FE1744'
|
135
|
+
},
|
136
|
+
}}
|
137
|
+
sectionHeaderStyles={{
|
138
|
+
cardTitleColor: 'white',
|
139
|
+
cardBackgroundColor: 'black',
|
140
|
+
cardPadding: 10
|
141
|
+
}}
|
142
|
+
/>
|
117
143
|
|
118
144
|
</SpaceContainer>
|
119
145
|
|
@@ -45,6 +45,10 @@ const Events = (props) => {
|
|
45
45
|
setEvents(deleteFromArrayByIndex(events, index))
|
46
46
|
}
|
47
47
|
|
48
|
+
const cardClicked = (index, cardProps) => {
|
49
|
+
console.log(cardProps)
|
50
|
+
}
|
51
|
+
|
48
52
|
return (
|
49
53
|
<BaseMaterial {...worldStyles.containerStyle} {...props}>
|
50
54
|
<Navbar />
|
@@ -94,6 +98,20 @@ const Events = (props) => {
|
|
94
98
|
cardTitleFontSize={15}
|
95
99
|
onAddEvent={onAddEvent}
|
96
100
|
cardIconClicked={cardIconClicked}
|
101
|
+
cardClicked={cardClicked}
|
102
|
+
headerStyles={{
|
103
|
+
padding: 10,
|
104
|
+
headerBackground: '#FE1744',
|
105
|
+
titleColor: '#ffff',
|
106
|
+
controlsStyles: {
|
107
|
+
iconSize: 25
|
108
|
+
}
|
109
|
+
}}
|
110
|
+
customCardStyles={{
|
111
|
+
controlsStyles: {
|
112
|
+
iconColor: '#FE1744'
|
113
|
+
}
|
114
|
+
}}
|
97
115
|
/>
|
98
116
|
|
99
117
|
</SpaceContainer>
|
@@ -46,6 +46,10 @@ const Library = (props) => {
|
|
46
46
|
setFolders(deleteFromArrayByIndex(folders, index))
|
47
47
|
}
|
48
48
|
|
49
|
+
const cardClicked = (index, cardProps) => {
|
50
|
+
console.log(cardProps)
|
51
|
+
}
|
52
|
+
|
49
53
|
return (
|
50
54
|
<BaseMaterial {...worldStyles.containerStyle} {...props}>
|
51
55
|
<Navbar />
|
@@ -80,6 +84,7 @@ const Library = (props) => {
|
|
80
84
|
showOnHover: true,
|
81
85
|
}
|
82
86
|
},
|
87
|
+
cardClicked
|
83
88
|
}}
|
84
89
|
/>
|
85
90
|
</Left>
|
@@ -95,6 +100,7 @@ const Library = (props) => {
|
|
95
100
|
columnsNumber={3}
|
96
101
|
onAddFolder={onAddFolder}
|
97
102
|
cardIconClicked={cardIconClicked}
|
103
|
+
cardClicked={cardClicked}
|
98
104
|
headerStyles={{
|
99
105
|
padding: 10,
|
100
106
|
headerBackground: '#ff2d2d',
|
@@ -102,7 +108,13 @@ const Library = (props) => {
|
|
102
108
|
controlsStyles: {
|
103
109
|
iconSize: 25
|
104
110
|
}
|
105
|
-
}}
|
111
|
+
}}
|
112
|
+
customCardStyles={{
|
113
|
+
cardPadding: 10,
|
114
|
+
iconColor: '#ff2d2d'
|
115
|
+
}}
|
116
|
+
|
117
|
+
/>
|
106
118
|
|
107
119
|
</SpaceContainer>
|
108
120
|
|
@@ -20,11 +20,11 @@ import { SPACES } from '../../ViewWorld/constatnts';
|
|
20
20
|
const Notes = (props) => {
|
21
21
|
|
22
22
|
const [notes, setNotes] = useState([
|
23
|
-
{title: 'Study notes', date: '15/11/2020'},
|
24
|
-
{title: 'Music notes', date: '14/12/2020'},
|
25
|
-
{title: 'Workout notes', date: '5/8/2021'},
|
26
|
-
{title: 'Gaming notes', date: '14/4/2023'},
|
27
|
-
{title: 'Working notes', date: '5/6/2021'},
|
23
|
+
{ title: 'Study notes', date: '15/11/2020' },
|
24
|
+
{ title: 'Music notes', date: '14/12/2020' },
|
25
|
+
{ title: 'Workout notes', date: '5/8/2021' },
|
26
|
+
{ title: 'Gaming notes', date: '14/4/2023' },
|
27
|
+
{ title: 'Working notes', date: '5/6/2021' },
|
28
28
|
])
|
29
29
|
|
30
30
|
const cardIconClicked = (action, index) => {
|
@@ -32,7 +32,7 @@ const Notes = (props) => {
|
|
32
32
|
case 'delete':
|
33
33
|
deleteNote(index)
|
34
34
|
break;
|
35
|
-
|
35
|
+
|
36
36
|
default:
|
37
37
|
break;
|
38
38
|
}
|
@@ -45,7 +45,11 @@ const Notes = (props) => {
|
|
45
45
|
const deleteNote = (index) => {
|
46
46
|
setNotes(deleteFromArrayByIndex(notes, index))
|
47
47
|
}
|
48
|
-
|
48
|
+
|
49
|
+
const cardClicked = (index, cardProps) => {
|
50
|
+
console.log(cardProps)
|
51
|
+
}
|
52
|
+
|
49
53
|
return (
|
50
54
|
<BaseMaterial {...worldStyles.containerStyle} {...props}>
|
51
55
|
<Navbar />
|
@@ -90,17 +94,25 @@ const Notes = (props) => {
|
|
90
94
|
hideTitle
|
91
95
|
>
|
92
96
|
<ViewNotes
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
97
|
+
onAddNote={onAddNote}
|
98
|
+
cardIconClicked={cardIconClicked}
|
99
|
+
notes={notes}
|
100
|
+
cardClicked={cardClicked}
|
101
|
+
headerStyles={{
|
102
|
+
padding: 10,
|
103
|
+
headerBackground: '#FE1744',
|
104
|
+
titleColor: '#ffff',
|
105
|
+
controlsStyles: {
|
106
|
+
iconSize: 25
|
107
|
+
}
|
108
|
+
}}
|
109
|
+
customCardStyles={{
|
110
|
+
iconColor: '#FE1744',
|
111
|
+
controlsStyles: {
|
112
|
+
iconColor: '#FE1744'
|
113
|
+
}
|
114
|
+
}}
|
115
|
+
/>
|
104
116
|
|
105
117
|
</SpaceContainer>
|
106
118
|
|
@@ -66,7 +66,7 @@ const Music = (props) => {
|
|
66
66
|
case 'delete':
|
67
67
|
deleteSonngFromAlbum(index)
|
68
68
|
break;
|
69
|
-
|
69
|
+
|
70
70
|
default:
|
71
71
|
break;
|
72
72
|
}
|
@@ -129,9 +129,15 @@ const Music = (props) => {
|
|
129
129
|
headerBackground: 'black',
|
130
130
|
titleColor: '#ffff',
|
131
131
|
controlsStyles: {
|
132
|
-
|
132
|
+
iconSize: 25
|
133
|
+
}
|
134
|
+
}}
|
135
|
+
customCardStyles={{
|
136
|
+
controlsStyles: {
|
137
|
+
iconColor: 'blue'
|
133
138
|
}
|
134
|
-
|
139
|
+
}}
|
140
|
+
/>
|
135
141
|
</SpaceContainer>
|
136
142
|
|
137
143
|
</Center>
|