@selfcommunity/react-ui 0.10.2-alpha.0 → 0.10.2-alpha.2
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/CategoryFollowersButton/CategoryFollowersButton.js +7 -4
- package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.js +5 -3
- package/lib/cjs/components/GroupMembersButton/GroupMembersButton.js +6 -3
- package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +65 -104
- package/lib/cjs/components/Skeleton/AvatarGroupSkeleton.js +4 -4
- package/lib/esm/components/CategoryFollowersButton/CategoryFollowersButton.js +7 -4
- package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js +5 -3
- package/lib/esm/components/GroupMembersButton/GroupMembersButton.js +6 -3
- package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +67 -106
- package/lib/esm/components/Skeleton/AvatarGroupSkeleton.js +4 -4
- package/lib/umd/react-ui.js +1 -1
- package/package.json +3 -3
- package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/reducer.d.ts +0 -15
- package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/reducer.js +0 -42
- package/lib/esm/components/OnBoardingWidget/Steps/Appearance/reducer.d.ts +0 -15
- package/lib/esm/components/OnBoardingWidget/Steps/Appearance/reducer.js +0 -37
|
@@ -28,12 +28,13 @@ const classes = {
|
|
|
28
28
|
const Root = (0, styles_1.styled)(material_1.Button, {
|
|
29
29
|
name: PREFIX,
|
|
30
30
|
slot: 'Root',
|
|
31
|
-
overridesResolver: (
|
|
31
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
32
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
32
33
|
})(() => ({}));
|
|
33
34
|
const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
34
35
|
name: PREFIX,
|
|
35
|
-
slot: '
|
|
36
|
-
overridesResolver: (
|
|
36
|
+
slot: 'DialogRoot',
|
|
37
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
37
38
|
})(() => ({}));
|
|
38
39
|
/**
|
|
39
40
|
*> API documentation for the Community-JS Category Followers Button component. Learn about the available props and the CSS API.
|
|
@@ -127,6 +128,8 @@ function CategoryFollowersButton(inProps) {
|
|
|
127
128
|
// RENDER
|
|
128
129
|
const theme = (0, material_1.useTheme)();
|
|
129
130
|
const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
|
|
130
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0
|
|
131
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0,
|
|
132
|
+
// @ts-expect-error this is needed to use followers into SCCategoryFollowersButton
|
|
133
|
+
followers: scCategory === null || scCategory === void 0 ? void 0 : scCategory.followers_counter }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
131
134
|
}
|
|
132
135
|
exports.default = CategoryFollowersButton;
|
|
@@ -22,7 +22,6 @@ const User_1 = tslib_1.__importStar(require("../User"));
|
|
|
22
22
|
const PREFIX = 'SCEventParticipantsButton';
|
|
23
23
|
const classes = {
|
|
24
24
|
root: `${PREFIX}-root`,
|
|
25
|
-
avatar: `${PREFIX}-avatar`,
|
|
26
25
|
participants: `${PREFIX}-participants`,
|
|
27
26
|
dialogRoot: `${PREFIX}-dialog-root`,
|
|
28
27
|
infiniteScroll: `${PREFIX}-infinite-scroll`,
|
|
@@ -31,7 +30,8 @@ const classes = {
|
|
|
31
30
|
const Root = (0, styles_1.styled)(material_1.Button, {
|
|
32
31
|
name: PREFIX,
|
|
33
32
|
slot: 'Root',
|
|
34
|
-
overridesResolver: (_props, styles) => styles.root
|
|
33
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
34
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
35
35
|
})(() => ({}));
|
|
36
36
|
const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
37
37
|
name: PREFIX,
|
|
@@ -133,6 +133,8 @@ function EventParticipantsButton(inProps) {
|
|
|
133
133
|
const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
|
|
134
134
|
setOpen((prev) => !prev);
|
|
135
135
|
}, [setOpen]);
|
|
136
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0
|
|
136
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0,
|
|
137
|
+
// @ts-expect-error this is needed to use followers into SCEventParticipantsButton
|
|
138
|
+
followers: followers }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
137
139
|
}
|
|
138
140
|
exports.default = EventParticipantsButton;
|
|
@@ -29,11 +29,12 @@ const classes = {
|
|
|
29
29
|
const Root = (0, styles_1.styled)(material_1.Button, {
|
|
30
30
|
name: PREFIX,
|
|
31
31
|
slot: 'Root',
|
|
32
|
-
overridesResolver: (_props, styles) => styles.root
|
|
32
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
33
|
+
shouldForwardProp: (prop) => prop !== 'subscribers'
|
|
33
34
|
})(() => ({}));
|
|
34
35
|
const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
35
36
|
name: PREFIX,
|
|
36
|
-
slot: '
|
|
37
|
+
slot: 'DialogRoot',
|
|
37
38
|
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
38
39
|
})(() => ({}));
|
|
39
40
|
/**
|
|
@@ -132,6 +133,8 @@ function GroupMembersButton(inProps) {
|
|
|
132
133
|
// RENDER
|
|
133
134
|
const theme = (0, material_1.useTheme)();
|
|
134
135
|
const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
|
|
135
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0
|
|
136
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0,
|
|
137
|
+
// @ts-expect-error this is needed to use subscribers into SCGroupMembersButton
|
|
138
|
+
subscribers: scGroup === null || scGroup === void 0 ? void 0 : scGroup.subscribers_counter }, rest, { children: loading || !scGroup ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scGroup.subscribers_counter, renderSurplus: renderSurplus }, { children: members.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: members.map((member) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
|
|
136
139
|
}
|
|
137
140
|
exports.default = GroupMembersButton;
|
|
@@ -11,9 +11,8 @@ const react_core_1 = require("@selfcommunity/react-core");
|
|
|
11
11
|
const constants_1 = require("../../constants");
|
|
12
12
|
const material_1 = require("@mui/material");
|
|
13
13
|
const mui_color_input_1 = require("mui-color-input");
|
|
14
|
-
const reducer_1 = require("./reducer");
|
|
15
|
-
const reducer_2 = require("./reducer");
|
|
16
14
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
15
|
+
const types_1 = require("@selfcommunity/types");
|
|
17
16
|
const onBoarding_1 = require("../../../../utils/onBoarding");
|
|
18
17
|
const react_intl_1 = require("react-intl");
|
|
19
18
|
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
|
|
@@ -46,6 +45,12 @@ const classes = {
|
|
|
46
45
|
drawerHeaderAction: `${constants_1.PREFIX}-appearance-drawer-header-action`,
|
|
47
46
|
drawerContent: `${constants_1.PREFIX}-appearance-drawer-content`
|
|
48
47
|
};
|
|
48
|
+
var AppearanceTabType;
|
|
49
|
+
(function (AppearanceTabType) {
|
|
50
|
+
AppearanceTabType["COLOR"] = "color";
|
|
51
|
+
AppearanceTabType["LOGO"] = "logo";
|
|
52
|
+
AppearanceTabType["SLOGAN"] = "slogan";
|
|
53
|
+
})(AppearanceTabType || (AppearanceTabType = {}));
|
|
49
54
|
const Root = (0, styles_1.styled)(Box_1.default, {
|
|
50
55
|
name: constants_1.PREFIX,
|
|
51
56
|
slot: 'AppearanceRoot'
|
|
@@ -56,7 +61,7 @@ const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
|
|
|
56
61
|
overridesResolver: (props, styles) => styles.appearanceDrawerRoot
|
|
57
62
|
})(({ theme }) => ({}));
|
|
58
63
|
function Appearance(inProps) {
|
|
59
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
64
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
60
65
|
// PROPS
|
|
61
66
|
const props = (0, system_1.useThemeProps)({
|
|
62
67
|
props: inProps,
|
|
@@ -64,18 +69,20 @@ function Appearance(inProps) {
|
|
|
64
69
|
});
|
|
65
70
|
const { className, onCompleteAction } = props;
|
|
66
71
|
// STATE
|
|
67
|
-
const [
|
|
72
|
+
const [preferences, setPreferences] = (0, react_1.useState)([]);
|
|
73
|
+
const [data, setData] = (0, react_1.useState)({});
|
|
74
|
+
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
68
75
|
const [loadingLogo, setLoadingLogo] = (0, react_1.useState)('');
|
|
69
76
|
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
70
|
-
const [tab, setTab] = (0, react_1.useState)(
|
|
77
|
+
const [tab, setTab] = (0, react_1.useState)(AppearanceTabType.COLOR);
|
|
71
78
|
const [updating, setUpdating] = (0, react_1.useState)(false);
|
|
72
|
-
const [updatingColor, setUpdatingColor] = (0, react_1.useState)('');
|
|
73
79
|
const colorRef = (0, react_1.useRef)(null);
|
|
74
80
|
// INTL
|
|
75
81
|
const intl = (0, react_intl_1.useIntl)();
|
|
76
82
|
// HANDLERS
|
|
77
83
|
const handleTabChange = (event, newValue) => {
|
|
78
84
|
setTab(newValue);
|
|
85
|
+
setData({});
|
|
79
86
|
};
|
|
80
87
|
const handleOpen = (0, react_1.useCallback)((event) => {
|
|
81
88
|
setAnchorEl(event.currentTarget);
|
|
@@ -83,82 +90,58 @@ function Appearance(inProps) {
|
|
|
83
90
|
const handleClose = (0, react_1.useCallback)(() => {
|
|
84
91
|
setAnchorEl(null);
|
|
85
92
|
}, []);
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
})
|
|
98
|
-
.catch((e) => {
|
|
99
|
-
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
100
|
-
dispatch({ type: reducer_1.actionTypes.SET_COLORS, payload: { loading: false, colors: [] } });
|
|
93
|
+
const handleClosePopover = () => {
|
|
94
|
+
if (colorRef.current) {
|
|
95
|
+
colorRef.current.blur();
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
const handleChange = (event) => {
|
|
99
|
+
const { name, value } = event.target;
|
|
100
|
+
setPreferences((prev) => {
|
|
101
|
+
return prev.map((p) => Object.assign({}, p, { value: p.name === name ? value : p.value }));
|
|
101
102
|
});
|
|
103
|
+
handleDataUpdate(name, value);
|
|
102
104
|
};
|
|
103
|
-
const
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
.then((res) => {
|
|
107
|
-
dispatch({
|
|
108
|
-
type: reducer_1.actionTypes.SET_LOGOS,
|
|
109
|
-
payload: {
|
|
110
|
-
loading: false,
|
|
111
|
-
logos: res.results
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
})
|
|
115
|
-
.catch((e) => {
|
|
116
|
-
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
117
|
-
dispatch({ type: reducer_1.actionTypes.SET_LOGOS, payload: { loading: false, logos: [] } });
|
|
105
|
+
const handleColorChange = (newColor, name) => {
|
|
106
|
+
setPreferences((prev) => {
|
|
107
|
+
return prev.map((p) => Object.assign({}, p, { value: p.name === name ? newColor : p.value }));
|
|
118
108
|
});
|
|
109
|
+
handleDataUpdate(name, newColor);
|
|
119
110
|
};
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
111
|
+
const handleDataUpdate = (key, value) => {
|
|
112
|
+
const elementInDict = preferences.filter((p) => p.name === key && p.value === value);
|
|
113
|
+
if (elementInDict.length) {
|
|
114
|
+
const newData = Object.assign({}, data);
|
|
115
|
+
delete newData[key];
|
|
116
|
+
setData(newData);
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
setData((prevData) => (Object.assign(Object.assign({}, prevData), { [key]: value })));
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
const fetchPreferences = () => {
|
|
123
|
+
api_services_1.PreferenceService.searchPreferences('', '', `${react_core_1.Preferences.COLORS_COLORBACK},${react_core_1.Preferences.COLORS_COLORPRIMARY},${react_core_1.Preferences.COLORS_COLORSECONDARY},${react_core_1.Preferences.COLORS_NAVBARBACK},${react_core_1.Preferences.COLORS_COLORFONT},${react_core_1.Preferences.COLORS_COLORFONTSECONDARY}, ${react_core_1.Preferences.LOGO_NAVBAR_LOGO},${react_core_1.Preferences.LOGO_NAVBAR_LOGO_MOBILE}, ${react_core_1.Preferences.TEXT_APPLICATION_SLOGAN1},${react_core_1.Preferences.TEXT_APPLICATION_SLOGAN2}`)
|
|
123
124
|
.then((res) => {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
payload: {
|
|
127
|
-
loading: false,
|
|
128
|
-
slogans: res.results
|
|
129
|
-
}
|
|
130
|
-
});
|
|
125
|
+
setPreferences(res.results);
|
|
126
|
+
setLoading(false);
|
|
131
127
|
})
|
|
132
128
|
.catch((e) => {
|
|
133
129
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
134
|
-
|
|
130
|
+
setLoading(false);
|
|
135
131
|
});
|
|
136
132
|
};
|
|
137
|
-
const updatePreference = (
|
|
138
|
-
try {
|
|
139
|
-
yield api_services_1.PreferenceService.updatePreferences(preference);
|
|
140
|
-
}
|
|
141
|
-
catch (e) {
|
|
142
|
-
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
143
|
-
}
|
|
144
|
-
finally {
|
|
145
|
-
setUpdating(false);
|
|
146
|
-
setUpdatingColor('');
|
|
147
|
-
onCompleteAction();
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
const updateSlogans = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
133
|
+
const updatePreference = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
151
134
|
setUpdating(true);
|
|
152
135
|
try {
|
|
153
|
-
yield
|
|
154
|
-
return updatePreference({ [name]: value });
|
|
155
|
-
}));
|
|
136
|
+
yield api_services_1.PreferenceService.updatePreferences(data);
|
|
156
137
|
}
|
|
157
138
|
catch (e) {
|
|
158
139
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
159
140
|
}
|
|
160
141
|
finally {
|
|
161
142
|
setUpdating(false);
|
|
143
|
+
setData({});
|
|
144
|
+
onCompleteAction();
|
|
162
145
|
}
|
|
163
146
|
});
|
|
164
147
|
const updateLogoPreference = (name, file) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
@@ -168,14 +151,15 @@ function Appearance(inProps) {
|
|
|
168
151
|
yield api_services_1.PreferenceService.updatePreferences(formData)
|
|
169
152
|
.then((preference) => {
|
|
170
153
|
setLoadingLogo('');
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
154
|
+
setData({});
|
|
155
|
+
setPreferences((prev) => {
|
|
156
|
+
return prev.map((p) => Object.assign({}, p, { value: p.name === name ? preference[name].value : p.value }));
|
|
174
157
|
});
|
|
175
158
|
onCompleteAction();
|
|
176
159
|
})
|
|
177
160
|
.catch((e) => {
|
|
178
161
|
setLoadingLogo('');
|
|
162
|
+
setData({});
|
|
179
163
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
180
164
|
});
|
|
181
165
|
});
|
|
@@ -191,43 +175,20 @@ function Appearance(inProps) {
|
|
|
191
175
|
}
|
|
192
176
|
};
|
|
193
177
|
(0, react_1.useEffect)(() => {
|
|
194
|
-
|
|
195
|
-
fetchLogos();
|
|
196
|
-
fetchSlogans();
|
|
178
|
+
fetchPreferences();
|
|
197
179
|
}, []);
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
const handleChange = (event) => {
|
|
212
|
-
const { name, value } = event.target;
|
|
213
|
-
dispatch({
|
|
214
|
-
type: reducer_1.actionTypes.SET_SLOGANS,
|
|
215
|
-
payload: { slogans: state.slogans.map((s) => (s.name === name ? Object.assign(Object.assign({}, s), { value: value }) : s)) }
|
|
216
|
-
});
|
|
217
|
-
};
|
|
218
|
-
const handleClosePopover = () => {
|
|
219
|
-
if (colorRef.current) {
|
|
220
|
-
colorRef.current.blur();
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.colors.map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.colorContainer }, { children: [(0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }), updatingColor && updatingColor === color.name && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] }))] }, color.id))) })), tab === 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.logos.map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && ((0, jsx_runtime_1.jsxs)(Box_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true,
|
|
224
|
-
//className={classes.field}
|
|
225
|
-
label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: (_a = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _a === void 0 ? void 0 : _a.value, name: "application_slogan1", onChange: handleChange, InputProps: {
|
|
226
|
-
endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = state.slogans[0].value) === null || _b === void 0 ? void 0 : _b.length) ? 50 - ((_c = state.slogans[0].value) === null || _c === void 0 ? void 0 : _c.length) : 50 }))
|
|
227
|
-
}, error: Boolean(((_e = (_d = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.length) > 50) }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true,
|
|
228
|
-
//className={classes.field}
|
|
229
|
-
label: `${intl.formatMessage(messages.sloganField)}`, margin: "normal", value: (_f = state === null || state === void 0 ? void 0 : state.slogans[1]) === null || _f === void 0 ? void 0 : _f.value, name: "application_slogan2", onChange: handleChange, InputProps: {
|
|
230
|
-
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_g = state.slogans[1].value) === null || _g === void 0 ? void 0 : _g.length) ? 150 - ((_h = state.slogans[1].value) === null || _h === void 0 ? void 0 : _h.length) : 150 })))
|
|
231
|
-
}, error: Boolean(((_k = (_j = state === null || state === void 0 ? void 0 : state.slogans[1]) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.length) > 150) }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: updating, disabled: updating, variant: "outlined", size: "small", color: "primary", onClick: updateSlogans }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
|
|
180
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.COLOR, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.LOGO, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.SLOGAN, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerContent }, { children: [tab === AppearanceTabType.COLOR && ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.colorContainer }, { children: [preferences
|
|
181
|
+
.filter((item) => item.section === types_1.SCPreferenceSection.COLORS)
|
|
182
|
+
.map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences
|
|
183
|
+
.filter((item) => item.section === types_1.SCPreferenceSection.LOGO)
|
|
184
|
+
.map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && ((0, jsx_runtime_1.jsxs)(Box_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, InputProps: {
|
|
185
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = (_b = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)
|
|
186
|
+
? 50 - ((_d = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _d === void 0 ? void 0 : _d.value.length)
|
|
187
|
+
: 50 })))
|
|
188
|
+
}, error: Boolean(((_f = (_e = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.length) > 50) }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.sloganField)}`, margin: "normal", value: ((_g = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _g === void 0 ? void 0 : _g.value) || '', name: "application_slogan2", onChange: handleChange, InputProps: {
|
|
189
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_j = (_h = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.length)
|
|
190
|
+
? 150 - ((_k = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _k === void 0 ? void 0 : _k.value.length)
|
|
191
|
+
: 150 })))
|
|
192
|
+
}, error: Boolean(((_m = (_l = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _l === void 0 ? void 0 : _l.value) === null || _m === void 0 ? void 0 : _m.length) > 150) }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: updating, disabled: updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
|
|
232
193
|
}
|
|
233
194
|
exports.default = Appearance;
|
|
@@ -12,8 +12,8 @@ const classes = {
|
|
|
12
12
|
const Root = (0, styles_1.styled)(material_1.AvatarGroup, {
|
|
13
13
|
name: PREFIX,
|
|
14
14
|
slot: 'Root',
|
|
15
|
-
overridesResolver: (
|
|
16
|
-
})((
|
|
15
|
+
overridesResolver: (_props, styles) => styles.root
|
|
16
|
+
})(() => ({}));
|
|
17
17
|
/**
|
|
18
18
|
* > API documentation for the Community-JS Avatar Group Skeleton component. Learn about the available props and the CSS API.
|
|
19
19
|
|
|
@@ -40,8 +40,8 @@ function AvatarGroupSkeleton(inProps) {
|
|
|
40
40
|
props: inProps,
|
|
41
41
|
name: PREFIX
|
|
42
42
|
});
|
|
43
|
-
const {
|
|
43
|
+
const { skeletonsAnimation = 'wave', count = 3 } = props, rest = tslib_1.__rest(props, ["skeletonsAnimation", "count"]);
|
|
44
44
|
const theme = (0, material_1.useTheme)();
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count)].map((_x, i) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall, animation: skeletonsAnimation }) }, i))) })));
|
|
46
46
|
}
|
|
47
47
|
exports.default = AvatarGroupSkeleton;
|
|
@@ -26,12 +26,13 @@ const classes = {
|
|
|
26
26
|
const Root = styled(Button, {
|
|
27
27
|
name: PREFIX,
|
|
28
28
|
slot: 'Root',
|
|
29
|
-
overridesResolver: (
|
|
29
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
30
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
30
31
|
})(() => ({}));
|
|
31
32
|
const DialogRoot = styled(BaseDialog, {
|
|
32
33
|
name: PREFIX,
|
|
33
|
-
slot: '
|
|
34
|
-
overridesResolver: (
|
|
34
|
+
slot: 'DialogRoot',
|
|
35
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
35
36
|
})(() => ({}));
|
|
36
37
|
/**
|
|
37
38
|
*> API documentation for the Community-JS Category Followers Button component. Learn about the available props and the CSS API.
|
|
@@ -125,5 +126,7 @@ export default function CategoryFollowersButton(inProps) {
|
|
|
125
126
|
// RENDER
|
|
126
127
|
const theme = useTheme();
|
|
127
128
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
128
|
-
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0
|
|
129
|
+
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0,
|
|
130
|
+
// @ts-expect-error this is needed to use followers into SCCategoryFollowersButton
|
|
131
|
+
followers: scCategory === null || scCategory === void 0 ? void 0 : scCategory.followers_counter }, rest, { children: loading || !scCategory ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
129
132
|
}
|
|
@@ -20,7 +20,6 @@ import User, { UserSkeleton } from '../User';
|
|
|
20
20
|
const PREFIX = 'SCEventParticipantsButton';
|
|
21
21
|
const classes = {
|
|
22
22
|
root: `${PREFIX}-root`,
|
|
23
|
-
avatar: `${PREFIX}-avatar`,
|
|
24
23
|
participants: `${PREFIX}-participants`,
|
|
25
24
|
dialogRoot: `${PREFIX}-dialog-root`,
|
|
26
25
|
infiniteScroll: `${PREFIX}-infinite-scroll`,
|
|
@@ -29,7 +28,8 @@ const classes = {
|
|
|
29
28
|
const Root = styled(Button, {
|
|
30
29
|
name: PREFIX,
|
|
31
30
|
slot: 'Root',
|
|
32
|
-
overridesResolver: (_props, styles) => styles.root
|
|
31
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
32
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
33
33
|
})(() => ({}));
|
|
34
34
|
const DialogRoot = styled(BaseDialog, {
|
|
35
35
|
name: PREFIX,
|
|
@@ -131,5 +131,7 @@ export default function EventParticipantsButton(inProps) {
|
|
|
131
131
|
const handleToggleDialogOpen = useCallback(() => {
|
|
132
132
|
setOpen((prev) => !prev);
|
|
133
133
|
}, [setOpen]);
|
|
134
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0
|
|
134
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0,
|
|
135
|
+
// @ts-expect-error this is needed to use followers into SCEventParticipantsButton
|
|
136
|
+
followers: followers }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
135
137
|
}
|
|
@@ -27,11 +27,12 @@ const classes = {
|
|
|
27
27
|
const Root = styled(Button, {
|
|
28
28
|
name: PREFIX,
|
|
29
29
|
slot: 'Root',
|
|
30
|
-
overridesResolver: (_props, styles) => styles.root
|
|
30
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
31
|
+
shouldForwardProp: (prop) => prop !== 'subscribers'
|
|
31
32
|
})(() => ({}));
|
|
32
33
|
const DialogRoot = styled(BaseDialog, {
|
|
33
34
|
name: PREFIX,
|
|
34
|
-
slot: '
|
|
35
|
+
slot: 'DialogRoot',
|
|
35
36
|
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
36
37
|
})(() => ({}));
|
|
37
38
|
/**
|
|
@@ -130,5 +131,7 @@ export default function GroupMembersButton(inProps) {
|
|
|
130
131
|
// RENDER
|
|
131
132
|
const theme = useTheme();
|
|
132
133
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
133
|
-
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0
|
|
134
|
+
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0,
|
|
135
|
+
// @ts-expect-error this is needed to use subscribers into SCGroupMembersButton
|
|
136
|
+
subscribers: scGroup === null || scGroup === void 0 ? void 0 : scGroup.subscribers_counter }, rest, { children: loading || !scGroup ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scGroup.subscribers_counter, renderSurplus: renderSurplus }, { children: members.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: _jsx(List, { children: members.map((member) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
|
|
134
137
|
}
|