@amityco/react-native-social-uikit 4.2.0 → 4.2.1-3302b40d.0

package/src/chat/elements/GroupNameField/GroupNameField.tsx

@@ -0,0 +1,68 @@
+// GroupNameField element — a labeled, character-counted text field for the group
+// chat name, wrapping the Input.Text atom.
+//
+// A group name is one line of text but may be longer than the field is wide.
+// `multiLine` is what lets it wrap to a second line instead of scrolling
+// sideways out of sight, and `blockNewLine` then refuses Enter so it stays one
+// line of *text*: without the second prop the field grew a line per return press
+// and pushed the rest of the form off screen. blockNewLine strips on change
+// rather than on key press, so it also catches a pasted multi-line string, which
+// no key handler would see and which Android does not reliably report as a
+// cancellable Enter. maxLength bounds how far the field can grow.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Input } from '../../../core/design/atoms/Input';
+import { useString } from '../../../core/localization';
+import { useStyles } from './styles';
+
+const GROUP_NAME_MAX_LENGTH = 100;
+
+// 2. Types
+export type GroupNameFieldProps = {
+  value: string;
+  optional?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  onChange: (value: string) => void;
+};
+
+// 3. Named function component
+export function GroupNameField({
+  value,
+  onChange,
+  optional = false,
+  required = false,
+  placeholder,
+}: GroupNameFieldProps) {
+  const { styles } = useStyles();
+
+  const label = useString('amity_chat_group_name_label');
+  const defaultPlaceholder = useString('amity_chat_group_name_placeholder');
+  const optionalLabel = useString('amity_chat_group_name_optional');
+  const requiredLabel = useString('amity_chat_group_name_required');
+
+  const marker = required
+    ? requiredLabel
+    : optional
+    ? optionalLabel
+    : undefined;
+
+  return (
+    <View style={styles.container}>
+      <Input.Text
+        title={label}
+        optionalLabel={marker}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder ?? defaultPlaceholder}
+        showCharacterCount
+        maxLength={GROUP_NAME_MAX_LENGTH}
+        multiLine
+        blockNewLine
+      />
+    </View>
+  );
+}

package/src/chat/elements/GroupNameField/index.ts

@@ -0,0 +1,2 @@
+export { GroupNameField } from './GroupNameField';
+export type { GroupNameFieldProps } from './GroupNameField';

package/src/chat/elements/GroupNameField/styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+
+// Geometry ported from AmityUiKitWeb GroupNameField.module.css (rem -> px, x16):
+// full width, padding 1.5rem 1rem 0 = 24 top / 16 horizontal / 0 bottom.
+// Input.Text has no style/className prop, so the padding lives on a wrapper View.
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    container: {
+      width: '100%',
+      paddingTop: 24,
+      paddingHorizontal: 16,
+    },
+  });
+
+  return { styles, token };
+};

package/src/chat/elements/MediaUploadOverlay/MediaUploadOverlay.tsx

@@ -0,0 +1,36 @@
+// MediaUploadOverlay — ported from AmityUiKitWeb chat/elements/MediaUploadOverlay.
+// A dark scrim covering a media bubble while its file uploads, with a centered upload
+// spinner (Loader.Upload) that optionally exposes a cancel control. Web set the scrim
+// pointer-events: none; RN uses pointerEvents="box-none" so the cancel button stays
+// tappable while taps on the scrim itself fall through to the bubble.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Loader } from '../../../core/design/atoms/Loader';
+import { useStyles } from './styles';
+
+// 3. Types
+export type MediaUploadOverlayProps = {
+  onCancel?: () => void;
+  cancelAccessibilityLabel?: string;
+};
+
+// 4. Named function component
+export function MediaUploadOverlay({
+  onCancel,
+  cancelAccessibilityLabel = 'Cancel upload',
+}: MediaUploadOverlayProps) {
+  const { styles } = useStyles();
+
+  return (
+    <View style={styles.overlay} pointerEvents="box-none">
+      <Loader.Upload
+        size="medium"
+        onCancel={onCancel}
+        accessibilityLabel={cancelAccessibilityLabel}
+      />
+    </View>
+  );
+}

package/src/chat/elements/MediaUploadOverlay/index.ts

@@ -0,0 +1,2 @@
+export { MediaUploadOverlay } from './MediaUploadOverlay';
+export type { MediaUploadOverlayProps } from './MediaUploadOverlay';

package/src/chat/elements/MediaUploadOverlay/styles.ts

