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

🌈 style(eslint): add eslint rules

Browse Source
This commit is contained in:
xuan
2022-11-26 14:35:05 +08:00
parent f3aa20f049
commit 99a920975f
245 changed files with 14909 additions and 14349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/toolTips/index.tsx
+59 -56
View File
@@ -1,6 +1,6 @@
import { View } from '@tarojs/components'
import { nextTick } from '@tarojs/runtime'
import Taro from '@tarojs/taro'
import { nextTick } from '@tarojs/runtime'
import classNames from 'classnames'
import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useTransition } from 'react'
import IconFont from '../iconfont/iconfont'
@@ -16,18 +16,18 @@ const convertPx = (px: number) => {
return realPx
}
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
interface ToolTipEvent {
@@ -55,14 +55,14 @@ const popoverStyle = {
}
const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
const id = useId();
const [,setForceUpdate] = useState({})
const id = useId()
const [, setForceUpdate] = useState({})
const { placement = 'top-start', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
if (!content){
if (!content) {
throw new Error('tooltip: content 不能为空')
}
}
const [visible, setVisible] = useState(defaultVisible)
const onVisibleChangeRef = useRef(onVisibleChange)
@@ -80,14 +80,12 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
},
[visible],
)
const handleClick = useCallback(() => {
setVisible(v => {
setVisible((v) => {
onVisibleChangeRef.current?.(!v)
return !v
})
}, [])
const handleClickMark = useCallback(() => {
@@ -117,13 +115,12 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
const contextRectRef = useRef<any>(null)
useEffect(()=>{
if(visible && !contextRectRef.current) {
nextTick(()=>{
useEffect(() => {
if (visible && !contextRectRef.current) {
nextTick(() => {
const query = Taro.createSelectorQuery()
query.select(`#content-${id}`).boundingClientRect((res)=>{
console.log('contextRectRef',res);
query.select(`#content-${id}`).boundingClientRect((res) => {
console.log('contextRectRef', res)
contextRectRef.current = res
setForceUpdate({})
}).exec()
@@ -136,7 +133,7 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
const query = Taro.createSelectorQuery()
query.select('#children').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(res => {
query.exec((res) => {
console.log(res[0])
console.log(res[1])
setChildrenRect(res[0])
@@ -144,14 +141,13 @@ 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'}
if (!contextRect) { return { top: '9999px' } }
console.log('getArrowSide==>', getArrowSide, childrenRectRef.current)
switch (getArrowSide) {
case 'bottom': // 下箭头
@@ -188,12 +184,12 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
// content 坐标
const contentCoords = useMemo(() => {
const placementSide = placement.split('-')[1] as string // placement = 'top-start' 取 'start'
console.log('placementSide',placementSide);
console.log('placementSide', placementSide)
let coordsStyle = {}
const contextRect = contextRectRef.current
// contextRect 没获取到之前 隐藏
if(!contextRect) return {top: '9999px'}
console.log('contextRect',contextRect);
if (!contextRect) { return { top: '9999px' } }
console.log('contextRect', contextRect)
const childrenRect = childrenRectRef.current
switch (getArrowSide) {
case 'bottom': // 下箭头
@@ -201,22 +197,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
bottom: convertPx(arrowSize) - 5,
top: '',
}
if(placementSide === 'start'){
if (placementSide === 'start') {
return {
...coordsStyle,
left: 0,
right: '',
}
}else if(placementSide === 'end'){
}
else if (placementSide === 'end') {
return {
...coordsStyle,
left: '',
right: 0,
}
}else{
}
else {
return {
...coordsStyle,
left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
left: `${-(contextRect?.width / 2 - childrenRect.width / 2)}px`,
right: '',
}
}
@@ -225,22 +223,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
left: childrenRect.width + convertPx(arrowSize) - 5,
right: '',
}
if(placementSide === 'start'){
if (placementSide === 'start') {
return {
...coordsStyle,
top: 0,
bottom: '',
}
}else if(placementSide === 'end'){
}
else if (placementSide === 'end') {
return {
...coordsStyle,
top: '',
bottom: -childrenRect.height + 'px',
bottom: `${-childrenRect.height}px`,
}
}else{
}
else {
return {
...coordsStyle,
top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
top: `${-(contextRect.height / 2 - childrenRect.height / 2)}px`,
bottom: '',
}
}
@@ -249,22 +249,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
top: childrenRect.height + convertPx(arrowSize) - 5,
bottom: '',
}
if(placementSide === 'start'){
if (placementSide === 'start') {
return {
...coordsStyle,
left: 0,
right: '',
}
}else if(placementSide === 'end'){
}
else if (placementSide === 'end') {
return {
...coordsStyle,
left: '',
right: 0,
}
}else{
}
else {
return {
...coordsStyle,
left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
left: `${-(contextRect?.width / 2 - childrenRect.width / 2)}px`,
right: '',
}
}
@@ -273,22 +275,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
left: '',
right: convertPx(arrowSize) - 5,
}
if(placementSide === 'start'){
if (placementSide === 'start') {
return {
...coordsStyle,
top: 0,
bottom: '',
}
}else if(placementSide === 'end'){
}
else if (placementSide === 'end') {
return {
...coordsStyle,
top: '',
bottom: -childrenRect.height + 'px',
bottom: `${-childrenRect.height}px`,
}
}else{
}
else {
return {
...coordsStyle,
top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
top: `${-(contextRect.height / 2 - childrenRect.height / 2)}px`,
bottom: '',
}
}
@@ -296,17 +300,16 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
}, [getArrowSide, childrenRectRef.current, contextRectRef.current])
const ContentComponent = useMemo(() => {
return (
<View className={classNames(styles.tooltip, visible ? '' : styles['tooltip-hidden'], customClassName)} style={customStyle}>
{/* 箭头 */}
<View className={classNames(styles.arrowIcon, styles[`arrowIcon-${getArrowSide}`])} style={arrowCoords}>
<IconFont name='icon-shouqi1' size={arrowSize} color={popoverStyle.color}></IconFont>
<IconFont name="icon-shouqi1" size={arrowSize} color={popoverStyle.color}></IconFont>
</View>
{/* content */}
{<View className={styles['tooltip-inner']} id={`content-${id}`} 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])
@@ -316,7 +319,7 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
{/* 遮罩层 */}
<View className={classNames(styles.mark, visible ? '' : styles['tooltip-hidden'])} onClick={handleClickMark}></View>
<View className={styles['tooltip-container']}>
<View onClick={handleClick} id='children'>
<View onClick={handleClick} id="children">
{children}
</View>
{ContentComponent}