@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
199 lines (195 loc) • 8.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _iconsMaterial = require("@mui/icons-material");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Optional toast import - fallback to console if not available
var toast;
try {
var toastModule = require('react-hot-toast');
toast = toastModule.toast || toastModule.default;
} catch (e) {
toast = {
error: function error(message) {
return console.error('Error:', message);
},
success: function success(message) {
return console.log('Success:', message);
},
dismiss: function dismiss() {
return console.log('Toast dismissed');
}
};
}
var ManageFieldsModal = function ManageFieldsModal(_ref) {
var open = _ref.open,
onClose = _ref.onClose,
initialFields = _ref.fields1,
onSave = _ref.onSave,
colors = _ref.colors,
setCustomFields = _ref.setCustomFields;
var _useState = (0, _react.useState)(initialFields),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
fields = _useState2[0],
setFields = _useState2[1];
var _useState3 = (0, _react.useState)(Array(initialFields.length).fill(false)),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
editMode = _useState4[0],
setEditMode = _useState4[1];
// Sync modal state with initialFields
(0, _react.useEffect)(function () {
setFields(initialFields);
setEditMode(Array(initialFields.length).fill(false));
}, [initialFields]);
var handleAddField = function handleAddField() {
if (fields.length >= 20) {
toast.error('Maximum of 20 fields allowed!');
return;
}
var newFields = [].concat((0, _toConsumableArray2.default)(fields), [{
originalField: '',
formattedField: ''
}]);
setFields(newFields);
setEditMode([].concat((0, _toConsumableArray2.default)(editMode), [true]));
};
var handleFieldChange = function handleFieldChange(index, value) {
var updatedFields = (0, _toConsumableArray2.default)(fields);
updatedFields[index] = _objectSpread(_objectSpread({}, updatedFields[index]), {}, {
formattedField: value
});
setFields(updatedFields);
};
var toggleEditMode = function toggleEditMode(index) {
var updatedEditMode = (0, _toConsumableArray2.default)(editMode);
updatedEditMode[index] = !updatedEditMode[index];
setEditMode(updatedEditMode);
};
var handleDeleteField = function handleDeleteField(index) {
if (fields.length <= 1) {
toast.error('At least one field must remain!');
return;
}
var updatedFields = fields.filter(function (_, i) {
return i !== index;
});
var updatedEditMode = editMode.filter(function (_, i) {
return i !== index;
});
setFields(updatedFields);
setEditMode(updatedEditMode);
};
var handleSaveChanges = function handleSaveChanges() {
// Dismiss all currently displayed toasts
toast.dismiss();
// Show a new success toast
toast.success('Changes saved!', {
id: 'save-toast',
// Use a unique ID for the toast
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
// Call your save and close functions
onSave(fields); // Save the updated fields
onClose();
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
open: open,
onClose: onClose,
maxWidth: "sm",
fullWidth: true,
classes: {
paper: 'rounded-lg p-4'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
className: "text-center flex flex-col items-center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "text-2xl font-semibold relative",
children: "Manage Fields"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "w-1/3 h-[4px] bg-purple-500 mt-1"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
sx: {
width: '100%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
className: "space-y-4 w-full",
children: [fields.map(function (field, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
className: "flex items-center space-x-6 w-full",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
variant: "outlined",
name: fields.formattedField,
placeholder: "Custom Field",
value: field.formattedField,
onChange: function onChange(e) {
return handleFieldChange(index, e.target.value);
},
disabled: !editMode[index],
sx: {
width: '70%'
},
InputProps: {
className: "h-12",
style: {
fontSize: "0.875rem",
width: "100%"
}
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
onClick: function onClick() {
return toggleEditMode(index);
},
color: colors.primary[300],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Edit, {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
onClick: function onClick() {
return handleDeleteField(index);
},
color: colors.primary[300],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Delete, {})
})]
}, index);
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, {
onClick: handleAddField,
className: "font-semibold flex items-center mt-2",
disabled: fields.length >= 20,
sx: {
color: 'rgb(147 51 234)'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {
className: "mr-1"
}), "Add Field"]
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: onClose,
className: "bg-gray-300 px-4 py-2 rounded-md text-black",
children: "Cancel"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: handleSaveChanges,
className: "bg-purple-600 mr-2 text-white font-semibold rounded-md px-4 py-2 transition",
children: "Save"
})]
})]
});
};
var _default = exports.default = ManageFieldsModal;