@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
89 lines (88 loc) • 4.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Lottie", {
enumerable: true,
get: function() {
return Lottie;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _taro = require("@tarojs/taro");
var _lottieminiprogram = /*#__PURE__*/ _interop_require_default._(require("@nutui/lottie-miniprogram"));
var _getsysteminfo = require("../../utils/taro/get-system-info");
var _useuuid = require("../../hooks/use-uuid");
var Lottie = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
var uuid = (0, _useuuid.useUuid)();
var id = "nutLottie-".concat(uuid);
var animation = (0, _react.useRef)();
var inited = (0, _react.useRef)(false);
var source = props.source, _props_loop = props.loop, loop = _props_loop === void 0 ? true : _props_loop, _props_autoPlay = props.autoPlay, autoPlay = _props_autoPlay === void 0 ? true : _props_autoPlay, onComplete = props.onComplete, style = props.style, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed, _props_dpr = props.dpr, dpr = _props_dpr === void 0 ? true : _props_dpr;
var setSpeed = function setSpeed() {
if (animation.current) {
animation.current.setSpeed(Math.abs(speed));
animation.current.setDirection(speed > 0 ? 1 : -1);
}
};
(0, _react.useImperativeHandle)(ref, function() {
return animation.current || {};
});
var pixelRatio = (0, _react.useRef)((0, _getsysteminfo.getWindowInfo)().pixelRatio);
(0, _taro.useReady)(function() {
(0, _taro.createSelectorQuery)().select("#".concat(id)).fields({
node: true,
size: true
}, function(res) {
try {
var canvas = res.node;
var context = canvas.getContext('2d');
// scale canvas to adapt pixelRatio
if (style && style.width !== undefined && style.height !== undefined) {
var finalDpr = dpr ? pixelRatio.current : 1;
canvas.width = parseFloat(style.width.toString()) * finalDpr;
canvas.height = parseFloat(style.height.toString()) * finalDpr;
context.scale(finalDpr, finalDpr);
}
_lottieminiprogram.default.setup(canvas);
animation.current = _lottieminiprogram.default.loadAnimation({
animationData: source,
loop: loop,
autoplay: autoPlay,
rendererSettings: {
context: context
}
});
onComplete && animation.current.addEventListener('complete', onComplete);
setSpeed();
inited.current = true;
} catch (error) {
console.error(error);
}
}).exec();
});
(0, _taro.useUnload)(function() {
onComplete && animation.current && animation.current.removeEventListener('complete', onComplete);
animation.current && animation.current.destroy();
});
return (0, _taro.getEnv)() === 'WEAPP' || (0, _taro.getEnv)() === 'JD' ? /*#__PURE__*/ _react.default.createElement("canvas", {
id: id,
// @ts-ignore
// eslint-disable-next-line react/no-unknown-property
canvasId: id,
// eslint-disable-next-line react/no-unknown-property
disalbeScroll: true,
type: "2d",
style: style
}) : /*#__PURE__*/ _react.default.createElement("canvas", {
id: id,
// eslint-disable-next-line react/no-unknown-property
"canvas-id": id,
// eslint-disable-next-line react/no-unknown-property
"disalbe-scroll": true,
style: style
});
});
Lottie.displayName = 'NutLottie';