@selfcommunity/react-theme-default 0.2.0-alpha.3 → 0.2.0-alpha.30

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 (54) hide show
  1. package/lib/cjs/components/MuiAppBar.js +4 -3
  2. package/lib/cjs/components/SCBottomNavigation.js +5 -4
  3. package/lib/cjs/components/SCEventForm.d.ts +5 -0
  4. package/lib/cjs/components/SCEventForm.js +6 -1
  5. package/lib/cjs/components/SCFeed.d.ts +9 -3
  6. package/lib/cjs/components/SCFeed.js +9 -3
  7. package/lib/cjs/components/SCFeedObject.d.ts +4 -0
  8. package/lib/cjs/components/SCFeedObject.js +4 -0
  9. package/lib/cjs/components/SCGroupActionsMenu.d.ts +26 -0
  10. package/lib/cjs/components/SCGroupActionsMenu.js +28 -0
  11. package/lib/cjs/components/SCGroupHeader.d.ts +5 -2
  12. package/lib/cjs/components/SCGroupHeader.js +5 -2
  13. package/lib/cjs/components/SCMediaLink.d.ts +47 -1
  14. package/lib/cjs/components/SCMediaLink.js +52 -2
  15. package/lib/cjs/components/SCNavigationMenuDrawer.d.ts +42 -0
  16. package/lib/cjs/components/SCNavigationMenuDrawer.js +45 -0
  17. package/lib/cjs/components/SCNavigationMenuIconButton.d.ts +0 -37
  18. package/lib/cjs/components/SCNavigationMenuIconButton.js +1 -39
  19. package/lib/cjs/components/SCNavigationToolbar.d.ts +3 -1
  20. package/lib/cjs/components/SCNavigationToolbar.js +68 -62
  21. package/lib/cjs/components/SCOnBoardingWidget.d.ts +17 -6
  22. package/lib/cjs/components/SCOnBoardingWidget.js +20 -8
  23. package/lib/cjs/components/SCSearchAutocomplete.d.ts +4 -0
  24. package/lib/cjs/components/SCSearchAutocomplete.js +29 -21
  25. package/lib/cjs/index.d.ts +129 -18
  26. package/lib/cjs/index.js +4 -0
  27. package/lib/esm/components/MuiAppBar.js +4 -3
  28. package/lib/esm/components/SCBottomNavigation.js +5 -4
  29. package/lib/esm/components/SCEventForm.d.ts +5 -0
  30. package/lib/esm/components/SCEventForm.js +6 -1
  31. package/lib/esm/components/SCFeed.d.ts +9 -3
  32. package/lib/esm/components/SCFeed.js +9 -3
  33. package/lib/esm/components/SCFeedObject.d.ts +4 -0
  34. package/lib/esm/components/SCFeedObject.js +4 -0
  35. package/lib/esm/components/SCGroupActionsMenu.d.ts +26 -0
  36. package/lib/esm/components/SCGroupActionsMenu.js +26 -0
  37. package/lib/esm/components/SCGroupHeader.d.ts +5 -2
  38. package/lib/esm/components/SCGroupHeader.js +5 -2
  39. package/lib/esm/components/SCMediaLink.d.ts +47 -1
  40. package/lib/esm/components/SCMediaLink.js +52 -2
  41. package/lib/esm/components/SCNavigationMenuDrawer.d.ts +42 -0
  42. package/lib/esm/components/SCNavigationMenuDrawer.js +43 -0
  43. package/lib/esm/components/SCNavigationMenuIconButton.d.ts +0 -37
  44. package/lib/esm/components/SCNavigationMenuIconButton.js +1 -39
  45. package/lib/esm/components/SCNavigationToolbar.d.ts +3 -1
  46. package/lib/esm/components/SCNavigationToolbar.js +68 -62
  47. package/lib/esm/components/SCOnBoardingWidget.d.ts +17 -6
  48. package/lib/esm/components/SCOnBoardingWidget.js +20 -8
  49. package/lib/esm/components/SCSearchAutocomplete.d.ts +4 -0
  50. package/lib/esm/components/SCSearchAutocomplete.js +29 -21
  51. package/lib/esm/index.d.ts +129 -18
  52. package/lib/esm/index.js +4 -0
  53. package/lib/umd/react-theme-default.js +2 -2
  54. package/package.json +4 -4
