Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 | 2x 2x 2x 2x 2x 2x 27x 27x 148x 2x 20x 20x 20x 20x 20x 20x 20x 20x 7x 7x 7x 7x 20x 2x 2x 20x 20x 1x 4x 4x 4x 2x 20x 20x 20x 47x | import React, { useCallback, useMemo, useState } from "react";
import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
import Animated, {
runOnJS,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import {
Dimensions,
Keyboard,
Modal,
ScrollView,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from "react-native";
import { ChevronDownIcon, CloseIcon } from "@repo/ui/icons";
import { useTheme } from "@repo/ui/themes";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { textStyles } from "@repo/ui/themes/typography";
import { Block } from "@/types/chat";
import { TableUserRow } from "./TableUserRow";
const SCREEN_HEIGHT = Dimensions.get("window").height;
const INLINE_ROW_LIMIT = 5;
const SHEET_SPRING = { damping: 20, stiffness: 150, mass: 0.8 };
/** Drag far enough, or flick hard enough, and the release dismisses. */
const DISMISS_DRAG_DISTANCE = 120;
const DISMISS_VELOCITY = 800;
const Rows = ({ rows, keyPrefix }: { rows: unknown[]; keyPrefix: string }) => {
const styles = useStyles();
return (
<>
{rows.map((row, i) => (
<React.Fragment key={`${keyPrefix}-${i}`}>
<View style={styles.tableRow}>
<TableUserRow row={row} />
</View>
{i < rows.length - 1 && <View style={styles.tableDivider} />}
</React.Fragment>
))}
</>
);
};
export const TableBlock = ({ block }: { block: Block }) => {
const styles = useStyles();
const theme = useTheme();
const [renderModal, setRenderModal] = useState(false);
const anim = useSharedValue(0);
const rows = block.rows ?? [];
const hasMore = rows.length > INLINE_ROW_LIMIT;
const inlineRows = rows.slice(0, INLINE_ROW_LIMIT);
const openModal = () => {
// Sent away deliberately, and before the sheet covers anything. Presenting
// a Modal makes iOS resign first responder anyway, but it happens behind
// the sheet: the list silently re-lays out to the keyboard-less height and
// that change is only revealed when the sheet closes, as a jump followed
// by the keyboard climbing back. Dismissing here means the list settles
// once, in view, and nothing moves on the way back out.
Keyboard.dismiss();
setRenderModal(true);
// The Modal must be mounted before the sheet can animate up from offscreen.
requestAnimationFrame(() => {
anim.value = withSpring(1, SHEET_SPRING);
});
};
const closeModal = useCallback(() => {
anim.value = withSpring(0, SHEET_SPRING, (finished) => {
Eif (finished) runOnJS(setRenderModal)(false);
});
}, [anim]);
/**
* `anim` is the sheet's position, so the drag writes straight into it: the
* backdrop fade and the translate both already read from it, and releasing
* hands back to the same spring that opens and closes the sheet.
*
* It sits on the handle and header rather than the whole sheet — the body is
* a ScrollView, and a pan competing with it for the same downward drag makes
* the list feel like it sticks.
*/
const dragGesture = useMemo(
() =>
Gesture.Pan()
.onUpdate((event) => {
// Upward drag does nothing: the sheet has no taller snap point to
// grow into, so following the finger would just leave a gap below it.
anim.value = event.translationY <= 0 ? 1 : 1 - event.translationY / SCREEN_HEIGHT;
})
.onEnd((event) => {
const draggedDown = Math.max(0, event.translationY);
const dismissed =
draggedDown > DISMISS_DRAG_DISTANCE || event.velocityY > DISMISS_VELOCITY;
if (dismissed) runOnJS(closeModal)();
else anim.value = withSpring(1, SHEET_SPRING);
}),
[anim, closeModal],
);
const backdropAnimatedStyle = useAnimatedStyle(() => ({
opacity: Math.min(Math.max(anim.value, 0), 1),
}));
const contentAnimatedStyle = useAnimatedStyle(() => ({
transform: [{ translateY: Math.max(0, 1 - anim.value) * SCREEN_HEIGHT }],
}));
return (
<View style={styles.blockTable}>
{block.title && <Text style={styles.tableTitle}>{block.title}</Text>}
<View>
<Rows rows={inlineRows} keyPrefix="inline" />
</View>
{hasMore && (
<TouchableOpacity style={styles.seeMoreBtn} onPress={openModal} activeOpacity={0.7}>
<Text style={styles.seeMoreText}>
{`See More (${rows.length - INLINE_ROW_LIMIT} more)`}
</Text>
<ChevronDownIcon
width={14}
height={8}
color={theme.theme.colors.text.onBehalf || "#007AFF"}
/>
</TouchableOpacity>
)}
<Modal animationType="none" transparent visible={renderModal} onRequestClose={closeModal}>
{/* Gestures do not cross into a React Native Modal on iOS unless the
modal's own subtree is rooted here. */}
<GestureHandlerRootView style={styles.modalContainer}>
<TouchableWithoutFeedback onPress={closeModal}>
<Animated.View style={[styles.modalBackdropAbsolute, backdropAnimatedStyle]} />
</TouchableWithoutFeedback>
<Animated.View style={[styles.modalContent, contentAnimatedStyle]}>
<GestureDetector gesture={dragGesture}>
<View>
<View style={styles.dragHandleArea}>
<View style={styles.dragHandle} />
</View>
<View style={styles.modalHeader}>
{/* Neutral fallback: the rows may be managers, staff or anyone
else the agent listed — naming them "users" is a guess. */}
<Text style={styles.modalTitle}>{block.title || "Full List"}</Text>
<TouchableOpacity
style={styles.closeBtn}
onPress={closeModal}
activeOpacity={0.7}
accessibilityRole="button"
accessibilityLabel="Close list"
>
<CloseIcon width={20} height={20} color={theme.theme.colors.text.muted} />
</TouchableOpacity>
</View>
</View>
</GestureDetector>
<ScrollView style={styles.modalListContainer} showsVerticalScrollIndicator>
<Rows rows={rows} keyPrefix="modal" />
</ScrollView>
</Animated.View>
</GestureHandlerRootView>
</Modal>
</View>
);
};
const useStyles = makeStyles((theme) => ({
blockTable: {
backgroundColor: theme.colors.white,
borderRadius: 12,
padding: 12,
borderWidth: 1,
borderColor: "rgba(0, 0, 0, 0.05)",
shadowColor: theme.colors.shadow.black,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.04,
shadowRadius: 8,
elevation: 2,
},
tableTitle: {
...textStyles.content.semiBold,
marginBottom: 8,
fontSize: 14,
},
tableRow: {
flexDirection: "column",
borderBottomWidth: 0,
paddingVertical: 14,
},
tableDivider: {
height: 0.5,
backgroundColor: "#EDEDED",
marginHorizontal: 4,
},
seeMoreBtn: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 8,
gap: 6,
width: "100%",
},
seeMoreText: {
...textStyles.content.semiBold,
color: theme.colors.text.onBehalf || "#007AFF",
fontSize: 13,
},
modalContainer: {
flex: 1,
justifyContent: "flex-end",
},
modalBackdropAbsolute: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0, 0, 0, 0.4)",
},
modalContent: {
backgroundColor: theme.colors.white,
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
maxHeight: "85%",
paddingHorizontal: 20,
paddingBottom: 34,
shadowColor: "#000",
shadowOffset: { width: 0, height: -4 },
shadowOpacity: 0.1,
shadowRadius: 12,
elevation: 24,
},
// Generous vertical padding: this is the grab target, and a bar only 4px
// tall is far smaller than the area a thumb expects to be able to catch.
dragHandleArea: {
alignItems: "center",
paddingTop: 10,
paddingBottom: 6,
},
dragHandle: {
width: 40,
height: 4,
borderRadius: 2,
backgroundColor: theme.isNewTheme ? theme.colors.border.subtle : theme.colors.border.divider,
},
modalHeader: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingVertical: 16,
borderBottomWidth: 1,
borderBottomColor: "#EDEDED",
},
modalTitle: {
...textStyles.content.semiBold,
fontSize: 16,
color: "#1A1A1A",
},
closeBtn: {
padding: 4,
alignItems: "center",
justifyContent: "center",
},
modalListContainer: {
marginTop: 8,
},
}));
|