@procivis/one-react-native-components 0.1.63 → 0.3.22

package/lib/module/ui-components/screens/qr-code-scanner-screen.js

@@ -0,0 +1,109 @@
+import React, { memo, useMemo } from 'react';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useCameraDevice } from 'react-native-vision-camera';
+import { ContrastingStatusBar } from '../../utils';
+import { colorWithAlphaComponent } from '../../utils/color';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import BlurView from '../blur/blur-view';
+import { GhostButton } from '../buttons';
+import CameraOverlay from '../camera/camera-overlay';
+import QRCodeScanner from '../camera/qr-code-scanner';
+import { CloseIcon } from '../icons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+const QRCodeScannerScreen = ({
+  codeTypes,
+  footer,
+  onQRCodeRead,
+  onClose,
+  overlayStyle,
+  noCameraView = null,
+  title
+}) => {
+  const t = useAccessibilityTranslation();
+  const insets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+  const footerView = useMemo(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if (/*#__PURE__*/React.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer;
+      return /*#__PURE__*/React.createElement(FooterComponent, null);
+    }
+  }, [footer]);
+  const minBottomBlurViewHeight = Dimensions.get('window').height * 0.15;
+  const device = useCameraDevice('back');
+  if (!device) {
+    return noCameraView;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(QRCodeScanner, {
+    cameraOverlay: /*#__PURE__*/React.createElement(CameraOverlay, {
+      style: overlayStyle
+    }),
+    codeTypes: codeTypes,
+    onQRCodeRead: onQRCodeRead,
+    style: StyleSheet.absoluteFill
+  }), /*#__PURE__*/React.createElement(ContrastingStatusBar, {
+    backgroundColor: colorScheme.black
+  }), /*#__PURE__*/React.createElement(BlurView, {
+    darkMode: true,
+    blurStyle: "soft",
+    style: [styles.topBlurView, {
+      backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5)
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.headerSection, {
+      top: insets.top
+    }]
+  }, /*#__PURE__*/React.createElement(GhostButton, {
+    icon: /*#__PURE__*/React.createElement(CloseIcon, {
+      color: colorScheme.white
+    }),
+    onPress: onClose,
+    accessibilityLabel: t('accessibility.nav.close')
+  }))), /*#__PURE__*/React.createElement(BlurView, {
+    darkMode: true,
+    blurStyle: "soft",
+    style: [styles.bottomBlurView, {
+      backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5),
+      minHeight: minBottomBlurViewHeight,
+      paddingBottom: Math.max(insets.bottom, 32)
+    }]
+  }, /*#__PURE__*/React.createElement(Typography, {
+    align: "center",
+    style: styles.title,
+    color: colorScheme.white
+  }, title), footerView));
+};
+const styles = StyleSheet.create({
+  bottomBlurView: {
+    bottom: 0,
+    position: 'absolute',
+    width: '100%'
+  },
+  container: {
+    flex: 1
+  },
+  headerSection: {
+    paddingHorizontal: 22,
+    paddingTop: 16,
+    position: 'absolute'
+  },
+  title: {
+    marginTop: 32
+  },
+  topBlurView: {
+    height: '15%',
+    position: 'absolute',
+    top: 0,
+    width: '100%'
+  }
+});
+export default /*#__PURE__*/memo(QRCodeScannerScreen);
+//# sourceMappingURL=qr-code-scanner-screen.js.map

