|
|
@@ -0,0 +1,125 @@
|
|
|
+import { useState } from 'react'
|
|
|
+import { View, Input } from '@tarojs/components'
|
|
|
+import TDesignIcon from '../icon'
|
|
|
+
|
|
|
+interface SearchProps {
|
|
|
+ placeholder?: string
|
|
|
+ disabled?: boolean
|
|
|
+ shape?: 'round' | 'square'
|
|
|
+ value?: string
|
|
|
+ leftIcon?: string
|
|
|
+ clearable?: boolean
|
|
|
+ action?: string
|
|
|
+ center?: boolean
|
|
|
+ onChange?: (value: string) => void
|
|
|
+ onFocus?: () => void
|
|
|
+ onBlur?: () => void
|
|
|
+ onSubmit?: (value: string) => void
|
|
|
+ onClear?: () => void
|
|
|
+ onActionClick?: () => void
|
|
|
+}
|
|
|
+
|
|
|
+export default function TDesignSearch({
|
|
|
+ placeholder = '搜索商品',
|
|
|
+ disabled = false,
|
|
|
+ shape = 'round',
|
|
|
+ value = '',
|
|
|
+ leftIcon = 'search',
|
|
|
+ clearable = true,
|
|
|
+ action = '',
|
|
|
+ center = false,
|
|
|
+ onChange,
|
|
|
+ onFocus,
|
|
|
+ onBlur,
|
|
|
+ onSubmit,
|
|
|
+ onClear,
|
|
|
+ onActionClick
|
|
|
+}: SearchProps) {
|
|
|
+ const [focused, setFocused] = useState(false)
|
|
|
+ const [internalValue, setInternalValue] = useState(value)
|
|
|
+
|
|
|
+ const handleInput = (e) => {
|
|
|
+ const newValue = e.detail.value
|
|
|
+ setInternalValue(newValue)
|
|
|
+ onChange?.(newValue)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleFocus = () => {
|
|
|
+ setFocused(true)
|
|
|
+ onFocus?.()
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleBlur = () => {
|
|
|
+ setFocused(false)
|
|
|
+ onBlur?.()
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleConfirm = (e) => {
|
|
|
+ onSubmit?.(e.detail.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleClear = () => {
|
|
|
+ setInternalValue('')
|
|
|
+ onChange?.('')
|
|
|
+ onClear?.()
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleActionClick = () => {
|
|
|
+ onActionClick?.()
|
|
|
+ }
|
|
|
+
|
|
|
+ const showClearIcon = clearable && internalValue && !disabled
|
|
|
+
|
|
|
+ return (
|
|
|
+ <View className={`tdesign-search tdesign-search--${shape}`}>
|
|
|
+ <View
|
|
|
+ className={`
|
|
|
+ tdesign-search__input-box
|
|
|
+ ${focused ? 'tdesign-search__input-box--focused' : ''}
|
|
|
+ ${center ? 'tdesign-search__input-box--center' : ''}
|
|
|
+ tdesign-search__input-box--${shape}
|
|
|
+ `}
|
|
|
+ >
|
|
|
+ {leftIcon && (
|
|
|
+ <TDesignIcon
|
|
|
+ name={leftIcon}
|
|
|
+ size="32rpx"
|
|
|
+ color="#fa550f"
|
|
|
+ className="tdesign-search__icon"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ <Input
|
|
|
+ type="text"
|
|
|
+ placeholder={placeholder}
|
|
|
+ disabled={disabled}
|
|
|
+ value={internalValue}
|
|
|
+ onInput={handleInput}
|
|
|
+ onFocus={handleFocus}
|
|
|
+ onBlur={handleBlur}
|
|
|
+ onConfirm={handleConfirm}
|
|
|
+ className={`tdesign-search__input ${disabled ? 'tdesign-search__input--disabled' : ''}`}
|
|
|
+ placeholderClass="tdesign-search__placeholder"
|
|
|
+ />
|
|
|
+
|
|
|
+ {showClearIcon && (
|
|
|
+ <View
|
|
|
+ className="tdesign-search__clear hotspot-expanded"
|
|
|
+ onClick={handleClear}
|
|
|
+ >
|
|
|
+ <TDesignIcon name="close-circle-filled" size="32rpx" color="#999" />
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {action && (
|
|
|
+ <View
|
|
|
+ className="tdesign-search__search-action"
|
|
|
+ onClick={handleActionClick}
|
|
|
+ >
|
|
|
+ {action}
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+}
|
yourname