@proximus/lavender-bottomsheet-native 2.1.1-alpha.5 → 2.1.1-alpha.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/BottomSheet.d.ts +10 -2
  2. package/dist/BottomSheet.d.ts.map +1 -1
  3. package/dist/BottomSheet.js +24 -13
  4. package/package.json +1 -1
package/dist/BottomSheet.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import React, { ReactElement } from 'react';
1
+ import React, { ReactElement, ReactNode } from 'react';
2
2
  import { SheetSize } from '@solidx/react-native-true-sheet';
3
3
  export interface IBottomSheetProps {
4
4
  opened?: boolean;
5
5
  title?: string;
6
6
  subtitle?: string;
7
- actionButtonTitle: string;
7
+ actionButtonTitle?: string;
8
8
  actionButtonAccessibilityLabel?: string;
9
9
  actionButtonAccessibilityHint?: string;
10
10
  onActionButtonPress?: () => void;
@@ -23,8 +23,16 @@ export interface IBottomSheetProps {
23
23
  sizes?: SheetSize[];
24
24
  dimBackground?: boolean;
25
25
  allowScroll?: boolean;
26
+ /**
27
+ * Caps the overall height of the sheet (in pixels). When the content is
28
+ * taller than this, the scrollable area (see `allowScroll`) scrolls
29
+ * internally instead of the sheet growing. Forwarded to TrueSheet's own
30
+ * `maxHeight`, which is what enables TrueSheet's nested-scroll coordination.
31
+ */
32
+ maxHeight?: number;
26
33
  testID?: string;
27
34
  children?: ReactElement | ReactElement[];
35
+ customButtons?: ReactNode;
28
36
  }
29
37
  export declare function PxBottomSheet(props: IBottomSheetProps): React.JSX.Element;
30
38
  export declare function TitleZone(props: IBottomSheetProps): React.JSX.Element;
package/dist/BottomSheet.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAa,MAAM,iCAAiC,CAAC;AAUvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,uCAAuC,CAAC,EAAE,MAAM,CAAC;IACjD,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C,2BAA2B,CAAC,EAAE,MAAM,IAAI,CAAC;IACzC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CAC1C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,qBAqDrD;AACD,wBAAgB,SAAS,CAAC,KAAK,EAAE,iBAAiB,qBAiCjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,qBA4DlD"}
1
+ {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAa,MAAM,iCAAiC,CAAC;AAUvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,uCAAuC,CAAC,EAAE,MAAM,CAAC;IACjD,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C,2BAA2B,CAAC,EAAE,MAAM,IAAI,CAAC;IACzC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAEzC,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,qBAsErD;AACD,wBAAgB,SAAS,CAAC,KAAK,EAAE,iBAAiB,qBAiCjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,qBAsElD"}
package/dist/BottomSheet.js CHANGED
@@ -2,18 +2,18 @@ import React, { useEffect, useRef } from 'react';
2
2
  import { TrueSheet } from '@solidx/react-native-true-sheet';
3
3
  import { e2eID } from '@proximus/lavender-common-native';
4
4
  import { ScrollView, View } from 'react-native';
5
+ import { useSafeAreaInsets } from 'react-native-safe-area-context';
5
6
  import { useTheme } from '@proximus/lavender-styling-native';
6
7
  import { Body, Fonts, Header } from '@proximus/lavender-texts-native';
7
8
  import { PxSeparator } from '@proximus/lavender-separator-native';
8
9
  import { PxButton } from '@proximus/lavender-button-native';
9
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
10
10
  import { PxIcon } from '@proximus/lavender-icon-native';
11
11
  export function PxBottomSheet(props) {
12
12
  const trueSheetRef = useRef(null);
13
13
  const scrollViewRef = useRef(null);
14
- const { theme } = useTheme();
15
14
  const { bottom } = useSafeAreaInsets();
16
- const { testID = 'px-bottom-sheet', dimBackground = true, opened, onDismiss, sizes = ['auto', 'large'], } = props;
15
+ const { theme } = useTheme();
16
+ const { testID = 'px-bottom-sheet', dimBackground = true, opened, onDismiss, maxHeight, sizes = ['auto', 'large'], } = props;
17
17
  useEffect(() => {
18
18
  if (opened) {
19
19
  trueSheetRef.current?.present();
@@ -22,18 +22,24 @@ export function PxBottomSheet(props) {
22
22
  trueSheetRef.current?.dismiss();
23
23
  }
24
24
  }, [opened]);
25
- const children = props.allowScroll ? (React.createElement(ScrollView, { ref: scrollViewRef }, props.children)) : (React.createElement(React.Fragment, null, props.children));
26
- return (React.createElement(TrueSheet, { edgeToEdge: true, contentContainerStyle: {
25
+ const children = props.allowScroll ? (React.createElement(ScrollView, { contentContainerStyle: {
27
26
  padding: theme.t('PaddingLMobile').number,
28
- paddingBottom: theme.t('PaddingLMobile').number + bottom,
27
+ paddingBottom: theme.t('PaddingLMobile').number + 2 * bottom,
29
28
  gap: theme.t('SpacingLMobile').number,
30
- }, onDismiss: onDismiss, sizes: sizes, dimmed: dimBackground, scrollRef: scrollViewRef, blurTint: 'prominent',
31
- // We force the background color to be light https://pxs.tpondemand.com/restui/board.aspx?#page=bug/4850655
32
- style: { backgroundColor: theme.t('ColorBackgroundSurfaceLight') }, backgroundColor: theme.t('ColorBackgroundSurfaceLight'), ref: trueSheetRef, ...e2eID(testID) },
29
+ }, ref: scrollViewRef, nestedScrollEnabled: true, keyboardShouldPersistTaps: "handled" },
33
30
  React.createElement(TitleZone, { ...props }),
34
- children,
35
- React.createElement(PxSeparator, null),
31
+ props.children && React.createElement(View, null, props.children),
32
+ React.createElement(ButtonZone, { ...props }))) : (React.createElement(View, { style: {
33
+ padding: theme.t('PaddingLMobile').number,
34
+ paddingBottom: theme.t('PaddingLMobile').number,
35
+ gap: theme.t('SpacingLMobile').number,
36
+ } },
37
+ React.createElement(TitleZone, { ...props }),
38
+ props.children && React.createElement(View, null, props.children),
36
39
  React.createElement(ButtonZone, { ...props })));
40
+ return (React.createElement(TrueSheet, { edgeToEdge: true, onDismiss: onDismiss, sizes: sizes, maxHeight: maxHeight, dimmed: dimBackground, scrollRef: scrollViewRef, blurTint: 'prominent',
41
+ // We force the background color to be light https://pxs.tpondemand.com/restui/board.aspx?#page=bug/4850655
42
+ style: { backgroundColor: theme.t('ColorBackgroundSurfaceLight') }, backgroundColor: theme.t('ColorBackgroundSurfaceLight'), ref: trueSheetRef, ...e2eID(testID) }, children));
37
43
  }
38
44
  export function TitleZone(props) {
39
45
  const { theme } = useTheme();
@@ -52,12 +58,17 @@ export function TitleZone(props) {
52
58
  } }, subtitle))));
53
59
  }
