@selfcommunity/react-ui 0.8.0-alpha.13 → 0.8.0-alpha.15

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 (8) hide show
  1. package/lib/cjs/components/Notification/Event/Event.js +4 -0
  2. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -0
  3. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +18 -6
  4. package/lib/esm/components/Notification/Event/Event.js +4 -0
  5. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -0
  6. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +18 -6
  7. package/lib/umd/react-ui.js +1 -1
  8. package/package.json +2 -2
package/lib/cjs/components/Notification/Event/Event.js CHANGED
@@ -53,6 +53,8 @@ function EventNotification(props) {
53
53
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
54
54
  to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
55
55
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
56
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
57
+ // @ts-ignore
56
58
  icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
57
59
  event: notificationObject.event.name,
58
60
  link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
@@ -71,6 +73,8 @@ function EventNotification(props) {
71
73
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
72
74
  to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
73
75
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
76
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
77
+ // @ts-ignore
74
78
  icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
75
79
  event: notificationObject.event.name,
76
80
  link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.d.ts CHANGED
@@ -18,6 +18,11 @@ export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
18
18
  * @default null
19
19
  */
20
20
  onGeneratedContent?: (feedObjs: SCFeedObjectType[]) => void;
21
+ /**
22
+ * Force widget expanded
23
+ * @default false
24
+ */
25
+ forceExpanded?: boolean;
21
26
  }
22
27
  declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
23
28
  export default OnBoardingWidget;
package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js CHANGED
@@ -53,7 +53,7 @@ const OnBoardingWidget = (inProps) => {
53
53
  props: inProps,
54
54
  name: constants_1.PREFIX
55
55
  });
56
- const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = tslib_1.__rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
56
+ const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false } = props, rest = tslib_1.__rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded"]);
57
57
  // STATE
58
58
  const [loading, setLoading] = (0, react_1.useState)(true);
59
59
  const [initialized, setInitialized] = (0, react_1.useState)(false);
@@ -65,7 +65,7 @@ const OnBoardingWidget = (inProps) => {
65
65
  const allStepsDone = (0, react_1.useMemo)(() => {
66
66
  return steps === null || steps === void 0 ? void 0 : steps.every((step) => step.status === types_1.SCOnBoardingStepStatusType.COMPLETED);
67
67
  }, [steps]);
68
- const [expanded, setExpanded] = (0, react_1.useState)(!allStepsDone);
68
+ const [expanded, setExpanded] = (0, react_1.useState)(!allStepsDone || forceExpanded);
69
69
  const [_step, setStep] = (0, react_1.useState)(nextStep);
70
70
  const currentContentsStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === types_1.SCOnBoardingStepType.CONTENTS);
71
71
  const prevContentsStep = (0, react_core_1.usePreviousValue)(currentContentsStep);
@@ -86,6 +86,15 @@ const OnBoardingWidget = (inProps) => {
86
86
  const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
87
87
  const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)();
88
88
  // HANDLERS
89
+ /**
90
+ * Notify changes to Feed if the Widget is contained
91
+ */
92
+ const notifyLayoutChanges = (0, react_1.useMemo)(() => (state) => {
93
+ if (onStateChange && state) {
94
+ onStateChange(state);
95
+ }
96
+ onHeightChange && onHeightChange();
97
+ }, [onStateChange, onHeightChange]);
89
98
  const completeStep = (s) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
