@procivis/one-react-native-components 0.2.54 → 0.3.27

package/lib/module/ui-components/header/foldable-header.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","Animated","StyleSheet","View","useSafeAreaInsets","BlurView","AnimatedSearchBar","useAppColorScheme","FoldableSearchHeader","_ref","staticHeader","scrollOffset","searchBar","header","safeAreaInsets","colorScheme","collapsed","setCollapsed","headerHeight","setHeaderHeight","id","addListener","_ref2","value","removeListener","playHeaderFoldAnimation","scrollHeaderAnimatedStyle","transform","translateY","interpolate","extrapolate","inputRange","outputRange","undefined","fadeHeaderOutAnimatedStyle","opacity","onHeaderLayout","event","nativeEvent","layout","height","createElement","style","styles","headerContainer","paddingTop","top","blurStyle","color","background","absoluteFill","onLayout","_extends","create","position","width"],"sources":["foldable-header.tsx"],"sourcesContent":["import React, { FunctionComponent, ReactElement, useCallback, useEffect, useState } from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport BlurView from '../blur/blur-view';\nimport AnimatedSearchBar, { AnimatedSearchBarProps } from '../searchbar/animated-search-bar';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type FoldableHeaderProps = {\n  header: ReactElement;\n  scrollOffset: Animated.Value;\n  searchBar?: Omit<AnimatedSearchBarProps, 'collapsed'>;\n  // if true, the header won't fold / fade out on scroll\n  staticHeader?: boolean;\n};\n\nconst FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({\n  staticHeader = false,\n  scrollOffset,\n  searchBar,\n  header,\n}) => {\n  const safeAreaInsets = useSafeAreaInsets();\n  const colorScheme = useAppColorScheme();\n  const [collapsed, setCollapsed] = useState(header ? false : true);\n  const [headerHeight, setHeaderHeight] = useState<number>();\n\n  useEffect(() => {\n    const id = scrollOffset.addListener(({ value }) => {\n      if (!headerHeight) {\n        return;\n      }\n\n      if (value > headerHeight) {\n        setCollapsed(true);\n      } else {\n        setCollapsed(false);\n      }\n    });\n    return () => {\n      scrollOffset.removeListener(id);\n    };\n  }, [scrollOffset, searchBar, headerHeight]);\n\n  const playHeaderFoldAnimation = !staticHeader && headerHeight;\n\n  const scrollHeaderAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation\n    ? {\n        transform: [\n          {\n            translateY: scrollOffset.interpolate({\n              extrapolate: 'clamp',\n              inputRange: [0, headerHeight],\n              outputRange: [0, -headerHeight],\n            }),\n          },\n        ],\n      }\n    : undefined;\n\n  const fadeHeaderOutAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation\n    ? {\n        opacity: scrollOffset.interpolate({\n          extrapolate: 'clamp',\n          inputRange: [0, headerHeight / 2],\n          outputRange: [1, 0],\n        }),\n      }\n    : undefined;\n\n  const onHeaderLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      setHeaderHeight(event.nativeEvent.layout.height);\n    },\n    [setHeaderHeight],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        styles.headerContainer,\n        {\n          paddingTop: safeAreaInsets.top,\n        },\n        scrollHeaderAnimatedStyle,\n      ]}>\n      <BlurView blurStyle={'header'} color={colorScheme.background} style={StyleSheet.absoluteFill} />\n      <View>\n        {header && (\n          <Animated.View onLayout={onHeaderLayout} style={fadeHeaderOutAnimatedStyle}>\n            {header}\n          </Animated.View>\n        )}\n        {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}\n      </View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  headerContainer: {\n    position: 'absolute',\n    width: '100%',\n  },\n});\n\nexport default FoldableSearchHeader;\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useState","Animated","StyleSheet","View","useSafeAreaInsets","BlurView","AnimatedSearchBar","useAppColorScheme","FoldableSearchHeader","staticHeader","scrollOffset","searchBar","header","safeAreaInsets","colorScheme","collapsed","setCollapsed","headerHeight","setHeaderHeight","id","addListener","value","removeListener","playHeaderFoldAnimation","scrollHeaderAnimatedStyle","transform","translateY","interpolate","extrapolate","inputRange","outputRange","undefined","fadeHeaderOutAnimatedStyle","opacity","onHeaderLayout","event","nativeEvent","layout","height","createElement","style","styles","headerContainer","paddingTop","top","blurStyle","color","background","absoluteFill","onLayout","_extends","create","position","width"],"sources":["foldable-header.tsx"],"sourcesContent":["import React, { FunctionComponent, ReactElement, useCallback, useEffect, useState } from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport BlurView from '../blur/blur-view';\nimport AnimatedSearchBar, { AnimatedSearchBarProps } from '../searchbar/animated-search-bar';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type FoldableHeaderProps = {\n  header: ReactElement;\n  scrollOffset: Animated.Value;\n  searchBar?: Omit<AnimatedSearchBarProps, 'collapsed'>;\n  // if true, the header won't fold / fade out on scroll\n  staticHeader?: boolean;\n};\n\nconst FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({\n  staticHeader = false,\n  scrollOffset,\n  searchBar,\n  header,\n}) => {\n  const safeAreaInsets = useSafeAreaInsets();\n  const colorScheme = useAppColorScheme();\n  const [collapsed, setCollapsed] = useState(header ? false : true);\n  const [headerHeight, setHeaderHeight] = useState<number>();\n\n  useEffect(() => {\n    const id = scrollOffset.addListener(({ value }) => {\n      if (!headerHeight) {\n        return;\n      }\n\n      if (value > headerHeight) {\n        setCollapsed(true);\n      } else {\n        setCollapsed(false);\n      }\n    });\n    return () => {\n      scrollOffset.removeListener(id);\n    };\n  }, [scrollOffset, searchBar, headerHeight]);\n\n  const playHeaderFoldAnimation = !staticHeader && headerHeight;\n\n  const scrollHeaderAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation\n    ? {\n        transform: [\n          {\n            translateY: scrollOffset.interpolate({\n              extrapolate: 'clamp',\n              inputRange: [0, headerHeight],\n              outputRange: [0, -headerHeight],\n            }),\n          },\n        ],\n      }\n    : undefined;\n\n  const fadeHeaderOutAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation\n    ? {\n        opacity: scrollOffset.interpolate({\n          extrapolate: 'clamp',\n          inputRange: [0, headerHeight / 2],\n          outputRange: [1, 0],\n        }),\n      }\n    : undefined;\n\n  const onHeaderLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      setHeaderHeight(event.nativeEvent.layout.height);\n    },\n    [setHeaderHeight],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        styles.headerContainer,\n        {\n          paddingTop: safeAreaInsets.top,\n        },\n        scrollHeaderAnimatedStyle,\n      ]}>\n      <BlurView blurStyle={'header'} color={colorScheme.background} style={StyleSheet.absoluteFill} />\n      <View>\n        {header && (\n          <Animated.View onLayout={onHeaderLayout} style={fadeHeaderOutAnimatedStyle}>\n            {header}\n          </Animated.View>\n        )}\n        {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}\n      </View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  headerContainer: {\n    position: 'absolute',\n    width: '100%',\n  },\n});\n\nexport default FoldableSearchHeader;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/header/header.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 { StyleSheet, View } from 'react-native';
 import { concatTestID } from '../../utils';
@@ -18,16 +18,15 @@ const backButtonHitSlop = {
  * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624
  * states (Default + Dashboard)
  */
-const Header = _ref => {
-  let {
-    onBack,
-    rightButton,
-    style,
-    titleRowStyle,
-    testID,
-    title,
-    ...viewProps
-  } = _ref;
+const Header = ({
+  onBack,
+  rightButton,
+  style,
+  titleRowStyle,
+  testID,
+  title,
+  ...viewProps
+}) => {
   const colorScheme = useAppColorScheme();
   return /*#__PURE__*/React.createElement(View, _extends({
     style: [styles.container, style],

package/lib/module/ui-components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","concatTestID","BackButton","Typography","useAppColorScheme","backButtonHitSlop","top","bottom","left","right","Header","_ref","onBack","rightButton","style","titleRowStyle","testID","title","viewProps","colorScheme","createElement","_extends","styles","container","backButtonRow","hitSlop","onPress","titleRow","titleRow2nd","titleRowNoBackButton","titleRowNoRightButton","accessibilityRole","color","text","preset","rightButtonWrapper","create","alignItems","flexDirection","justifyContent","minHeight","paddingHorizontal","width","height","paddingTop","flex","paddingBottom","paddingLeft","paddingRight","marginBottom","marginTop"],"sources":["header.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Insets, StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport { BackButton } from '../buttons';\nimport { Typography } from '../text';\nimport { useAppColorScheme } from '../theme';\n\nexport interface HeaderProps extends ViewProps {\n  onBack?: () => void;\n  rightButton?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  titleRowStyle?: StyleProp<ViewStyle>;\n  title: ReactNode;\n}\n\nconst backButtonHitSlop: Insets = { top: 12, bottom: 12, left: 20, right: 20 };\n\n/**\n * Unified screen header\n *\n * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624\n * states (Default + Dashboard)\n */\nconst Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, testID, title, ...viewProps }) => {\n  const colorScheme = useAppColorScheme();\n\n  return (\n    <View style={[styles.container, style]} testID={testID} {...viewProps}>\n      {onBack && (\n        <View style={styles.backButtonRow}>\n          <BackButton hitSlop={backButtonHitSlop} onPress={onBack} testID={concatTestID(testID, 'back')} />\n          <View />\n          {rightButton}\n        </View>\n      )}\n\n      <View\n        style={[\n          styles.titleRow,\n          onBack ? styles.titleRow2nd : styles.titleRowNoBackButton,\n          (onBack || !rightButton) && styles.titleRowNoRightButton,\n          titleRowStyle,\n        ]}>\n        {typeof title === 'string' ? (\n          <Typography\n            accessibilityRole=\"header\"\n            color={colorScheme.text}\n            preset=\"l\"\n            style={styles.title}\n            testID={concatTestID(testID, 'title')}>\n            {title}\n          </Typography>\n        ) : (\n          <View style={styles.title}>{title}</View>\n        )}\n\n        {!onBack && rightButton && <View style={styles.rightButtonWrapper}>{rightButton}</View>}\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  backButtonRow: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    minHeight: 48,\n    paddingHorizontal: 20,\n    width: '100%',\n  },\n  container: {\n    width: '100%',\n  },\n  rightButtonWrapper: {\n    alignItems: 'center',\n    height: 48,\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n    paddingTop: 2,\n  },\n  title: {\n    flex: 1,\n    paddingBottom: 8, // to compensate \"l\" font line-height difference\n    paddingTop: 9,\n  },\n  titleRow: {\n    flexDirection: 'row',\n    paddingLeft: 20,\n    paddingRight: 8,\n    width: '100%',\n  },\n  titleRow2nd: {\n    marginBottom: 12,\n  },\n  titleRowNoBackButton: {\n    marginTop: 12,\n  },\n  titleRowNoRightButton: {\n    paddingRight: 20,\n  },\n});\n\nexport default Header;\n"],"mappings":"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"}
+{"version":3,"names":["React","StyleSheet","View","concatTestID","BackButton","Typography","useAppColorScheme","backButtonHitSlop","top","bottom","left","right","Header","onBack","rightButton","style","titleRowStyle","testID","title","viewProps","colorScheme","createElement","_extends","styles","container","backButtonRow","hitSlop","onPress","titleRow","titleRow2nd","titleRowNoBackButton","titleRowNoRightButton","accessibilityRole","color","text","preset","rightButtonWrapper","create","alignItems","flexDirection","justifyContent","minHeight","paddingHorizontal","width","height","paddingTop","flex","paddingBottom","paddingLeft","paddingRight","marginBottom","marginTop"],"sources":["header.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Insets, StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport { BackButton } from '../buttons';\nimport { Typography } from '../text';\nimport { useAppColorScheme } from '../theme';\n\nexport interface HeaderProps extends ViewProps {\n  onBack?: () => void;\n  rightButton?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  titleRowStyle?: StyleProp<ViewStyle>;\n  title: ReactNode;\n}\n\nconst backButtonHitSlop: Insets = { top: 12, bottom: 12, left: 20, right: 20 };\n\n/**\n * Unified screen header\n *\n * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624\n * states (Default + Dashboard)\n */\nconst Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, testID, title, ...viewProps }) => {\n  const colorScheme = useAppColorScheme();\n\n  return (\n    <View style={[styles.container, style]} testID={testID} {...viewProps}>\n      {onBack && (\n        <View style={styles.backButtonRow}>\n          <BackButton hitSlop={backButtonHitSlop} onPress={onBack} testID={concatTestID(testID, 'back')} />\n          <View />\n          {rightButton}\n        </View>\n      )}\n\n      <View\n        style={[\n          styles.titleRow,\n          onBack ? styles.titleRow2nd : styles.titleRowNoBackButton,\n          (onBack || !rightButton) && styles.titleRowNoRightButton,\n          titleRowStyle,\n        ]}>\n        {typeof title === 'string' ? (\n          <Typography\n            accessibilityRole=\"header\"\n            color={colorScheme.text}\n            preset=\"l\"\n            style={styles.title}\n            testID={concatTestID(testID, 'title')}>\n            {title}\n          </Typography>\n        ) : (\n          <View style={styles.title}>{title}</View>\n        )}\n\n        {!onBack && rightButton && <View style={styles.rightButtonWrapper}>{rightButton}</View>}\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  backButtonRow: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    minHeight: 48,\n    paddingHorizontal: 20,\n    width: '100%',\n  },\n  container: {\n    width: '100%',\n  },\n  rightButtonWrapper: {\n    alignItems: 'center',\n    height: 48,\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n    paddingTop: 2,\n  },\n  title: {\n    flex: 1,\n    paddingBottom: 8, // to compensate \"l\" font line-height difference\n    paddingTop: 9,\n  },\n  titleRow: {\n    flexDirection: 'row',\n    paddingLeft: 20,\n    paddingRight: 8,\n    width: '100%',\n  },\n  titleRow2nd: {\n    marginBottom: 12,\n  },\n  titleRowNoBackButton: {\n    marginTop: 12,\n  },\n  titleRowNoRightButton: {\n    paddingRight: 20,\n  },\n});\n\nexport default Header;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/header/index.js

@@ -1,9 +1,9 @@
 import FocusAwareStatusBar from './focus-aware-status-bar';
-import FoldableHeader, { FoldableHeaderProps } from './foldable-header';
-import Header, { HeaderProps } from './header';
-import NavigationHeader, { NavigationHeaderProps } from './navigation-header';
+import FoldableHeader from './foldable-header';
+import Header from './header';
+import NavigationHeader from './navigation-header';
 export { FocusAwareStatusBar };
-export { FoldableHeader, FoldableHeaderProps };
-export { Header, HeaderProps };
-export { NavigationHeader, NavigationHeaderProps };
+export { FoldableHeader };
+export { Header };
+export { NavigationHeader };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["FocusAwareStatusBar","FoldableHeader","FoldableHeaderProps","Header","HeaderProps","NavigationHeader","NavigationHeaderProps"],"sources":["index.ts"],"sourcesContent":["import FocusAwareStatusBar from './focus-aware-status-bar';\nimport FoldableHeader, { FoldableHeaderProps } from './foldable-header';\nimport Header, { HeaderProps } from './header';\nimport NavigationHeader, { NavigationHeaderProps } from './navigation-header';\n\nexport { FocusAwareStatusBar };\nexport { FoldableHeader, FoldableHeaderProps };\nexport { Header, HeaderProps };\nexport { NavigationHeader, NavigationHeaderProps };\n"],"mappings":"AAAA,OAAOA,mBAAmB,MAAM,0BAA0B;AAC1D,OAAOC,cAAc,IAAIC,mBAAmB,QAAQ,mBAAmB;AACvE,OAAOC,MAAM,IAAIC,WAAW,QAAQ,UAAU;AAC9C,OAAOC,gBAAgB,IAAIC,qBAAqB,QAAQ,qBAAqB;AAE7E,SAASN,mBAAmB;AAC5B,SAASC,cAAc,EAAEC,mBAAmB;AAC5C,SAASC,MAAM,EAAEC,WAAW;AAC5B,SAASC,gBAAgB,EAAEC,qBAAqB"}
+{"version":3,"names":["FocusAwareStatusBar","FoldableHeader","Header","NavigationHeader"],"sources":["index.ts"],"sourcesContent":["import FocusAwareStatusBar from './focus-aware-status-bar';\nimport type { FoldableHeaderProps } from './foldable-header';\nimport FoldableHeader from './foldable-header';\nimport type { HeaderProps } from './header';\nimport Header from './header';\nimport type { NavigationHeaderProps } from './navigation-header';\nimport NavigationHeader from './navigation-header';\n\nexport { FocusAwareStatusBar };\nexport { FoldableHeader, FoldableHeaderProps };\nexport { Header, HeaderProps };\nexport { NavigationHeader, NavigationHeaderProps };\n"],"mappings":"AAAA,OAAOA,mBAAmB,MAAM,0BAA0B;AAE1D,OAAOC,cAAc,MAAM,mBAAmB;AAE9C,OAAOC,MAAM,MAAM,UAAU;AAE7B,OAAOC,gBAAgB,MAAM,qBAAqB;AAElD,SAASH,mBAAmB;AAC5B,SAASC,cAAc;AACvB,SAASC,MAAM;AACf,SAASC,gBAAgB","ignoreList":[]}

package/lib/module/ui-components/header/navigation-header.js

@@ -1,43 +1,38 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 import { concatTestID } from '../../utils';
 import BlurView from '../blur/blur-view';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
-const NavigationHeader = _ref => {
-  var _backgroundColor;
-  let {
-    animate = false,
-    backgroundColor,
-    blurred = false,
-    leftItem,
-    modalHandleVisible,
-    rightItem,
-    style,
-    testID,
-    title,
-    titleVisible = true,
-    titleColor,
-    ...props
-  } = _ref;
+const NavigationHeader = ({
+  animate = false,
+  backgroundColor,
+  blurred = false,
+  leftItem,
+  modalHandleVisible,
+  rightItem,
+  style,
+  testID,
+  title,
+  titleVisible = true,
+  titleColor,
+  ...props
+}) => {
   const colorScheme = useAppColorScheme();
   const [titleOpacity] = useState(() => new Animated.Value(titleVisible ? 1 : 0));
   const [sideItemWidth, setSideItemWidth] = useState();
-  const onSideItemLayout = useCallback(_ref2 => {
-    let {
-      nativeEvent: {
-        layout
-      }
-    } = _ref2;
-    return setSideItemWidth(prev => Math.max(layout.width, prev !== null && prev !== void 0 ? prev : 0));
-  }, []);
-  backgroundColor = (_backgroundColor = backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : colorScheme.background;
+  const onSideItemLayout = useCallback(({
+    nativeEvent: {
+      layout
+    }
+  }) => setSideItemWidth(prev => Math.max(layout.width, prev !== null && prev !== void 0 ? prev : 0)), []);
+  backgroundColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : colorScheme.background;
   const leftItemView = useMemo(() => {
     if (!leftItem) {
       return undefined;
     }
-    if ( /*#__PURE__*/React.isValidElement(leftItem)) {
+    if (/*#__PURE__*/React.isValidElement(leftItem)) {
       return leftItem;
     } else {
       const LeftItemComponent = leftItem;
@@ -60,7 +55,7 @@ const NavigationHeader = _ref => {
     if (!rightItem) {
       return undefined;
     }
-    if ( /*#__PURE__*/React.isValidElement(rightItem)) {
+    if (/*#__PURE__*/React.isValidElement(rightItem)) {
       return rightItem;
     } else {
       const RightItemComponent = rightItem;

package/lib/module/ui-components/header/navigation-header.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","Animated","Easing","StyleSheet","View","concatTestID","BlurView","Typography","useAppColorScheme","NavigationHeader","_ref","_backgroundColor","animate","backgroundColor","blurred","leftItem","modalHandleVisible","rightItem","style","testID","title","titleVisible","titleColor","props","colorScheme","titleOpacity","Value","sideItemWidth","setSideItemWidth","onSideItemLayout","_ref2","nativeEvent","layout","prev","Math","max","width","background","leftItemView","undefined","isValidElement","LeftItemComponent","createElement","timing","duration","easing","ease","toValue","useNativeDriver","start","setValue","rightItemView","RightItemComponent","titleAnimatedStyle","opacity","_extends","styles","headerContainer","blurAmount","blurStyle","color","absoluteFill","modalHandle","grayDark","header","onLayout","sideItem","minWidth","text","preset","align","numberOfLines","rightSideItem","create","alignItems","flexDirection","height","paddingHorizontal","borderRadius","marginVertical","padding","flex"],"sources":["navigation-header.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Animated, ColorValue, Easing, LayoutChangeEvent, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport BlurView from '../blur/blur-view';\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type NavigationHeaderProps = ViewProps & {\n  animate?: boolean;\n  backgroundColor?: ColorValue;\n  blurred?: boolean;\n  leftItem?: React.ComponentType<any> | React.ReactElement;\n  modalHandleVisible?: boolean;\n  rightItem?: React.ComponentType<any> | React.ReactElement;\n  title?: string;\n  titleColor?: string;\n  titleVisible?: boolean;\n};\n\nconst NavigationHeader: FC<NavigationHeaderProps> = ({\n  animate = false,\n  backgroundColor,\n  blurred = false,\n  leftItem,\n  modalHandleVisible,\n  rightItem,\n  style,\n  testID,\n  title,\n  titleVisible = true,\n  titleColor,\n  ...props\n}) => {\n  const colorScheme = useAppColorScheme();\n  const [titleOpacity] = useState(() => new Animated.Value(titleVisible ? 1 : 0));\n\n  const [sideItemWidth, setSideItemWidth] = useState<number>();\n  const onSideItemLayout = useCallback(\n    ({ nativeEvent: { layout } }: LayoutChangeEvent) => setSideItemWidth((prev) => Math.max(layout.width, prev ?? 0)),\n    [],\n  );\n\n  backgroundColor = backgroundColor ?? colorScheme.background;\n\n  const leftItemView: React.ReactElement | undefined = useMemo(() => {\n    if (!leftItem) {\n      return undefined;\n    }\n    if (React.isValidElement(leftItem)) {\n      return leftItem;\n    } else {\n      const LeftItemComponent = leftItem as React.ComponentType<any>;\n      return <LeftItemComponent />;\n    }\n  }, [leftItem]);\n\n  useEffect(() => {\n    if (animate) {\n      Animated.timing(titleOpacity, {\n        duration: 150,\n        easing: Easing.ease,\n        toValue: titleVisible ? 1 : 0,\n        useNativeDriver: true,\n      }).start();\n    } else {\n      titleOpacity.setValue(titleVisible ? 1 : 0);\n    }\n  }, [animate, titleOpacity, titleVisible]);\n\n  const rightItemView: React.ReactElement | undefined = useMemo(() => {\n    if (!rightItem) {\n      return undefined;\n    }\n    if (React.isValidElement(rightItem)) {\n      return rightItem;\n    } else {\n      const RightItemComponent = rightItem as React.ComponentType<any>;\n      return <RightItemComponent />;\n    }\n  }, [rightItem]);\n\n  const titleAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> = {\n    opacity: titleOpacity,\n  };\n\n  return (\n    <View\n      {...props}\n      style={[styles.headerContainer, !blurred ? { backgroundColor } : undefined, style]}\n      testID={testID}>\n      {blurred && (\n        <BlurView blurAmount={10} blurStyle=\"header\" color={backgroundColor} style={StyleSheet.absoluteFill} />\n      )}\n      {modalHandleVisible && <View style={[styles.modalHandle, { backgroundColor: colorScheme.grayDark }]} />}\n      <View style={styles.header}>\n        <View onLayout={onSideItemLayout} style={[styles.sideItem, { minWidth: sideItemWidth }]}>\n          {leftItemView}\n        </View>\n        <Animated.View style={[styles.title, titleAnimatedStyle]}>\n          <Typography\n            color={titleColor ?? colorScheme.text}\n            preset=\"m/heading\"\n            align=\"center\"\n            numberOfLines={1}\n            testID={concatTestID(testID, 'title')}>\n            {title}\n          </Typography>\n        </Animated.View>\n        <View onLayout={onSideItemLayout} style={[styles.sideItem, styles.rightSideItem, { minWidth: sideItemWidth }]}>\n          {rightItemView}\n        </View>\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  header: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    height: 48,\n    width: '100%',\n  },\n  headerContainer: {\n    alignItems: 'center',\n    flexDirection: 'column',\n    paddingHorizontal: 8,\n  },\n  modalHandle: {\n    borderRadius: 2.5,\n    height: 5,\n    marginVertical: 5,\n    width: 36,\n  },\n  rightSideItem: {\n    alignItems: 'flex-end',\n  },\n  sideItem: {\n    padding: 12,\n  },\n  title: {\n    flex: 1,\n  },\n});\n\nexport default NavigationHeader;\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","Animated","Easing","StyleSheet","View","concatTestID","BlurView","Typography","useAppColorScheme","NavigationHeader","animate","backgroundColor","blurred","leftItem","modalHandleVisible","rightItem","style","testID","title","titleVisible","titleColor","props","colorScheme","titleOpacity","Value","sideItemWidth","setSideItemWidth","onSideItemLayout","nativeEvent","layout","prev","Math","max","width","background","leftItemView","undefined","isValidElement","LeftItemComponent","createElement","timing","duration","easing","ease","toValue","useNativeDriver","start","setValue","rightItemView","RightItemComponent","titleAnimatedStyle","opacity","_extends","styles","headerContainer","blurAmount","blurStyle","color","absoluteFill","modalHandle","grayDark","header","onLayout","sideItem","minWidth","text","preset","align","numberOfLines","rightSideItem","create","alignItems","flexDirection","height","paddingHorizontal","borderRadius","marginVertical","padding","flex"],"sources":["navigation-header.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Animated, ColorValue, Easing, LayoutChangeEvent, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport BlurView from '../blur/blur-view';\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type NavigationHeaderProps = ViewProps & {\n  animate?: boolean;\n  backgroundColor?: ColorValue;\n  blurred?: boolean;\n  leftItem?: React.ComponentType<any> | React.ReactElement;\n  modalHandleVisible?: boolean;\n  rightItem?: React.ComponentType<any> | React.ReactElement;\n  title?: string;\n  titleColor?: string;\n  titleVisible?: boolean;\n};\n\nconst NavigationHeader: FC<NavigationHeaderProps> = ({\n  animate = false,\n  backgroundColor,\n  blurred = false,\n  leftItem,\n  modalHandleVisible,\n  rightItem,\n  style,\n  testID,\n  title,\n  titleVisible = true,\n  titleColor,\n  ...props\n}) => {\n  const colorScheme = useAppColorScheme();\n  const [titleOpacity] = useState(() => new Animated.Value(titleVisible ? 1 : 0));\n\n  const [sideItemWidth, setSideItemWidth] = useState<number>();\n  const onSideItemLayout = useCallback(\n    ({ nativeEvent: { layout } }: LayoutChangeEvent) => setSideItemWidth((prev) => Math.max(layout.width, prev ?? 0)),\n    [],\n  );\n\n  backgroundColor = backgroundColor ?? colorScheme.background;\n\n  const leftItemView: React.ReactElement | undefined = useMemo(() => {\n    if (!leftItem) {\n      return undefined;\n    }\n    if (React.isValidElement(leftItem)) {\n      return leftItem;\n    } else {\n      const LeftItemComponent = leftItem as React.ComponentType<any>;\n      return <LeftItemComponent />;\n    }\n  }, [leftItem]);\n\n  useEffect(() => {\n    if (animate) {\n      Animated.timing(titleOpacity, {\n        duration: 150,\n        easing: Easing.ease,\n        toValue: titleVisible ? 1 : 0,\n        useNativeDriver: true,\n      }).start();\n    } else {\n      titleOpacity.setValue(titleVisible ? 1 : 0);\n    }\n  }, [animate, titleOpacity, titleVisible]);\n\n  const rightItemView: React.ReactElement | undefined = useMemo(() => {\n    if (!rightItem) {\n      return undefined;\n    }\n    if (React.isValidElement(rightItem)) {\n      return rightItem;\n    } else {\n      const RightItemComponent = rightItem as React.ComponentType<any>;\n      return <RightItemComponent />;\n    }\n  }, [rightItem]);\n\n  const titleAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> = {\n    opacity: titleOpacity,\n  };\n\n  return (\n    <View\n      {...props}\n      style={[styles.headerContainer, !blurred ? { backgroundColor } : undefined, style]}\n      testID={testID}>\n      {blurred && (\n        <BlurView blurAmount={10} blurStyle=\"header\" color={backgroundColor} style={StyleSheet.absoluteFill} />\n      )}\n      {modalHandleVisible && <View style={[styles.modalHandle, { backgroundColor: colorScheme.grayDark }]} />}\n      <View style={styles.header}>\n        <View onLayout={onSideItemLayout} style={[styles.sideItem, { minWidth: sideItemWidth }]}>\n          {leftItemView}\n        </View>\n        <Animated.View style={[styles.title, titleAnimatedStyle]}>\n          <Typography\n            color={titleColor ?? colorScheme.text}\n            preset=\"m/heading\"\n            align=\"center\"\n            numberOfLines={1}\n            testID={concatTestID(testID, 'title')}>\n            {title}\n          </Typography>\n        </Animated.View>\n        <View onLayout={onSideItemLayout} style={[styles.sideItem, styles.rightSideItem, { minWidth: sideItemWidth }]}>\n          {rightItemView}\n        </View>\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  header: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    height: 48,\n    width: '100%',\n  },\n  headerContainer: {\n    alignItems: 'center',\n    flexDirection: 'column',\n    paddingHorizontal: 8,\n  },\n  modalHandle: {\n    borderRadius: 2.5,\n    height: 5,\n    marginVertical: 5,\n    width: 36,\n  },\n  rightSideItem: {\n    alignItems: 'flex-end',\n  },\n  sideItem: {\n    padding: 12,\n  },\n  title: {\n    flex: 1,\n  },\n});\n\nexport default NavigationHeader;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/history/data-item.js

@@ -1,21 +1,29 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { StyleSheet, View } from 'react-native';
+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, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { concatTestID } from '../../utils/testID';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
-const DataItem = _ref => {
-  let {
-    attribute,
-    value,
-    valueColor,
-    valueIcon,
-    multiline,
-    last,
-    testID,
-    style,
-    ...props
-  } = _ref;
+const DataItem = ({
+  attribute,
+  value,
+  valueColor,
+  valueIcon,
+  multiline,
+  last,
+  testID,
+  style,
+  ...props
+}) => {
   const colorScheme = useAppColorScheme();
+  const valueIconView = useMemo(() => {
+    if (/*#__PURE__*/React.isValidElement(valueIcon)) {
+      return valueIcon;
+    } else if (valueIcon) {
+      const IconComponent = valueIcon;
+      return /*#__PURE__*/React.createElement(IconComponent, null);
+    }
+  }, [valueIcon]);
   return /*#__PURE__*/React.createElement(View, _extends({
     style: [styles.dataItem, {
       borderColor: colorScheme.background
@@ -28,7 +36,7 @@ const DataItem = _ref => {
     testID: concatTestID(testID, 'title')
   }, attribute), /*#__PURE__*/React.createElement(View, {
     style: styles.value
-  }, valueIcon, /*#__PURE__*/React.createElement(Typography, {
+  }, valueIconView, /*#__PURE__*/React.createElement(Typography, {
     color: valueColor !== null && valueColor !== void 0 ? valueColor : colorScheme.text,
     numberOfLines: multiline ? undefined : 1,
     preset: "s",

package/lib/module/ui-components/history/data-item.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","concatTestID","Typography","useAppColorScheme","DataItem","_ref","attribute","value","valueColor","valueIcon","multiline","last","testID","style","props","colorScheme","createElement","_extends","styles","dataItem","borderColor","background","color","text","preset","dataItemLabel","numberOfLines","undefined","valueLabel","create","borderBottomWidth","paddingVertical","marginBottom","opacity","alignItems","flexDirection","marginLeft"],"sources":["data-item.tsx"],"sourcesContent":["import { FC, ReactNode } from 'react';\nimport React, { ColorValue, StyleSheet, View, ViewProps } from 'react-native';\n\nimport { concatTestID } from '../../utils/testID';\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type DataItemProps = ViewProps & {\n  attribute: string;\n  last?: boolean;\n  multiline?: boolean;\n  value: string;\n  valueColor?: ColorValue;\n  valueIcon?: ReactNode;\n};\n\nconst DataItem: FC<DataItemProps> = ({\n  attribute,\n  value,\n  valueColor,\n  valueIcon,\n  multiline,\n  last,\n  testID,\n  style,\n  ...props\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  return (\n    <View\n      style={[styles.dataItem, { borderColor: colorScheme.background }, last && styles.last, style]}\n      testID={testID}\n      {...props}>\n      <Typography\n        color={colorScheme.text}\n        preset=\"xs/line-height-small\"\n        style={styles.dataItemLabel}\n        testID={concatTestID(testID, 'title')}>\n        {attribute}\n      </Typography>\n\n      <View style={styles.value}>\n        {valueIcon}\n        <Typography\n          color={valueColor ?? colorScheme.text}\n          numberOfLines={multiline ? undefined : 1}\n          preset=\"s\"\n          style={valueIcon ? styles.valueLabel : undefined}\n          testID={concatTestID(testID, 'value')}>\n          {value}\n        </Typography>\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  dataItem: {\n    borderBottomWidth: 1,\n    paddingVertical: 10,\n  },\n  dataItemLabel: {\n    marginBottom: 4,\n    opacity: 0.7,\n  },\n  last: {\n    borderBottomWidth: 0,\n  },\n  value: {\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  valueLabel: {\n    marginLeft: 4,\n  },\n});\n\nexport default DataItem;\n"],"mappings":";AACA,OAAOA,KAAK,IAAgBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAE7E,SAASC,YAAY,QAAQ,oBAAoB;AACjD,OAAOC,UAAU,MAAM,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,+BAA+B;AAWjE,MAAMC,QAA2B,GAAGC,IAAA,IAU9B;EAAA,IAV+B;IACnCC,SAAS;IACTC,KAAK;IACLC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC,IAAI;IACJC,MAAM;IACNC,KAAK;IACL,GAAGC;EACL,CAAC,GAAAT,IAAA;EACC,MAAMU,WAAW,GAAGZ,iBAAiB,EAAE;EAEvC,oBACEL,KAAA,CAAAkB,aAAA,CAAChB,IAAI,EAAAiB,QAAA;IACHJ,KAAK,EAAE,CAACK,MAAM,CAACC,QAAQ,EAAE;MAAEC,WAAW,EAAEL,WAAW,CAACM;IAAW,CAAC,EAAEV,IAAI,IAAIO,MAAM,CAACP,IAAI,EAAEE,KAAK,CAAE;IAC9FD,MAAM,EAAEA;EAAO,GACXE,KAAK,gBACThB,KAAA,CAAAkB,aAAA,CAACd,UAAU;IACToB,KAAK,EAAEP,WAAW,CAACQ,IAAK;IACxBC,MAAM,EAAC,sBAAsB;IAC7BX,KAAK,EAAEK,MAAM,CAACO,aAAc;IAC5Bb,MAAM,EAAEX,YAAY,CAACW,MAAM,EAAE,OAAO;EAAE,GACrCN,SAAS,CACC,eAEbR,KAAA,CAAAkB,aAAA,CAAChB,IAAI;IAACa,KAAK,EAAEK,MAAM,CAACX;EAAM,GACvBE,SAAS,eACVX,KAAA,CAAAkB,aAAA,CAACd,UAAU;IACToB,KAAK,EAAEd,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIO,WAAW,CAACQ,IAAK;IACtCG,aAAa,EAAEhB,SAAS,GAAGiB,SAAS,GAAG,CAAE;IACzCH,MAAM,EAAC,GAAG;IACVX,KAAK,EAAEJ,SAAS,GAAGS,MAAM,CAACU,UAAU,GAAGD,SAAU;IACjDf,MAAM,EAAEX,YAAY,CAACW,MAAM,EAAE,OAAO;EAAE,GACrCL,KAAK,CACK,CACR,CACF;AAEX,CAAC;AAED,MAAMW,MAAM,GAAGnB,UAAU,CAAC8B,MAAM,CAAC;EAC/BV,QAAQ,EAAE;IACRW,iBAAiB,EAAE,CAAC;IACpBC,eAAe,EAAE;EACnB,CAAC;EACDN,aAAa,EAAE;IACbO,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE;EACX,CAAC;EACDtB,IAAI,EAAE;IACJmB,iBAAiB,EAAE;EACrB,CAAC;EACDvB,KAAK,EAAE;IACL2B,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDP,UAAU,EAAE;IACVQ,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAehC,QAAQ"}
+{"version":3,"names":["React","useMemo","StyleSheet","View","concatTestID","Typography","useAppColorScheme","DataItem","attribute","value","valueColor","valueIcon","multiline","last","testID","style","props","colorScheme","valueIconView","isValidElement","IconComponent","createElement","_extends","styles","dataItem","borderColor","background","color","text","preset","dataItemLabel","numberOfLines","undefined","valueLabel","create","borderBottomWidth","paddingVertical","marginBottom","opacity","alignItems","flexDirection","marginLeft"],"sources":["data-item.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactElement, useMemo } from 'react';\nimport { ColorValue, StyleSheet, View, ViewProps } from 'react-native';\n\nimport { concatTestID } from '../../utils/testID';\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type DataItemProps = ViewProps & {\n  attribute: string;\n  last?: boolean;\n  multiline?: boolean;\n  value: string;\n  valueColor?: ColorValue;\n  valueIcon?: ComponentType<any> | ReactElement;\n};\n\nconst DataItem: FC<DataItemProps> = ({\n  attribute,\n  value,\n  valueColor,\n  valueIcon,\n  multiline,\n  last,\n  testID,\n  style,\n  ...props\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const valueIconView: ReactElement | undefined = useMemo(() => {\n    if (React.isValidElement(valueIcon)) {\n      return valueIcon;\n    } else if (valueIcon) {\n      const IconComponent = valueIcon as ComponentType<any>;\n      return <IconComponent />;\n    }\n  }, [valueIcon]);\n\n  return (\n    <View\n      style={[styles.dataItem, { borderColor: colorScheme.background }, last && styles.last, style]}\n      testID={testID}\n      {...props}>\n      <Typography\n        color={colorScheme.text}\n        preset=\"xs/line-height-small\"\n        style={styles.dataItemLabel}\n        testID={concatTestID(testID, 'title')}>\n        {attribute}\n      </Typography>\n\n      <View style={styles.value}>\n        {valueIconView}\n        <Typography\n          color={valueColor ?? colorScheme.text}\n          numberOfLines={multiline ? undefined : 1}\n          preset=\"s\"\n          style={valueIcon ? styles.valueLabel : undefined}\n          testID={concatTestID(testID, 'value')}>\n          {value}\n        </Typography>\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  dataItem: {\n    borderBottomWidth: 1,\n    paddingVertical: 10,\n  },\n  dataItemLabel: {\n    marginBottom: 4,\n    opacity: 0.7,\n  },\n  last: {\n    borderBottomWidth: 0,\n  },\n  value: {\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  valueLabel: {\n    marginLeft: 4,\n  },\n});\n\nexport default DataItem;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAqCC,OAAO,QAAQ,OAAO;AACvE,SAAqBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAEtE,SAASC,YAAY,QAAQ,oBAAoB;AACjD,OAAOC,UAAU,MAAM,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,+BAA+B;AAWjE,MAAMC,QAA2B,GAAGA,CAAC;EACnCC,SAAS;EACTC,KAAK;EACLC,UAAU;EACVC,SAAS;EACTC,SAAS;EACTC,IAAI;EACJC,MAAM;EACNC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGX,iBAAiB,CAAC,CAAC;EAEvC,MAAMY,aAAuC,GAAGjB,OAAO,CAAC,MAAM;IAC5D,iBAAID,KAAK,CAACmB,cAAc,CAACR,SAAS,CAAC,EAAE;MACnC,OAAOA,SAAS;IAClB,CAAC,MAAM,IAAIA,SAAS,EAAE;MACpB,MAAMS,aAAa,GAAGT,SAA+B;MACrD,oBAAOX,KAAA,CAAAqB,aAAA,CAACD,aAAa,MAAE,CAAC;IAC1B;EACF,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,oBACEX,KAAA,CAAAqB,aAAA,CAAClB,IAAI,EAAAmB,QAAA;IACHP,KAAK,EAAE,CAACQ,MAAM,CAACC,QAAQ,EAAE;MAAEC,WAAW,EAAER,WAAW,CAACS;IAAW,CAAC,EAAEb,IAAI,IAAIU,MAAM,CAACV,IAAI,EAAEE,KAAK,CAAE;IAC9FD,MAAM,EAAEA;EAAO,GACXE,KAAK,gBACThB,KAAA,CAAAqB,aAAA,CAAChB,UAAU;IACTsB,KAAK,EAAEV,WAAW,CAACW,IAAK;IACxBC,MAAM,EAAC,sBAAsB;IAC7Bd,KAAK,EAAEQ,MAAM,CAACO,aAAc;IAC5BhB,MAAM,EAAEV,YAAY,CAACU,MAAM,EAAE,OAAO;EAAE,GACrCN,SACS,CAAC,eAEbR,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IAACY,KAAK,EAAEQ,MAAM,CAACd;EAAM,GACvBS,aAAa,eACdlB,KAAA,CAAAqB,aAAA,CAAChB,UAAU;IACTsB,KAAK,EAAEjB,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIO,WAAW,CAACW,IAAK;IACtCG,aAAa,EAAEnB,SAAS,GAAGoB,SAAS,GAAG,CAAE;IACzCH,MAAM,EAAC,GAAG;IACVd,KAAK,EAAEJ,SAAS,GAAGY,MAAM,CAACU,UAAU,GAAGD,SAAU;IACjDlB,MAAM,EAAEV,YAAY,CAACU,MAAM,EAAE,OAAO;EAAE,GACrCL,KACS,CACR,CACF,CAAC;AAEX,CAAC;AAED,MAAMc,MAAM,GAAGrB,UAAU,CAACgC,MAAM,CAAC;EAC/BV,QAAQ,EAAE;IACRW,iBAAiB,EAAE,CAAC;IACpBC,eAAe,EAAE;EACnB,CAAC;EACDN,aAAa,EAAE;IACbO,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE;EACX,CAAC;EACDzB,IAAI,EAAE;IACJsB,iBAAiB,EAAE;EACrB,CAAC;EACD1B,KAAK,EAAE;IACL8B,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDP,UAAU,EAAE;IACVQ,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAelC,QAAQ","ignoreList":[]}

package/lib/module/ui-components/history/history-details.js

@@ -0,0 +1,171 @@
+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, { useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { CredentialDetails, EntityDetails } from '../../components';
+import { HeaderInfoButton } from '../../components/navigation/header-buttons';
+import { concatTestID, useCredentialListExpandedCard } from '../../utils';
+import { TouchableOpacity } from '../accessibility';
+import { BackButton } from '../buttons';
+import { CredentialDetailsCardListItem, CredentialHeader } from '../credential';
+import { NextIcon } from '../icons';
+import { ScrollViewScreen } from '../screens';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import DataItem from './data-item';
+export const HistoryDetailsView = ({
+  assets,
+  data,
+  headerButton,
+  labels,
+  onBackPressed,
+  onInfoPressed,
+  onImagePreview,
+  testID
+}) => {
+  var _assets$cards, _assets$cards2;
+  const colorScheme = useAppColorScheme();
+  const {
+    expandedCredential,
+    onHeaderPress,
+    setInitialCredential
+  } = useCredentialListExpandedCard();
+
+  // Expand the first credential
+  useEffect(() => {
+    if (assets !== null && assets !== void 0 && assets.cards && assets.cards.length > 0) {
+      let id = 'credentialDetails' in assets.cards[0] ? assets.cards[0].credentialDetails.credentialId : assets.cards[0].credentialCard.card.credentialId;
+      if (id) {
+        setInitialCredential(id);
+      }
+    }
+  }, [assets === null || assets === void 0 ? void 0 : assets.cards, setInitialCredential]);
+  const moreInfoHeaderButton = useMemo(() => {
+    var _labels$infoButtonAcc;
+    if (headerButton) {
+      return headerButton;
+    }
+    if (!onInfoPressed) {
+      return undefined;
+    }
+    return /*#__PURE__*/React.createElement(HeaderInfoButton, {
+      onPress: onInfoPressed,
+      testID: concatTestID(testID, 'header', 'info'),
+      accessibilityLabel: (_labels$infoButtonAcc = labels.infoButtonAccessibility) !== null && _labels$infoButtonAcc !== void 0 ? _labels$infoButtonAcc : ''
+    });
+  }, [headerButton, labels.infoButtonAccessibility, onInfoPressed, testID]);
+  const hasAssets = assets && (assets.header || ((_assets$cards = assets.cards) === null || _assets$cards === void 0 ? void 0 : _assets$cards.length));
+  return /*#__PURE__*/React.createElement(ScrollViewScreen, {
+    header: {
+      leftItem: /*#__PURE__*/React.createElement(BackButton, {
+        onPress: onBackPressed,
+        testID: concatTestID(testID, 'header', 'back')
+      }),
+      rightItem: moreInfoHeaderButton,
+      static: true,
+      title: labels.title
+    },
+    scrollView: {
+      style: styles.content
+    },
+    testID: testID
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.section, {
+      backgroundColor: colorScheme.white
+    }]
+  }, data.header && 'entity' in data.header && /*#__PURE__*/React.createElement(EntityDetails, _extends({}, data.header.entity, {
+    style: [styles.entity, {
+      borderColor: colorScheme.background
+    }, data.header.entity.style]
+  })), data.header && 'credentialHeader' in data.header && /*#__PURE__*/React.createElement(CredentialHeader, _extends({}, data.header.credentialHeader, {
+    blur: false,
+    style: [styles.header, {
+      borderColor: colorScheme.background
+    }, data.header.credentialHeader.style]
+  })), /*#__PURE__*/React.createElement(DataItem, {
+    attribute: labels.data.date,
+    value: data.date
+  }), /*#__PURE__*/React.createElement(DataItem, {
+    attribute: labels.data.action,
+    last: true,
+    testID: data.action.testID,
+    value: data.action.label,
+    valueColor: data.action.color,
+    valueIcon: data.action.icon
+  })), hasAssets && /*#__PURE__*/React.createElement(Typography, {
+    color: colorScheme.text,
+    preset: "m",
+    style: styles.sectionHeader
+  }, labels.relatedAssets), (assets === null || assets === void 0 ? void 0 : assets.header) && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    disabled: !assets.header.onPressed,
+    onPress: assets.header.onPressed
+  }, /*#__PURE__*/React.createElement(CredentialHeader, _extends({}, assets.header, {
+    accessory: assets.header.onPressed ? /*#__PURE__*/React.createElement(NextIcon, {
+      color: colorScheme.text
+    }) : undefined,
+    blur: false,
+    style: [styles.assetsHeader, assets.header.style]
+  }))), assets === null || assets === void 0 || (_assets$cards2 = assets.cards) === null || _assets$cards2 === void 0 ? void 0 : _assets$cards2.map((props, index, {
+    length
+  }) => {
+    if ('credentialDetails' in props) {
+      return /*#__PURE__*/React.createElement(View, {
+        key: props.credentialDetails.credentialId,
+        style: styles.credential
+      }, /*#__PURE__*/React.createElement(CredentialDetails, _extends({}, props.credentialDetails, {
+        expanded: expandedCredential === props.credentialDetails.credentialId,
+        labels: labels.credentialCard,
+        lastItem: index === length - 1,
+        onHeaderPress: onHeaderPress,
+        onImagePreview: onImagePreview
+      })));
+    } else {
+      const itemProps = {
+        ...props.credentialCard,
+        card: {
+          ...props.credentialCard.card,
+          onHeaderPress
+        }
+      };
+      return /*#__PURE__*/React.createElement(View, {
+        key: index.toString(),
+        style: styles.credential
+      }, /*#__PURE__*/React.createElement(CredentialDetailsCardListItem, _extends({}, itemProps, {
+        expanded: expandedCredential === props.credentialCard.card.credentialId,
+        lastItem: index === length - 1,
+        onImagePreview: onImagePreview
+      })));
+    }
+  }));
+};
+const styles = StyleSheet.create({
+  assetsHeader: {
+    borderRadius: 8
+  },
+  content: {
+    paddingHorizontal: 16,
+    paddingTop: 12
+  },
+  credential: {
+    marginBottom: 4
+  },
+  entity: {
+    borderBottomWidth: 1,
+    paddingBottom: 8
+  },
+  header: {
+    borderBottomWidth: 1,
+    marginTop: -8,
+    paddingBottom: 12,
+    paddingHorizontal: 0
+  },
+  section: {
+    borderRadius: 8,
+    marginBottom: 12,
+    padding: 12
+  },
+  sectionHeader: {
+    marginHorizontal: 4,
+    marginVertical: 16
+  }
+});
+//# sourceMappingURL=history-details.js.map

package/lib/module/ui-components/history/history-details.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","StyleSheet","View","CredentialDetails","EntityDetails","HeaderInfoButton","concatTestID","useCredentialListExpandedCard","TouchableOpacity","BackButton","CredentialDetailsCardListItem","CredentialHeader","NextIcon","ScrollViewScreen","Typography","useAppColorScheme","DataItem","HistoryDetailsView","assets","data","headerButton","labels","onBackPressed","onInfoPressed","onImagePreview","testID","_assets$cards","_assets$cards2","colorScheme","expandedCredential","onHeaderPress","setInitialCredential","cards","length","id","credentialDetails","credentialId","credentialCard","card","moreInfoHeaderButton","_labels$infoButtonAcc","undefined","createElement","onPress","accessibilityLabel","infoButtonAccessibility","hasAssets","header","leftItem","rightItem","static","title","scrollView","style","styles","content","section","backgroundColor","white","_extends","entity","borderColor","background","credentialHeader","blur","attribute","date","value","action","last","label","valueColor","color","valueIcon","icon","text","preset","sectionHeader","relatedAssets","disabled","onPressed","accessory","assetsHeader","map","props","index","key","credential","expanded","lastItem","itemProps","toString","create","borderRadius","paddingHorizontal","paddingTop","marginBottom","borderBottomWidth","paddingBottom","marginTop","padding","marginHorizontal","marginVertical"],"sources":["history-details.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactElement, useEffect, useMemo } from 'react';\nimport { ColorValue, ImageSourcePropType, StyleSheet, View } from 'react-native';\n\nimport { CredentialDetails, CredentialDetailsProps, EntityDetails, EntityDetailsProps } from '../../components';\nimport { HeaderInfoButton } from '../../components/navigation/header-buttons';\nimport { CardLabels, concatTestID, useCredentialListExpandedCard } from '../../utils';\nimport { TouchableOpacity } from '../accessibility';\nimport { BackButton } from '../buttons';\nimport {\n  CredentialDetailsCardListItem,\n  CredentialDetailsCardListItemProps,\n  CredentialHeader,\n  CredentialHeaderProps,\n} from '../credential';\nimport { NextIcon } from '../icons';\nimport { ScrollViewScreen } from '../screens';\nimport { Typography } from '../text';\nimport { useAppColorScheme } from '../theme';\nimport DataItem from './data-item';\n\nexport type HistoryDetailsLabels = {\n  credentialCard: CardLabels;\n  data: {\n    date: string;\n    action: string;\n  };\n  infoButtonAccessibility?: string;\n  relatedAssets: string;\n  title: string;\n};\n\ntype CredentialDetails = Omit<\n  CredentialDetailsProps,\n  'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'\n>;\n\ntype CredentialCard = Omit<\n  CredentialDetailsCardListItemProps,\n  'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'\n>;\n\nexport type HistoryDetailsViewProps = {\n  assets?: {\n    header?: CredentialHeaderProps & {\n      onPressed?: () => void;\n    };\n    cards?: (\n      | {\n          credentialDetails: CredentialDetails;\n        }\n      | {\n          credentialCard: CredentialCard;\n        }\n    )[];\n  };\n  data: {\n    header?:\n      | {\n          entity: EntityDetailsProps;\n        }\n      | {\n          credentialHeader: CredentialHeaderProps;\n        };\n    date: string;\n    action: {\n      icon: ComponentType<any> | ReactElement;\n      label: string;\n      color: ColorValue;\n      testID?: string;\n    };\n  };\n  headerButton?: ReactElement;\n  labels: HistoryDetailsLabels;\n  onBackPressed: () => void;\n  onInfoPressed?: () => void;\n  onImagePreview: (title: string, image: ImageSourcePropType) => void;\n  testID: string;\n};\n\nexport const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({\n  assets,\n  data,\n  headerButton,\n  labels,\n  onBackPressed,\n  onInfoPressed,\n  onImagePreview,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n  const { expandedCredential, onHeaderPress, setInitialCredential } = useCredentialListExpandedCard();\n\n  // Expand the first credential\n  useEffect(() => {\n    if (assets?.cards && assets.cards.length > 0) {\n      let id =\n        'credentialDetails' in assets.cards[0]\n          ? assets.cards[0].credentialDetails.credentialId\n          : assets.cards[0].credentialCard.card.credentialId;\n      if (id) {\n        setInitialCredential(id);\n      }\n    }\n  }, [assets?.cards, setInitialCredential]);\n\n  const moreInfoHeaderButton = useMemo(() => {\n    if (headerButton) {\n      return headerButton;\n    }\n\n    if (!onInfoPressed) {\n      return undefined;\n    }\n\n    return (\n      <HeaderInfoButton\n        onPress={onInfoPressed}\n        testID={concatTestID(testID, 'header', 'info')}\n        accessibilityLabel={labels.infoButtonAccessibility ?? ''}\n      />\n    );\n  }, [headerButton, labels.infoButtonAccessibility, onInfoPressed, testID]);\n\n  const hasAssets = assets && (assets.header || assets.cards?.length);\n\n  return (\n    <ScrollViewScreen\n      header={{\n        leftItem: <BackButton onPress={onBackPressed} testID={concatTestID(testID, 'header', 'back')} />,\n        rightItem: moreInfoHeaderButton,\n        static: true,\n        title: labels.title,\n      }}\n      scrollView={{\n        style: styles.content,\n      }}\n      testID={testID}>\n      <View style={[styles.section, { backgroundColor: colorScheme.white }]}>\n        {data.header && 'entity' in data.header && (\n          <EntityDetails\n            {...data.header.entity}\n            style={[styles.entity, { borderColor: colorScheme.background }, data.header.entity.style]}\n          />\n        )}\n        {data.header && 'credentialHeader' in data.header && (\n          <CredentialHeader\n            {...data.header.credentialHeader}\n            blur={false}\n            style={[styles.header, { borderColor: colorScheme.background }, data.header.credentialHeader.style]}\n          />\n        )}\n        <DataItem attribute={labels.data.date} value={data.date} />\n        <DataItem\n          attribute={labels.data.action}\n          last\n          testID={data.action.testID}\n          value={data.action.label}\n          valueColor={data.action.color}\n          valueIcon={data.action.icon}\n        />\n      </View>\n\n      {hasAssets && (\n        <Typography color={colorScheme.text} preset=\"m\" style={styles.sectionHeader}>\n          {labels.relatedAssets}\n        </Typography>\n      )}\n\n      {assets?.header && (\n        <TouchableOpacity disabled={!assets.header.onPressed} onPress={assets.header.onPressed}>\n          <CredentialHeader\n            {...assets.header}\n            accessory={assets.header.onPressed ? <NextIcon color={colorScheme.text} /> : undefined}\n            blur={false}\n            style={[styles.assetsHeader, assets.header.style]}\n          />\n        </TouchableOpacity>\n      )}\n      {assets?.cards?.map((props, index, { length }) => {\n        if ('credentialDetails' in props) {\n          return (\n            <View key={props.credentialDetails.credentialId} style={styles.credential}>\n              <CredentialDetails\n                {...props.credentialDetails}\n                expanded={expandedCredential === props.credentialDetails.credentialId}\n                labels={labels.credentialCard}\n                lastItem={index === length - 1}\n                onHeaderPress={onHeaderPress}\n                onImagePreview={onImagePreview}\n              />\n            </View>\n          );\n        } else {\n          const itemProps = {\n            ...props.credentialCard,\n            card: {\n              ...props.credentialCard.card,\n              onHeaderPress,\n            },\n          };\n          return (\n            <View key={index.toString()} style={styles.credential}>\n              <CredentialDetailsCardListItem\n                {...itemProps}\n                expanded={expandedCredential === props.credentialCard.card.credentialId}\n                lastItem={index === length - 1}\n                onImagePreview={onImagePreview}\n              />\n            </View>\n          );\n        }\n      })}\n    </ScrollViewScreen>\n  );\n};\n\nconst styles = StyleSheet.create({\n  assetsHeader: {\n    borderRadius: 8,\n  },\n  content: {\n    paddingHorizontal: 16,\n    paddingTop: 12,\n  },\n  credential: {\n    marginBottom: 4,\n  },\n  entity: {\n    borderBottomWidth: 1,\n    paddingBottom: 8,\n  },\n  header: {\n    borderBottomWidth: 1,\n    marginTop: -8,\n    paddingBottom: 12,\n    paddingHorizontal: 0,\n  },\n  section: {\n    borderRadius: 8,\n    marginBottom: 12,\n    padding: 12,\n  },\n  sectionHeader: {\n    marginHorizontal: 4,\n    marginVertical: 16,\n  },\n});\n"],"mappings":"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","ignoreList":[]}