去掉标题键盘上移
This commit is contained in:
@@ -13,6 +13,8 @@ interface TextareaTagProps {
|
|||||||
placeholder?: string
|
placeholder?: string
|
||||||
maxLength?: number
|
maxLength?: number
|
||||||
options?: { label: string; value: any }[] | null
|
options?: { label: string; value: any }[] | null
|
||||||
|
onFocus?: () => void
|
||||||
|
onBlur?: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const TextareaTag: React.FC<TextareaTagProps> = ({
|
const TextareaTag: React.FC<TextareaTagProps> = ({
|
||||||
@@ -20,7 +22,9 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
|
|||||||
onChange,
|
onChange,
|
||||||
placeholder = '请输入',
|
placeholder = '请输入',
|
||||||
maxLength = 1000,
|
maxLength = 1000,
|
||||||
options = []
|
options = [],
|
||||||
|
onFocus,
|
||||||
|
onBlur
|
||||||
}) => {
|
}) => {
|
||||||
// 处理文本输入变化
|
// 处理文本输入变化
|
||||||
const handleTextChange = useCallback((e: any) => {
|
const handleTextChange = useCallback((e: any) => {
|
||||||
@@ -69,6 +73,8 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
|
|||||||
onInput={handleTextChange}
|
onInput={handleTextChange}
|
||||||
maxlength={maxLength}
|
maxlength={maxLength}
|
||||||
autoHeight={false}
|
autoHeight={false}
|
||||||
|
onFocus={onFocus}
|
||||||
|
onBlur={onBlur}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
|||||||
@@ -8,13 +8,17 @@ interface TitleTextareaProps {
|
|||||||
onChange: (value: string) => void
|
onChange: (value: string) => void
|
||||||
maxLength?: number
|
maxLength?: number
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
|
onFocus?: () => void
|
||||||
|
onBlur?: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const TitleTextarea: React.FC<TitleTextareaProps> = ({
|
const TitleTextarea: React.FC<TitleTextareaProps> = ({
|
||||||
value='',
|
value='',
|
||||||
onChange,
|
onChange,
|
||||||
maxLength = 20,
|
maxLength = 20,
|
||||||
placeholder = '好的标题更吸引人哦'
|
placeholder = '好的标题更吸引人哦',
|
||||||
|
onFocus,
|
||||||
|
onBlur
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<View className='title-input-wrapper'>
|
<View className='title-input-wrapper'>
|
||||||
@@ -26,6 +30,8 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
|
|||||||
maxlength={maxLength}
|
maxlength={maxLength}
|
||||||
autoSize={true}
|
autoSize={true}
|
||||||
placeholderClass='title-input-placeholder'
|
placeholderClass='title-input-placeholder'
|
||||||
|
onFocus={onFocus}
|
||||||
|
onBlur={onBlur}
|
||||||
/>
|
/>
|
||||||
<View className='char-count'>{value.length}/{maxLength}</View>
|
<View className='char-count'>{value.length}/{maxLength}</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -269,7 +269,7 @@
|
|||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
z-index: 9999 !important;
|
z-index: 99 !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
box-shadow: none!important;
|
box-shadow: none!important;
|
||||||
}
|
}
|
||||||
@@ -75,7 +75,8 @@ const PublishBall: React.FC = () => {
|
|||||||
const [formData, setFormData] = useState<PublishBallFormData[]>([defaultFormData])
|
const [formData, setFormData] = useState<PublishBallFormData[]>([defaultFormData])
|
||||||
const [checked, setChecked] = useState(true)
|
const [checked, setChecked] = useState(true)
|
||||||
const [titleBar, setTitleBar] = useState('发布')
|
const [titleBar, setTitleBar] = useState('发布')
|
||||||
const scrollViewRef = useRef<any>(null)
|
// 控制是否响应全局键盘(由具体输入框 focus/blur 控制)
|
||||||
|
const [shouldReactToKeyboard, setShouldReactToKeyboard] = useState(false)
|
||||||
|
|
||||||
// 删除确认弹窗状态
|
// 删除确认弹窗状态
|
||||||
const [deleteConfirm, setDeleteConfirm] = useState<{
|
const [deleteConfirm, setDeleteConfirm] = useState<{
|
||||||
@@ -580,7 +581,7 @@ useEffect(() => {
|
|||||||
// 添加本地监听器
|
// 添加本地监听器
|
||||||
const removeListener = addListener((height, visible) => {
|
const removeListener = addListener((height, visible) => {
|
||||||
console.log('PublishBall 收到键盘变化:', height, visible)
|
console.log('PublishBall 收到键盘变化:', height, visible)
|
||||||
|
// 这里只记录或用于其他逻辑,布局是否响应交由 shouldReactToKeyboard 决定
|
||||||
})
|
})
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
@@ -588,10 +589,18 @@ useEffect(() => {
|
|||||||
}
|
}
|
||||||
}, [initializeKeyboardListener, addListener])
|
}, [initializeKeyboardListener, addListener])
|
||||||
|
|
||||||
console.log(isKeyboardVisible, 'isKeyboardVisible');
|
const handleAnyInputFocus = (item: FormFieldConfig, e: any) => {
|
||||||
console.log(keyboardHeight, 'keyboardHeight');
|
const { prop } = item
|
||||||
|
if (prop === 'title') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setShouldReactToKeyboard(true)
|
||||||
|
}
|
||||||
|
const handleAnyInputBlur = (item: FormFieldConfig, e: any) => {
|
||||||
|
setShouldReactToKeyboard(false)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<View className={`${styles['publish-ball-container']} ${isKeyboardVisible ? styles['publish-ball-container-keyboard'] : ''}`} style={{ bottom: isKeyboardVisible ? `${keyboardHeight - 124}px` : 0 }}>
|
<View className={`${styles['publish-ball-container']} ${isKeyboardVisible && shouldReactToKeyboard ? styles['publish-ball-container-keyboard'] : ''}`} style={{ bottom: isKeyboardVisible && shouldReactToKeyboard ? `${keyboardHeight - 124}px` : 0 }}>
|
||||||
<GeneralNavbar title={titleBar} backgroundColor="#FAFAFA" className={styles['publish-ball-navbar']} />
|
<GeneralNavbar title={titleBar} backgroundColor="#FAFAFA" className={styles['publish-ball-navbar']} />
|
||||||
<View className={styles['publish-ball']} style={{ paddingTop: `${statusNavbarHeightInfo.totalHeight}px` }}>
|
<View className={styles['publish-ball']} style={{ paddingTop: `${statusNavbarHeightInfo.totalHeight}px` }}>
|
||||||
{/* 活动类型切换 */}
|
{/* 活动类型切换 */}
|
||||||
@@ -636,6 +645,8 @@ useEffect(() => {
|
|||||||
formData={item}
|
formData={item}
|
||||||
onChange={(key, value) => updateFormData(key, value, index)}
|
onChange={(key, value) => updateFormData(key, value, index)}
|
||||||
optionsConfig={optionsConfig}
|
optionsConfig={optionsConfig}
|
||||||
|
onAnyInputFocus={handleAnyInputFocus}
|
||||||
|
onAnyInputBlur={handleAnyInputBlur}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
))
|
))
|
||||||
|
|||||||
@@ -25,7 +25,10 @@ const componentMap = {
|
|||||||
const PublishForm: React.FC<{
|
const PublishForm: React.FC<{
|
||||||
formData: PublishBallFormData,
|
formData: PublishBallFormData,
|
||||||
onChange: (key: keyof PublishBallFormData, value: any, index?: number) => void,
|
onChange: (key: keyof PublishBallFormData, value: any, index?: number) => void,
|
||||||
optionsConfig: FormFieldConfig[] }> = ({ formData, onChange, optionsConfig }) => {
|
optionsConfig: FormFieldConfig[],
|
||||||
|
onAnyInputFocus?: (item: FormFieldConfig, e: any) => void,
|
||||||
|
onAnyInputBlur?: (item: FormFieldConfig, e: any) => void,
|
||||||
|
}> = ({ formData, onChange, optionsConfig, onAnyInputFocus, onAnyInputBlur }) => {
|
||||||
const [coverImages, setCoverImages] = useState<CoverImage[]>([])
|
const [coverImages, setCoverImages] = useState<CoverImage[]>([])
|
||||||
|
|
||||||
// 字典数据相关
|
// 字典数据相关
|
||||||
@@ -214,13 +217,23 @@ const PublishForm: React.FC<{
|
|||||||
</View>
|
</View>
|
||||||
}
|
}
|
||||||
<View className={styles['bg-section']}>
|
<View className={styles['bg-section']}>
|
||||||
|
{(() => {
|
||||||
|
const shouldAttachFocus = [FieldType.TEXT, FieldType.TEXTAREATAG].includes(item.type)
|
||||||
|
const focusProps = shouldAttachFocus ? {
|
||||||
|
onFocus: (e) => onAnyInputFocus?.(item, e),
|
||||||
|
onBlur: (e) => onAnyInputBlur?.(item, e)
|
||||||
|
} : {}
|
||||||
|
return (
|
||||||
<Component
|
<Component
|
||||||
label={item.label}
|
label={item.label}
|
||||||
value={formData[item.prop]}
|
value={formData[item.prop]}
|
||||||
onChange={(value) => updateFormData(item.prop as keyof PublishBallFormData, value)}
|
onChange={(value) => updateFormData(item.prop as keyof PublishBallFormData, value)}
|
||||||
{...optionProps}
|
{...optionProps}
|
||||||
placeholder={item.placeholder}
|
placeholder={item.placeholder}
|
||||||
|
{...(focusProps as any)}
|
||||||
/>
|
/>
|
||||||
|
)
|
||||||
|
})()}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user