305 lines
12 KiB
JavaScript
305 lines
12 KiB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||
var _excluded = ["contentRender", "numberFormatOptions", "numberPopoverRender", "open"],
|
||
_excluded2 = ["text", "mode", "render", "renderFormItem", "fieldProps", "proFieldKey", "plain", "valueEnum", "placeholder", "locale", "customSymbol", "numberFormatOptions", "numberPopoverRender"];
|
||
import { intlMap as allIntlMap, useIntl } from '@ant-design/pro-provider';
|
||
import { InputNumber, Popover } from 'antd';
|
||
import useMergedState from "rc-util/es/hooks/useMergedState";
|
||
import omit from "rc-util/es/omit";
|
||
import React, { useCallback, useMemo } from 'react';
|
||
// 兼容代码-----------
|
||
import "antd/es/input-number/style";
|
||
import "antd/es/popover/style";
|
||
//----------------------
|
||
|
||
import { openVisibleCompatible } from '@ant-design/pro-utils';
|
||
import { jsx as _jsx } from "react/jsx-runtime";
|
||
var defaultMoneyIntl = new Intl.NumberFormat('zh-Hans-CN', {
|
||
currency: 'CNY',
|
||
style: 'currency'
|
||
});
|
||
var enMoneyIntl = {
|
||
style: 'currency',
|
||
currency: 'USD'
|
||
};
|
||
var ruMoneyIntl = {
|
||
style: 'currency',
|
||
currency: 'RUB'
|
||
};
|
||
var rsMoneyIntl = {
|
||
style: 'currency',
|
||
currency: 'RSD'
|
||
};
|
||
var msMoneyIntl = {
|
||
style: 'currency',
|
||
currency: 'MYR'
|
||
};
|
||
var ptMoneyIntl = {
|
||
style: 'currency',
|
||
currency: 'BRL'
|
||
};
|
||
var intlMap = {
|
||
default: defaultMoneyIntl,
|
||
'zh-Hans-CN': {
|
||
currency: 'CNY',
|
||
style: 'currency'
|
||
},
|
||
'en-US': enMoneyIntl,
|
||
'ru-RU': ruMoneyIntl,
|
||
'ms-MY': msMoneyIntl,
|
||
'sr-RS': rsMoneyIntl,
|
||
'pt-BR': ptMoneyIntl
|
||
};
|
||
|
||
/**
|
||
* A function that formats the number.
|
||
* @param {string | false} locale - The currency symbol, which is the first parameter of the
|
||
* formatMoney function.
|
||
* @param {number | string | undefined} paramsText - The text to be formatted
|
||
* @param {number} precision - number, // decimal places
|
||
* @param {any} [config] - the configuration of the number format, which is the same as the
|
||
* configuration of the number format in the Intl.NumberFormat method.
|
||
* @returns A function that takes in 4 parameters and returns a string.
|
||
*/
|
||
var getTextByLocale = function getTextByLocale(locale, paramsText, precision, config) {
|
||
var moneySymbol = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
|
||
var moneyText = paramsText === null || paramsText === void 0 ? void 0 : paramsText.toString().replaceAll(',', '');
|
||
if (typeof moneyText === 'string') {
|
||
var parsedNum = Number(moneyText);
|
||
// 转换数字为NaN时，返回原始值展示
|
||
if (Number.isNaN(parsedNum)) return moneyText;
|
||
moneyText = parsedNum;
|
||
}
|
||
if (!moneyText && moneyText !== 0) return '';
|
||
var supportFormat = false;
|
||
try {
|
||
supportFormat = locale !== false && Intl.NumberFormat.supportedLocalesOf([locale.replace('_', '-')], {
|
||
localeMatcher: 'lookup'
|
||
}).length > 0;
|
||
} catch (error) {}
|
||
try {
|
||
// Formatting the number, when readonly moneySymbol = false, unused currency.
|
||
var initNumberFormatter = new Intl.NumberFormat(supportFormat && locale !== false ? (locale === null || locale === void 0 ? void 0 : locale.replace('_', '-')) || 'zh-Hans-CN' : 'zh-Hans-CN', _objectSpread(_objectSpread({}, intlMap[locale || 'zh-Hans-CN'] || defaultMoneyIntl), {}, {
|
||
maximumFractionDigits: precision
|
||
}, config));
|
||
var finalMoneyText = initNumberFormatter.format(moneyText);
|
||
|
||
// 同时出现两个符号的情况需要处理
|
||
var doubleSymbolFormat = function doubleSymbolFormat(Text) {
|
||
var match = Text.match(/\d+/);
|
||
if (match) {
|
||
var number = match[0];
|
||
return Text.slice(Text.indexOf(number));
|
||
} else {
|
||
return Text;
|
||
}
|
||
};
|
||
// 过滤一下，只留下数字
|
||
var pureMoneyText = doubleSymbolFormat(finalMoneyText);
|
||
|
||
/**
|
||
* 首字母判断是否是正负符号
|
||
*/
|
||
var _ref = finalMoneyText || '',
|
||
_ref2 = _slicedToArray(_ref, 1),
|
||
operatorSymbol = _ref2[0];
|
||
|
||
// 兼容正负号
|
||
if (['+', '-'].includes(operatorSymbol)) {
|
||
return "".concat(moneySymbol || '').concat(operatorSymbol).concat(pureMoneyText);
|
||
}
|
||
return "".concat(moneySymbol || '').concat(pureMoneyText);
|
||
} catch (error) {
|
||
return moneyText;
|
||
}
|
||
};
|
||
|
||
// 默认的代码类型
|
||
var DefaultPrecisionCont = 2;
|
||
|
||
/**
|
||
* input 的弹框，用于显示格式化之后的内容
|
||
*
|
||
* @result 10,000 -> 一万
|
||
* @result 10, 00, 000, 000 -> 一亿
|
||
*/
|
||
var InputNumberPopover = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
||
var content = _ref3.contentRender,
|
||
numberFormatOptions = _ref3.numberFormatOptions,
|
||
numberPopoverRender = _ref3.numberPopoverRender,
|
||
open = _ref3.open,
|
||
rest = _objectWithoutProperties(_ref3, _excluded);
|
||
var _useMergedState = useMergedState(function () {
|
||
return rest.defaultValue;
|
||
}, {
|
||
value: rest.value,
|
||
onChange: rest.onChange
|
||
}),
|
||
_useMergedState2 = _slicedToArray(_useMergedState, 2),
|
||
value = _useMergedState2[0],
|
||
onChange = _useMergedState2[1];
|
||
|
||
/**
|
||
* 如果content 存在要根据 content 渲染一下
|
||
*/
|
||
var dom = content === null || content === void 0 ? void 0 : content(_objectSpread(_objectSpread({}, rest), {}, {
|
||
value: value
|
||
}));
|
||
var props = openVisibleCompatible(dom ? open : false);
|
||
return /*#__PURE__*/_jsx(Popover, _objectSpread(_objectSpread({
|
||
placement: "topLeft"
|
||
}, props), {}, {
|
||
trigger: ['focus', 'click'],
|
||
content: dom,
|
||
getPopupContainer: function getPopupContainer(triggerNode) {
|
||
return (triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.parentElement) || document.body;
|
||
},
|
||
children: /*#__PURE__*/_jsx(InputNumber, _objectSpread(_objectSpread({
|
||
ref: ref
|
||
}, rest), {}, {
|
||
value: value,
|
||
onChange: onChange
|
||
}))
|
||
}));
|
||
});
|
||
|
||
/**
|
||
* 金额组件
|
||
*
|
||
* @param FieldMoneyProps {
|
||
* text: number;
|
||
* moneySymbol?: string; }
|
||
*/
|
||
var FieldMoney = function FieldMoney(_ref4, ref) {
|
||
var _fieldProps$precision;
|
||
var text = _ref4.text,
|
||
type = _ref4.mode,
|
||
render = _ref4.render,
|
||
renderFormItem = _ref4.renderFormItem,
|
||
fieldProps = _ref4.fieldProps,
|
||
proFieldKey = _ref4.proFieldKey,
|
||
plain = _ref4.plain,
|
||
valueEnum = _ref4.valueEnum,
|
||
placeholder = _ref4.placeholder,
|
||
locale = _ref4.locale,
|
||
_ref4$customSymbol = _ref4.customSymbol,
|
||
customSymbol = _ref4$customSymbol === void 0 ? fieldProps.customSymbol : _ref4$customSymbol,
|
||
_ref4$numberFormatOpt = _ref4.numberFormatOptions,
|
||
numberFormatOptions = _ref4$numberFormatOpt === void 0 ? fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberFormatOptions : _ref4$numberFormatOpt,
|
||
_ref4$numberPopoverRe = _ref4.numberPopoverRender,
|
||
numberPopoverRender = _ref4$numberPopoverRe === void 0 ? (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberPopoverRender) || false : _ref4$numberPopoverRe,
|
||
rest = _objectWithoutProperties(_ref4, _excluded2);
|
||
var precision = (_fieldProps$precision = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.precision) !== null && _fieldProps$precision !== void 0 ? _fieldProps$precision : DefaultPrecisionCont;
|
||
var intl = useIntl();
|
||
// 当手动传入locale时，应该以传入的locale为准，未传入时则根据全局的locale进行国际化
|
||
if (locale && allIntlMap[locale]) {
|
||
intl = allIntlMap[locale];
|
||
}
|
||
var placeholderValue = placeholder || intl.getMessage('tableForm.inputPlaceholder', '请输入');
|
||
|
||
/**
|
||
* 获取货币的符号
|
||
* 如果 customSymbol 存在直接使用 customSymbol
|
||
* 如果 moneySymbol 为 false，返回空
|
||
* 如果没有配置使用默认的
|
||
*/
|
||
var moneySymbol = useMemo(function () {
|
||
if (customSymbol) {
|
||
return customSymbol;
|
||
}
|
||
if (rest.moneySymbol === false || fieldProps.moneySymbol === false) {
|
||
return undefined;
|
||
}
|
||
return intl.getMessage('moneySymbol', '¥');
|
||
}, [customSymbol, fieldProps.moneySymbol, intl, rest.moneySymbol]);
|
||
|
||
/*
|
||
* A function that formats the number.
|
||
* 1000 -> 1,000
|
||
*/
|
||
var getFormateValue = useCallback(function (value) {
|
||
// 新建数字正则，需要配置小数点
|
||
var reg = new RegExp("\\B(?=(\\d{".concat(3 + Math.max(precision - DefaultPrecisionCont, 0), "})+(?!\\d))"), 'g');
|
||
// 切分为 整数 和 小数 不同
|
||
var _String$split = String(value).split('.'),
|
||
_String$split2 = _slicedToArray(_String$split, 2),
|
||
intStr = _String$split2[0],
|
||
floatStr = _String$split2[1];
|
||
|
||
// 最终的数据string，需要去掉 , 号。
|
||
var resultInt = intStr.replace(reg, ',');
|
||
|
||
// 计算最终的小数点
|
||
var resultFloat = '';
|
||
|
||
/* Taking the floatStr and slicing it to the precision. */
|
||
if (floatStr && precision > 0) {
|
||
resultFloat = ".".concat(floatStr.slice(0, precision === undefined ? DefaultPrecisionCont : precision));
|
||
}
|
||
return "".concat(resultInt).concat(resultFloat);
|
||
}, [precision]);
|
||
|
||
// 如果是阅读模式，直接返回字符串
|
||
if (type === 'read') {
|
||
var dom = /*#__PURE__*/_jsx("span", {
|
||
ref: ref,
|
||
children: getTextByLocale(locale || false, text, precision, numberFormatOptions !== null && numberFormatOptions !== void 0 ? numberFormatOptions : fieldProps.numberFormatOptions, moneySymbol)
|
||
});
|
||
if (render) {
|
||
return render(text, _objectSpread({
|
||
mode: type
|
||
}, fieldProps), dom);
|
||
}
|
||
return dom;
|
||
}
|
||
if (type === 'edit' || type === 'update') {
|
||
var _dom = /*#__PURE__*/_jsx(InputNumberPopover, _objectSpread(_objectSpread({
|
||
contentRender: function contentRender(props) {
|
||
if (numberPopoverRender === false) return null;
|
||
if (!props.value) return null;
|
||
var localeText = getTextByLocale(moneySymbol || locale || false, "".concat(getFormateValue(props.value)), precision, _objectSpread(_objectSpread({}, numberFormatOptions), {}, {
|
||
notation: 'compact'
|
||
}), moneySymbol);
|
||
if (typeof numberPopoverRender === 'function') {
|
||
return numberPopoverRender === null || numberPopoverRender === void 0 ? void 0 : numberPopoverRender(props, localeText);
|
||
}
|
||
return localeText;
|
||
},
|
||
ref: ref,
|
||
precision: precision
|
||
// 删除默认min={0}，允许输入一个负数的金额，用户可自行配置min来限制是否允许小于0的金额
|
||
,
|
||
formatter: function formatter(value) {
|
||
if (value && moneySymbol) {
|
||
return "".concat(moneySymbol, " ").concat(getFormateValue(value));
|
||
}
|
||
return value === null || value === void 0 ? void 0 : value.toString();
|
||
},
|
||
parser: function parser(value) {
|
||
if (moneySymbol && value) {
|
||
return value.replace(new RegExp("\\".concat(moneySymbol, "\\s?|(,*)"), 'g'), '');
|
||
}
|
||
return value;
|
||
},
|
||
placeholder: placeholderValue
|
||
}, omit(fieldProps, ['numberFormatOptions', 'precision', 'numberPopoverRender', 'customSymbol', 'moneySymbol', 'visible', 'open'])), {}, {
|
||
onBlur: fieldProps.onBlur ? function (e) {
|
||
var _fieldProps$onBlur;
|
||
var value = e.target.value;
|
||
if (moneySymbol && value) {
|
||
value = value.replace(new RegExp("\\".concat(moneySymbol, "\\s?|(,*)"), 'g'), '');
|
||
}
|
||
(_fieldProps$onBlur = fieldProps.onBlur) === null || _fieldProps$onBlur === void 0 || _fieldProps$onBlur.call(fieldProps, value);
|
||
} : undefined
|
||
}));
|
||
if (renderFormItem) {
|
||
return renderFormItem(text, _objectSpread({
|
||
mode: type
|
||
}, fieldProps), _dom);
|
||
}
|
||
return _dom;
|
||
}
|
||
return null;
|
||
};
|
||
export default /*#__PURE__*/React.forwardRef(FieldMoney); |