@selfcommunity/react-ui 0.8.1-alpha.1 → 0.8.1-alpha.3
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/Categories/Categories.js +0 -1
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +3 -3
- package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +7 -1
- package/lib/esm/components/Categories/Categories.js +0 -1
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +4 -4
- package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +7 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +2 -2
|
@@ -111,7 +111,6 @@ function Categories(inProps) {
|
|
|
111
111
|
* Subscriber for pubsub callback
|
|
112
112
|
*/
|
|
113
113
|
const onEditCategoryHandler = (0, react_1.useCallback)((_msg, edited) => {
|
|
114
|
-
console.log(edited, 'edited category');
|
|
115
114
|
setCategories((prev) => {
|
|
116
115
|
return prev.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
|
|
117
116
|
});
|
|
@@ -197,9 +197,9 @@ const OnBoardingWidget = (inProps) => {
|
|
|
197
197
|
* Notify when a category info changes
|
|
198
198
|
* @param data
|
|
199
199
|
*/
|
|
200
|
-
|
|
201
|
-
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, data);
|
|
202
|
-
}
|
|
200
|
+
function notifyCategoryChanges(data) {
|
|
201
|
+
data && pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, data);
|
|
202
|
+
}
|
|
203
203
|
// EFFECTS
|
|
204
204
|
(0, react_1.useEffect)(() => {
|
|
205
205
|
if (prevContentsStep &&
|
|
@@ -71,6 +71,7 @@ function Appearance(inProps) {
|
|
|
71
71
|
const [tab, setTab] = (0, react_1.useState)(0);
|
|
72
72
|
const [updating, setUpdating] = (0, react_1.useState)(false);
|
|
73
73
|
const [updatingColor, setUpdatingColor] = (0, react_1.useState)('');
|
|
74
|
+
const colorRef = (0, react_1.useRef)(null);
|
|
74
75
|
// INTL
|
|
75
76
|
const intl = (0, react_intl_1.useIntl)();
|
|
76
77
|
// HANDLERS
|
|
@@ -217,7 +218,12 @@ function Appearance(inProps) {
|
|
|
217
218
|
payload: { slogans: state.slogans.map((s) => (s.name === name ? Object.assign(Object.assign({}, s), { value: value }) : s)) }
|
|
218
219
|
});
|
|
219
220
|
};
|
|
220
|
-
|
|
221
|
+
const handleClosePopover = () => {
|
|
222
|
+
if (colorRef.current) {
|
|
223
|
+
colorRef.current.blur();
|
|
224
|
+
}
|
|
225
|
+
};
|
|
226
|
+
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), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: 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,
|
|
221
227
|
//className={classes.field}
|
|
222
228
|
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: {
|
|
223
229
|
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 }))
|
|
@@ -109,7 +109,6 @@ export default function Categories(inProps) {
|
|
|
109
109
|
* Subscriber for pubsub callback
|
|
110
110
|
*/
|
|
111
111
|
const onEditCategoryHandler = useCallback((_msg, edited) => {
|
|
112
|
-
console.log(edited, 'edited category');
|
|
113
112
|
setCategories((prev) => {
|
|
114
113
|
return prev.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
|
|
115
114
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __awaiter, __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
4
4
|
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, CardContent, CardMedia, Checkbox, Chip, Fade, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
5
5
|
import { FormattedMessage } from 'react-intl';
|
|
6
6
|
import { styled } from '@mui/material/styles';
|
|
@@ -195,9 +195,9 @@ const OnBoardingWidget = (inProps) => {
|
|
|
195
195
|
* Notify when a category info changes
|
|
196
196
|
* @param data
|
|
197
197
|
*/
|
|
198
|
-
|
|
199
|
-
PubSub.publish(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, data);
|
|
200
|
-
}
|
|
198
|
+
function notifyCategoryChanges(data) {
|
|
199
|
+
data && PubSub.publish(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, data);
|
|
200
|
+
}
|
|
201
201
|
// EFFECTS
|
|
202
202
|
useEffect(() => {
|
|
203
203
|
if (prevContentsStep &&
|
|
@@ -69,6 +69,7 @@ export default function Appearance(inProps) {
|
|
|
69
69
|
const [tab, setTab] = useState(0);
|
|
70
70
|
const [updating, setUpdating] = useState(false);
|
|
71
71
|
const [updatingColor, setUpdatingColor] = useState('');
|
|
72
|
+
const colorRef = useRef(null);
|
|
72
73
|
// INTL
|
|
73
74
|
const intl = useIntl();
|
|
74
75
|
// HANDLERS
|
|
@@ -215,7 +216,12 @@ export default function Appearance(inProps) {
|
|
|
215
216
|
payload: { slogans: state.slogans.map((s) => (s.name === name ? Object.assign(Object.assign({}, s), { value: value }) : s)) }
|
|
216
217
|
});
|
|
217
218
|
};
|
|
218
|
-
|
|
219
|
+
const handleClosePopover = () => {
|
|
220
|
+
if (colorRef.current) {
|
|
221
|
+
colorRef.current.blur();
|
|
222
|
+
}
|
|
223
|
+
};
|
|
224
|
+
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsxs(Box, Object.assign({ className: classes.colorContainer }, { children: [_jsx(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 && (_jsx(CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] }))] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true,
|
|
219
225
|
//className={classes.field}
|
|
220
226
|
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: {
|
|
221
227
|
endAdornment: _jsx(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 }))
|