Накатил человеческий дизайн

2026-07-21 16:01:24 +03:00
parent 9cfc157124
commit 627371b221
35 changed files with 2415 additions and 293 deletions
@@ -0,0 +1,116 @@
+import { Feather } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+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;
+};
+
+export function ChatInputBar({
+  value,
+  onChangeText,
+  onSubmit,
+  disabled,
+  sending,
+  onAttach,
+  placeholder = "Напишите ваш вопрос...",
+  hint = "Напишите сообщение или прикрепите документ",
+  inputLabel = "Сообщение",
+}: Props) {
+  const [focused, setFocused] = useState(false);
+  const canSend = Boolean(value.trim()) && !disabled && !sending;
+
+  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>
+      {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 },
+  hint: { fontSize: 12, color: colors.mutedForeground, textAlign: "center", marginTop: spacing.sm },
+  pressed: { opacity: 0.7 },
+});