package/lib/module/ui-components/screens/qr-code-scanner-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","Dimensions","StyleSheet","View","useSafeAreaInsets","useCameraDevice","ContrastingStatusBar","colorWithAlphaComponent","useAccessibilityTranslation","BlurView","GhostButton","CameraOverlay","QRCodeScanner","CloseIcon","Typography","useAppColorScheme","QRCodeScannerScreen","codeTypes","footer","onQRCodeRead","onClose","overlayStyle","noCameraView","title","t","insets","colorScheme","footerView","undefined","isValidElement","FooterComponent","createElement","minBottomBlurViewHeight","get","height","device","style","styles","container","cameraOverlay","absoluteFill","backgroundColor","black","darkMode","blurStyle","topBlurView","headerSection","top","icon","color","white","onPress","accessibilityLabel","bottomBlurView","minHeight","paddingBottom","Math","max","bottom","align","create","position","width","flex","paddingHorizontal","paddingTop","marginTop"],"sources":["qr-code-scanner-screen.tsx"],"sourcesContent":["import React, { FunctionComponent, memo, ReactElement, useMemo } from 'react';\nimport { Dimensions, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useCameraDevice } from 'react-native-vision-camera';\n\nimport { ContrastingStatusBar } from '../../utils';\nimport { colorWithAlphaComponent } from '../../utils/color';\nimport { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';\nimport BlurView from '../blur/blur-view';\nimport { GhostButton } from '../buttons';\nimport CameraOverlay from '../camera/camera-overlay';\nimport QRCodeScanner, { QRCodeScannerProps } from '../camera/qr-code-scanner';\nimport { CloseIcon } from '../icons';\nimport { Typography } from '../text';\nimport { useAppColorScheme } from '../theme';\n\nexport interface QRCodeScannerScreenProps {\n  codeTypes?: QRCodeScannerProps['codeTypes'];\n  footer?: React.ComponentType<any> | React.ReactElement;\n  onQRCodeRead: QRCodeScannerProps['onQRCodeRead'];\n  onClose: () => void;\n  overlayStyle?: StyleProp<ViewStyle>;\n  noCameraView?: JSX.Element;\n  title: ReactElement | string;\n}\n\nconst QRCodeScannerScreen: FunctionComponent<QRCodeScannerScreenProps> = ({\n  codeTypes,\n  footer,\n  onQRCodeRead,\n  onClose,\n  overlayStyle,\n  noCameraView = null,\n  title,\n}) => {\n  const t = useAccessibilityTranslation();\n  const insets = useSafeAreaInsets();\n  const colorScheme = useAppColorScheme();\n\n  const footerView: React.ReactElement | undefined = useMemo(() => {\n    if (!footer) {\n      return undefined;\n    }\n    if (React.isValidElement(footer)) {\n      return footer;\n    } else {\n      const FooterComponent = footer as React.ComponentType<any>;\n      return <FooterComponent />;\n    }\n  }, [footer]);\n\n  const minBottomBlurViewHeight = Dimensions.get('window').height * 0.15;\n\n  const device = useCameraDevice('back');\n  if (!device) {\n    return noCameraView;\n  }\n\n  return (\n    <View style={styles.container}>\n      <QRCodeScanner\n        cameraOverlay={<CameraOverlay style={overlayStyle} />}\n        codeTypes={codeTypes}\n        onQRCodeRead={onQRCodeRead}\n        style={StyleSheet.absoluteFill}\n      />\n      <ContrastingStatusBar backgroundColor={colorScheme.black} />\n      <BlurView\n        darkMode={true}\n        blurStyle=\"soft\"\n        style={[styles.topBlurView, { backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5) }]}>\n        <View style={[styles.headerSection, { top: insets.top }]}>\n          <GhostButton\n            icon={<CloseIcon color={colorScheme.white} />}\n            onPress={onClose}\n            accessibilityLabel={t('accessibility.nav.close')}\n          />\n        </View>\n      </BlurView>\n      <BlurView\n        darkMode={true}\n        blurStyle=\"soft\"\n        style={[\n          styles.bottomBlurView,\n          {\n            backgroundColor: colorWithAlphaComponent(colorScheme.black, 0.5),\n            minHeight: minBottomBlurViewHeight,\n            paddingBottom: Math.max(insets.bottom, 32),\n          },\n        ]}>\n        <Typography align=\"center\" style={styles.title} color={colorScheme.white}>\n          {title}\n        </Typography>\n        {footerView}\n      </BlurView>\n    </View>\n  );\n};\nconst styles = StyleSheet.create({\n  bottomBlurView: {\n    bottom: 0,\n    position: 'absolute',\n    width: '100%',\n  },\n  container: {\n    flex: 1,\n  },\n  headerSection: {\n    paddingHorizontal: 22,\n    paddingTop: 16,\n    position: 'absolute',\n  },\n  title: {\n    marginTop: 32,\n  },\n  topBlurView: {\n    height: '15%',\n    position: 'absolute',\n    top: 0,\n    width: '100%',\n  },\n});\n\nexport default memo(QRCodeScannerScreen);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAC7E,SAASC,UAAU,EAAaC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AACjF,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,eAAe,QAAQ,4BAA4B;AAE5D,SAASC,oBAAoB,QAAQ,aAAa;AAClD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,OAAOC,QAAQ,MAAM,mBAAmB;AACxC,SAASC,WAAW,QAAQ,YAAY;AACxC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,aAAa,MAA8B,2BAA2B;AAC7E,SAASC,SAAS,QAAQ,UAAU;AACpC,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,iBAAiB,QAAQ,UAAU;AAY5C,MAAMC,mBAAgE,GAAGA,CAAC;EACxEC,SAAS;EACTC,MAAM;EACNC,YAAY;EACZC,OAAO;EACPC,YAAY;EACZC,YAAY,GAAG,IAAI;EACnBC;AACF,CAAC,KAAK;EACJ,MAAMC,CAAC,GAAGhB,2BAA2B,CAAC,CAAC;EACvC,MAAMiB,MAAM,GAAGrB,iBAAiB,CAAC,CAAC;EAClC,MAAMsB,WAAW,GAAGX,iBAAiB,CAAC,CAAC;EAEvC,MAAMY,UAA0C,GAAG3B,OAAO,CAAC,MAAM;IAC/D,IAAI,CAACkB,MAAM,EAAE;MACX,OAAOU,SAAS;IAClB;IACA,iBAAI9B,KAAK,CAAC+B,cAAc,CAACX,MAAM,CAAC,EAAE;MAChC,OAAOA,MAAM;IACf,CAAC,MAAM;MACL,MAAMY,eAAe,GAAGZ,MAAkC;MAC1D,oBAAOpB,KAAA,CAAAiC,aAAA,CAACD,eAAe,MAAE,CAAC;IAC5B;EACF,CAAC,EAAE,CAACZ,MAAM,CAAC,CAAC;EAEZ,MAAMc,uBAAuB,GAAG/B,UAAU,CAACgC,GAAG,CAAC,QAAQ,CAAC,CAACC,MAAM,GAAG,IAAI;EAEtE,MAAMC,MAAM,GAAG9B,eAAe,CAAC,MAAM,CAAC;EACtC,IAAI,CAAC8B,MAAM,EAAE;IACX,OAAOb,YAAY;EACrB;EAEA,oBACExB,KAAA,CAAAiC,aAAA,CAAC5B,IAAI;IAACiC,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC5BxC,KAAA,CAAAiC,aAAA,CAACnB,aAAa;IACZ2B,aAAa,eAAEzC,KAAA,CAAAiC,aAAA,CAACpB,aAAa;MAACyB,KAAK,EAAEf;IAAa,CAAE,CAAE;IACtDJ,SAAS,EAAEA,SAAU;IACrBE,YAAY,EAAEA,YAAa;IAC3BiB,KAAK,EAAElC,UAAU,CAACsC;EAAa,CAChC,CAAC,eACF1C,KAAA,CAAAiC,aAAA,CAACzB,oBAAoB;IAACmC,eAAe,EAAEf,WAAW,CAACgB;EAAM,CAAE,CAAC,eAC5D5C,KAAA,CAAAiC,aAAA,CAACtB,QAAQ;IACPkC,QAAQ,EAAE,IAAK;IACfC,SAAS,EAAC,MAAM;IAChBR,KAAK,EAAE,CAACC,MAAM,CAACQ,WAAW,EAAE;MAAEJ,eAAe,EAAElC,uBAAuB,CAACmB,WAAW,CAACgB,KAAK,EAAE,GAAG;IAAE,CAAC;EAAE,gBAClG5C,KAAA,CAAAiC,aAAA,CAAC5B,IAAI;IAACiC,KAAK,EAAE,CAACC,MAAM,CAACS,aAAa,EAAE;MAAEC,GAAG,EAAEtB,MAAM,CAACsB;IAAI,CAAC;EAAE,gBACvDjD,KAAA,CAAAiC,aAAA,CAACrB,WAAW;IACVsC,IAAI,eAAElD,KAAA,CAAAiC,aAAA,CAAClB,SAAS;MAACoC,KAAK,EAAEvB,WAAW,CAACwB;IAAM,CAAE,CAAE;IAC9CC,OAAO,EAAE/B,OAAQ;IACjBgC,kBAAkB,EAAE5B,CAAC,CAAC,yBAAyB;EAAE,CAClD,CACG,CACE,CAAC,eACX1B,KAAA,CAAAiC,aAAA,CAACtB,QAAQ;IACPkC,QAAQ,EAAE,IAAK;IACfC,SAAS,EAAC,MAAM;IAChBR,KAAK,EAAE,CACLC,MAAM,CAACgB,cAAc,EACrB;MACEZ,eAAe,EAAElC,uBAAuB,CAACmB,WAAW,CAACgB,KAAK,EAAE,GAAG,CAAC;MAChEY,SAAS,EAAEtB,uBAAuB;MAClCuB,aAAa,EAAEC,IAAI,CAACC,GAAG,CAAChC,MAAM,CAACiC,MAAM,EAAE,EAAE;IAC3C,CAAC;EACD,gBACF5D,KAAA,CAAAiC,aAAA,CAACjB,UAAU;IAAC6C,KAAK,EAAC,QAAQ;IAACvB,KAAK,EAAEC,MAAM,CAACd,KAAM;IAAC0B,KAAK,EAAEvB,WAAW,CAACwB;EAAM,GACtE3B,KACS,CAAC,EACZI,UACO,CACN,CAAC;AAEX,CAAC;AACD,MAAMU,MAAM,GAAGnC,UAAU,CAAC0D,MAAM,CAAC;EAC/BP,cAAc,EAAE;IACdK,MAAM,EAAE,CAAC;IACTG,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE;EACT,CAAC;EACDxB,SAAS,EAAE;IACTyB,IAAI,EAAE;EACR,CAAC;EACDjB,aAAa,EAAE;IACbkB,iBAAiB,EAAE,EAAE;IACrBC,UAAU,EAAE,EAAE;IACdJ,QAAQ,EAAE;EACZ,CAAC;EACDtC,KAAK,EAAE;IACL2C,SAAS,EAAE;EACb,CAAC;EACDrB,WAAW,EAAE;IACXX,MAAM,EAAE,KAAK;IACb2B,QAAQ,EAAE,UAAU;IACpBd,GAAG,EAAE,CAAC;IACNe,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,4BAAe/D,IAAI,CAACiB,mBAAmB,CAAC","ignoreList":[]}

package/lib/module/ui-components/screens/scroll-view-screen.js

@@ -0,0 +1,85 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useOnScrollHeaderState } from '../../utils/hooks/header/on-scroll-header-state';
+import { useListContentInset } from '../../utils/hooks/list/list-content-inset';
+import { concatTestID } from '../../utils/testID';
+import NavigationHeader from '../header/navigation-header';
+import ListTitleHeader from '../list/list-title-header';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+const ScrollViewScreen = ({
+  children,
+  header,
+  modalPresentation,
+  scrollView,
+  style,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const {
+    top
+  } = useSafeAreaInsets();
+  const contentInsetsStyle = useListContentInset({
+    additionalBottomPadding: 24,
+    headerHeight: modalPresentation && Platform.OS === 'ios' ? 63 : 48,
+    modalPresentation
+  });
+  const {
+    titleVisible,
+    onScroll
+  } = useOnScrollHeaderState();
+  const {
+    contentContainerStyle,
+    ...scrollViewProps
+  } = scrollView !== null && scrollView !== void 0 ? scrollView : {};
+  let headerPaddingStyle;
+  if (!modalPresentation || Platform.OS === 'android') {
+    headerPaddingStyle = {
+      paddingTop: top
+    };
+  } else if (modalPresentation && !header.modalHandleVisible && Platform.OS === 'ios') {
+    headerPaddingStyle = styles.modalHeaderWithoutHandle;
+  }
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [styles.container, {
+      backgroundColor: colorScheme.background
+    }, style],
+    testID: testID
+  }, viewProps), /*#__PURE__*/React.createElement(ScrollView, _extends({
+    contentContainerStyle: [styles.contentContainer, contentInsetsStyle, contentContainerStyle],
+    onScroll: onScroll,
+    scrollEventThrottle: 100
+  }, scrollViewProps), /*#__PURE__*/React.createElement(View, {
+    style: styles.content,
+    testID: concatTestID(testID, 'content')
+  }, !header.static && /*#__PURE__*/React.createElement(ListTitleHeader, {
+    title: header.title
+  }), children)), /*#__PURE__*/React.createElement(NavigationHeader, _extends({
+    animate: true,
+    blurred: true,
+    style: [styles.header, headerPaddingStyle],
+    titleVisible: header.static || titleVisible
+  }, header)));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    flex: 1
+  },
+  contentContainer: {
+    flexGrow: 1
+  },
+  header: {
+    position: 'absolute',
+    width: '100%'
+  },
+  modalHeaderWithoutHandle: {
+    paddingTop: 15
+  }
+});
+export default ScrollViewScreen;
+//# sourceMappingURL=scroll-view-screen.js.map

