@webinex/chatify 2.0.0-alpha12 → 2.0.0-alpha14

package/src/ui/localizer.tsx

@@ -1,137 +1,148 @@
-import dayjs from 'dayjs';
-import React, { useContext } from 'react';
-import { SystemMessageText } from '../core';
-
-export interface LocalizerBase {
-  isToday: (value: string) => boolean;
-  timestamp: (value: string) => string;
-  dateTime: (value: string) => string;
-  system: Record<SystemMessageText, (key: SystemMessageText, payload: any | null) => string>;
-  message: {
-    read: () => React.ReactNode;
-    reading: () => React.ReactNode;
-    sending: () => React.ReactNode;
-  };
-  addChat: {
-    title: () => React.ReactNode;
-    name: {
-      label: () => React.ReactNode;
-      required: () => string;
-      max250: () => string;
-    };
-    members: {
-      label: () => React.ReactNode;
-      required: () => string;
-    };
-    submitBtn: () => React.ReactNode;
-  };
-
-  input: {
-    placeholder: () => string;
-  };
-
-  settings: {
-    members: () => string;
-  };
-
-  size: {
-    bytes: (value: number) => string;
-    kb: (value: number) => string;
-    mb: (value: number) => string;
-  };
-
-  chatList: {
-    topShown: (count: number) => string;
-  };
-
-  autoReply: {
-    buttonTitle: () => string;
-    title: () => React.ReactNode;
-    period: {
-      label: () => React.ReactNode;
-      required: () => string;
-      format: () => string;
-    };
-    text: {
-      label: () => React.ReactNode;
-      required: () => string;
-    };
-    submitBtn: () => React.ReactNode;
-    clearBtn: () => React.ReactNode;
-  };
-}
-
-export interface Localizer extends LocalizerBase {}
-
-export const LocalizerContext = React.createContext<Localizer>(null!);
-
-export function useLocalizer() {
-  return useContext(LocalizerContext);
-}
-
-const base: LocalizerBase = {
-  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
-  timestamp: (value: string) => dayjs(value).format('HH:mm'),
-  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
-  message: {
-    read: () => 'Read',
-    reading: () => 'Reading...',
-    sending: () => 'Sending...',
-  },
-  addChat: {
-    title: () => 'Add chat',
-    name: {
-      label: () => 'Name',
-      required: () => `Name is required`,
-      max250: () => 'Max 250 characters allowed',
-    },
-    members: {
-      label: () => 'Members',
-      required: () => 'Members is required',
-    },
-    submitBtn: () => 'Submit',
-  },
-  system: {
-    'chatify://chat-created': () => 'Chat created',
-    'chatify://member-added': () => 'New member added',
-    'chatify://member-removed': () => 'Member removed',
-    'chatify://chat-name-changed': (_, { newName }: { newName: string }) =>
-      `Chat name changed to '${newName}'`,
-  },
-
-  input: {
-    placeholder: () => 'Start typing... (Press Enter to send, and Shift+Enter to start a new line)',
-  },
-
-  settings: {
-    members: () => 'Members',
-  },
-
-  size: {
-    bytes: (value: number) =>
-      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} bytes`,
-    kb: (value: number) =>
-      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} KB`,
-    mb: (value: number) =>
-      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`,
-  },
-
-  chatList: {
-    topShown: (count: number) => `Latest active ${count} chat${count !== 1 ? 's' : ''} shown`,
-  },
-
-  autoReply: {
-    buttonTitle: () => 'Auto-reply',
-    title: () => 'Auto-reply',
-    period: {
-      label: () => 'Period',
-      required: () => 'Please select start and end date',
-      format: () => 'DD/MM/YYYY',
-    },
-    text: { label: () => 'Message', required: () => 'Please enter message' },
-    submitBtn: () => 'Submit',
-    clearBtn: () => 'Clear',
-  },
-};
-
-export const defaultLocalizer: Localizer = base as unknown as Localizer;
+import dayjs from 'dayjs';
+import React, { useContext } from 'react';
+import { SystemMessageText } from '../core';
+
+export interface LocalizerBase {
+  isToday: (value: string) => boolean;
+  timestamp: (value: string) => string;
+  dateTime: (value: string) => string;
+  system: Record<SystemMessageText, (key: SystemMessageText, payload: any | null) => string>;
+  message: {
+    read: () => React.ReactNode;
+    reading: () => React.ReactNode;
+    sending: () => React.ReactNode;
+  };
+  addChat: {
+    title: () => React.ReactNode;
+    name: {
+      label: () => React.ReactNode;
+      required: () => string;
+      max250: () => string;
+    };
+    members: {
+      label: () => React.ReactNode;
+      required: () => string;
+    };
+    submitBtn: () => React.ReactNode;
+  };
+
+  input: {
+    placeholder: (type: 'compact' | 'default') => string;
+  };
+
+  settings: {
+    members: () => string;
+  };
+
+  size: {
+    bytes: (value: number) => string;
+    kb: (value: number) => string;
+    mb: (value: number) => string;
+  };
+
+  chatList: {
+    topShown: (count: number) => string;
+  };
+
+  autoReply: {
+    buttonTitle: () => string;
+    title: () => React.ReactNode;
+    period: {
+      label: () => React.ReactNode;
+      required: () => string;
+      format: () => string;
+    };
+    text: {
+      label: () => React.ReactNode;
+      required: () => string;
+    };
+    submitBtn: () => React.ReactNode;
+    clearBtn: () => React.ReactNode;
+  };
+
+  members: {
+    title: (chatName: string) => React.ReactNode;
+  };
+}
+
+export interface Localizer extends LocalizerBase {}
+
+export const LocalizerContext = React.createContext<Localizer>(null!);
+
+export function useLocalizer() {
+  return useContext(LocalizerContext);
+}
+
+const base: LocalizerBase = {
+  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
+  timestamp: (value: string) => dayjs(value).format('HH:mm'),
+  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
+  message: {
+    read: () => 'Read',
+    reading: () => 'Reading...',
+    sending: () => 'Sending...',
+  },
+  addChat: {
+    title: () => 'Add chat',
+    name: {
+      label: () => 'Name',
+      required: () => `Name is required`,
+      max250: () => 'Max 250 characters allowed',
+    },
+    members: {
+      label: () => 'Members',
+      required: () => 'Members is required',
+    },
+    submitBtn: () => 'Submit',
+  },
+  system: {
+    'chatify://chat-created': () => 'Chat created',
+    'chatify://member-added': () => 'New member added',
+    'chatify://member-removed': () => 'Member removed',
+    'chatify://chat-name-changed': (_, { newName }: { newName: string }) =>
+      `Chat name changed to '${newName}'`,
+  },
+
+  input: {
+    placeholder: (type) =>
+      type === 'default'
+        ? 'Start typing... (Press Enter to send, and Shift+Enter to start a new line)'
+        : 'Type a message...',
+  },
+
+  settings: {
+    members: () => 'Members',
+  },
+
+  size: {
+    bytes: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} bytes`,
+    kb: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} KB`,
+    mb: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`,
+  },
+
+  chatList: {
+    topShown: (count: number) => `Latest active ${count} chat${count !== 1 ? 's' : ''} shown`,
+  },
+
+  members: {
+    title: (chatName: string) => `Members of ${chatName}`,
+  },
+
+  autoReply: {
+    buttonTitle: () => 'Auto-reply',
+    title: () => 'Auto-reply',
+    period: {
+      label: () => 'Period',
+      required: () => 'Please select start and end date',
+      format: () => 'DD/MM/YYYY',
+    },
+    text: { label: () => 'Message', required: () => 'Please enter message' },
+    submitBtn: () => 'Submit',
+    clearBtn: () => 'Clear',
+  },
+};
+
+export const defaultLocalizer: Localizer = base as unknown as Localizer;