54
60
  export function ButtonZone(props) {
55
- const { actionButtonTitle, actionButtonAccessibilityHint, actionButtonAccessibilityLabel, actionButtonTestID, onActionButtonPress, secondaryActionButtonTitle, secondaryActionButtonAccessibilityLabel, secondaryActionButtonAccessibilityHint, onSecondaryActionButtonPress, secondaryActionButtonTestID, tertiaryActionButtonTitle, tertiaryActionButtonAccessibilityLabel, tertiaryActionButtonAccessibilityHint, onTertiaryActionButtonPress, tertiaryActionButtonTestID, } = props;
61
+ const { actionButtonTitle, actionButtonAccessibilityHint, actionButtonAccessibilityLabel, actionButtonTestID, onActionButtonPress, secondaryActionButtonTitle, secondaryActionButtonAccessibilityLabel, secondaryActionButtonAccessibilityHint, onSecondaryActionButtonPress, secondaryActionButtonTestID, tertiaryActionButtonTitle, tertiaryActionButtonAccessibilityLabel, tertiaryActionButtonAccessibilityHint, onTertiaryActionButtonPress, tertiaryActionButtonTestID, customButtons, } = props;
56
62
  const { theme } = useTheme();
57
63
  return (React.createElement(View, { style: {
58
64
  gap: theme.t('SpacingSMobile').number,
59
65
  } },
66
+ actionButtonTitle ||
67
+ secondaryActionButtonTitle ||
68
+ tertiaryActionButtonTitle ||
69
+ customButtons ? (React.createElement(PxSeparator, null)) : (React.createElement(React.Fragment, null)),
60
70
  actionButtonTitle && (React.createElement(PxButton, { testID: actionButtonTestID, accessibilityLabel: actionButtonAccessibilityLabel, accessibilityHint: actionButtonAccessibilityHint, title: actionButtonTitle, onPress: onActionButtonPress, shape: secondaryActionButtonTitle ? 'alternative' : 'default' })),
61
71
  secondaryActionButtonTitle && (React.createElement(PxButton, { variant: "secondary", testID: secondaryActionButtonTestID, accessibilityLabel: secondaryActionButtonAccessibilityLabel, accessibilityHint: secondaryActionButtonAccessibilityHint, title: secondaryActionButtonTitle, onPress: onSecondaryActionButtonPress })),
62
- tertiaryActionButtonTitle && (React.createElement(PxButton, { variant: "tertiary", testID: tertiaryActionButtonTestID, accessibilityLabel: tertiaryActionButtonAccessibilityLabel, accessibilityHint: tertiaryActionButtonAccessibilityHint, title: tertiaryActionButtonTitle, onPress: onTertiaryActionButtonPress, suffix: React.createElement(PxIcon, { name: 'chevron_right' }) }))));
72
+ tertiaryActionButtonTitle && (React.createElement(PxButton, { variant: "tertiary", testID: tertiaryActionButtonTestID, accessibilityLabel: tertiaryActionButtonAccessibilityLabel, accessibilityHint: tertiaryActionButtonAccessibilityHint, title: tertiaryActionButtonTitle, onPress: onTertiaryActionButtonPress, suffix: React.createElement(PxIcon, { name: 'chevron_right' }) })),
73
+ customButtons));
63
74
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-bottomsheet-native",
3
- "version": "2.1.1-alpha.5",
3
+ "version": "2.1.1-alpha.51",
4
4
  "description": "Bottom sheet component",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",