@planningcenter/chat-react-native 3.9.0-rc.3 → 3.9.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/components/display/icon_button.d.ts +2 -1
  2. package/build/components/display/icon_button.d.ts.map +1 -1
  3. package/build/components/display/icon_button.js.map +1 -1
  4. package/build/screens/send_giphy_screen.d.ts +1 -2
  5. package/build/screens/send_giphy_screen.d.ts.map +1 -1
  6. package/build/screens/send_giphy_screen.js +67 -39
  7. package/build/screens/send_giphy_screen.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/components/display/icon_button.tsx +2 -2
  10. package/src/screens/send_giphy_screen.tsx +100 -56
package/build/components/display/icon_button.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { type StyleProp } from 'react-native';
2
3
  import type { PressableProps, ViewStyle } from 'react-native';
3
4
  import type { IconProps, IconString } from './icon';
4
5
  import type { IconButtonAppearanceUnion } from './utils/button_colors';
@@ -49,7 +50,7 @@ interface IconButtonProps extends PressableProps {
49
50
  /**
50
51
  * Styles the `Pressable` wrapper
51
52
  */
52
- style?: ViewStyle;
53
+ style?: StyleProp<ViewStyle>;
53
54
  }
54
55
  export declare function IconButton({ accessibilityLabel, appearance, disabled, iconStyle, loading, maxFontSizeMultiplier, name, size, style, ...props }: IconButtonProps): React.JSX.Element;
55
56
  export {};
