@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
181 lines (180 loc) • 7.81 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect, useState } from "react";
import { Close } from "@nutui/icons-react-taro";
import classNames from "classnames";
import { View } from "@tarojs/components";
import Popover from "../popover/index";
import { getRectById } from "../../utils/taro/get-rect-by-id";
import { ComponentDefaults } from "../../utils/typings";
import { useConfig } from "../configprovider/index";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
visible: false,
type: 'step',
location: 'bottom',
mask: true,
maskWidth: '',
maskHeight: '',
offset: [
8,
10
],
title: '',
next: '',
prev: '',
complete: '',
showPrev: true,
closeOnOverlayClick: true
});
var classPrefix = 'nut-tour';
export var Tour = function(props) {
var locale = useConfig().locale;
var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, title = _$_object_spread.title, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, showPrev = _$_object_spread.showPrev, list = _$_object_spread.list, type = _$_object_spread.type, location = _$_object_spread.location, visible = _$_object_spread.visible, mask = _$_object_spread.mask, maskWidth = _$_object_spread.maskWidth, maskHeight = _$_object_spread.maskHeight, offset = _$_object_spread.offset, next = _$_object_spread.next, prev = _$_object_spread.prev, complete = _$_object_spread.complete, onClose = _$_object_spread.onClose, onChange = _$_object_spread.onChange, style = _$_object_spread.style;
var _useState = _sliced_to_array(useState(false), 2), showTour = _useState[0], setShowTour = _useState[1];
var _useState1 = _sliced_to_array(useState(false), 2), showPopup = _useState1[0], setShowPopup = _useState1[1];
var _useState2 = _sliced_to_array(useState(0), 2), active = _useState2[0], setActive = _useState2[1];
var _useState3 = _sliced_to_array(useState({
top: 0,
left: 0,
right: 0,
bottom: 0,
width: 0,
height: 0
}), 2), maskRect = _useState3[0], setMaskRect = _useState3[1];
var classes = classNames(classPrefix, className);
useEffect(function() {
if (visible) {
getRootPosition();
}
setActive(0);
setShowTour(visible);
setShowPopup(visible);
}, [
visible
]);
useEffect(function() {
if (visible) {
setShowPopup(true);
getRootPosition();
}
}, [
active
]);
var getRootPosition = function() {
getRectById(list[active].target).then(function(rect) {
setMaskRect({
top: rect.top,
left: rect.left,
right: rect.right,
bottom: rect.bottom,
width: rect.width,
height: rect.height
});
});
};
var maskStyle = function() {
var width = maskRect.width, height = maskRect.height, left = maskRect.left, top = maskRect.top;
var center = [
left + width / 2,
top + height / 2
] // 中心点 【横，纵】
;
var w = Number(maskWidth || width);
var h = Number(maskHeight || height);
var styles = {
width: "".concat(w + +offset[1] * 2, "px"),
height: "".concat(h + +offset[0] * 2, "px"),
top: "".concat(center[1] - h / 2 - +offset[0], "px"),
left: "".concat(center[0] - w / 2 - +offset[1], "px")
};
return styles;
};
var maskClose = function(e) {
setShowTour(false);
setShowPopup(false);
onClose && onClose(e);
};
var handleClickMask = function(e) {
closeOnOverlayClick && maskClose(e);
};
var changeStep = function(type) {
if (type === 'next') {
setActive(active + 1);
onChange && onChange(active + 1);
} else {
setActive(active - 1);
onChange && onChange(active - 1);
}
setShowPopup(false);
};
return /*#__PURE__*/ React.createElement(View, {
className: classes,
style: style
}, /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-masked",
style: {
display: showTour ? 'block' : 'none'
},
onClick: handleClickMask
}), list.map(function(item, index) {
return /*#__PURE__*/ React.createElement(View, {
key: index,
style: {
height: 0
}
}, index === active && /*#__PURE__*/ React.createElement(React.Fragment, null, showTour && /*#__PURE__*/ React.createElement(View, {
className: "".concat(mask ? 'nut-tour-mask' : 'nut-tour-mask nut-tour-mask-none'),
id: "nut-tour-popid".concat(index),
style: maskStyle()
}), /*#__PURE__*/ React.createElement(Popover, {
visible: showPopup,
location: item.location || location,
targetId: "nut-tour-popid".concat(index === active ? index : ''),
closeOnOutsideClick: false,
offset: item.popoverOffset || [
0,
8
],
arrowOffset: item.arrowOffset || 0
}, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null, children || /*#__PURE__*/ React.createElement(React.Fragment, null, type === 'step' && /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content"
}, title && /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-top"
}, /*#__PURE__*/ React.createElement(View, {
onClick: function(e) {
return maskClose(e);
}
}, /*#__PURE__*/ React.createElement(Close, {
className: "nut-tour-content-top-close"
}))), /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-inner"
}, item.content), /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-bottom"
}, /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-bottom-init"
}, active + 1, "/", list.length), /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-bottom-operate"
}, active !== 0 && showPrev && /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-bottom-operate-btn",
onClick: function() {
return changeStep('prev');
}
}, prev || locale.tour.prevStepText), list.length - 1 === active && /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-bottom-operate-btn active",
onClick: function(e) {
return maskClose(e);
}
}, complete || locale.tour.completeText), list.length - 1 !== active && /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-bottom-operate-btn active",
onClick: function() {
return changeStep('next');
}
}, next || locale.tour.nextStepText)))), type === 'tile' && /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content nut-tour-content-tile"
}, /*#__PURE__*/ React.createElement(View, {
className: "nut-tour-content-inner"
}, item.content)))))));
}));
};
Tour.displayName = 'NutTour';