@planningcenter/chat-react-native 3.14.0-rc.5 → 3.14.0
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.
- package/build/components/display/action_button.d.ts.map +1 -1
- package/build/components/display/action_button.js +2 -1
- package/build/components/display/action_button.js.map +1 -1
- package/build/components/display/badge.js +5 -5
- package/build/components/display/badge.js.map +1 -1
- package/build/components/display/platform_modal_header_buttons.d.ts +4 -4
- package/build/components/display/platform_modal_header_buttons.d.ts.map +1 -1
- package/build/components/display/platform_modal_header_buttons.js +2 -2
- package/build/components/display/platform_modal_header_buttons.js.map +1 -1
- package/build/components/display/text.d.ts +10 -2
- package/build/components/display/text.d.ts.map +1 -1
- package/build/components/display/text.js +0 -3
- package/build/components/display/text.js.map +1 -1
- package/build/components/display/toggle_button.d.ts.map +1 -1
- package/build/components/display/toggle_button.js +2 -2
- package/build/components/display/toggle_button.js.map +1 -1
- package/build/components/page/error_boundary.d.ts.map +1 -1
- package/build/components/page/error_boundary.js +11 -46
- package/build/components/page/error_boundary.js.map +1 -1
- package/build/components/primitive/avatar_primitive.d.ts.map +1 -1
- package/build/components/primitive/avatar_primitive.js +14 -6
- package/build/components/primitive/avatar_primitive.js.map +1 -1
- package/build/components/primitive/blank_state_primitive.d.ts +5 -2
- package/build/components/primitive/blank_state_primitive.d.ts.map +1 -1
- package/build/components/primitive/blank_state_primitive.js +6 -1
- package/build/components/primitive/blank_state_primitive.js.map +1 -1
- package/build/navigation/index.d.ts.map +1 -1
- package/build/navigation/index.js +6 -6
- package/build/navigation/index.js.map +1 -1
- package/build/screens/bug_report_screen.js +4 -4
- package/build/screens/bug_report_screen.js.map +1 -1
- package/build/screens/conversation_details_screen.d.ts.map +1 -1
- package/build/screens/conversation_details_screen.js +3 -3
- package/build/screens/conversation_details_screen.js.map +1 -1
- package/build/screens/conversation_new/components/filter_by_plan.js +2 -2
- package/build/screens/conversation_new/components/filter_by_plan.js.map +1 -1
- package/build/screens/conversations/components/list_header_component.d.ts.map +1 -1
- package/build/screens/conversations/components/list_header_component.js +2 -1
- package/build/screens/conversations/components/list_header_component.js.map +1 -1
- package/build/screens/conversations/conversations_screen.d.ts.map +1 -1
- package/build/screens/conversations/conversations_screen.js +2 -2
- package/build/screens/conversations/conversations_screen.js.map +1 -1
- package/build/utils/styles.d.ts +1 -0
- package/build/utils/styles.d.ts.map +1 -1
- package/build/utils/styles.js +1 -0
- package/build/utils/styles.js.map +1 -1
- package/package.json +2 -2
- package/src/components/display/action_button.tsx +2 -0
- package/src/components/display/badge.tsx +5 -5
- package/src/components/display/platform_modal_header_buttons.tsx +6 -6
- package/src/components/display/text.tsx +30 -2
- package/src/components/display/toggle_button.tsx +6 -2
- package/src/components/page/error_boundary.tsx +16 -47
- package/src/components/primitive/avatar_primitive.tsx +14 -6
- package/src/components/primitive/blank_state_primitive.tsx +17 -0
- package/src/navigation/index.tsx +6 -6
- package/src/screens/bug_report_screen.tsx +5 -5
- package/src/screens/conversation_details_screen.tsx +13 -4
- package/src/screens/conversation_new/components/filter_by_plan.tsx +2 -2
- package/src/screens/conversations/components/list_header_component.tsx +6 -1
- package/src/screens/conversations/conversations_screen.tsx +6 -2
- package/src/utils/styles.ts +1 -0
- package/build/navigation/header.d.ts +0 -10
- package/build/navigation/header.d.ts.map +0 -1
- package/build/navigation/header.js +0 -16
- package/build/navigation/header.js.map +0 -1
- package/src/navigation/header.tsx +0 -24
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGnC,eAAO,MAAM,YAAY,mGAStB;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,UAAU,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,6BAoCA,CAAA"}
|
|
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
|
|
|
5
5
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
6
|
import { useTheme } from '../../hooks';
|
|
7
7
|
import { Text } from './text';
|
|
8
|
+
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
|
|
8
9
|
export const ActionButton = ({ visible = true, disabled = false, onPress, title, infoText, buttonIconNameLeft, secondaryButton, loading = false, }) => {
|
|
9
10
|
const styles = useStyles();
|
|
10
11
|
const [show, setShow] = useState(visible);
|
|
@@ -22,7 +23,7 @@ export const ActionButton = ({ visible = true, disabled = false, onPress, title,
|
|
|
22
23
|
</Text>)}
|
|
23
24
|
<View style={styles.buttonRow}>
|
|
24
25
|
{secondaryButton}
|
|
25
|
-
<Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} style={secondaryButton ? null : styles.fullWidthButton} iconNameLeft={buttonIconNameLeft} loading={loading}/>
|
|
26
|
+
<Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} style={secondaryButton ? null : styles.fullWidthButton} iconNameLeft={buttonIconNameLeft} loading={loading} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}/>
|
|
26
27
|
</View>
|
|
27
28
|
</Animated.View>);
|
|
28
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport { Animated, LayoutAnimation, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Button } from './button'\nimport { useEffect } from 'react'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { Text } from './text'\nimport { IconString } from './icon'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\n\nexport const ActionButton = ({\n visible = true,\n disabled = false,\n onPress,\n title,\n infoText,\n buttonIconNameLeft,\n secondaryButton,\n loading = false,\n}: {\n visible?: boolean\n disabled?: boolean\n onPress: () => void\n title: string\n infoText?: string\n buttonIconNameLeft?: IconString\n secondaryButton?: React.ReactNode\n loading?: boolean\n}) => {\n const styles = useStyles()\n const [show, setShow] = useState(visible)\n\n useEffect(() => {\n if (show === visible) return\n\n setShow(visible)\n LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)\n }, [show, visible])\n\n if (!visible) return null\n\n return (\n <Animated.View style={styles.container}>\n {Boolean(infoText) && (\n <Text style={styles.infoText} variant=\"footnote\">\n {infoText}\n </Text>\n )}\n <View style={styles.buttonRow}>\n {secondaryButton}\n <Button\n variant=\"fill\"\n size=\"lg\"\n onPress={onPress}\n title={title}\n disabled={disabled}\n style={secondaryButton ? null : styles.fullWidthButton}\n iconNameLeft={buttonIconNameLeft}\n loading={loading}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n />\n </View>\n </Animated.View>\n )\n}\n\nconst SCALE_THAT_BUTTONS_WRAP = 1.2\n\nconst useStyles = () => {\n const { fontScale } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const { colors } = useTheme()\n const containerVerticalPadding = 16\n const isButtonsWrapping = fontScale >= SCALE_THAT_BUTTONS_WRAP\n\n return StyleSheet.create({\n container: {\n backgroundColor: colors.surfaceColor090,\n paddingHorizontal: 24,\n paddingTop: containerVerticalPadding,\n paddingBottom: bottom + containerVerticalPadding,\n borderTopWidth: 1,\n borderTopColor: colors.borderColorDefaultDim,\n gap: 16,\n },\n buttonRow: {\n flexDirection: 'row',\n justifyContent: isButtonsWrapping ? 'center' : 'space-between',\n alignItems: 'center',\n gap: 16,\n flexWrap: 'wrap-reverse',\n },\n fullWidthButton: {\n flexGrow: 1,\n },\n infoText: {\n textAlign: 'center',\n },\n })\n}\n"]}
|
|
@@ -58,9 +58,9 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
|
|
|
58
58
|
const { colors } = useTheme();
|
|
59
59
|
const fontScale = useFontScale({ maxFontSizeMultiplier });
|
|
60
60
|
const statusColorMap = useStatusColorAppearanceMap();
|
|
61
|
-
const badgePaddingHorizontal = 8 * fontScale;
|
|
62
|
-
const badgePaddingVertical = 4 * fontScale;
|
|
63
61
|
const badgeGap = 4 * fontScale;
|
|
62
|
+
const badgePaddingHorizontal = 8;
|
|
63
|
+
const badgePaddingVertical = 4;
|
|
64
64
|
const badgeFontSize = 12;
|
|
65
65
|
const variantStylesMap = {
|
|
66
66
|
default: {
|
|
@@ -70,7 +70,7 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
|
|
|
70
70
|
paddingHorizontal: badgePaddingHorizontal,
|
|
71
71
|
paddingVertical: badgePaddingVertical,
|
|
72
72
|
borderWidth: tokens.borderSizeDefault * fontScale,
|
|
73
|
-
borderRadius: tokens.borderRadiusMd,
|
|
73
|
+
borderRadius: tokens.borderRadiusMd * fontScale,
|
|
74
74
|
textColor: statusColorMap[appearance].text,
|
|
75
75
|
fontWeight: 'normal',
|
|
76
76
|
},
|
|
@@ -81,7 +81,7 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
|
|
|
81
81
|
paddingHorizontal: badgePaddingHorizontal,
|
|
82
82
|
paddingVertical: badgePaddingVertical,
|
|
83
83
|
borderWidth: tokens.borderSizeDefault * fontScale,
|
|
84
|
-
borderRadius: tokens.borderRadiusMd,
|
|
84
|
+
borderRadius: tokens.borderRadiusMd * fontScale,
|
|
85
85
|
textColor: statusColorMap[appearance].text,
|
|
86
86
|
fontWeight: platformFontWeightMedium,
|
|
87
87
|
},
|
|
@@ -100,7 +100,6 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
|
|
|
100
100
|
return StyleSheet.create({
|
|
101
101
|
badgeWrapper: {
|
|
102
102
|
flexDirection: 'row',
|
|
103
|
-
alignItems: 'center',
|
|
104
103
|
justifyContent: 'center',
|
|
105
104
|
alignSelf: 'flex-start',
|
|
106
105
|
borderRadius: variantStylesMap[variant].borderRadius,
|
|
@@ -136,6 +135,7 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
|
|
|
136
135
|
metaLabel: {
|
|
137
136
|
paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
|
|
138
137
|
fontSize: badgeFontSize,
|
|
138
|
+
alignSelf: 'center',
|
|
139
139
|
flexShrink: 1,
|
|
140
140
|
paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
|
|
141
141
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst VARIANTS = {\n default: 'default',\n meta: 'meta',\n metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n VariantUnion,\n {\n backgroundColor: string\n paddingHorizontal: number\n paddingVertical: number\n borderWidth: number\n borderRadius: number\n textColor: string\n gap: number\n metaLabelPaddingLeft: number\n fontWeight: TextStyle['fontWeight']\n }\n>\n\ntype ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n Groups: GroupsLogo,\n groups: GroupsLogo,\n services: ServicesIcon,\n Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n /**\n * Renders the main text.\n */\n label: string\n /**\n * Renders secondary meta text to the right of the label.\n */\n metaLabel?: string\n /**\n * Changes the status color for the badge and icon.\n */\n appearance?: StatusAppearanceUnion\n /**\n * Changes form of the logo to support a meta label and badge\n */\n variant?: VariantUnion\n /**\n * Adds a product logo to the left of the text.\n */\n productLogoName?: ProductLogoName\n /**\n * Shows an icon of the user choice to the left of the text.\n */\n iconName?: IconString\n /**\n * Shows an icon of the user choice to the right of the text.\n */\n iconNameRight?: IconString\n /**\n * Styles badge wrapper.\n */\n style?: ViewStyle\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Callback function when the badge is pressed.\n */\n onPress?: () => void\n}\n\nexport function Badge({\n appearance = 'neutral',\n metaLabel,\n style,\n iconName,\n iconNameRight,\n label,\n productLogoName,\n variant = 'default',\n maxFontSizeMultiplier,\n onPress,\n}: BadgeProps) {\n const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n const { showBadgeProductLogo } = useTheme()\n\n const isMetaSubtle = variant === 'metaSubtle'\n const hasMetaLabel = Boolean(metaLabel)\n\n const showLogo = showBadgeProductLogo && productLogoName\n const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n return (\n <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n <View style={styles.badge}>\n {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n {iconName && <Icon name={iconName} style={styles.icon} />}\n <Text\n variant=\"footnote\"\n style={styles.label}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {badgeLabel}\n </Text>\n {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n </View>\n {hasMetaLabel && (\n <Text\n variant=\"footnote\"\n style={styles.metaLabel}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {metaLabel}\n </Text>\n )}\n </BadgeWrapper>\n )\n}\n\nconst BadgeWrapper = ({\n children,\n onPress,\n accessibilityRole,\n ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n if (onPress) {\n return (\n <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n {children}\n </Pressable>\n )\n }\n\n return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n maxFontSizeMultiplier,\n variant = 'default',\n}: Partial<BadgeProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const statusColorMap = useStatusColorAppearanceMap()\n\n const badgePaddingHorizontal = 8 * fontScale\n const badgePaddingVertical = 4 * fontScale\n const badgeGap = 4 * fontScale\n const badgeFontSize = 12\n\n const variantStylesMap: VariantStyles = {\n default: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd,\n textColor: statusColorMap[appearance].text,\n fontWeight: 'normal',\n },\n meta: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd,\n textColor: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n },\n metaSubtle: {\n gap: badgeGap,\n backgroundColor: 'transparent',\n metaLabelPaddingLeft: badgeGap,\n paddingHorizontal: 0,\n paddingVertical: 0,\n borderWidth: 0,\n borderRadius: 0,\n textColor: colors.textColorDefaultSecondary,\n fontWeight: platformFontWeightMedium,\n },\n }\n\n return StyleSheet.create({\n badgeWrapper: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n borderRadius: variantStylesMap[variant].borderRadius,\n borderWidth: variantStylesMap[variant].borderWidth,\n borderColor: statusColorMap[appearance].background,\n },\n badge: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: variantStylesMap[variant].gap,\n paddingVertical: variantStylesMap[variant].paddingVertical,\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n backgroundColor: variantStylesMap[variant].backgroundColor,\n borderRadius: variantStylesMap[variant].borderRadius - 2,\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize,\n },\n iconRight: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize - 2,\n },\n logo: {\n fontSize: badgeFontSize * fontScale,\n },\n label: {\n color: variantStylesMap[variant].textColor,\n fontWeight: variantStylesMap[variant].fontWeight,\n fontSize: badgeFontSize,\n flexShrink: 1,\n },\n metaLabel: {\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n fontSize: badgeFontSize,\n flexShrink: 1,\n paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n },\n })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n fill=\"url(#paint0_linear_2632_26363)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_26363\"\n x1={-5.6338}\n y1={5.6338}\n x2={5.6338}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#FF962D\" />\n <Stop offset={1} stopColor=\"#FC7638\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n fill=\"url(#paint0_linear_2632_56586)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_56586\"\n x1={-5.51759}\n y1={5.6338}\n x2={5.75001}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#6BB23D\" />\n <Stop offset={1} stopColor=\"#659630\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n"]}
|
|
1
|
+
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst VARIANTS = {\n default: 'default',\n meta: 'meta',\n metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n VariantUnion,\n {\n backgroundColor: string\n paddingHorizontal: number\n paddingVertical: number\n borderWidth: number\n borderRadius: number\n textColor: string\n gap: number\n metaLabelPaddingLeft: number\n fontWeight: TextStyle['fontWeight']\n }\n>\n\ntype ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n Groups: GroupsLogo,\n groups: GroupsLogo,\n services: ServicesIcon,\n Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n /**\n * Renders the main text.\n */\n label: string\n /**\n * Renders secondary meta text to the right of the label.\n */\n metaLabel?: string\n /**\n * Changes the status color for the badge and icon.\n */\n appearance?: StatusAppearanceUnion\n /**\n * Changes form of the logo to support a meta label and badge\n */\n variant?: VariantUnion\n /**\n * Adds a product logo to the left of the text.\n */\n productLogoName?: ProductLogoName\n /**\n * Shows an icon of the user choice to the left of the text.\n */\n iconName?: IconString\n /**\n * Shows an icon of the user choice to the right of the text.\n */\n iconNameRight?: IconString\n /**\n * Styles badge wrapper.\n */\n style?: ViewStyle\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Callback function when the badge is pressed.\n */\n onPress?: () => void\n}\n\nexport function Badge({\n appearance = 'neutral',\n metaLabel,\n style,\n iconName,\n iconNameRight,\n label,\n productLogoName,\n variant = 'default',\n maxFontSizeMultiplier,\n onPress,\n}: BadgeProps) {\n const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n const { showBadgeProductLogo } = useTheme()\n\n const isMetaSubtle = variant === 'metaSubtle'\n const hasMetaLabel = Boolean(metaLabel)\n\n const showLogo = showBadgeProductLogo && productLogoName\n const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n return (\n <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n <View style={styles.badge}>\n {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n {iconName && <Icon name={iconName} style={styles.icon} />}\n <Text\n variant=\"footnote\"\n style={styles.label}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {badgeLabel}\n </Text>\n {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n </View>\n {hasMetaLabel && (\n <Text\n variant=\"footnote\"\n style={styles.metaLabel}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {metaLabel}\n </Text>\n )}\n </BadgeWrapper>\n )\n}\n\nconst BadgeWrapper = ({\n children,\n onPress,\n accessibilityRole,\n ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n if (onPress) {\n return (\n <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n {children}\n </Pressable>\n )\n }\n\n return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n maxFontSizeMultiplier,\n variant = 'default',\n}: Partial<BadgeProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const statusColorMap = useStatusColorAppearanceMap()\n\n const badgeGap = 4 * fontScale\n const badgePaddingHorizontal = 8\n const badgePaddingVertical = 4\n const badgeFontSize = 12\n\n const variantStylesMap: VariantStyles = {\n default: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: 'normal',\n },\n meta: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n },\n metaSubtle: {\n gap: badgeGap,\n backgroundColor: 'transparent',\n metaLabelPaddingLeft: badgeGap,\n paddingHorizontal: 0,\n paddingVertical: 0,\n borderWidth: 0,\n borderRadius: 0,\n textColor: colors.textColorDefaultSecondary,\n fontWeight: platformFontWeightMedium,\n },\n }\n\n return StyleSheet.create({\n badgeWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n borderRadius: variantStylesMap[variant].borderRadius,\n borderWidth: variantStylesMap[variant].borderWidth,\n borderColor: statusColorMap[appearance].background,\n },\n badge: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: variantStylesMap[variant].gap,\n paddingVertical: variantStylesMap[variant].paddingVertical,\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n backgroundColor: variantStylesMap[variant].backgroundColor,\n borderRadius: variantStylesMap[variant].borderRadius - 2,\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize,\n },\n iconRight: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize - 2,\n },\n logo: {\n fontSize: badgeFontSize * fontScale,\n },\n label: {\n color: variantStylesMap[variant].textColor,\n fontWeight: variantStylesMap[variant].fontWeight,\n fontSize: badgeFontSize,\n flexShrink: 1,\n },\n metaLabel: {\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n fontSize: badgeFontSize,\n alignSelf: 'center',\n flexShrink: 1,\n paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n },\n })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n fill=\"url(#paint0_linear_2632_26363)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_26363\"\n x1={-5.6338}\n y1={5.6338}\n x2={5.6338}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#FF962D\" />\n <Stop offset={1} stopColor=\"#FC7638\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n fill=\"url(#paint0_linear_2632_56586)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_56586\"\n x1={-5.51759}\n y1={5.6338}\n x2={5.75001}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#6BB23D\" />\n <Stop offset={1} stopColor=\"#659630\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n"]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { ColorValue } from 'react-native';
|
|
2
|
-
interface
|
|
2
|
+
interface HeaderTextButtonProps {
|
|
3
3
|
onPress: () => void;
|
|
4
4
|
title?: string;
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
}
|
|
7
|
-
export declare const
|
|
8
|
-
interface
|
|
7
|
+
export declare const HeaderTextButton: ({ onPress, title, ...props }: HeaderTextButtonProps) => import("react").JSX.Element;
|
|
8
|
+
interface HeaderDismissButtonProps {
|
|
9
9
|
onPress: () => void;
|
|
10
10
|
title?: string;
|
|
11
11
|
tintColor?: ColorValue;
|
|
12
12
|
}
|
|
13
|
-
export declare const
|
|
13
|
+
export declare const HeaderDismissButton: ({ onPress, title, tintColor, ...props }: HeaderDismissButtonProps) => import("react").JSX.Element;
|
|
14
14
|
export {};
|
|
15
15
|
//# sourceMappingURL=platform_modal_header_buttons.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"platform_modal_header_buttons.d.ts","sourceRoot":"","sources":["../../../src/components/display/platform_modal_header_buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAM/D,UAAU,
|
|
1
|
+
{"version":3,"file":"platform_modal_header_buttons.d.ts","sourceRoot":"","sources":["../../../src/components/display/platform_modal_header_buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAM/D,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,gBAAgB,iCAI1B,qBAAqB,gCAavB,CAAA;AAED,UAAU,wBAAwB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,eAAO,MAAM,mBAAmB,4CAK7B,wBAAwB,gCAoB1B,CAAA"}
|
|
@@ -3,13 +3,13 @@ import { TextButton } from './text_button';
|
|
|
3
3
|
import { HeaderButton } from '@react-navigation/elements';
|
|
4
4
|
import { Icon } from './icon';
|
|
5
5
|
import { useTheme } from '../../hooks';
|
|
6
|
-
export const
|
|
6
|
+
export const HeaderTextButton = ({ onPress, title = 'Submit', ...props }) => {
|
|
7
7
|
const styles = useStyles();
|
|
8
8
|
return (<TextButton maxFontSizeMultiplier={1} onPress={onPress} textStyle={[styles.interactionColor, props.disabled && styles.disabledColor]} {...props}>
|
|
9
9
|
{title}
|
|
10
10
|
</TextButton>);
|
|
11
11
|
};
|
|
12
|
-
export const
|
|
12
|
+
export const HeaderDismissButton = ({ onPress, title = 'Cancel', tintColor, ...props }) => {
|
|
13
13
|
const styles = useStyles();
|
|
14
14
|
return Platform.select({
|
|
15
15
|
ios: (<TextButton maxFontSizeMultiplier={1} onPress={onPress} textStyle={[styles.interactionColor, styles.iosCancelButton]} {...props}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"platform_modal_header_buttons.js","sourceRoot":"","sources":["../../../src/components/display/platform_modal_header_buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAQtC,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"platform_modal_header_buttons.js","sourceRoot":"","sources":["../../../src/components/display/platform_modal_header_buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAQtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,UAAU,CACT,qBAAqB,CAAC,CAAC,CAAC,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,CAC7E,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,KAAK,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,SAAS,EACT,GAAG,KAAK,EACiB,EAAE,EAAE;IAC7B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,QAAQ,CAAC,MAAM,CAAC;QACrB,GAAG,EAAE,CACH,CAAC,UAAU,CACT,qBAAqB,CAAC,CAAC,CAAC,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAC7D,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,UAAU,CAAC,CACd;QACD,OAAO,EAAE,CACP,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAC7E;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,EACpD;MAAA,EAAE,YAAY,CAAC,CAChB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,gBAAgB,EAAE;YAChB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;gBACrB,GAAG,EAAE,MAAM,CAAC,6BAA6B;gBACzC,OAAO,EAAE,MAAM,CAAC,iCAAiC;aAClD,CAAC;SACH;QACD,mBAAmB,EAAE;YACnB,WAAW,EAAE,EAAE;SAChB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,QAAQ;SACrB;QACD,aAAa,EAAE;YACb,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { ColorValue, Platform, StyleSheet } from 'react-native'\nimport { TextButton } from './text_button'\nimport { HeaderButton } from '@react-navigation/elements'\nimport { Icon } from './icon'\nimport { useTheme } from '../../hooks'\n\ninterface HeaderTextButtonProps {\n onPress: () => void\n title?: string\n disabled?: boolean\n}\n\nexport const HeaderTextButton = ({\n onPress,\n title = 'Submit',\n ...props\n}: HeaderTextButtonProps) => {\n const styles = useStyles()\n\n return (\n <TextButton\n maxFontSizeMultiplier={1}\n onPress={onPress}\n textStyle={[styles.interactionColor, props.disabled && styles.disabledColor]}\n {...props}\n >\n {title}\n </TextButton>\n )\n}\n\ninterface HeaderDismissButtonProps {\n onPress: () => void\n title?: string\n tintColor?: ColorValue\n}\n\nexport const HeaderDismissButton = ({\n onPress,\n title = 'Cancel',\n tintColor,\n ...props\n}: HeaderDismissButtonProps) => {\n const styles = useStyles()\n\n return Platform.select({\n ios: (\n <TextButton\n maxFontSizeMultiplier={1}\n onPress={onPress}\n textStyle={[styles.interactionColor, styles.iosCancelButton]}\n {...props}\n >\n {title}\n </TextButton>\n ),\n default: (\n <HeaderButton onPress={onPress} style={[styles.androidCancelButton]} {...props}>\n <Icon name=\"general.x\" size={16} color={tintColor} />\n </HeaderButton>\n ),\n })\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n interactionColor: {\n color: Platform.select({\n ios: colors.iOSModalHeaderButtonTextColor,\n android: colors.androidModalHeaderButtonTextColor,\n }),\n },\n androidCancelButton: {\n marginRight: 16,\n },\n iosCancelButton: {\n fontWeight: 'normal',\n },\n disabledColor: {\n color: colors.textColorDefaultDisabled,\n },\n })\n}\n"]}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { TextProps as ReactNativeTextProps } from 'react-native';
|
|
2
|
+
import type { TextStyle as ReactNativeTextStyle, TextProps as ReactNativeTextProps, StyleProp } from 'react-native';
|
|
3
|
+
type BorderKeys = 'borderWidth' | 'borderBottomWidth' | 'borderLeftWidth' | 'borderRightWidth' | 'borderTopWidth' | 'borderColor' | 'borderBottomColor' | 'borderLeftColor' | 'borderRightColor' | 'borderTopColor' | 'borderStyle';
|
|
4
|
+
export type TextStyle = Omit<ReactNativeTextStyle, BorderKeys> & {
|
|
5
|
+
[K in BorderKeys]?: never;
|
|
6
|
+
};
|
|
3
7
|
declare const VARIANTS: {
|
|
4
8
|
readonly plain: "plain";
|
|
5
9
|
readonly secondary: "secondary";
|
|
@@ -7,11 +11,15 @@ declare const VARIANTS: {
|
|
|
7
11
|
readonly footnote: "footnote";
|
|
8
12
|
};
|
|
9
13
|
type VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS];
|
|
10
|
-
export interface TextProps extends ReactNativeTextProps {
|
|
14
|
+
export interface TextProps extends Omit<ReactNativeTextProps, 'style'> {
|
|
11
15
|
/**
|
|
12
16
|
* Changes the styles and size of the text.
|
|
13
17
|
*/
|
|
14
18
|
variant?: VariantUnion;
|
|
19
|
+
/**
|
|
20
|
+
* Text styles (border and background properties are not allowed)
|
|
21
|
+
*/
|
|
22
|
+
style?: StyleProp<TextStyle>;
|
|
15
23
|
}
|
|
16
24
|
export declare function Text({ style, variant, children, ...props }: TextProps): React.JSX.Element;
|
|
17
25
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,SAAS,IAAI,oBAAoB,EACjC,SAAS,IAAI,oBAAoB,EACjC,SAAS,EACV,MAAM,cAAc,CAAA;AAUrB,KAAK,UAAU,GACX,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,CAAA;AAEjB,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GAAG;KAC9D,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,KAAK;CAC1B,CAAA;AAED,QAAA,MAAM,QAAQ;;;;;CAKJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAO5D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IACpE;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,OAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAc/E"}
|
|
@@ -2,9 +2,6 @@ import { useTheme } from '../../hooks';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { StyleSheet, Text as ReactNativeText, Platform } from 'react-native';
|
|
4
4
|
import { tokens } from '../../vendor/tapestry/tokens';
|
|
5
|
-
// =================================
|
|
6
|
-
// ====== Constants ================
|
|
7
|
-
// =================================
|
|
8
5
|
const VARIANTS = {
|
|
9
6
|
plain: 'plain',
|
|
10
7
|
secondary: 'secondary',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,IAAI,eAAe,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,IAAI,eAAe,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAM5E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AA0BrD,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;CACZ,CAAA;AAoBV,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IAC9E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,eAAe,GAAkB;QACrC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK;QAC9B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,SAAS;QACtC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,QAAQ;QACpC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,QAAQ;KACrC,CAAA;IAED,OAAO,CACL,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAChF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,IAAI,EAAE;YACJ,GAAG,QAAQ,CAAC,MAAM,CAAC;gBACjB,OAAO,EAAE;oBACP,UAAU,EAAE,QAAQ,EAAE,wQAAwQ;iBAC/R;gBACD,OAAO,EAAE,IAAI,EAAE,2KAA2K;aAC3L,CAAC;SACH;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;QACD,iEAAiE;QACjE,4DAA4D;QAC5D,gGAAgG;QAChG,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useTheme } from '../../hooks'\nimport React from 'react'\nimport { StyleSheet, Text as ReactNativeText, Platform } from 'react-native'\nimport type {\n TextStyle as ReactNativeTextStyle,\n TextProps as ReactNativeTextProps,\n StyleProp,\n} from 'react-native'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\n// =================================\n// ====== Constants ================\n// =================================\n\n// TextStyle extends ViewStyle, which includes border properties.\n// CCA has issues with borders on Text on iOS. (https://github.com/planningcenter/chat-mobile/pull/177)\n// Our pattern is to apply boarders to a parent View instead.\ntype BorderKeys =\n | 'borderWidth'\n | 'borderBottomWidth'\n | 'borderLeftWidth'\n | 'borderRightWidth'\n | 'borderTopWidth'\n | 'borderColor'\n | 'borderBottomColor'\n | 'borderLeftColor'\n | 'borderRightColor'\n | 'borderTopColor'\n | 'borderStyle'\n\nexport type TextStyle = Omit<ReactNativeTextStyle, BorderKeys> & {\n [K in BorderKeys]?: never\n}\n\nconst VARIANTS = {\n plain: 'plain',\n secondary: 'secondary',\n tertiary: 'tertiary',\n footnote: 'footnote',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\ntype VariantStyles = Record<VariantUnion, TextStyle>\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface TextProps extends Omit<ReactNativeTextProps, 'style'> {\n /**\n * Changes the styles and size of the text.\n */\n variant?: VariantUnion\n /**\n * Text styles (border and background properties are not allowed)\n */\n style?: StyleProp<TextStyle>\n}\n\nexport function Text({ style, variant = 'plain', children, ...props }: TextProps) {\n const styles = useStyles()\n const variantStyleMap: VariantStyles = {\n [VARIANTS.plain]: styles.plain,\n [VARIANTS.secondary]: styles.secondary,\n [VARIANTS.tertiary]: styles.tertiary,\n [VARIANTS.footnote]: styles.footnote,\n }\n\n return (\n <ReactNativeText style={[styles.base, variantStyleMap[variant], style]} {...props}>\n {children}\n </ReactNativeText>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n base: {\n ...Platform.select({\n android: {\n fontFamily: 'normal', // This forces the text to be normal weight when the \"Bold font\" accessibility setting is enabled. While this is not ideal, it fixes a bug where the text without a hard coded fontWeight gets cut off on Android. https://github.com/facebook/react-native/issues/15114\n },\n default: null, // iOS needs to specify its own font family otherwise the italic style won't work. (Used in message_markdown.tsx) It's \"Bold font\" accessibility setting works as expected.\n }),\n },\n plain: {\n color: colors.textColorDefaultPrimary,\n fontSize: tokens.fontSizeMd,\n },\n // This is a dupe of the plain variant to support the legacy API.\n // Once we move to the new Doxy font scale we can remove it.\n // See: https://www.figma.com/design/ZR0ZP6FdbOBOK3fUSpRr0Q/CC-Redux-2025?node-id=156-1069&m=dev\n secondary: {\n color: colors.textColorDefaultPrimary,\n fontSize: tokens.fontSizeMd,\n },\n tertiary: {\n color: colors.textColorDefaultSecondary,\n fontSize: tokens.fontSizeSm,\n },\n footnote: {\n color: colors.textColorDefaultSecondary,\n fontSize: tokens.fontSizeXs,\n },\n })\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,cAAc,CAAA;AAazE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAQzC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,oBAA4B,EAC5B,gBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,qBAAyD,EACzD,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAqB,EACrB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAsDnB"}
|
|
@@ -2,11 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import { Pressable, StyleSheet } from 'react-native';
|
|
3
3
|
import { Text } from './text';
|
|
4
4
|
import { useTheme, useFontScale, useCreateAndroidRippleColor, useInteractionGhostBackgroundColor, } from '../../hooks';
|
|
5
|
-
import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils';
|
|
5
|
+
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK, platformFontWeightBold, platformPressedOpacityStyle, } from '../../utils';
|
|
6
6
|
import { Icon } from './icon';
|
|
7
7
|
import { tokens } from '../../vendor/tapestry/tokens';
|
|
8
8
|
import { Haptic } from '../../utils/native_adapters/configuration';
|
|
9
|
-
export function ToggleButton({ active, adjustsFontSizeToFit = false, allowFontScaling = true, iconNameLeft, iconNameRight, maxFontSizeMultiplier, minimumFontScale, title, style, hapticFeedback = true, onPress, ...props }) {
|
|
9
|
+
export function ToggleButton({ active, adjustsFontSizeToFit = false, allowFontScaling = true, iconNameLeft, iconNameRight, maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK, minimumFontScale, title, style, hapticFeedback = true, onPress, ...props }) {
|
|
10
10
|
const styles = useStyles({ active, maxFontSizeMultiplier });
|
|
11
11
|
const { colors } = useTheme();
|
|
12
12
|
const overrideStyles = StyleSheet.flatten(style); // Ensures the pressed styles still get applied
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle_button.js","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,2BAA2B,EAC3B,kCAAkC,GACnC,MAAM,aAAa,CAAA;AACpB,OAAO,
|
|
1
|
+
{"version":3,"file":"toggle_button.js","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps, GestureResponderEvent } from 'react-native'\nimport { Text } from './text'\nimport {\n useTheme,\n useFontScale,\n useCreateAndroidRippleColor,\n useInteractionGhostBackgroundColor,\n} from '../../hooks'\nimport {\n MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n platformFontWeightBold,\n platformPressedOpacityStyle,\n} from '../../utils'\nimport { Icon, IconString } from './icon'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ToggleButtonProps extends PressableProps {\n /**\n * Pressable container styles\n */\n active: boolean\n /**\n * Specifies whether fonts should be scaled down automatically to fit given style constraints.\n */\n adjustsFontSizeToFit?: boolean\n /**\n * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.\n */\n allowFontScaling?: boolean\n /**\n * Generates an icon to the left of the button text\n */\n iconNameLeft?: IconString\n /**\n * Generates an icon to the right of the button text\n */\n iconNameRight?: IconString\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).\n */\n minimumFontScale?: number\n /**\n * Renders as text within the button\n */\n title: string\n /**\n * Pressable container styles\n */\n style?: PressableProps['style']\n /**\n * Specifies whether haptic feedback should be enabled.\n */\n hapticFeedback?: boolean\n}\n\nexport function ToggleButton({\n active,\n adjustsFontSizeToFit = false,\n allowFontScaling = true,\n iconNameLeft,\n iconNameRight,\n maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n minimumFontScale,\n title,\n style,\n hapticFeedback = true,\n onPress,\n ...props\n}: ToggleButtonProps) {\n const styles = useStyles({ active, maxFontSizeMultiplier })\n const { colors } = useTheme()\n const overrideStyles = StyleSheet.flatten(style) // Ensures the pressed styles still get applied\n\n const baseRippleColor = active ? colors.interaction : colors.fillColorNeutral050Base\n const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })\n\n const handlePress = (event: GestureResponderEvent) => {\n if (hapticFeedback) Haptic.impactLight()\n\n onPress?.(event)\n }\n\n return (\n <Pressable\n style={({ pressed }) => ({\n ...styles.pressable,\n ...(pressed ? platformPressedOpacityStyle : null),\n ...overrideStyles,\n })}\n accessibilityRole=\"togglebutton\"\n accessibilityState={{ checked: active }}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n onPress={handlePress}\n {...props}\n >\n {iconNameLeft && (\n <Icon\n name={iconNameLeft}\n style={styles.icon}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n <Text\n allowFontScaling={allowFontScaling}\n minimumFontScale={minimumFontScale}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n adjustsFontSizeToFit={adjustsFontSizeToFit}\n numberOfLines={1}\n style={styles.text}\n variant=\"tertiary\"\n >\n {title}\n </Text>\n {iconNameRight && (\n <Icon\n name={iconNameRight}\n style={styles.icon}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n </Pressable>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>) => {\n const { colors, button } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const activeBackgroundColor = useInteractionGhostBackgroundColor()\n\n const color = active ? colors.interaction : colors.textColorDefaultSecondary\n\n return StyleSheet.create({\n pressable: {\n borderRadius: button.borderRadius * fontScale,\n borderWidth: 1,\n borderColor: active ? colors.interaction : colors.borderColorDefaultBase,\n backgroundColor: active ? activeBackgroundColor : 'transparent',\n paddingHorizontal: 16 * fontScale,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n height: 32 * fontScale,\n gap: 6 * fontScale,\n overflow: 'hidden',\n },\n text: {\n textAlign: 'center',\n textAlignVertical: 'center',\n includeFontPadding: false,\n fontWeight: platformFontWeightBold,\n color,\n },\n icon: {\n fontSize: tokens.fontSizeSm * fontScale,\n color,\n },\n })\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error_boundary.d.ts","sourceRoot":"","sources":["../../../src/components/page/error_boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"error_boundary.d.ts","sourceRoot":"","sources":["../../../src/components/page/error_boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG1D,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAA;IAC/C,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;IACtF,KAAK,EAAE,kBAAkB,CAGxB;IAED,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAI5B,WAAW,CAAC,KAAK,EAAE,GAAG;IAItB,WAAW,aAGV;IAED,MAAM;CAOP;AA4FD,eAAe,aAAa,CAAA"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { useNavigation } from '@react-navigation/native';
|
|
2
2
|
import { useQueryErrorResetBoundary } from '@tanstack/react-query';
|
|
3
3
|
import React, { useEffect, useMemo } from 'react';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
5
|
-
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
|
-
import { Button, Heading, Icon, Text, TextButton } from '../display';
|
|
7
|
-
import { useTheme } from '../../hooks';
|
|
8
4
|
import { ResponseError } from '../../utils/response_error';
|
|
5
|
+
import BlankState from '../primitive/blank_state_primitive';
|
|
9
6
|
class ErrorBoundary extends React.Component {
|
|
10
7
|
state = {
|
|
11
8
|
error: null,
|
|
@@ -84,50 +81,18 @@ function ResponseErrorView({ response }) {
|
|
|
84
81
|
return <ErrorContent heading={heading} body={body}/>;
|
|
85
82
|
}
|
|
86
83
|
function ErrorContent({ heading, body }) {
|
|
87
|
-
const styles = useStyles();
|
|
88
84
|
const navigation = useNavigation();
|
|
89
|
-
return (<
|
|
90
|
-
<
|
|
91
|
-
<
|
|
92
|
-
<Heading
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<Button variant="outline" onPress={navigation.goBack} title="Go back" size="md"/>
|
|
98
|
-
<TextButton variant="tertiary" onPress={() => navigation.navigate('BugReport')}>
|
|
85
|
+
return (<BlankState.Root>
|
|
86
|
+
<BlankState.Imagery name="people.noTextMessage"/>
|
|
87
|
+
<BlankState.Content>
|
|
88
|
+
<BlankState.Heading>{heading}</BlankState.Heading>
|
|
89
|
+
<BlankState.Text>{body}</BlankState.Text>
|
|
90
|
+
</BlankState.Content>
|
|
91
|
+
<BlankState.Button title="Go back" onPress={navigation.goBack} size="md" accessibilityRole="link"/>
|
|
92
|
+
<BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>
|
|
99
93
|
Report a bug
|
|
100
|
-
</TextButton>
|
|
101
|
-
</
|
|
94
|
+
</BlankState.TextButton>
|
|
95
|
+
</BlankState.Root>);
|
|
102
96
|
}
|
|
103
|
-
const useStyles = () => {
|
|
104
|
-
const theme = useTheme();
|
|
105
|
-
const { bottom } = useSafeAreaInsets();
|
|
106
|
-
return StyleSheet.create({
|
|
107
|
-
container: {
|
|
108
|
-
flex: 1,
|
|
109
|
-
justifyContent: 'center',
|
|
110
|
-
alignItems: 'center',
|
|
111
|
-
gap: 24,
|
|
112
|
-
paddingHorizontal: 16,
|
|
113
|
-
paddingBottom: bottom,
|
|
114
|
-
},
|
|
115
|
-
information: {
|
|
116
|
-
alignItems: 'center',
|
|
117
|
-
gap: 8,
|
|
118
|
-
},
|
|
119
|
-
heading: {
|
|
120
|
-
textAlign: 'center',
|
|
121
|
-
lineHeight: 20,
|
|
122
|
-
},
|
|
123
|
-
body: {
|
|
124
|
-
textAlign: 'center',
|
|
125
|
-
lineHeight: 20,
|
|
126
|
-
},
|
|
127
|
-
icon: {
|
|
128
|
-
color: theme.colors.iconColorDefaultDisabled,
|
|
129
|
-
},
|
|
130
|
-
});
|
|
131
|
-
};
|
|
132
97
|
export default ErrorBoundary;
|
|
133
98
|
//# sourceMappingURL=error_boundary.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error_boundary.js","sourceRoot":"","sources":["../../../src/components/page/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,KAAK,EAAE,EAAqB,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"error_boundary.js","sourceRoot":"","sources":["../../../src/components/page/error_boundary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { useQueryErrorResetBoundary } from '@tanstack/react-query'\nimport React, { PropsWithChildren, useEffect, useMemo } from 'react'\nimport { ResponseError } from '../../utils/response_error'\nimport BlankState from '../primitive/blank_state_primitive'\n\ntype ErrorBoundaryState = {\n error: ResponseError | Error | TypeError | null\n unsubscriber: () => void\n}\n\nclass ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {\n state: ErrorBoundaryState = {\n error: null,\n unsubscriber: () => {},\n }\n\n componentDidCatch(error: any) {\n this.handleError(error)\n }\n\n handleError(error: any) {\n this.setState({ error })\n }\n\n handleReset = () => {\n this.props.onReset?.()\n this.setState({ error: null })\n }\n\n render() {\n if (this.state.error) {\n return <ErrorView error={this.state.error} onReset={this.handleReset} />\n } else {\n return this.props.children\n }\n }\n}\n\nfunction ErrorView({ error, onReset }: { error: Error | ResponseError; onReset: () => void }) {\n const { reset } = useQueryErrorResetBoundary()\n useEffect(() => {\n if (!reset) return\n\n return () => {\n onReset()\n reset()\n }\n }, [reset, onReset])\n\n if (error instanceof ResponseError) {\n return <ResponseErrorView response={error.response} onReset={onReset} />\n }\n\n if (isNetworkError(error)) {\n return (\n <ErrorContent\n heading={'Problem connecting!'}\n body={'Check your internet connection and try again.'}\n />\n )\n }\n\n return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />\n}\n\nfunction isNetworkError(error: ResponseError | Error | TypeError | null) {\n const isError = error instanceof Error\n const networkFailedMessages = [\n 'Network request failed',\n 'Network request timed out',\n 'Failed to fetch',\n ]\n\n if (!isError) return false\n\n return new RegExp(networkFailedMessages.join('|'), 'i').test(error.message)\n}\n\nfunction ResponseErrorView({ response }: { response: Response; onReset: () => void }) {\n const { status } = response\n const heading = useMemo(() => {\n switch (status) {\n case 403:\n return 'Permission required'\n case 404:\n return 'Content not found'\n default:\n return 'Oops!'\n }\n }, [status])\n\n const body = useMemo(() => {\n switch (status) {\n case 403:\n return 'Contact your administrator for access.'\n case 404:\n return 'If you believe something should be here, please reach out to your administrator.'\n default:\n return 'Something unexpected happened.'\n }\n }, [status])\n\n return <ErrorContent heading={heading} body={body} />\n}\n\nfunction ErrorContent({ heading, body }: { heading: string; body: string }) {\n const navigation = useNavigation()\n\n return (\n <BlankState.Root>\n <BlankState.Imagery name=\"people.noTextMessage\" />\n <BlankState.Content>\n <BlankState.Heading>{heading}</BlankState.Heading>\n <BlankState.Text>{body}</BlankState.Text>\n </BlankState.Content>\n <BlankState.Button\n title=\"Go back\"\n onPress={navigation.goBack}\n size=\"md\"\n accessibilityRole=\"link\"\n />\n <BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>\n Report a bug\n </BlankState.TextButton>\n </BlankState.Root>\n )\n}\n\nexport default ErrorBoundary\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAQ,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAQ,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAkBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;;CAIR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;AA4C5F,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAmBD,KAAK,eAAe,GAAG,SAAS,CAAA;AAkBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAwBD,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AA0BD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAuID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
2
2
|
import { StyleSheet, View } from 'react-native';
|
|
3
|
-
import { useTheme } from '../../hooks';
|
|
3
|
+
import { useFontScale, useTheme } from '../../hooks';
|
|
4
4
|
import { Icon } from '../display/icon';
|
|
5
5
|
import { Image } from '../display/image';
|
|
6
6
|
import { Spinner } from '../display/spinner';
|
|
7
|
+
import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils';
|
|
7
8
|
// =================================
|
|
8
9
|
// ====== Exports ==================
|
|
9
10
|
// =================================
|
|
@@ -69,7 +70,9 @@ function AvatarMask({ children, ...props }) {
|
|
|
69
70
|
AvatarMask.displayName = 'Avatar.Mask';
|
|
70
71
|
function AvatarImage({ sourceUri, ...props }) {
|
|
71
72
|
const { size } = useAvatarContext();
|
|
72
|
-
|
|
73
|
+
const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
|
|
74
|
+
const scaledAvatarSize = AVATAR_PX[size] * fontScale;
|
|
75
|
+
return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt=""/>;
|
|
73
76
|
}
|
|
74
77
|
AvatarImage.displayName = 'Avatar.Image';
|
|
75
78
|
function AvatarGroupImage({ sourceUri, style, onLoad }) {
|
|
@@ -78,8 +81,10 @@ function AvatarGroupImage({ sourceUri, style, onLoad }) {
|
|
|
78
81
|
function AvatarImageFallback({ name = 'general.person' }) {
|
|
79
82
|
const { size } = useAvatarContext();
|
|
80
83
|
const styles = useStyles();
|
|
84
|
+
const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
|
|
85
|
+
const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale;
|
|
81
86
|
return (<View style={styles.fallbackContainer}>
|
|
82
|
-
<Icon name={name} size={
|
|
87
|
+
<Icon name={name} size={scaledIconSize} style={styles.fallbackIcon} accessibilityElementsHidden={true}/>
|
|
83
88
|
</View>);
|
|
84
89
|
}
|
|
85
90
|
AvatarImageFallback.displayName = 'Avatar.ImageFallback';
|
|
@@ -143,10 +148,12 @@ AvatarGroup.displayName = 'Avatar.Group';
|
|
|
143
148
|
function AvatarGroupLoader() {
|
|
144
149
|
const { size, allImagesLoaded } = useAvatarContext();
|
|
145
150
|
const styles = useStyles({ size });
|
|
151
|
+
const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
|
|
152
|
+
const scaledSpinnerSize = AVATAR_PX[size] * fontScale;
|
|
146
153
|
if (allImagesLoaded)
|
|
147
154
|
return null;
|
|
148
155
|
return (<View style={styles.groupLoader}>
|
|
149
|
-
<Spinner size={
|
|
156
|
+
<Spinner size={scaledSpinnerSize}/>
|
|
150
157
|
</View>);
|
|
151
158
|
}
|
|
152
159
|
AvatarGroupLoader.displayName = 'Avatar.GroupLoader';
|
|
@@ -158,12 +165,13 @@ function AvatarPresence({ presence, ...props }) {
|
|
|
158
165
|
AvatarPresence.displayName = 'Avatar.Presence';
|
|
159
166
|
const useStyles = ({ size = 'md', presence = 'offline' } = {}) => {
|
|
160
167
|
const { colors } = useTheme();
|
|
168
|
+
const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
|
|
161
169
|
const PRESENCE_COLOR = {
|
|
162
170
|
online: colors.fillColorInteractionOnlineDefault,
|
|
163
171
|
offline: colors.iconColorDefaultDisabled,
|
|
164
172
|
};
|
|
165
|
-
const presenceDiameter = AVATAR_PRESENCE_PX[size];
|
|
166
|
-
const avatarDiameter = AVATAR_PX[size];
|
|
173
|
+
const presenceDiameter = AVATAR_PRESENCE_PX[size] * fontScale;
|
|
174
|
+
const avatarDiameter = AVATAR_PX[size] * fontScale;
|
|
167
175
|
const groupGap = 1;
|
|
168
176
|
return StyleSheet.create({
|
|
169
177
|
rootContainer: {
|