package/build/components/display/icon_button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAKnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAMtE,QAAA,MAAM,KAAK;;;;;;;;;;CAUD,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAmBnD,UAAU,eAAgB,SAAQ,cAAc;IAC9C;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,UAAU,CAAC,EACzB,kBAAkB,EAClB,UAAsB,EACtB,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,qBAAqB,EACrB,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,qBAmEjB"}
1
+ {"version":3,"file":"icon_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAKnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAMtE,QAAA,MAAM,KAAK;;;;;;;;;;CAUD,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAmBnD,UAAU,eAAgB,SAAQ,cAAc;IAC9C;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,kBAAkB,EAClB,UAAsB,EACtB,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,qBAAqB,EACrB,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,qBAmEjB"}
package/build/components/display/icon_button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon_button.js","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport { Icon } from './icon'\nimport type { IconProps, IconString } from './icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { Spinner } from './spinner'\nimport { getColorKey, useIconButtonColorOptionMap } from './utils/button_colors'\nimport type { IconButtonAppearanceUnion } from './utils/button_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n xxxs: 'xxxs',\n xxs: 'xxs',\n xs: 'xs',\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n xl: 'xl',\n xxl: 'xxl',\n xxxl: 'xxxl',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n SizeUnion,\n {\n fontSize: number\n height: number\n }\n>\ntype AndroidRadiusSize = Record<\n SizeUnion,\n {\n radius: number\n }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface IconButtonProps extends PressableProps {\n /**\n * Provides context to screen readers about what the button does.\n * This is required as Icons don't inherently provide non-visual context like text does.\n */\n accessibilityLabel: string\n /**\n * Updates the icon's colors. Defaults to 'neutral'.\n */\n appearance?: IconButtonAppearanceUnion\n /**\n * Styles the icon itself.\n * `fontSize` allows for a custom size that also responds to the device's text scale.\n * `color` changes the color of the icon.\n */\n iconStyle?: IconProps['style']\n /**\n * Disables the button and replaces its content with a spinner\n */\n loading?: boolean\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Generates an icon from `@planningcenter/icons`\n */\n name: IconString\n /**\n * Changes the overall size of the button and its contents\n */\n size?: SizeUnion\n /**\n * Styles the `Pressable` wrapper\n */\n style?: ViewStyle\n}\n\nexport function IconButton({\n accessibilityLabel,\n appearance = 'neutral',\n disabled = false,\n iconStyle,\n loading,\n maxFontSizeMultiplier,\n name,\n size = 'md',\n style,\n ...props\n}: IconButtonProps) {\n const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size })\n const colorOptionMap = useIconButtonColorOptionMap()\n const colorKey = getColorKey({ disabled, loading, appearance })\n\n const { color = colorOptionMap[colorKey] } = StyleSheet.flatten(iconStyle || {})\n const androidRippleColor = useCreateAndroidRippleColor({ color: color })\n\n const androidRadiusSizeMap: AndroidRadiusSize = {\n [SIZES.xxxs]: {\n radius: 8,\n },\n [SIZES.xxs]: {\n radius: 10,\n },\n [SIZES.xs]: {\n radius: 12,\n },\n [SIZES.sm]: {\n radius: 14,\n },\n [SIZES.md]: {\n radius: 16,\n },\n [SIZES.lg]: {\n radius: 18,\n },\n [SIZES.xl]: {\n radius: 20,\n },\n [SIZES.xxl]: {\n radius: 26,\n },\n [SIZES.xxxl]: {\n radius: 32,\n },\n }\n\n return (\n <Pressable\n style={({ pressed }) => [styles.pressable, style, pressed && platformPressedOpacityStyle]}\n accessibilityRole=\"button\"\n disabled={disabled || loading}\n accessibilityState={{ busy: loading }}\n accessibilityLabel={accessibilityLabel}\n hitSlop={10}\n android_ripple={{\n color: androidRippleColor,\n borderless: true,\n foreground: true,\n radius: androidRadiusSizeMap[size].radius,\n }}\n {...props}\n >\n {loading && (\n <Spinner\n size={styles.spinner.fontSize}\n maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n />\n )}\n <Icon\n name={name}\n style={[styles.icon, iconStyle, disabled && styles.disabled, loading && styles.loading]}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n </Pressable>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n disabled = false,\n loading = false,\n maxFontSizeMultiplier,\n size = 'md',\n}: Partial<IconButtonProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n const colorOptionMap = useIconButtonColorOptionMap()\n const colorKey = getColorKey({ disabled, loading, appearance })\n\n const sizeStyleMap: SizeStyle = {\n [SIZES.xxxs]: {\n fontSize: 8,\n height: 8 * fontScale,\n },\n [SIZES.xxs]: {\n fontSize: 10,\n height: 10 * fontScale,\n },\n [SIZES.xs]: {\n fontSize: 12,\n height: 12 * fontScale,\n },\n [SIZES.sm]: {\n fontSize: 14,\n height: 14 * fontScale,\n },\n [SIZES.md]: {\n fontSize: 16,\n height: 16 * fontScale,\n },\n [SIZES.lg]: {\n fontSize: 20,\n height: 20 * fontScale,\n },\n [SIZES.xl]: {\n fontSize: 24,\n height: 24 * fontScale,\n },\n [SIZES.xxl]: {\n fontSize: 32,\n height: 32 * fontScale,\n },\n [SIZES.xxxl]: {\n fontSize: 40,\n height: 40 * fontScale,\n },\n }\n\n return StyleSheet.create({\n pressable: {\n alignItems: 'center',\n justifyContent: 'center',\n height: sizeStyleMap[size].height,\n },\n icon: {\n fontSize: sizeStyleMap[size].fontSize,\n color: colorOptionMap[colorKey],\n },\n disabled: {\n color: colors.iconColorDefaultDisabled,\n },\n loading: {\n opacity: 0,\n },\n spinner: {\n fontSize: sizeStyleMap[size].fontSize,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"icon_button.js","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, type StyleProp } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport { Icon } from './icon'\nimport type { IconProps, IconString } from './icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { Spinner } from './spinner'\nimport { getColorKey, useIconButtonColorOptionMap } from './utils/button_colors'\nimport type { IconButtonAppearanceUnion } from './utils/button_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n xxxs: 'xxxs',\n xxs: 'xxs',\n xs: 'xs',\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n xl: 'xl',\n xxl: 'xxl',\n xxxl: 'xxxl',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n SizeUnion,\n {\n fontSize: number\n height: number\n }\n>\ntype AndroidRadiusSize = Record<\n SizeUnion,\n {\n radius: number\n }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface IconButtonProps extends PressableProps {\n /**\n * Provides context to screen readers about what the button does.\n * This is required as Icons don't inherently provide non-visual context like text does.\n */\n accessibilityLabel: string\n /**\n * Updates the icon's colors. Defaults to 'neutral'.\n */\n appearance?: IconButtonAppearanceUnion\n /**\n * Styles the icon itself.\n * `fontSize` allows for a custom size that also responds to the device's text scale.\n * `color` changes the color of the icon.\n */\n iconStyle?: IconProps['style']\n /**\n * Disables the button and replaces its content with a spinner\n */\n loading?: boolean\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Generates an icon from `@planningcenter/icons`\n */\n name: IconString\n /**\n * Changes the overall size of the button and its contents\n */\n size?: SizeUnion\n /**\n * Styles the `Pressable` wrapper\n */\n style?: StyleProp<ViewStyle>\n}\n\nexport function IconButton({\n accessibilityLabel,\n appearance = 'neutral',\n disabled = false,\n iconStyle,\n loading,\n maxFontSizeMultiplier,\n name,\n size = 'md',\n style,\n ...props\n}: IconButtonProps) {\n const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size })\n const colorOptionMap = useIconButtonColorOptionMap()\n const colorKey = getColorKey({ disabled, loading, appearance })\n\n const { color = colorOptionMap[colorKey] } = StyleSheet.flatten(iconStyle || {})\n const androidRippleColor = useCreateAndroidRippleColor({ color: color })\n\n const androidRadiusSizeMap: AndroidRadiusSize = {\n [SIZES.xxxs]: {\n radius: 8,\n },\n [SIZES.xxs]: {\n radius: 10,\n },\n [SIZES.xs]: {\n radius: 12,\n },\n [SIZES.sm]: {\n radius: 14,\n },\n [SIZES.md]: {\n radius: 16,\n },\n [SIZES.lg]: {\n radius: 18,\n },\n [SIZES.xl]: {\n radius: 20,\n },\n [SIZES.xxl]: {\n radius: 26,\n },\n [SIZES.xxxl]: {\n radius: 32,\n },\n }\n\n return (\n <Pressable\n style={({ pressed }) => [styles.pressable, style, pressed && platformPressedOpacityStyle]}\n accessibilityRole=\"button\"\n disabled={disabled || loading}\n accessibilityState={{ busy: loading }}\n accessibilityLabel={accessibilityLabel}\n hitSlop={10}\n android_ripple={{\n color: androidRippleColor,\n borderless: true,\n foreground: true,\n radius: androidRadiusSizeMap[size].radius,\n }}\n {...props}\n >\n {loading && (\n <Spinner\n size={styles.spinner.fontSize}\n maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n />\n )}\n <Icon\n name={name}\n style={[styles.icon, iconStyle, disabled && styles.disabled, loading && styles.loading]}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n </Pressable>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n disabled = false,\n loading = false,\n maxFontSizeMultiplier,\n size = 'md',\n}: Partial<IconButtonProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n const colorOptionMap = useIconButtonColorOptionMap()\n const colorKey = getColorKey({ disabled, loading, appearance })\n\n const sizeStyleMap: SizeStyle = {\n [SIZES.xxxs]: {\n fontSize: 8,\n height: 8 * fontScale,\n },\n [SIZES.xxs]: {\n fontSize: 10,\n height: 10 * fontScale,\n },\n [SIZES.xs]: {\n fontSize: 12,\n height: 12 * fontScale,\n },\n [SIZES.sm]: {\n fontSize: 14,\n height: 14 * fontScale,\n },\n [SIZES.md]: {\n fontSize: 16,\n height: 16 * fontScale,\n },\n [SIZES.lg]: {\n fontSize: 20,\n height: 20 * fontScale,\n },\n [SIZES.xl]: {\n fontSize: 24,\n height: 24 * fontScale,\n },\n [SIZES.xxl]: {\n fontSize: 32,\n height: 32 * fontScale,\n },\n [SIZES.xxxl]: {\n fontSize: 40,\n height: 40 * fontScale,\n },\n }\n\n return StyleSheet.create({\n pressable: {\n alignItems: 'center',\n justifyContent: 'center',\n height: sizeStyleMap[size].height,\n },\n icon: {\n fontSize: sizeStyleMap[size].fontSize,\n color: colorOptionMap[colorKey],\n },\n disabled: {\n color: colors.iconColorDefaultDisabled,\n },\n loading: {\n opacity: 0,\n },\n spinner: {\n fontSize: sizeStyleMap[size].fontSize,\n },\n })\n}\n"]}
package/build/screens/send_giphy_screen.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { StaticScreenProps } from '@react-navigation/native';
2
- import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
3
2
  import React from 'react';