@@ -0,0 +1,26 @@
+// Styles for MediaUploadOverlay — ported from AmityUiKitWeb MediaUploadOverlay.module.css.
+// Absolute inset:0 scrim centered over its parent, on the media-overlay token.
+// It previously borrowed SurfaceBadgeSemanticBadgePostStatusTotalMedia, which
+// happens to carry the same 50% black today but is a post-status badge token —
+// the two would drift apart under a custom theme.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(
+        AmityColorToken.SurfaceMediaOverlayTransparentBlack
+      ),
+    },
+  });
+
+  return { styles, token };
+};

package/src/chat/elements/ReactionPicker/ReactionPicker.tsx

@@ -0,0 +1,343 @@
+// ReactionPicker — RN port of AmityUiKitWeb v4/chat/elements/ReactionPicker.
+// The horizontal reactions row shown in the message action popover. Tapping a
+// reaction fires onReactionClick (+ onSelectReaction), matching web. The active
+// reaction shows the reactionstate-active circle; the reaction name floats above
+// the icon the touch is currently over.
+//
+// RN adaptations from web:
+//   - Web reads the reaction set from CustomReactionProvider; RN has no runtime
+//     accessor for the top-level `message_reactions` config, so it defaults to
+//     DEFAULT_MESSAGE_REACTIONS (overridable via the `reactions` prop).
+//   - Web renders reaction.image URLs; RN renders the ported ReactionGlyph art.
+//   - Web drives the drag highlight from a `hoveredReaction` prop that the
+//     popover computes from pointer/touch coordinates and feeds back in as
+//     `data-touch-hovered`. RN owns that state internally instead (see below),
+//     so the element stays a drop-in for the existing action menu.
+//
+// Two defects, one root cause: the port dropped the touch-hover drag entirely
+// as a "pointer-only interaction", so:
+//   * no icon ever lifted while dragging across the bar, and
+//   * the name label was bound to Pressable's `pressed` flag and drawn at
+//     top:-33, i.e. outside the picker's own box, where the action menu's
+//     `pickerCard` (overflow:'hidden', borderRadius:20) clipped it.
+// Both are fixed here by reinstating web's interaction: a PanResponder on the
+// row maps the touch's pageX onto the measured icon slots and drives a
+// `hovered` reaction, and the label overhangs the pill the way web's does —
+// `pickerCard` no longer draws a clipping surface, so nothing crops it.
+//
+// Geometry mirrored from ReactionPicker.module.css:
+//   .reactionButton[data-touch-hovered] .reactionButton__icon
+//       -> transform: scale(1.3) translateY(-8px); transition .15s ease-out
+//   .reactionButton[data-touch-hovered] .reactionButton__text
+//       -> opacity 1 + translateY(-9px) on top of its base top:-2.05rem (-32.8px)
+
+// 1. React / RN imports
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  PanResponder,
+  Pressable,
+  View,
+  type PanResponderInstance,
+} from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../core/design/components/Typography';
+import { resolveString } from '../../../core/localization';
+import {
+  DEFAULT_MESSAGE_REACTIONS,
+  ReactionGlyph,
+} from '../../features/shared/utils/reactionIcons';
+import { PILL_PADDING, useStyles } from './styles';
+
+// Web: `transform: scale(1.3) translateY(-8px)` / label `translateY(-9px)`,
+// both `transition: transform .15s ease-out`.
+const LIFT_TRANSLATE_Y = -8;
+const LIFT_SCALE = 1.3;
+const LABEL_TRANSLATE_Y = -9;
+const LIFT_DURATION_MS = 150;
+
+// Slop before the row steals the touch from the per-icon Pressable. Below this a
+// touch is still a plain tap (so tap-to-react and screen-reader activation keep
+// working); above it the gesture becomes a drag across the bar.
+const DRAG_ACTIVATION_PX = 4;
+
+// 3. Types
+export type ReactionPickerProps = {
+  /** Reaction names to show. Defaults to the standard message reaction set. */
+  reactions?: readonly string[];
+  myReaction?: string | null;
+  onReactionClick: (reactionName: string) => void;
+  onSelectReaction?: (reactionName: string) => void;
+  pageId?: string;
+  componentId?: string;
+};
+
+type Slot = { name: string; start: number; end: number };
+
+// Web CustomReactionProvider.getChatReactionLabel.
+function getChatReactionLabel(reactionName: string): string {
+  const name = reactionName.toLowerCase();
+  const key = `amity_chat_reaction_label_${name}`;
+  const localized = resolveString(key);
+  return localized === key ? reactionName : localized;
+}
+
+// 4. Named function component
+export function ReactionPicker({
+  reactions = DEFAULT_MESSAGE_REACTIONS,
+  myReaction,
+  onReactionClick,
+  onSelectReaction,
+}: ReactionPickerProps) {
+  const { styles } = useStyles();
+  const [hovered, setHovered] = useState<string | null>(null);
+
+  // One 0→1 driver per reaction: 0 = at rest, 1 = touch-hovered (web's
+  // data-touch-hovered). Drives both the icon lift and the label reveal.
+  const lifts = useMemo(() => {
+    const map: Record<string, Animated.Value> = {};
+    reactions.forEach((name) => {
+      map[name] = new Animated.Value(0);
+    });
+    return map;
+  }, [reactions]);
+
+  useEffect(() => {
+    Animated.parallel(
+      reactions.map((name) =>
+        Animated.timing(lifts[name], {
+          toValue: hovered === name ? 1 : 0,
+          duration: LIFT_DURATION_MS,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        })
+      )
+    ).start();
+  }, [hovered, reactions, lifts]);
+
+  // --- shared label --------------------------------------------------------
+  // The label is one node at the root, so its reveal needs its own 0→1 driver
+  // (the per-icon `lifts` still drive the icons themselves).
+  const labelAnim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(labelAnim, {
+      toValue: hovered ? 1 : 0,
+      duration: LIFT_DURATION_MS,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [hovered, labelAnim]);
+
+  // Measured so the label can be centred over the hovered icon and kept inside
+  // the pill. Both come from onLayout, so the first hover after mount already
+  // has them.
+  const [pillWidth, setPillWidth] = useState(0);
+  const [labelWidth, setLabelWidth] = useState(0);
+
+  // --- drag tracking -------------------------------------------------------
+  // The PanResponder closure is built once, so everything it reads lives in a
+  // ref; `hovered` state is only the render mirror.
+  const rowRef = useRef<View>(null);
+  const rowPageXRef = useRef(0);
+  const slotsRef = useRef<Slot[]>([]);
+  const hoveredRef = useRef<string | null>(null);
+  const draggingRef = useRef(false);
+  const onPickRef = useRef<(name: string) => void>(() => {});
+
+  onPickRef.current = (reactionName: string) => {
+    onReactionClick(reactionName);
+    onSelectReaction?.(reactionName);
+  };
+
+  function setHoveredReaction(name: string | null) {
+    if (hoveredRef.current === name) return;
+    hoveredRef.current = name;
+    setHovered(name);
+  }
+
+  function measureRow() {
+    rowRef.current?.measureInWindow((x) => {
+      rowPageXRef.current = x;
+    });
+  }
+
+  // Web resolves the hovered reaction from the touch point; the slots are the
+  // icons' measured x-ranges within the row.
+  function reactionAt(pageX: number): string | null {
+    const slots = slotsRef.current.filter(Boolean);
+    if (slots.length === 0) return null;
+
+    const local = pageX - rowPageXRef.current;
+    const first = slots[0];
+    const last = slots[slots.length - 1];
+    // Dragging off either end of the pill clears the highlight, like web
+    // dropping data-touch-hovered when the pointer leaves the picker.
+    if (local < first.start - PILL_PADDING || local > last.end + PILL_PADDING) {
+      return null;
+    }
+
+    // Snap to the nearest icon so the 8px gaps between them don't flicker.
+    let nearest = first;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    slots.forEach((slot) => {
+      const distance = Math.abs(local - (slot.start + slot.end) / 2);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        nearest = slot;
+      }
+    });
+    return nearest.name;
+  }
+
+  const panRef = useRef<PanResponderInstance | null>(null);
+  if (panRef.current == null) {
+    panRef.current = PanResponder.create({
+      // Let a plain tap stay with the per-icon Pressable...
+      onStartShouldSetPanResponderCapture: () => false,
+      // ...and only take over once the finger actually travels.
+      onMoveShouldSetPanResponderCapture: (_event, gesture) =>
+        Math.abs(gesture.dx) > DRAG_ACTIVATION_PX ||
+        Math.abs(gesture.dy) > DRAG_ACTIVATION_PX,
+      onPanResponderGrant: (event) => {
+        draggingRef.current = true;
+        // Re-measure in case the popover was laid out again since mount; the
+        // callback lands well before the first move event is handled.
+        measureRow();
+        setHoveredReaction(reactionAt(event.nativeEvent.pageX));
+      },
+      onPanResponderMove: (event) => {
+        setHoveredReaction(reactionAt(event.nativeEvent.pageX));
+      },
+      onPanResponderRelease: () => {
+        const picked = hoveredRef.current;
+        draggingRef.current = false;
+        setHoveredReaction(null);
+        if (picked) onPickRef.current(picked);
+      },
+      onPanResponderTerminate: () => {
+        draggingRef.current = false;
+        setHoveredReaction(null);
+      },
+    });
+  }
+
+  // Centre the label on the hovered icon, then keep it inside the pill. The
+  // slots are row-relative, so add the pill's padding to reach pill coordinates;
+  // `labelAnchor` already centres the bubble, so the shift is measured from the
+  // pill's centre. A name wider than the pill just stays centred.
+  let labelShift = 0;
+  if (hovered && pillWidth > 0 && labelWidth > 0) {
+    const slot = slotsRef.current.find((s) => s && s.name === hovered);
+    if (slot) {
+      const iconCentre = PILL_PADDING + (slot.start + slot.end) / 2;
+      const maxShift = Math.max(0, (pillWidth - labelWidth) / 2);
+      const wanted = iconCentre - pillWidth / 2;
+      labelShift = Math.max(-maxShift, Math.min(maxShift, wanted));
+    }
+  }
+
+  if (!reactions || reactions.length === 0) return null;
+
+  return (
+    <View style={styles.root}>
+      {/* Centred across the pill, then shifted over the hovered icon and
+          clamped so it never pokes out of the pill's width. */}
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.labelAnchor,
+          {
+            opacity: labelAnim,
+            transform: [
+              { translateX: labelShift },
+              {
+                translateY: labelAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0, LABEL_TRANSLATE_Y],
+                }),
+              },
+            ],
+          },
+        ]}
+      >
+        <View
+          style={styles.label}
+          onLayout={(event) => setLabelWidth(event.nativeEvent.layout.width)}
+        >
+          <Typography
+            variant="caption"
+            style={styles.labelText}
+            numberOfLines={1}
+          >
+            {hovered ? getChatReactionLabel(hovered) : ''}
+          </Typography>
+        </View>
+      </Animated.View>
+
+      <View
+        style={styles.pill}
+        onLayout={(event) => setPillWidth(event.nativeEvent.layout.width)}
+      >
+        <View
+          ref={rowRef}
+          style={styles.row}
+          onLayout={measureRow}
+          {...panRef.current.panHandlers}
+        >
+          {reactions.map((name, index) => {
+            const active = myReaction === name;
+            const lift = lifts[name];
+            return (
+              <Pressable
+                key={name}
+                onLayout={(event) => {
+                  const { x, width } = event.nativeEvent.layout;
+                  slotsRef.current[index] = { name, start: x, end: x + width };
+                }}
+                onPressIn={() => setHoveredReaction(name)}
+                onPressOut={() => {
+                  if (!draggingRef.current) setHoveredReaction(null);
+                }}
+                onPress={() => onPickRef.current(name)}
+                accessibilityRole="button"
+                accessibilityLabel={`React with ${getChatReactionLabel(name)}`}
+              >
+                <View style={styles.reactionButton}>
+                  {/* Narrowed to the active state
+                      only — it used to light up on hover / touch-hover too, which
+                      made a reaction look already-selected while being pressed.
+                      Web keeps the halo on .reactionButton, so it stays put while
+                      the icon lifts — mirrored here by leaving it un-animated. */}
+                  {active ? <View style={styles.activeBackground} /> : null}
+
+                  <Animated.View
+                    style={{
+                      transform: [
+                        {
+                          translateY: lift.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0, LIFT_TRANSLATE_Y],
+                          }),
+                        },
+                        {
+                          scale: lift.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [1, LIFT_SCALE],
+                          }),
+                        },
+                      ],
+                    }}
+                  >
+                    <ReactionGlyph name={name} size={32} />
+                  </Animated.View>
+                </View>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/chat/elements/ReactionPicker/index.ts

