@arudovwen/react-form-builder
Version:
A complete form builder for react.
2,489 lines • 89.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactSelect = _interopRequireDefault(require("react-select"));
var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
var _reactBootstrapSlider = _interopRequireDefault(require("react-bootstrap-slider"));
var _axios = _interopRequireDefault(require("axios"));
var _debounce = _interopRequireDefault(require("debounce"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactCurrencyInputField = _interopRequireDefault(require("react-currency-input-field"));
var _starRating = _interopRequireDefault(require("./star-rating"));
var _datePicker = _interopRequireDefault(require("./date-picker"));
var _componentHeader = _interopRequireDefault(require("./component-header"));
var _componentLabel = _interopRequireDefault(require("./component-label"));
var _myxss = _interopRequireDefault(require("./myxss"));
var _errorMessage = _interopRequireDefault(require("../error-message"));
var _successMessage = _interopRequireDefault(require("../success-message"));
var _getExt = require("../utils/getExt");
var _ImageViewer = _interopRequireDefault(require("../ImageViewer"));
var _TableInputElement = _interopRequireDefault(require("../TableInputElement"));
var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
var _DynamicInput2 = _interopRequireDefault(require("../DynamicInput"));
var _DataGrid = _interopRequireDefault(require("./DataGrid"));
var _CustomSearchSelect = _interopRequireDefault(require("./CustomSearchSelect"));
var _cascadeDropdown = _interopRequireDefault(require("./cascade-dropdown"));
var _ArithmeticComponentView = _interopRequireDefault(require("./ArithmeticComponentView"));
/* eslint-disable no-undef */
// eslint-disable-next-line max-classes-per-file
const FormElements = {};
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const defaultFileType = "image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/bmp, image/tiff, image/x-icon, image/heic, " + "application/pdf, application/msword, " + "application/vnd.openxmlformats-officedocument.wordprocessingml.document, " + "application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, " + "application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, " + "text/csv";
function isValidGuid(guid) {
const guidPattern = /^[{]?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}[}]?$/;
return guidPattern.test(guid);
}
function getAllFieldValues(data, values) {
if (!Array.isArray(data) || typeof values !== "object" || !values) {
return [];
}
let result = [];
for (const item of data) {
if (item.field_name && values.hasOwnProperty(item.field_name) && values[item.field_name]) {
result.push(values[item.field_name]);
}
}
return result;
}
const validateFile = (file, fileType) => {
if (file.size > MAX_FILE_SIZE) {
return "File size exceeds 5MB limit";
}
if (fileType && !fileType.includes(file.type)) {
return "Invalid file type";
}
return null;
};
class Header extends _react.default.Component {
render() {
// const headerClasses = `dynamic-input ${this.props.data.element}-input`;
let classNames = "static";
if (this.props.data.bold) {
classNames += " bold";
}
if (this.props.data.italic) {
classNames += " italic";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("h3", {
className: classNames,
dangerouslySetInnerHTML: {
__html: _myxss.default.process(this.props.data.content)
}
}));
}
}
class Paragraph extends _react.default.Component {
render() {
let classNames = "static";
if (this.props.data.bold) {
classNames += " bold";
}
if (this.props.data.italic) {
classNames += " italic";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("p", {
className: classNames,
dangerouslySetInnerHTML: {
__html: _myxss.default.process(this.props.data.content)
}
}));
}
}
class Label extends _react.default.Component {
render() {
let classNames = "static";
if (this.props.data.bold) {
classNames += " bold";
}
if (this.props.data.italic) {
classNames += " italic";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("label", {
className: `${classNames} form-label`,
dangerouslySetInnerHTML: {
__html: _myxss.default.process(this.props.data.content)
}
}));
}
}
class LineBreak extends _react.default.Component {
render() {
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("hr", null));
}
}
class DynamicInput extends _react.default.Component {
constructor(props) {
super(props);
// Handle input changes and invoke the debounced validation function
(0, _defineProperty2.default)(this, "handleChange", event => {
const {
value
} = event.target;
const stringValue = getAllFieldValues(this.props.data.mappedFields, this.props.resultData).join("/");
this.debouncedValidateError(`${value}/${stringValue}`);
});
// Handle validation errors, updating errorText in state
(0, _defineProperty2.default)(this, "handleError", value => {
const {
url
} = this.props.data;
if (!url) {
this.setState({
errorText: "Please add a valid API URL"
});
if (this.submitBtnRef.current) {
this.submitBtnRef.current.disabled = true; // Disable the submit button if no URL
}
} else {
this.setState({
errorText: ""
});
if (this.submitBtnRef.current) {
this.submitBtnRef.current.disabled = false; // Enable submit button if URL exists
}
this.debouncedValidateInput(value);
}
});
this.inputField = /*#__PURE__*/_react.default.createRef();
this.submitBtnRef = /*#__PURE__*/_react.default.createRef(); // Add a ref for the submit button
// Use state for managing errorText, successText, and validating state
this.state = {
errorText: "",
successText: "",
validating: false,
description: "",
objectFileData: []
};
// Debounced functions
this.debouncedValidateInput = (0, _debounce.default)(this.validateInput, 1200);
this.debouncedValidateError = (0, _debounce.default)(this.handleError, 1500);
this.getFileUrl = this.getFileUrl.bind(this);
}
componentDidMount() {
if (this.props.defaultValue) {
this.validateInput(this.props.defaultValue);
}
}
async getFileUrl(id) {
try {
const {
fileUrl
} = this.props.data;
const tempFileUrl = fileUrl || "https://qa-document-management.sterling.ng/api/v1/docs/preview";
const {
data,
status
} = await _axios.default.get(`${tempFileUrl}/${id}?documentType=Others`);
if (status === 200 && data?.data?.blobString) {
return data.data.blobString;
}
} catch (error) {
console.error("Error fetching file URL:", error);
}
return id;
}
async flattenFirstObjectInArray(obj) {
try {
const result = {
...obj
};
Object.keys(obj).forEach(key => {
if (Array.isArray(obj[key]) && obj[key].length > 0 && typeof obj[key][0] === "object") {
Object.assign(result, obj[key][0]); // Merge first object in array
delete result[key]; // Remove original array key
}
});
return result;
} catch (error) {
console.log(error);
return obj; // Return the original object if an error occurs
}
}
// Function to validate input using an API request
// eslint-disable-next-line no-unused-vars
async validateInput(value) {
const {
url,
method,
apiKey,
responseType
} = this.props.data;
// const imageItems = ['photograph', 'signature'];
// Validate if URL is provided
if (!url) {
this.setState({
errorText: "Please add a valid API URL"
});
return;
}
// API call to validate the input
try {
this.setState({
validating: true
});
// Make the API call using the method provided (GET by default)
const {
data,
status
} = await _axios.default[method || "get"](`${url}/${value}`, {
headers: {
Authorization: apiKey
}
});
if (status === 200) {
if ((data?.data?.status || data?.status) === true) {
this.setState({
successText: "Validation success",
errorText: "",
description: data.data?.description || data?.description
});
// Check if responseType is object and process the description
if (responseType === "object") {
const ObjData = data.data?.description || data?.description;
const flattendObj = await this.flattenFirstObjectInArray(ObjData);
// Map through the object and handle errors individually for each item
const mappedData = await Promise.all(Object.keys(flattendObj)?.map(async item => {
const newObj = {};
try {
if (isValidGuid(flattendObj[item])) {
newObj[item] = await this.getFileUrl(flattendObj[item]);
} else {
newObj[item] = flattendObj[item];
}
} catch (fileError) {
// Handle the error for each file fetch and continue
console.error(`Error fetching file URL for ${item}:`, fileError);
newObj[item] = flattendObj[item]; // Fallback to original value if error occurs
}
return newObj;
}));
// After resolving all the promises, flatten the result
const flattenedData = mappedData.reduce((acc, obj) => ({
...acc,
...obj
}), {});
this.setState({
objectFileData: flattenedData
});
}
// Enable the submit button after success
if (this.submitBtnRef.current) {
this.submitBtnRef.current.disabled = false; // Enable the submit button
}
} else {
// If validation fails, disable the submit button and reset description
if (this.submitBtnRef.current) {
this.submitBtnRef.current.disabled = true; // Disable the submit button
}
this.setState({
errorText: "Data not found!",
successText: "",
description: ""
});
}
}
} catch (error) {
console.log(error);
// Handle errors during API validation
this.setState({
errorText: error?.response?.data?.message || "Validation failed, please try again",
successText: "",
description: ""
});
// Disable the submit button if an error occurs
if (this.submitBtnRef.current) {
this.submitBtnRef.current.disabled = true; // Disable the submit button on error
}
} finally {
// Set validating state to false once the validation is complete
this.setState({
validating: false
});
}
}
render() {
const {
data,
mutable,
defaultValue,
read_only,
style
} = this.props;
const {
field_name,
maxLength,
responseType,
allowEdit
} = data;
// Default props setup for the input field
const props = {
type: "text",
className: "form-control",
name: field_name,
disabled: read_only && !allowEdit ? "disabled" : undefined,
maxLength: maxLength || undefined,
responseType: responseType || "string"
};
// If mutable, add defaultValue and ref
if (mutable) {
props.defaultValue = defaultValue;
props.ref = this.inputField;
}
// Base classes for the input container
let baseClasses = "SortableItem rfb-item";
if (data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
function addSpaceToUppercase(str) {
return str.replace(/([A-Z])/g, " $1").trim();
}
function isImage(value) {
if (!value || typeof value !== "string") return false;
// Matches data URLs for common image types
const base64DataUrlPattern = /^data:image\/(jpeg|jpg|png|gif|bmp|webp);base64,/i;
// Matches raw base64 string for known image signatures
// JPEG usually starts with /9j/, PNG with iVBOR...
const rawBase64ImageHeaders = [/^\/9j\//,
// JPEG
/^iVBOR/,
// PNG
/^R0lGOD/,
// GIF
/^Qk0/,
// BMP
/^UklGR/ // WebP
];
// Matches raw base64 string of sufficient length (generic fallback)
const rawBase64Pattern = /^[A-Za-z0-9+/]{100,}={0,2}$/;
// Matches image file URLs ending with common extensions
const urlPattern = /\.(jpeg|jpg|png|gif|bmp|webp)(\?.*)?$/i;
// Check all patterns
return base64DataUrlPattern.test(value) || urlPattern.test(value) || rawBase64Pattern.test(value) || rawBase64ImageHeaders.some(pattern => pattern.test(value));
}
function getImageDataUrl(rawBase64) {
if (!rawBase64 || typeof rawBase64 !== "string") return null;
// Trim and take first few chars for detection
const header = rawBase64.substring(0, 10);
let mimeType = null;
if (header.startsWith("/9j/")) {
mimeType = "image/jpeg";
} else if (header.startsWith("iVBOR")) {
mimeType = "image/png";
} else if (header.startsWith("R0lGOD")) {
mimeType = "image/gif";
} else if (header.startsWith("Qk")) {
mimeType = "image/bmp";
} else if (header.startsWith("UklGR")) {
mimeType = "image/webp";
}
if (mimeType) {
return `data:${mimeType};base64,${rawBase64}`;
} else {
console.warn("Unknown image type or invalid base64");
return rawBase64;
}
}
// https://api.dev.workflow.kusala.com.ng/api/v1/WorkFlows/validate
// https://qa-document-management.sterling.ng/api/v1/docs/preview/243bf8a6-7903-4a8e-bd2a-943558c58a69?documentType=Others
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "clearfix pr-6 d-flex align-items-center position-relative"
}, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, props, {
onChange: this.handleChange
})), this.state.validating && /*#__PURE__*/_react.default.createElement("div", {
className: "align-middle spinner-border spinner-border-sm text-secondary position-absolute",
style: {
right: "16px"
},
role: "status"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "sr-only"
}, "Validating..."))), this.state.errorText && /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
message: this.state.errorText
}), this.state.successText && !this.state.description && /*#__PURE__*/_react.default.createElement(_successMessage.default, {
message: this.state.successText
}), this.state.description && responseType === "string" && /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "6px"
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: "block pt-1 text-capitalize text-14 font-weight-bold"
}, this.state.description)), this.state.objectFileData && responseType === "object" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.keys(this.state.objectFileData)?.map(item => /*#__PURE__*/_react.default.createElement("div", {
key: item,
style: {
marginTop: "16px"
}
}, /*#__PURE__*/_react.default.createElement("label", {
className: "block pt-1 text-capitalize text-14 font-weight-bold form-label"
}, /*#__PURE__*/_react.default.createElement("span", null, addSpaceToUppercase(item), " ")), !isImage(this.state.objectFileData[item]) ? /*#__PURE__*/_react.default.createElement("div", {
className: "form-control loaded_file",
style: {
background: "#efefef4d"
}
}, typeof this.state.objectFileData[item] !== "object" ? this.state.objectFileData[item] : "N/a") : /*#__PURE__*/_react.default.createElement("div", {
className: ""
}, this.state.objectFileData[item] ? /*#__PURE__*/_react.default.createElement(_ImageViewer.default, {
imageUrl: getImageDataUrl(this.state.objectFileData[item])
}) : "No file found"))))));
}
}
class DocumentSelect extends _react.default.Component {
constructor(props) {
super(props);
this.state = {
errorText: "",
successText: "",
description: "",
fileLoading: false,
documents: [],
isSigned: false,
signatures: [],
signature: null
};
this.intervalId = null;
this.requestId = new URLSearchParams(window.location.search).get("workflowId");
}
async componentDidMount() {
const {
data
} = this.props;
const {
documentId
} = data;
let parsedDocumentId;
try {
parsedDocumentId = documentId ? JSON.parse(documentId) : null;
} catch (error) {
console.error("Invalid JSON in documentId:", error);
return;
}
if (parsedDocumentId?.value) {
this.checkDocument(parsedDocumentId.value);
if (this.state.signatures.length === 0) {
this.getSignatures(parsedDocumentId.value);
}
// Set interval to check document signature status
this.intervalId = setInterval(() => {
if (!this.state.isSigned) {
this.checkDocument(parsedDocumentId.value);
} else {
clearInterval(this.intervalId);
}
}, 10000); // 10 seconds
}
}
componentWillUnmount() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
}
async checkDocument(id) {
try {
const token = window.localStorage.getItem("token");
const tempUser = JSON.parse(window.localStorage.getItem("LoginInfo") || "{}");
const position = tempUser?.role ?? "ed";
this.setState({
fileLoading: true
});
const config = {
headers: {
Authorization: `Bearer ${token}`
}
};
const response = await _axios.default.get(`https://api.dev.document.kusala.com.ng/api/v1/DocumentSignature/position-signature-status?documentId=${id}&position=${position}&requestId=${this.requestId}&fromWorkflow=true`, config);
if (response.status === 200) {
this.setState({
isSigned: response.data.data?.isSigned,
signature: response.data.data
});
if (response.data.data?.isSigned) {
clearInterval(this.intervalId);
}
}
} catch (error) {
console.error("Error checking document status:", error);
if (error.response.data.message === "No document signature for this position") {
clearInterval(this.intervalId);
}
} finally {
this.setState({
fileLoading: false
});
}
}
// eslint-disable-next-line consistent-return
async getSignatures(id) {
try {
const token = window.localStorage.getItem("token");
const config = {
headers: {
Authorization: `Bearer ${token}`
}
};
const response = await _axios.default.get(`https://api.dev.document.kusala.com.ng/api/v1/DocumentSignature/get-signatures-request?documentId=${id}&requestId=${this.requestId}`, config);
if (response.status === 200) {
this.setState({
signatures: response.data?.data?.data || []
});
}
} catch (error) {
console.error("Error fetching signatures:", error);
}
}
isPathValid() {
const {
pathname
} = window.location;
const validPaths = ["/forms/editor", "/run/workflow/approve", "/run/workflow/verdict", "/request/process/approval", "/request/process/verdict", "/request/process/view", "/request/process/rework"];
return validPaths.some(path => pathname?.toLowerCase()?.includes(path)) || pathname === "/";
}
isApprovePath() {
const {
pathname
} = window.location;
const validApprovePaths = ["/run/workflow/approve", "/run/workflow/verdict", "/request/process/approval", "/request/process/verdict", "/request/process/view", "/request/process/rework"];
return validApprovePaths.some(path => pathname?.toLowerCase()?.includes(path));
}
render() {
const {
data,
mutable,
defaultValue,
read_only,
style
} = this.props;
const {
field_name,
documentId,
allowEdit
} = data;
const {
errorText,
successText,
description,
isSigned,
signatures,
signature
} = this.state;
const tempUser = JSON.parse(window.localStorage.getItem("LoginInfo") || "{}");
const position = tempUser?.role;
const email = tempUser?.email;
// new URLSearchParams(window.location.search).get('email');
const parsedDocumentId = documentId ? JSON.parse(documentId) : {};
const userCanSign = signatures.some(sig => sig?.position?.toLowerCase() === position?.toLowerCase());
if (!this.isPathValid()) {
return null;
}
// if (this.isApprovePath()) {
// return null;
// }
const inputProps = {
type: "text",
className: "form-control bg-transparent",
name: field_name,
defaultValue: mutable ? defaultValue : undefined,
disabled: read_only && !allowEdit ? "disabled" : undefined
};
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: `SortableItem rfb-item ${data.pageBreakBefore ? "alwaysbreak" : ""}`
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "clearfix pr-6 d-flex align-items-center position-relative",
style: {
columnGap: "12px"
}
}, /*#__PURE__*/_react.default.createElement("div", inputProps, parsedDocumentId?.label || ""), !isSigned && userCanSign && /*#__PURE__*/_react.default.createElement("a", {
target: "_blank",
rel: "noopener noreferrer",
href: `https://kusala.com.ng/document/render/read/${parsedDocumentId?.value}/${signature?.id}?email=${email}&type=form_signature&requestId=${this.requestId}`
}, /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: "btn btn-sm btn-primary",
style: {
padding: "10px 20px",
borderRadius: "6px"
},
disabled: !parsedDocumentId?.value
}, "Sign")), (isSigned || !userCanSign) && /*#__PURE__*/_react.default.createElement("a", {
target: "_blank",
rel: "noopener noreferrer",
href: `https://kusala.com.ng/document/preview/read/${parsedDocumentId?.value}/${signature?.id ?? "043ff984-cf11-4507-81f8-93c8d9fd48ef"}?email=${email}&type=form_signature&requestId=${this.requestId}`
}, /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: "btn btn-sm btn-success d-flex",
style: {
padding: "10px 20px",
borderRadius: "6px",
alignItems: "center",
columnGap: "8px"
}
}, isSigned ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Signed ", /*#__PURE__*/_react.default.createElement("i", {
className: "far fa-check-circle"
})) : "View"), " ")), errorText && /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
message: errorText
}), successText && !description && /*#__PURE__*/_react.default.createElement(_successMessage.default, {
message: successText
}), description && /*#__PURE__*/_react.default.createElement("div", {
style: {
marginTop: "6px"
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: "block pt-1 text-capitalize text-14 font-weight-bold"
}, description))));
}
}
class TextInput extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
render() {
const props = {};
props.type = "text";
props.className = "form-control";
props.name = this.props.data.field_name;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
// async function validateInput(){
// }
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("input", props)), " ");
}
}
class TableInput extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
tableData: this.props.defaultValue || []
};
}
render() {
const props = {};
props.type = "text";
props.className = "form-control";
props.name = this.props.data.field_name;
let tempDefaultValue = [];
const {
denominators
} = this.props.data;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
if (this.props.defaultValue) {
tempDefaultValue = this.props.defaultValue || [];
}
// async function validateInput(){
// }
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_TableInputElement.default, {
onGetTotal: data => {
this.setState({
tableData: data
});
},
denominators: denominators,
defaultValue: tempDefaultValue,
readOnly: (this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit
})));
}
}
class CascadeSelect extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
dataList: this.props.defaultValue || []
};
}
render() {
const props = {};
props.type = "text";
props.className = "form-control";
props.name = this.props.data.field_name;
let tempDefaultValue = [];
const {
firstLabel,
secondLabel,
firstDropdownOptions,
secondDropdownOptions
} = this.props.data;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
if (this.props.defaultValue) {
tempDefaultValue = this.props.defaultValue || [];
}
// async function validateInput(){
// }
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_cascadeDropdown.default, {
secondDropdownOptions: secondDropdownOptions,
firstDropdownOptions: firstDropdownOptions,
defaultValue: tempDefaultValue,
readOnly: (this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit,
onGetValue: value => {
this.setState({
dataList: value
});
},
firstLabel: firstLabel,
secondLabel: secondLabel
})));
}
}
class CustomSelect extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "getFilteredOptions", () => {
const {
data,
resultData
} = this.props;
if (!data?.options) return [];
if (data?.isCascade) {
const dependentValue = resultData?.[data.dependentField];
return data.options.filter(opt => opt.key?.toString() === dependentValue?.toString());
}
return data.options;
});
(0, _defineProperty2.default)(this, "isReadOnly", () => {
const {
read_only,
data
} = this.props;
return (read_only || data?.isReadOnly) && !data?.allowEdit;
});
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
dataList: props.defaultValue || []
};
}
render() {
const {
data,
defaultValue,
style,
mutable
} = this.props;
const tempOptions = this.getFilteredOptions();
const tempDefaultValue = defaultValue || [];
const baseClasses = "SortableItem rfb-item" + (data.pageBreakBefore ? " alwaysbreak" : "");
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_CustomSearchSelect.default, {
options: tempOptions,
defaultValue: tempDefaultValue,
readOnly: this.isReadOnly(),
url: data?.optionsApiUrl,
ref: mutable ? this.inputField : undefined,
onGetValue: value => this.setState({
dataList: value
})
})));
}
}
class DynamicMultiInput extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
dataList: this.props.defaultValue || []
};
}
render() {
const props = {};
props.type = "text";
props.className = "form-control";
props.name = this.props.data.field_name;
let tempDefaultValue = [];
const {
dynamicInputOptions
} = this.props.data;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
if (this.props.defaultValue) {
tempDefaultValue = this.props.defaultValue || [];
}
// async function validateInput(){
// }
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_DynamicInput2.default, {
getValues: data => {
this.setState({
dataList: data
});
},
initialFields: dynamicInputOptions || [],
tempDefaultValue: tempDefaultValue,
readOnly: (this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit
})));
}
}
class DataGridInput extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
dataList: this.props.defaultValue || []
};
}
render() {
const props = {};
props.type = "text";
props.className = "form-control";
props.name = this.props.data.field_name;
let tempDefaultValue = [];
const {
dataColumns
} = this.props.data;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
if (this.props.defaultValue) {
tempDefaultValue = this.props.defaultValue || [];
}
// async function validateInput(){
// }
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_DataGrid.default, {
onChange: data => {
this.setState({
dataList: data
});
},
columns: dataColumns || [],
value: tempDefaultValue,
url: this.props.data.url,
isReadOnly: (this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit
})));
}
}
class ArithmeticInput extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
dataList: String(props.defaultValue ?? "") // keep as string
};
}
componentDidUpdate(prevProps) {
if (prevProps.defaultValue !== this.props.defaultValue) {
this.setState({
dataList: String(this.props.defaultValue ?? "")
});
}
}
render() {
const {
data = {},
mutable,
defaultValue,
style,
read_only,
resultData,
handleChange,
...rest
} = this.props;
const {
allowEdit,
isReadOnly: itemReadOnly,
field_name,
pageBreakBefore,
calculationFields
} = data;
const isDisabled = !!((read_only || itemReadOnly) && !allowEdit);
const baseClasses = pageBreakBefore ? "SortableItem rfb-item alwaysbreak" : "SortableItem rfb-item";
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
style: style,
className: baseClasses
}, rest), /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_ArithmeticComponentView.default
// Prefer controlled API if supported: value={this.state.dataList}
, {
defaultValue: defaultValue || "",
mappedFields: calculationFields || [],
resultData: resultData || [],
isReadOnly: isDisabled,
onChange: next => {
const str = String(next ?? "");
this.setState({
dataList: str
}, () => {
// notify form so it can re-collect values
handleChange?.(str);
});
}
}), /*#__PURE__*/_react.default.createElement("input", {
type: "text",
name: field_name,
ref: mutable ? this.inputField : undefined,
className: "form-control field-control",
disabled: isDisabled,
readOnly: isDisabled,
value: this.state.dataList
// This input mirrors ArithmeticComponentView; user typing is ignored on purpose.
,
onChange: () => {}
})));
}
}
class PasswordInput extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "togglePasswordVisibility", () => {
// Toggle between 'password' and 'text' type
this.setState(prevState => ({
type: prevState.type === "text" ? "password" : "text"
}));
});
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
type: "password"
};
}
render() {
const {
type
} = this.state;
const props = {};
props.type = type;
props.className = "form-control";
props.name = this.props.data.field_name;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
// async function validateInput(){
// }
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "password-input-wrapper"
}, /*#__PURE__*/_react.default.createElement("input", props), this.props.data.togglePassword && /*#__PURE__*/_react.default.createElement("button", {
type: "button",
onClick: this.togglePasswordVisibility,
className: "password-toggle-button"
}, type === "text" ? "Hide" : "Show"))));
}
}
class AmountInput extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "handleValueChange", (value, name, values) => {
this.setState({
value
});
if (this.props.onValueChange) {
this.props.onValueChange(value, name, values);
}
});
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
value: this.props.defaultValue || ""
};
}
render() {
const {
data,
mutable,
defaultValue,
style,
read_only
} = this.props;
const {
toggleNegative,
allowEdit,
isReadOnly
} = data;
const inputProps = {
type: "text",
className: "form-control",
name: data.field_name,
defaultValue: mutable ? defaultValue : undefined,
ref: mutable ? this.inputField : undefined,
disabled: (read_only || isReadOnly) && !allowEdit ? "disabled" : undefined
};
let baseClasses = "SortableItem rfb-item";
if (data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_reactCurrencyInputField.default, (0, _extends2.default)({
id: "input-example",
className: "form-control"
}, inputProps, {
decimalsLimit: 6,
defaultValue: defaultValue,
onValueChange: this.handleValueChange,
disabled: (read_only || isReadOnly) && !allowEdit ? "disabled" : undefined,
allowNegativeValue: !!toggleNegative
})), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, inputProps, {
defaultValue: this.state.value,
className: "hidden-input"
}))));
}
}
class EmailInput extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
render() {
const props = {};
props.type = "text";
props.className = "form-control";
props.name = this.props.data.field_name;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("input", props)));
}
}
class PhoneNumber extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
render() {
const props = {};
props.type = "tel";
props.className = "form-control";
props.name = this.props.data.field_name;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("input", props)));
}
}
class NumberInput extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
render() {
const props = {};
props.type = "number";
props.className = "form-control";
props.name = this.props.data.field_name;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("input", props)));
}
}
class TextArea extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
render() {
const props = {};
props.className = "form-control";
props.name = this.props.data.field_name;
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("textarea", props)));
}
}
class Dropdown extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
getFilteredOptions() {
const {
data,
resultData
} = this.props;
const dependentValue = resultData?.[data?.dependentField];
if (data?.isCascade) {
return data.options?.filter(opt => opt.key?.toString() === dependentValue?.toString()) || [];
}
return data.options || [];
}
render() {
const {
data,
defaultValue,
mutable,
read_only,
style
} = this.props;
const props = {
className: "form-control",
// Tailwind will apply via `form-control` utility
name: data?.field_name || "",
defaultValue: mutable ? defaultValue : undefined,
ref: mutable ? this.inputField : undefined,
disabled: (read_only || data?.isReadOnly) && !data?.allowEdit || undefined
};
const tempOptions = this.getFilteredOptions();
// Keep your existing base classes, add Tailwind for consistency
let baseClasses = "SortableItem rfb-item relative "; // z-index ensures dropdown stays above everything
if (data?.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("select", props, /*#__PURE__*/_react.default.createElement("option", {
value: "",
disabled: true
}, "Select"), tempOptions.map(option => /*#__PURE__*/_react.default.createElement("option", {
key: `preview_${option.id}`,
value: option.value
}, option.text)))));
}
}
class SmartAdaptorDropdown extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
render() {
const props = {};
props.className = "form-control";
props.name = this.props.data.field_name;
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("select", props, this.props.data.options?.map(option => {
const this_key = `preview_${option.id}`;
return /*#__PURE__*/_react.default.createElement("option", {
value: option.value,
key: this_key
}, option.text);
}))));
}
}
class Signature extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "clear", () => {
if (this.state.defaultValue) {
this.setState({
defaultValue: ""
});
} else if (this.canvas.current) {
this.canvas.current.clear();
}
});
this.state = {
defaultValue: props.defaultValue
};
this.inputField = /*#__PURE__*/_react.default.createRef();
this.canvas = /*#__PURE__*/_react.default.createRef();
}
render() {
const {
defaultValue
} = this.state;
let canClear = !!defaultValue;
const props = {};
props.type = "hidden";
props.name = this.props.data.field_name;
if (this.props.mutable) {
props.defaultValue = defaultValue;
props.ref = this.inputField;
}
const pad_props = {};
// umd requires canvasProps={{ width: 400, height: 150 }}
if (this.props.mutable) {
pad_props.defaultValue = defaultValue;
pad_props.ref = this.canvas;
canClear = !this.props?.read_only;
}
pad_props.clearOnResize = false;
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
let sourceDataURL;
if (defaultValue && defaultValue.length > 0) {
sourceDataURL = `data:image/png;base64,${defaultValue}`;
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), this.props?.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react.default.createElement("img", {
src: sourceDataURL
}) : /*#__PURE__*/_react.default.createElement(_reactSignatureCanvas.default, pad_props), canClear && /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-times clear-signature",
onClick: this.clear,
title: "Clear Signature"
}), /*#__PURE__*/_react.default.createElement("input", props)));
}
}
class Tags extends _react.default.Component {
constructor(props) {
super(props);
// state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };
(0, _defineProperty2.default)(this, "handleChange", e => {
this.setState({
value: e || []
});
});
this.inputField = /*#__PURE__*/_react.default.createRef();
const {
defaultValue,
data
} = props;
this.state = {
value: this.getDefaultValue(defaultValue, data.options)
};
}
getDefaultValue(defaultValue, options) {
if (defaultValue) {
if (typeof defaultValue === "string") {
const vals = defaultValue.split(",")?.map(x => x.trim());
return options.filter(x => vals.indexOf(x.value) > -1);
}
return options.filter(x => defaultValue.indexOf(x.value) > -1);
}
return [];
}
render() {
const options = this.props.data.options?.map(option => {
option.label = option.text;
return option;
});
const props = {};
props.isMulti = true;
props.name = this.props.data.field_name;
props.onChange = this.handleChange;
props.options = options;
if (!this.props.mutable) {
props.value = options[0].text;
} // to show a sample of what tags looks like
if (this.props.mutable) {
props.isDisabled = this.props?.read_only;
props.value = this.state.value;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_reactSelect.default, props)));
}
}
class Checkboxes extends _react.default.Component {
constructor(props) {
super(props);
this.options = {};
}
render() {
const self = this;
let classNames = "custom-control custom-checkbox";
if (this.props.data.inline) {
classNames += " option-inline";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), this.props.data.options?.map(option => {
const this_key = `preview_${option.key}`;
const props = {};
props.name = `option_${option.key}`;
props.type = "checkbox";
props.value = option.value;
if (self.props.mutable) {
props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
return /*#__PURE__*/_react.default.createElement("div", {
className: classNames,
key: this_key
}, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
id: `fid_${this_key}`,
className: "custom-control-input",
ref: c => {
if (c && self.props.mutable) {
self.options[`child_ref_${option.key}`] = c;
}
}
}, props)), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: `fid_${this_key}`
}, option.text));
})));
}
}
class RadioButtons extends _react.default.Component {
constructor(props) {
super(props);
this.options = {};
}
render() {
const self = this;
let classNames = "custom-control custom-radio";
if (this.props.data.inline) {
classNames += " option-inline";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), this.props.data.options?.map(option => {
const this_key = `preview_${option.key}`;
const props = {};
props.name = self.props.data.field_name;
props.type = "radio";
props.value = option.value;
if (self.props.mutable) {
props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
}
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
return /*#__PURE__*/_react.default.createElement("div", {
className: classNames,
key: this_key
}, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
id: `fid_${this_key}`,
className: "custom-control-input",
ref: c => {
if (c && self.props.mutable) {
self.options[`child_ref_${option.key}`] = c;
}
}
}, props)), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: `fid_${this_key}`
}, option.text));
})));
}
}
class RadioButton extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "handleChange", e => {
this.setState({
selectedValue: e.target.value
});
});
this.state = {
selectedValue: props.defaultValue || ""
};
}
render() {
const {
data,
style,
read_only
} = this.props;
const {
selectedValue
} = this.state;
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: "SortableItem rfb-item"
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), data.options?.map(option => {
const id = `fid_preview_${option.key}`;
return /*#__PURE__*/_react.default.createElement("div", {
className: `custom-control custom-radio${data.inline ? " option-inline" : ""}`,
key: option.key
}, /*#__PURE__*/_react.default.createElement("input", {
type: "radio",
name: data.field_name,
id: id,
value: option.value,
className: "custom-control-input",
checked: selectedValue === option.value,
onChange: this.handleChange,
disabled: (read_only || data?.isReadOnly) && !data.allowEdit
}), /*#__PURE__*/_react.default.createElement("label", {
className: "custom-control-label",
htmlFor: id
}, option.text));
})));
}
}
class Image extends _react.default.Component {
render() {
const style = this.props.data.center ? {
textAlign: "center"
} : null;
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style,
...style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), this.props.data.src && /*#__PURE__*/_react.default.createElement("img", {
src: this.props.data.src,
width: this.props.data.width,
height: this.props.data.height
}), !this.props.data.src && /*#__PURE__*/_react.default.createElement("div", {
className: "no-image"
}, "No Image"));
}
}
class Rating extends _react.default.Component {
constructor(props) {
super(props);
this.inputField = /*#__PURE__*/_react.default.createRef();
}
render() {
const props = {};
props.name = this.props.data.field_name;
props.ratingAmount = 5;
if (this.props.mutable) {
props.rating = this.props.defaultValue !== undefined ? parseFloat(this.props.defaultValue, 10) : 0;
props.editing = true;
props.disabled = this.props?.read_only;
props.ref = this.inputField;
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_starRating.default, props)));
}
}
class HyperLink extends _react.default.Component {
render() {
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("label", {
className: "form-label"
}, /*#__PURE__*/_react.default.createElement("a", {
target: "_blank",
href: this.props.data.href,
dangerouslySetInnerHTML: {
__html: _myxss.default.process(this.props.data.content)
}
}))));
}
}
class Download extends _react.default.Component {
render() {
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement("a", {
href: `${this.props.download_path}?id=${this.props.data.file_path}`
}, this.props.data.content)));
}
}
class Camera extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "displayImage", e => {
const self = this;
const {
target
} = e;
if (target.files && target.files.length) {
self.setState({
img: target.files[0],
previewImg: URL.createObjectURL(target.files[0])
});
}
});
(0, _defineProperty2.default)(this, "clearImage", () => {
this.setState({
img: null,
previewImg: null
});
});
this.state = {
img: null,
previewImg: null
};
}
getImageSizeProps({
width,
height
}) {
const imgProps = {
width: "100%"
};
if (width) {
imgProps.width = width < window.innerWidth ? width : 0.9 * window.innerWidth;
}
if (height) {
imgProps.height = height;
}
return imgProps;
}
render() {
const imageStyle = {
objectFit: "scale-down",
objectPosition: this.props.data.center ? "center" : "left"
};
let baseClasses = "SortableItem rfb-item";
const name = this.props.data.field_name;
const fileInputStyle = this.state.img ? {
display: "none"
} : null;
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
let sourceDataURL;
if (this.props?.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0) {
if (this.props.defaultValue.indexOf(name > -1)) {
sourceDataURL = this.props.defaultValue;
} else {
sourceDataURL = `data:image/png;base64,${this.props.defaultValue}`;
}
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), this.props?.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
style: imageStyle,
src: sourceDataURL
}, this.getImageSizeProps(this.props.data)))) : /*#__PURE__*/_react.default.createElement("div", {
className: "image-upload-container"
}, /*#__PURE__*/_react.default.createElement("div", {
style: fileInputStyle
}, /*#__PURE__*/_react.default.createElement("input", {
name: name,
type: "file",
accept: "image/*",
capture: "camera",
className: "image-upload",
onChange: this.displayImage
}), /*#__PURE__*/_react.default.createElement("div", {
className: "image-upload-control"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "btn btn-default"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-camera"
}), " Upload Photo"), /*#__PURE__*/_react.default.createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
onLoad: () => URL.revokeObjectURL(this.state.previewImg),
src: this.state.previewImg,
height: "100",
className: "image-upload-preview"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
className: "btn btn-image-clear",
onClick: this.clearImage
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-times"
}), " Clear Photo")))));
}
}
class FileUpload extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "fileReader", null);
(0, _defineProperty2.default)(this, "getBase64", file => new Promise((resolve, reject) => {
this.fileReader = new FileReader();
this.fileReader.onload = event => {
if (event.target?.result) {
const base64String = event.target.result.split(",")[1];
resolve(base64String);
} else {
reject(new Error("Failed to read file"));
}
};
this.fileReader.onerror = error => {
reject(error);
};
this.fileReader.readAsDataURL(file);
}));
(0, _defineProperty2.default)(this, "uploadFile", async file => {
try {
const validationError = validateFile(file, this.props.data.fileType);
if (validationError) {
this.setState({
error: validationError
});
return null;
}
this.setState({
fileLoading: true,
error: null
});
const data = {
fileName: file.name,
base64: await this.getBase64(file),
ext: `.${(0, _getExt.getExtensionFromMimeType)(file.type)}`
};
const response = await _axios.default.post("https://api.dev.workflow.kusala.com.ng/api/v1/FileUpload/upload-document", data);
this.setState({
fileStatus: "success"
});
return response.data.data;
} catch (error) {
const errorMessage = error.response?.data?.message || "Unable to upload file";
this.setState({
fileStatus: "error",
error: errorMessage
});
return null;
} finally {
this.setState({
fileLoading: false
});
}
});
(0, _defineProperty2.default)(this, "handleFileChange", async e => {
const file = e.target.files?.[0];
if (file) {
const uploadedFile = await this.uploadFile(file);
if (uploadedFile) {
this.setState({
fileUpload: uploadedFile
});
}
}
});
(0, _defineProperty2.default)(this, "clearFileUpload", () => {
this.setState({
fileUpload: null,
fileStatus: null,
fileLoading: false,
error: null
});
});
(0, _defineProperty2.default)(this, "handlePreviewFile", e => {
e.preventDefault();
const sourceUrl = this.props.defaultValue?.url;
if (sourceUrl) {
window.open(sourceUrl, "_blank", "noopener,noreferrer");
}
});
this.state = {
fileUpload: null,
fileLoading: false,
fileStatus: null,
error: null
};
}
componentDidMount() {
if (this.props.defaultValue) {
this.setState({
fileUpload: this.props.defaultValue
});
}
}
componentWillUnmount() {
if (this.fileReader) {
this.fileReader.abort();
this.fileReader = null;
}
}
render() {
const {
fileUpload,
fileLoading,
error
} = this.state;
const {
data,
read_only,
defaultValue,
style
} = this.props;
const baseClasses = `SortableItem rfb-item${data.pageBreakBefore ? " alwaysbreak" : ""}`;
const fileInputStyle = fileUpload ? {
display: "none"
} : {
display: "flex"
};
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), read_only && defaultValue ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: "fileName",
style: {
textTransform: "capitalize",
marginBottom: "8px"
}
}, defaultValue.fileName), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
fileName: defaultValue.fileName,
fileUrl: defaultValue.url
}))) : /*#__PURE__*/_react.default.createElement("div", {
className: "image-upload-container"
}, !fileUpload && /*#__PURE__*/_react.default.createElement("div", {
style: {
...fileInputStyle,
alignItems: "center"
}
}, /*#__PURE__*/_react.default.createElement("input", {
name: data.field_name,
type: "file",
accept: data.fileType || defaultFileType,
className: "image-upload",
onChange: this.handleFileChange,
disabled: (read_only || data?.isReadOnly) && !data?.allowEdit,
"aria-label": "Choose file"
}), /*#__PURE__*/_react.default.createElement("div", {
className: "image-upload-control"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "btn btn-default",
role: "button",
tabIndex: 0
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-file",
"aria-hidden": "true"
}), " Upload File"), /*#__PURE__*/_react.default.createElement("p", {
style: {
padding: "0 10px",
margin: 0
}
}, "Select a file from your device.")), fileLoading && /*#__PURE__*/_react.default.createElement("div", {
className: "align-middle spinner-border spinner-border-sm text-secondary position-absolute",
style: {
right: "16px"
},
role: "status",
"aria-label": "Loading"
})), error && /*#__PURE__*/_react.default.createElement("div", {
className: "error-message",
role: "alert",
style: {
color: "red",
marginTop: "8px"
}
}, error), fileUpload && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: "file-upload-preview"
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block",
marginRight: "5px"
}
}, `File Name: ${fileUpload.fileName}`), /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: "btn btn-file-upload-clear",
style: {
padding: "4px 0",
fontSize: "12px",
marginTop: "6px"
},
onClick: this.clearFileUpload,
"aria-label": "Remove file"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-trash",
"aria-hidden": "true"
}))), this.state.fileStatus === "success" && /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "flex-end",
columnGap: "20px",
alignItems: "center",
marginTop: "4px"
}
}, /*#__PURE__*/_react.default.createElement("span", {
style: {
fontSize: "11px",
color: "green",
fontStyle: "italic"
},
role: "status"
}, "File uploaded successfully"))))));
}
}
(0, _defineProperty2.default)(FileUpload, "propTypes", {
data: _propTypes.default.shape({
field_name: _propTypes.default.string.isRequired,
fileType: _propTypes.default.string,
pageBreakBefore: _propTypes.default.bool
}).isRequired,
defaultValue: _propTypes.default.shape({
fileName: _propTypes.default.string,
url: _propTypes.default.string
}),
read_only: _propTypes.default.bool,
style: _propTypes.default.object
});
class MultiFileUpload extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "getBase64", file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(",")[1]);
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
}));
(0, _defineProperty2.default)(this, "uploadFile", async (file, index) => {
try {
const validationError = validateFile(file, this.props.data.fileType);
if (validationError) {
this.setState({
error: validationError
});
return null;
}
this.setState(prevState => {
const fileUpload = [...prevState.fileUpload];
fileUpload[index] = {
...fileUpload[index],
isLoading: true
};
return {
fileUpload,
error: ""
};
});
const data = {
fileName: file.name,
base64: await this.getBase64(file),
ext: `.${file.name.split(".").pop()}`
};
const response = await fetch("https://api.dev.workflow.kusala.com.ng/api/v1/FileUpload/upload-document", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error("Upload failed");
}
const result = await response.json();
return result.data;
} catch (error) {
this.setState({
error: error.message || "Unable to upload file"
});
return null;
} finally {
this.setState(prevState => {
const fileUpload = [...prevState.fileUpload];
fileUpload[index] = {
...fileUpload[index],
isLoading: false
};
return {
fileUpload
};
});
}
});
(0, _defineProperty2.default)(this, "handleFileUpload", async (e, index) => {
const file = e.target.files?.[0];
if (!file) return;
const uploadedFile = await this.uploadFile(file, index);
if (uploadedFile) {
this.setState(prevState => {
const fileUpload = [...prevState.fileUpload];
fileUpload[index] = {
fileData: uploadedFile,
fileName: file.name,
isLoading: false
};
return {
fileUpload
};
});
}
});
(0, _defineProperty2.default)(this, "addFileInput", () => {
this.setState(prevState => ({
fileUpload: [...prevState.fileUpload, {
fileData: null,
fileName: null,
isLoading: false
}]
}));
});
(0, _defineProperty2.default)(this, "clearFileUpload", index => {
this.setState(prevState => {
const fileUpload = [...prevState.fileUpload];
fileUpload[index] = {
fileData: null,
fileName: null,
isLoading: false
};
return {
fileUpload
};
});
});
(0, _defineProperty2.default)(this, "removeFileInput", index => {
if (this.state.fileUpload.length <= 1) return;
this.setState(prevState => ({
fileUpload: prevState.fileUpload.filter((_, i) => i !== index)
}));
});
(0, _defineProperty2.default)(this, "saveFile", (e, fileUrl) => {
e.preventDefault();
if (fileUrl) {
window.open(fileUrl, "_blank");
} else {
console.error("File URL is missing!");
}
});
this.state = {
fileUpload: [{
fileData: null,
fileName: null,
isLoading: false
}],
error: "",
fileType: "image/*"
};
}
componentDidMount() {
if (this.props.defaultValue) {
const fileUpload = this.props.defaultValue?.map(file => ({
...file,
isLoading: false
}));
this.setState({
fileUpload
});
}
}
renderReadOnlyView() {
const {
defaultValue
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: "gap-3 d-grid",
style: {
rowGap: "12px",
display: "grid"
}
}, defaultValue?.map((file, index) => /*#__PURE__*/_react.default.createElement("div", {
key: index,
className: ""
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mb-1 text-capitalize form-control"
}, file.fileData?.fileName), /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
fileName: file?.fileData?.fileName,
fileUrl: file?.fileData?.url
}))));
}
renderFileInput(file, index) {
const {
read_only,
data
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
key: index,
className: "gap-3 mb-3 d-flex align-items-center"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex-grow-1 position-relative image-upload-control"
}, /*#__PURE__*/_react.default.createElement("input", {
type: "file",
onChange: e => this.handleFileUpload(e, index),
disabled: file?.isLoading || (read_only || data?.isReadOnly) && !data?.allowEdit,
accept: data.fileType || defaultFileType,
className: "d-none",
id: `fileInput-${index}`
}), /*#__PURE__*/_react.default.createElement("label", {
htmlFor: `fileInput-${index}`,
className: "mb-0 cursor-pointer d-flex align-items-center flex-grow-1",
style: {
flex: 1
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: "mr-3 btn btn-default"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-upload me-2"
}), " Upload"), /*#__PURE__*/_react.default.createElement("span", {
className: "text-muted"
}, file?.fileName || "Select a file from your device"), file?.isLoading && /*#__PURE__*/_react.default.createElement("div", {
className: "spinner-border spinner-border-sm text-secondary position-absolute",
style: {
right: "1rem"
},
role: "status",
"aria-label": "Loading"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "gap-2 d-flex",
style: {
columnGap: "10px"
}
}, file?.fileData && !file?.isLoading && /*#__PURE__*/_react.default.createElement("button", {
type: "button",
onClick: () => this.clearFileUpload(index),
className: " btn-file-upload-clear",
style: {
padding: "8px",
fontSize: "14px",
border: "none"
},
"aria-label": "Clear file",
title: "Clear file"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-trash"
})), this.state?.fileUpload?.length > 1 && !file?.isLoading && /*#__PURE__*/_react.default.createElement("button", {
type: "button",
onClick: () => this.removeFileInput(index),
className: " btn-file-upload-clear",
style: {
padding: "8px",
fontSize: "14px",
border: "none"
},
"aria-label": "Remove input",
title: "Remove input"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fas fa-times"
})))));
}
render() {
const {
fileUpload,
error
} = this.state;
const {
style,
data,
read_only,
defaultValue
} = this.props;
const baseClasses = `SortableItem rfb-item${data.pageBreakBefore ? " alwaysbreak" : ""}`;
return /*#__PURE__*/_react.default.createElement("div", {
style: style,
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), read_only && defaultValue ? this.renderReadOnlyView() : /*#__PURE__*/_react.default.createElement("div", {
className: "mb-3"
}, fileUpload?.map((file, index) => this.renderFileInput(file, index)), /*#__PURE__*/_react.default.createElement("button", {
type: "button",
onClick: this.addFileInput,
className: "py-0 btn btn-link btn-sm text-decoration-none"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "mr-2 fas fa-plus"
}), "Add File")), error && /*#__PURE__*/_react.default.createElement("div", {
className: "mt-3 alert alert-danger",
role: "alert"
}, error)));
}
}
class Range extends _react.default.Component {
constructor(props) {
super(props);
(0, _defineProperty2.default)(this, "changeValue", e => {
const {
target
} = e;
this.setState({
value: target.value
});
});
this.inputField = /*#__PURE__*/_react.default.createRef();
this.state = {
value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.default_value, 10)
};
}
render() {
const props = {};
const name = this.props.data.field_name;
props.type = "range";
props.list = `tickmarks_${name}`;
props.min = this.props.data.min_value;
props.max = this.props.data.max_value;
props.step = this.props.data.step;
props.value = this.state.value;
props.change = this.changeValue;
if (this.props.mutable) {
props.ref = this.inputField;
}
const datalist = [];
for (let i = parseInt(props.min, 10); i <= parseInt(props.max, 10); i += parseInt(props.step, 10)) {
datalist.push(i);
}
const oneBig = 100 / (datalist.length - 1);
const _datalist = datalist?.map((d, idx) => /*#__PURE__*/_react.default.createElement("option", {
key: `${props.list}_${idx}`
}, d));
const visible_marks = datalist?.map((d, idx) => {
const option_props = {};
let w = oneBig;
if (idx === 0 || idx === datalist.length - 1) {
w = oneBig / 2;
}
option_props.key = `${props.list}_label_${idx}`;
option_props.style = {
width: `${w}%`
};
if (idx === datalist.length - 1) {
option_props.style = {
width: `${w}%`,
textAlign: "right"
};
}
return /*#__PURE__*/_react.default.createElement("label", option_props, d);
});
if ((this.props?.read_only || this.props.data?.isReadOnly) && !this.props.data?.allowEdit) {
props.disabled = "disabled";
}
let baseClasses = "SortableItem rfb-item";
if (this.props.data.pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...this.props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
className: "range"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "clearfix"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "float-left"
}, this.props.data.min_label), /*#__PURE__*/_react.default.createElement("span", {
className: "float-right"
}, this.props.data.max_label)), /*#__PURE__*/_react.default.createElement(_reactBootstrapSlider.default, props)), /*#__PURE__*/_react.default.createElement("div", {
className: "visible_marks"
}, visible_marks), /*#__PURE__*/_react.default.createElement("input", {
name: name,
value: this.state.value,
type: "hidden"
}), /*#__PURE__*/_react.default.createElement("datalist", {
id: props.list
}, _datalist)));
}
}
FormElements.Header = Header;
FormElements.Paragraph = Paragraph;
FormElements.Label = Label;
FormElements.LineBreak = LineBreak;
FormElements.TextInput = TextInput;
FormElements.DynamicInput = DynamicInput;
FormElements.AmountInput = AmountInput;
FormElements.ArithmeticInput = ArithmeticInput;
FormElements.DocumentSelect = DocumentSelect;
FormElements.TableInput = TableInput;
FormElements.CascadeSelect = CascadeSelect;
FormElements.DynamicMultiInput = DynamicMultiInput;
FormElements.CustomSelect = CustomSelect;
FormElements.DataGridInput = DataGridInput;
FormElements.MultiFileUpload = MultiFileUpload;
FormElements.PasswordInput = PasswordInput;
FormElements.EmailInput = EmailInput;
FormElements.PhoneNumber = PhoneNumber;
FormElements.NumberInput = NumberInput;
FormElements.TextArea = TextArea;
FormElements.Dropdown = Dropdown;
FormElements.SmartAdaptorDropdown = SmartAdaptorDropdown;
FormElements.Signature = Signature;
FormElements.Checkboxes = Checkboxes;
FormElements.DatePicker = _datePicker.default;
FormElements.RadioButtons = RadioButtons;
FormElements.RadioButton = RadioButton;
FormElements.Image = Image;
FormElements.Rating = Rating;
FormElements.Tags = Tags;
FormElements.HyperLink = HyperLink;
FormElements.Download = Download;
FormElements.Camera = Camera;
FormElements.FileUpload = FileUpload;
FormElements.Range = Range;
var _default = exports.default = FormElements;