@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
221 lines (220 loc) • 10.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NoticeBar = NoticeBar;
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 utils = _interopRequireWildcard(require("../wxs/utils"));
var _utils2 = require("../common/utils");
var _index = _interopRequireDefault(require("../icon/index"));
var _defaultProps = require("../default-props");
var computed = _interopRequireWildcard(require("./wxs"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["text", "mode", "url", "openType", "delay", "speed", "scrollable", "leftIcon", "color", "backgroundColor", "background", "wrapable", "renderLeftIcon", "renderRightIcon", "onClick", "onClose", "style", "className", "children", "rectWrapper"];
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; }
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 NOTICE_BAR_INDEX = 0;
function NoticeBar(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().NoticeBar),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var _useState3 = (0, _react.useState)({
ready: false,
show: true,
animationData: {
actions: []
},
unitag: 0
}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
state = _useState4[0],
setState = _useState4[1];
var params = {
animation: null,
resetAnimation: null,
timer: null,
wrapWidth: undefined,
contentWidth: undefined,
duration: undefined
};
var ref = (0, _react.useRef)(params);
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$text = _d$props.text,
text = _d$props$text === void 0 ? '' : _d$props$text,
_d$props$mode = _d$props.mode,
mode = _d$props$mode === void 0 ? '' : _d$props$mode,
_d$props$url = _d$props.url,
url = _d$props$url === void 0 ? '' : _d$props$url,
_d$props$openType = _d$props.openType,
openType = _d$props$openType === void 0 ? 'navigate' : _d$props$openType,
_d$props$delay = _d$props.delay,
delay = _d$props$delay === void 0 ? 1 : _d$props$delay,
_d$props$speed = _d$props.speed,
speed = _d$props$speed === void 0 ? 60 : _d$props$speed,
_d$props$scrollable = _d$props.scrollable,
scrollable = _d$props$scrollable === void 0 ? null : _d$props$scrollable,
_d$props$leftIcon = _d$props.leftIcon,
leftIcon = _d$props$leftIcon === void 0 ? '' : _d$props$leftIcon,
_d$props$color = _d$props.color,
color = _d$props$color === void 0 ? '#ed6a0c' : _d$props$color,
_d$props$backgroundCo = _d$props.backgroundColor,
backgroundColor = _d$props$backgroundCo === void 0 ? '#fffbe8' : _d$props$backgroundCo,
background = _d$props.background,
wrapable = _d$props.wrapable,
renderLeftIcon = _d$props.renderLeftIcon,
renderRightIcon = _d$props.renderRightIcon,
onClick = _d$props.onClick,
onClose = _d$props.onClose,
style = _d$props.style,
className = _d$props.className,
children = _d$props.children,
_d$props$rectWrapper = _d$props.rectWrapper,
rectWrapper = _d$props$rectWrapper === void 0 ? '' : _d$props$rectWrapper,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
(0, _react.useEffect)(function () {
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
unitag: NOTICE_BAR_INDEX++
});
});
}, []);
(0, _taro.useReady)(function () {
if (process.env.TARO_ENV !== 'h5') {
ref.current.resetAnimation = (0, _taro.createAnimation)({
duration: 0,
timingFunction: 'linear'
});
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
ready: true
});
});
}
});
(0, _react.useEffect)(function () {
ref.current.resetAnimation = (0, _taro.createAnimation)({
duration: 0,
timingFunction: 'linear'
});
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
ready: true
});
});
}, []);
(0, _react.useEffect)(function () {
if (text && state.ready) {
init();
}
return function () {
/* eslint-disable-next-line */
ref.current.timer && clearTimeout(ref.current.timer);
};
/* eslint-disable-next-line */
}, [text, speed, state.ready]);
var scroll = (0, _react.useCallback)(function () {
var isInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
ref.current.timer && clearTimeout(ref.current.timer);
ref.current.timer = null;
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
animationData: ref.current.resetAnimation.translateX(isInit ? 0 : ref.current.wrapWidth).step().export()
});
});
setTimeout(function () {
(0, _utils2.requestAnimationFrame)(function () {
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
animationData: ref.current.animation.translateX(-ref.current.contentWidth).step().export()
});
});
});
}, 10);
ref.current.timer = setTimeout(function () {
scroll();
}, ref.current.duration);
}, []);
var init = (0, _react.useCallback)(function () {
(0, _utils2.requestAnimationFrame)(function () {
Promise.all([(0, _utils2.getRect)(null, ".van-notice-bar__content_".concat(state.unitag), rectWrapper), (0, _utils2.getRect)(null, ".van-notice-bar__wrap_".concat(state.unitag), rectWrapper)]).then(function (rects) {
var contentRect = rects[0];
var wrapRect = rects[1];
if (contentRect == null || wrapRect == null || !contentRect.width || !wrapRect.width || scrollable === false) {
return;
}
(0, _taro.nextTick)(function () {
if (scrollable || wrapRect.width <= contentRect.width) {
ref.current.wrapWidth = wrapRect.width;
ref.current.contentWidth = contentRect.width;
ref.current.duration = (wrapRect.width + contentRect.width) / speed * 1000;
ref.current.animation = (0, _taro.createAnimation)({
duration: ref.current.duration,
timingFunction: 'linear',
delay: delay
});
scroll(true);
}
});
});
});
}, [state.unitag, scrollable, speed, delay, scroll]);
var onClickIcon = (0, _react.useCallback)(function (event) {
if (mode === 'closeable') {
ref.current.timer && clearTimeout(ref.current.timer);
ref.current.timer = null;
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
show: false
});
});
onClose === null || onClose === void 0 ? void 0 : onClose(event);
}
}, [mode, onClose]);
return state.show && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
className: utils.bem('notice-bar', {
withicon: mode,
wrapable: wrapable
}) + " ".concat(className || ''),
style: utils.style([computed.rootStyle({
color: color,
backgroundColor: backgroundColor,
background: background
}), style])
}, others), {}, {
onClick: onClick,
children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
name: leftIcon,
className: "van-notice-bar__left-icon"
}) : renderLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-notice-bar__wrap van-notice-bar__wrap_".concat(state.unitag),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-notice-bar__content van-notice-bar__content_".concat(state.unitag, " ") + (scrollable === false && !wrapable ? 'van-ellipsis' : ''),
animation: state.animationData,
children: [text, !text && children]
})
}), mode === 'closeable' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
className: "van-notice-bar__right-icon",
name: "cross",
onClick: onClickIcon
}) : mode === 'link' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator, {
url: url,
openType: openType,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
className: "van-notice-bar__right-icon",
name: "arrow"
})
}) : renderRightIcon]
}));
}
var _default = NoticeBar;
exports.default = _default;