4
- export declare const SendGiphyScreenOptions: NativeStackNavigationOptions;
3
+ export declare const SendGiphyScreenOptions: import("@react-navigation/native-stack").NativeStackNavigationOptions;
5
4
  export type SendGiphyScreenProps = StaticScreenProps<{
6
5
  conversation_id: number;
7
6
  search_term: string;
package/build/screens/send_giphy_screen.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"send_giphy_screen.d.ts","sourceRoot":"","sources":["../../src/screens/send_giphy_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AACzF,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,eAAO,MAAM,sBAAsB,EAAE,4BAMpC,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAC,CAAA;AAEF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,4BAiG9D"}
1
+ {"version":3,"file":"send_giphy_screen.d.ts","sourceRoot":"","sources":["../../src/screens/send_giphy_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AACzF,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,eAAO,MAAM,sBAAsB,uEAGjC,CAAA;AAEF,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAC,CAAA;AAEF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,4BAiG9D"}
package/build/screens/send_giphy_screen.js CHANGED
@@ -1,20 +1,17 @@
1
1
  import { StackActions, useNavigation } from '@react-navigation/native';
2
2
  import React from 'react';
3
- import { Image as NativeImage, StyleSheet, useWindowDimensions, View } from 'react-native';
4
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
5
- import { useTheme } from '../hooks';
3
+ import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
6
4
  import { useGiphy } from '../hooks/use_giphy';
7
- import { Button, IconButton } from '../components';
8
- import { MAX_FONT_SIZE_MULTIPLIER } from '../utils';
5
+ import { Button, IconButton, TextButton } from '../components';
9
6
  import { DefaultLoading } from '../components/page/loading';
10
7
  import { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update';
11
- export const SendGiphyScreenOptions = {
12
- presentation: 'formSheet',
13
- headerShown: false,
14
- sheetAllowedDetents: [0.75],
15
- sheetGrabberVisible: true,
16
- sheetCornerRadius: 16,
17
- };
8
+ import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet';
9
+ import { useCreateAndroidRippleColor, useTheme } from '../hooks';
10
+ import { tokens } from '../vendor/tapestry/tokens';
11
+ export const SendGiphyScreenOptions = getFormSheetScreenOptions({
12
+ headerTitle: 'Send Giphy',
13
+ sheetAllowedDetents: Platform.select({ android: [0.7, 0.94], default: [0.7, 1] }),
14
+ });
18
15
  export function SendGiphyScreen({ route }) {
19
16
  const { conversation_id, search_term } = route.params;
20
17
  const styles = useStyles();
@@ -50,51 +47,82 @@ export function SendGiphyScreen({ route }) {
50
47
  mutate({ text: '', attachments: [result] });
51
48
  goBack({ clearInput: true });
52
49
  }
53
- return (<View style={styles.container}>
54
- <NativeImage alt="Powered by Giphy" style={styles.powered_by_giphy} source={{ uri: poweredByGiphyImage }}/>
55
- <View style={styles.control_stack}>
56
- <View style={styles.button_group}>
57
- <IconButton name="general.leftArrow" accessibilityLabel={'Previous GIF'} size="md" appearance="neutral" onPress={prevResult} disabled={disabled}/>
58
- <IconButton name="general.rightArrow" accessibilityLabel={'Next GIF'} size="md" appearance="neutral" onPress={nextResult} disabled={disabled}/>
50
+ return (<FormSheet.Root contentStyle={styles.container}>
51
+ <View style={styles.poweredByGiphyContainer}>
52
+ <NativeImage alt="Powered by Giphy" style={styles.poweredByGiphyImage} source={{ uri: poweredByGiphyImage }}/>
53
+ </View>
54
+ <View style={styles.controlToolbar} accessibilityRole="toolbar">
55
+ <View style={styles.paginateButtonGroup}>
56
+ <PaginateButton name="general.leftArrow" accessibilityLabel="Previous Giphy" onPress={prevResult} disabled={disabled}/>
57
+ <PaginateButton name="general.rightArrow" accessibilityLabel="Next GIF" onPress={nextResult} disabled={disabled}/>
59
58
  </View>
60
- <View style={styles.button_group}>
61
- <Button onPress={() => goBack({ clearInput: false })} title="Cancel" variant="outline" size="sm" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
62
- <Button onPress={sendGiphy} title="Send" size="sm" disabled={disabled} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
59
+ <View style={styles.formButtonGroup}>
60
+ <TextButton onPress={() => goBack({ clearInput: false })} maxFontSizeMultiplier={1} accessibilityHint="Cancels the Giphy selection and closes this modal.">
61
+ Cancel
62
+ </TextButton>
63
+ <Button onPress={sendGiphy} title="Send" size="lg" disabled={disabled} maxFontSizeMultiplier={1} accessibilityLabel="Send Giphy" accessibilityHint="Sends the selected Giphy as a message to the conversation."/>
63
64
  </View>
64
65
  </View>
65
66
  {isSearching ? (<DefaultLoading />) : (<NativeImage source={{ uri: url }} alt={result.title} style={[styles.image, { width: size, height: size }]}/>)}
66
- </View>);
67
+ </FormSheet.Root>);
68
+ }
69
+ function PaginateButton({ name, accessibilityLabel, onPress, disabled }) {
70
+ const styles = useStyles();
71
+ const { colors } = useTheme();
72
+ const androidRippleColor = useCreateAndroidRippleColor({ color: colors.interaction });
73
+ return (<IconButton name={name} accessibilityLabel={accessibilityLabel} size="md" appearance="interaction" onPress={onPress} disabled={disabled} style={[styles.paginateButton, disabled && styles.paginateButtonDisabled]} android_ripple={{
74
+ color: androidRippleColor,
75
+ borderless: true,
76
+ foreground: true,
77
+ }} maxFontSizeMultiplier={1}/>);
67
78
  }
68
79
  const useStyles = () => {
69
- const theme = useTheme();
70
- const { height } = useWindowDimensions();
71
- const { bottom } = useSafeAreaInsets();
80
+ const { colors } = useTheme();
72
81
  return StyleSheet.create({
73
82
  container: {
74
- justifyContent: 'flex-start',
75
- paddingTop: 24,
76
- paddingHorizontal: 12,
77
- paddingBottom: bottom,
78
- width: '100%',
79
- backgroundColor: theme.colors.fillColorNeutral100Inverted,
80
- height,
81
- gap: 12,
83
+ paddingTop: Platform.select({ android: 24, default: 32 }),
84
+ paddingHorizontal: 16,
85
+ gap: 8,
86
+ },
87
+ poweredByGiphyContainer: {
88
+ alignSelf: 'flex-start',
89
+ padding: 4,
90
+ borderRadius: 4,
91
+ backgroundColor: colors.name === 'dark' ? tokens.colorNeutral68 : 'transparent',
82
92
  },
83
- powered_by_giphy: {
84
- width: 200,
85
- height: 22,
93
+ poweredByGiphyImage: {
94
+ width: 170,
95
+ height: 20,
86
96
  },
87
- control_stack: {
97
+ controlToolbar: {
88
98
  flexDirection: 'row',
89
99
  justifyContent: 'space-between',
90
100
  alignItems: 'center',
91
101
  },
92
- button_group: {
102
+ formButtonGroup: {
93
103
  flexDirection: 'row',
94
- gap: 12,
104
+ alignItems: 'center',
105
+ gap: 16,
106
+ },
107
+ paginateButtonGroup: {
108
+ flexDirection: 'row',
109
+ gap: 8,
110
+ },
111
+ paginateButton: {
112
+ borderColor: colors.interaction,
113
+ borderWidth: 1,
114
+ height: 28,
115
+ paddingHorizontal: 12,
116
+ borderRadius: 16,
117
+ overflow: 'hidden',
118
+ },
119
+ paginateButtonDisabled: {
120
+ backgroundColor: colors.fillColorButtonNeutralSolidDisabled,
121
+ borderColor: colors.fillColorButtonNeutralSolidDisabled,
95
122
  },
96
123
  image: {
97
124
  borderRadius: 8,
125
+ maxWidth: '100%',
98
126
  },
99
127
  });
100
128
  };
package/build/screens/send_giphy_screen.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"send_giphy_screen.js","sourceRoot":"","sources":["../../src/screens/send_giphy_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React from 'react'\nimport { Image as NativeImage, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../hooks'\nimport { useGiphy } from '../hooks/use_giphy'\nimport { Button, IconButton } from '../components'\nimport { MAX_FONT_SIZE_MULTIPLIER } from '../utils'\nimport { DefaultLoading } from '../components/page/loading'\nimport { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'\n\nexport const SendGiphyScreenOptions: NativeStackNavigationOptions = {\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents: [0.75],\n sheetGrabberVisible: true,\n sheetCornerRadius: 16,\n}\n\nexport type SendGiphyScreenProps = StaticScreenProps<{\n conversation_id: number\n search_term: string\n}>\n\nexport function SendGiphyScreen({ route }: SendGiphyScreenProps) {\n const { conversation_id, search_term } = route.params\n const styles = useStyles()\n const navigation = useNavigation()\n\n const { isPending, mutate } = useMessageCreateOrUpdate({\n conversationId: conversation_id,\n })\n const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)\n const disabled = isPending || isSearching\n\n const { width } = useWindowDimensions()\n const size = width - 24\n\n if (!result) return null\n\n const gif = result.giphy.fixed_width\n const { url } = gif\n\n function goBack({ clearInput = false }) {\n if (clearInput) {\n const routes = navigation.getState()?.routes || []\n const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}\n\n navigation.dispatch(\n StackActions.popTo('Conversation', {\n ...conversationParams,\n conversation_id,\n clear_input: true,\n })\n )\n } else {\n navigation.goBack()\n }\n }\n\n function sendGiphy() {\n if (disabled) return\n\n mutate({ text: '', attachments: [result] })\n goBack({ clearInput: true })\n }\n\n return (\n <View style={styles.container}>\n <NativeImage\n alt=\"Powered by Giphy\"\n style={styles.powered_by_giphy}\n source={{ uri: poweredByGiphyImage }}\n />\n <View style={styles.control_stack}>\n <View style={styles.button_group}>\n <IconButton\n name=\"general.leftArrow\"\n accessibilityLabel={'Previous GIF'}\n size=\"md\"\n appearance=\"neutral\"\n onPress={prevResult}\n disabled={disabled}\n />\n <IconButton\n name=\"general.rightArrow\"\n accessibilityLabel={'Next GIF'}\n size=\"md\"\n appearance=\"neutral\"\n onPress={nextResult}\n disabled={disabled}\n />\n </View>\n <View style={styles.button_group}>\n <Button\n onPress={() => goBack({ clearInput: false })}\n title=\"Cancel\"\n variant=\"outline\"\n size=\"sm\"\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n <Button\n onPress={sendGiphy}\n title=\"Send\"\n size=\"sm\"\n disabled={disabled}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n </View>\n </View>\n {isSearching ? (\n <DefaultLoading />\n ) : (\n <NativeImage\n source={{ uri: url }}\n alt={result.title}\n style={[styles.image, { width: size, height: size }]}\n />\n )}\n </View>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n const { height } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n\n return StyleSheet.create({\n container: {\n justifyContent: 'flex-start',\n paddingTop: 24,\n paddingHorizontal: 12,\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: theme.colors.fillColorNeutral100Inverted,\n height,\n gap: 12,\n },\n powered_by_giphy: {\n width: 200,\n height: 22,\n },\n control_stack: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n button_group: {\n flexDirection: 'row',\n gap: 12,\n },\n image: {\n borderRadius: 8,\n },\n })\n}\n\nconst poweredByGiphyImage = `data:image/png;base64,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`\n"]}
1
+ {"version":3,"file":"send_giphy_screen.js","sourceRoot":"","sources":["../../src/screens/send_giphy_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useGiphy } from '../hooks/use_giphy'\nimport { Button, IconButton, IconString, TextButton } from '../components'\nimport { DefaultLoading } from '../components/page/loading'\nimport { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'\nimport FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'\nimport { useCreateAndroidRippleColor, useTheme } from '../hooks'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const SendGiphyScreenOptions = getFormSheetScreenOptions({\n headerTitle: 'Send Giphy',\n sheetAllowedDetents: Platform.select({ android: [0.7, 0.94], default: [0.7, 1] }),\n})\n\nexport type SendGiphyScreenProps = StaticScreenProps<{\n conversation_id: number\n search_term: string\n}>\n\nexport function SendGiphyScreen({ route }: SendGiphyScreenProps) {\n const { conversation_id, search_term } = route.params\n const styles = useStyles()\n const navigation = useNavigation()\n\n const { isPending, mutate } = useMessageCreateOrUpdate({\n conversationId: conversation_id,\n })\n const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)\n const disabled = isPending || isSearching\n\n const { width } = useWindowDimensions()\n const size = width - 24\n\n if (!result) return null\n\n const gif = result.giphy.fixed_width\n const { url } = gif\n\n function goBack({ clearInput = false }) {\n if (clearInput) {\n const routes = navigation.getState()?.routes || []\n const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}\n\n navigation.dispatch(\n StackActions.popTo('Conversation', {\n ...conversationParams,\n conversation_id,\n clear_input: true,\n })\n )\n } else {\n navigation.goBack()\n }\n }\n\n function sendGiphy() {\n if (disabled) return\n\n mutate({ text: '', attachments: [result] })\n goBack({ clearInput: true })\n }\n\n return (\n <FormSheet.Root contentStyle={styles.container}>\n <View style={styles.poweredByGiphyContainer}>\n <NativeImage\n alt=\"Powered by Giphy\"\n style={styles.poweredByGiphyImage}\n source={{ uri: poweredByGiphyImage }}\n />\n </View>\n <View style={styles.controlToolbar} accessibilityRole=\"toolbar\">\n <View style={styles.paginateButtonGroup}>\n <PaginateButton\n name=\"general.leftArrow\"\n accessibilityLabel=\"Previous Giphy\"\n onPress={prevResult}\n disabled={disabled}\n />\n <PaginateButton\n name=\"general.rightArrow\"\n accessibilityLabel=\"Next GIF\"\n onPress={nextResult}\n disabled={disabled}\n />\n </View>\n <View style={styles.formButtonGroup}>\n <TextButton\n onPress={() => goBack({ clearInput: false })}\n maxFontSizeMultiplier={1}\n accessibilityHint=\"Cancels the Giphy selection and closes this modal.\"\n >\n Cancel\n </TextButton>\n <Button\n onPress={sendGiphy}\n title=\"Send\"\n size=\"lg\"\n disabled={disabled}\n maxFontSizeMultiplier={1}\n accessibilityLabel=\"Send Giphy\"\n accessibilityHint=\"Sends the selected Giphy as a message to the conversation.\"\n />\n </View>\n </View>\n {isSearching ? (\n <DefaultLoading />\n ) : (\n <NativeImage\n source={{ uri: url }}\n alt={result.title}\n style={[styles.image, { width: size, height: size }]}\n />\n )}\n </FormSheet.Root>\n )\n}\n\ninterface PaginateButtonProps {\n name: IconString\n accessibilityLabel: string\n onPress: () => void\n disabled: boolean\n}\n\nfunction PaginateButton({ name, accessibilityLabel, onPress, disabled }: PaginateButtonProps) {\n const styles = useStyles()\n const { colors } = useTheme()\n const androidRippleColor = useCreateAndroidRippleColor({ color: colors.interaction })\n\n return (\n <IconButton\n name={name}\n accessibilityLabel={accessibilityLabel}\n size=\"md\"\n appearance=\"interaction\"\n onPress={onPress}\n disabled={disabled}\n style={[styles.paginateButton, disabled && styles.paginateButtonDisabled]}\n android_ripple={{\n color: androidRippleColor,\n borderless: true,\n foreground: true,\n }}\n maxFontSizeMultiplier={1}\n />\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n paddingTop: Platform.select({ android: 24, default: 32 }),\n paddingHorizontal: 16,\n gap: 8,\n },\n poweredByGiphyContainer: {\n alignSelf: 'flex-start',\n padding: 4,\n borderRadius: 4,\n backgroundColor: colors.name === 'dark' ? tokens.colorNeutral68 : 'transparent',\n },\n poweredByGiphyImage: {\n width: 170,\n height: 20,\n },\n controlToolbar: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n formButtonGroup: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 16,\n },\n paginateButtonGroup: {\n flexDirection: 'row',\n gap: 8,\n },\n paginateButton: {\n borderColor: colors.interaction,\n borderWidth: 1,\n height: 28,\n paddingHorizontal: 12,\n borderRadius: 16,\n overflow: 'hidden',\n },\n paginateButtonDisabled: {\n backgroundColor: colors.fillColorButtonNeutralSolidDisabled,\n borderColor: colors.fillColorButtonNeutralSolidDisabled,\n },\n image: {\n borderRadius: 8,\n maxWidth: '100%',\n },\n })\n}\n\nconst poweredByGiphyImage = `data:image/png;base64,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`\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/chat-react-native",
3
- "version": "3.9.0-rc.3",
3
+ "version": "3.9.0-rc.4",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
55
55
  "prettier": "^3.4.2",
56
56
  "typescript": "<5.6.0"
57
57
  },
58
- "gitHead": "e7279466ebb3713b38806f9199760187e45cf8ed"
58
+ "gitHead": "f2307cc15b815e5c9c3e0586e4246eff25a12d23"
59
59
  }
package/src/components/display/icon_button.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Pressable, StyleSheet } from 'react-native'
2
+ import { Pressable, StyleSheet, type StyleProp } from 'react-native'
3
3
  import type { PressableProps, ViewStyle } from 'react-native'
4
4
  import { Icon } from './icon'
5
5
  import type { IconProps, IconString } from './icon'
@@ -79,7 +79,7 @@ interface IconButtonProps extends PressableProps {
79
79
  /**
80
80
  * Styles the `Pressable` wrapper
81
81
  */
82
- style?: ViewStyle
82
+ style?: StyleProp<ViewStyle>
83
83
  }
84
84
 
85
85
  export function IconButton({
package/src/screens/send_giphy_screen.tsx CHANGED
@@ -1,22 +1,18 @@
1
1
  import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
2
- import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
3
2
  import React from 'react'
4
- import { Image as NativeImage, StyleSheet, useWindowDimensions, View } from 'react-native'
5
- import { useSafeAreaInsets } from 'react-native-safe-area-context'
6
- import { useTheme } from '../hooks'
3
+ import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
7
4
  import { useGiphy } from '../hooks/use_giphy'
8
- import { Button, IconButton } from '../components'
9
- import { MAX_FONT_SIZE_MULTIPLIER } from '../utils'
5
+ import { Button, IconButton, IconString, TextButton } from '../components'
10
6
  import { DefaultLoading } from '../components/page/loading'
11
7
  import { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'
8
+ import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
9
+ import { useCreateAndroidRippleColor, useTheme } from '../hooks'
10
+ import { tokens } from '../vendor/tapestry/tokens'
12
11
 
13
- export const SendGiphyScreenOptions: NativeStackNavigationOptions = {
14
- presentation: 'formSheet',
15
- headerShown: false,
16
- sheetAllowedDetents: [0.75],
17
- sheetGrabberVisible: true,
18
- sheetCornerRadius: 16,
19
- }
12
+ export const SendGiphyScreenOptions = getFormSheetScreenOptions({
13
+ headerTitle: 'Send Giphy',
14
+ sheetAllowedDetents: Platform.select({ android: [0.7, 0.94], default: [0.7, 1] }),
15
+ })
20
16
 
21
17
  export type SendGiphyScreenProps = StaticScreenProps<{
22
18
  conversation_id: number
@@ -67,45 +63,45 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
67
63
  }
68
64
 
69
65
  return (
70
- <View style={styles.container}>
71
- <NativeImage
72
- alt="Powered by Giphy"
73
- style={styles.powered_by_giphy}
74
- source={{ uri: poweredByGiphyImage }}
75
- />
76
- <View style={styles.control_stack}>
77
- <View style={styles.button_group}>
78
- <IconButton
66
+ <FormSheet.Root contentStyle={styles.container}>
67
+ <View style={styles.poweredByGiphyContainer}>
68
+ <NativeImage
69
+ alt="Powered by Giphy"
70
+ style={styles.poweredByGiphyImage}
71
+ source={{ uri: poweredByGiphyImage }}
72
+ />
73
+ </View>
74
+ <View style={styles.controlToolbar} accessibilityRole="toolbar">
75
+ <View style={styles.paginateButtonGroup}>
76
+ <PaginateButton
79
77
  name="general.leftArrow"
80
- accessibilityLabel={'Previous GIF'}
81
- size="md"
82
- appearance="neutral"
78
+ accessibilityLabel="Previous Giphy"
83
79
  onPress={prevResult}
84
80
  disabled={disabled}
85
81
  />
86
- <IconButton
82
+ <PaginateButton
87
83
  name="general.rightArrow"
88
- accessibilityLabel={'Next GIF'}
89
- size="md"
90
- appearance="neutral"
84
+ accessibilityLabel="Next GIF"
91
85
  onPress={nextResult}
92
86
  disabled={disabled}
93
87
  />
94
88
  </View>
95
- <View style={styles.button_group}>
96
- <Button
89
+ <View style={styles.formButtonGroup}>
90
+ <TextButton
97
91
  onPress={() => goBack({ clearInput: false })}
98
- title="Cancel"
99
- variant="outline"
100
- size="sm"
101
- maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
102
- />
92
+ maxFontSizeMultiplier={1}
93
+ accessibilityHint="Cancels the Giphy selection and closes this modal."
94
+ >
95
+ Cancel
96
+ </TextButton>
103
97
  <Button
104
98
  onPress={sendGiphy}
105
99
  title="Send"
106
- size="sm"
100
+ size="lg"
107
101
  disabled={disabled}
108
- maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
102
+ maxFontSizeMultiplier={1}
103
+ accessibilityLabel="Send Giphy"
104
+ accessibilityHint="Sends the selected Giphy as a message to the conversation."
109
105
  />
110
106
  </View>
111
107
  </View>
@@ -118,41 +114,89 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
118
114
  style={[styles.image, { width: size, height: size }]}
119
115
  />
120
116
  )}
121
- </View>
117
+ </FormSheet.Root>
118
+ )
119
+ }
120
+
121
+ interface PaginateButtonProps {
122
+ name: IconString
123
+ accessibilityLabel: string
124
+ onPress: () => void
125
+ disabled: boolean
126
+ }
127
+
128
+ function PaginateButton({ name, accessibilityLabel, onPress, disabled }: PaginateButtonProps) {
129
+ const styles = useStyles()
130
+ const { colors } = useTheme()
131
+ const androidRippleColor = useCreateAndroidRippleColor({ color: colors.interaction })
132
+
133
+ return (
134
+ <IconButton
135
+ name={name}
136
+ accessibilityLabel={accessibilityLabel}
137
+ size="md"
138
+ appearance="interaction"
139
+ onPress={onPress}
140
+ disabled={disabled}
141
+ style={[styles.paginateButton, disabled && styles.paginateButtonDisabled]}
142
+ android_ripple={{
143
+ color: androidRippleColor,
144
+ borderless: true,
145
+ foreground: true,
146
+ }}
147
+ maxFontSizeMultiplier={1}
148
+ />
122
149
  )
123
150
  }
124
151
 
125
152
  const useStyles = () => {
126
- const theme = useTheme()
127
- const { height } = useWindowDimensions()
128
- const { bottom } = useSafeAreaInsets()
153
+ const { colors } = useTheme()
129
154
 
130
155
  return StyleSheet.create({
131
156
  container: {
132
- justifyContent: 'flex-start',
133
- paddingTop: 24,
134
- paddingHorizontal: 12,
135
- paddingBottom: bottom,
136
- width: '100%',
137
- backgroundColor: theme.colors.fillColorNeutral100Inverted,
138
- height,
139
- gap: 12,
157
+ paddingTop: Platform.select({ android: 24, default: 32 }),
158
+ paddingHorizontal: 16,
159
+ gap: 8,
160
+ },
161
+ poweredByGiphyContainer: {
162
+ alignSelf: 'flex-start',
163
+ padding: 4,
164
+ borderRadius: 4,
165
+ backgroundColor: colors.name === 'dark' ? tokens.colorNeutral68 : 'transparent',
140
166
  },
141
- powered_by_giphy: {
142
- width: 200,
143
- height: 22,
167
+ poweredByGiphyImage: {
168
+ width: 170,
169
+ height: 20,
144
170
  },
145
- control_stack: {
171
+ controlToolbar: {
146
172
  flexDirection: 'row',
147
173
  justifyContent: 'space-between',
148
174
  alignItems: 'center',
149
175
  },
150
- button_group: {
176
+ formButtonGroup: {
151
177
  flexDirection: 'row',
152
- gap: 12,
178
+ alignItems: 'center',
179
+ gap: 16,
180
+ },
181
+ paginateButtonGroup: {
182
+ flexDirection: 'row',
183
+ gap: 8,
184
+ },
185
+ paginateButton: {
186
+ borderColor: colors.interaction,
187
+ borderWidth: 1,
188
+ height: 28,
189
+ paddingHorizontal: 12,
190
+ borderRadius: 16,
191
+ overflow: 'hidden',
192
+ },
193
+ paginateButtonDisabled: {
194
+ backgroundColor: colors.fillColorButtonNeutralSolidDisabled,
195
+ borderColor: colors.fillColorButtonNeutralSolidDisabled,
153
196
  },
154
197
  image: {
155
198
  borderRadius: 8,
199
+ maxWidth: '100%',
156
200
  },
157
201
  })
158
202
  }