From cbb79c73241d1928a1b980da8195f57e702ec3c4 Mon Sep 17 00:00:00 2001 From: colder Date: Sat, 20 Jun 2020 23:26:50 +0800 Subject: [PATCH] fix: set detail in h5 --- src/InputNumber.tsx | 28 ++++++++++++++-------------- src/TabBar.tsx | 8 ++++---- src/utils.ts | 26 ++++++++++---------------- 3 files changed, 28 insertions(+), 34 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 8df7d54..bebccf9 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -5,6 +5,7 @@ import { View, Input, Text, CommonEventFunction } from '@tarojs/components' import { InputProps } from '@tarojs/components/types/Input' import { AtInputNumberProps } from 'taro-ui/types/input-number' +import { setEventDetail } from './utils' import '../style/InputNumber.scss' export interface InputNumberProps @@ -42,7 +43,7 @@ const decimalAdd = (a: number, b: number) => { * - 手动输入数字时调起数字(number)或小数(digit)键盘, 默认距离键盘50px. * - 失去光标时强制格式化数字. */ -export const InputNumber: React.FC = props => { +export const InputNumber: React.FC = (props) => { const { className, style = {}, @@ -64,13 +65,10 @@ export const InputNumber: React.FC = props => { const inputValue = useMemo(() => parseFloat(String(value)) || 0, [value]) - const clamp = useCallback(n => Math.max(min, Math.min(max, n)), [min, max]) + const clamp = useCallback((n) => Math.max(min, Math.min(max, n)), [min, max]) const handleClick = useCallback( - e => { - e.preventDefault() - e.stopPropagation() - + (e) => { if (disabled) return e.detail.value = clamp(decimalAdd(inputValue, e.detail.delta)) @@ -80,7 +78,7 @@ export const InputNumber: React.FC = props => { ) const handleChange = useCallback( - e => { + (e) => { const { value } = e.detail const num = parseFloat(value) || 0 if (num.toString() === value) { @@ -92,7 +90,7 @@ export const InputNumber: React.FC = props => { ) const handleBlur = useCallback( - e => { + (e) => { const num = parseFloat(e.detail.value) e.detail.value = isNaN(num) ? '' : (clamp(num) as any) onChange(e) @@ -110,9 +108,10 @@ export const InputNumber: React.FC = props => { className={classNames('at-input-number__btn', { 'at-input-number--disabled': inputValue <= min! || disabled, })} - onClick={e => { - e.detail.delta = -step - handleClick(e) + onClick={(e) => { + e.preventDefault() + e.stopPropagation() + handleClick && handleClick(setEventDetail(e, { delta: -step })) }} > @@ -133,9 +132,10 @@ export const InputNumber: React.FC = props => { className={classNames('at-input-number__btn', { 'at-input-number--disabled': inputValue >= max! || disabled, })} - onClick={e => { - e.detail.delta = step - handleClick(e) + onClick={(e) => { + e.preventDefault() + e.stopPropagation() + handleClick && handleClick(setEventDetail(e, { delta: step })) }} > diff --git a/src/TabBar.tsx b/src/TabBar.tsx index c81cee2..1a7b5c1 100644 --- a/src/TabBar.tsx +++ b/src/TabBar.tsx @@ -2,6 +2,7 @@ import React from 'react' import classNames from 'classnames' import { View, Text, Image, CommonEventFunction } from '@tarojs/components' +import { setEventDetail } from './utils' import { Badge } from './Badge' import '../style/TabBar.scss' @@ -42,7 +43,7 @@ export interface TabBarProps { onClick?: CommonEventFunction<{ value: number }> } -export const TabBar: React.FC = props => { +export const TabBar: React.FC = (props) => { const { className, style = {}, @@ -75,9 +76,8 @@ export const TabBar: React.FC = props => { key={item.key || item.title || index} className={classNames('at-tab-bar__item', { 'at-tab-bar__item--active': current === index })} style={current === index ? selectedStyle : defaultStyle} - onClick={e => { - e.detail.value = index - onClick && onClick(e) + onClick={(e) => { + onClick && onClick(setEventDetail(e, { value: index })) }} > {item.iconType ? ( diff --git a/src/utils.ts b/src/utils.ts index 234cccf..3c0c65e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -11,7 +11,7 @@ function delay(delayTime = 25): Promise { }) } -function delayQuerySelector(selectorStr: string, delayTime = 500): Promise { +export function delayQuerySelector(selectorStr: string, delayTime = 500): Promise { return new Promise((resolve) => { const selector: SelectorQuery = Taro.createSelectorQuery() delay(delayTime).then(() => { @@ -53,7 +53,7 @@ function delayGetClientRect({ selectorStr, delayTime = 500 }): Promise { }) } -function uuid(len = 8, radix = 16): string { +export function uuid(len = 8, radix = 16): string { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('') const value: string[] = [] let i = 0 @@ -167,6 +167,14 @@ function getEventDetail(event: any): EventDetail { return detail } +export function setEventDetail(e: E, detail: any) { + if (process.env.TARO_ENV === 'h5') { + return Object.create(e as any, { detail: { value: detail } }) + } else { + e['detail'] = detail + } +} + function initTestEnv(): void { if (process.env.NODE_ENV === 'test') { Taro.initPxTransform({ @@ -243,17 +251,3 @@ function mergeStyle(style1: object | string, style2: object | string): object | } return objectToString(style1) + objectToString(style2) } - -export { - delay, - delayQuerySelector, - uuid, - getEventDetail, - initTestEnv, - isTest, - pxTransform, - handleTouchScroll, - delayGetClientRect, - delayGetScrollOffset, - mergeStyle, -}