mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
46 lines • 1.92 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "precision", "showColor", "showSymbol", "suffix", "className"];
import React from 'react';
import { isNaN, isNil, toString } from 'ut2';
import classNames from 'classnames';
import TextField from "./TextField";
import { fieldPrefixClass } from "../../config";
var prefixCls = "".concat(fieldPrefixClass, "-percent");
function getColor(value) {
if (value === 0) {
return '#595959';
}
return value > 0 ? '#ff4d4f' : '#52c41a';
}
function getSymbol(value) {
if (value <= 0) {
return '';
}
return '+';
}
var PercentField = /*#__PURE__*/React.memo(function (_ref) {
var value = _ref.value,
_ref$precision = _ref.precision,
precision = _ref$precision === void 0 ? 2 : _ref$precision,
_ref$showColor = _ref.showColor,
showColor = _ref$showColor === void 0 ? false : _ref$showColor,
_ref$showSymbol = _ref.showSymbol,
showSymbol = _ref$showSymbol === void 0 ? false : _ref$showSymbol,
_ref$suffix = _ref.suffix,
suffix = _ref$suffix === void 0 ? '%' : _ref$suffix,
className = _ref.className,
restProps = _objectWithoutProperties(_ref, _excluded);
var realValue = typeof value === 'string' && value.includes('%') ? parseFloat(value.replace('%', '')) : parseFloat(toString(value));
var color = getColor(realValue);
var symbol = showSymbol ? getSymbol(realValue) : null;
var valueRet = isNaN(realValue) || value === '' || isNil(value) ? '' : typeof precision === 'number' ? realValue.toFixed(precision) : realValue;
return /*#__PURE__*/React.createElement(TextField, _extends({
value: valueRet,
color: showColor ? color : undefined,
prefix: symbol,
suffix: suffix,
className: classNames(prefixCls, className)
}, restProps));
});
export default PercentField;