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

🎈 perf(InputX组件): 修复input 组件输入过快会出现闪烁的问题

Browse Source
This commit is contained in:
xuan 2022-11-23 19:35:32 +08:00
parent 457d109d37
commit 425eb9e3ae
11 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -225,6 +225,13 @@
"query": "orderId=31776",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/searchPage/index",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

6
src/components/BottomCustomer/index.tsx
View File

@ -1,5 +1,5 @@
import { View, ScrollView, Image, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
import { View, Button } from '@tarojs/components'
import { memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro from '@tarojs/taro'
@ -33,4 +33,4 @@ export default memo((props: prosObj) => {
<Button className={classnames(isDisabled ? styles.activeButton : styles.button)} disabled={isDisabled} onClick={() => { handSure?.() }}> 加入购物车</Button >
</View >
)
})
})

24
src/components/InputX/index.tsx Normal file
View File

@ -0,0 +1,24 @@
import { CustomWrapper, Input, View } from "@tarojs/components"
import React, { FC } from "react"
// 解决 input 组件输入过快会出现闪烁的问题
// https://github.com/NervJS/taro/issues/9664
interface PropsType {
customClassName?: string
customStyle?: React.CSSProperties
customInputStyle?: React.CSSProperties
customInputClassName?: string
[Property: string]: any
}
const InputX: FC<PropsType> = (props) => {
const {customClassName, customStyle,customInputStyle, customInputClassName,...inputProps} = props
console.log('props', props);
return (
<View className={customClassName} style={customStyle}>
<CustomWrapper>
<Input className={customInputClassName} style={customInputStyle} {...inputProps} ></Input>
</CustomWrapper>
</View>
)
}
export default InputX

7
src/components/counter/index.tsx
View File

