@mohamed-karawia/library 0.1.18 → 0.1.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. package/dist/stories/Chat/Chat.js +114 -4
  2. package/dist/stories/Common Inputs/Picker/Picker.js +61 -0
  3. package/dist/stories/Common Inputs/TextField/TextField.js +3 -1
  4. package/dist/stories/Community/Community.js +159 -0
  5. package/dist/stories/Events/Event/Event.js +123 -4
  6. package/dist/stories/Events/EventsList/EventsList.js +98 -16
  7. package/dist/stories/Forms/CreateSpace/CreateSpace.js +75 -0
  8. package/dist/stories/Library/Folders/Folders.js +94 -9
  9. package/dist/stories/Library/Notes/Notes.js +94 -9
  10. package/dist/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.js +54 -0
  11. package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +98 -10
  12. package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +96 -34
  13. package/dist/stories/Navbar/Navbar.js +1 -1
  14. package/dist/stories/Pages/Events/Event/Event.js +14 -5
  15. package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +2 -15
  16. package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +94 -17
  17. package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +88 -10
  18. package/dist/stories/Preview/Preview.js +1 -0
  19. package/dist/stories/PreviewComponents/ChatPreview/ChatPreview.js +193 -0
  20. package/dist/stories/PreviewComponents/EventPreview/EventPreview.js +158 -0
  21. package/dist/stories/PreviewComponents/EventsPreview/EventsPreview.js +192 -0
  22. package/dist/stories/PreviewComponents/FoldersPreview/FoldersPreview.js +182 -0
  23. package/dist/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.js +177 -0
  24. package/dist/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.js +181 -0
  25. package/dist/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.js +153 -0
  26. package/dist/stories/PreviewComponents/NavbarPreview/NavbarPreview.js +112 -0
  27. package/dist/stories/PreviewComponents/NotesPreview/NotesPreview.js +173 -0
  28. package/dist/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.js +189 -0
  29. package/dist/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.js +189 -0
  30. package/dist/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.js +197 -0
  31. package/dist/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.js +189 -0
  32. package/dist/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.js +175 -0
  33. package/dist/stories/PreviewComponents/VideoPreview/VideoPreview.js +172 -0
  34. package/dist/stories/PreviewComponents/globalStyles.js +26 -0
  35. package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +4 -3
  36. package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js +8 -4
  37. package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.js +10 -4
  38. package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.js +4 -2
  39. package/dist/stories/Reusable Components/Cards/globalCardStyles.js +2 -2
  40. package/dist/stories/Reusable Components/Community/Community.js +53 -0
  41. package/dist/stories/Reusable Components/Gallery/Gallery.js +12 -17
  42. package/dist/stories/Reusable Components/ReactModal/ReactModal.js +11 -30
  43. package/dist/stories/Reusable Components/ReusableForm/ReusableForm.js +19 -2
  44. package/dist/stories/Reusable Components/ReusableList/ReusableList.js +9 -5
  45. package/dist/stories/Reusable Components/Tabs/Tabs.js +68 -0
  46. package/dist/stories/Sections/Sections.js +8 -2
  47. package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js +85 -19
  48. package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js +108 -4
  49. package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js +84 -9
  50. package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js +16 -10
  51. package/dist/stories/Widgets/SpacesListWidget/SpacesListWidget.js +115 -0
  52. package/dist/stories/Widgets/UsersWidget/UsersWidget.js +30 -0
  53. package/dist/stories/helpers/util.js +36 -3
  54. package/dist/stories/store/communities.js +941 -0
  55. package/dist/stories/store/store.js +44 -0
  56. package/package.json +5 -2
  57. package/src/stories/Chat/Chat.jsx +110 -5
  58. package/src/stories/Common Inputs/Picker/Picker.jsx +47 -0
  59. package/src/stories/Common Inputs/TextField/TextField.jsx +1 -1
  60. package/src/stories/Community/Community.jsx +109 -0
  61. package/src/stories/Events/Event/Event.jsx +105 -4
  62. package/src/stories/Events/EventsList/EventsList.jsx +98 -17
  63. package/src/stories/Forms/CreateSpace/CreateSpace.jsx +73 -0
  64. package/src/stories/Library/Folders/Folders.jsx +94 -7
  65. package/src/stories/Library/Notes/Notes.jsx +73 -7
  66. package/src/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.jsx +31 -0
  67. package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +81 -11
  68. package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +78 -34
  69. package/src/stories/Navbar/Navbar.jsx +1 -1
  70. package/src/stories/Pages/Events/Event/Event.jsx +12 -4
  71. package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +0 -13
  72. package/src/stories/Pages/ViewWorld/styles.json +1 -1
  73. package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +68 -6
  74. package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +69 -9
  75. package/src/stories/Preview/Preview.jsx +9 -1
  76. package/src/stories/PreviewComponents/ChatPreview/ChatPreview.jsx +132 -0
  77. package/src/stories/PreviewComponents/EventPreview/EventPreview.jsx +116 -0
  78. package/src/stories/PreviewComponents/EventsPreview/EventsPreview.jsx +132 -0
  79. package/src/stories/PreviewComponents/FoldersPreview/FoldersPreview.jsx +127 -0
  80. package/src/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.jsx +124 -0
  81. package/src/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.jsx +126 -0
  82. package/src/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.jsx +113 -0
  83. package/src/stories/PreviewComponents/NavbarPreview/NavbarPreview.jsx +93 -0
  84. package/src/stories/PreviewComponents/NotesPreview/NotesPreview.jsx +122 -0
  85. package/src/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.jsx +129 -0
  86. package/src/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.jsx +129 -0
  87. package/src/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.jsx +138 -0
  88. package/src/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.jsx +129 -0
  89. package/src/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.jsx +124 -0
  90. package/src/stories/PreviewComponents/VideoPreview/VideoPreview.jsx +125 -0
  91. package/src/stories/PreviewComponents/globalStyles.js +20 -0
  92. package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +5 -2
  93. package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx +5 -5
  94. package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.jsx +12 -6
  95. package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.jsx +2 -2
  96. package/src/stories/Reusable Components/Cards/globalCardStyles.js +2 -1
  97. package/src/stories/Reusable Components/Community/Community.jsx +47 -0
  98. package/src/stories/Reusable Components/Gallery/Gallery.jsx +10 -9
  99. package/src/stories/Reusable Components/ReactModal/ReactModal.jsx +3 -25
  100. package/src/stories/Reusable Components/ReusableForm/ReusableForm.jsx +18 -6
  101. package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +9 -4
  102. package/src/stories/Reusable Components/Tabs/Tabs.jsx +67 -0
  103. package/src/stories/Sections/Sections.jsx +5 -2
  104. package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx +64 -16
  105. package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx +77 -1
  106. package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx +64 -9
  107. package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.jsx +13 -6
  108. package/src/stories/Widgets/SpacesListWidget/SpacesListWidget.jsx +78 -0
  109. package/src/stories/Widgets/UsersWidget/UsersWidget.jsx +20 -0
  110. package/src/stories/helpers/util.js +24 -2
  111. package/src/stories/store/communities.js +703 -0
  112. package/src/stories/store/store.js +33 -0
  113. package/src/stories/styling.json +92 -0
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.deleteEvent = exports.addEvent = void 0;
9
+
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
11
+
12
+ var _toolkit = require("@reduxjs/toolkit");
13
+
14
+ var _communities = require("./communities");
15
+
16
+ var Community = (0, _toolkit.createSlice)({
17
+ name: 'community',
18
+ initialState: _communities.community,
19
+ reducers: {
20
+ addEvent: function addEvent(state, action) {
21
+ state.spaces[1].spaceProps.events = [].concat((0, _toConsumableArray2.default)(state.spaces[1].spaceProps.events), [action.payload]); // console.log(action)
22
+ // alert
23
+
24
+ console.log(action);
25
+ },
26
+ deleteEvent: function deleteEvent(state, action) {
27
+ var eventsAfterDelete = (0, _toConsumableArray2.default)(state.spaces[1].spaceProps.events);
28
+ eventsAfterDelete.splice(action.payload, 1);
29
+ state.spaces[1].spaceProps.events = eventsAfterDelete;
30
+ }
31
+ }
32
+ });
33
+ var _Community$actions = Community.actions,
34
+ addEvent = _Community$actions.addEvent,
35
+ deleteEvent = _Community$actions.deleteEvent;
36
+ exports.deleteEvent = deleteEvent;
37
+ exports.addEvent = addEvent;
38
+ var store = (0, _toolkit.configureStore)({
39
+ reducer: {
40
+ communities: Community.reducer
41
+ }
42
+ });
43
+ var _default = store;
44
+ exports.default = _default;
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  ]
11
11
  ]
