@etsoo/materialui
Version:
TypeScript Material-UI Implementation
49 lines (48 loc) • 1.99 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldAmountLabel = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const shared_1 = require("@etsoo/shared");
const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const react_1 = __importDefault(require("react"));
/**
* Amount label field creator
* type: amountlabel
* @returns Component
*/
const FieldAmountLabel = ({ field, mref, defaultValue }) => {
// Destruct
const { label, mainSlotProps = {}, helperText } = field;
const { currency, ...rest } = mainSlotProps;
const currencySymbol = react_1.default.useMemo(() => (currency ? shared_1.NumberUtils.getCurrencySymbol(currency) : ""), [currency]);
// State
const [amountLabel, setAmountLabel] = react_1.default.useState(label);
react_1.default.useEffect(() => {
setAmountLabel(label);
}, [label]);
// Ref
const getValue = () => amountLabel;
const setValue = (value) => {
if (typeof value === "number") {
setAmountLabel(shared_1.NumberUtils.formatMoney(value));
}
else {
setAmountLabel(`${value} ?? ''`);
}
};
react_1.default.useImperativeHandle(mref, () => ({
getValue,
setValue
}));
react_1.default.useEffect(() => {
if (defaultValue == null)
return;
setValue(defaultValue);
}, [defaultValue]);
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, { ...rest, children: [currencySymbol, " ", amountLabel] }), helperText && (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: helperText })] }));
};
exports.FieldAmountLabel = FieldAmountLabel;