fix: set detail in h5

tarojsx · Jun 20, 2020 · cbb79c7 · cbb79c7
1 parent 7de7159
commit cbb79c7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 34 deletions.
diff --git 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<InputNumberProps> = props => {
+export const InputNumber: React.FC<InputNumberProps> = (props) => {
     const {
         className,
         style = {},
@@ -64,13 +65,10 @@ export const InputNumber: React.FC<InputNumberProps> = 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<InputNumberProps['onChange']>(
-        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<InputNumberProps> = props => {
     )
 
     const handleChange = useCallback<InputProps['onInput']>(
-        e => {
+        (e) => {
             const { value } = e.detail
             const num = parseFloat(value) || 0
             if (num.toString() === value) {
@@ -92,7 +90,7 @@ export const InputNumber: React.FC<InputNumberProps> = props => {
     )
 
     const handleBlur = useCallback<InputProps['onBlur']>(
-        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<InputNumberProps> = 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 }))
                 }}
             >
                 <Text className="at-icon at-icon-subtract at-input-number__btn-subtract"></Text>
@@ -133,9 +132,10 @@ export const InputNumber: React.FC<InputNumberProps> = 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 }))
                 }}
             >
                 <Text className="at-icon at-icon-add at-input-number__btn-add"></Text>

diff --git 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<TabBarProps> = props => {
+export const TabBar: React.FC<TabBarProps> = (props) => {
     const {
         className,
         style = {},
@@ -75,9 +76,8 @@ export const TabBar: React.FC<TabBarProps> = 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
@@ -11,7 +11,7 @@ function delay(delayTime = 25): Promise<null> {
     })
 }
 
-function delayQuerySelector(selectorStr: string, delayTime = 500): Promise<any[]> {
+export function delayQuerySelector(selectorStr: string, delayTime = 500): Promise<any[]> {
     return new Promise((resolve) => {
         const selector: SelectorQuery = Taro.createSelectorQuery()
         delay(delayTime).then(() => {
@@ -53,7 +53,7 @@ function delayGetClientRect({ selectorStr, delayTime = 500 }): Promise<any[]> {
     })
 }
 
-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: 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,
-}