@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
210 lines • 8.94 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["text", "mode", "url", "openType", "delay", "speed", "scrollable", "leftIcon", "color", "backgroundColor", "background", "wrapable", "renderLeftIcon", "renderRightIcon", "onClick", "onClose", "style", "className", "children", "rectWrapper"];
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) { _defineProperty(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; }
import { createAnimation, useReady, nextTick } from '@tarojs/taro';
import { useState, useEffect, useRef, useCallback } from 'react';
import { View, Navigator } from '@tarojs/components';
import * as utils from '../wxs/utils';
import { getRect, requestAnimationFrame } from '../common/utils';
import VanIcon from '../icon/index';
import { get } from '../default-props';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var NOTICE_BAR_INDEX = 0;
export function NoticeBar(props) {
var _useState = useState(get().NoticeBar),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _useState3 = useState({
ready: false,
show: true,
animationData: {
actions: []
},
unitag: 0
}),
_useState4 = _slicedToArray(_useState3, 2),
state = _useState4[0],
setState = _useState4[1];
var params = {
animation: null,
resetAnimation: null,
timer: null,
wrapWidth: undefined,
contentWidth: undefined,
duration: undefined
};
var ref = 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 = _objectWithoutProperties(_d$props, _excluded);
useEffect(function () {
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
unitag: NOTICE_BAR_INDEX++
});
});
}, []);
useReady(function () {
if (process.env.TARO_ENV !== 'h5') {
ref.current.resetAnimation = createAnimation({
duration: 0,
timingFunction: 'linear'
});
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
ready: true
});
});
}
});
useEffect(function () {
ref.current.resetAnimation = createAnimation({
duration: 0,
timingFunction: 'linear'
});
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
ready: true
});
});
}, []);
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 = 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 () {
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 = useCallback(function () {
requestAnimationFrame(function () {
Promise.all([getRect(null, ".van-notice-bar__content_".concat(state.unitag), rectWrapper), 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;
}
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 = createAnimation({
duration: ref.current.duration,
timingFunction: 'linear',
delay: delay
});
scroll(true);
}
});
});
});
}, [state.unitag, scrollable, speed, delay, scroll]);
var onClickIcon = 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__*/_jsxs(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__*/_jsx(VanIcon, {
name: leftIcon,
className: "van-notice-bar__left-icon"
}) : renderLeftIcon, /*#__PURE__*/_jsx(View, {
className: "van-notice-bar__wrap van-notice-bar__wrap_".concat(state.unitag),
children: /*#__PURE__*/_jsxs(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__*/_jsx(VanIcon, {
className: "van-notice-bar__right-icon",
name: "cross",
onClick: onClickIcon
}) : mode === 'link' ? /*#__PURE__*/_jsx(Navigator, {
url: url,
openType: openType,
children: /*#__PURE__*/_jsx(VanIcon, {
className: "van-notice-bar__right-icon",
name: "arrow"
})
}) : renderRightIcon]
}));
}
export default NoticeBar;