@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.
Files changed (65) hide show
  1. package/dist/stories/Chat/Chat.js +5 -26
  2. package/dist/stories/Common Inputs/EditorComponent/EditorComponent.js +4 -2
  3. package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js +1 -1
  4. package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js +2 -12
  5. package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js +4 -19
  6. package/dist/stories/Events/EventsList/EventsList.js +2 -19
  7. package/dist/stories/Library/Folders/Folders.js +3 -9
  8. package/dist/stories/Library/Notes/Notes.js +0 -9
  9. package/dist/stories/Library/ViewNote/ViewNote.js +7 -10
  10. package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +1 -8
  11. package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +3 -6
  12. package/dist/stories/Navbar/Navbar.js +14 -44
  13. package/dist/stories/Pages/Chat/Chat.js +13 -1
  14. package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js +11 -1
  15. package/dist/stories/Pages/Enrollment/Forms/Forms.js +26 -1
  16. package/dist/stories/Pages/Events/Events/Events.js +19 -1
  17. package/dist/stories/Pages/Library/Folders/Library.js +11 -1
  18. package/dist/stories/Pages/Library/Notes/Notes.js +11 -0
  19. package/dist/stories/Pages/Music/MusicAlbum/Music.js +5 -0
  20. package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +43 -1
  21. package/dist/stories/Pages/Photos/Album/Album.js +7 -1
  22. package/dist/stories/Pages/Photos/Albums/Albums.js +34 -1
  23. package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +0 -8
  24. package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +3 -36
  25. package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +7 -3
  26. package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js +7 -1
  27. package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js +3 -2
  28. package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js +27 -12
  29. package/dist/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
  30. package/dist/stories/Reusable Components/ReusableList/ReusableList.js +8 -6
  31. package/dist/stories/Sections/Sections.js +61 -0
  32. package/dist/stories/helpers/util.js +13 -7
  33. package/package.json +2 -2
  34. package/src/stories/Chat/Chat.jsx +3 -25
  35. package/src/stories/Common Inputs/EditorComponent/EditorComponent.jsx +3 -3
  36. package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx +1 -0
  37. package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx +1 -10
  38. package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx +2 -16
  39. package/src/stories/Events/EventsList/EventsList.jsx +1 -17
  40. package/src/stories/Library/Folders/Folders.jsx +1 -7
  41. package/src/stories/Library/Notes/Notes.jsx +0 -9
  42. package/src/stories/Library/ViewNote/ViewNote.jsx +1 -12
  43. package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +0 -7
  44. package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +1 -4
  45. package/src/stories/Navbar/Navbar.jsx +50 -48
  46. package/src/stories/Pages/Chat/Chat.jsx +17 -4
  47. package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx +11 -1
  48. package/src/stories/Pages/Enrollment/Forms/Forms.jsx +27 -1
  49. package/src/stories/Pages/Events/Events/Events.jsx +18 -0
  50. package/src/stories/Pages/Library/Folders/Library.jsx +13 -1
  51. package/src/stories/Pages/Library/Notes/Notes.jsx +30 -18
  52. package/src/stories/Pages/Music/MusicAlbum/Music.jsx +9 -3
  53. package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +38 -24
  54. package/src/stories/Pages/Photos/Album/Album.jsx +7 -1
  55. package/src/stories/Pages/Photos/Albums/Albums.jsx +22 -20
  56. package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +0 -8
  57. package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +1 -35
  58. package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +8 -4
  59. package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx +5 -0
  60. package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx +5 -2
  61. package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx +14 -8
  62. package/src/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
  63. package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +17 -6
  64. package/src/stories/Sections/Sections.jsx +53 -0
  65. 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
- title="Music Albums"
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
- {/* <WidgetContainer
126
- widgetType='music player'
127
- controlsStyles={{
128
- iconColor: 'black',
129
- dropdownBackground: 'black',
130
- dropdownFontColor: 'white',
131
- }}
132
- widgetProps={{
133
- playlist: album,
134
- nextSong: nextSong,
135
- prevSong: prevSong,
136
- currentSong: currentSong,
137
- borderRadius: '10',
138
- primaryColor: 'black'
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
- {/* <WidgetContainer
122
- widgetType='music player'
123
- controlsStyles={{
124
- iconColor: 'black',
125
- dropdownBackground: 'black',
126
- dropdownFontColor: 'white',
127
- }}
130
+ <WidgetContainer
131
+ widgetType='folders'
128
132
  widgetProps={{
129
- playlist: album,
130
- nextSong: nextSong,
131
- prevSong: prevSong,
132
- currentSong: currentSong,
133
- borderRadius: '10',
134
- primaryColor: 'black'
135
- }}
136
- headerStyles={{
137
- controlsStyles: {
138
- iconColor: 'red',
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
- <MainCard
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
- </MainCard>
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 onAccept = () => {
17
- alert(props.index)
16
+ const onAction = (action) => {
17
+ props.iconClicked(action)
18
18
  }
19
19
 
20
20
  return (
21
- <Card {...props}>
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={onAccept}>Accept</Accept>
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 || 'white'};
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 = ({ data, cardStyle, customCardStyles, type, cardControls = null, ...props }) => {
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
- <CardStyle3 title={section.title} {...props.sectionHeaderStyles} />
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
- {...props.headerStyles}
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={(path) => clicked(path)}/>),
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
  }