@arudovwen/react-form-builder/lib/form-elements/ArithmeticComponent.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ArithmeticComponent;
var _react = _interopRequireWildcard(require("react"));
var _reactCurrencyInputField = _interopRequireDefault(require("react-currency-input-field"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const OPERATIONS = ['+', '-', '*', '/'];
function ArithmeticComponent({
  mappedFields = [],
  isEditing = false,
  onChangeCalculationFields,
  calculationFields = []
}) {
  const [combinedFields, setCombinedFields] = (0, _react.useState)([]);

  // Merge mappedFields + custom fields on mappedFields change
  (0, _react.useEffect)(() => {
    setCombinedFields(prev => {
      const customFields = prev.length ? prev.filter(f => !f.isMapped) : calculationFields.filter(f => !f.isMapped);
      const updatedMapped = mappedFields.map((field, index) => {
        const existing = prev.find(f => f.field_name === field.field_name && f.isMapped) || calculationFields.find(f => f.field_name === field.field_name && f.isMapped);
        return {
          field_name: field.field_name,
          label: field.label || `Field ${index + 1}`,
          value: existing?.value || '',
          operation: existing?.operation || (index === 0 ? '' : '+'),
          isMapped: true
        };
      });
      return [...updatedMapped, ...customFields];
    });
  }, [mappedFields]);

  // Notify parent on change
  (0, _react.useEffect)(() => {
    if (onChangeCalculationFields) {
      onChangeCalculationFields(combinedFields);
    }
  }, [combinedFields]);
  const updateField = (0, _react.useCallback)((index, changes) => {
    setCombinedFields(prev => {
      const updated = [...prev];
      updated[index] = {
        ...updated[index],
        ...changes
      };
      return updated;
    });
  }, []);
  const handleLabelChange = (index, newLabel) => {
    updateField(index, {
      label: newLabel
    });
  };
  const handleValueChange = (index, val) => {
    updateField(index, {
      value: val
    });
  };
  const handleOperationChange = (index, op) => {
    updateField(index, {
      operation: op
    });
  };
  const addCustomInput = () => {
    setCombinedFields(prev => [...prev, {
      label: `Custom Field ${prev.length + 1}`,
      value: '',
      operation: prev.length === 0 ? '' : '+',
      isMapped: false
    }]);
  };
  const handleDeleteCustomField = index => {
    setCombinedFields(prev => prev.filter((_, i) => i !== index));
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "max-w-sm p-3 bg-white rounded"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-3"
  }, combinedFields.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
    key: index,
    className: "flex items-center gap-2"
  }, isEditing && !field.isMapped ? /*#__PURE__*/_react.default.createElement("input", {
    type: "text",
    value: field.label,
    onChange: e => handleLabelChange(index, e.target.value),
    className: " border outline-none focus:outline-none rounded w-[120px] text- p-2"
  }) : /*#__PURE__*/_react.default.createElement("span", {
    className: "text-xs font-medium capitalize"
  }, field.label), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center flex-1 gap-2"
  }, index !== 0 && /*#__PURE__*/_react.default.createElement("select", {
    value: field.operation,
    onChange: e => handleOperationChange(index, e.target.value),
    className: "p-1 text-xl border rounded min-w-16"
  }, OPERATIONS.map(ops => /*#__PURE__*/_react.default.createElement("option", {
    key: `op-${index}-${ops}`,
    value: ops
  }, ops))), /*#__PURE__*/_react.default.createElement(_reactCurrencyInputField.default, {
    value: field.value,
    onValueChange: val => handleValueChange(index, val),
    className: `w-full p-2 text-xs outline-none focus:outline-none ${field.isMapped ? 'bg-gray-100' : 'bg-white'} text-gray-700 border rounded`,
    placeholder: `${field.isMapped ? field.label : 'Enter'} value`,
    readOnly: field.isMapped
  }), isEditing && !field.isMapped && /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => handleDeleteCustomField(index),
    className: "px-2 py-1 text-xs text-white bg-red-500 rounded hover:bg-red-600",
    title: "Remove field"
  }, "\u2715")))), isEditing && /*#__PURE__*/_react.default.createElement("div", {
    className: "flex justify-end"
  }, /*#__PURE__*/_react.default.createElement("button", {
    type: "button",
    onClick: addCustomInput,
    className: "px-3 py-1 mt-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600"
  }, "+ Add Input"))));
}