@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.
Files changed (53) hide show
  1. package/dist/stories/Chat/Chat.js +5 -26
  2. package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js +1 -1
  3. package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js +2 -12
  4. package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js +1 -16
  5. package/dist/stories/Library/Folders/Folders.js +1 -2
  6. package/dist/stories/Library/ViewNote/ViewNote.js +7 -10
  7. package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +1 -8
  8. package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +3 -6
  9. package/dist/stories/Navbar/Navbar.js +14 -44
  10. package/dist/stories/Pages/Chat/Chat.js +13 -1
  11. package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js +11 -1
  12. package/dist/stories/Pages/Enrollment/Forms/Forms.js +21 -1
  13. package/dist/stories/Pages/Library/Folders/Library.js +5 -0
  14. package/dist/stories/Pages/Music/MusicAlbum/Music.js +5 -0
  15. package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +43 -1
  16. package/dist/stories/Pages/Photos/Album/Album.js +7 -1
  17. package/dist/stories/Pages/Photos/Albums/Albums.js +34 -1
  18. package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +0 -8
  19. package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +3 -36
  20. package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +7 -3
  21. package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js +3 -2
  22. package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js +26 -15
  23. package/dist/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
  24. package/dist/stories/Reusable Components/ReusableList/ReusableList.js +6 -4
  25. package/dist/stories/Sections/Sections.js +61 -0
  26. package/dist/stories/helpers/util.js +11 -5
  27. package/package.json +1 -1
  28. package/src/stories/Chat/Chat.jsx +3 -25
  29. package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx +1 -0
  30. package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx +1 -10
  31. package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx +0 -15
  32. package/src/stories/Library/Folders/Folders.jsx +1 -3
  33. package/src/stories/Library/ViewNote/ViewNote.jsx +1 -12
  34. package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +0 -7
  35. package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +1 -4
  36. package/src/stories/Navbar/Navbar.jsx +50 -48
  37. package/src/stories/Pages/Chat/Chat.jsx +17 -4
  38. package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx +11 -1
  39. package/src/stories/Pages/Enrollment/Forms/Forms.jsx +20 -0
  40. package/src/stories/Pages/Library/Folders/Library.jsx +5 -0
  41. package/src/stories/Pages/Music/MusicAlbum/Music.jsx +9 -3
  42. package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +38 -24
  43. package/src/stories/Pages/Photos/Album/Album.jsx +7 -1
  44. package/src/stories/Pages/Photos/Albums/Albums.jsx +22 -20
  45. package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +0 -8
  46. package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +1 -35
  47. package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +8 -4
  48. package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx +5 -2
  49. package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx +12 -8
  50. package/src/stories/Reusable Components/Cards/globalCardStyles.js +1 -1
  51. package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +15 -4
  52. package/src/stories/Sections/Sections.jsx +53 -0
  53. 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 = ({ 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) => {
@@ -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,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={(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, 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
  }