package/lib/module/ui-components/screens/scroll-view-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","ScrollView","StyleSheet","View","useSafeAreaInsets","useOnScrollHeaderState","useListContentInset","concatTestID","NavigationHeader","ListTitleHeader","useAppColorScheme","ScrollViewScreen","children","header","modalPresentation","scrollView","style","testID","viewProps","colorScheme","top","contentInsetsStyle","additionalBottomPadding","headerHeight","OS","titleVisible","onScroll","contentContainerStyle","scrollViewProps","headerPaddingStyle","paddingTop","modalHandleVisible","styles","modalHeaderWithoutHandle","createElement","_extends","container","backgroundColor","background","contentContainer","scrollEventThrottle","content","static","title","animate","blurred","create","flex","flexGrow","position","width"],"sources":["scroll-view-screen.tsx"],"sourcesContent":["import React, { FC, PropsWithChildren } from 'react';\nimport { Platform, ScrollView, ScrollViewProps, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { useOnScrollHeaderState } from '../../utils/hooks/header/on-scroll-header-state';\nimport { useListContentInset } from '../../utils/hooks/list/list-content-inset';\nimport { concatTestID } from '../../utils/testID';\nimport NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';\nimport ListTitleHeader from '../list/list-title-header';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type ScrollViewScreenProps = ViewProps & {\n  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {\n    static?: boolean;\n    title: string;\n  };\n  modalPresentation?: boolean;\n  scrollView?: Omit<ScrollViewProps, 'onScroll'>;\n};\n\nconst ScrollViewScreen: FC<PropsWithChildren<ScrollViewScreenProps>> = ({\n  children,\n  header,\n  modalPresentation,\n  scrollView,\n  style,\n  testID,\n  ...viewProps\n}) => {\n  const colorScheme = useAppColorScheme();\n  const { top } = useSafeAreaInsets();\n  const contentInsetsStyle = useListContentInset({\n    additionalBottomPadding: 24,\n    headerHeight: modalPresentation && Platform.OS === 'ios' ? 63 : 48,\n    modalPresentation,\n  });\n  const { titleVisible, onScroll } = useOnScrollHeaderState();\n  const { contentContainerStyle, ...scrollViewProps } = scrollView ?? {};\n\n  let headerPaddingStyle: ViewStyle | undefined;\n  if (!modalPresentation || Platform.OS === 'android') {\n    headerPaddingStyle = {\n      paddingTop: top,\n    };\n  } else if (modalPresentation && !header.modalHandleVisible && Platform.OS === 'ios') {\n    headerPaddingStyle = styles.modalHeaderWithoutHandle;\n  }\n\n  return (\n    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} testID={testID} {...viewProps}>\n      <ScrollView\n        contentContainerStyle={[styles.contentContainer, contentInsetsStyle, contentContainerStyle]}\n        onScroll={onScroll}\n        scrollEventThrottle={100}\n        {...scrollViewProps}>\n        <View style={styles.content} testID={concatTestID(testID, 'content')}>\n          {!header.static && <ListTitleHeader title={header.title} />}\n          {children}\n        </View>\n      </ScrollView>\n      <NavigationHeader\n        animate\n        blurred\n        style={[styles.header, headerPaddingStyle]}\n        titleVisible={header.static || titleVisible}\n        {...header}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  content: {\n    flex: 1,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  header: {\n    position: 'absolute',\n    width: '100%',\n  },\n  modalHeaderWithoutHandle: {\n    paddingTop: 15,\n  },\n});\n\nexport default ScrollViewScreen;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/screens/section-list-screen.js

@@ -0,0 +1,58 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { SectionList, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useOnScrollHeaderState } from '../../utils/hooks/header/on-scroll-header-state';
+import { useListContentInset } from '../../utils/hooks/list/list-content-inset';
+import NavigationHeader from '../header/navigation-header';
+import ListTitleHeader from '../list/list-title-header';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+const SectionListScreen = ({
+  header,
+  list: {
+    contentContainerStyle,
+    stickySectionHeadersEnabled,
+    ...listProps
+  },
+  style,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const safeAreaInsets = useSafeAreaInsets();
+  const contentInsetsStyle = useListContentInset();
+  const {
+    titleVisible,
+    onScroll
+  } = useOnScrollHeaderState();
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [styles.container, {
+      backgroundColor: colorScheme.background
+    }, style]
+  }, viewProps), /*#__PURE__*/React.createElement(SectionList, _extends({
+    ListHeaderComponent: !header.static ? /*#__PURE__*/React.createElement(ListTitleHeader, {
+      title: header.title
+    }) : undefined,
+    contentContainerStyle: [contentInsetsStyle, contentContainerStyle],
+    onScroll: onScroll,
+    scrollEventThrottle: 100,
+    stickySectionHeadersEnabled: stickySectionHeadersEnabled !== null && stickySectionHeadersEnabled !== void 0 ? stickySectionHeadersEnabled : false
+  }, listProps)), /*#__PURE__*/React.createElement(NavigationHeader, _extends({
+    animate: true,
+    blurred: true,
+    style: [styles.header, {
+      paddingTop: safeAreaInsets.top
+    }],
+    titleVisible: header.static || titleVisible
+  }, header)));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    position: 'absolute',
+    width: '100%'
+  }
+});
+export default SectionListScreen;
+//# sourceMappingURL=section-list-screen.js.map

