react-form-builder-devextreme
Version:
A complete form builder for react. Some changes to design
156 lines (154 loc) • 6.36 kB
JavaScript
"use strict";
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 _button = _interopRequireDefault(require("devextreme-react/button"));
var _textBox = require("devextreme-react/text-box");
var _validationGroup = _interopRequireDefault(require("devextreme-react/validation-group"));
var _validator = _interopRequireWildcard(require("devextreme-react/validator"));
var _popup = _interopRequireDefault(require("devextreme-react/popup"));
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; }
// Import the Popup component
var ComponentSignButton = function ComponentSignButton(_ref) {
var data = _ref.data,
onClick = _ref.onClick,
mutable = _ref.mutable,
readOnly = _ref.readOnly,
handleSubmit = _ref.handleSubmit,
updatePropsData = _ref.updatePropsData,
parentId = _ref.parentId;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
commentBoxVisible = _useState2[0],
setCommentBoxVisible = _useState2[1];
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
comment = _useState4[0],
setComment = _useState4[1];
var validationGroupRef = (0, _react.useRef)(null);
var undoRef = /*#__PURE__*/_react["default"].createRef();
var toggleCommentBox = function toggleCommentBox(e) {
e.preventDefault();
setCommentBoxVisible(function (prev) {
return !prev;
});
};
var handleCommentChange = function handleCommentChange(e) {
setComment(e.value);
};
var handleRejectClick = function handleRejectClick(e) {
var result = validationGroupRef.current.instance.validate();
if (result.isValid) {
// proceed with the reject logic if comment text is valid
onClickReject(e);
}
};
var onClickReject = function onClickReject(e) {
var t = onClick({
style: {
backgroundColor: 'rgba(250, 129, 129, 1)'
},
icon: 'check',
undoVisibility: true,
sign: data,
comment: comment,
action: 'reject',
clicked: true,
rejected: true,
parentId: parentId,
e: e
});
if (updatePropsData) updatePropsData();
if (handleSubmit) handleSubmit();
};
var handleApproveClick = function handleApproveClick(e) {
// ... existing approve handling logic
onClickApprove(e);
};
var onClickApprove = function onClickApprove(e) {
// e.preventDefault();
var t = onClick({
style: {
backgroundColor: 'rgba(198, 239, 226, 1)'
},
icon: 'check',
undoVisibility: true,
sign: data,
comment: comment,
action: 'approve',
rejected: false,
clicked: true,
parentId: parentId,
e: e
});
if (updatePropsData) updatePropsData();
if (handleSubmit) handleSubmit();
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "component-sign"
}, /*#__PURE__*/_react["default"].createElement(_validationGroup["default"], {
ref: validationGroupRef
}, !commentBoxVisible && /*#__PURE__*/_react["default"].createElement("a", {
href: "#",
className: "is-isolated fas fa-comment",
onClick: toggleCommentBox,
title: data.comment || comment,
style: {
display: readOnly ? 'inline-block' : mutable ? 'none' : 'inline-block',
disabled: data.disabled
}
}), /*#__PURE__*/_react["default"].createElement(_popup["default"], {
visible: commentBoxVisible,
onHiding: function onHiding() {
return setCommentBoxVisible(false);
},
dragEnabled: true,
showCloseButton: true,
title: "Comment"
// You can adjust the width and height as per your needs
,
width: 300,
height: 250
}, /*#__PURE__*/_react["default"].createElement(_textBox.TextBox, {
defaultValue: data.comment,
onValueChanged: handleCommentChange,
placeholder: "Enter your comment"
}, /*#__PURE__*/_react["default"].createElement(_validator["default"], null, /*#__PURE__*/_react["default"].createElement(_validator.RequiredRule, {
message: "Comment is required"
}))), /*#__PURE__*/_react["default"].createElement(_button["default"], {
text: "Submit",
type: "default",
onClick: function onClick() {
return setCommentBoxVisible(false);
}
})), /*#__PURE__*/_react["default"].createElement(_button["default"], {
className: "CheckButton",
key: data.id,
text: data.attributes.text || data.attributes.displayName,
style: data.style,
id: "button".concat(data.id),
name: "button".concat(data.id),
disabled: readOnly ? true : mutable ? data.disabled : true,
icon: data.icon,
hint: "Click to Approve",
onClick: handleApproveClick
}), data.showReject && !data.disabled && /*#__PURE__*/_react["default"].createElement(_button["default"], {
className: "CheckButton reject",
key: "reject-".concat(data.id),
text: data.attributes.text || 'Reject',
style: data.style,
id: "button-reject-".concat(data.id),
name: "button-reject-".concat(data.id),
disabled: readOnly ? true : mutable ? data.disabled : true,
icon: data.icon,
hint: "Click to Reject",
onClick: handleRejectClick
})));
};
var _default = exports["default"] = ComponentSignButton;