react-form-builder-devextreme
Version:
A complete form builder for react. Some changes to design
145 lines (142 loc) • 6.75 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 _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; }
// require("./scss/application.scss");
var ComponentRight = function ComponentRight(props) {
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
signPermissionData = _useState2[0],
setSignPermissionData = _useState2[1];
(0, _react.useEffect)(function () {
for (var index = 0; index < (signPermissionData === null || signPermissionData === void 0 ? void 0 : signPermissionData.length); 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 checkbox.option('disabled', true);
}
}, [signPermissionData]);
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);else checkbox.option('disabled', 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);else checkbox.option('disabled', true);
}
}
// console.log(signPermissionData[index]);
}
props.updateElement(props.data);
};
(0, _react.useEffect)(function () {
if (!signPermissionData) {
(0, _axiosClient["default"])().request({
url: "/sign-permissions?populate=*&sort=order:asc",
method: 'get'
}).then(function (response) {
setSignPermissionData(response.data.data);
})["catch"](function (err) {
setSignPermissionData(null);
})["finally"](function () {});
}
}, []);
var onCheckBoxValueChanged = function onCheckBoxValueChanged(e, item, userID) {
//console.log(item);
var name = item.attributes.name;
var itemID = item.id;
var signPermission = item.attributes.sign_permission;
var attName = item.attributes.name.replace(/\w+/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1);
}).replace(/\s/g, '');
if (e) {
if (!props.data.sign) {
props.data.sign = [];
}
if (props.data.sign.length > 0 && props.data.sign.find(function (p) {
return p.name === attName;
}).length > 0) {
props.data.sign.find(function (p) {
return p.name === attName;
}).permissions = item.attributes.users_permissions_roles.data.map(function (r) {
var s = {
key: r.id,
name: r.attributes.name
};
return s;
});
} else {
var permissions = item.attributes.users_permissions_roles.data.map(function (r) {
var s = {
key: r.id,
name: r.attributes.name
};
return s;
});
var sign = {
name: attName,
displayName: name,
permissions: permissions,
key: itemID,
id: itemID,
sign_permission: signPermission
};
props.data.sign.push(sign);
}
} else {
var index = -1;
props.data.sign.find(function (p, i) {
if (p.name === attName) index = i;
});
props.data.sign.splice(index, 1);
}
updateCheckBox(e, item);
// props.data[name] = item.attributes.users_permissions_roles.data.map((r) => {
// let s = { key: r.id, name: r.attributes.name };
// return s;
// });
// props._updateElement(this);
};
if (props.mutable) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: "component-right"
}, props.data.pageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
className: "preview-page-break"
}, "Page Break"), /*#__PURE__*/_react["default"].createElement("div", {
className: "CheckBoxField"
}, signPermissionData === null || signPermissionData === void 0 ? void 0 : signPermissionData.map(function (item) {
var userID = item.id;
return /*#__PURE__*/_react["default"].createElement(_devextremeReact.CheckBox, {
className: "CheckBoxField",
key: "checkBox".concat(item.id),
id: "checkBox".concat(item.id),
defaultValue: false,
onValueChange: function onValueChange(e) {
return onCheckBoxValueChanged(e, item, userID);
}
// disabled={isDisabled(item)}
});
})));
};
var _default = exports["default"] = ComponentRight;