package/lib/module/ui-components/screens/section-list-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SectionList","StyleSheet","View","useSafeAreaInsets","useOnScrollHeaderState","useListContentInset","NavigationHeader","ListTitleHeader","useAppColorScheme","SectionListScreen","header","list","contentContainerStyle","stickySectionHeadersEnabled","listProps","style","viewProps","colorScheme","safeAreaInsets","contentInsetsStyle","titleVisible","onScroll","createElement","_extends","styles","container","backgroundColor","background","ListHeaderComponent","static","title","undefined","scrollEventThrottle","animate","blurred","paddingTop","top","create","flex","position","width"],"sources":["section-list-screen.tsx"],"sourcesContent":["import React from 'react';\nimport { SectionList, SectionListProps, StyleSheet, View, ViewProps } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { useOnScrollHeaderState } from '../../utils/hooks/header/on-scroll-header-state';\nimport { useListContentInset } from '../../utils/hooks/list/list-content-inset';\nimport NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';\nimport ListTitleHeader from '../list/list-title-header';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type SectionListScreenProps<ItemT, SectionT> = ViewProps & {\n  header: Omit<NavigationHeaderProps, 'animate' | 'blurred' | 'style' | 'title' | 'titleVisible'> & {\n    static?: boolean;\n    title: string;\n  };\n  list: Omit<SectionListProps<ItemT, SectionT>, 'ListHeaderComponent' | 'onScroll'>;\n};\n\nconst SectionListScreen = <ItemT, SectionT>({\n  header,\n  list: { contentContainerStyle, stickySectionHeadersEnabled, ...listProps },\n  style,\n  ...viewProps\n}: SectionListScreenProps<ItemT, SectionT>) => {\n  const colorScheme = useAppColorScheme();\n  const safeAreaInsets = useSafeAreaInsets();\n  const contentInsetsStyle = useListContentInset();\n  const { titleVisible, onScroll } = useOnScrollHeaderState();\n\n  return (\n    <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>\n      <SectionList<ItemT, SectionT>\n        ListHeaderComponent={!header.static ? <ListTitleHeader title={header.title} /> : undefined}\n        contentContainerStyle={[contentInsetsStyle, contentContainerStyle]}\n        onScroll={onScroll}\n        scrollEventThrottle={100}\n        stickySectionHeadersEnabled={stickySectionHeadersEnabled ?? false}\n        {...listProps}\n      />\n      <NavigationHeader\n        animate\n        blurred\n        style={[styles.header, { paddingTop: safeAreaInsets.top }]}\n        titleVisible={header.static || titleVisible}\n        {...header}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  header: {\n    position: 'absolute',\n    width: '100%',\n  },\n});\n\nexport default SectionListScreen;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,EAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AACzF,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,SAASC,sBAAsB,QAAQ,iDAAiD;AACxF,SAASC,mBAAmB,QAAQ,2CAA2C;AAC/E,OAAOC,gBAAgB,MAAiC,6BAA6B;AACrF,OAAOC,eAAe,MAAM,2BAA2B;AACvD,SAASC,iBAAiB,QAAQ,+BAA+B;AAUjE,MAAMC,iBAAiB,GAAGA,CAAkB;EAC1CC,MAAM;EACNC,IAAI,EAAE;IAAEC,qBAAqB;IAAEC,2BAA2B;IAAE,GAAGC;EAAU,CAAC;EAC1EC,KAAK;EACL,GAAGC;AACoC,CAAC,KAAK;EAC7C,MAAMC,WAAW,GAAGT,iBAAiB,CAAC,CAAC;EACvC,MAAMU,cAAc,GAAGf,iBAAiB,CAAC,CAAC;EAC1C,MAAMgB,kBAAkB,GAAGd,mBAAmB,CAAC,CAAC;EAChD,MAAM;IAAEe,YAAY;IAAEC;EAAS,CAAC,GAAGjB,sBAAsB,CAAC,CAAC;EAE3D,oBACEL,KAAA,CAAAuB,aAAA,CAACpB,IAAI,EAAAqB,QAAA;IAACR,KAAK,EAAE,CAACS,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAET,WAAW,CAACU;IAAW,CAAC,EAAEZ,KAAK;EAAE,GAAKC,SAAS,gBAChGjB,KAAA,CAAAuB,aAAA,CAACtB,WAAW,EAAAuB,QAAA;IACVK,mBAAmB,EAAE,CAAClB,MAAM,CAACmB,MAAM,gBAAG9B,KAAA,CAAAuB,aAAA,CAACf,eAAe;MAACuB,KAAK,EAAEpB,MAAM,CAACoB;IAAM,CAAE,CAAC,GAAGC,SAAU;IAC3FnB,qBAAqB,EAAE,CAACO,kBAAkB,EAAEP,qBAAqB,CAAE;IACnES,QAAQ,EAAEA,QAAS;IACnBW,mBAAmB,EAAE,GAAI;IACzBnB,2BAA2B,EAAEA,2BAA2B,aAA3BA,2BAA2B,cAA3BA,2BAA2B,GAAI;EAAM,GAC9DC,SAAS,CACd,CAAC,eACFf,KAAA,CAAAuB,aAAA,CAAChB,gBAAgB,EAAAiB,QAAA;IACfU,OAAO;IACPC,OAAO;IACPnB,KAAK,EAAE,CAACS,MAAM,CAACd,MAAM,EAAE;MAAEyB,UAAU,EAAEjB,cAAc,CAACkB;IAAI,CAAC,CAAE;IAC3DhB,YAAY,EAAEV,MAAM,CAACmB,MAAM,IAAIT;EAAa,GACxCV,MAAM,CACX,CACG,CAAC;AAEX,CAAC;AAED,MAAMc,MAAM,GAAGvB,UAAU,CAACoC,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACTa,IAAI,EAAE;EACR,CAAC;EACD5B,MAAM,EAAE;IACN6B,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAe/B,iBAAiB","ignoreList":[]}

