@activecollab/components
Version:
ActiveCollab Components
84 lines • 2.25 kB
JavaScript
import React, { useMemo, useRef } from "react";
import { useInputNumber } from "../../hooks";
import { numberWithSeparator, useForkRef } from "../../utils";
import { EditableContent } from "../EditableContent";
import { Tooltip } from "../Tooltip";
export const EditableCurrency = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
decimalLength = 2,
decimalSeparator = ".",
disableAbbreviation = false,
disabled,
disableMacros = false,
step = 1,
thousandSeparator = ",",
value: defaultValue,
onSave,
onCancel,
className,
allowEmptyValue,
onEnterKeyPress: externalEnterKeyPress,
onClick: externalOnClick,
onChange: externalOnChange,
trimDecimals = true,
min,
max,
invalid,
...rest
} = _ref;
const inputRef = useRef(null);
const handleRef = useForkRef(ref, inputRef);
const {
value,
onBlur,
onKeyDown,
onChange,
onClick,
onDoubleClick,
onFocus,
focused,
unformattedValue
} = useInputNumber({
decimalLength,
decimalSeparator,
disableAbbreviation,
disableMacros,
step,
thousandSeparator,
value: defaultValue,
onSave,
allowEmptyValue,
onCancel,
onChange: externalOnChange,
onEnterKeyPress: externalEnterKeyPress,
onClick: externalOnClick,
trimDecimals,
min,
max,
shortenThreshold: 10000
}, inputRef);
const formattedValue = useMemo(() => {
return focused ? value : numberWithSeparator(value != null ? value : "", "", decimalSeparator);
}, [focused, value, decimalSeparator]);
return /*#__PURE__*/React.createElement(Tooltip, {
title: numberWithSeparator(unformattedValue != null ? unformattedValue : "", thousandSeparator, decimalSeparator),
disable: focused
}, /*#__PURE__*/React.createElement(EditableContent, {
disabled: disabled,
ref: handleRef,
className: className,
invalid: invalid,
inputProps: {
value: formattedValue,
onBlur: onBlur,
onChange: onChange,
onKeyDown: onKeyDown,
onClick: onClick,
onFocus: onFocus,
onDoubleClick: onDoubleClick,
...rest
}
}));
});
EditableCurrency.displayName = "EditableCurrency";
//# sourceMappingURL=EditableCurrency.js.map