@@ -0,0 +1,2 @@
+export { ReactionPicker } from './ReactionPicker';
+export type { ReactionPickerProps } from './ReactionPicker';

package/src/chat/elements/ReactionPicker/styles.ts

@@ -0,0 +1,136 @@
+// Styles for ReactionPicker — ported from AmityUiKitWeb
+// v4/chat/elements/ReactionPicker/ReactionPicker.module.css PLUS the pill
+// wrapper web keeps in MessageActionsPopover.module.css
+// (`.messageActionsPopover__reactionPicker`: filled-default surface, full radius,
+// box-shadow-04). The wrapper is folded in here so the component is a drop-in
+// for the RN action menu — mounting it closes web's reactionpopover-filled-default
+// gap. Orchestrator MUST NOT double-wrap it in another pill.
+// rem→px ×16.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+import { useAmityTheme } from '../../../core/design/theme/AmityThemeProvider';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+
+// `.messageActionsPopover__reactionPicker` padding (0.5rem). Exported because the
+// drag hit-test tolerates this much overshoot past the first/last icon before it
+// treats the touch as having left the bar.
+export const PILL_PADDING = 8;
+
+// A 36px transparent band above the pill originally kept the floating label
+// from being clipped by the action menu's `pickerCard`
+// (overflow:'hidden'). That clip is gone — `pickerCard` no longer draws a
+// surface at all — so the band is no longer needed, and it was the reason the
+// picker floated ~44px from the bubble whenever the popover opened below a
+// message (8px anchor gap + 36px of empty band). The label now overhangs the
+// pill instead.
+//
+// Web puts the label `top: -2.05rem` from its own 2rem button, and lifts it a
+// further 9px on hover. Measured from the picker root: down past the pill's
+// padding to the icon's top edge, then back up by that offset.
+const LABEL_TOP_FROM_ICON = -33;
+const LABEL_TOP = PILL_PADDING + LABEL_TOP_FROM_ICON;
+
+export const useStyles = () => {
+  const token = useToken();
+  const { mode } = useAmityTheme();
+
+  const styles = StyleSheet.create({
+    // Transparent band + pill. Sized to content so the action menu's card still
+    // hugs the bar.
+    root: {
+      alignSelf: 'flex-start',
+    },
+    // .messageActionsPopover__reactionPicker (the filled pill)
+    pill: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: PILL_PADDING,
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceReactionsReactionPopoverFilledDefault
+      ),
+      // Match web reaction-bar elevation-08 (3 stacked layers:
+      // 0 4px 24px 4px / 0 32px 64px -12px / 0 6px 6px -4px). RN can't stack
+      // shadows, so approximate with a single heavier, softer shadow; colour is
+      // theme-aware (light rgba(41,43,50), dark rgba(0,0,0)) per the token defs.
+      shadowColor: mode === 'dark' ? 'rgb(0, 0, 0)' : 'rgb(41, 43, 50)',
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.18,
+      shadowRadius: 24,
+      elevation: 12,
+    },
+    // .reactionPickerContainer
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    // .reactionButton (2rem × 2rem)
+    reactionButton: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 32,
+      height: 32,
+    },
+    // .reactionButton__activeBackground
+    //
+    // Web's chat picker draws this circle behind `reaction.image`,
+    // artwork that carries transparent padding, so a same-size circle still
+    // reads as a halo. RN renders the ported ReactionGlyph art instead, whose
+    // outer <Circle r=16> fills the whole 32px box opaquely — a 32px circle
+    // behind it was 100% occluded, which is why an already-given reaction looked
+    // unselected when the bar was reopened. Web's own social picker sizes the
+    // same element at 2.5rem behind a 2rem icon
+    // (social/elements/ReactionPicker.module.css), so adopt that: 40px centred on
+    // the 32px glyph leaves a 4px ring. The 4px bleed sits inside the pill's 8px
+    // padding and inside the row's 8px gaps, so nothing collides or overflows.
+    activeBackground: {
+      position: 'absolute',
+      top: -4,
+      left: -4,
+      width: 40,
+      height: 40,
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceReactionsReactionPopoverReactionStateActive
+      ),
+    },
+    // .reactionButton__text (floating label tooltip).
+    //
+    // ONE label for the whole picker, not one per icon. Web can hang a label off
+    // each 2rem button because its tooltip escapes the button box; in RN an
+    // absolutely-positioned child with no left/right is clamped to its
+    // containing block, so a per-button label could never be wider than the 32px
+    // `reactionButton` — which is why every name came back ellipsised no matter
+    // what `maxWidth` said. This anchor spans the pill and centres its content,
+    // so the bubble sizes to the full name and is then shifted over whichever
+    // icon is hovered.
+    labelAnchor: {
+      position: 'absolute',
+      top: LABEL_TOP,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+      zIndex: 2,
+    },
+    label: {
+      paddingVertical: 2,
+      paddingHorizontal: 6,
+      borderRadius: 28,
+      backgroundColor: token(
+        AmityColorToken.SurfaceReactionsReactionPopoverReactionNameActive
+      ),
+    },
+    labelText: {
+      textTransform: 'capitalize',
+      textAlign: 'center',
+      color: token(
+        AmityColorToken.TextReactionsReactionPopoverReactionNameGeneral
+      ),
+    },
+  });
+
+  return { styles };
+};