package/src/ui/useCompact.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useCompact(thresholdOrCompact: number | boolean = 768) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<{ width: number; height: number }>();
+  const automatic = typeof thresholdOrCompact === 'number';
+
+  useEffect(() => {
+    if (!automatic) {
+      setSize(undefined);
+      return;
+    }
+
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(() => {
+      const { width, height } = el.getBoundingClientRect();
+      setSize({ width, height });
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [automatic]);
+
+  if (typeof thresholdOrCompact === 'boolean') {
+    return [ref, thresholdOrCompact, size] as const;
+  }
+
+  const compact = size != null ? size.width < thresholdOrCompact : undefined;
+  return [ref, compact, size] as const;
+}

package/src/ui/useFormatter.tsx

@@ -1,17 +1,17 @@
-import { useLocalizer } from './localizer';
-
-export function useFormatter() {
-  const localizer = useLocalizer();
-
-  return {
-    size: (value: number) => {
-      if (value < 1024) {
-        return localizer.size.bytes(value);
-      } else if (value < 1024 * 1024) {
-        return localizer.size.kb(value / 1024);
-      } else {
-        return localizer.size.mb(value / 1024 / 1024);
-      }
-    },
-  };
-}
+import { useLocalizer } from './localizer';
+
+export function useFormatter() {
+  const localizer = useLocalizer();
+
+  return {
+    size: (value: number) => {
+      if (value < 1024) {
+        return localizer.size.bytes(value);
+      } else if (value < 1024 * 1024) {
+        return localizer.size.kb(value / 1024);
+      } else {
+        return localizer.size.mb(value / 1024 / 1024);
+      }
+    },
+  };
+}