@selfcommunity/react-theme-default 0.2.1-alpha.4 → 0.3.0-alpha.1
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/lib/cjs/components/SCEventForm.d.ts +8 -0
- package/lib/cjs/components/SCEventForm.js +8 -0
- package/lib/cjs/components/SCEventFormDialog.d.ts +13 -0
- package/lib/cjs/components/SCEventFormDialog.js +15 -0
- package/lib/cjs/components/SCEventMediaWidget.d.ts +120 -0
- package/lib/cjs/components/SCEventMediaWidget.js +115 -0
- package/lib/cjs/index.d.ts +142 -3
- package/lib/cjs/index.js +5 -1
- package/lib/esm/components/SCEventForm.d.ts +8 -0
- package/lib/esm/components/SCEventForm.js +8 -0
- package/lib/esm/components/SCEventFormDialog.d.ts +13 -0
- package/lib/esm/components/SCEventFormDialog.js +13 -0
- package/lib/esm/components/SCEventMediaWidget.d.ts +120 -0
- package/lib/esm/components/SCEventMediaWidget.js +113 -0
- package/lib/esm/index.d.ts +142 -3
- package/lib/esm/index.js +5 -1
- package/lib/umd/react-theme-default.js +2 -2
- package/package.json +4 -4
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
declare const Component: {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
root: ({ theme, showPadding }: {
|
|
4
|
+
theme: any;
|
|
5
|
+
showPadding: any;
|
|
6
|
+
}) => {
|
|
7
|
+
'& .SCEventMediaWidget-header': {
|
|
8
|
+
padding: any;
|
|
9
|
+
};
|
|
10
|
+
'& .SCEventMediaWidget-content': {
|
|
11
|
+
padding: any;
|
|
12
|
+
'& .SCEventMediaWidget-grid': {
|
|
13
|
+
display: string;
|
|
14
|
+
gap: string;
|
|
15
|
+
gridTemplateColumns: string;
|
|
16
|
+
'& > .SCEventMediaWidget-media': {
|
|
17
|
+
position: string;
|
|
18
|
+
width: string;
|
|
19
|
+
paddingBottom: string;
|
|
20
|
+
backgroundSize: string;
|
|
21
|
+
cursor: string;
|
|
22
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
23
|
+
position: string;
|
|
24
|
+
inset: number;
|
|
25
|
+
backgroundColor: string;
|
|
26
|
+
opacity: number;
|
|
27
|
+
};
|
|
28
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
29
|
+
position: string;
|
|
30
|
+
top: string;
|
|
31
|
+
left: string;
|
|
32
|
+
transform: string;
|
|
33
|
+
color: any;
|
|
34
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
35
|
+
fontSize: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
'& .SCEventMediaWidget-actions': {
|
|
42
|
+
padding: any;
|
|
43
|
+
justifyContent: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
skeletonRoot: ({}: {}) => {
|
|
47
|
+
'& .SCEventMediaWidget-grid': {
|
|
48
|
+
display: string;
|
|
49
|
+
gap: string;
|
|
50
|
+
gridTemplateColumns: string;
|
|
51
|
+
'& > .SCEventMediaWidget-media': {
|
|
52
|
+
paddingBottom: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
dialogRoot: ({ theme }: {
|
|
57
|
+
theme: any;
|
|
58
|
+
}) => {
|
|
59
|
+
'& .SCEventMediaWidget-grid': {
|
|
60
|
+
display: string;
|
|
61
|
+
gap: string;
|
|
62
|
+
gridTemplateColumns: string;
|
|
63
|
+
'& > .SCEventMediaWidget-media': {
|
|
64
|
+
paddingBottom: string;
|
|
65
|
+
};
|
|
66
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
67
|
+
position: string;
|
|
68
|
+
width: string;
|
|
69
|
+
paddingBottom: string;
|
|
70
|
+
backgroundSize: string;
|
|
71
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
72
|
+
position: string;
|
|
73
|
+
top: number;
|
|
74
|
+
width: string;
|
|
75
|
+
height: string;
|
|
76
|
+
backgroundColor: any;
|
|
77
|
+
opacity: number;
|
|
78
|
+
flexDirection: string;
|
|
79
|
+
justifyContent: string;
|
|
80
|
+
alignItems: string;
|
|
81
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
82
|
+
padding: number;
|
|
83
|
+
minWidth: string;
|
|
84
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
85
|
+
color: any;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
triggerRoot: ({ isSquare }: {
|
|
93
|
+
isSquare: any;
|
|
94
|
+
}) => {
|
|
95
|
+
padding: 0;
|
|
96
|
+
borderRadius: 0;
|
|
97
|
+
backgroundColor: string;
|
|
98
|
+
'&:hover': {
|
|
99
|
+
backgroundColor: string;
|
|
100
|
+
};
|
|
101
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
102
|
+
position: string;
|
|
103
|
+
width: string;
|
|
104
|
+
padding: string;
|
|
105
|
+
paddingBottom: string;
|
|
106
|
+
flexDirection: string;
|
|
107
|
+
gap: string;
|
|
108
|
+
alignItems: string;
|
|
109
|
+
justifyContent: string;
|
|
110
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
111
|
+
position: string;
|
|
112
|
+
top: string;
|
|
113
|
+
transform: string;
|
|
114
|
+
fontSize: string;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
export default Component;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
const Component = {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
root: ({ theme, showPadding }) => ({
|
|
4
|
+
'& .SCEventMediaWidget-header': {
|
|
5
|
+
padding: showPadding ? theme.spacing('10px', 2) : theme.spacing(2)
|
|
6
|
+
},
|
|
7
|
+
'& .SCEventMediaWidget-content': {
|
|
8
|
+
padding: theme.spacing(2),
|
|
9
|
+
'& .SCEventMediaWidget-grid': {
|
|
10
|
+
display: 'grid',
|
|
11
|
+
gap: '5px',
|
|
12
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
13
|
+
'& > .SCEventMediaWidget-media': {
|
|
14
|
+
position: 'relative',
|
|
15
|
+
width: '100%',
|
|
16
|
+
paddingBottom: '100%',
|
|
17
|
+
backgroundSize: 'cover',
|
|
18
|
+
cursor: 'pointer',
|
|
19
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
inset: 0,
|
|
22
|
+
backgroundColor: 'rgba(102, 102, 102, 0.2)',
|
|
23
|
+
opacity: 0.8
|
|
24
|
+
},
|
|
25
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
top: '50%',
|
|
28
|
+
left: '50%',
|
|
29
|
+
transform: 'translate(-50%, -50%)',
|
|
30
|
+
color: theme.palette.common.white,
|
|
31
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
32
|
+
fontSize: '200%'
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
'& .SCEventMediaWidget-actions': {
|
|
39
|
+
padding: theme.spacing(0, 2, '10px'),
|
|
40
|
+
justifyContent: 'center'
|
|
41
|
+
}
|
|
42
|
+
}),
|
|
43
|
+
skeletonRoot: ({}) => ({
|
|
44
|
+
'& .SCEventMediaWidget-grid': {
|
|
45
|
+
display: 'grid',
|
|
46
|
+
gap: '5px',
|
|
47
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
48
|
+
'& > .SCEventMediaWidget-media': {
|
|
49
|
+
paddingBottom: '100%'
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}),
|
|
53
|
+
dialogRoot: ({ theme }) => ({
|
|
54
|
+
'& .SCEventMediaWidget-grid': {
|
|
55
|
+
display: 'grid',
|
|
56
|
+
gap: '5px',
|
|
57
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
58
|
+
'& > .SCEventMediaWidget-media': {
|
|
59
|
+
paddingBottom: '100%'
|
|
60
|
+
},
|
|
61
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
62
|
+
position: 'relative',
|
|
63
|
+
width: '100%',
|
|
64
|
+
paddingBottom: '100%',
|
|
65
|
+
backgroundSize: 'cover',
|
|
66
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
67
|
+
position: 'absolute',
|
|
68
|
+
top: 0,
|
|
69
|
+
width: '100%',
|
|
70
|
+
height: '30px',
|
|
71
|
+
backgroundColor: theme.palette.common.black,
|
|
72
|
+
opacity: 0.6,
|
|
73
|
+
flexDirection: 'row',
|
|
74
|
+
justifyContent: 'flex-end',
|
|
75
|
+
alignItems: 'center',
|
|
76
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
77
|
+
padding: 0,
|
|
78
|
+
minWidth: '50px',
|
|
79
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
80
|
+
color: theme.palette.common.white
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}),
|
|
87
|
+
triggerRoot: ({ isSquare }) => ({
|
|
88
|
+
padding: isSquare && 0,
|
|
89
|
+
borderRadius: isSquare && 0,
|
|
90
|
+
backgroundColor: isSquare && 'rgba(112, 112, 112, 0.04)',
|
|
91
|
+
'&:hover': {
|
|
92
|
+
backgroundColor: isSquare && 'rgba(0, 0, 0, 0.04)'
|
|
93
|
+
},
|
|
94
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
95
|
+
position: isSquare && 'relative',
|
|
96
|
+
width: isSquare && '100%',
|
|
97
|
+
padding: isSquare && '10px 60px',
|
|
98
|
+
paddingBottom: isSquare && '100%',
|
|
99
|
+
flexDirection: 'row',
|
|
100
|
+
gap: '5px',
|
|
101
|
+
alignItems: 'center',
|
|
102
|
+
justifyContent: isSquare ? 'center' : 'flex-end',
|
|
103
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
104
|
+
position: isSquare && 'absolute',
|
|
105
|
+
top: isSquare && '50%',
|
|
106
|
+
transform: isSquare && 'translateY(-50%)',
|
|
107
|
+
fontSize: 'inherit'
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
})
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
export default Component;
|
package/lib/esm/index.d.ts
CHANGED
|
@@ -4905,9 +4905,6 @@ declare const theme: {
|
|
|
4905
4905
|
width: string;
|
|
4906
4906
|
'& .SCNotification-username': {
|
|
4907
4907
|
fontWeight: number;
|
|
4908
|
-
/**
|
|
4909
|
-
* Export default theme
|
|
4910
|
-
*/
|
|
4911
4908
|
'&:hover': {
|
|
4912
4909
|
textDecoration: string;
|
|
4913
4910
|
};
|
|
@@ -5352,6 +5349,9 @@ declare const theme: {
|
|
|
5352
5349
|
border: string;
|
|
5353
5350
|
objectFit: string;
|
|
5354
5351
|
};
|
|
5352
|
+
/**
|
|
5353
|
+
* Export default theme
|
|
5354
|
+
*/
|
|
5355
5355
|
'& .MuiBadge-badge': {
|
|
5356
5356
|
right: any;
|
|
5357
5357
|
top: any;
|
|
@@ -6881,6 +6881,14 @@ declare const theme: {
|
|
|
6881
6881
|
'& .SCEventForm-active': {
|
|
6882
6882
|
color: any;
|
|
6883
6883
|
};
|
|
6884
|
+
'& .SCEventForm-actions': {
|
|
6885
|
+
marginTop: any;
|
|
6886
|
+
display: string;
|
|
6887
|
+
justifyContent: string;
|
|
6888
|
+
'& button': {
|
|
6889
|
+
width: string;
|
|
6890
|
+
};
|
|
6891
|
+
};
|
|
6884
6892
|
'& .SCEventForm-privacy-section': {
|
|
6885
6893
|
marginTop: any;
|
|
6886
6894
|
justifyContent: string;
|
|
@@ -6921,6 +6929,18 @@ declare const theme: {
|
|
|
6921
6929
|
};
|
|
6922
6930
|
};
|
|
6923
6931
|
};
|
|
6932
|
+
SCEventFormDialog: {
|
|
6933
|
+
styleOverrides: {
|
|
6934
|
+
root: ({ theme }: any) => {
|
|
6935
|
+
'& .MuiDialogTitle-root': {
|
|
6936
|
+
'& span': {
|
|
6937
|
+
flexGrow: number;
|
|
6938
|
+
textAlign: string;
|
|
6939
|
+
};
|
|
6940
|
+
};
|
|
6941
|
+
};
|
|
6942
|
+
};
|
|
6943
|
+
};
|
|
6924
6944
|
SCCreateEventButton: {
|
|
6925
6945
|
styleOverrides: {
|
|
6926
6946
|
root: ({ theme }: any) => {
|
|
@@ -8206,6 +8226,125 @@ declare const theme: {
|
|
|
8206
8226
|
};
|
|
8207
8227
|
};
|
|
8208
8228
|
};
|
|
8229
|
+
SCEventMediaWidget: {
|
|
8230
|
+
styleOverrides: {
|
|
8231
|
+
root: ({ theme, showPadding }: {
|
|
8232
|
+
theme: any;
|
|
8233
|
+
showPadding: any;
|
|
8234
|
+
}) => {
|
|
8235
|
+
'& .SCEventMediaWidget-header': {
|
|
8236
|
+
padding: any;
|
|
8237
|
+
};
|
|
8238
|
+
'& .SCEventMediaWidget-content': {
|
|
8239
|
+
padding: any;
|
|
8240
|
+
'& .SCEventMediaWidget-grid': {
|
|
8241
|
+
display: string;
|
|
8242
|
+
gap: string;
|
|
8243
|
+
gridTemplateColumns: string;
|
|
8244
|
+
'& > .SCEventMediaWidget-media': {
|
|
8245
|
+
position: string;
|
|
8246
|
+
width: string;
|
|
8247
|
+
paddingBottom: string;
|
|
8248
|
+
backgroundSize: string;
|
|
8249
|
+
cursor: string;
|
|
8250
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
8251
|
+
position: string;
|
|
8252
|
+
inset: number;
|
|
8253
|
+
backgroundColor: string;
|
|
8254
|
+
opacity: number;
|
|
8255
|
+
};
|
|
8256
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
8257
|
+
position: string;
|
|
8258
|
+
top: string;
|
|
8259
|
+
left: string;
|
|
8260
|
+
transform: string;
|
|
8261
|
+
color: any;
|
|
8262
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
8263
|
+
fontSize: string;
|
|
8264
|
+
};
|
|
8265
|
+
};
|
|
8266
|
+
};
|
|
8267
|
+
};
|
|
8268
|
+
};
|
|
8269
|
+
'& .SCEventMediaWidget-actions': {
|
|
8270
|
+
padding: any;
|
|
8271
|
+
justifyContent: string;
|
|
8272
|
+
};
|
|
8273
|
+
};
|
|
8274
|
+
skeletonRoot: ({}: {}) => {
|
|
8275
|
+
'& .SCEventMediaWidget-grid': {
|
|
8276
|
+
display: string;
|
|
8277
|
+
gap: string;
|
|
8278
|
+
gridTemplateColumns: string;
|
|
8279
|
+
'& > .SCEventMediaWidget-media': {
|
|
8280
|
+
paddingBottom: string;
|
|
8281
|
+
};
|
|
8282
|
+
};
|
|
8283
|
+
};
|
|
8284
|
+
dialogRoot: ({ theme }: {
|
|
8285
|
+
theme: any;
|
|
8286
|
+
}) => {
|
|
8287
|
+
'& .SCEventMediaWidget-grid': {
|
|
8288
|
+
display: string;
|
|
8289
|
+
gap: string;
|
|
8290
|
+
gridTemplateColumns: string;
|
|
8291
|
+
'& > .SCEventMediaWidget-media': {
|
|
8292
|
+
paddingBottom: string;
|
|
8293
|
+
};
|
|
8294
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
8295
|
+
position: string;
|
|
8296
|
+
width: string;
|
|
8297
|
+
paddingBottom: string;
|
|
8298
|
+
backgroundSize: string;
|
|
8299
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
8300
|
+
position: string;
|
|
8301
|
+
top: number;
|
|
8302
|
+
width: string;
|
|
8303
|
+
height: string;
|
|
8304
|
+
backgroundColor: any;
|
|
8305
|
+
opacity: number;
|
|
8306
|
+
flexDirection: string;
|
|
8307
|
+
justifyContent: string;
|
|
8308
|
+
alignItems: string;
|
|
8309
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
8310
|
+
padding: number;
|
|
8311
|
+
minWidth: string;
|
|
8312
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
8313
|
+
color: any;
|
|
8314
|
+
};
|
|
8315
|
+
};
|
|
8316
|
+
};
|
|
8317
|
+
};
|
|
8318
|
+
};
|
|
8319
|
+
};
|
|
8320
|
+
triggerRoot: ({ isSquare }: {
|
|
8321
|
+
isSquare: any;
|
|
8322
|
+
}) => {
|
|
8323
|
+
padding: 0;
|
|
8324
|
+
borderRadius: 0;
|
|
8325
|
+
backgroundColor: string;
|
|
8326
|
+
'&:hover': {
|
|
8327
|
+
backgroundColor: string;
|
|
8328
|
+
};
|
|
8329
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
8330
|
+
position: string;
|
|
8331
|
+
width: string;
|
|
8332
|
+
padding: string;
|
|
8333
|
+
paddingBottom: string;
|
|
8334
|
+
flexDirection: string;
|
|
8335
|
+
gap: string;
|
|
8336
|
+
alignItems: string;
|
|
8337
|
+
justifyContent: string;
|
|
8338
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
8339
|
+
position: string;
|
|
8340
|
+
top: string;
|
|
8341
|
+
transform: string;
|
|
8342
|
+
fontSize: string;
|
|
8343
|
+
};
|
|
8344
|
+
};
|
|
8345
|
+
};
|
|
8346
|
+
};
|
|
8347
|
+
};
|
|
8209
8348
|
};
|
|
8210
8349
|
selfcommunity: {
|
|
8211
8350
|
user: {
|
package/lib/esm/index.js
CHANGED
|
@@ -64,11 +64,13 @@ import SCEmojiPicker from './components/SCEmojiPicker';
|
|
|
64
64
|
import SCEvent from './components/SCEvent';
|
|
65
65
|
import SCEventActionsMenu from './components/SCEventActionsMenu';
|
|
66
66
|
import SCEventForm from './components/SCEventForm';
|
|
67
|
+
import SCEventFormDialog from './components/SCEventFormDialog';
|
|
67
68
|
import SCEventHeader from './components/SCEventHeader';
|
|
68
69
|
import SCEventInfoDetails from './components/SCEventInfoDetails';
|
|
69
70
|
import SCEventInfoWidget from './components/SCEventInfoWidget';
|
|
70
71
|
import SCEventInviteButton from './components/SCEventInviteButton';
|
|
71
72
|
import SCEventLocationWidget from './components/SCEventLocationWidget';
|
|
73
|
+
import SCEventMediaWidget from './components/SCEventMediaWidget';
|
|
72
74
|
import SCEventMembersWidget from './components/SCEventMembersWidget';
|
|
73
75
|
import SCEventParticipantsButton from './components/SCEventParticipantsButton';
|
|
74
76
|
import SCEvents from './components/SCEvents';
|
|
@@ -365,6 +367,7 @@ const theme = {
|
|
|
365
367
|
SCUserSubscribedGroupsWidget,
|
|
366
368
|
SCUserSuggestionWidget,
|
|
367
369
|
SCEventForm,
|
|
370
|
+
SCEventFormDialog,
|
|
368
371
|
SCCreateEventButton,
|
|
369
372
|
SCEventLocationWidget,
|
|
370
373
|
SCEvent,
|
|
@@ -384,7 +387,8 @@ const theme = {
|
|
|
384
387
|
SCRelatedEventsWidget,
|
|
385
388
|
SCVoteAudienceButton,
|
|
386
389
|
SCVoteButton,
|
|
387
|
-
SCWidget
|
|
390
|
+
SCWidget,
|
|
391
|
+
SCEventMediaWidget
|
|
388
392
|
},
|
|
389
393
|
selfcommunity: {
|
|
390
394
|
user: {
|