@arudovwen/react-form-builder/lib/TableInputColumns.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TableInputColumn;
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); }
function TableInputColumn({
  value = [],
  onChange,
  onGetValue
}) {
  // Use the value prop if provided, otherwise use local state
  const [internalValues, setInternalValues] = (0, _react.useState)(value?.length > 0 ? value : [{
    value: ''
  }]);

  // Update internal state when prop value changes
  (0, _react.useEffect)(() => {
    if (value?.length > 0 && JSON.stringify(value) !== JSON.stringify(internalValues)) {
      setInternalValues(value);
    }
  }, [value]);
  function handleValue(val, index) {
    const newValues = [...internalValues];
    newValues[index] = {
      ...newValues[index],
      value: val
    };
    setInternalValues(newValues);

    // Pass the updated values to parent component
    if (onChange) {
      onChange(newValues);
    }
  }

  // Add a new row
  function addRow() {
    const newValues = [...internalValues, {
      value: ''
    }];
    setInternalValues(newValues);

    // Pass the updated values to parent component
    if (onChange) {
      onChange(newValues);
    }
  }

  // Remove a row
  function removeRow(index) {
    const newValues = internalValues.filter((_, i) => i !== index);
    setInternalValues(newValues);

    // Pass the updated values to parent component
    if (onChange) {
      onChange(newValues);
    }
  }

  // Report changes to parent component via callback
  (0, _react.useEffect)(() => {
    if (onGetValue) {
      onGetValue(JSON.stringify({
        values: internalValues
      }));
    }
  }, [onGetValue, internalValues]);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      maxWidth: '250px'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "overflow-hidden border border-gray-200 rounded-lg"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "grid text-sm font-bold border-b border-gray-100 bg-gray-50"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "px-2 py-2"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: ""
  }, "Add Denominations"))), internalValues.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
    key: item.key || index,
    className: "grid text-sm border-b border-gray-100"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center px-2 py-1 gap-x-4"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "flex-1"
  }, /*#__PURE__*/_react.default.createElement(_reactCurrencyInputField.default, {
    id: "input-example",
    className: "w-full px-3 py-1 border border-gray-100 rounded outline-none",
    decimalsLimit: 6,
    defaultValue: item.value,
    onValueChange: e => handleValue(e, index),
    allowNegativeValue: false
  })), /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => removeRow(index),
    className: "px-2 text-red-500 hover:text-red-700",
    type: "button",
    "aria-label": "Remove row"
  }, "\xD7"))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex justify-end mt-1"
  }, /*#__PURE__*/_react.default.createElement("button", {
    type: "button",
    onClick: addRow,
    className: "font-semibold !text-blue-700 font-bold text-sm rounded outline-0 focus:outline-0"
  }, "+ Add")));
}