xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐞 fix(#1000663#25#26#27): 修复销售统计页面的样式问题

Browse Source
This commit is contained in:
xuan
2022-11-11 11:43:29 +08:00
parent 851902873b
commit 45c656e0ed
14 changed files with 299 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/toolTips/index.module.scss
+3
View File
@@ -22,6 +22,9 @@
box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
border-radius: 8px;
&-content {
font-size: 24px;
font-weight: lighter;
color: white;
padding: 8px 12px;
white-space: nowrap;
}
src/components/toolTips/index.tsx
+135 -23
View File
@@ -1,7 +1,8 @@
import { View } from '@tarojs/components'
import { nextTick } from '@tarojs/runtime'
import Taro from '@tarojs/taro'
import classNames from 'classnames'
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useTransition } from 'react'
import IconFont from '../iconfont/iconfont'
import styles from './index.module.scss'
@@ -15,7 +16,19 @@ const convertPx = (px: number) => {
return realPx
}
type Placement = 'top' | 'right' | 'bottom' | 'left'
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
interface ToolTipEvent {
onVisibleChange?: (visible?: boolean) => void
@@ -42,7 +55,9 @@ const popoverStyle = {
}
const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
const { placement = 'top', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
const id = useId();
const [,setForceUpdate] = useState({})
const { placement = 'top-start', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
if (!content){
throw new Error('tooltip: content 不能为空')
@@ -65,12 +80,14 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
},
[visible],
)
const handleClick = useCallback(() => {
setVisible(v => {
onVisibleChangeRef.current?.(!v)
return !v
})
}, [])
const handleClickMark = useCallback(() => {
@@ -98,6 +115,22 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
const viewportRef = useRef(viewport)
viewportRef.current = viewport
const contextRectRef = useRef<any>(null)
useEffect(()=>{
if(visible && !contextRectRef.current) {
nextTick(()=>{
const query = Taro.createSelectorQuery()
query.select(`#content-${id}`).boundingClientRect((res)=>{
console.log('contextRectRef',res);
contextRectRef.current = res
setForceUpdate({})
}).exec()
})
}
}, [visible, contextRectRef.current])
useEffect(() => {
console.log('useLayoutEffect')
const query = Taro.createSelectorQuery()
@@ -111,10 +144,14 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
setViewport(res[1])
viewportRef.current = res[1]
})
}, [])
// 箭头 坐标
const arrowCoords = useMemo(() => {
const contextRect = contextRectRef.current
// contextRect 没获取到之前 隐藏
if(!contextRect) return {top: '9999px'}
console.log('getArrowSide==>', getArrowSide, childrenRectRef.current)
switch (getArrowSide) {
case 'bottom': // 下箭头
@@ -146,44 +183,119 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
bottom: '',
}
}
}, [getArrowSide, childrenRectRef.current])
}, [getArrowSide, childrenRectRef.current, contextRectRef.current])
// content 坐标
const contentCoords = useMemo(() => {
const placementSide = placement.split('-')[1] as string // placement = 'top-start' 取 'start'
console.log('placementSide',placementSide);
let coordsStyle = {}
const contextRect = contextRectRef.current
// contextRect 没获取到之前 隐藏
if(!contextRect) return {top: '9999px'}
console.log('contextRect',contextRect);
const childrenRect = childrenRectRef.current
switch (getArrowSide) {
case 'bottom': // 下箭头
return {
left: 0,
top: '',
right: '',
coordsStyle = {
bottom: convertPx(arrowSize) - 5,
top: '',
}
if(placementSide === 'start'){
return {
...coordsStyle,
left: 0,
right: '',
}
}else if(placementSide === 'end'){
return {
...coordsStyle,
left: '',
right: 0,
}
}else{
return {
...coordsStyle,
left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
right: '',
}
}
case 'left': // 左箭头
return {
left: childrenRectRef.current.width + convertPx(arrowSize) - 5,
top: 0,
coordsStyle = {
left: childrenRect.width + convertPx(arrowSize) - 5,
right: '',
bottom: '',
}
if(placementSide === 'start'){
return {
...coordsStyle,
top: 0,
bottom: '',
}
}else if(placementSide === 'end'){
return {
...coordsStyle,
top: '',
bottom: -childrenRect.height + 'px',
}
}else{
return {
...coordsStyle,
top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
bottom: '',
}
}
case 'top': // 上箭头
return {
left: 0,
top: childrenRectRef.current.height + convertPx(arrowSize) - 5,
right: '',
coordsStyle = {
top: childrenRect.height + convertPx(arrowSize) - 5,
bottom: '',
}
if(placementSide === 'start'){
return {
...coordsStyle,
left: 0,
right: '',
}
}else if(placementSide === 'end'){
return {
...coordsStyle,
left: '',
right: 0,
}
}else{
return {
...coordsStyle,
left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
right: '',
}
}
case 'right': // 右箭头
return {
coordsStyle = {
left: '',
top: 0,
right: convertPx(arrowSize) - 5,
bottom: '',
}
if(placementSide === 'start'){
return {
...coordsStyle,
top: 0,
bottom: '',
}
}else if(placementSide === 'end'){
return {
...coordsStyle,
top: '',
bottom: -childrenRect.height + 'px',
}
}else{
return {
...coordsStyle,
top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
bottom: '',
}
}
}
}, [getArrowSide, childrenRectRef.current])
}, [getArrowSide, childrenRectRef.current, contextRectRef.current])
const ContentComponent = useMemo(() => {
console.log('执行完')
return (
<View className={classNames(styles.tooltip, visible ? '' : styles['tooltip-hidden'], customClassName)} style={customStyle}>
@@ -192,9 +304,9 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
<IconFont name='icon-shouqi1' size={arrowSize} color={popoverStyle.color}></IconFont>
</View>
{/* content */}
<View className={styles['tooltip-inner']} id='content' style={{ ...contentCoords, ...customContentStyle }}>
{<View className={styles['tooltip-inner']} id={`content-${id}`} style={{ ...contentCoords, ...customContentStyle }}>
<View className={styles['tooltip-inner-content']}>{content}</View>
</View>
</View>}
</View>
)
}, [content, getArrowSide, visible, arrowCoords, contentCoords])