@knovator/masters-admin
Version:
Package for integrating Masters, Submasters functionality in React projects
1,303 lines (1,277 loc) • 155 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var classNames = require('classnames');
var CSSTransition = require('react-transition-group/CSSTransition');
var reactHookForm = require('react-hook-form');
var reactTable = require('react-table');
var reactDropzone = require('react-dropzone');
var reactBeautifulDnd = require('react-beautiful-dnd');
var fetchUrl = require('@knovator/api');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var CSSTransition__default = /*#__PURE__*/_interopDefaultLegacy(CSSTransition);
var fetchUrl__default = /*#__PURE__*/_interopDefaultLegacy(fetchUrl);
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(void 0);
});
};
}
function _createForOfIteratorHelperLoose(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (t) return (t = t.call(r)).next.bind(t);
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
t && (r = t);
var o = 0;
return function () {
return o >= r.length ? {
done: !0
} : {
done: !1,
value: r[o++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _regenerator() {
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
var e,
t,
r = "function" == typeof Symbol ? Symbol : {},
n = r.iterator || "@@iterator",
o = r.toStringTag || "@@toStringTag";
function i(r, n, o, i) {
var c = n && n.prototype instanceof Generator ? n : Generator,
u = Object.create(c.prototype);
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
var i,
c,
u,
f = 0,
p = o || [],
y = !1,
G = {
p: 0,
n: 0,
v: e,
a: d,
f: d.bind(e, 4),
d: function (t, r) {
return i = t, c = 0, u = e, G.n = r, a;
}
};
function d(r, n) {
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
var o,
i = p[t],
d = G.p,
l = i[2];
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
}
if (o || r > 1) return a;
throw y = !0, n;
}
return function (o, p, l) {
if (f > 1) throw TypeError("Generator is already running");
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
try {
if (f = 2, i) {
if (c || (o = "next"), t = i[o]) {
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
if (!t.done) return t;
u = t.value, c < 2 && (c = 0);
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
i = e;
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
} catch (t) {
i = e, c = 1, u = t;
} finally {
f = 1;
}
}
return {
value: t,
done: y
};
};
}(r, o, i), !0), u;
}
var a = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
t = Object.getPrototypeOf;
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
return this;
}), t),
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
function f(e) {
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
return this;
}), _regeneratorDefine(u, "toString", function () {
return "[object Generator]";
}), (_regenerator = function () {
return {
w: i,
m: f
};
})();
}
function _regeneratorDefine(e, r, n, t) {
var i = Object.defineProperty;
try {
i({}, "", {});
} catch (e) {
i = 0;
}
_regeneratorDefine = function (e, r, n, t) {
function o(r, n) {
_regeneratorDefine(e, r, function (e) {
return this._invoke(r, n, e);
});
}
r ? i ? i(e, r, {
value: n,
enumerable: !t,
configurable: !t,
writable: !t
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
}, _regeneratorDefine(e, r, n, t);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var DEFAULT_OFFSET_PAYLOAD = 0;
var DEFAULT_LIMIT = 20;
var SORT_ASCENDING = 1;
var SORT_DESCENDING = -1;
var PAGE_LIMITS = [10, 20, 30, 40, 50];
var DECIMAL_REDIX = 10;
var DEFAULT_CURRENT_PAGE = 1;
var EXCLUDE_SORT_COLUMNS = ["actions", "sequence"];
var INTERNAL_ERROR_CODE = "INTERNAL_ERROR";
var CALLBACK_CODES;
(function (CALLBACK_CODES) {
CALLBACK_CODES["GET_ALL"] = "GET_ALL";
CALLBACK_CODES["GET_SINGLE"] = "GET_SINGLE";
CALLBACK_CODES["CREATE"] = "CREATE";
CALLBACK_CODES["UPDATE"] = "UPDATE";
CALLBACK_CODES["DELETE"] = "DELETE";
CALLBACK_CODES["IMAGE_UPLOAD"] = "IMAGE_UPLOAD";
CALLBACK_CODES["IMAGE_REMOVE"] = "IMAGE_REMOVE";
CALLBACK_CODES["SEQUENCE_UPDATE"] = "SEQUENCE_UPDATE";
CALLBACK_CODES["INTERNAL"] = "INTERNAL";
})(CALLBACK_CODES || (CALLBACK_CODES = {}));
var DEFAULT_PERMISSIONS = {
list: true,
add: true,
destroy: true,
partialUpdate: true,
sequencing: false,
update: true
};
var TRANSLATION_PAIRS_SUBMASTERS = {
uploadFile: "Upload a file",
dragDrop: "or drag and drop",
allowedFormat: "PNG, JPG, SVG up to 2 MB",
sequence: "Sequence",
cover: "Cover Image",
searchSubMasters: "Search Sub Masters",
addSubMaster: "Add Sub Master",
updateSubMaster: "Edit Sub Master",
noDataText: "No data found! Click on 'Add Sub Master' to add one.",
selectMaster: "select 'Master' to see respective 'SubMasters'" // Select Master Message
};
var TRANSLATION_PAIRS_MASTERS = {
addMaster: "Add Master",
updateMaster: "Edit Master",
searchMaster: "Search Masters",
noDataText: "No data found! Click on 'Add Master' to add one." // No Data Text
};
var TRANSLATION_PAIRS_COMMON = {
permanentlyDelete: "You are about to permanently delete the",
lossOfData: "This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.",
pleaseType: "Please type",
toProceedOrCancel: "to processed or close this modal to cancel.",
confirm: "Confirm",
page: "Page",
next: "Next",
previous: "Previous",
indicatesRequired: "Indicates fields are required",
confirmationRequired: "Confirmation Required",
cancel: "Cancel",
yes: "Yes",
"delete": "Delete",
create: "Create",
update: "Update",
show: "Show",
showing: "Showing",
of: "of",
typeHerePlaceholder: "Type Here",
code: "Code",
codePlaceholder: "Enter code",
codeRequired: "Code is required",
name: "Name",
namePlaceholder: "Enter name",
nameRequired: "Name is required",
webDisplay: "Web Display",
enterWebDisplay: "Enter Web Display",
description: "Discription",
enterDescription: "Enter Discription",
active: "Active",
actions: "Actions"
};
var ProviderContext = /*#__PURE__*/React.createContext(null);
var Provider = function Provider(_ref) {
var children = _ref.children,
baseUrl = _ref.baseUrl,
token = _ref.token,
_ref$dataGetter = _ref.dataGetter,
dataGetter = _ref$dataGetter === void 0 ? function (response) {
return response.data.docs;
} : _ref$dataGetter,
_ref$paginationGetter = _ref.paginationGetter,
paginationGetter = _ref$paginationGetter === void 0 ? function (response) {
return response.data;
} : _ref$paginationGetter,
_ref$onError = _ref.onError,
onError = _ref$onError === void 0 ? function () {} : _ref$onError,
_ref$onSuccess = _ref.onSuccess,
onSuccess = _ref$onSuccess === void 0 ? function () {} : _ref$onSuccess,
_ref$onLogout = _ref.onLogout,
onLogout = _ref$onLogout === void 0 ? function () {} : _ref$onLogout,
translations = _ref.translations,
_ref$switchClass = _ref.switchClass,
switchClass = _ref$switchClass === void 0 ? "kms_switch" : _ref$switchClass;
var _useState = React.useState(),
selectedMaster = _useState[0],
setSelectedMaster = _useState[1];
var _useState2 = React.useState([]),
languages = _useState2[0],
setLanguages = _useState2[1];
var ctxDataGetter = typeof dataGetter === "function" ? dataGetter : function (response) {
var _response$data;
return response == null || (_response$data = response.data) == null ? void 0 : _response$data.docs;
};
var ctxPaginatonGetter = typeof paginationGetter === "function" ? paginationGetter : function (response) {
return response == null ? void 0 : response.data;
};
return React__default["default"].createElement(ProviderContext.Provider, {
value: {
baseUrl: baseUrl,
token: token,
languages: languages,
setLanguages: setLanguages,
dataGetter: ctxDataGetter,
paginationGetter: ctxPaginatonGetter,
onError: onError,
onSuccess: onSuccess,
onLogout: onLogout,
selectedMaster: selectedMaster,
setSelectedMaster: setSelectedMaster,
switchClass: switchClass,
commonTranslations: _extends({}, TRANSLATION_PAIRS_COMMON, translations)
}
}, children);
};
function useProviderState() {
var context = React.useContext(ProviderContext);
if (!context) throw new Error("Provider Context must be used within ProviderContext.Provider");
return context;
}
var Button = function Button(_ref) {
var label = _ref.label,
onClick = _ref.onClick,
disabled = _ref.disabled,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "primary" : _ref$variant,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "md" : _ref$size,
className = _ref.className;
return React__default["default"].createElement("button", {
onClick: onClick,
className: classNames__default["default"]("kms_btn", {
"kms_btn-primary": variant === "primary",
"kms_btn-secondary": variant === "secondary",
"kms_btn-sm": size === "sm"
}, className),
disabled: disabled
}, label);
};
// import Tooltip from "components/Widget/Tooltip"
var CloseIcon = function CloseIcon(_ref) {
var className = _ref.className;
return (
// <Tooltip message="Close">
React__default["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 18 18",
className: className,
fill: "currentColor"
}, React__default["default"].createElement("path", {
id: "CloseBtn",
d: "M5.455,5.455V0H7.273V5.455h5.455V7.273H7.273v5.455H5.455V7.273H0V5.455Z",
transform: "translate(0 9) rotate(-45)",
fill: "#02a2ff"
}))
// </Tooltip>
);
};
var Drawer = function Drawer(_ref) {
var children = _ref.children,
open = _ref.open,
onClose = _ref.onClose,
title = _ref.title,
footerContent = _ref.footerContent;
var nodeRef = React.useRef(null);
return React__default["default"].createElement(CSSTransition__default["default"], {
nodeRef: nodeRef,
"in": open,
timeout: {
enter: 250,
exit: 350
},
classNames: "kms_drawer",
mountOnEnter: true,
unmountOnExit: true
}, React__default["default"].createElement("div", {
className: "kms_drawer-wrapper-1",
"aria-labelledby": "modal",
role: "dialog",
"aria-modal": "true",
ref: nodeRef,
"data-testid": "drawer"
}, React__default["default"].createElement("div", {
className: "kms_drawer-wrapper-2"
}, React__default["default"].createElement("div", {
className: "kms_drawer-backdrop",
role: "button",
onClick: onClose,
onKeyDown: onClose,
tabIndex: 0
}), React__default["default"].createElement("div", {
className: "kms_drawer-container-1"
}, React__default["default"].createElement("div", {
className: "kms_drawer-container-2"
}, React__default["default"].createElement("div", {
className: "kms_drawer-close-section"
}, React__default["default"].createElement("button", {
type: "button",
className: "kms_drawer-close-btn",
onClick: onClose,
"data-testid": "drawer-close"
}, React__default["default"].createElement("span", {
className: "kms_sr-only"
}, "Close panel"), React__default["default"].createElement(CloseIcon, null))), React__default["default"].createElement("div", {
className: "kms_drawer-main"
}, React__default["default"].createElement("div", {
className: "kms_drawer-header"
}, React__default["default"].createElement("p", {
className: "kms_drawer-header-title"
}, title)), React__default["default"].createElement("div", {
className: "kms_darwer-content"
}, children), footerContent && React__default["default"].createElement("div", {
className: "kms_drawer-footer"
}, footerContent)))))));
};
var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
var _string, _string2;
if (string === void 0) {
string = "";
}
return "" + ((_string = string) == null || (_string = _string.charAt(0)) == null ? void 0 : _string.toUpperCase()) + ((_string2 = string) == null ? void 0 : _string2.slice(1));
};
var changeToCode = function changeToCode(string) {
var _string$replace;
if (string === void 0) {
string = "";
}
return (_string$replace = string.replace(/[^\s\w]/gi, "")) == null || (_string$replace = _string$replace.toUpperCase()) == null ? void 0 : _string$replace.replace(/ /g, "_");
};
var isObject = function isObject(data) {
var _data$constructor;
return (data == null || (_data$constructor = data.constructor) == null ? void 0 : _data$constructor.name) === "Object";
};
var isString = function isString(data) {
var _data$constructor2;
return (data == null || (_data$constructor2 = data.constructor) == null ? void 0 : _data$constructor2.name) === "String";
};
var isArray = function isArray(data) {
var _data$constructor3;
return (data == null || (_data$constructor3 = data.constructor) == null ? void 0 : _data$constructor3.name) === "Array";
};
var isEmpty = function isEmpty(data) {
if (isObject(data)) return Object.keys(data).length === 0;
if (isArray(data)) return data.length === 0;
if (isString(data)) return !data || data.length === 0;
if ([undefined, null, ""].includes(data)) return true;
return false;
};
var build_path = function build_path() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return args.map(function (part, i) {
if (i === 0) {
return part.trim().replace(/[\/]*$/g, "");
} else {
return part.trim().replace(/(^[\/]*|[\/]*$)/g, "");
}
}).filter(function (x) {
return x.length;
}).join("/");
};
var Checkbox = function Checkbox(_ref) {
var onChange = _ref.onChange,
rest = _ref.rest,
label = _ref.label,
error = _ref.error,
className = _ref.className,
disabled = _ref.disabled;
return React__default["default"].createElement("div", {
className: "kms_input-wrapper"
}, label && React__default["default"].createElement("label", {
className: "kms_input-label"
}, label), React__default["default"].createElement("input", _extends({
"data-testid": "input-checkbox-" + label,
className: classNames__default["default"]("kms_input-checkbox", className),
disabled: disabled,
type: "checkbox",
onChange: onChange
}, rest)), error && React__default["default"].createElement("p", {
className: "kms_input-error"
}, error));
};
var Input$2 = function Input(_ref) {
var onChange = _ref.onChange,
onInput = _ref.onInput,
disabled = _ref.disabled,
value = _ref.value,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "text" : _ref$type,
placeholder = _ref.placeholder,
_ref$rest = _ref.rest,
rest = _ref$rest === void 0 ? {} : _ref$rest,
_ref$label = _ref.label,
label = _ref$label === void 0 ? "" : _ref$label,
error = _ref.error,
className = _ref.className,
isRequired = _ref.isRequired,
_ref$wrapperClassName = _ref.wrapperClassName,
wrapperClassName = _ref$wrapperClassName === void 0 ? "" : _ref$wrapperClassName;
return React__default["default"].createElement("div", {
className: classNames__default["default"]("kms_input-wrapper", wrapperClassName)
}, label && React__default["default"].createElement("label", {
className: "kms_input-label"
}, label, isRequired && React__default["default"].createElement("span", {
className: "kms_required_astrisk"
}, " *")), React__default["default"].createElement("input", _extends({
"data-testid": "input-" + type + "-" + label,
className: classNames__default["default"]("kms_input", className),
type: type,
value: value,
onInput: onInput,
placeholder: placeholder
}, rest, {
onChange: onChange,
disabled: disabled
})), error && React__default["default"].createElement("p", {
className: "kms_input-error"
}, error));
};
var Select = function Select(_ref) {
var onChange = _ref.onChange,
value = _ref.value,
rest = _ref.rest,
label = _ref.label,
error = _ref.error,
_ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
className = _ref.className,
isRequired = _ref.isRequired,
disabled = _ref.disabled;
return React__default["default"].createElement("div", {
className: "kms_input-wrapper"
}, label && React__default["default"].createElement("label", {
className: "kms_input-label"
}, label, isRequired && React__default["default"].createElement("span", {
className: "kms_required_astrisk"
}, " *")), React__default["default"].createElement("select", _extends({
"data-testid": "input-select-" + label,
value: value,
onChange: onChange,
className: classNames__default["default"]("kms_input", className),
disabled: disabled
}, rest), options.map(function (option, index) {
return React__default["default"].createElement("option", {
value: option.value,
key: index,
"data-testid": "select-option"
}, option.label);
})), error && React__default["default"].createElement("p", {
className: "kms_input-error"
}, error));
};
var Textarea = function Textarea(_ref) {
var onChange = _ref.onChange,
onInput = _ref.onInput,
value = _ref.value,
placeholder = _ref.placeholder,
rest = _ref.rest,
label = _ref.label,
error = _ref.error,
disabled = _ref.disabled,
className = _ref.className,
isRequired = _ref.isRequired;
return React__default["default"].createElement("div", {
className: "kms_input-wrapper"
}, label && React__default["default"].createElement("label", {
className: "kms_input-label"
}, label, isRequired && React__default["default"].createElement("span", {
className: "kms_required_astrisk"
}, " *")), React__default["default"].createElement("textarea", _extends({
"data-testid": "input-textarea-" + label,
className: classNames__default["default"]("kms_input", className),
value: value,
onChange: onChange,
placeholder: placeholder,
onInput: onInput,
disabled: disabled
}, rest)), error && React__default["default"].createElement("p", {
className: "kms_input-error"
}, error));
};
var Input$1 = function Input(_ref) {
var onChange = _ref.onChange,
onInput = _ref.onInput,
disabled = _ref.disabled,
value = _ref.value,
placeholder = _ref.placeholder,
_ref$rest = _ref.rest,
rest = _ref$rest === void 0 ? {} : _ref$rest,
className = _ref.className,
_ref$wrapperClassName = _ref.wrapperClassName,
wrapperClassName = _ref$wrapperClassName === void 0 ? "" : _ref$wrapperClassName;
return React__default["default"].createElement("div", {
className: classNames__default["default"]("kms_search-input-wrapper", wrapperClassName)
}, React__default["default"].createElement("div", {
className: "kms_search-icon"
}, React__default["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "14.314",
height: "14.314",
viewBox: "0 0 16.314 16.314"
}, React__default["default"].createElement("path", {
d: "M14.874,13.739l3.44,3.439-1.136,1.136-3.439-3.44a7.229,7.229,0,1,1,1.136-1.136Zm-1.611-.6a5.619,5.619,0,1,0-.12.12l.12-.12Z",
transform: "translate(-2 -2)",
fill: "currentColor"
}))), React__default["default"].createElement("input", _extends({
type: "text",
className: classNames__default["default"]("kms_search-input", className),
value: value,
onInput: onInput,
placeholder: placeholder
}, rest, {
onChange: onChange,
disabled: disabled
})));
};
var Input = /*#__PURE__*/Object.assign(Input$2, {
Textarea: Textarea,
Select: Select,
Checkbox: Checkbox,
SearchInput: Input$1
});
var Form = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var schema = _ref.schema,
onSubmit = _ref.onSubmit,
data = _ref.data,
_ref$isUpdating = _ref.isUpdating,
isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
languages = _ref.languages,
_ref$indicatesRequire = _ref.indicatesRequired,
indicatesRequired = _ref$indicatesRequire === void 0 ? TRANSLATION_PAIRS_COMMON.indicatesRequired : _ref$indicatesRequire;
var _useForm = reactHookForm.useForm(),
register = _useForm.register,
errors = _useForm.formState.errors,
control = _useForm.control,
handleSubmit = _useForm.handleSubmit,
reset = _useForm.reset,
setValue = _useForm.setValue,
_setError = _useForm.setError;
var getErrorMessage = function getErrorMessage(error) {
if (typeof error === "string") return error;
if (error && typeof error === "object" && "message" in error) {
var message = error.message;
return typeof message === "string" ? message : undefined;
}
return undefined;
};
var getNestedErrorMessage = function getNestedErrorMessage(key, nestedKey) {
var entry = errors[key];
if (!entry || typeof entry !== "object") return undefined;
var nested = entry[nestedKey];
return getErrorMessage(nested);
};
// setting data values
React.useEffect(function () {
if (!isEmpty(data)) {
schema.forEach(function (schemaItem) {
setValue(schemaItem.accessor, data[schemaItem.accessor]);
});
}
}, [data, reset, schema, setValue]);
// setting default values
React.useEffect(function () {
if (isEmpty(data)) {
var defaultValues = schema.reduce(function (values, schemaItem) {
if (typeof schemaItem.defaultValue !== "undefined") values[schemaItem.accessor] = schemaItem.defaultValue;
return values;
}, {});
reset(defaultValues);
}
}, [data, reset, schema]);
var inputRenderer = function inputRenderer(schema) {
var input;
if (schema.type) {
switch (schema.type) {
case "checkbox":
input = React__default["default"].createElement(Input.Checkbox, {
error: getErrorMessage(errors[schema.accessor]),
label: schema.label,
rest: register(schema.accessor, schema.validations || {}),
className: "kms_block",
disabled: isUpdating && typeof schema.editable !== "undefined" && !schema.editable
});
break;
case "select":
input = React__default["default"].createElement(Input.Select, {
options: schema.options,
label: schema.label,
error: getErrorMessage(errors[schema.accessor]),
rest: register(schema.accessor, schema.validations || {}),
className: "kms_w-full",
disabled: isUpdating && typeof schema.editable !== "undefined" && !schema.editable,
isRequired: schema.isRequired
});
break;
case "textarea":
input = React__default["default"].createElement(Input.Textarea, {
error: getErrorMessage(errors[schema.accessor]),
label: schema.label,
rest: register(schema.accessor, schema.validations || {}),
onInput: schema.onInput,
disabled: isUpdating && schema.editable,
className: "kms_w-full kms_p-2",
placeholder: schema.placeholder,
isRequired: schema.isRequired
});
break;
case "text":
case "number":
default:
if (Array.isArray(languages) && languages.length > 0 && schema.accessor === "names") {
input = languages.map(function (lang) {
return React__default["default"].createElement(Input, {
key: lang.code,
rest: register(schema.accessor + "." + lang.code, schema.validations || {}),
label: schema.label + " (" + lang.name + ")",
onInput: schema.onInput,
error: getNestedErrorMessage(schema.accessor, lang.code) ? getNestedErrorMessage(schema.accessor, lang.code) + (" (" + lang.name + ")") : undefined,
isRequired: schema.isRequired,
// @ts-ignore
type: schema.type,
className: "kms_w-full kms_p-2",
placeholder: (schema.placeholder || "") + " (" + lang.name + ")",
disabled: isUpdating && typeof schema.editable !== "undefined" && !schema.editable
});
});
} else input = React__default["default"].createElement(Input, {
rest: register(schema.accessor, schema.validations || {}),
label: schema.label,
onInput: schema.onInput,
isRequired: schema.isRequired,
error: getErrorMessage(errors[schema.accessor]),
type: schema.type,
className: "kms_w-full kms_p-2",
placeholder: schema.placeholder,
disabled: isUpdating && typeof schema.editable !== "undefined" && !schema.editable
});
break;
}
} else if (schema.Input) {
input = React__default["default"].createElement("div", {
className: "kms_input-wrapper"
}, React__default["default"].createElement("label", {
className: "kms_input-label"
}, schema.label), React__default["default"].createElement(reactHookForm.Controller, {
control: control,
name: schema.accessor,
rules: schema.validations,
render: function render(_ref2) {
var field = _ref2.field;
return schema.Input({
field: field,
error: getErrorMessage(errors[schema.accessor]),
setError: function setError(msg) {
return _setError.call(null, schema.accessor, {
type: "custom",
message: msg
});
}
});
}
}));
} else throw new Error("Please provide Input or type prop to render input Labeled " + schema.label);
return input;
};
var onFormSubmit = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
e.preventDefault();
handleSubmit(function (data) {
var formattedData = schema.reduce(function (values, schemaItem) {
// Do not add field if editing is disabled for it
if (isUpdating && typeof schemaItem.editable !== "undefined" && !schemaItem.editable) return values;
values[schemaItem.accessor] = data[schemaItem.accessor];
return values;
}, {});
onSubmit(formattedData);
})();
case 1:
return _context.a(2);
}
}, _callee);
}));
return function onFormSubmit(_x) {
return _ref3.apply(this, arguments);
};
}();
return React__default["default"].createElement("form", {
onSubmit: onFormSubmit,
ref: ref,
className: "kms_form"
}, schema.map(function (schema, i) {
return React__default["default"].createElement(React__default["default"].Fragment, {
key: i
}, inputRenderer(schema));
}), React__default["default"].createElement("p", null, React__default["default"].createElement("b", {
className: "kms_required_astrisk"
}, "*"), " ", indicatesRequired));
});
var FormActions = function FormActions(_ref) {
var _ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
_ref$primaryLabel = _ref.primaryLabel,
primaryLabel = _ref$primaryLabel === void 0 ? "Submit" : _ref$primaryLabel,
_ref$secondaryLabel = _ref.secondaryLabel,
secondaryLabel = _ref$secondaryLabel === void 0 ? "Cancel" : _ref$secondaryLabel,
onPrimaryButtonClick = _ref.onPrimaryButtonClick,
onSecondaryButtonClick = _ref.onSecondaryButtonClick;
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(Button, {
variant: "secondary",
label: secondaryLabel,
disabled: loading,
onClick: onSecondaryButtonClick
}), React__default["default"].createElement(Button, {
label: primaryLabel,
onClick: onPrimaryButtonClick,
disabled: loading
}));
};
var Modal = function Modal(_ref) {
var open = _ref.open,
onClose = _ref.onClose,
title = _ref.title,
children = _ref.children;
var nodeRef = React.useRef(null);
return React__default["default"].createElement(CSSTransition__default["default"], {
nodeRef: nodeRef,
"in": open,
timeout: {
enter: 250,
exit: 350
},
classNames: "kms_modal",
mountOnEnter: true,
unmountOnExit: true
}, React__default["default"].createElement("div", {
className: "kms_modal-wrapper-1",
ref: nodeRef,
"data-testid": "modal"
}, React__default["default"].createElement("div", {
className: "kms_modal-wrapper-2"
}, React__default["default"].createElement("div", {
className: "kms_modal-backdrop",
role: "button",
onClick: onClose,
onKeyDown: onClose,
tabIndex: 0
}), React__default["default"].createElement("div", {
className: "kms_modal-container-1"
}, React__default["default"].createElement("div", {
className: "kms_modal-container-2"
}, React__default["default"].createElement("div", {
className: "kms_modal-main"
}, React__default["default"].createElement("div", {
className: "kms_modal-header"
}, React__default["default"].createElement("span", {
className: "kms_modal-title"
}, title), React__default["default"].createElement("button", {
className: "kms_modal-close",
onClick: onClose,
onKeyDown: onClose,
tabIndex: -1,
"data-testid": "modal-close"
}, React__default["default"].createElement(CloseIcon, null))), React__default["default"].createElement("div", {
className: "kms_p-4"
}, children)))))));
};
var Pagination = function Pagination(_ref) {
var totalPages = _ref.totalPages,
currentPage = _ref.currentPage,
pageSize = _ref.pageSize,
setPageSize = _ref.setPageSize,
setCurrentPage = _ref.setCurrentPage,
totalRecords = _ref.totalRecords,
limits = _ref.limits,
disabledPagination = _ref.disabledPagination,
pageText = _ref.pageText,
showText = _ref.showText,
showingText = _ref.showingText,
ofText = _ref.ofText,
nextContent = _ref.nextContent,
previousContent = _ref.previousContent;
var pageHandler = function pageHandler(e) {
if (e.key === "Enter") {
// @ts-ignore
setCurrentPage(Number.parseInt(e.target.value, 10) || 1);
}
};
var handleNumbers = function handleNumbers(e) {
if (["e", "+", "-"].includes(e.key)) {
e.preventDefault();
}
};
var pageChange = function pageChange(e) {
if (e.target.value && Number(e.target.value) <= totalPages && e.target.value !== "0") {
setCurrentPage(Number.parseInt(e.target.value, 10));
}
};
return React__default["default"].createElement("div", {
className: "kms_pagination"
}, React__default["default"].createElement("div", null, showingText, " ", (currentPage - 1) * pageSize + 1, " - ", Math.min(currentPage * pageSize, totalRecords), " ", ofText, " ", totalRecords), React__default["default"].createElement("div", {
className: "kms_pagination-actions"
}, React__default["default"].createElement(Button, {
label: previousContent,
onClick: function onClick() {
return setCurrentPage(currentPage - 1);
},
disabled: currentPage - 1 === 0 || !!disabledPagination
}), React__default["default"].createElement("div", {
className: "kms_pagination-pager"
}, pageText, React__default["default"].createElement("input", {
className: "kms_input kms_input-sm kms_w-10",
maxLength: 3,
pattern: "([0-9]|[0-9]|[0-9])",
type: "number",
onKeyDown: handleNumbers,
onKeyPress: pageHandler,
value: currentPage,
onChange: pageChange,
disabled: !!disabledPagination
}), "/ ", totalPages), Array.isArray(limits) ? React__default["default"].createElement("select", {
value: pageSize,
className: "kms_input kms_input-sm",
onChange: function onChange(e) {
return setPageSize(Number(e.target.value));
},
disabled: !!disabledPagination
}, limits.map(function (pageSize) {
return React__default["default"].createElement("option", {
key: pageSize,
value: pageSize
}, showText, " ", pageSize);
})) : null, React__default["default"].createElement(Button, {
label: nextContent,
onClick: function onClick() {
return setCurrentPage(currentPage + 1);
},
disabled: currentPage === totalPages || !!disabledPagination
})));
};
Pagination.type = "Pagination";
var Table = function Table(_ref) {
var data = _ref.data,
columns = _ref.columns,
sortConfig = _ref.sortConfig,
_ref$sortable = _ref.sortable,
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
setSortConfig = _ref.setSortConfig,
loader = _ref.loader,
loading = _ref.loading,
_ref$noDataText = _ref.noDataText,
noDataText = _ref$noDataText === void 0 ? "No data found" : _ref$noDataText;
var getSortConfigClassName = React.useCallback(function (accessor, up) {
if (up === void 0) {
up = true;
}
if (!sortConfig || accessor !== sortConfig[0]) return "kms_sort-inactive";else {
if (up && sortConfig[1] === SORT_ASCENDING) return "";else if (!up && sortConfig[1] === SORT_DESCENDING) return "";else return "kms_sort-inactive";
}
}, [sortConfig]);
var sortConfigRenderer = React.useCallback(function (accessor) {
if (!sortable || EXCLUDE_SORT_COLUMNS.includes(String(accessor).toLocaleLowerCase())) return null;
return React__default["default"].createElement("div", {
className: "kms_sort-wrapper"
}, React__default["default"].createElement("span", {
"data-testid": true,
className: getSortConfigClassName(accessor, true)
}, "\u25B2"), React__default["default"].createElement("span", {
className: getSortConfigClassName(accessor, false)
}, "\u25BC"));
}, [getSortConfigClassName, sortable]);
var onClickSort = React.useCallback(function (id) {
if (setSortConfig && !EXCLUDE_SORT_COLUMNS.includes(String(id).toLocaleLowerCase())) {
if (sortConfig && id === sortConfig[0]) setSortConfig([id, sortConfig[1] === SORT_ASCENDING ? SORT_DESCENDING : SORT_ASCENDING]);else setSortConfig([id, SORT_ASCENDING]);
}
}, [setSortConfig, sortConfig]);
var _useTable = reactTable.useTable({
// @ts-ignore
columns: columns,
data: data
}),
getTableProps = _useTable.getTableProps,
getTableBodyProps = _useTable.getTableBodyProps,
headerGroups = _useTable.headerGroups,
prepareRow = _useTable.prepareRow,
rows = _useTable.rows;
return React__default["default"].createElement("div", {
className: "kms_table-container",
"data-testid": "table"
}, React__default["default"].createElement("div", {
className: "kms_table-height"
}, loading && loader ? React__default["default"].createElement("div", {
className: "kms_table-height"
}, loader) : React__default["default"].createElement("table", _extends({
className: "kms_table " + (data.length > 0 ? "" : "empty-table")
}, getTableProps()), React__default["default"].createElement("thead", {
className: "kms_thead"
}, headerGroups.map(function (headerGroup, i) {
return React__default["default"].createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
key: i
}), headerGroup.headers.map(function (column, j) {
return React__default["default"].createElement("th", _extends({}, column.getHeaderProps(), {
key: j,
onClick: function onClick() {
return onClickSort(column.id);
},
className: "cursor-pointer"
}), column.render("Header"), sortConfigRenderer(column.id));
}));
})), React__default["default"].createElement("tbody", _extends({
className: "kms_tbody"
}, getTableBodyProps()), rows.length > 0 ? rows.map(function (row, i) {
prepareRow(row);
return React__default["default"].createElement("tr", _extends({}, row.getRowProps(), {
key: i
}), row.cells.map(function (cell, j) {
return React__default["default"].createElement("td", _extends({}, cell.getCellProps(), {
key: j
}), cell.render("Cell"));
}));
}) : React__default["default"].createElement("tr", {
className: "empty-row"
}, React__default["default"].createElement("td", {
colSpan: (columns == null ? void 0 : columns.length) || 0
}, noDataText))))));
};
var DeleteModal = function DeleteModal(_ref) {
var formState = _ref.formState,
onClose = _ref.onClose,
name = _ref.name,
onConfirmDelete = _ref.onConfirmDelete,
permanentlyDelete = _ref.permanentlyDelete,
lossOfData = _ref.lossOfData,
pleaseType = _ref.pleaseType,
toProceedOrCancel = _ref.toProceedOrCancel,
confirm = _ref.confirm,
confirmationRequired = _ref.confirmationRequired;
var _useState = React.useState(""),
userInput = _useState[0],
setUserInput = _useState[1];
React.useEffect(function () {
setUserInput("");
}, [formState]);
return React__default["default"].createElement(Modal, {
open: formState === "DELETE",
onClose: onClose,
title: confirmationRequired
}, React__default["default"].createElement("div", {
className: "kms_delete-header"
}, React__default["default"].createElement("p", null, permanentlyDelete, " ", React__default["default"].createElement("b", null, name))), React__default["default"].createElement("div", {
className: "kms_delete-content"
}, React__default["default"].createElement("p", null, lossOfData), React__default["default"].createElement("p", {
className: "kms_delete-note"
}, pleaseType, " ", React__default["default"].createElement("b", {
className: "text-black font-bold"
}, name), " ", toProceedOrCancel)), React__default["default"].createElement("div", {
className: "kms_delete-actions"
}, React__default["default"].createElement(Input, {
placeholder: "Type Here",
className: "kms_delete-input",
wrapperClassName: "kms_w-full",
value: userInput,
onChange: function onChange(e) {
return setUserInput(e.target.value);
}
}), React__default["default"].createElement("div", {
className: "kms_delete-buttons"
}, React__default["default"].createElement(Button, {
label: confirm,
disabled: userInput !== name,
onClick: onConfirmDelete
}))));
};
var SmallCancel = function SmallCancel() {
return React__default["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "12",
height: "12"
}, React__default["default"].createElement("path", {
fill: "none",
d: "M0 0h24v24H0z"
}), React__default["default"].createElement("path", {
fill: "#fff",
d: "M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
}));
};
var ImageUpload = function ImageUpload(_ref) {
var className = _ref.className,
text = _ref.text,
maxSize = _ref.maxSize,
setImgId = _ref.setImgId,
onError = _ref.onError,
error = _ref.error,
_ref$imgId = _ref.imgId,
imgId = _ref$imgId === void 0 ? "" : _ref$imgId,
onImageUpload = _ref.onImageUpload,
onImageRemove = _ref.onImageRemove,
baseUrl = _ref.baseUrl;
var _useState = React.useState(undefined),
img = _useState[0],
setImg = _useState[1];
var _useDropzone = reactDropzone.useDropzone({
// accept: {
// "image/*": [".jpeg,.jpg,.png"],
// },
multiple: false,
minSize: 0,
maxSize: maxSize,
onDrop: function () {
var _onDrop = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(acceptedFiles, rejectedFiles) {
var _rejectedFiles$, regex, files, response, _t;
return _regenerator().w(function (_context) {
while (1) switch (_context.p = _context.n) {
case 0:
_context.p = 0;
onError("");
if (!((acceptedFiles == null ? void 0 : acceptedFiles.length) > 0)) {
_context.n = 4;
break;
}
regex = /\.(png|jpeg|jpg|svg)$/gi;
files = acceptedFiles.filter(function (file) {
return regex.test(file.name);
});
if (!files[0]) {
_context.n = 2;
break;
}
_context.n = 1;
return onImageUpload(files[0]);
case 1:
response = _context.v;
if (response) {
setImg(response.fileUrl);
setImgId(response.fileId);
}
_context.n = 3;
break;
case 2:
throw new Error("File type must be .png, .jpg, .jpeg, .gif, or .svg");
case 3:
_context.n = 5;
break;
case 4:
if (!((rejectedFiles == null || (_rejectedFiles$ = rejectedFiles[0]) == null || (_rejectedFiles$ = _rejectedFiles$.errors) == null || (_rejectedFiles$ = _rejectedFiles$[0]) == null ? void 0 : _rejectedFiles$.message) === "File is larger than 10485760 bytes")) {
_context.n = 5;
break;
}
throw new Error("File is larger than 10mb");
case 5:
_context.n = 7;
break;
case 6:
_context.p = 6;
_t = _context.v;
onError(_t.message);
case 7:
return _context.a(2);
}
}, _callee, null, [[0, 6]]);
}));
function onDrop(_x, _x2) {
return _onDrop.apply(this, arguments);
}
return onDrop;
}()
}),
getRootProps = _useDropzone.getRootProps,
getInputProps = _useDropzone.getInputProps;
var onRemoveFile = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(event) {
var _t2;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
event.preventDefault();
_context2.p = 1;
if (!(onImageRemove && imgId)) {
_context2.n = 2;
break;
}
_context2.n = 2;
return onImageRemove(typeof imgId === "string" ? imgId : imgId._id);
case 2:
setImgId(null);
setImg("");
_context2.n = 4;
break;
case 3:
_context2.p = 3;
_t2 = _context2.v;
onError(_t2.message);
case 4:
return _context2.a(2);
}
}, _callee2, null, [[1, 3]]);
}));
return function onRemoveFile(_x3) {
return _ref2.apply(this, arguments);
};
}();
React.useEffect(function () {
if (imgId && typeof imgId === "object") {
setImg(build_path(baseUrl, imgId.uri));
}
}, [imgId]);
var showImage = function showImage(fileUrl) {
return React__default["default"].createElement("div", {
className: "kms_img-wrapper"
}, React__default["default"].createElement("img", {
src: "" + fileUrl,
alt: "",
className: "kms_img-wrapper-img"
}), React__default["default"].createElement("button", {
onClick: onRemoveFile,
className: "kms_img-wrapper-del"
}, React__default["default"].createElement(SmallCancel, null)));
};
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
className: "kms_img-upload-wrapper-1"
}, React__default["default"].createElement("div", {
className: "kms_img-upload-wrapper-2"
}, !isEmpty(img) && isString(img) && img ? showImage(img) : React__default["default"].createElement("div", _extends({}, getRootProps({
className: className
})), React__default["default"].createElement("input", _extends({}, getInputProps(), {
id: "file-upload"
})), text))), error && React__default["default"].createElement("p", {
className: "kms_input-error"
}, error));
};
var ImageUpload$1 = /*#__PURE__*/React__default["default"].memo(ImageUpload);
var DNDTable = function DNDTable(_ref) {
var data = _ref.data,
columns = _ref.columns,
sortConfig = _ref.sortConfig,
_ref$sortable = _ref.sortable,
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
setSortConfig = _ref.setSortConfig,
loader = _ref.loader,
loading = _ref.loading,
onMove = _ref.onMove,
_ref$dragEnable = _ref.dragEnable,
dragEnable = _ref$dragEnable === void 0 ? false : _ref$dragEnable,
_ref$noDataText = _ref.noDataText,
noDataText = _ref$noDataText === void 0 ? "No data found" : _ref$noDataText;
var getSortConfigClassName = React.useCallback(function (accessor, up) {
if (up === void 0) {
up = true;
}
if (!sortConfig || accessor !== sortConfig[0] || dragEnable) return "kms_sort-inactive";else {
if (up && sortConfig[1] === SORT_ASCENDING) return "";else if (!up && sortConfig[1] === SORT_DESCENDING) return "";else return "kms_sort-inactive";
}
}, [sortConfig, dragEnable]);
var sortConfigRenderer = React.useCallback(function (accessor) {
if (!sortable || EXCLUDE_SORT_COLUMNS.includes(String(accessor).toLocaleLowerCase()) || dragEnable) return null;
return React__default["default"].createElement("div", {
className: "kms_sort-wrapper"
}, React__default["default"].createElement("span", {
"data-testid": true,
className: getSortConfigClassName(accessor, true)
}, "\u25B2"), React__default["default"].createElement("span", {
className: getSortConfigClassName(accessor, false)
}, "\u25BC"));
}, [getSortConfigClassName, sortable, dragEnable]);
var onClickSort = React.useCallback(function (id) {
if (setSortConfig && !EXCLUDE_SORT_COLUMNS.includes(String(id).toLocaleLowerCase()) && !dragEnable) {
if (sortConfig && id === sortConfig[0]) setS