package/lib/module/ui-components/searchbar/animated-search-bar.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import SearchBar from './search-bar';
+// Animated search bar, according to
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&m=dev
+
+const AnimatedSearchBar = ({
+  collapsed,
+  rightButtonAlwaysVisible = false,
+  searchBarProps,
+  rightButton
+}) => {
+  const [rightIconFadeAnimation] = useState(() => new Animated.Value(rightButton && rightButtonAlwaysVisible ? 1.5 : 0));
+  const [searchPaddingAnimation] = useState(() => new Animated.Value(0));
+  useEffect(() => {
+    Animated.timing(searchPaddingAnimation, {
+      duration: 250,
+      toValue: collapsed ? 1 : 0,
+      useNativeDriver: false
+    }).start();
+  }, [collapsed, searchPaddingAnimation]);
+  useEffect(() => {
+    if (rightButtonAlwaysVisible) {
+      return;
+    }
+    Animated.timing(rightIconFadeAnimation, {
+      duration: 250,
+      toValue: collapsed && rightButton ? 1.5 : 0,
+      useNativeDriver: false
+    }).start();
+  }, [rightButtonAlwaysVisible, rightIconFadeAnimation, rightButton, collapsed]);
+  const searchBarContainerAnimatedStyle = {
+    paddingHorizontal: searchPaddingAnimation.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [0, 1],
+      outputRange: [16, 20]
+    })
+  };
+  const optionsIconAnimatedStyle = {
+    opacity: rightIconFadeAnimation.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [1, 1.5],
+      outputRange: [0, 1]
+    })
+  };
+  const searchBarAnimatedStyle = {
+    width: rightIconFadeAnimation.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [0, 1],
+      outputRange: ['100%', '88%']
+    })
+  };
+  const {
+    style: searchBarStyle,
+    ...searchProps
+  } = searchBarProps;
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.searchBarContainer, searchBarContainerAnimatedStyle, searchBarStyle]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: searchBarAnimatedStyle
+  }, /*#__PURE__*/React.createElement(SearchBar, searchProps)), rightButton && /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.rightButtonWrapper, optionsIconAnimatedStyle]
+  }, rightButton));
+};
+const styles = StyleSheet.create({
+  rightButtonWrapper: {
+    alignItems: 'flex-end',
+    justifyContent: 'center'
+  },
+  searchBarContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: 12
+  }
+});
+export default AnimatedSearchBar;
+//# sourceMappingURL=animated-search-bar.js.map

