UNPKG

@nutui/nutui-react-taro

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

89 lines (88 loc) 4.06 kB
"use strict"; 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';