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

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TableInputElement;
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 TableInputElement({
  onGetTotal,
  readOnly,
  defaultValue,
  denominators
}) {
  const [values, setValues] = (0, _react.useState)([...defaultValue]);

  // function formatNumber(num) {
  //   if (num < 1_000) return `N${num.toString()}`; // Hundreds, return as is
  //   if (num < 1_000_000) return `${(num / 1_000).toFixed(1)}K`; // Thousands
  //   if (num < 1_000_000_000) return `${(num / 1_000_000).toFixed(1)}M`; // Millions
  //   return `${(num / 1_000_000_000).toFixed(1)}B`; // Billions
  // }

  function handleValue(val, index) {
    setValues(prev => {
      const newValues = [...prev];
      newValues[index] = {
        ...newValues[index],
        value: val
      };
      return newValues;
    });
  }

  // Calculate subtotal based on value (assuming value is a number)
  function calculateSubtotal(key, value) {
    return parseFloat(key) * parseFloat(value) || 0;
  }

  // Calculate total of all subtotals
  const total = (0, _react.useMemo)(() => values.reduce((sum, item) => {
    const subtotal = calculateSubtotal(item.key, item.value);
    return sum + subtotal;
  }, 0), [values]);
  (0, _react.useEffect)(() => {
    if (onGetTotal) {
      onGetTotal(values);
    }
  }, [values]);
  (0, _react.useEffect)(() => {
    if (denominators?.length) {
      const tempValues = denominators.map((i, index) => ({
        key: i.value,
        value: Array.isArray(defaultValue) && defaultValue[index] ? defaultValue[index].value : ''
      }));
      setValues(tempValues);
    }
  }, [denominators]);
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    className: "border border-gray-200 rounded-lg overflow-hidden"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "grid grid-cols-3 text-sm font-bold border-b border-gray-100 bg-gray-50"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "border-r px-6 py-2"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: ""
  }, "Denomination")), /*#__PURE__*/_react.default.createElement("div", {
    className: "border-r px-6 py-2"
  }, /*#__PURE__*/_react.default.createElement("span", null, "Quantity")), /*#__PURE__*/_react.default.createElement("div", {
    className: "px-6 py-2"
  }, /*#__PURE__*/_react.default.createElement("span", null, "Sub total"))), values.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
    key: item.key,
    className: "grid grid-cols-3 text-sm border-b border-gray-100"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "border-r px-6 py-2 flex items-center"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: ""
  }, parseFloat(item.key)?.toLocaleString())), /*#__PURE__*/_react.default.createElement("div", {
    className: "border-r px-6 py-1"
  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactCurrencyInputField.default, {
    id: "input-example",
    className: "border border-gray-100 rounded w-full px-3 py-1 outline-none",
    decimalsLimit: 6,
    defaultValue: item.value,
    onValueChange: e => handleValue(e, index),
    disabled: readOnly,
    allowNegativeValue: false
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: "px-6 py-2 flex justify-between items-center"
  }, /*#__PURE__*/_react.default.createElement("span", null, calculateSubtotal(item.key, item.value)?.toLocaleString())))), /*#__PURE__*/_react.default.createElement("div", {
    className: "grid grid-cols-3 text-sm font-bold bg-gray-50"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "border-r px-6 py-3 col-span-2 text-right"
  }, "Total"), /*#__PURE__*/_react.default.createElement("div", {
    className: "px-6 py-3"
  }, total?.toLocaleString()))));
}