@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
84 lines (83 loc) • 4.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const lab_1 = require("@mui/lab");
const material_1 = require("@mui/material");
const react_1 = require("react");
const constants_1 = require("../constants");
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../../constants/Errors");
const react_intl_1 = require("react-intl");
const notistack_1 = require("notistack");
const types_1 = require("@selfcommunity/types");
const api_services_1 = require("@selfcommunity/api-services");
const types_2 = require("../types");
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
const PubSub_1 = require("../../../constants/PubSub");
const classes = {
editModeWrapper: `${constants_1.PREFIX}-edit-mode-wrapper`,
editModeSaveButton: `${constants_1.PREFIX}-edit-mode-save-button`,
editModeCloseButton: `${constants_1.PREFIX}-edit-mode-close-button`
};
function FieldName(props) {
// PROPS
const { endpoint, row, isNewRow, handleManageRow, editMode, handleDisableEditMode } = props;
// STATES
const [loading, setLoading] = (0, react_1.useState)(false);
const [name, setName] = (0, react_1.useState)(row.name);
// HOOKS
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
// DEBOUNCE
const debounceSetData = (0, material_1.debounce)((newName) => {
setName(newName);
}, 300);
// HANDLERS
const handleChange = (0, react_1.useCallback)((e) => {
debounceSetData(e.target.value);
}, [debounceSetData]);
const handleSubmit = (0, react_1.useCallback)(() => {
setLoading(true);
api_services_1.http
.request({
url: endpoint.url(),
method: endpoint.method,
data: {
name,
type: types_1.SCCourseLessonTypologyType.LESSON
}
})
.then((response) => {
handleManageRow(response.data, isNewRow ? types_2.ActionLessonType.ADD : types_2.ActionLessonType.RENAME);
setName(null);
setLoading(false);
handleDisableEditMode();
if (isNewRow) {
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.UPDATE}`, false);
}
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.save", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.save" }), {
variant: 'success',
autoHideDuration: 3000
});
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
variant: 'error',
autoHideDuration: 3000
});
});
}, [isNewRow, name, endpoint, setLoading, handleDisableEditMode, handleManageRow]);
const handleClose = (0, react_1.useCallback)(() => {
if (isNewRow) {
handleManageRow(row, types_2.ActionLessonType.DELETE, true);
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.UPDATE}`, false);
}
else {
setName(null);
handleDisableEditMode();
}
}, [row, isNewRow, handleManageRow, setName, handleDisableEditMode]);
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isNewRow || editMode ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.editModeWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
}
exports.default = (0, react_1.memo)(FieldName);