package/lib/module/ui-components/searchbar/animated-search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","Animated","StyleSheet","SearchBar","AnimatedSearchBar","collapsed","rightButtonAlwaysVisible","searchBarProps","rightButton","rightIconFadeAnimation","Value","searchPaddingAnimation","timing","duration","toValue","useNativeDriver","start","searchBarContainerAnimatedStyle","paddingHorizontal","interpolate","extrapolate","inputRange","outputRange","optionsIconAnimatedStyle","opacity","searchBarAnimatedStyle","width","style","searchBarStyle","searchProps","createElement","View","styles","searchBarContainer","rightButtonWrapper","create","alignItems","justifyContent","flexDirection","paddingBottom"],"sources":["animated-search-bar.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from 'react';\nimport { Animated, StyleSheet, ViewStyle } from 'react-native';\n\nimport SearchBar, { SearchBarProps } from './search-bar';\n\nexport type AnimatedSearchBarProps = {\n  collapsed: boolean;\n  rightButton?: ReactNode;\n  rightButtonAlwaysVisible?: boolean;\n  searchBarProps: SearchBarProps;\n};\n\n// Animated search bar, according to\n// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&m=dev\n\nconst AnimatedSearchBar = ({\n  collapsed,\n  rightButtonAlwaysVisible = false,\n  searchBarProps,\n  rightButton,\n}: AnimatedSearchBarProps) => {\n  const [rightIconFadeAnimation] = useState(\n    () => new Animated.Value(rightButton && rightButtonAlwaysVisible ? 1.5 : 0),\n  );\n  const [searchPaddingAnimation] = useState(() => new Animated.Value(0));\n\n  useEffect(() => {\n    Animated.timing(searchPaddingAnimation, {\n      duration: 250,\n      toValue: collapsed ? 1 : 0,\n      useNativeDriver: false,\n    }).start();\n  }, [collapsed, searchPaddingAnimation]);\n\n  useEffect(() => {\n    if (rightButtonAlwaysVisible) {\n      return;\n    }\n\n    Animated.timing(rightIconFadeAnimation, {\n      duration: 250,\n      toValue: collapsed && rightButton ? 1.5 : 0,\n      useNativeDriver: false,\n    }).start();\n  }, [rightButtonAlwaysVisible, rightIconFadeAnimation, rightButton, collapsed]);\n\n  const searchBarContainerAnimatedStyle = {\n    paddingHorizontal: searchPaddingAnimation.interpolate({\n      extrapolate: 'clamp',\n      inputRange: [0, 1],\n      outputRange: [16, 20],\n    }),\n  };\n\n  const optionsIconAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> = {\n    opacity: rightIconFadeAnimation.interpolate({\n      extrapolate: 'clamp',\n      inputRange: [1, 1.5],\n      outputRange: [0, 1],\n    }),\n  };\n\n  const searchBarAnimatedStyle = {\n    width: rightIconFadeAnimation.interpolate({\n      extrapolate: 'clamp',\n      inputRange: [0, 1],\n      outputRange: ['100%', '88%'],\n    }),\n  };\n\n  const { style: searchBarStyle, ...searchProps } = searchBarProps;\n  return (\n    <Animated.View style={[styles.searchBarContainer, searchBarContainerAnimatedStyle, searchBarStyle]}>\n      <Animated.View style={searchBarAnimatedStyle}>\n        <SearchBar {...searchProps} />\n      </Animated.View>\n      {rightButton && (\n        <Animated.View style={[styles.rightButtonWrapper, optionsIconAnimatedStyle]}>{rightButton}</Animated.View>\n      )}\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  rightButtonWrapper: {\n    alignItems: 'flex-end',\n    justifyContent: 'center',\n  },\n  searchBarContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    paddingBottom: 12,\n  },\n});\n\nexport default AnimatedSearchBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/searchbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AnimatedSearchBar","AnimatedSearchBarProps","SearchBar","SearchBarProps"],"sources":["index.ts"],"sourcesContent":["import AnimatedSearchBar, { AnimatedSearchBarProps } from './animated-search-bar';\nimport SearchBar, { SearchBarProps } from './search-bar';\n\nexport { AnimatedSearchBar, AnimatedSearchBarProps };\nexport { SearchBar, SearchBarProps };\n"],"mappings":"AAAA,OAAOA,iBAAiB,IAAIC,sBAAsB,QAAQ,uBAAuB;AACjF,OAAOC,SAAS,IAAIC,cAAc,QAAQ,cAAc;AAExD,SAASH,iBAAiB,EAAEC,sBAAsB;AAClD,SAASC,SAAS,EAAEC,cAAc","ignoreList":[]}

package/lib/module/ui-components/searchbar/search-bar.js

@@ -0,0 +1,88 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { forwardRef, useCallback } from 'react';
+import { Platform, StyleSheet, TextInput, View } from 'react-native';
+import { concatTestID } from '../../utils';
+import { TouchableOpacity } from '../accessibility';
+import { CloseIcon, SearchIcon } from '../icons';
+import font from '../text/font';
+import { useAppColorScheme } from '../theme';
+const hitSlop = {
+  top: 10,
+  left: 10,
+  bottom: 10,
+  right: 10
+};
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=HY1KvobxOReLeC8Z-4
+const SearchBar = /*#__PURE__*/forwardRef(({
+  style,
+  placeholder,
+  searchPhrase,
+  onSearchPhraseChange,
+  testID,
+  ...textInputProps
+}, ref) => {
+  const colorScheme = useAppColorScheme();
+  const onClear = useCallback(() => {
+    onSearchPhraseChange('');
+  }, [onSearchPhraseChange]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colorScheme.white
+    }, style]
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    color: colorScheme.text,
+    style: styles.searchIcon
+  }), /*#__PURE__*/React.createElement(TextInput, _extends({
+    accessibilityRole: "search",
+    onChangeText: onSearchPhraseChange,
+    placeholder: placeholder,
+    placeholderTextColor: colorScheme.text,
+    ref: ref,
+    returnKeyType: "search",
+    style: [styles.textInput, {
+      color: colorScheme.text
+    }],
+    value: searchPhrase,
+    testID: testID
+  }, textInputProps)), searchPhrase ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+    testID: concatTestID(testID, 'clear'),
+    accessibilityRole: "button",
+    hitSlop: hitSlop,
+    onPress: onClear,
+    style: styles.clearButton
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    color: colorScheme.text,
+    height: 12,
+    width: 12
+  })) : null);
+});
+SearchBar.displayName = 'SearchBar';
+const styles = StyleSheet.create({
+  clearButton: {
+    marginLeft: 6,
+    marginRight: 16
+  },
+  container: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 0,
+    flexDirection: 'row',
+    height: 40
+  },
+  searchIcon: {
+    marginLeft: 8,
+    marginRight: 6
+  },
+  textInput: {
+    ...font.regular,
+    flex: 1,
+    fontSize: 14,
+    height: 40,
+    letterSpacing: 0.2,
+    lineHeight: 18,
+    paddingBottom: Platform.OS === 'ios' ? 2 : undefined
+  }
+});
+export default SearchBar;
+//# sourceMappingURL=search-bar.js.map

