@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.
- package/dist/stories/Chat/Chat.js +114 -4
- package/dist/stories/Common Inputs/Picker/Picker.js +61 -0
- package/dist/stories/Common Inputs/TextField/TextField.js +3 -1
- package/dist/stories/Community/Community.js +159 -0
- package/dist/stories/Events/Event/Event.js +123 -4
- package/dist/stories/Events/EventsList/EventsList.js +98 -16
- package/dist/stories/Forms/CreateSpace/CreateSpace.js +75 -0
- package/dist/stories/Library/Folders/Folders.js +94 -9
- package/dist/stories/Library/Notes/Notes.js +94 -9
- package/dist/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.js +54 -0
- package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +98 -10
- package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +96 -34
- package/dist/stories/Navbar/Navbar.js +1 -1
- package/dist/stories/Pages/Events/Event/Event.js +14 -5
- package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +2 -15
- package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +94 -17
- package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +88 -10
- package/dist/stories/Preview/Preview.js +1 -0
- package/dist/stories/PreviewComponents/ChatPreview/ChatPreview.js +193 -0
- package/dist/stories/PreviewComponents/EventPreview/EventPreview.js +158 -0
- package/dist/stories/PreviewComponents/EventsPreview/EventsPreview.js +192 -0
- package/dist/stories/PreviewComponents/FoldersPreview/FoldersPreview.js +182 -0
- package/dist/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.js +177 -0
- package/dist/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.js +181 -0
- package/dist/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.js +153 -0
- package/dist/stories/PreviewComponents/NavbarPreview/NavbarPreview.js +112 -0
- package/dist/stories/PreviewComponents/NotesPreview/NotesPreview.js +173 -0
- package/dist/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.js +189 -0
- package/dist/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.js +189 -0
- package/dist/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.js +197 -0
- package/dist/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.js +189 -0
- package/dist/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.js +175 -0
- package/dist/stories/PreviewComponents/VideoPreview/VideoPreview.js +172 -0
- package/dist/stories/PreviewComponents/globalStyles.js +26 -0
- package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +4 -3
- package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js +8 -4
- package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.js +10 -4
- package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.js +4 -2
- package/dist/stories/Reusable Components/Cards/globalCardStyles.js +2 -2
- package/dist/stories/Reusable Components/Community/Community.js +53 -0
- package/dist/stories/Reusable Components/Gallery/Gallery.js +12 -17
- package/dist/stories/Reusable Components/ReactModal/ReactModal.js +11 -30
- package/dist/stories/Reusable Components/ReusableForm/ReusableForm.js +19 -2
- package/dist/stories/Reusable Components/ReusableList/ReusableList.js +9 -5
- package/dist/stories/Reusable Components/Tabs/Tabs.js +68 -0
- package/dist/stories/Sections/Sections.js +8 -2
- package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js +85 -19
- package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js +108 -4
- package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js +84 -9
- package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js +16 -10
- package/dist/stories/Widgets/SpacesListWidget/SpacesListWidget.js +115 -0
- package/dist/stories/Widgets/UsersWidget/UsersWidget.js +30 -0
- package/dist/stories/helpers/util.js +36 -3
- package/dist/stories/store/communities.js +941 -0
- package/dist/stories/store/store.js +44 -0
- package/package.json +5 -2
- package/src/stories/Chat/Chat.jsx +110 -5
- package/src/stories/Common Inputs/Picker/Picker.jsx +47 -0
- package/src/stories/Common Inputs/TextField/TextField.jsx +1 -1
- package/src/stories/Community/Community.jsx +109 -0
- package/src/stories/Events/Event/Event.jsx +105 -4
- package/src/stories/Events/EventsList/EventsList.jsx +98 -17
- package/src/stories/Forms/CreateSpace/CreateSpace.jsx +73 -0
- package/src/stories/Library/Folders/Folders.jsx +94 -7
- package/src/stories/Library/Notes/Notes.jsx +73 -7
- package/src/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.jsx +31 -0
- package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +81 -11
- package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +78 -34
- package/src/stories/Navbar/Navbar.jsx +1 -1
- package/src/stories/Pages/Events/Event/Event.jsx +12 -4
- package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +0 -13
- package/src/stories/Pages/ViewWorld/styles.json +1 -1
- package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +68 -6
- package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +69 -9
- package/src/stories/Preview/Preview.jsx +9 -1
- package/src/stories/PreviewComponents/ChatPreview/ChatPreview.jsx +132 -0
- package/src/stories/PreviewComponents/EventPreview/EventPreview.jsx +116 -0
- package/src/stories/PreviewComponents/EventsPreview/EventsPreview.jsx +132 -0
- package/src/stories/PreviewComponents/FoldersPreview/FoldersPreview.jsx +127 -0
- package/src/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.jsx +124 -0
- package/src/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.jsx +126 -0
- package/src/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.jsx +113 -0
- package/src/stories/PreviewComponents/NavbarPreview/NavbarPreview.jsx +93 -0
- package/src/stories/PreviewComponents/NotesPreview/NotesPreview.jsx +122 -0
- package/src/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.jsx +129 -0
- package/src/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.jsx +129 -0
- package/src/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.jsx +138 -0
- package/src/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.jsx +129 -0
- package/src/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.jsx +124 -0
- package/src/stories/PreviewComponents/VideoPreview/VideoPreview.jsx +125 -0
- package/src/stories/PreviewComponents/globalStyles.js +20 -0
- package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +5 -2
- package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx +5 -5
- package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.jsx +12 -6
- package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.jsx +2 -2
- package/src/stories/Reusable Components/Cards/globalCardStyles.js +2 -1
- package/src/stories/Reusable Components/Community/Community.jsx +47 -0
- package/src/stories/Reusable Components/Gallery/Gallery.jsx +10 -9
- package/src/stories/Reusable Components/ReactModal/ReactModal.jsx +3 -25
- package/src/stories/Reusable Components/ReusableForm/ReusableForm.jsx +18 -6
- package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +9 -4
- package/src/stories/Reusable Components/Tabs/Tabs.jsx +67 -0
- package/src/stories/Sections/Sections.jsx +5 -2
- package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx +64 -16
- package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx +77 -1
- package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx +64 -9
- package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.jsx +13 -6
- package/src/stories/Widgets/SpacesListWidget/SpacesListWidget.jsx +78 -0
- package/src/stories/Widgets/UsersWidget/UsersWidget.jsx +20 -0
- package/src/stories/helpers/util.js +24 -2
- package/src/stories/store/communities.js +703 -0
- package/src/stories/store/store.js +33 -0
- 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.
|
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.
|
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
|
-
|
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
|