zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
131 lines (122 loc) • 6.44 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../shared/utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint no-nested-ternary: off */
var Gauge = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var className = props.className,
id = props.id,
style = props.style,
_props$type = props.type,
type = _props$type === void 0 ? 'circle' : _props$type,
_props$value = props.value,
value = _props$value === void 0 ? 0 : _props$value,
_props$size = props.size,
size = _props$size === void 0 ? 200 : _props$size,
_props$bgColor = props.bgColor,
bgColor = _props$bgColor === void 0 ? 'transparent' : _props$bgColor,
_props$borderBgColor = props.borderBgColor,
borderBgColor = _props$borderBgColor === void 0 ? '#eeeeee' : _props$borderBgColor,
_props$borderColor = props.borderColor,
borderColor = _props$borderColor === void 0 ? '#000000' : _props$borderColor,
_props$borderWidth = props.borderWidth,
borderWidth = _props$borderWidth === void 0 ? 10 : _props$borderWidth,
valueText = props.valueText,
_props$valueTextColor = props.valueTextColor,
valueTextColor = _props$valueTextColor === void 0 ? '#000000' : _props$valueTextColor,
_props$valueFontSize = props.valueFontSize,
valueFontSize = _props$valueFontSize === void 0 ? 31 : _props$valueFontSize,
_props$valueFontWeigh = props.valueFontWeight,
valueFontWeight = _props$valueFontWeigh === void 0 ? 500 : _props$valueFontWeigh,
labelText = props.labelText,
_props$labelTextColor = props.labelTextColor,
labelTextColor = _props$labelTextColor === void 0 ? '#888888' : _props$labelTextColor,
_props$labelFontSize = props.labelFontSize,
labelFontSize = _props$labelFontSize === void 0 ? 14 : _props$labelFontSize,
_props$labelFontWeigh = props.labelFontWeight,
labelFontWeight = _props$labelFontWeigh === void 0 ? 400 : _props$labelFontWeigh;
var extraAttrs = (0, _utils.getExtraAttrs)(props);
var elRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(ref, function () {
return {
el: elRef.current
};
});
var classes = (0, _utils.classNames)(className, 'gauge');
var semiCircle = type === 'semicircle';
var radius = size / 2 - borderWidth / 2;
var length = 2 * Math.PI * radius;
var progress = Math.max(Math.min(value, 1), 0);
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
id: id,
style: style,
className: classes,
ref: elRef
}, extraAttrs), /*#__PURE__*/_react.default.createElement("svg", {
className: "gauge-svg",
width: size + "px",
height: (semiCircle ? size / 2 : size) + "px",
viewBox: "0 0 " + size + " " + (semiCircle ? size / 2 : size)
}, semiCircle && /*#__PURE__*/_react.default.createElement("path", {
className: "gauge-back-semi",
d: "M" + (size - borderWidth / 2) + "," + size / 2 + " a1,1 0 0,0 -" + (size - borderWidth) + ",0",
stroke: borderBgColor,
strokeWidth: borderWidth,
fill: bgColor || 'none'
}), semiCircle && /*#__PURE__*/_react.default.createElement("path", {
className: "gauge-front-semi",
d: "M" + (size - borderWidth / 2) + "," + size / 2 + " a1,1 0 0,0 -" + (size - borderWidth) + ",0",
stroke: borderColor,
strokeWidth: borderWidth,
strokeDasharray: length / 2,
strokeDashoffset: length / 2 * (1 + progress),
fill: borderBgColor ? 'none' : bgColor || 'none'
}), !semiCircle && borderBgColor && /*#__PURE__*/_react.default.createElement("circle", {
className: "gauge-back-circle",
stroke: borderBgColor,
strokeWidth: borderWidth,
fill: bgColor || 'none',
cx: size / 2,
cy: size / 2,
r: radius
}), !semiCircle && /*#__PURE__*/_react.default.createElement("circle", {
className: "gauge-front-circle",
transform: "rotate(-90 " + size / 2 + " " + size / 2 + ")",
stroke: borderColor,
strokeWidth: borderWidth,
strokeDasharray: length,
strokeDashoffset: length * (1 - progress),
fill: borderBgColor ? 'none' : bgColor || 'none',
cx: size / 2,
cy: size / 2,
r: radius
}), valueText && /*#__PURE__*/_react.default.createElement("text", {
className: "gauge-value-text",
x: "50%",
y: semiCircle ? '100%' : '50%',
fontWeight: valueFontWeight,
fontSize: valueFontSize,
fill: valueTextColor,
dy: semiCircle ? labelText ? -labelFontSize - 15 : -5 : 0,
textAnchor: "middle",
dominantBaseline: !semiCircle ? 'middle' : null
}, valueText), labelText && /*#__PURE__*/_react.default.createElement("text", {
className: "gauge-label-text",
x: "50%",
y: semiCircle ? '100%' : '50%',
fontWeight: labelFontWeight,
fontSize: labelFontSize,
fill: labelTextColor,
dy: semiCircle ? -5 : valueText ? valueFontSize / 2 + 10 : 0,
textAnchor: "middle",
dominantBaseline: !semiCircle ? 'middle' : null
}, labelText)));
});
Gauge.displayName = 'zmp-gauge';
var _default = Gauge;
exports.default = _default;