@ -1,8 +1,9 @@
import { Input, View } from "@tarojs/components"
import { useEffect, useMemo, useRef, useState } from "react"
import { View } from "@tarojs/components"
import Big from 'big.js'
import styles from "./index.module.scss"
import { usePropsValue } from "@/use/useCommon"
import InputX from "../InputX"
type params = {
minNum?: number, //最小值
maxNum?: number, //最大值
@ -116,7 +117,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
-
</View>
<View className={styles.input} onClick={noop}>
<Input value={String(value)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable} />
<InputX value={String(value)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable}/>
<View className={styles.unit}>{unit}</View>
</View>
<View className={styles.plus} onClick={onPlus}>

25
src/components/search/index.tsx
View File

@ -1,10 +1,10 @@
import { Input, View } from '@tarojs/components'
import { View } from '@tarojs/components'
import styles from './index.module.scss'
import CloseBtn from '@/components/closeBtn'
import classnames from 'classnames'
import { debounce } from '@/common/util'
import { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from 'react'
import { forwardRef, memo, ReactNode, useEffect, useImperativeHandle, useState } from 'react'
import IconFont from '../iconfont/iconfont'
import InputX from '../InputX/index'
type Params = {
clickOnSearch?: (val: string) => void
@ -17,7 +17,6 @@ type Params = {
showBtn?: boolean
btnStyle?: Object
btnTitle?: string
debounceTime?: number //防抖时间，不设默认为零
defaultValue?: string
children?: ReactNode
customRightSlot?: ReactNode
@ -41,7 +40,6 @@ export default memo(
btnStyle = {},
placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间，不设默认为零
defaultValue = '', //默认值
children,
customRightSlot,
@ -52,18 +50,15 @@ export default memo(
ref,
) => {
const [inputCon, setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
setInputCon(defaultValue)
}, [defaultValue])
useEffect(() => {
debounceTimeRef.current = debounceTime
}, [debounceTime])
const onInputEven = (e) => {
const value = e.detail.value
changeData(value)
setInputCon(value)
changeOnSearch?.(value)
}
useImperativeHandle(ref, () => ({
@ -75,11 +70,6 @@ export default memo(
changeOnSearch?.('')
}
const changeData = debounce((value) => {
setInputCon(value)
changeOnSearch?.(value)
}, debounceTimeRef.current)
const onSearch = () => {
clickOnSearch?.(inputCon)
}
@ -96,16 +86,17 @@ export default memo(
customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></IconFont>
)}
<View className={styles.input_bar}>
<Input
<InputX
cursorSpacing={cursorSpacing as any}
adjustPosition={adjustPosition}
placeholderStyle='color:#ABABAB; font-size:26rpx'
onConfirm={onSearch}
className={classnames(placeIcon == 'out' && styles.input_out)}
disabled={disabled}
value={inputCon}
placeholder={placeholder}
onInput={e => onInputEven(e)}
customClassName={classnames(placeIcon == 'out' && styles.input_out)}
customStyle={{width: '100%'}}
/>
<View className={styles.search_closeBtn}>
{!!inputCon && <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />}

7
src/components/searchInput/index.tsx
View File

@ -1,6 +1,7 @@
import { Input, View } from '@tarojs/components'
import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from 'react'
import { View } from '@tarojs/components'
import { memo, ReactNode, useMemo } from 'react'
import IconFont from '../iconfont/iconfont'
import InputX from '../InputX'
import styles from './index.module.scss'
type Params = {
@ -47,7 +48,7 @@ export default memo((props: Params) => {
)}
<View className={styles.searchInput_con}>
{(!props.children && (
<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
<InputX disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
)) || <>{props.children}</>}
</View>
{showIcon && <IconFont customClassName={styles.icon_more_self} name='icon-chakanquanbukehu' size={36} color='#333'></IconFont>}

4
src/pages/accountPage/index.tsx
View File

@ -24,7 +24,7 @@ export default () => {
const { fetchData: clitentFetch, state: orderState } = mpcashManagementOrderaccount()
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading! })
}, [clentList, orderState])
const [clientObj, setclientObj] = useState({
@ -149,4 +149,4 @@ export default () => {
</View>
)
}
}

4
src/pages/refundPage/index.tsx
View File

@ -86,7 +86,7 @@ export default () => {
}
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading! })
}, [orderData, orderState])
//上拉加载数据
@ -314,7 +314,7 @@ export default () => {
return (
<>
<View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
<Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
<Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} >
<View className={styles.flexBox} onClick={() => showSelctPopup()}>
<IconFont name='icon-shaixuan' size={35} color={!isDisabled ? '#0D7CFF' : ''} customClassName={styles['activeshaixuan']} />
{/* <View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View> */}

6
src/pages/saleuserPage/index.tsx
View File

@ -24,7 +24,7 @@ export default () => {
const { fetchData: clitentFetch, state: orderState } = mpenumsaleUserlist()
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading! })
}, [clentList, orderState])
const [clientObj, setclientObj] = useState({
@ -120,7 +120,7 @@ export default () => {
<View className={styles.cussBox}>
<View className={styles.searchBox}>
<View className={styles.two}>
<Search placeholder='请输入业务员名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
<Search placeholder='请输入业务员名称' showBtn={false} changeOnSearch={getSearchData} />
</View>
</View>
@ -148,4 +148,4 @@ export default () => {
</View>
)
}
}

2
src/pages/searchPage/index.tsx
View File

@ -355,7 +355,7 @@ export default memo(() => {
return (
<View className={styles.main}>
<View className={styles.topBox}>
<Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
<Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} >
<View className={styles.cancelFont} onClick={() => back()}>取消</View>
</Search>
</View>

2
src/pages/shopping/index.tsx
View File

@ -227,7 +227,7 @@ const ShoppingCartContainer: FC = () => {
return (
<View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
<View className={styles['shopping--topBar']} id='topBar'>
<Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
<Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData}>
<View className={styles.flexBox} onClick={onStartToManage}>
{isManageStatus ? (
<IconText svg iconName='icon-guanlidingdan' text='取消' color='#4581ff' customClass={styles['icon--manage--cancel']} />