Merge remote-tracking branch 'zaihui/dev' into try-monorepo

Author: SeaHaiWorld

packages/demo/src/pages/Input/Input.tsx

@@ -28,7 +28,14 @@ const InputPage: React.FC = () => {
             placeholder='请输入身份证号码'
           />
           <HuiInput label='兑换人民币' placeholder='请输入金额' unit='元' />
-          <HuiInput placeholder='无标题输入框样式' divider={false} />
+          <HuiInput placeholder='无标题输入框样式' divider={false} arrow />
+          <HuiInput
+            label='可清除'
+            placeholder='请输入'
+            divider={false}
+            clearable
+            unit='元'
+          />
         </GroupSection>
         <GroupSection title='可以调整文本对齐方式'>
           <HuiInput

packages/weapp-components/src/components/Button/Button.tsx

@@ -90,12 +90,6 @@ const HuiButton: React.FC<HuiButtonProps> = (props) => {
     ...style,
   }
 
-  const handleClick = (e: ITouchEvent) => {
-    if (!disabled && onClick) {
-      onClick(e)
-    }
-  }
-
   const iconSizeMap = {
     small: 13,
     medium: 14,
@@ -104,6 +98,12 @@ const HuiButton: React.FC<HuiButtonProps> = (props) => {
 
   const buttonDisabled = disabled || loading
 
+  const handleClick = (e: ITouchEvent) => {
+    if (!buttonDisabled && onClick) {
+      onClick(e)
+    }
+  }
+
   const buttonContent = (
     <Block>
       {prefixIcon && (

packages/weapp-components/src/components/Input/Input.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import cx from 'classnames'
 import { View, Input } from '@tarojs/components'
 import {
@@ -24,6 +24,8 @@ export interface HuiInputProps extends ViewProps {
   placeholder?: string
   /** 右侧箭头 */
   arrow?: boolean
+  /** 清除按钮 */
+  clearable?: boolean
   // withArray?: boolean
   /** 报错信息 */
   errorMsg?: React.ReactNode
@@ -48,6 +50,8 @@ export interface HuiInputProps extends ViewProps {
   className?: string
   /** 点击事件 */
   onClick?: (event: ITouchEvent) => void
+  /** 清除事件 */
+  onClear?: CommonEventFunction<InputProps.inputForceEventDetail>
   /** onInput事件 */
   onInput?: CommonEventFunction<InputProps.inputEventDetail>
   /** 输入框失获取焦点时触发 */
@@ -74,11 +78,24 @@ const HuiInput: React.FC<HuiInputProps> = (props) => {
     className = '',
     style,
     onClick,
+    onInput = () => {},
     align = 'left',
     required = true,
     labelIcon,
+    clearable,
   } = props
 
+  const [innerValue, setInnerValue] = useState(value)
+
+  useEffect(() => {
+    setInnerValue(value)
+  }, [value])
+
+  const mergedOnInput = (e) => {
+    setInnerValue(e.detail.value)
+    onInput(e)
+  }
+
   const labelDom = label ? (
     <View className='label'>
       <View>{label}</View>
@@ -100,15 +117,15 @@ const HuiInput: React.FC<HuiInputProps> = (props) => {
       <View
         className={cx(
           'display-area',
-          { 'none-value': !value },
+          { 'none-value': !innerValue },
           { 'right-align': label && align === 'right' },
         )}
       >
-        {value || placeholder}
+        {innerValue || placeholder}
       </View>
     ) : (
       <Input
-        value={value}
+        value={innerValue}
         className={cx('input', { 'right-align': label && align === 'right' })}
         type={type}
         placeholder={placeholder}
@@ -118,7 +135,7 @@ const HuiInput: React.FC<HuiInputProps> = (props) => {
         adjustPosition={props.adjustPosition}
         confirmType={props.confirmType || 'done'}
         maxlength={props.maxLength || 140}
-        onInput={props.onInput || (() => {})}
+        onInput={mergedOnInput}
         onBlur={props.onBlur || (() => {})}
         onFocus={props.onFocus || (() => {})}
         onConfirm={props.onConfirm || (() => {})}
@@ -136,6 +153,30 @@ const HuiInput: React.FC<HuiInputProps> = (props) => {
     />
   ) : null
 
+  const showClear = useMemo(
+    () => clearable && !!innerValue,
+    [clearable, innerValue],
+  )
+
+  // input右侧清除按钮是否展示
+  const inputClearDom = showClear ? (
+    <View
+      style={{ marginLeft: '10px' }}
+      onClick={(e) => {
+        e.preventDefault()
+        mergedOnInput({ detail: { value: '' } })
+        props.onClear?.(e)
+      }}
+    >
+      <HuiIcon
+        name='005-close2'
+        style={{
+          color: '#c5c5c5',
+        }}
+      />
+    </View>
+  ) : null
+
   // 分割线是否展示 & 分割线颜色
   const divideLineDom =
     errorMsg || divider ? (
@@ -169,6 +210,7 @@ const HuiInput: React.FC<HuiInputProps> = (props) => {
           {labelDom}
           <View className='input-content'>
             {inputDom}
+            {inputClearDom}
             {props.unit ? <View className='unit'>{props.unit}</View> : null}
           </View>
           {inputArrayDom}

packages/weapp-components/src/components/Tabs/Tabs.tsx

@@ -118,7 +118,7 @@ const HuiTabs: React.FC<HuiTabsProps> = (props) => {
           temp.push(res)
         }
       }
-      const res = await selectorQueryClientRect(`#${tabsRef.current.uid}`)
+      const res = await selectorQueryClientRect(`#${tabsRef?.current?.uid}`)
       setTabsInfos(temp)
       setTabsWidth(res?.width)
     })

packages/weapp-components/src/components/Tag/Tag.tsx

@@ -35,7 +35,7 @@ const HuiTag: React.FC<HuiTagProps> = (props) => {
 
   const getTagBackground = () => {
     if (type === 'semitransparent') {
-      return addOpacityToHexColor(color, 0.2)
+      return addOpacityToHexColor(color, 0.1)
     } else if (type === 'solid') {
       return color
     }