mi
137 lines
4.7 KiB
TypeScript
137 lines
4.7 KiB
TypeScript
import { Feather } from "@expo/vector-icons";
|
|
import React, { useState } from "react";
|
|
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
|
|
import { messageFitsLimit } from "../message-text";
|
|
import { colors, radii, spacing } from "../theme";
|
|
|
|
type Props = {
|
|
value: string;
|
|
onChangeText: (text: string) => void;
|
|
onSubmit: () => void;
|
|
disabled?: boolean;
|
|
sending?: boolean;
|
|
onAttach?: () => void;
|
|
placeholder?: string;
|
|
hint?: string;
|
|
inputLabel?: string;
|
|
maxLength?: number;
|
|
};
|
|
|
|
export function ChatInputBar({
|
|
value,
|
|
onChangeText,
|
|
onSubmit,
|
|
disabled,
|
|
sending,
|
|
onAttach,
|
|
placeholder = "Напишите ваш вопрос...",
|
|
hint = "Напишите сообщение или прикрепите документ",
|
|
inputLabel = "Сообщение",
|
|
maxLength,
|
|
}: Props) {
|
|
const [focused, setFocused] = useState(false);
|
|
const withinLimit = maxLength === undefined || messageFitsLimit(value, maxLength);
|
|
const canSend = Boolean(value.trim()) && withinLimit && !disabled && !sending;
|
|
const nearLimit = maxLength !== undefined && value.length >= maxLength * 0.9;
|
|
|
|
return (
|
|
<View style={styles.wrapper}>
|
|
<View style={[styles.inputBox, focused && styles.inputBoxFocused]}>
|
|
<TextInput
|
|
accessibilityLabel={inputLabel}
|
|
editable={!disabled && !sending}
|
|
multiline
|
|
onBlur={() => { if (!value.trim()) setFocused(false); }}
|
|
onChangeText={onChangeText}
|
|
onFocus={() => setFocused(true)}
|
|
onKeyPress={(event) => {
|
|
if (event.nativeEvent.key !== "Enter") return;
|
|
event.preventDefault();
|
|
if (canSend) onSubmit();
|
|
}}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.mutedForeground}
|
|
returnKeyType="send"
|
|
style={[styles.input, focused && styles.inputExpanded]}
|
|
value={value}
|
|
/>
|
|
|
|
<View style={styles.actions}>
|
|
{onAttach && (
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
accessibilityLabel="Прикрепить файл"
|
|
disabled={disabled || sending}
|
|
onPress={onAttach}
|
|
style={({ pressed }) => [styles.iconButton, pressed && styles.pressed]}
|
|
>
|
|
<Feather name="paperclip" size={20} color={colors.mutedForeground} />
|
|
</Pressable>
|
|
)}
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
accessibilityLabel="Отправить"
|
|
disabled={!canSend}
|
|
onPress={onSubmit}
|
|
style={({ pressed }) => [
|
|
styles.sendButton,
|
|
!canSend && styles.sendButtonDisabled,
|
|
pressed && canSend && styles.pressed,
|
|
]}
|
|
>
|
|
<Feather name="send" size={16} color={colors.primaryForeground} />
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
{maxLength !== undefined ? (
|
|
<Text
|
|
accessibilityLiveRegion={withinLimit ? "none" : "polite"}
|
|
style={[
|
|
styles.counter,
|
|
nearLimit && styles.counterWarning,
|
|
!withinLimit && styles.counterError,
|
|
]}
|
|
>
|
|
{value.length}/{maxLength}
|
|
</Text>
|
|
) : null}
|
|
{hint ? <Text style={styles.hint}>{hint}</Text> : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: { paddingHorizontal: spacing.lg, paddingTop: spacing.sm, paddingBottom: spacing.lg, borderTopWidth: 1, borderTopColor: colors.border, backgroundColor: colors.background },
|
|
inputBox: {
|
|
flexDirection: "row",
|
|
alignItems: "flex-end",
|
|
gap: spacing.sm,
|
|
backgroundColor: colors.card,
|
|
borderWidth: 2,
|
|
borderColor: "rgba(3, 2, 19, 0.2)",
|
|
borderRadius: radii.xl,
|
|
padding: 10,
|
|
},
|
|
inputBoxFocused: { borderColor: colors.primary },
|
|
input: {
|
|
flex: 1,
|
|
minHeight: 80,
|
|
maxHeight: 256,
|
|
fontSize: 16,
|
|
color: colors.foreground,
|
|
paddingVertical: spacing.sm,
|
|
paddingHorizontal: spacing.sm,
|
|
backgroundColor: "transparent",
|
|
},
|
|
inputExpanded: { minHeight: 144 },
|
|
actions: { alignItems: "center", justifyContent: "flex-end", gap: spacing.sm },
|
|
iconButton: { width: 36, height: 36, borderRadius: radii.full, alignItems: "center", justifyContent: "center" },
|
|
sendButton: { width: 36, height: 36, borderRadius: radii.full, backgroundColor: colors.primary, alignItems: "center", justifyContent: "center" },
|
|
sendButtonDisabled: { opacity: 0.4 },
|
|
counter: { fontSize: 12, color: colors.mutedForeground, textAlign: "right", marginTop: spacing.xs },
|
|
counterWarning: { color: colors.warning },
|
|
counterError: { color: colors.destructive },
|
|
hint: { fontSize: 12, color: colors.mutedForeground, textAlign: "center", marginTop: spacing.sm },
|
|
pressed: { opacity: 0.7 },
|
|
});
|