package/lib/module/ui-components/searchbar/search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useCallback","Platform","StyleSheet","TextInput","View","concatTestID","TouchableOpacity","CloseIcon","SearchIcon","font","useAppColorScheme","hitSlop","top","left","bottom","right","SearchBar","style","placeholder","searchPhrase","onSearchPhraseChange","testID","textInputProps","ref","colorScheme","onClear","createElement","styles","container","backgroundColor","white","color","text","searchIcon","_extends","accessibilityRole","onChangeText","placeholderTextColor","returnKeyType","textInput","value","onPress","clearButton","height","width","displayName","create","marginLeft","marginRight","alignItems","borderRadius","borderWidth","flexDirection","regular","flex","fontSize","letterSpacing","lineHeight","paddingBottom","OS","undefined"],"sources":["search-bar.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { Insets, Platform, StyleProp, StyleSheet, TextInput, TextInputProps, View, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport { TouchableOpacity } from '../accessibility';\nimport { CloseIcon, SearchIcon } from '../icons';\nimport font from '../text/font';\nimport { useAppColorScheme } from '../theme';\n\nexport interface SearchBarProps extends TextInputProps {\n  style?: StyleProp<ViewStyle>;\n  placeholder?: string;\n  searchPhrase: string;\n  onSearchPhraseChange: (searchPhrase: string) => void;\n}\n\nconst hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };\n\n// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1143-40433&t=HY1KvobxOReLeC8Z-4\nconst SearchBar = forwardRef<TextInput, SearchBarProps>(\n  ({ style, placeholder, searchPhrase, onSearchPhraseChange, testID, ...textInputProps }, ref) => {\n    const colorScheme = useAppColorScheme();\n\n    const onClear = useCallback(() => {\n      onSearchPhraseChange('');\n    }, [onSearchPhraseChange]);\n\n    return (\n      <View\n        style={[\n          styles.container,\n          {\n            backgroundColor: colorScheme.white,\n          },\n          style,\n        ]}>\n        <SearchIcon color={colorScheme.text} style={styles.searchIcon} />\n        <TextInput\n          accessibilityRole=\"search\"\n          onChangeText={onSearchPhraseChange}\n          placeholder={placeholder}\n          placeholderTextColor={colorScheme.text}\n          ref={ref}\n          returnKeyType=\"search\"\n          style={[styles.textInput, { color: colorScheme.text }]}\n          value={searchPhrase}\n          testID={testID}\n          {...textInputProps}\n        />\n        {searchPhrase ? (\n          <TouchableOpacity\n            testID={concatTestID(testID, 'clear')}\n            accessibilityRole=\"button\"\n            hitSlop={hitSlop}\n            onPress={onClear}\n            style={styles.clearButton}>\n            <CloseIcon color={colorScheme.text} height={12} width={12} />\n          </TouchableOpacity>\n        ) : null}\n      </View>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nconst styles = StyleSheet.create({\n  clearButton: {\n    marginLeft: 6,\n    marginRight: 16,\n  },\n  container: {\n    alignItems: 'center',\n    borderRadius: 20,\n    borderWidth: 0,\n    flexDirection: 'row',\n    height: 40,\n  },\n  searchIcon: {\n    marginLeft: 8,\n    marginRight: 6,\n  },\n  textInput: {\n    ...font.regular,\n    flex: 1,\n    fontSize: 14,\n    height: 40,\n    letterSpacing: 0.2,\n    lineHeight: 18,\n    paddingBottom: Platform.OS === 'ios' ? 2 : undefined,\n  },\n});\n\nexport default SearchBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/settings/button-setting.js

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { NextIcon } from '../icons/wallet';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import SettingItem from './setting-item';
+const ButtonSetting = ({
+  accessory,
+  disabled,
+  title,
+  onPress,
+  icon,
+  style,
+  testID
+}) => {
+  const colorScheme = useAppColorScheme();
+  const accessoryView = useMemo(() => {
+    if (!accessory) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.arrow
+      }, /*#__PURE__*/React.createElement(NextIcon, {
+        color: colorScheme.text
+      }));
+    }
+    if (/*#__PURE__*/React.isValidElement(accessory)) {
+      return accessory;
+    } else {
+      const AccessoryComponent = accessory;
+      return /*#__PURE__*/React.createElement(AccessoryComponent, null);
+    }
+  }, [accessory, colorScheme.text]);
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    disabled: disabled,
+    accessibilityRole: "button",
+    onPress: onPress,
+    style: styles.container,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(SettingItem, {
+    icon: icon,
+    style: style,
+    title: title
+  }, accessoryView));
+};
+const styles = StyleSheet.create({
+  arrow: {
+    alignItems: 'center',
+    height: 24,
+    justifyContent: 'center',
+    width: 24
+  },
+  container: {
+    width: '100%'
+  }
+});
+export default ButtonSetting;
+//# sourceMappingURL=button-setting.js.map

package/lib/module/ui-components/settings/button-setting.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","StyleSheet","View","TouchableOpacity","NextIcon","useAppColorScheme","SettingItem","ButtonSetting","accessory","disabled","title","onPress","icon","style","testID","colorScheme","accessoryView","createElement","styles","arrow","color","text","isValidElement","AccessoryComponent","accessibilityRole","container","create","alignItems","height","justifyContent","width"],"sources":["button-setting.tsx"],"sourcesContent":["import React, { ComponentType, FunctionComponent, ReactElement, useMemo } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';\nimport { NextIcon } from '../icons/wallet';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\nimport SettingItem from './setting-item';\n\nexport type ButtonSettingProps = {\n  accessory?: ComponentType<any> | ReactElement;\n  disabled?: boolean;\n  icon?: ComponentType<any> | ReactElement;\n  onPress: () => void;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n  title: string;\n};\n\nconst ButtonSetting: FunctionComponent<ButtonSettingProps> = ({\n  accessory,\n  disabled,\n  title,\n  onPress,\n  icon,\n  style,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const accessoryView: React.ReactElement | undefined = useMemo(() => {\n    if (!accessory) {\n      return (\n        <View style={styles.arrow}>\n          <NextIcon color={colorScheme.text} />\n        </View>\n      );\n    }\n    if (React.isValidElement(accessory)) {\n      return accessory;\n    } else {\n      const AccessoryComponent = accessory as React.ComponentType<any>;\n      return <AccessoryComponent />;\n    }\n  }, [accessory, colorScheme.text]);\n\n  return (\n    <TouchableOpacity\n      disabled={disabled}\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      style={styles.container}\n      testID={testID}>\n      <SettingItem icon={icon} style={style} title={title}>\n        {accessoryView}\n      </SettingItem>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  arrow: {\n    alignItems: 'center',\n    height: 24,\n    justifyContent: 'center',\n    width: 24,\n  },\n  container: {\n    width: '100%',\n  },\n});\n\nexport default ButtonSetting;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAoDC,OAAO,QAAQ,OAAO;AACtF,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAErE,SAASC,gBAAgB,QAAQ,+CAA+C;AAChF,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,OAAOC,WAAW,MAAM,gBAAgB;AAYxC,MAAMC,aAAoD,GAAGA,CAAC;EAC5DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGV,iBAAiB,CAAC,CAAC;EAEvC,MAAMW,aAA6C,GAAGhB,OAAO,CAAC,MAAM;IAClE,IAAI,CAACQ,SAAS,EAAE;MACd,oBACET,KAAA,CAAAkB,aAAA,CAACf,IAAI;QAACW,KAAK,EAAEK,MAAM,CAACC;MAAM,gBACxBpB,KAAA,CAAAkB,aAAA,CAACb,QAAQ;QAACgB,KAAK,EAAEL,WAAW,CAACM;MAAK,CAAE,CAChC,CAAC;IAEX;IACA,iBAAItB,KAAK,CAACuB,cAAc,CAACd,SAAS,CAAC,EAAE;MACnC,OAAOA,SAAS;IAClB,CAAC,MAAM;MACL,MAAMe,kBAAkB,GAAGf,SAAqC;MAChE,oBAAOT,KAAA,CAAAkB,aAAA,CAACM,kBAAkB,MAAE,CAAC;IAC/B;EACF,CAAC,EAAE,CAACf,SAAS,EAAEO,WAAW,CAACM,IAAI,CAAC,CAAC;EAEjC,oBACEtB,KAAA,CAAAkB,aAAA,CAACd,gBAAgB;IACfM,QAAQ,EAAEA,QAAS;IACnBe,iBAAiB,EAAC,QAAQ;IAC1Bb,OAAO,EAAEA,OAAQ;IACjBE,KAAK,EAAEK,MAAM,CAACO,SAAU;IACxBX,MAAM,EAAEA;EAAO,gBACff,KAAA,CAAAkB,aAAA,CAACX,WAAW;IAACM,IAAI,EAAEA,IAAK;IAACC,KAAK,EAAEA,KAAM;IAACH,KAAK,EAAEA;EAAM,GACjDM,aACU,CACG,CAAC;AAEvB,CAAC;AAED,MAAME,MAAM,GAAGjB,UAAU,CAACyB,MAAM,CAAC;EAC/BP,KAAK,EAAE;IACLQ,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE,EAAE;IACVC,cAAc,EAAE,QAAQ;IACxBC,KAAK,EAAE;EACT,CAAC;EACDL,SAAS,EAAE;IACTK,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAevB,aAAa","ignoreList":[]}

