react-form-builder-devextreme
Version:
A complete form builder for react. Some changes to design
189 lines (187 loc) • 8.47 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _UUID = _interopRequireDefault(require("./UUID"));
var _popup = require("devextreme-react/popup");
var _axiosClient = _interopRequireDefault(require("./axiosClient"));
var _devextremeReact = require("devextreme-react");
var _check_box = _interopRequireDefault(require("devextreme/ui/check_box"));
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 && Object.prototype.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; }
var FormElementsPermission = function FormElementsPermission(props) {
var _useState = (0, _react.useState)(props.element),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
element = _useState2[0],
setElement = _useState2[1];
var _useState3 = (0, _react.useState)(props.data),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
data = _useState4[0],
setData = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
dirty = _useState6[0],
setDirty = _useState6[1];
var _useState7 = (0, _react.useState)(null),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
signPermissionData = _useState8[0],
setSignPermissionData = _useState8[1];
(0, _react.useEffect)(function () {
if (!signPermissionData) {
(0, _axiosClient["default"])().request({
url: "/sign-permissions?populate=*&sort=order:asc",
method: 'get'
}).then(function (response) {
var data = response.data.data.map(function (s) {
var name = s.attributes.name;
var itemID = s.id;
var signPermission = s.attributes.sign_permission;
var attName = s.attributes.name.replace(/\w+/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1);
}).replace(/\s/g, '');
s.attributes.attrName = attName;
s.attributes.displayName = name;
return s;
});
setSignPermissionData(data);
})["catch"](function (err) {
setSignPermissionData(null);
})["finally"](function () {});
}
}, []);
(0, _react.useEffect)(function () {
var _loop = function _loop(index) {
var checkbox = _check_box["default"].getInstance(document.getElementById('checkBox' + signPermissionData[index].id));
if (signPermissionData[index].attributes.sign_permission.data === null) checkbox.option('disabled', false);else signPermissionData[index].checkDisabled === false ? checkbox.option('disabled', false) : checkbox.option('disabled', true);
if (props.element.sign && props.element.sign.find(function (l) {
return l.id === signPermissionData[index].id;
})) {
checkbox.option('value', true);
}
};
for (var index = 0; index < (signPermissionData === null || signPermissionData === void 0 ? void 0 : signPermissionData.length); index++) {
_loop(index);
}
}, [signPermissionData]);
var onCheckBoxValueChanged = function onCheckBoxValueChanged(e, item) {
//props.element.user = props.preview.props.user;
if (e) {
if (!props.element.sign) {
props.element.sign = [];
}
if (props.element.sign.length > 0 && props.element.sign.find(function (p) {
return p.id === item.id;
})) {
var sign = props.element.sign.find(function (p) {
return p.id === item.id;
});
sign.attributes.permissions = item.attributes.users_permissions_roles.data.map(function (r) {
var s = {
key: r.id,
name: r.attributes.name
};
return s;
});
sign.checkClicked = true;
} else {
var permissions = item.attributes.users_permissions_roles.data.map(function (r) {
var s = {
key: r.id,
name: r.attributes.name
};
return s;
});
item.attributes.permissions = permissions;
item.checkClicked = true;
props.element.sign.push(item);
}
} else {
var index = -1;
props.element.sign.find(function (p, i) {
if (p.id === item.id) index = i;
});
props.element.sign.splice(index, 1);
}
setElement(props.element);
props.updateElement(element);
updateCheckBox(e, item);
};
var updateCheckBox = function updateCheckBox(e, item) {
if (!e) {
signPermissionData.forEach(function (element) {
var _element$attributes$s;
if (((_element$attributes$s = element.attributes.sign_permission.data) === null || _element$attributes$s === void 0 ? void 0 : _element$attributes$s.id) === item.id) {
var checkbox = _check_box["default"].getInstance(document.getElementById('checkBox' + element.id));
checkbox.option('value', false);
}
});
}
for (var index = 0; index < signPermissionData.length; index++) {
var checkbox = _check_box["default"].getInstance(document.getElementById('checkBox' + signPermissionData[index].id));
if (signPermissionData[index].attributes.sign_permission.data != null) {
if (signPermissionData[index].attributes.sign_permission.data.id === item.id) {
if (e === true) {
checkbox.option('disabled', false);
signPermissionData[index].checkDisabled = false;
} else {
checkbox.option('disabled', true);
signPermissionData[index].checkDisabled = true;
}
} else {
var dep = _check_box["default"].getInstance(document.getElementById('checkBox' + signPermissionData[index].attributes.sign_permission.data.id));
if (dep._props.value === true) {
checkbox.option('disabled', false);
signPermissionData[index].checkDisabled = false;
} else {
checkbox.option('disabled', true);
signPermissionData[index].checkDisabled = true;
}
}
}
// console.log(signPermissionData[index]);
}
};
if (dirty) {
props.element.dirty = true;
}
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
className: "edit-permission-panel"
}), /*#__PURE__*/_react["default"].createElement(_popup.Popup, {
visible: true,
dragEnabled: false,
hideOnOutsideClick: true,
showCloseButton: true,
showTitle: true,
title: props.element.text,
container: ".edit-permission-panel",
width: 600,
height: 600,
onHiding: props.manualEditPermissionModeOff
}, /*#__PURE__*/_react["default"].createElement(_popup.Position, {
at: "center",
my: "center",
collision: "fit"
}), signPermissionData === null || signPermissionData === void 0 ? void 0 : signPermissionData.map(function (item, i) {
var userID = item.id;
// console.log(item);
return /*#__PURE__*/_react["default"].createElement(_devextremeReact.CheckBox, {
className: "CheckBoxField",
key: "checkBox".concat(item.id),
id: "checkBox".concat(item.id),
onValueChange: function onValueChange(e) {
return onCheckBoxValueChanged(e, item, userID);
},
text: item.attributes.displayName
// disabled={isDisabled(item)}
});
})));
};
FormElementsPermission.defaultProps = {
className: 'edit-element-fields'
};
var _default = exports["default"] = FormElementsPermission;