opendesk-react-native 0.1.2 → 0.1.6

package/src/ui/keyboard.ts

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
+import { Keyboard, LayoutAnimation, Platform, type KeyboardEvent, type View } from 'react-native';
+
+/**
+ * How far the keyboard covers the view in `ref`, for use as its bottom padding.
+ *
+ * KeyboardAvoidingView compares the keyboard with a layout relative to its parent, so it misses
+ * anything above that parent (a header, a sheet), and on Android it relies on the window
+ * shrinking, which edge-to-edge apps no longer do. This measures the view in window coordinates
+ * instead and works the same on both platforms. Call `onLayout` from the view's `onLayout` so a
+ * window that does shrink is measured again and the padding drops back.
+ */
+export function useKeyboardInset(ref: RefObject<View | null>, extraOffset = 0): { inset: number; onLayout: () => void } {
+  const [inset, setInset] = useState(0);
+  const keyboard = useRef<KeyboardEvent | null>(null);
+
+  const measure = useCallback(() => {
+    const event = keyboard.current;
+    const view = ref.current;
+    if (!event || !view) {
+      setInset(0);
+
+      return;
+    }
+    view.measureInWindow((_x, y, _width, height) => {
+      if (keyboard.current !== event) {
+        return;
+      }
+      const next = Math.max(0, Math.round(y + height - event.endCoordinates.screenY + extraOffset));
+      setInset((current) => {
+        if (current !== next) {
+          animateWithKeyboard(event);
+        }
+
+        return next;
+      });
+    });
+  }, [ref, extraOffset]);
+
+  useEffect(() => {
+    const show = (event: KeyboardEvent) => {
+      keyboard.current = event;
+      measure();
+    };
+    const hide = (event: KeyboardEvent) => {
+      keyboard.current = null;
+      animateWithKeyboard(event);
+      setInset(0);
+    };
+    const subscriptions =
+      Platform.OS === 'ios'
+        ? [Keyboard.addListener('keyboardWillChangeFrame', show), Keyboard.addListener('keyboardWillHide', hide)]
+        : [Keyboard.addListener('keyboardDidShow', show), Keyboard.addListener('keyboardDidHide', hide)];
+
+    return () => subscriptions.forEach((subscription) => subscription.remove());
+  }, [measure]);
+
+  return { inset, onLayout: measure };
+}
+
+/** iOS reports the keyboard's own curve, so the padding can move in step with it. */
+function animateWithKeyboard(event: KeyboardEvent | null | undefined): void {
+  if (Platform.OS !== 'ios' || !event?.duration) {
+    return;
+  }
+  const type = LayoutAnimation.Types[event.easing] ?? LayoutAnimation.Types.keyboard;
+  LayoutAnimation.configureNext({ duration: event.duration, update: { duration: event.duration, type } });
+}

package/src/ui/strings.ts