90
99
  if (s.status !== types_1.SCOnBoardingStepStatusType.COMPLETED) {
91
100
  yield api_services_1.OnBoardingService.completeAStep(s.id)
@@ -131,8 +140,9 @@ const OnBoardingWidget = (inProps) => {
131
140
  setStep(newStep);
132
141
  };
133
142
  const handleExpand = () => {
134
- setExpanded(!expanded);
135
- onHeightChange && onHeightChange();
143
+ const _expanded = !expanded;
144
+ setExpanded(_expanded);
145
+ notifyLayoutChanges({ forceExpanded: _expanded });
136
146
  };
137
147
  const generateContent = (stepId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
138
148
  if (!isLoading && !categories.length) {
@@ -178,11 +188,13 @@ const OnBoardingWidget = (inProps) => {
178
188
  if (!initialized && nextStep) {
179
189
  setStep(nextStep);
180
190
  setInitialized(true);
191
+ notifyLayoutChanges({ forceExpanded: expanded });
181
192
  }
182
193
  }, [initialized, nextStep]);
183
194
  (0, react_1.useEffect)(() => {
184
- setExpanded(!allStepsDone);
185
- onHeightChange && onHeightChange();
195
+ const _expanded = !allStepsDone;
196
+ setExpanded(_expanded);
197
+ notifyLayoutChanges({ forceExpanded: _expanded });
186
198
  }, [allStepsDone]);
187
199
  (0, react_1.useEffect)(() => {
188
200
  if (isAdmin) {
package/lib/esm/components/Notification/Event/Event.js CHANGED
@@ -51,6 +51,8 @@ export default function EventNotification(props) {
51
51
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
52
52
  to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
53
53
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
54
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
55
+ // @ts-ignore
54
56
  icon: (...chunks) => _jsx(Icon, { children: chunks }),
55
57
  event: notificationObject.event.name,
56
58
  link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
@@ -69,6 +71,8 @@ export default function EventNotification(props) {
69
71
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
70
72
  to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
71
73
  }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
74
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
75
+ // @ts-ignore
72
76
  icon: (...chunks) => _jsx(Icon, { children: chunks }),
73
77
  event: notificationObject.event.name,
74
78
  link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts CHANGED
@@ -18,6 +18,11 @@ export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
18
18
  * @default null
19
19
  */
20
20
  onGeneratedContent?: (feedObjs: SCFeedObjectType[]) => void;
21
+ /**
22
+ * Force widget expanded
23
+ * @default false
24
+ */
25
+ forceExpanded?: boolean;
21
26
  }
22
27
  declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
23
28
  export default OnBoardingWidget;
package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js CHANGED
@@ -51,7 +51,7 @@ const OnBoardingWidget = (inProps) => {
51
51
  props: inProps,
52
52
  name: PREFIX
53
53
  });
54
- const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
54
+ const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded"]);
55
55
  // STATE
56
56
  const [loading, setLoading] = useState(true);
57
57
  const [initialized, setInitialized] = useState(false);
@@ -63,7 +63,7 @@ const OnBoardingWidget = (inProps) => {
63
63
  const allStepsDone = useMemo(() => {
64
64
  return steps === null || steps === void 0 ? void 0 : steps.every((step) => step.status === SCOnBoardingStepStatusType.COMPLETED);
65
65
  }, [steps]);
66
- const [expanded, setExpanded] = useState(!allStepsDone);
66
+ const [expanded, setExpanded] = useState(!allStepsDone || forceExpanded);
67
67
  const [_step, setStep] = useState(nextStep);
68
68
  const currentContentsStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CONTENTS);
69
69
  const prevContentsStep = usePreviousValue(currentContentsStep);
@@ -84,6 +84,15 @@ const OnBoardingWidget = (inProps) => {
84
84
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
85
85
  const { categories, isLoading } = useSCFetchCategories();
86
86
  // HANDLERS
87
+ /**
88
+ * Notify changes to Feed if the Widget is contained
89
+ */
90
+ const notifyLayoutChanges = useMemo(() => (state) => {
91
+ if (onStateChange && state) {
92
+ onStateChange(state);
93
+ }
94
+ onHeightChange && onHeightChange();
95
+ }, [onStateChange, onHeightChange]);
87
96
  const completeStep = (s) => __awaiter(void 0, void 0, void 0, function* () {
88
97
  if (s.status !== SCOnBoardingStepStatusType.COMPLETED) {
89
98
  yield OnBoardingService.completeAStep(s.id)
@@ -129,8 +138,9 @@ const OnBoardingWidget = (inProps) => {
129
138
  setStep(newStep);
130
139
  };
131
140
  const handleExpand = () => {
132
- setExpanded(!expanded);
133
- onHeightChange && onHeightChange();
141
+ const _expanded = !expanded;
142
+ setExpanded(_expanded);
143
+ notifyLayoutChanges({ forceExpanded: _expanded });
134
144
  };
135
145
  const generateContent = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
136
146
  if (!isLoading && !categories.length) {
@@ -176,11 +186,13 @@ const OnBoardingWidget = (inProps) => {
176
186
  if (!initialized && nextStep) {
177
187
  setStep(nextStep);
178
188
  setInitialized(true);
189
+ notifyLayoutChanges({ forceExpanded: expanded });
179
190
  }
180
191
  }, [initialized, nextStep]);
181
192
  useEffect(() => {
182
- setExpanded(!allStepsDone);
183
- onHeightChange && onHeightChange();
193
+ const _expanded = !allStepsDone;
194
+ setExpanded(_expanded);
195
+ notifyLayoutChanges({ forceExpanded: _expanded });
184
196
  }, [allStepsDone]);
185
197
  useEffect(() => {
186
198
  if (isAdmin) {