@etsoo/materialui/lib/mjs/custom/FieldAmountLabel.js

TypeScript Material-UI Implementation

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { NumberUtils } from "@etsoo/shared";
import FormHelperText from "@mui/material/FormHelperText";
import Typography from "@mui/material/Typography";
import React from "react";
/**
 * Amount label field creator
 * type: amountlabel
 * @returns Component
 */
export const FieldAmountLabel = ({ field, mref, defaultValue }) => {
    // Destruct
    const { label, mainSlotProps = {}, helperText } = field;
    const { currency, ...rest } = mainSlotProps;
    const currencySymbol = React.useMemo(() => (currency ? NumberUtils.getCurrencySymbol(currency) : ""), [currency]);
    // State
    const [amountLabel, setAmountLabel] = React.useState(label);
    React.useEffect(() => {
        setAmountLabel(label);
    }, [label]);
    // Ref
    const getValue = () => amountLabel;
    const setValue = (value) => {
        if (typeof value === "number") {
            setAmountLabel(NumberUtils.formatMoney(value));
        }
        else {
            setAmountLabel(`${value} ?? ''`);
        }
    };
    React.useImperativeHandle(mref, () => ({
        getValue,
        setValue
    }));
    React.useEffect(() => {
        if (defaultValue == null)
            return;
        setValue(defaultValue);
    }, [defaultValue]);
    return (_jsxs(React.Fragment, { children: [_jsxs(Typography, { ...rest, children: [currencySymbol, " ", amountLabel] }), helperText && _jsx(FormHelperText, { children: helperText })] }));
};