@@ -1,57 +1,59 @@
-/** The web widget's English copy, so both channels read the same. Override any key via `strings`. */
-export const defaultStrings = {
-  support: 'Support',
-  closeChat: 'Close chat',
-  greeting: 'Hi there. How can we help?',
-  replyTime: 'We usually reply within a few hours.',
-  replyTimeAi: '{name} answers right away, the team within a few hours.',
-  unavailable: 'Chat is unavailable',
-  unavailableHint: 'Check your connection and try again later.',
-  sendMessage: 'Send us a message',
-  yourConversations: 'Your conversations',
-  conversation: 'Conversation',
-  typing: '{name} is typing…',
-  botTyping: '{name} is writing…',
-  searchHelp: 'Search the help center',
-  poweredBy: 'Powered by opendesk',
-  back: 'Back to conversations',
-  emptyHint: "Ask us anything. We'll reply here, and by email if you leave one.",
-  notSent: 'Not sent.',
-  sending: 'Sending…',
-  uploading: 'Uploading…',
-  removeFile: 'Remove {name}',
-  fileTypeRefused: "{name} can't be sent here. Try another file type.",
-  fileTooLarge: '{name} is larger than 25 MB.',
-  uploadFailed: "Couldn't upload {name}. Try again.",
-  placeholder: 'Write a message…',
-  attach: 'Attach files',
-  send: 'Send',
-  ai: 'AI',
-  talkToPerson: 'Talk to a person',
-  handoffFailed: "Couldn't reach the team. Try again.",
-  handedOff: 'A person will reply here',
-  handedOffHint: "You'll see their reply in this conversation, and by email if you left one.",
-  checking: 'Checking {tool}…',
-  checked: 'Checked {tool}',
-  toolFailed: "Couldn't check {tool}",
-  actionPending: 'Needs your confirmation',
-  confirm: 'Confirm',
-  cancel: 'Cancel',
-  actionConfirmed: 'Confirmed',
-  actionDeclined: 'Cancelled',
-  actionExpired: 'Expired',
-  actionFailed: "Didn't go through",
-  topicsTitle: 'What can we help with?',
-  topicsHint: 'Pick a topic so your message reaches the right people.',
-  placeholderTopic: 'Pick a topic to start',
-  changeTopic: 'Change topic',
-  offlineDefault: "We're away right now. Leave a message and we'll reply as soon as we're back.",
-  today: 'Today',
-  yesterday: 'Yesterday',
-};
-
-export type ChatStrings = typeof defaultStrings;
-
-export function format(template: string, values: Record<string, string | number> = {}): string {
-  return template.replace(/\{(\w+)\}/g, (match, key: string) => (key in values ? String(values[key]) : match));
-}
+/** The web widget's English copy, so both channels read the same. Override any key via `strings`. */
+export const defaultStrings = {
+  support: 'Support',
+  closeChat: 'Close chat',
+  greeting: 'Hi there. How can we help?',
+  replyTime: 'We usually reply within a few hours.',
+  replyTimeAi: '{name} answers right away, the team within a few hours.',
+  unavailable: 'Chat is unavailable',
+  unavailableHint: 'Check your connection and try again later.',
+  sendMessage: 'Send us a message',
+  yourConversations: 'Your conversations',
+  conversation: 'Conversation',
+  typing: '{name} is typing…',
+  botTyping: '{name} is writing…',
+  searchHelp: 'Search the help center',
+  poweredBy: 'Powered by opendesk',
+  back: 'Back to conversations',
+  emptyHint: "Ask us anything. We'll reply here, and by email if you leave one.",
+  notSent: 'Not sent.',
+  sending: 'Sending…',
+  uploading: 'Uploading…',
+  removeFile: 'Remove {name}',
+  viewImage: 'View {name}',
+  closeImage: 'Close image',
+  fileTypeRefused: "{name} can't be sent here. Try another file type.",
+  fileTooLarge: '{name} is larger than 25 MB.',
+  uploadFailed: "Couldn't upload {name}. Try again.",
+  placeholder: 'Write a message…',
+  attach: 'Attach files',
+  send: 'Send',
+  ai: 'AI',
+  talkToPerson: 'Talk to a person',
+  handoffFailed: "Couldn't reach the team. Try again.",
+  handedOff: 'A person will reply here',
+  handedOffHint: "You'll see their reply in this conversation, and by email if you left one.",
+  checking: 'Checking {tool}…',
+  checked: 'Checked {tool}',
+  toolFailed: "Couldn't check {tool}",
+  actionPending: 'Needs your confirmation',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  actionConfirmed: 'Confirmed',
+  actionDeclined: 'Cancelled',
+  actionExpired: 'Expired',
+  actionFailed: "Didn't go through",
+  topicsTitle: 'What can we help with?',
+  topicsHint: 'Pick a topic so your message reaches the right people.',
+  placeholderTopic: 'Pick a topic to start',
+  changeTopic: 'Change topic',
+  offlineDefault: "We're away right now. Leave a message and we'll reply as soon as we're back.",
+  today: 'Today',
+  yesterday: 'Yesterday',
+};
+
+export type ChatStrings = typeof defaultStrings;
+
+export function format(template: string, values: Record<string, string | number> = {}): string {
+  return template.replace(/\{(\w+)\}/g, (match, key: string) => (key in values ? String(values[key]) : match));
+}