@activecollab/components
Version:
ActiveCollab Components
86 lines • 2.79 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "step", "thousandSeparator", "value", "onSave", "onCancel", "className", "allowEmptyValue", "onEnterKeyPress", "onClick", "onChange", "trimDecimals", "min", "max", "invalid"];
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
} = _ref,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
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: _extends({
value: formattedValue,
onBlur: onBlur,
onChange: onChange,
onKeyDown: onKeyDown,
onClick: onClick,
onFocus: onFocus,
onDoubleClick: onDoubleClick
}, rest)
}));
});
EditableCurrency.displayName = "EditableCurrency";
//# sourceMappingURL=EditableCurrency.js.map