@selfcommunity/react-ui 0.8.0-alpha.14 → 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 (6) hide show
  1. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -0
  2. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +19 -7
  3. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -0
  4. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +19 -7
  5. package/lib/umd/react-ui.js +1 -1
  6. package/package.json +2 -2
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) {
@@ -242,7 +254,7 @@ const OnBoardingWidget = (inProps) => {
242
254
  b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
243
255
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
244
256
  // @ts-ignore
245
- icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
257
+ icon: (...chunks) => ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
246
258
  } }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })), showCategoriesModal && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", href: isStage ? constants_2.CONSOLE_STAGE : constants_2.CONSOLE_PROD, onClick: () => setShowCategoriesModal(false), target: "_blank", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
247
259
  };
248
260
  exports.default = OnBoardingWidget;
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) {
@@ -240,7 +252,7 @@ const OnBoardingWidget = (inProps) => {
240
252
  b: (chunks) => _jsx("strong", { children: chunks }),
241
253
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
242
254
  // @ts-ignore
243
- icon: (...chunks) => _jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
255
+ icon: (...chunks) => (_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
244
256
  } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", href: isStage ? CONSOLE_STAGE : CONSOLE_PROD, onClick: () => setShowCategoriesModal(false), target: "_blank", startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
245
257
  };
246
258
  export default OnBoardingWidget;