@@ -1,10 +1,11 @@
1
+ import { getContrastRatio } from '@mui/material/styles';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme }) => {
4
- var _a, _b;
5
+ var _a, _b, _c, _d;
5
6
  return ({
6
- color: theme.palette.text.primary,
7
- backgroundColor: (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main
7
+ color: getContrastRatio((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.text.primary,
8
+ backgroundColor: (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main
8
9
  });
9
10
  }
10
11
  }
@@ -1,12 +1,13 @@
1
+ import { getContrastRatio } from '@mui/material/styles';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme }) => {
4
- var _a, _b;
5
+ var _a, _b, _c, _d;
5
6
  return ({
6
7
  backgroundColor: (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main,
7
8
  '& .SCBottomNavigation-action': {
8
9
  fontSize: '1.57rem',
9
- color: theme.palette.primary.main,
10
+ color: getContrastRatio((_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main,
10
11
  borderTop: `1px solid transparent`,
11
12
  minWidth: 56,
12
13
  '&.Mui-selected, &:hover': {
@@ -17,8 +18,8 @@ const Component = {
17
18
  '&.Mui-selected, &:hover': {
18
19
  color: theme.palette.secondary.main,
19
20
  borderTop: '0 none'
20
- },
21
- },
21
+ }
22
+ }
22
23
  },
23
24
  '&.SCBottomNavigation-ios': {
24
25
  paddingBottom: '15px'
@@ -20,6 +20,10 @@ declare const Component: {
20
20
  '& .SCEventForm-form': {
21
21
  '& .SCEventForm-picker': {
22
22
  width: string;
23
+ '& .MuiFormHelperText-root': {
24
+ height: number;
25
+ marginTop: number;
26
+ };
23
27
  };
24
28
  '& .MuiTextField-root, .SCEventForm-frequency': {
25
29
  marginBottom: any;
@@ -85,6 +89,7 @@ declare const Component: {
85
89
  };
86
90
  };
87
91
  '& .SCEventForm-event-address-root': {
92
+ marginTop: any;
88
93
  backgroundColor: any;
89
94
  borderRadius: number;
90
95
  '& .SCEventForm-event-address-tabs': {
@@ -20,7 +20,11 @@ const Component = {
20
20
  },
21
21
  '& .SCEventForm-form': {
22
22
  '& .SCEventForm-picker': {
23
- width: '50%'
23
+ width: '50%',
24
+ '& .MuiFormHelperText-root': {
25
+ height: 0,
26
+ marginTop: 0
27
+ }
24
28
  },
25
29
  '& .MuiTextField-root, .SCEventForm-frequency': {
26
30
  marginBottom: theme.spacing(2)
@@ -86,6 +90,7 @@ const Component = {
86
90
  }
87
91
  },
88
92
  '& .SCEventForm-event-address-root': {
93
+ marginTop: theme.spacing(2),
89
94
  backgroundColor: theme.palette.grey['A200'],
90
95
  borderRadius: 5,
91
96
  '& .SCEventForm-event-address-tabs': {
@@ -32,6 +32,14 @@ declare const Component: {
32
32
  padding: number;
33
33
  marginBottom: any;
34
34
  };
35
+ '& .SCFeed-header-item': {
36
+ animation: string;
37
+ '@keyframes pulse-animation': {
38
+ '0%': {
39
+ opacity: number;
40
+ };
41
+ };
42
+ };
35
43
  };
36
44
  '& .SCFeed-end': {
37
45
  '& > .SCWidget-root': {
@@ -45,9 +53,7 @@ declare const Component: {
45
53
  padding: any;
46
54
  };
47
55
  };
48
- '& .SCFeed-refresh': {
49
- textAlign: string;
50
- };
56
+ '& .SCFeed-refresh': {};
51
57
  '& .SCFeed-pagination-link': {
52
58
  display: string;
53
59
  };
@@ -31,6 +31,14 @@ const Component = {
31
31
  '& > .SCWidget-root': {
32
32
  padding: 0,
33
33
  marginBottom: theme.spacing(2)
34
+ },
35
+ '& .SCFeed-header-item': {
36
+ animation: 'pulse-animation 2s ease-in-out',
37
+ '@keyframes pulse-animation': {
38
+ '0%': {
39
+ opacity: 0
40
+ }
41
+ }
34
42
  }
35
43
  },
36
44
  '& .SCFeed-end': {
@@ -45,9 +53,7 @@ const Component = {
45
53
  padding: theme.spacing(2)
46
54
  }
47
55
  },
48
- '& .SCFeed-refresh': {
49
- textAlign: 'center'
50
- },
56
+ '& .SCFeed-refresh': {},
51
57
  '& .SCFeed-pagination-link': {
52
58
  display: 'none'
53
59
  }
@@ -295,6 +295,10 @@ declare const Component: {
295
295
  '& li': {
296
296
  margin: string;
297
297
  };
298
+ '& span span': {
299
+ display: string;
300
+ width: string;
301
+ };
298
302
  };
299
303
  '& .SCFeedObject-medias-section': {
300
304
  '& .SCFeedObjectMediaPreview-root': {
@@ -295,6 +295,10 @@ const Component = {
295
295
  },
296
296
  '& li': {
297
297
  margin: '0 32px'
298
+ },
299
+ '& span span': {
300
+ display: 'inline-block',
301
+ width: '100%'
298
302
  }
299
303
  },
300
304
  '& .SCFeedObject-medias-section': {
@@ -0,0 +1,26 @@
1
+ declare const Component: {
2
+ styleOverrides: {
3
+ root: ({ theme }: any) => {};
4
+ menuRoot: ({ theme }: any) => {
5
+ '& .MuiDivider-root': {
6
+ margin: any;
7
+ };
8
+ '& .MuiIcon-root': {
9
+ fontSize: string;
10
+ };
11
+ };
12
+ drawerRoot: ({ theme }: any) => {
13
+ '& .SCGroupActionsMenu-item': {
14
+ paddingTop: number;
15
+ paddingBottom: number;
16
+ };
17
+ '& .MuiDivider-root': {
18
+ margin: any;
19
+ };
20
+ '& .MuiIcon-root': {
21
+ fontSize: string;
22
+ };
23
+ };
24
+ };
25
+ };
26
+ export default Component;
@@ -0,0 +1,26 @@
1
+ const Component = {
2
+ styleOverrides: {
3
+ root: ({ theme }) => ({}),
4
+ menuRoot: ({ theme }) => ({
5
+ '& .MuiDivider-root': {
6
+ margin: theme.spacing(1)
7
+ },
8
+ '& .MuiIcon-root': {
9
+ fontSize: '15px'
10
+ }
11
+ }),
12
+ drawerRoot: ({ theme }) => ({
13
+ '& .SCGroupActionsMenu-item': {
14
+ paddingTop: 0,
15
+ paddingBottom: 0
16
+ },
17
+ '& .MuiDivider-root': {
18
+ margin: theme.spacing(2)
19
+ },
20
+ '& .MuiIcon-root': {
21
+ fontSize: '15px'
22
+ }
23
+ })
24
+ }
25
+ };
26
+ export default Component;
@@ -40,10 +40,13 @@ declare const Component: {
40
40
  gap: any;
41
41
  };
42
42
  };
43
- '& .SCEditGroupButton-root': {
43
+ '& .SCGroupHeader-multi-actions': {
44
+ display: string;
44
45
  marginLeft: string;
45
46
  marginTop: any;
46
- marginRight: any;
47
+ '& .SCEditGroupButton-root': {
48
+ marginRight: any;
49
+ };
47
50
  };
48
51
  '& .SCGroupSubscribeButton-root': {
49
52
  marginTop: any;
@@ -40,10 +40,13 @@ const Component = {
40
40
  gap: theme.spacing(0.5)
41
41
  }
42
42
  },
43
- '& .SCEditGroupButton-root': {
43
+ '& .SCGroupHeader-multi-actions': {
44
+ display: 'flex',
44
45
  marginLeft: 'auto',
45
46
  marginTop: theme.spacing(-4.25),
46
- marginRight: theme.spacing(1)
47
+ '& .SCEditGroupButton-root': {
48
+ marginRight: theme.spacing(1)
49
+ }
47
50
  },
48
51
  '& .SCGroupSubscribeButton-root': {
49
52
  marginTop: theme.spacing(1)
@@ -11,6 +11,31 @@ declare const Component: {
11
11
  margin: string;
12
12
  height: number;
13
13
  };
14
+ '& .SCMediaLink-html-wrap': {
15
+ position: string;
16
+ marginLeft: any;
17
+ marginRight: any;
18
+ '& .SCMediaLink-html': {
19
+ width: string;
20
+ position: string;
21
+ top: number;
22
+ '& iframe': {
23
+ width: string;
24
+ margin: string;
25
+ };
26
+ };
27
+ '& .SCMediaLink-html-placeholder': {
28
+ width: string;
29
+ position: string;
30
+ top: number;
31
+ '& .SCMediaLink-html-loading': {
32
+ position: string;
33
+ display: string;
34
+ top: string;
35
+ left: string;
36
+ };
37
+ };
38
+ };
14
39
  '& .SCMediaLink-thumbnail': {
15
40
  [x: number]: {
16
41
  maxWidth: number;
@@ -51,12 +76,33 @@ declare const Component: {
51
76
  previewRoot: ({ theme }: any) => {
52
77
  '& .SCMediaLink-media': {
53
78
  position: string;
54
- margin: any;
79
+ '& .SCMediaLink-html-wrap': {
80
+ '& .SCMediaLink-html': {
81
+ width: string;
82
+ position: string;
83
+ '& iframe': {
84
+ width: string;
85
+ margin: string;
86
+ };
87
+ };
88
+ '& .SCMediaLink-html-placeholder': {
89
+ width: string;
90
+ position: string;
91
+ top: number;
92
+ '& .SCMediaLink-html-loading': {
93
+ position: string;
94
+ display: string;
95
+ top: string;
96
+ left: string;
97
+ };
98
+ };
99
+ };
55
100
  '& .SCMediaLink-delete': {
56
101
  background: any;
57
102
  position: string;
58
103
  right: any;
59
104
  top: any;
105
+ zIndex: number;
60
106
  };
61
107
  '&.SCMediaLink-media-video .SCMediaLink-delete': {
62
108
  background: any;
@@ -12,6 +12,33 @@ const Component = {
12
12
  margin: '10px 0px',
13
13
  height: 360
14
14
  },
15
+ '& .SCMediaLink-html-wrap': {
16
+ position: 'relative',
17
+ marginLeft: theme.spacing(),
18
+ marginRight: theme.spacing(),
19
+ '& .SCMediaLink-html': {
20
+ width: '100%',
21
+ position: 'absolute',
22
+ top: 0,
23
+ // zIndex: 2,
24
+ '& iframe': {
25
+ width: '100%',
26
+ margin: '0px auto'
27
+ }
28
+ },
29
+ '& .SCMediaLink-html-placeholder': {
30
+ width: '100%',
31
+ position: 'relative',
32
+ top: 0,
33
+ // zIndex: 1,
34
+ '& .SCMediaLink-html-loading': {
35
+ position: 'absolute',
36
+ display: 'none',
37
+ top: '38%',
38
+ left: '50%'
39
+ }
40
+ }
41
+ },
15
42
  '& .SCMediaLink-thumbnail': {
16
43
  border: `1px solid ${alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`,
17
44
  borderRadius: theme.shape.borderRadius * 0.75,
@@ -52,12 +79,35 @@ const Component = {
52
79
  previewRoot: ({ theme }) => ({
53
80
  '& .SCMediaLink-media': {
54
81
  position: 'relative',
55
- margin: theme.spacing(1),
82
+ '& .SCMediaLink-html-wrap': {
83
+ '& .SCMediaLink-html': {
84
+ width: '100%',
85
+ position: 'absolute',
86
+ // zIndex: 2,
87
+ '& iframe': {
88
+ width: '100%',
89
+ margin: '0px auto'
90
+ }
91
+ },
92
+ '& .SCMediaLink-html-placeholder': {
93
+ width: '100%',
94
+ position: 'absolute',
95
+ top: 0,
96
+ // zIndex: 1,
97
+ '& .SCMediaLink-html-loading': {
98
+ position: 'absolute',
99
+ display: 'none',
100
+ top: '40%',
101
+ left: '50%'
102
+ }
103
+ }
104
+ },
56
105
  '& .SCMediaLink-delete': {
57
106
  background: theme.palette.common.white,
58
107
  position: 'absolute',
59
108
  right: theme.spacing(0.5),
60
- top: theme.spacing(0.5)
109
+ top: theme.spacing(0.5),
110
+ zIndex: 3
61
111
  },
62
112
  '&.SCMediaLink-media-video .SCMediaLink-delete': {
63
113
  background: theme.palette.common.white,
@@ -0,0 +1,42 @@
1
+ declare const Component: {
2
+ styleOverrides: {
3
+ root: ({ theme }: any) => {
4
+ '& .MuiDrawer-paper': {
5
+ [x: number]: {
6
+ width: any;
7
+ };
8
+ width: string;
9
+ };
10
+ '& .SCNavigationMenuDrawer-drawer-header': {
11
+ minHeight: any;
12
+ padding: string;
13
+ display: string;
14
+ justifyContent: string;
15
+ '& > a:first-of-type': {
16
+ display: string;
17
+ justifyContent: string;
18
+ alignContent: string;
19
+ flexWrap: string;
20
+ };
21
+ '& img': {
22
+ maxHeight: number;
23
+ paddingLeft: any;
24
+ };
25
+ };
26
+ '& .MuiTypography-subtitle1': {
27
+ fontSize: string;
28
+ padding: any;
29
+ '& MuiButton-root': {
30
+ padding: any;
31
+ };
32
+ '& span:first-of-type': {
33
+ color: string;
34
+ };
35
+ };
36
+ '& .SCBaseItemButton-text ': {
37
+ maxWidth: string;
38
+ };
39
+ };
40
+ };
41
+ };
42
+ export default Component;
@@ -0,0 +1,43 @@
1
+ import { darken } from '@mui/system';
2
+ const Component = {
3
+ styleOverrides: {
4
+ root: ({ theme }) => ({
5
+ '& .MuiDrawer-paper': {
6
+ width: '100%',
7
+ [theme.breakpoints.up('sm')]: {
8
+ width: theme.spacing(40)
9
+ }
10
+ },
11
+ '& .SCNavigationMenuDrawer-drawer-header': {
12
+ minHeight: theme.mixins.toolbar.minHeight,
13
+ padding: '1px',
14
+ display: 'flex',
15
+ justifyContent: 'space-between',
16
+ '& > a:first-of-type': {
17
+ display: 'flex',
18
+ justifyContent: 'center',
19
+ alignContent: 'center',
20
+ flexWrap: 'wrap'
21
+ },
22
+ '& img': {
23
+ maxHeight: theme.mixins.toolbar.minHeight - 20,
24
+ paddingLeft: theme.spacing(1.5)
25
+ }
26
+ },
27
+ '& .MuiTypography-subtitle1': {
28
+ fontSize: '1.286rem',
29
+ padding: theme.spacing(0, 2),
30
+ '& MuiButton-root': {
31
+ padding: theme.spacing(1, 1, 1, 2)
32
+ },
33
+ '& span:first-of-type': {
34
+ color: darken(theme.palette.text.primary, 0.5)
35
+ }
36
+ },
37
+ '& .SCBaseItemButton-text ': {
38
+ maxWidth: '80%'
39
+ }
40
+ })
41
+ }
42
+ };
43
+ export default Component;
@@ -1,43 +1,6 @@
1
1
  declare const Component: {
2
2
  styleOverrides: {
3
3
  root: ({ theme }: any) => {};
4
- drawerRoot: ({ theme }: any) => {
5
- '& .MuiDrawer-paper': {
6
- [x: number]: {
7
- width: any;
8
- };
9
- width: string;
10
- };
11
- '& .SCNavigationMenuIconButton-drawer-header': {
12
- minHeight: any;
13
- padding: string;
14
- display: string;
15
- justifyContent: string;
16
- '& > a:first-of-type': {
17
- display: string;
18
- justifyContent: string;
19
- alignContent: string;
20
- flexWrap: string;
21
- };
22
- '& img': {
23
- maxHeight: number;
24
- paddingLeft: any;
25
- };
26
- };
27
- '& .MuiTypography-subtitle1': {
28
- fontSize: string;
29
- padding: any;
30
- '& MuiButton-root': {
31
- padding: any;
32
- };
33
- '& span:first-of-type': {
34
- color: string;
35
- };
36
- };
37
- '& .SCBaseItemButton-text ': {
38
- maxWidth: string;
39
- };
40
- };
41
4
  };
42
5
  };
43
6
  export default Component;
@@ -1,44 +1,6 @@
1
- import { darken } from '@mui/system';
2
1
  const Component = {
3
2
  styleOverrides: {
4
- root: ({ theme }) => ({}),
5
- drawerRoot: ({ theme }) => ({
6
- '& .MuiDrawer-paper': {
7
- width: '100%',
8
- [theme.breakpoints.up('sm')]: {
9
- width: theme.spacing(40)
10
- }
11
- },
12
- '& .SCNavigationMenuIconButton-drawer-header': {
13
- minHeight: theme.mixins.toolbar.minHeight,
14
- padding: '1px',
15
- display: 'flex',
16
- justifyContent: 'space-between',
17
- '& > a:first-of-type': {
18
- display: 'flex',
19
- justifyContent: 'center',
20
- alignContent: 'center',
21
- flexWrap: 'wrap'
22
- },
23
- '& img': {
24
- maxHeight: theme.mixins.toolbar.minHeight - 20,
25
- paddingLeft: theme.spacing(1.5)
26
- }
27
- },
28
- '& .MuiTypography-subtitle1': {
29
- fontSize: '1.286rem',
30
- padding: theme.spacing(0, 2),
31
- '& MuiButton-root': {
32
- padding: theme.spacing(1, 1, 1, 2)
33
- },
34
- '& span:first-of-type': {
35
- color: darken(theme.palette.text.primary, 0.5)
36
- }
37
- },
38
- '& .SCBaseItemButton-text ': {
39
- maxWidth: '80%'
40
- }
41
- })
3
+ root: ({ theme }) => ({})
42
4
  }
43
5
  };
44
6
  export default Component;
@@ -27,7 +27,6 @@ declare const Component: {
27
27
  paddingRight: any;
28
28
  paddingBottom: number;
29
29
  margin: any;
30
- color: any;
31
30
  borderRadius: number;
32
31
  borderBottom: string;
33
32
  '&.SCNavigationToolbar-active, &:hover': {
@@ -67,6 +66,9 @@ declare const Component: {
67
66
  '& .SCNavigationToolbar-settings': {
68
67
  marginLeft: number;
69
68
  };
69
+ '& .SCNavigationToolbar-composer:hover': {
70
+ color: any;
71
+ };
70
72
  '& .MuiIconButton-root': {
71
73
  color: any;
72
74
  };