12
12
  },
13
- "version": "0.1.18",
13
+ "version": "0.1.22",
14
14
  "private": false,
15
15
  "dependencies": {
16
16
  "@babel/cli": "^7.16.7",
@@ -23,6 +23,7 @@
23
23
  "@editorjs/table": "^2.0.1",
24
24
  "@giphy/js-fetch-api": "^4.1.2",
25
25
  "@giphy/react-components": "^5.3.1",
26
+ "@reduxjs/toolkit": "^1.7.2",
26
27
  "@testing-library/jest-dom": "^5.11.4",
27
28
  "@testing-library/react": "^11.1.0",
28
29
  "@testing-library/user-event": "^12.1.10",
@@ -38,6 +39,7 @@
38
39
  "rc-slider": "^9.7.5",
39
40
  "react-async-hook": "^4.0.0",
40
41
  "react-autocomplete": "^1.8.1",
42
+ "react-color": "^2.19.3",
41
43
  "react-dates": "^21.8.0",
42
44
  "react-dom": "^16.14.0",
43
45
  "react-dropzone": "^11.4.0",
@@ -48,8 +50,9 @@
48
50
  "react-icons": "^4.2.0",
49
51
  "react-jinke-music-player": "^4.24.1",
50
52
  "react-mentions": "^4.3.0",
51
- "react-modal": "^3.14.3",
53
+ "react-modal": "^3.14.4",
52
54
  "react-player": "^2.9.0",
55
+ "react-redux": "^7.2.6",
53
56
  "react-resize-observer": "^1.1.1",
54
57
  "react-scripts": "4.0.1",
55
58
  "react-select": "^4.3.1",
@@ -1,37 +1,140 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import styled from 'styled-components';
4
4
 
5
+
6
+ import { BsGear } from "react-icons/bs";
5
7
  import List from '../Reusable Components/ReusableList/ReusableList';
6
8
  import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
9
+ import ChatPreview from '../PreviewComponents/ChatPreview/ChatPreview';
10
+ import Modal from '../Reusable Components/ReactModal/ReactModal';
11
+ import Community from '../Reusable Components/Community/Community';
12
+
13
+
14
+ import Tabs from '../Reusable Components/Tabs/Tabs';
15
+ import Sections from '../Sections/Sections'
16
+
17
+
18
+ const listControls = [
19
+ { icon: (<BsGear />), action: 'config', name: 'Config' },
20
+ ]
7
21
 
8
22
  const Chat = ({
9
23
  data,
10
24
  users,
11
25
  title,
12
26
  backgroundColor,
27
+ community,
13
28
  ...props }) => {
14
29
 
30
+ const [showConfigModal, setShowConfigModal] = useState(false);
31
+ const [centerContext, setCenterContext] = useState(<Chat preview={true} users={users} data={data}/>)
32
+
33
+ const formChanged = (values) => {
34
+ setCenterContext(<Chat preview={true} users={users} data={data} {...values} />)
35
+ }
36
+
37
+ let tabs = [
38
+ {
39
+ title: 'New', id: 'preview'
40
+ },
41
+ {
42
+ title: 'Context', id: 'community'
43
+ }
44
+ ]
45
+
46
+ // let sections = [
47
+ // {
48
+ // title: 'Styles',
49
+ // data: [
50
+ // {
51
+ // title: 'Styling',
52
+ // id: 'styling'
53
+ // }
54
+ // ]
55
+ // }
56
+ // ]
57
+
58
+ const onIconClicked = (action) => {
59
+ if (!props.preview) {
60
+ switch (action) {
61
+ case 'config':
62
+ setShowConfigModal(true)
63
+ break;
64
+ default:
65
+ break;
66
+ }
67
+ }
68
+ }
69
+
70
+ const cancelConfig = () => {
71
+ setShowConfigModal(false);
72
+ localStorage.removeItem('formStyles')
73
+ }
74
+
15
75
  return (
16
- <Container
17
- backgroundColor={backgroundColor}>
76
+ <Container
77
+ backgroundColor={backgroundColor}>
18
78
  <List
19
79
  listTitle={title || 'Chat'}
20
80
  type="flat"
21
81
  data={data}
22
82
  cardStyle="card-style-8"
83
+ iconClicked={onIconClicked}
84
+ listControls={listControls}
23
85
  {...props}
24
86
  />
25
87
  <RichTextInput
26
88
  users={users}
27
89
  />
90
+ <Modal
91
+ modalIsOpen={showConfigModal}
92
+ closeModal={cancelConfig}
93
+ exitModalButton={(e) => (
94
+ <div></div>
95
+ )} preview={true}
96
+ >
97
+ {/* <Sections
98
+ sections={sections}
99
+ backgroundColor={'white'}
100
+ sectionHeaderStyles={{
101
+ titleColor: 'white',
102
+ headerBackground: 'transparent'
103
+ }}
104
+ customCardStyles={{
105
+ cardPadding: 6,
106
+ cardTitleFontSize: 15,
107
+ cardBackgroundColor: '#2c2c2c',
108
+ cardTitleColor: 'white',
109
+ onHoverBackgroundColor: '#555555',
110
+ controlsStyles: {
111
+ showOnHover: true,
112
+ }
113
+ }}> */}
114
+ <Tabs
115
+ title="Chat Config"
116
+ tabs={tabs}
117
+ id='styling'
118
+ >
119
+ <ChatPreview
120
+ componentProps={{ data, users, title: props.title || "Chat", preview: true }}
121
+ formChanged={formChanged}
122
+ id="preview"
123
+ />
124
+ <Community
125
+ center={centerContext}
126
+ community={community}
127
+ id="community" />
128
+ </Tabs>
129
+ {/* </Sections> */}
130
+ </Modal>
28
131
  </Container>
29
132
  )
30
133
  }
31
134
 
32
135
  const Container = styled.div`
33
136
  width: 100%;
34
- background-color: ${({backgroundColor}) => backgroundColor || 'transparent'};
137
+ background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
35
138
  `
36
139
 
37
140
  Chat.defaultProps = {
@@ -41,9 +144,11 @@ Chat.defaultProps = {
41
144
  Chat.propTypes = {
42
145
  data: PropTypes.array.isRequired,
43
146
  title: PropTypes.string,
147
+ users: PropTypes.array,
44
148
  backgroundColor: PropTypes.string,
45
149
  customCardStyles: PropTypes.object,
46
- headerStyles: PropTypes.object
150
+ headerStyles: PropTypes.object,
151
+ preview: PropTypes.bool
47
152
  }
48
153
 
49
154
  export default Chat
@@ -0,0 +1,47 @@
1
+ import React, {useState} from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import styled from 'styled-components';
4
+ import { useField } from 'formik';
5
+
6
+ import { ChromePicker } from 'react-color';
7
+
8
+
9
+
10
+ const Picker = (props) => {
11
+ const [field, meta, helpers] = useField(props);
12
+
13
+ {
14
+ return (
15
+ <Container>
16
+ <Label htmlFor={props.name} {...props}>{props.label}</Label>
17
+ <ChromePicker
18
+ name={props.name}
19
+ color={field.value}
20
+ onChange={(color) => helpers.setValue(color.hex)}
21
+ onChangeComplete={(color) => helpers.setValue(color.hex)}
22
+ />
23
+ </Container>
24
+ );
25
+ }
26
+ };
27
+
28
+ const Container = styled.div`
29
+ display: flex;
30
+ flex-direction: column;
31
+ font-family: sans-serif;
32
+ `
33
+
34
+ const Label = styled.label`
35
+ margin-bottom: 5px;
36
+ text-transform: capitalize;
37
+ color: ${props => props.labelColor};
38
+ font-size: ${props => props.labelFontSize}px;
39
+ `
40
+
41
+ Picker.defaultProps = {};
42
+
43
+ Picker.propTypes = {
44
+ name: PropTypes.string
45
+ }
46
+
47
+ export default Picker;
@@ -10,7 +10,7 @@ const TextField = (props) => {
10
10
  return (
11
11
  <TextFieldWrapper>
12
12
  <Label htmlFor={field.name} {...props}>{props.label}</Label>
13
- <Input {...field} {...props} />
13
+ <Input type={props.type || 'text'} {...field} {...props} />
14
14
  {(meta.error && meta.touched) && <Error>{meta.error}</Error>}
15
15
  </TextFieldWrapper>
16
16
  )
@@ -0,0 +1,109 @@
1
+ import React, { useState, useEffect, useCallback } from 'react';
2
+ import styled from 'styled-components';
3
+ import { useDispatch, useSelector } from 'react-redux';
4
+ import { addEvent, deleteEvent } from '../store/store';
5
+
6
+ import Navbar from '../Navbar/Navbar'
7
+ import Body from '../Layout/Body/Body'
8
+ import Left from '../Layout/Left/Left'
9
+ import Center from '../Layout/Center/Center'
10
+ import Right from '../Layout/Right/Right'
11
+ import BaseMaterial from '../Containers/BaseMaterial';
12
+ import WidgetContainer from "../Reusable Components/WidgetContainer/WidgetContainer";
13
+
14
+ import Chat from '../Chat/Chat';
15
+ import Event from '../Events/Event/Event';
16
+ import EventsList from '../Events/EventsList/EventsList';
17
+ import Folders from '../Library/Folders/Folders';
18
+ import Notes from '../Library/Notes/Notes';
19
+ import MusicAlbum from '../Music Album/ViewAlbum/ViewAlbum';
20
+ import MusicAlbums from '../Music Album/ViewAlbums/ViewAlbums';
21
+ import PhotoAlbum from '../Photo Album/ViewAlbum/ViewAlbum';
22
+ import PhotoAlbums from '../Photo Album/ViewAlbums/ViewAlbums';
23
+ import VideoAlbums from '../VideoAlbum/AlbumsGallery/AlbumsGallery';
24
+ import VideoAlbum from '../VideoAlbum/ViewAlbum/ViewAlbum';
25
+ import VideoSpace from '../VideoAlbum/VideoSpace/VideoSpace';
26
+
27
+ const Community = (props) => {
28
+ const [spaceType, setSpaceType] = useState('chat');
29
+ const community = useSelector(state => state.communities)
30
+ const space = useSelector(state => {
31
+ return state.communities.spaces.find(x => x.spaceType === spaceType)
32
+ })
33
+ const spacesWidget = useSelector(state => state.communities.spacesListWidget.widgetSpacesList)
34
+ const dispatch = useDispatch();
35
+
36
+ const onAddEvent = (event) => {
37
+ dispatch(addEvent(event))
38
+ }
39
+
40
+ console.log(community)
41
+
42
+ const eventIconClicked = (action, index) => {
43
+ switch (action) {
44
+ case 'delete':
45
+ dispatch(deleteEvent(index))
46
+ break;
47
+
48
+ default:
49
+ break;
50
+ }
51
+ }
52
+
53
+ const switchSpace = (index, props) => {
54
+ setSpaceType(props.id)
55
+ }
56
+
57
+
58
+ return (
59
+ <BaseMaterial {...community.styles}>
60
+ <Navbar {...community.navbarStyles} />
61
+ <Body>
62
+ <Left>
63
+ <WidgetContainer
64
+ widgetType='spaces-list'
65
+ widgetProps={{
66
+ listTitle: spacesWidget.listTitle,
67
+ spaces: spacesWidget.spaces,
68
+ cardClicked: switchSpace,
69
+ ...spacesWidget.styles
70
+ }}
71
+ />
72
+ </Left>
73
+ <Center>
74
+ {
75
+ {
76
+ 'chat': <Chat community={community} {...space.spaceProps} {...space.styles} />,
77
+ 'event': <Event community={community} {...space.spaceProps} {...space.styles} />,
78
+ 'events_list': <EventsList community={community} cardIconClicked={eventIconClicked} onAddEvent={onAddEvent} {...space.spaceProps} {...space.styles} />,
79
+ 'folders': <Folders community={community} {...space.spaceProps} {...space.styles} />,
80
+ 'notes': <Notes community={community} {...space.spaceProps} {...space.styles} />,
81
+ 'music_album': <MusicAlbum community={community} {...space.spaceProps} {...space.styles} />,
82
+ 'music_albums': <MusicAlbums community={community} {...space.spaceProps} {...space.styles} />,
83
+ 'photo_album': <PhotoAlbum community={community} {...space.spaceProps} {...space.styles}/>,
84
+ 'photo_albums': <PhotoAlbums community={community} {...space.spaceProps} {...space.styles}/>,
85
+ 'video_albums': <VideoAlbums community={community} {...space.spaceProps} {...space.styles}/>,
86
+ 'video_album': <VideoAlbum community={community} {...space.spaceProps} {...space.styles}/>,
87
+ 'video_space': <VideoSpace community={community} {...space.spaceProps} {...space.styles}/>
88
+
89
+ }[spaceType]
90
+ }
91
+ </Center>
92
+ <Right>{
93
+ space.widgets && space.widgets.map(widget => (
94
+ <WidgetContainer
95
+ widgetType={widget.widgetType}
96
+ widgetProps={{
97
+ ...widget.widgetProps,
98
+ ...widget.styles
99
+ }}
100
+ />
101
+ ))
102
+ }</Right>
103
+ </Body>
104
+ </BaseMaterial>
105
+ );
106
+ };
107
+
108
+
109
+ export default Community;
@@ -1,9 +1,22 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import styled from 'styled-components';
4
4
 
5
+ import { BsGear } from "react-icons/bs";
5
6
  import ReusableHeader from '../../Reusable Components/ReusableHeader/ReusableHeader';
7
+ import Modal from '../../Reusable Components/ReactModal/ReactModal';
8
+ import EventPreview from '../../PreviewComponents/EventPreview/EventPreview';
6
9
 
10
+ import Tabs from '../../Reusable Components/Tabs/Tabs';
11
+ import Sections from '../../Sections/Sections';
12
+ import WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetContainer";
13
+ import Community from '../../Reusable Components/Community/Community';
14
+ // import styles from '../../styling.json'
15
+
16
+
17
+ const listControls = [
18
+ { icon: (<BsGear />), action: 'config', name: 'Config' },
19
+ ]
7
20
  const Event = ({
8
21
  cover,
9
22
  title,
@@ -16,13 +29,62 @@ const Event = ({
16
29
  dateSize,
17
30
  discColor,
18
31
  discSize,
19
- headerStyles
32
+ headerStyles,
33
+ community,
34
+ ...props
20
35
  }) => {
36
+ const [showConfigModal, setShowConfigModal] = useState(false);
37
+ const [centerContext, setCenterContext] = useState(<Event preview={true} title={title} cover={cover} date={date} disc={disc}/>)
38
+
39
+ const formChanged = (values) => {
40
+ setCenterContext(<Event preview={true} title={title} cover={cover} date={date} disc={disc} {...values} />)
41
+ }
42
+
43
+ let tabs = [
44
+ {
45
+ title: 'New', id: 'preview'
46
+ },
47
+ {
48
+ title: 'Context', id: 'community'
49
+ }
50
+ ]
51
+
52
+ let sections = [
53
+ {
54
+ title: 'Styles',
55
+ data: [
56
+ {
57
+ title: 'Styling',
58
+ id: 'styling'
59
+ }
60
+ ]
61
+ }
62
+ ]
63
+
64
+ const onIconClicked = (action) => {
65
+ if (!props.preview) {
66
+ switch (action) {
67
+ case 'config':
68
+ setShowConfigModal(true)
69
+ break;
70
+ default:
71
+ break;
72
+ }
73
+ }
74
+ }
75
+
76
+ const cancelConfig = () => {
77
+ setShowConfigModal(false);
78
+ localStorage.removeItem('formStyles')
79
+ }
80
+
21
81
  return (
22
82
  <Container
23
83
  backgroundColor={backgroundColor}>
24
84
  <ReusableHeader
25
85
  title={title}
86
+ controls={listControls}
87
+ iconClicked={onIconClicked}
26
88
  {...headerStyles}
27
89
  />
28
90
  <CoverWrapper>
@@ -40,6 +102,45 @@ const Event = ({
40
102
  {disc}
41
103
  </Disc>
42
104
  </Details>
105
+ <Modal
106
+ modalIsOpen={showConfigModal}
107
+ closeModal={cancelConfig}
108
+ exitModalButton={(e) => (
109
+ <div></div>
110
+ )}
111
+ >
112
+ {/* <Sections
113
+ sections={sections}
114
+ backgroundColor={'white'}
115
+ sectionHeaderStyles={{
116
+ titleColor: 'white',
117
+ headerBackground: 'transparent'
118
+ }}
119
+ customCardStyles={{
120
+ cardPadding: 6,
121
+ cardTitleFontSize: 15,
122
+ cardBackgroundColor: '#2c2c2c',
123
+ cardTitleColor: 'white',
124
+ onHoverBackgroundColor: '#555555',
125
+ controlsStyles: {
126
+ showOnHover: true,
127
+ }
128
+ }} /> */}
129
+ <Tabs
130
+ title="Event Config"
131
+ tabs={tabs}
132
+ >
133
+ <EventPreview
134
+ componentProps={{ cover, title, date, disc, preview: true }}
135
+ formChanged={formChanged}
136
+ id='preview'
137
+ />
138
+ <Community
139
+ center={centerContext}
140
+ community={community} preview={true}
141
+ id="community" />
142
+ </Tabs>
143
+ </Modal>
43
144
  </Container>
44
145
  )
45
146
  }
@@ -101,10 +202,10 @@ Event.propTypes = {
101
202
  titleSize: PropTypes.number,
102
203
  dateColor: PropTypes.string,
103
204
  dateSize: PropTypes.number,
104
- headerBackground: PropTypes.string,
105
- headerTitleColor: PropTypes.string,
106
205
  discColor: PropTypes.string,
107
206
  discSize: PropTypes.number,
207
+ headerStyles: PropTypes.object,
208
+ peview: PropTypes.bool
108
209
  }
109
210
 
110
211
  export default Event