@planningcenter/chat-react-native 3.44.0-rc.0 → 3.44.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/platform_modal_header_buttons.d.ts +42 -14
- package/build/components/display/platform_modal_header_buttons.d.ts.map +1 -1
- package/build/components/display/platform_modal_header_buttons.js +107 -27
- package/build/components/display/platform_modal_header_buttons.js.map +1 -1
- package/build/components/primitive/form_sheet.d.ts +8 -2
- package/build/components/primitive/form_sheet.d.ts.map +1 -1
- package/build/components/primitive/form_sheet.js +10 -4
- package/build/components/primitive/form_sheet.js.map +1 -1
- package/build/navigation/index.d.ts +76 -149
- package/build/navigation/index.d.ts.map +1 -1
- package/build/navigation/index.js +67 -76
- package/build/navigation/index.js.map +1 -1
- package/build/screens/attachment_actions/attachment_actions_screen.d.ts +1 -1
- package/build/screens/attachment_actions/attachment_actions_screen.d.ts.map +1 -1
- package/build/screens/avatar_picker/avatar_picker_screen.d.ts +2 -2
- package/build/screens/avatar_picker/avatar_picker_screen.d.ts.map +1 -1
- package/build/screens/bug_report_screen.d.ts.map +1 -1
- package/build/screens/bug_report_screen.js +10 -13
- package/build/screens/bug_report_screen.js.map +1 -1
- package/build/screens/conversation/message_read_receipts_screen.d.ts +1 -1
- package/build/screens/conversation/message_read_receipts_screen.d.ts.map +1 -1
- package/build/screens/conversation_details_screen.d.ts.map +1 -1
- package/build/screens/conversation_details_screen.js +11 -12
- package/build/screens/conversation_details_screen.js.map +1 -1
- package/build/screens/conversation_filter_recipients/conversation_filter_recipients_screen.d.ts +1 -1
- package/build/screens/conversation_filter_recipients/conversation_filter_recipients_screen.d.ts.map +1 -1
- package/build/screens/conversation_filters_screen.d.ts +1 -1
- package/build/screens/conversation_filters_screen.d.ts.map +1 -1
- package/build/screens/conversation_filters_screen.js +18 -2
- package/build/screens/conversation_filters_screen.js.map +1 -1
- package/build/screens/conversation_notification_level_select_screen.d.ts +1 -1
- package/build/screens/conversation_notification_level_select_screen.d.ts.map +1 -1
- package/build/screens/conversation_screen.d.ts.map +1 -1
- package/build/screens/conversation_screen.js +6 -2
- package/build/screens/conversation_screen.js.map +1 -1
- package/build/screens/conversation_select_type_screen.d.ts +1 -1
- package/build/screens/conversation_select_type_screen.d.ts.map +1 -1
- package/build/screens/group_notification_level_select_screen.d.ts +1 -1
- package/build/screens/group_notification_level_select_screen.d.ts.map +1 -1
- package/build/screens/message_actions_screen.d.ts +1 -1
- package/build/screens/message_actions_screen.d.ts.map +1 -1
- package/build/screens/message_report_screen.d.ts.map +1 -1
- package/build/screens/message_report_screen.js +14 -18
- package/build/screens/message_report_screen.js.map +1 -1
- package/build/screens/notification_settings_screen.d.ts.map +1 -1
- package/build/screens/notification_settings_screen.js +0 -14
- package/build/screens/notification_settings_screen.js.map +1 -1
- package/build/screens/reactions_screen.d.ts +1 -1
- package/build/screens/reactions_screen.d.ts.map +1 -1
- package/build/screens/send_giphy_screen.d.ts +1 -1
- package/build/screens/send_giphy_screen.d.ts.map +1 -1
- package/build/screens/system_message_people_screen.d.ts +1 -1
- package/build/screens/system_message_people_screen.d.ts.map +1 -1
- package/package.json +3 -2
- package/src/components/display/platform_modal_header_buttons.tsx +196 -45
- package/src/components/primitive/form_sheet.tsx +19 -15
- package/src/navigation/index.tsx +147 -151
- package/src/screens/bug_report_screen.tsx +16 -15
- package/src/screens/conversation_details_screen.tsx +11 -17
- package/src/screens/conversation_filters_screen.tsx +25 -2
- package/src/screens/conversation_screen.tsx +7 -2
- package/src/screens/message_report_screen.tsx +20 -21
- package/src/screens/notification_settings_screen.tsx +1 -21
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
|
|
2
2
|
import { ColorValue } from 'react-native';
|
|
3
|
+
import { type IconString } from './icon';
|
|
3
4
|
interface HeaderTextButtonProps {
|
|
4
5
|
onPress: () => void;
|
|
5
6
|
title?: string;
|
|
@@ -12,22 +13,49 @@ interface HeaderDismissButtonProps {
|
|
|
12
13
|
tintColor?: ColorValue;
|
|
13
14
|
}
|
|
14
15
|
export declare const HeaderDismissButton: ({ onPress, title, tintColor, ...props }: HeaderDismissButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
export type OptionsDecorator = (options: NativeStackNavigationOptions) => NativeStackNavigationOptions;
|
|
17
|
+
export declare const composeOptions: (base: NativeStackNavigationOptions, ...decorators: OptionsDecorator[]) => NativeStackNavigationOptions;
|
|
18
|
+
interface TextButtonDecoratorProps {
|
|
19
|
+
text: string;
|
|
20
|
+
onPress: () => void;
|
|
21
|
+
disabled?: boolean;
|
|
20
22
|
}
|
|
21
|
-
export declare const
|
|
22
|
-
export declare const
|
|
23
|
+
export declare const withRightText: ({ text, onPress, disabled }: TextButtonDecoratorProps) => OptionsDecorator;
|
|
24
|
+
export declare const useHeaderSlotReserve: () => number;
|
|
25
|
+
export interface HeaderIconProps {
|
|
26
|
+
icon: IconString;
|
|
27
|
+
accessibilityLabel: string;
|
|
23
28
|
onPress: () => void;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
prominent?: boolean;
|
|
31
|
+
tintColor?: ColorValue;
|
|
32
|
+
}
|
|
33
|
+
export declare const withRightIcon: (props: HeaderIconProps) => OptionsDecorator;
|
|
34
|
+
export declare const withLeftIcon: (props: HeaderIconProps) => OptionsDecorator;
|
|
35
|
+
export declare const withRightClose: ({ onPress }: {
|
|
27
36
|
onPress: () => void;
|
|
28
|
-
}) =>
|
|
29
|
-
|
|
37
|
+
}) => OptionsDecorator;
|
|
38
|
+
export declare const withLeftClose: ({ onPress }: {
|
|
39
|
+
onPress: () => void;
|
|
40
|
+
}) => OptionsDecorator;
|
|
41
|
+
export declare const withRightDone: ({ onPress }: {
|
|
42
|
+
onPress: () => void;
|
|
43
|
+
}) => OptionsDecorator;
|
|
44
|
+
export declare const withMinimalBack: ({ onPress }: {
|
|
45
|
+
onPress: () => void;
|
|
46
|
+
}) => OptionsDecorator;
|
|
47
|
+
type UseHeaderRightOptions = {
|
|
48
|
+
onPress: () => void;
|
|
49
|
+
disabled?: boolean;
|
|
50
|
+
enabled?: boolean;
|
|
51
|
+
} & ((Omit<HeaderIconProps, 'tintColor'> & {
|
|
52
|
+
title?: never;
|
|
53
|
+
}) | {
|
|
30
54
|
title: string;
|
|
31
|
-
|
|
55
|
+
icon?: never;
|
|
56
|
+
accessibilityLabel?: never;
|
|
57
|
+
prominent?: never;
|
|
58
|
+
});
|
|
59
|
+
export declare const useHeaderRight: (options: UseHeaderRightOptions) => void;
|
|
32
60
|
export {};
|
|
33
61
|
//# 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":"
|
|
1
|
+
{"version":3,"file":"platform_modal_header_buttons.d.ts","sourceRoot":"","sources":["../../../src/components/display/platform_modal_header_buttons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,4BAA4B,EAC7B,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAI/D,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAG9C,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,GAAI,8BAI9B,qBAAqB,4CAavB,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,GAAI,yCAKjC,wBAAwB,4CAoB1B,CAAA;AAQD,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,4BAA4B,KAClC,4BAA4B,CAAA;AAEjC,eAAO,MAAM,cAAc,GACzB,MAAM,4BAA4B,EAClC,GAAG,YAAY,gBAAgB,EAAE,KAChC,4BAAiG,CAAA;AAEpG,UAAU,wBAAwB;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,GACvB,6BAA6B,wBAAwB,KAAG,gBAKvD,CAAA;AAOJ,eAAO,MAAM,oBAAoB,QAAO,MAIvC,CAAA;AAiCD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAA;IAChB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAuCD,eAAO,MAAM,aAAa,GACvB,OAAO,eAAe,KAAG,gBAKxB,CAAA;AAEJ,eAAO,MAAM,YAAY,GACtB,OAAO,eAAe,KAAG,gBAKxB,CAAA;AAEJ,eAAO,MAAM,cAAc,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,qBACS,CAAA;AAE5E,eAAO,MAAM,aAAa,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,qBACS,CAAA;AAE3E,eAAO,MAAM,aAAa,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,qBACa,CAAA;AAgB/E,eAAO,MAAM,eAAe,GACzB,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,KAAG,gBAOtC,CAAA;AAEJ,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,CACA,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACxD;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,CACjF,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,qBAAqB,SA2B5D,CAAA"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { HeaderBackButton, HeaderButton } from '@react-navigation/elements';
|
|
2
|
+
import { HeaderBackButton, HeaderButton, PlatformPressable } from '@react-navigation/elements';
|
|
3
|
+
import { useNavigation } from '@react-navigation/native';
|
|
4
|
+
import { useLayoutEffect } from 'react';
|
|
3
5
|
import { Platform, StyleSheet } from 'react-native';
|
|
4
|
-
import { useTheme } from '../../hooks';
|
|
5
|
-
import {
|
|
6
|
+
import { useFontScale, useTheme } from '../../hooks';
|
|
7
|
+
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
|
|
6
8
|
import { Icon } from './icon';
|
|
7
9
|
import { TextButton } from './text_button';
|
|
8
10
|
export const HeaderTextButton = ({ onPress, title = 'Submit', ...props }) => {
|
|
@@ -16,32 +18,110 @@ export const HeaderDismissButton = ({ onPress, title = 'Cancel', tintColor, ...p
|
|
|
16
18
|
default: (_jsx(HeaderButton, { onPress: onPress, style: [styles.androidCancelButton], ...props, children: _jsx(Icon, { name: "general.x", size: 16, color: tintColor }) })),
|
|
17
19
|
});
|
|
18
20
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
21
|
+
const createTextHeaderRight = ({ onPress, title, disabled }) => (props) => (_jsx(HeaderTextButton, { ...props, onPress: onPress, title: title, disabled: disabled }));
|
|
22
|
+
export const composeOptions = (base, ...decorators) => decorators.reduce((options, decorate) => decorate(options), base);
|
|
23
|
+
export const withRightText = ({ text, onPress, disabled }) => options => ({
|
|
24
|
+
...options,
|
|
25
|
+
headerRight: createTextHeaderRight({ onPress, title: text, disabled }),
|
|
26
|
+
unstable_headerRightItems: () => [{ type: 'button', label: text, onPress, disabled }],
|
|
27
|
+
});
|
|
28
|
+
const HEADER_ICON_SIZE = 17;
|
|
29
|
+
const HEADER_GLASS_BUTTON_SIZE = 44;
|
|
30
|
+
const HEADER_BAR_INSET = 16;
|
|
31
|
+
const HEADER_SLOT_GAP = 12;
|
|
32
|
+
export const useHeaderSlotReserve = () => {
|
|
33
|
+
const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK });
|
|
34
|
+
return HEADER_BAR_INSET + HEADER_GLASS_BUTTON_SIZE * fontScale + HEADER_SLOT_GAP;
|
|
35
|
+
};
|
|
36
|
+
const HEADER_FALLBACK_HIT_SLOP = 14;
|
|
37
|
+
const iconStyles = StyleSheet.create({
|
|
38
|
+
disabled: {
|
|
39
|
+
opacity: 0.4,
|
|
40
|
+
},
|
|
41
|
+
fallbackButton: {
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'center',
|
|
44
|
+
paddingHorizontal: 8,
|
|
45
|
+
},
|
|
46
|
+
fallbackButtonLeft: {
|
|
47
|
+
marginRight: Platform.select({ android: 16, default: 0 }),
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
const SF_SYMBOL_NAMES = {
|
|
51
|
+
'general.x': 'xmark',
|
|
52
|
+
'general.check': 'checkmark',
|
|
53
|
+
'general.upArrow': 'arrow.up',
|
|
54
|
+
'general.leftChevron': 'chevron.left',
|
|
26
55
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
56
|
+
const sfSymbolFor = (icon) => {
|
|
57
|
+
const name = SF_SYMBOL_NAMES[icon];
|
|
58
|
+
if (!name)
|
|
59
|
+
throw new Error(`No SF Symbol mapped for icon "${icon}" — add one to SF_SYMBOL_NAMES.`);
|
|
60
|
+
return name;
|
|
61
|
+
};
|
|
62
|
+
const createHeaderIconItem = ({ icon, accessibilityLabel, onPress, disabled, prominent, tintColor, }) => ({
|
|
63
|
+
type: 'button',
|
|
64
|
+
label: '',
|
|
65
|
+
accessibilityLabel,
|
|
66
|
+
onPress,
|
|
67
|
+
disabled,
|
|
68
|
+
icon: { type: 'sfSymbol', name: sfSymbolFor(icon) },
|
|
69
|
+
...(prominent ? { variant: 'prominent', tintColor } : {}),
|
|
70
|
+
});
|
|
71
|
+
const createHeaderIconElement = (position) => ({ icon, accessibilityLabel, onPress, disabled, tintColor }) => () => (_jsx(PlatformPressable, { onPress: onPress, disabled: disabled, hitSlop: HEADER_FALLBACK_HIT_SLOP, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, style: [
|
|
72
|
+
iconStyles.fallbackButton,
|
|
73
|
+
position === 'left' && iconStyles.fallbackButtonLeft,
|
|
74
|
+
disabled && iconStyles.disabled,
|
|
75
|
+
], children: _jsx(Icon, { name: icon, size: HEADER_ICON_SIZE, color: tintColor }) }));
|
|
76
|
+
export const withRightIcon = (props) => options => ({
|
|
77
|
+
...options,
|
|
78
|
+
headerRight: createHeaderIconElement('right')(props),
|
|
79
|
+
unstable_headerRightItems: () => [createHeaderIconItem(props)],
|
|
44
80
|
});
|
|
81
|
+
export const withLeftIcon = (props) => options => ({
|
|
82
|
+
...options,
|
|
83
|
+
headerLeft: createHeaderIconElement('left')(props),
|
|
84
|
+
unstable_headerLeftItems: () => [createHeaderIconItem(props)],
|
|
85
|
+
});
|
|
86
|
+
export const withRightClose = ({ onPress }) => withRightIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress });
|
|
87
|
+
export const withLeftClose = ({ onPress }) => withLeftIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress });
|
|
88
|
+
export const withRightDone = ({ onPress }) => withRightIcon({ icon: 'general.check', accessibilityLabel: 'Done', onPress });
|
|
89
|
+
const createMinimalHeaderBackElement = ({ onPress }) => (props) => (_jsx(HeaderBackButton, { style: Platform.select({
|
|
90
|
+
ios: { marginLeft: -8 },
|
|
91
|
+
default: { marginLeft: -3, marginRight: 30 },
|
|
92
|
+
}), displayMode: "minimal", onPress: onPress, ...props }));
|
|
93
|
+
export const withMinimalBack = ({ onPress }) => options => ({
|
|
94
|
+
...options,
|
|
95
|
+
headerLeft: createMinimalHeaderBackElement({ onPress }),
|
|
96
|
+
unstable_headerLeftItems: () => [
|
|
97
|
+
createHeaderIconItem({ icon: 'general.leftChevron', accessibilityLabel: 'Back', onPress }),
|
|
98
|
+
],
|
|
99
|
+
});
|
|
100
|
+
export const useHeaderRight = (options) => {
|
|
101
|
+
const navigation = useNavigation();
|
|
102
|
+
const { colors } = useTheme();
|
|
103
|
+
const { onPress, disabled, enabled = true } = options;
|
|
104
|
+
const icon = options.icon;
|
|
105
|
+
const label = options.icon !== undefined ? options.accessibilityLabel : options.title;
|
|
106
|
+
const prominent = options.icon !== undefined ? options.prominent : undefined;
|
|
107
|
+
useLayoutEffect(() => {
|
|
108
|
+
if (!enabled) {
|
|
109
|
+
navigation.setOptions({ headerRight: () => null, unstable_headerRightItems: undefined });
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
const decorate = icon
|
|
113
|
+
? withRightIcon({
|
|
114
|
+
icon,
|
|
115
|
+
accessibilityLabel: label,
|
|
116
|
+
onPress,
|
|
117
|
+
disabled,
|
|
118
|
+
prominent,
|
|
119
|
+
tintColor: prominent ? colors.interaction : undefined,
|
|
120
|
+
})
|
|
121
|
+
: withRightText({ text: label, onPress, disabled });
|
|
122
|
+
navigation.setOptions(decorate({}));
|
|
123
|
+
}, [colors.interaction, disabled, enabled, icon, label, navigation, onPress, prominent]);
|
|
124
|
+
};
|
|
45
125
|
const useStyles = () => {
|
|
46
126
|
const { colors } = useTheme();
|
|
47
127
|
return StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"platform_modal_header_buttons.js","sourceRoot":"","sources":["../../../src/components/display/platform_modal_header_buttons.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'\nimport type {\n NativeStackHeaderLeftProps,\n NativeStackHeaderRightProps,\n} from '@react-navigation/native-stack'\nimport { ColorValue, Platform, StyleSheet } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { isLiquidGlassEnabled } from '../../utils/liquid_glass'\nimport { Icon } from './icon'\nimport { TextButton } from './text_button'\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\ninterface HeaderDoneButtonProps extends NativeStackHeaderRightProps {\n navigation: { goBack: () => void; getState: () => any }\n}\n\nexport const HeaderDoneButton = ({ navigation, ...props }: HeaderDoneButtonProps) => {\n const state = navigation.getState()\n const isFirstScreen = state.index === 0\n\n if (!isFirstScreen) {\n return null\n }\n\n return <HeaderTextButton {...props} onPress={navigation.goBack} title=\"Done\" />\n}\n\n// The default back icon reserves trailing space for a label that\n// displayMode=\"minimal\" never shows; a custom image skips it so the glass\n// capsule hugs the glyph.\nconst renderGlassBackImage = ({ tintColor }: { tintColor: string }) => (\n <Icon name=\"general.leftChevron\" size={18} color={tintColor} />\n)\n\n// The iOS 26 glass capsule manages its own insets — negative margins clip\n// the button against the capsule edge.\nexport const createMinimalHeaderBackButton =\n ({ onPress }: { onPress: () => void }) =>\n (props: NativeStackHeaderLeftProps) => (\n <HeaderBackButton\n style={\n isLiquidGlassEnabled()\n ? undefined\n : {\n marginLeft: Platform.select({ ios: -8, default: -3 }),\n marginRight: Platform.select({ ios: 0, default: 30 }),\n }\n }\n backImage={isLiquidGlassEnabled() ? renderGlassBackImage : undefined}\n displayMode=\"minimal\"\n onPress={onPress}\n {...props}\n />\n )\n\n// Under glass the native minimal back button suffices; pre-26 needs the\n// custom button and its layout nudges.\nexport const composeHeaderOptions = ({\n title,\n onPress,\n}: {\n title: string\n onPress: () => void\n}) => ({\n title,\n ...(isLiquidGlassEnabled() ? {} : { headerLeft: createMinimalHeaderBackButton({ onPress }) }),\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
|
+
{"version":3,"file":"platform_modal_header_buttons.js","sourceRoot":"","sources":["../../../src/components/display/platform_modal_header_buttons.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderBackButton, HeaderButton, PlatformPressable } from '@react-navigation/elements'\nimport { useNavigation } from '@react-navigation/native'\nimport type {\n NativeStackHeaderItemProps,\n NativeStackNavigationOptions,\n} from '@react-navigation/native-stack'\nimport { useLayoutEffect } from 'react'\nimport { ColorValue, Platform, StyleSheet } from 'react-native'\nimport type { SFSymbol } from 'sf-symbols-typescript'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport { Icon, type IconString } from './icon'\nimport { TextButton } from './text_button'\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 createTextHeaderRight =\n ({ onPress, title, disabled }: HeaderTextButtonProps) =>\n (props: NativeStackHeaderItemProps) => (\n <HeaderTextButton {...props} onPress={onPress} title={title} disabled={disabled} />\n )\n\nexport type OptionsDecorator = (\n options: NativeStackNavigationOptions\n) => NativeStackNavigationOptions\n\nexport const composeOptions = (\n base: NativeStackNavigationOptions,\n ...decorators: OptionsDecorator[]\n): NativeStackNavigationOptions => decorators.reduce((options, decorate) => decorate(options), base)\n\ninterface TextButtonDecoratorProps {\n text: string\n onPress: () => void\n disabled?: boolean\n}\n\nexport const withRightText =\n ({ text, onPress, disabled }: TextButtonDecoratorProps): OptionsDecorator =>\n options => ({\n ...options,\n headerRight: createTextHeaderRight({ onPress, title: text, disabled }),\n unstable_headerRightItems: () => [{ type: 'button' as const, label: text, onPress, disabled }],\n })\n\nconst HEADER_ICON_SIZE = 17\nconst HEADER_GLASS_BUTTON_SIZE = 44\nconst HEADER_BAR_INSET = 16\nconst HEADER_SLOT_GAP = 12\n\nexport const useHeaderSlotReserve = (): number => {\n const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })\n\n return HEADER_BAR_INSET + HEADER_GLASS_BUTTON_SIZE * fontScale + HEADER_SLOT_GAP\n}\n\nconst HEADER_FALLBACK_HIT_SLOP = 14\n\nconst iconStyles = StyleSheet.create({\n disabled: {\n opacity: 0.4,\n },\n fallbackButton: {\n alignItems: 'center',\n justifyContent: 'center',\n paddingHorizontal: 8,\n },\n fallbackButtonLeft: {\n marginRight: Platform.select({ android: 16, default: 0 }),\n },\n})\n\nconst SF_SYMBOL_NAMES: Partial<Record<IconString, SFSymbol>> = {\n 'general.x': 'xmark',\n 'general.check': 'checkmark',\n 'general.upArrow': 'arrow.up',\n 'general.leftChevron': 'chevron.left',\n}\n\nconst sfSymbolFor = (icon: IconString): SFSymbol => {\n const name = SF_SYMBOL_NAMES[icon]\n\n if (!name) throw new Error(`No SF Symbol mapped for icon \"${icon}\" — add one to SF_SYMBOL_NAMES.`)\n\n return name\n}\n\nexport interface HeaderIconProps {\n icon: IconString\n accessibilityLabel: string\n onPress: () => void\n disabled?: boolean\n prominent?: boolean\n tintColor?: ColorValue\n}\n\nconst createHeaderIconItem = ({\n icon,\n accessibilityLabel,\n onPress,\n disabled,\n prominent,\n tintColor,\n}: HeaderIconProps) => ({\n type: 'button' as const,\n label: '',\n accessibilityLabel,\n onPress,\n disabled,\n icon: { type: 'sfSymbol' as const, name: sfSymbolFor(icon) },\n ...(prominent ? { variant: 'prominent' as const, tintColor } : {}),\n})\n\nconst createHeaderIconElement =\n (position: 'left' | 'right') =>\n ({ icon, accessibilityLabel, onPress, disabled, tintColor }: HeaderIconProps) =>\n () => (\n <PlatformPressable\n onPress={onPress}\n disabled={disabled}\n hitSlop={HEADER_FALLBACK_HIT_SLOP}\n accessibilityRole=\"button\"\n accessibilityLabel={accessibilityLabel}\n style={[\n iconStyles.fallbackButton,\n position === 'left' && iconStyles.fallbackButtonLeft,\n disabled && iconStyles.disabled,\n ]}\n >\n <Icon name={icon} size={HEADER_ICON_SIZE} color={tintColor} />\n </PlatformPressable>\n )\n\nexport const withRightIcon =\n (props: HeaderIconProps): OptionsDecorator =>\n options => ({\n ...options,\n headerRight: createHeaderIconElement('right')(props),\n unstable_headerRightItems: () => [createHeaderIconItem(props)],\n })\n\nexport const withLeftIcon =\n (props: HeaderIconProps): OptionsDecorator =>\n options => ({\n ...options,\n headerLeft: createHeaderIconElement('left')(props),\n unstable_headerLeftItems: () => [createHeaderIconItem(props)],\n })\n\nexport const withRightClose = ({ onPress }: { onPress: () => void }) =>\n withRightIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })\n\nexport const withLeftClose = ({ onPress }: { onPress: () => void }) =>\n withLeftIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })\n\nexport const withRightDone = ({ onPress }: { onPress: () => void }) =>\n withRightIcon({ icon: 'general.check', accessibilityLabel: 'Done', onPress })\n\nconst createMinimalHeaderBackElement =\n ({ onPress }: { onPress: () => void }) =>\n (props: NativeStackHeaderItemProps) => (\n <HeaderBackButton\n style={Platform.select({\n ios: { marginLeft: -8 },\n default: { marginLeft: -3, marginRight: 30 },\n })}\n displayMode=\"minimal\"\n onPress={onPress}\n {...props}\n />\n )\n\nexport const withMinimalBack =\n ({ onPress }: { onPress: () => void }): OptionsDecorator =>\n options => ({\n ...options,\n headerLeft: createMinimalHeaderBackElement({ onPress }),\n unstable_headerLeftItems: () => [\n createHeaderIconItem({ icon: 'general.leftChevron', accessibilityLabel: 'Back', onPress }),\n ],\n })\n\ntype UseHeaderRightOptions = {\n onPress: () => void\n disabled?: boolean\n enabled?: boolean\n} & (\n | (Omit<HeaderIconProps, 'tintColor'> & { title?: never })\n | { title: string; icon?: never; accessibilityLabel?: never; prominent?: never }\n)\n\nexport const useHeaderRight = (options: UseHeaderRightOptions) => {\n const navigation = useNavigation()\n const { colors } = useTheme()\n const { onPress, disabled, enabled = true } = options\n const icon = options.icon\n const label = options.icon !== undefined ? options.accessibilityLabel : options.title\n const prominent = options.icon !== undefined ? options.prominent : undefined\n\n useLayoutEffect(() => {\n if (!enabled) {\n navigation.setOptions({ headerRight: () => null, unstable_headerRightItems: undefined })\n return\n }\n\n const decorate = icon\n ? withRightIcon({\n icon,\n accessibilityLabel: label,\n onPress,\n disabled,\n prominent,\n tintColor: prominent ? colors.interaction : undefined,\n })\n : withRightText({ text: label, onPress, disabled })\n\n navigation.setOptions(decorate({}))\n }, [colors.interaction, disabled, enabled, icon, label, navigation, onPress, prominent])\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"]}
|
|
@@ -5,12 +5,18 @@ import type { ButtonProps, TextButtonProps } from '../display';
|
|
|
5
5
|
import { IconString } from '../display';
|
|
6
6
|
/**
|
|
7
7
|
* Screen options for the formsheet's NativeStackNavigation route
|
|
8
|
+
*
|
|
9
|
+
* Returns a factory rather than an object because callers assign it at module
|
|
10
|
+
* scope, which runs before ChatProvider reports the host's liquid glass
|
|
11
|
+
* capability. React Navigation calls the factory per render, so the sheet
|
|
12
|
+
* corner radius is resolved once that capability is known.
|
|
13
|
+
*
|
|
8
14
|
* @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.
|
|
9
15
|
* @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.
|
|
10
16
|
* @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions
|
|
11
|
-
* @returns {NativeStackNavigationOptions}
|
|
17
|
+
* @returns {() => NativeStackNavigationOptions} Factory producing merged NativeStackNavigationOptions
|
|
12
18
|
*/
|
|
13
|
-
export declare const getFormSheetScreenOptions: ({ headerTitle, sheetAllowedDetents, ...rest }?: NativeStackNavigationOptions) => NativeStackNavigationOptions;
|
|
19
|
+
export declare const getFormSheetScreenOptions: ({ headerTitle, sheetAllowedDetents, ...rest }?: NativeStackNavigationOptions) => () => NativeStackNavigationOptions;
|
|
14
20
|
type FormSheetComponents = {
|
|
15
21
|
Root: React.FC<FormSheetRootProps>;
|
|
16
22
|
Action: React.FC<FormSheetActionProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form_sheet.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAyB,UAAU,EAAoB,MAAM,YAAY,CAAA;AAMhF
|
|
1
|
+
{"version":3,"file":"form_sheet.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAyB,UAAU,EAAoB,MAAM,YAAY,CAAA;AAMhF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB,GACnC,gDAAwD,4BAAiC,WACtF,4BAQF,CAAA;AAYJ,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAClC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAA;IACtC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAA;IACtC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAA;IAChD,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAA;IACpD,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAAC,CAAA;IAC1D,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAA;CACnD,CAAA;wBAE2B,mBAAmB;AAA/C,wBAA+C;AAC/C,YAAY,EACV,oBAAoB,EACpB,2BAA2B,EAC3B,0BAA0B,EAC1B,oBAAoB,EACpB,8BAA8B,EAC9B,yBAAyB,EACzB,kBAAkB,GACnB,CAAA;AAMD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAClC;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,uBAA8B,GAC/B,EAAE,kBAAkB,2CASpB;yBAde,aAAa;;;AAmC7B,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAkBD,UAAU,yBAAyB;IACjC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAsBD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAiBD,UAAU,8BACR,SAAQ,IAAI,CAAC,eAAe,EAAE,uBAAuB,GAAG,aAAa,CAAC;IACtE,QAAQ,EAAE,MAAM,CAAA;CACjB;AAoBD,UAAU,0BACR,SAAQ,IAAI,CAAC,WAAW,EAAE,uBAAuB,GAAG,aAAa,CAAC;CAAG;AAmBvE,QAAA,MAAM,6BAA6B;;;CAGzB,CAAA;AAEV,KAAK,8BAA8B,GACjC,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,OAAO,6BAA6B,CAAC,CAAA;AAEpF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,UAAU,CAAC,EAAE,8BAA8B,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB"}
|
|
@@ -3,23 +3,29 @@ import { PlatformPressable, useHeaderHeight } from '@react-navigation/elements';
|
|
|
3
3
|
import { Platform, StyleSheet, View, useWindowDimensions, } from 'react-native';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { useTheme } from '../../hooks';
|
|
6
|
-
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
|
|
6
|
+
import { isLiquidGlassEnabled, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
|
|
7
7
|
import { Button, Heading, Icon, Text, TextButton } from '../display';
|
|
8
8
|
// =================================
|
|
9
9
|
// ====== Exports ==================
|
|
10
10
|
// =================================
|
|
11
11
|
/**
|
|
12
12
|
* Screen options for the formsheet's NativeStackNavigation route
|
|
13
|
+
*
|
|
14
|
+
* Returns a factory rather than an object because callers assign it at module
|
|
15
|
+
* scope, which runs before ChatProvider reports the host's liquid glass
|
|
16
|
+
* capability. React Navigation calls the factory per render, so the sheet
|
|
17
|
+
* corner radius is resolved once that capability is known.
|
|
18
|
+
*
|
|
13
19
|
* @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.
|
|
14
20
|
* @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.
|
|
15
21
|
* @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions
|
|
16
|
-
* @returns {NativeStackNavigationOptions}
|
|
22
|
+
* @returns {() => NativeStackNavigationOptions} Factory producing merged NativeStackNavigationOptions
|
|
17
23
|
*/
|
|
18
|
-
export const getFormSheetScreenOptions = ({ headerTitle, sheetAllowedDetents = [0.25], ...rest } = {}) => ({
|
|
24
|
+
export const getFormSheetScreenOptions = ({ headerTitle, sheetAllowedDetents = [0.25], ...rest } = {}) => () => ({
|
|
19
25
|
presentation: 'formSheet',
|
|
20
26
|
headerShown: false,
|
|
21
27
|
sheetAllowedDetents,
|
|
22
|
-
sheetCornerRadius: 16,
|
|
28
|
+
sheetCornerRadius: isLiquidGlassEnabled() ? undefined : 16,
|
|
23
29
|
sheetGrabberVisible: true,
|
|
24
30
|
headerTitle,
|
|
25
31
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form_sheet.js","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable, useHeaderHeight } from '@react-navigation/elements'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React, { ReactNode } from 'react'\nimport {\n Platform,\n StyleSheet,\n View,\n useWindowDimensions,\n type AccessibilityRole,\n type StyleProp,\n type ViewStyle,\n} from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport type { ButtonProps, TextButtonProps } from '../display'\nimport { Button, Heading, Icon, IconString, Text, TextButton } from '../display'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\n/**\n * Screen options for the formsheet's NativeStackNavigation route\n * @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.\n * @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.\n * @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions\n * @returns {NativeStackNavigationOptions} Merged NativeStackNavigationOptions\n */\nexport const getFormSheetScreenOptions = ({\n headerTitle,\n sheetAllowedDetents = [0.25],\n ...rest\n}: NativeStackNavigationOptions = {}): NativeStackNavigationOptions => ({\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents,\n sheetCornerRadius: 16,\n sheetGrabberVisible: true,\n headerTitle,\n ...rest,\n})\n\nconst FormSheet = {\n Root: FormSheetRoot,\n Action: FormSheetAction,\n Header: FormSheetHeader,\n HeaderTitle: FormSheetHeaderTitle,\n HeaderActions: FormSheetHeaderActions,\n HeaderTextButton: FormSheetHeaderTextButton,\n HeaderButton: FormSheetHeaderButton,\n} as const\n\ntype FormSheetComponents = {\n Root: React.FC<FormSheetRootProps>\n Action: React.FC<FormSheetActionProps>\n Header: React.FC<FormSheetHeaderProps>\n HeaderTitle: React.FC<FormSheetHeaderTitleProps>\n HeaderActions: React.FC<FormSheetHeaderActionsProps>\n HeaderTextButton: React.FC<FormSheetHeaderTextButtonProps>\n HeaderButton: React.FC<FormSheetHeaderButtonProps>\n}\n\nexport default FormSheet as FormSheetComponents\nexport type {\n FormSheetActionProps,\n FormSheetHeaderActionsProps,\n FormSheetHeaderButtonProps,\n FormSheetHeaderProps,\n FormSheetHeaderTextButtonProps,\n FormSheetHeaderTitleProps,\n FormSheetRootProps,\n}\n\n// ====================================\n// ====== ActionsFormSheetRoot ========\n// ====================================\n\ninterface FormSheetRootProps {\n children: ReactNode\n style?: StyleProp<ViewStyle>\n contentStyle?: StyleProp<ViewStyle>\n showAndroidSheetGrabber?: boolean\n}\n\nexport function FormSheetRoot({\n children,\n style,\n contentStyle,\n showAndroidSheetGrabber = true,\n}: FormSheetRootProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.container, style]} collapsable={false}>\n <View style={[styles.content, contentStyle]}>{children}</View>\n {showAndroidSheetGrabber && <AndroidSheetGrabber />}\n </View>\n )\n}\n\nFormSheetRoot.displayName = 'FormSheet.Root'\n\n// ====================================\n// ====== AndroidSheetGrabber =========\n// ====================================\n\nfunction AndroidSheetGrabber() {\n const styles = useStyles()\n\n return Platform.select({\n android: <View style={styles.androidSheetGrabber} />,\n ios: null,\n })\n}\n\n// ====================================\n// ====== FormSheetHeader =============\n// ====================================\n\ninterface FormSheetHeaderProps {\n children: ReactNode\n style?: StyleProp<ViewStyle>\n}\n\nfunction FormSheetHeader({ children, style }: FormSheetHeaderProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.header, style]}>\n <View style={styles.headerContent}>{children}</View>\n </View>\n )\n}\n\nFormSheetHeader.displayName = 'FormSheet.Header'\n\n// ====================================\n// ====== FormSheetHeaderTitle ========\n// ====================================\n\ninterface FormSheetHeaderTitleProps {\n children: ReactNode\n}\n\nfunction FormSheetHeaderTitle({ children }: FormSheetHeaderTitleProps) {\n const styles = useStyles()\n\n return (\n <Heading\n variant=\"h3\"\n style={styles.headerTitle}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n >\n {children}\n </Heading>\n )\n}\n\nFormSheetHeaderTitle.displayName = 'FormSheet.HeaderTitle'\n\n// ====================================\n// ====== FormSheetHeaderActions ======\n// ====================================\n\ninterface FormSheetHeaderActionsProps {\n children: ReactNode\n}\n\nfunction FormSheetHeaderActions({ children }: FormSheetHeaderActionsProps) {\n const styles = useStyles()\n\n return <View style={styles.headerActions}>{children}</View>\n}\n\nFormSheetHeaderActions.displayName = 'FormSheet.HeaderActions'\n\n// ===========================================\n// ====== FormSheetHeaderTextButton ==========\n// ===========================================\n\n// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.\n// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.\n// Triggering this prop will display an almost full screen iOS a11y button.\ninterface FormSheetHeaderTextButtonProps\n extends Omit<TextButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {\n children: string\n}\n\nfunction FormSheetHeaderTextButton(props: FormSheetHeaderTextButtonProps) {\n return (\n <TextButton\n {...props}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={props.children}\n />\n )\n}\n\nFormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'\n\n// =========================================\n// ====== FormSheetHeaderButton ============\n// =========================================\n\n// Same `onLongPress`note as `FormSheetHeaderTextButtonProps`\ninterface FormSheetHeaderButtonProps\n extends Omit<ButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {}\n\nfunction FormSheetHeaderButton(props: FormSheetHeaderButtonProps) {\n return (\n <Button\n {...props}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={props.title}\n />\n )\n}\n\nFormSheetHeaderButton.displayName = 'FormSheet.HeaderButton'\n\n// ====================================\n// ====== ActionsFormSheetAction ======\n// ====================================\n\nconst FORM_SHEET_ACTION_APPEARANCES = {\n neutral: 'neutral',\n danger: 'danger',\n} as const\n\ntype FormSheetActionAppearanceUnion =\n (typeof FORM_SHEET_ACTION_APPEARANCES)[keyof typeof FORM_SHEET_ACTION_APPEARANCES]\n\ninterface FormSheetActionProps {\n title: string\n iconName?: IconString\n onPress: () => void\n accessibilityLabel?: string\n accessibilityHint?: string\n accessibilityRole?: AccessibilityRole\n appearance?: FormSheetActionAppearanceUnion\n disabled?: boolean\n disabledReason?: string\n}\n\nfunction FormSheetAction({\n title,\n iconName,\n onPress,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n appearance = 'neutral',\n disabled = false,\n disabledReason,\n}: FormSheetActionProps) {\n const styles = useStyles({ appearance, disabled })\n\n return (\n <PlatformPressable\n onPress={onPress}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={\n accessibilityHint ?? (disabled && disabledReason ? disabledReason : undefined)\n }\n accessibilityRole={accessibilityRole}\n style={styles.actionPressable}\n disabled={disabled}\n >\n {iconName && (\n <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />\n )}\n <View style={styles.actionTextBlock}>\n <Text style={styles.actionTitle}>{title}</Text>\n {disabled && disabledReason && (\n <Text style={styles.actionDisabledReason}>{disabledReason}</Text>\n )}\n </View>\n </PlatformPressable>\n )\n}\n\nFormSheetAction.displayName = 'FormSheet.Action'\n\n// ==================================\n// ====== Styles ====================\n// ==================================\n\ninterface Styles {\n appearance?: FormSheetActionAppearanceUnion\n disabled?: boolean\n}\n\nconst useStyles = ({ appearance = 'neutral', disabled = false }: Styles = {}) => {\n const { colors } = useTheme()\n const { height } = useWindowDimensions()\n const { bottom, top } = useSafeAreaInsets()\n const headerHeight = useHeaderHeight()\n\n const containerHeight = Platform.select({\n ios: height - top - headerHeight,\n default: null,\n })\n\n const appearanceColorsMap = {\n neutral: {\n iconColor: colors.iconColorDefaultPrimary,\n textColor: colors.textColorDefaultPrimary,\n },\n danger: {\n iconColor: colors.fillColorStatusErrorMedium,\n textColor: colors.fillColorStatusErrorMedium,\n },\n }\n\n return StyleSheet.create({\n container: {\n justifyContent: 'flex-start',\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: colors.fillColorNeutral100Inverted,\n height: containerHeight,\n ...Platform.select({\n ios: {\n flexGrow: 1, // Ensures the FormSheet children respond to the formsheet height changing on iOS\n },\n android: {\n maxHeight: '100%', // Ensures lists to scroll on Android\n },\n }),\n },\n androidSheetGrabber: {\n position: 'absolute',\n top: 5,\n width: 34,\n height: 5,\n backgroundColor: colors.fillColorNeutral040,\n borderRadius: 100,\n alignSelf: 'center',\n },\n content: {\n ...Platform.select({\n android: {\n maxHeight: '100%', // Ensures content above a list (e.g. FormSheet.Header) don't subtract from the FormSheet's height\n },\n }),\n },\n header: {\n paddingHorizontal: 16,\n paddingTop: 20,\n paddingBottom: 16,\n backgroundColor: colors.fillColorNeutral100Inverted,\n gap: 16,\n borderBottomWidth: 1,\n borderBottomColor: colors.borderColorDefaultBase,\n },\n headerContent: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n headerTitle: {\n textAlign: 'left',\n flex: 1,\n },\n headerActions: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 16,\n },\n actionPressable: {\n flexDirection: 'row',\n alignItems: 'center',\n paddingVertical: 12,\n paddingHorizontal: 16,\n gap: 8,\n },\n actionIcon: {\n color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].iconColor,\n },\n actionTextBlock: {\n flex: 1,\n },\n actionTitle: {\n color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].textColor,\n },\n actionDisabledReason: {\n color: colors.textColorDefaultDisabled,\n fontSize: 12,\n },\n })\n}\n"]}
|
|
1
|
+
{"version":3,"file":"form_sheet.js","sourceRoot":"","sources":["../../../src/components/primitive/form_sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable, useHeaderHeight } from '@react-navigation/elements'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React, { ReactNode } from 'react'\nimport {\n Platform,\n StyleSheet,\n View,\n useWindowDimensions,\n type AccessibilityRole,\n type StyleProp,\n type ViewStyle,\n} from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { isLiquidGlassEnabled, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport type { ButtonProps, TextButtonProps } from '../display'\nimport { Button, Heading, Icon, IconString, Text, TextButton } from '../display'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\n/**\n * Screen options for the formsheet's NativeStackNavigation route\n *\n * Returns a factory rather than an object because callers assign it at module\n * scope, which runs before ChatProvider reports the host's liquid glass\n * capability. React Navigation calls the factory per render, so the sheet\n * corner radius is resolved once that capability is known.\n *\n * @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.\n * @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.\n * @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions\n * @returns {() => NativeStackNavigationOptions} Factory producing merged NativeStackNavigationOptions\n */\nexport const getFormSheetScreenOptions =\n ({ headerTitle, sheetAllowedDetents = [0.25], ...rest }: NativeStackNavigationOptions = {}) =>\n (): NativeStackNavigationOptions => ({\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents,\n sheetCornerRadius: isLiquidGlassEnabled() ? undefined : 16,\n sheetGrabberVisible: true,\n headerTitle,\n ...rest,\n })\n\nconst FormSheet = {\n Root: FormSheetRoot,\n Action: FormSheetAction,\n Header: FormSheetHeader,\n HeaderTitle: FormSheetHeaderTitle,\n HeaderActions: FormSheetHeaderActions,\n HeaderTextButton: FormSheetHeaderTextButton,\n HeaderButton: FormSheetHeaderButton,\n} as const\n\ntype FormSheetComponents = {\n Root: React.FC<FormSheetRootProps>\n Action: React.FC<FormSheetActionProps>\n Header: React.FC<FormSheetHeaderProps>\n HeaderTitle: React.FC<FormSheetHeaderTitleProps>\n HeaderActions: React.FC<FormSheetHeaderActionsProps>\n HeaderTextButton: React.FC<FormSheetHeaderTextButtonProps>\n HeaderButton: React.FC<FormSheetHeaderButtonProps>\n}\n\nexport default FormSheet as FormSheetComponents\nexport type {\n FormSheetActionProps,\n FormSheetHeaderActionsProps,\n FormSheetHeaderButtonProps,\n FormSheetHeaderProps,\n FormSheetHeaderTextButtonProps,\n FormSheetHeaderTitleProps,\n FormSheetRootProps,\n}\n\n// ====================================\n// ====== ActionsFormSheetRoot ========\n// ====================================\n\ninterface FormSheetRootProps {\n children: ReactNode\n style?: StyleProp<ViewStyle>\n contentStyle?: StyleProp<ViewStyle>\n showAndroidSheetGrabber?: boolean\n}\n\nexport function FormSheetRoot({\n children,\n style,\n contentStyle,\n showAndroidSheetGrabber = true,\n}: FormSheetRootProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.container, style]} collapsable={false}>\n <View style={[styles.content, contentStyle]}>{children}</View>\n {showAndroidSheetGrabber && <AndroidSheetGrabber />}\n </View>\n )\n}\n\nFormSheetRoot.displayName = 'FormSheet.Root'\n\n// ====================================\n// ====== AndroidSheetGrabber =========\n// ====================================\n\nfunction AndroidSheetGrabber() {\n const styles = useStyles()\n\n return Platform.select({\n android: <View style={styles.androidSheetGrabber} />,\n ios: null,\n })\n}\n\n// ====================================\n// ====== FormSheetHeader =============\n// ====================================\n\ninterface FormSheetHeaderProps {\n children: ReactNode\n style?: StyleProp<ViewStyle>\n}\n\nfunction FormSheetHeader({ children, style }: FormSheetHeaderProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.header, style]}>\n <View style={styles.headerContent}>{children}</View>\n </View>\n )\n}\n\nFormSheetHeader.displayName = 'FormSheet.Header'\n\n// ====================================\n// ====== FormSheetHeaderTitle ========\n// ====================================\n\ninterface FormSheetHeaderTitleProps {\n children: ReactNode\n}\n\nfunction FormSheetHeaderTitle({ children }: FormSheetHeaderTitleProps) {\n const styles = useStyles()\n\n return (\n <Heading\n variant=\"h3\"\n style={styles.headerTitle}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n >\n {children}\n </Heading>\n )\n}\n\nFormSheetHeaderTitle.displayName = 'FormSheet.HeaderTitle'\n\n// ====================================\n// ====== FormSheetHeaderActions ======\n// ====================================\n\ninterface FormSheetHeaderActionsProps {\n children: ReactNode\n}\n\nfunction FormSheetHeaderActions({ children }: FormSheetHeaderActionsProps) {\n const styles = useStyles()\n\n return <View style={styles.headerActions}>{children}</View>\n}\n\nFormSheetHeaderActions.displayName = 'FormSheet.HeaderActions'\n\n// ===========================================\n// ====== FormSheetHeaderTextButton ==========\n// ===========================================\n\n// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.\n// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.\n// Triggering this prop will display an almost full screen iOS a11y button.\ninterface FormSheetHeaderTextButtonProps\n extends Omit<TextButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {\n children: string\n}\n\nfunction FormSheetHeaderTextButton(props: FormSheetHeaderTextButtonProps) {\n return (\n <TextButton\n {...props}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={props.children}\n />\n )\n}\n\nFormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'\n\n// =========================================\n// ====== FormSheetHeaderButton ============\n// =========================================\n\n// Same `onLongPress`note as `FormSheetHeaderTextButtonProps`\ninterface FormSheetHeaderButtonProps\n extends Omit<ButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {}\n\nfunction FormSheetHeaderButton(props: FormSheetHeaderButtonProps) {\n return (\n <Button\n {...props}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={props.title}\n />\n )\n}\n\nFormSheetHeaderButton.displayName = 'FormSheet.HeaderButton'\n\n// ====================================\n// ====== ActionsFormSheetAction ======\n// ====================================\n\nconst FORM_SHEET_ACTION_APPEARANCES = {\n neutral: 'neutral',\n danger: 'danger',\n} as const\n\ntype FormSheetActionAppearanceUnion =\n (typeof FORM_SHEET_ACTION_APPEARANCES)[keyof typeof FORM_SHEET_ACTION_APPEARANCES]\n\ninterface FormSheetActionProps {\n title: string\n iconName?: IconString\n onPress: () => void\n accessibilityLabel?: string\n accessibilityHint?: string\n accessibilityRole?: AccessibilityRole\n appearance?: FormSheetActionAppearanceUnion\n disabled?: boolean\n disabledReason?: string\n}\n\nfunction FormSheetAction({\n title,\n iconName,\n onPress,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n appearance = 'neutral',\n disabled = false,\n disabledReason,\n}: FormSheetActionProps) {\n const styles = useStyles({ appearance, disabled })\n\n return (\n <PlatformPressable\n onPress={onPress}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={\n accessibilityHint ?? (disabled && disabledReason ? disabledReason : undefined)\n }\n accessibilityRole={accessibilityRole}\n style={styles.actionPressable}\n disabled={disabled}\n >\n {iconName && (\n <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />\n )}\n <View style={styles.actionTextBlock}>\n <Text style={styles.actionTitle}>{title}</Text>\n {disabled && disabledReason && (\n <Text style={styles.actionDisabledReason}>{disabledReason}</Text>\n )}\n </View>\n </PlatformPressable>\n )\n}\n\nFormSheetAction.displayName = 'FormSheet.Action'\n\n// ==================================\n// ====== Styles ====================\n// ==================================\n\ninterface Styles {\n appearance?: FormSheetActionAppearanceUnion\n disabled?: boolean\n}\n\nconst useStyles = ({ appearance = 'neutral', disabled = false }: Styles = {}) => {\n const { colors } = useTheme()\n const { height } = useWindowDimensions()\n const { bottom, top } = useSafeAreaInsets()\n const headerHeight = useHeaderHeight()\n\n const containerHeight = Platform.select({\n ios: height - top - headerHeight,\n default: null,\n })\n\n const appearanceColorsMap = {\n neutral: {\n iconColor: colors.iconColorDefaultPrimary,\n textColor: colors.textColorDefaultPrimary,\n },\n danger: {\n iconColor: colors.fillColorStatusErrorMedium,\n textColor: colors.fillColorStatusErrorMedium,\n },\n }\n\n return StyleSheet.create({\n container: {\n justifyContent: 'flex-start',\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: colors.fillColorNeutral100Inverted,\n height: containerHeight,\n ...Platform.select({\n ios: {\n flexGrow: 1, // Ensures the FormSheet children respond to the formsheet height changing on iOS\n },\n android: {\n maxHeight: '100%', // Ensures lists to scroll on Android\n },\n }),\n },\n androidSheetGrabber: {\n position: 'absolute',\n top: 5,\n width: 34,\n height: 5,\n backgroundColor: colors.fillColorNeutral040,\n borderRadius: 100,\n alignSelf: 'center',\n },\n content: {\n ...Platform.select({\n android: {\n maxHeight: '100%', // Ensures content above a list (e.g. FormSheet.Header) don't subtract from the FormSheet's height\n },\n }),\n },\n header: {\n paddingHorizontal: 16,\n paddingTop: 20,\n paddingBottom: 16,\n backgroundColor: colors.fillColorNeutral100Inverted,\n gap: 16,\n borderBottomWidth: 1,\n borderBottomColor: colors.borderColorDefaultBase,\n },\n headerContent: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n headerTitle: {\n textAlign: 'left',\n flex: 1,\n },\n headerActions: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 16,\n },\n actionPressable: {\n flexDirection: 'row',\n alignItems: 'center',\n paddingVertical: 12,\n paddingHorizontal: 16,\n gap: 8,\n },\n actionIcon: {\n color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].iconColor,\n },\n actionTextBlock: {\n flex: 1,\n },\n actionTitle: {\n color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].textColor,\n },\n actionDisabledReason: {\n color: colors.textColorDefaultDisabled,\n fontSize: 12,\n },\n })\n}\n"]}
|