package/lib/module/ui-components/settings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ButtonSetting","ButtonSettingProps","SettingItem","SettingItemProps","SettingItemSeparator","SettingItemSeparatorProps","SettingsButton","SettingsButtonProps","SwitchSetting","SwitchSettingProps"],"sources":["index.ts"],"sourcesContent":["import ButtonSetting, { ButtonSettingProps } from './button-setting';\nimport SettingItem, { SettingItemProps } from './setting-item';\nimport SettingItemSeparator, { SettingItemSeparatorProps } from './setting-item-separator';\nimport SettingsButton, { SettingsButtonProps } from './settings-button';\nimport SwitchSetting, { SwitchSettingProps } from './switch-setting';\n\nexport { ButtonSetting, ButtonSettingProps };\nexport { SettingItem, SettingItemProps };\nexport { SettingItemSeparator, SettingItemSeparatorProps };\nexport { SettingsButton, SettingsButtonProps };\nexport { SwitchSetting, SwitchSettingProps };\n"],"mappings":"AAAA,OAAOA,aAAa,IAAIC,kBAAkB,QAAQ,kBAAkB;AACpE,OAAOC,WAAW,IAAIC,gBAAgB,QAAQ,gBAAgB;AAC9D,OAAOC,oBAAoB,IAAIC,yBAAyB,QAAQ,0BAA0B;AAC1F,OAAOC,cAAc,IAAIC,mBAAmB,QAAQ,mBAAmB;AACvE,OAAOC,aAAa,IAAIC,kBAAkB,QAAQ,kBAAkB;AAEpE,SAAST,aAAa,EAAEC,kBAAkB;AAC1C,SAASC,WAAW,EAAEC,gBAAgB;AACtC,SAASC,oBAAoB,EAAEC,yBAAyB;AACxD,SAASC,cAAc,EAAEC,mBAAmB;AAC5C,SAASC,aAAa,EAAEC,kBAAkB","ignoreList":[]}

package/lib/module/ui-components/settings/setting-item-separator.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+const SettingItemSeparator = ({
+  color,
+  style
+}) => {
+  const colorScheme = useAppColorScheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.wrapper, {
+      backgroundColor: colorScheme.white
+    }, style]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.separator, {
+      backgroundColor: color !== null && color !== void 0 ? color : colorScheme.background
+    }]
+  }));
+};
+const styles = StyleSheet.create({
+  separator: {
+    height: '100%',
+    width: '100%'
+  },
+  wrapper: {
+    height: 1,
+    marginHorizontal: 16,
+    paddingHorizontal: 12
+  }
+});
+export default SettingItemSeparator;
+//# sourceMappingURL=setting-item-separator.js.map

package/lib/module/ui-components/settings/setting-item-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","useAppColorScheme","SettingItemSeparator","color","style","colorScheme","createElement","styles","wrapper","backgroundColor","white","separator","background","create","height","width","marginHorizontal","paddingHorizontal"],"sources":["setting-item-separator.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type SettingItemSeparatorProps = {\n  color?: ColorValue;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst SettingItemSeparator: FC<SettingItemSeparatorProps> = ({ color, style }) => {\n  const colorScheme = useAppColorScheme();\n  return (\n    <View style={[styles.wrapper, { backgroundColor: colorScheme.white }, style]}>\n      <View style={[styles.separator, { backgroundColor: color ?? colorScheme.background }]} />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  separator: {\n    height: '100%',\n    width: '100%',\n  },\n  wrapper: {\n    height: 1,\n    marginHorizontal: 16,\n    paddingHorizontal: 12,\n  },\n});\n\nexport default SettingItemSeparator;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SAAgCC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAEjF,SAASC,iBAAiB,QAAQ,+BAA+B;AAOjE,MAAMC,oBAAmD,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAM,CAAC,KAAK;EAChF,MAAMC,WAAW,GAAGJ,iBAAiB,CAAC,CAAC;EACvC,oBACEH,KAAA,CAAAQ,aAAA,CAACN,IAAI;IAACI,KAAK,EAAE,CAACG,MAAM,CAACC,OAAO,EAAE;MAAEC,eAAe,EAAEJ,WAAW,CAACK;IAAM,CAAC,EAAEN,KAAK;EAAE,gBAC3EN,KAAA,CAAAQ,aAAA,CAACN,IAAI;IAACI,KAAK,EAAE,CAACG,MAAM,CAACI,SAAS,EAAE;MAAEF,eAAe,EAAEN,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIE,WAAW,CAACO;IAAW,CAAC;EAAE,CAAE,CACpF,CAAC;AAEX,CAAC;AAED,MAAML,MAAM,GAAGR,UAAU,CAACc,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDP,OAAO,EAAE;IACPM,MAAM,EAAE,CAAC;IACTE,gBAAgB,EAAE,EAAE;IACpBC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAef,oBAAoB","ignoreList":[]}