@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
255 lines (254 loc) • 10.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Circle = Circle;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _taro = require("@tarojs/taro");
var _react = require("react");
var _components = require("@tarojs/components");
var _runtime = require("@tarojs/runtime");
var _validator = require("../common/validator");
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["text", "lineCap", "value", "speed", "size", "fill", "layerColor", "color", "strokeWidth", "clockwise", "beginAngle", "style", "className", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var d = (0, _defaultProps.get)().Circle;
function format(rate) {
return Math.min(Math.max(rate, 0), 100);
}
var PERIMETER = 2 * Math.PI;
var BEGIN_ANGLE = -Math.PI / 2;
var STEP = 1;
function Circle(props) {
var indexRef = (0, _react.useRef)("van-circle_uni_".concat(+new Date()).concat(Math.ceil(Math.random() * 10000)));
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
ready = _useState2[0],
setReady = _useState2[1];
var ref = (0, _react.useRef)({
ctx: undefined,
inited: false,
currentValue: undefined,
interval: undefined,
hoverColor: ''
});
var _d$props = _objectSpread(_objectSpread({}, d), props),
text = _d$props.text,
_d$props$lineCap = _d$props.lineCap,
lineCap = _d$props$lineCap === void 0 ? 'round' : _d$props$lineCap,
_d$props$value = _d$props.value,
value = _d$props$value === void 0 ? 0 : _d$props$value,
_d$props$speed = _d$props.speed,
speed = _d$props$speed === void 0 ? 50 : _d$props$speed,
_d$props$size = _d$props.size,
size = _d$props$size === void 0 ? 100 : _d$props$size,
fill = _d$props.fill,
_d$props$layerColor = _d$props.layerColor,
layerColor = _d$props$layerColor === void 0 ? '#ffffff' : _d$props$layerColor,
_d$props$color = _d$props.color,
color = _d$props$color === void 0 ? '#1989fa' : _d$props$color,
_d$props$strokeWidth = _d$props.strokeWidth,
strokeWidth = _d$props$strokeWidth === void 0 ? 4 : _d$props$strokeWidth,
_d$props$clockwise = _d$props.clockwise,
clockwise = _d$props$clockwise === void 0 ? true : _d$props$clockwise,
_d$props$beginAngle = _d$props.beginAngle,
beginAngle = _d$props$beginAngle === void 0 ? BEGIN_ANGLE : _d$props$beginAngle,
style = _d$props.style,
className = _d$props.className,
children = _d$props.children,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
(0, _react.useEffect)(function () {
var _Current$page;
_runtime.Current.page = (_Current$page = _runtime.Current.page) !== null && _Current$page !== void 0 ? _Current$page : {
path: "page-".concat(indexRef.current)
};
setTimeout(function () {
if (process.env.TARO_ENV !== 'h5' && process.env.TARO_ENV !== 'swan' && process.env.TARO_ENV !== 'kwai') {
var query = (0, _taro.createSelectorQuery)();
query.select("#".concat(indexRef.current)).fields({
node: true,
size: true
}).exec(function (res) {
var canvas = res[0].node;
var ctx = canvas.getContext('2d');
canvas.width = res[0].width * 3;
canvas.height = res[0].height * 3;
ctx.scale(3, 3);
ref.current.ctx = ctx;
setReady(true);
});
} else {
var ctx = (0, _taro.createCanvasContext)(indexRef.current);
ref.current.ctx = ctx;
setReady(true);
}
}, 100);
}, []);
var setHoverColor = function setHoverColor() {
if ((0, _validator.isObj)(color)) {
var _color = color;
try {
// 快手不支持渐变色
if (process.env.TARO_ENV === 'kwai') {
Object.keys(color).sort(function (a, b) {
return parseFloat(a) - parseFloat(b);
}).map(function (key) {
return ref.current.hoverColor = _color[key];
});
} else {
var LinearColor = ref.current.ctx.createLinearGradient(size, 0, 0, 0);
Object.keys(color).sort(function (a, b) {
return parseFloat(a) - parseFloat(b);
}).map(function (key) {
return LinearColor.addColorStop(parseFloat(key) / 100, _color[key]);
});
ref.current.hoverColor = LinearColor;
}
} catch (error) {
console.error(error);
}
} else {
ref.current.hoverColor = color;
}
return Promise.resolve();
};
var presetCanvas = (0, _react.useCallback)(function (context, strokeStyle, beginAngle, endAngle, fill) {
var position = size / 2;
var radius = position - strokeWidth / 2;
if (process.env.TARO_ENV === 'swan') {
context.setStrokeStyle(strokeStyle);
context.setLineWidth(strokeWidth);
context.setLineCap(lineCap);
} else {
context.strokeStyle = strokeStyle;
context.lineWidth = strokeWidth;
context.lineCap = lineCap;
}
context.beginPath();
context.arc(position, position, radius, beginAngle, endAngle, !clockwise);
context.stroke();
if (fill) {
if (process.env.TARO_ENV === 'swan') {
context.setFillStyle(fill);
} else {
context.fillStyle = fill;
}
context.fill();
}
}, [clockwise, lineCap, size, strokeWidth]);
var renderLayerCircle = (0, _react.useCallback)(function (context) {
presetCanvas(context, layerColor, 0, PERIMETER, fill);
}, [fill, layerColor, presetCanvas]);
var renderHoverCircle = (0, _react.useCallback)(function (context, formatValue) {
// 结束角度
var progress = PERIMETER * (formatValue / 100);
var endAngle = clockwise ? beginAngle + progress : 3 * Math.PI - (beginAngle + progress);
presetCanvas(context, ref.current.hoverColor, beginAngle, endAngle);
}, [clockwise, presetCanvas]);
var drawCircle = (0, _react.useCallback)(function (currentValue) {
ref.current.ctx.clearRect(0, 0, size, size);
renderLayerCircle(ref.current.ctx);
var formatValue = format(currentValue);
if (formatValue !== 0) {
renderHoverCircle(ref.current.ctx, formatValue);
}
if (process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'swan' || process.env.TARO_ENV === 'kwai') {
ref.current.ctx.draw();
}
}, [renderHoverCircle, renderLayerCircle, size]);
var clearMockInterval = function clearMockInterval() {
if (ref.current.interval) {
clearTimeout(ref.current.interval);
ref.current.interval = null;
}
};
var reRender = (0, _react.useCallback)(function () {
if (speed <= 0 || speed > 1000) {
drawCircle(value);
return;
}
clearMockInterval();
ref.current.currentValue = ref.current.currentValue || 0;
var run = function run() {
ref.current.interval = setTimeout(function () {
if (ref.current.currentValue !== value) {
if (Math.abs(ref.current.currentValue - value) < STEP) {
ref.current.currentValue = value;
} else if (ref.current.currentValue < value) {
ref.current.currentValue += STEP;
} else {
ref.current.currentValue -= STEP;
}
drawCircle(ref.current.currentValue);
run();
} else {
clearMockInterval();
}
}, 1000 / speed);
};
run();
}, [drawCircle, speed, value]);
(0, _react.useEffect)(function () {
if (ready) {
reRender();
}
}, [reRender, value, ready]);
(0, _react.useEffect)(function () {
if (ready) {
drawCircle(ref.current.currentValue);
}
// eslint-disable-next-line
}, [size, ready]);
(0, _react.useEffect)(function () {
if (ready) {
setHoverColor().then(function () {
drawCircle(ref.current.currentValue);
}).catch(function () {});
}
// eslint-disable-next-line
}, [color, ready]);
(0, _react.useEffect)(function () {
return function () {
clearMockInterval();
};
/* eslint-disable-next-line */
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
id: "page-".concat(indexRef.current),
className: "van-circle ".concat(className),
style: style
}, others), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Canvas
// eslint-disable-next-line
// @ts-ignore
, {
width: size
// @ts-ignore
,
height: size,
nativeProps: {
width: size,
height: size
},
className: "van-circle__canvas ".concat(indexRef.current),
style: 'width: ' + "".concat(size, "px") + ';height:' + "".concat(size, "px"),
id: indexRef.current,
type: "2d",
canvasId: indexRef.current
}), !text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-circle__text",
children: children
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-circle__text",
children: text
})]
}));
}
var _default = Circle;
exports.default = _default;