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

package/lib/module/ui-components/entity/avatar.js

@@ -0,0 +1,95 @@
+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';
+import ImageOrComponent from '../image/image-or-component';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25581&mode=design&t=YI1oD2BfBie5HcvJ-0
+const Avatar = ({
+  avatar,
+  placeholderText,
+  statusIcon,
+  style,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const statusIconView = useMemo(() => {
+    if (!statusIcon) {
+      return undefined;
+    }
+    if (/*#__PURE__*/React.isValidElement(statusIcon)) {
+      return statusIcon;
+    } else {
+      const StatusIconComponent = statusIcon;
+      return /*#__PURE__*/React.createElement(StatusIconComponent, null);
+    }
+  }, [statusIcon]);
+  const imageSource = useMemo(() => {
+    if (avatar) {
+      return avatar;
+    }
+    return {
+      component: /*#__PURE__*/React.createElement(View, {
+        style: [styles.avatarPlaceholder, {
+          backgroundColor: colorScheme.accent
+        }]
+      }, /*#__PURE__*/React.createElement(Typography, {
+        color: colorScheme.accentText,
+        style: styles.avatarPlaceholderText
+      }, placeholderText))
+    };
+  }, [colorScheme, avatar, placeholderText]);
+  const {
+    borderRadius,
+    ...avatarStyle
+  } = StyleSheet.flatten([styles.avatar, style]);
+  return /*#__PURE__*/React.createElement(View, _extends({
+    accessibilityElementsHidden: true,
+    style: avatarStyle,
+    testID: testID
+  }, viewProps), /*#__PURE__*/React.createElement(View, {
+    style: [styles.imageWrapper, borderRadius ? {
+      borderRadius
+    } : undefined]
+  }, /*#__PURE__*/React.createElement(ImageOrComponent, {
+    source: imageSource,
+    style: styles.image,
+    testID: concatTestID(testID, 'logo')
+  })), statusIconView && /*#__PURE__*/React.createElement(View, {
+    style: styles.statusIcon,
+    testID: concatTestID(testID, 'statusIcon')
+  }, statusIconView));
+};
+const styles = StyleSheet.create({
+  avatar: {
+    height: 72,
+    width: 72
+  },
+  avatarPlaceholder: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  avatarPlaceholderText: {
+    textTransform: 'uppercase'
+  },
+  image: {
+    height: '100%',
+    width: '100%'
+  },
+  imageWrapper: {
+    borderRadius: 36,
+    height: '100%',
+    overflow: 'hidden',
+    width: '100%'
+  },
+  statusIcon: {
+    bottom: 4,
+    position: 'absolute',
+    right: 4
+  }
+});
+export default Avatar;
+//# sourceMappingURL=avatar.js.map

package/lib/module/ui-components/entity/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","StyleSheet","View","concatTestID","ImageOrComponent","Typography","useAppColorScheme","Avatar","avatar","placeholderText","statusIcon","style","testID","viewProps","colorScheme","statusIconView","undefined","isValidElement","StatusIconComponent","createElement","imageSource","component","styles","avatarPlaceholder","backgroundColor","accent","color","accentText","avatarPlaceholderText","borderRadius","avatarStyle","flatten","_extends","accessibilityElementsHidden","imageWrapper","source","image","create","height","width","alignItems","flex","justifyContent","textTransform","overflow","bottom","position","right"],"sources":["avatar.tsx"],"sourcesContent":["import React, { ComponentType, FunctionComponent, ReactElement, useMemo } from 'react';\nimport { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport ImageOrComponent, { ImageOrComponentSource } from '../image/image-or-component';\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type AvatarProps = ViewProps & {\n  avatar?: ImageOrComponentSource;\n  placeholderText?: string;\n  statusIcon?: ComponentType<any> | ReactElement;\n  testID?: string;\n};\n\n// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25581&mode=design&t=YI1oD2BfBie5HcvJ-0\nconst Avatar: FunctionComponent<AvatarProps> = ({\n  avatar,\n  placeholderText,\n  statusIcon,\n  style,\n  testID,\n  ...viewProps\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const statusIconView: React.ReactElement | undefined = useMemo(() => {\n    if (!statusIcon) {\n      return undefined;\n    }\n    if (React.isValidElement(statusIcon)) {\n      return statusIcon;\n    } else {\n      const StatusIconComponent = statusIcon as React.ComponentType<any>;\n      return <StatusIconComponent />;\n    }\n  }, [statusIcon]);\n\n  const imageSource = useMemo<ImageOrComponentSource>(() => {\n    if (avatar) {\n      return avatar;\n    }\n\n    return {\n      component: (\n        <View style={[styles.avatarPlaceholder, { backgroundColor: colorScheme.accent }]}>\n          <Typography color={colorScheme.accentText} style={styles.avatarPlaceholderText}>\n            {placeholderText}\n          </Typography>\n        </View>\n      ),\n    };\n  }, [colorScheme, avatar, placeholderText]);\n\n  const { borderRadius, ...avatarStyle } = StyleSheet.flatten([styles.avatar, style]) as ViewStyle;\n  return (\n    <View accessibilityElementsHidden={true} style={avatarStyle} testID={testID} {...viewProps}>\n      <View style={[styles.imageWrapper, borderRadius ? { borderRadius } : undefined]}>\n        <ImageOrComponent source={imageSource} style={styles.image} testID={concatTestID(testID, 'logo')} />\n      </View>\n      {statusIconView && (\n        <View style={styles.statusIcon} testID={concatTestID(testID, 'statusIcon')}>\n          {statusIconView}\n        </View>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  avatar: {\n    height: 72,\n    width: 72,\n  },\n  avatarPlaceholder: {\n    alignItems: 'center',\n    flex: 1,\n    justifyContent: 'center',\n  },\n  avatarPlaceholderText: {\n    textTransform: 'uppercase',\n  },\n  image: {\n    height: '100%',\n    width: '100%',\n  },\n  imageWrapper: {\n    borderRadius: 36,\n    height: '100%',\n    overflow: 'hidden',\n    width: '100%',\n  },\n  statusIcon: {\n    bottom: 4,\n    position: 'absolute',\n    right: 4,\n  },\n});\n\nexport default Avatar;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/entity/entity-cluster.js

@@ -0,0 +1,63 @@
+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 { Platform, StyleSheet, View } from 'react-native';
+import { concatTestID } from '../../utils';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import Avatar from './avatar';
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25595&mode=design&t=YI1oD2BfBie5HcvJ-0
+const EntityCluster = ({
+  avatar,
+  entityName,
+  subline,
+  textColor,
+  style,
+  sublineColor,
+  testID,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  const avatarProps = useMemo(() => {
+    var _avatar$placeholderTe;
+    const initials = entityName.split(' ', 3).map(word => word[0]);
+    const placeholderText = initials.length > 0 ? initials.join('') : '';
+    return {
+      ...avatar,
+      placeholderText: (_avatar$placeholderTe = avatar === null || avatar === void 0 ? void 0 : avatar.placeholderText) !== null && _avatar$placeholderTe !== void 0 ? _avatar$placeholderTe : placeholderText
+    };
+  }, [avatar, entityName]);
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [styles.entity, style],
+    testID: testID
+  }, viewProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+    testID: concatTestID(testID, 'avatar')
+  }, avatarProps)), /*#__PURE__*/React.createElement(View, {
+    style: styles.labels
+  }, /*#__PURE__*/React.createElement(Typography, {
+    testID: concatTestID(testID, 'entityName'),
+    color: textColor !== null && textColor !== void 0 ? textColor : colorScheme.text,
+    numberOfLines: 2,
+    preset: "m",
+    style: styles.entityName
+  }, entityName), subline && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Typography, {
+    testID: concatTestID(testID, 'subline'),
+    color: sublineColor !== null && sublineColor !== void 0 ? sublineColor : colorScheme.text,
+    numberOfLines: 1,
+    preset: "xs"
+  }, subline))));
+};
+const styles = StyleSheet.create({
+  entity: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  entityName: {
+    letterSpacing: Platform.OS === 'ios' ? -0.2 : -0.3 // -0.2 breaks layout on Android
+  },
+  labels: {
+    flex: 1,
+    marginLeft: 12
+  }
+});
+export default EntityCluster;
+//# sourceMappingURL=entity-cluster.js.map

package/lib/module/ui-components/entity/entity-cluster.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Platform","StyleSheet","View","concatTestID","Typography","useAppColorScheme","Avatar","EntityCluster","avatar","entityName","subline","textColor","style","sublineColor","testID","viewProps","colorScheme","avatarProps","_avatar$placeholderTe","initials","split","map","word","placeholderText","length","join","createElement","_extends","styles","entity","labels","color","text","numberOfLines","preset","create","alignItems","flexDirection","letterSpacing","OS","flex","marginLeft"],"sources":["entity-cluster.tsx"],"sourcesContent":["import React, { FunctionComponent, useMemo } from 'react';\nimport { Platform, StyleSheet, View, ViewProps } from 'react-native';\n\nimport { concatTestID } from '../../utils';\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\nimport Avatar, { AvatarProps } from './avatar';\n\nexport type EntityClusterProps = ViewProps & {\n  avatar?: AvatarProps;\n  entityName: string;\n  subline?: string;\n  textColor?: string;\n  sublineColor?: string;\n  testID?: string;\n};\n\n// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25595&mode=design&t=YI1oD2BfBie5HcvJ-0\nconst EntityCluster: FunctionComponent<EntityClusterProps> = ({\n  avatar,\n  entityName,\n  subline,\n  textColor,\n  style,\n  sublineColor,\n  testID,\n  ...viewProps\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const avatarProps = useMemo<AvatarProps>(() => {\n    const initials = entityName.split(' ', 3).map((word: string) => word[0]);\n    const placeholderText = initials.length > 0 ? initials.join('') : '';\n    return {\n      ...avatar,\n      placeholderText: avatar?.placeholderText ?? placeholderText,\n    };\n  }, [avatar, entityName]);\n\n  return (\n    <View style={[styles.entity, style]} testID={testID} {...viewProps}>\n      <Avatar testID={concatTestID(testID, 'avatar')} {...avatarProps} />\n      <View style={styles.labels}>\n        <Typography\n          testID={concatTestID(testID, 'entityName')}\n          color={textColor ?? colorScheme.text}\n          numberOfLines={2}\n          preset=\"m\"\n          style={styles.entityName}>\n          {entityName}\n        </Typography>\n        {subline && (\n          <View>\n            <Typography\n              testID={concatTestID(testID, 'subline')}\n              color={sublineColor ?? colorScheme.text}\n              numberOfLines={1}\n              preset=\"xs\">\n              {subline}\n            </Typography>\n          </View>\n        )}\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  entity: {\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  entityName: {\n    letterSpacing: Platform.OS === 'ios' ? -0.2 : -0.3, // -0.2 breaks layout on Android\n  },\n  labels: {\n    flex: 1,\n    marginLeft: 12,\n  },\n});\n\nexport default EntityCluster;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"names":["Avatar","AvatarProps","EntityCluster","EntityClusterProps"],"sources":["index.ts"],"sourcesContent":["import Avatar, { AvatarProps } from './avatar';\nimport EntityCluster, { EntityClusterProps } from './entity-cluster';\n\nexport { Avatar, AvatarProps };\nexport { EntityCluster, EntityClusterProps };\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,WAAW,QAAQ,UAAU;AAC9C,OAAOC,aAAa,IAAIC,kBAAkB,QAAQ,kBAAkB;AAEpE,SAASH,MAAM,EAAEC,WAAW;AAC5B,SAASC,aAAa,EAAEC,kBAAkB","ignoreList":[]}

package/lib/module/ui-components/header/focus-aware-status-bar.js

@@ -0,0 +1,12 @@
+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 { useIsFocused } from '@react-navigation/native';
+import React from 'react';
+import { StatusBar } from 'react-native';
+const FocusAwareStatusBar = props => {
+  const isFocused = useIsFocused();
+  return isFocused ? /*#__PURE__*/React.createElement(StatusBar, _extends({
+    animated: true
+  }, props)) : null;
+};
+export default FocusAwareStatusBar;
+//# sourceMappingURL=focus-aware-status-bar.js.map

package/lib/module/ui-components/header/focus-aware-status-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIsFocused","React","StatusBar","FocusAwareStatusBar","props","isFocused","createElement","_extends","animated"],"sources":["focus-aware-status-bar.tsx"],"sourcesContent":["import { useIsFocused } from '@react-navigation/native';\nimport React, { FunctionComponent } from 'react';\nimport { StatusBar, StatusBarProps } from 'react-native';\n\nconst FocusAwareStatusBar: FunctionComponent<StatusBarProps> = (props) => {\n  const isFocused = useIsFocused();\n  return isFocused ? <StatusBar animated={true} {...props} /> : null;\n};\n\nexport default FocusAwareStatusBar;\n"],"mappings":";AAAA,SAASA,YAAY,QAAQ,0BAA0B;AACvD,OAAOC,KAAK,MAA6B,OAAO;AAChD,SAASC,SAAS,QAAwB,cAAc;AAExD,MAAMC,mBAAsD,GAAIC,KAAK,IAAK;EACxE,MAAMC,SAAS,GAAGL,YAAY,CAAC,CAAC;EAChC,OAAOK,SAAS,gBAAGJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,EAAAK,QAAA;IAACC,QAAQ,EAAE;EAAK,GAAKJ,KAAK,CAAG,CAAC,GAAG,IAAI;AACpE,CAAC;AAED,eAAeD,mBAAmB","ignoreList":[]}

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

@@ -0,0 +1,77 @@
+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, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import BlurView from '../blur/blur-view';
+import AnimatedSearchBar from '../searchbar/animated-search-bar';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+const FoldableSearchHeader = ({
+  staticHeader = false,
+  scrollOffset,
+  searchBar,
+  header
+}) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const colorScheme = useAppColorScheme();
+  const [collapsed, setCollapsed] = useState(header ? false : true);
+  const [headerHeight, setHeaderHeight] = useState();
+  useEffect(() => {
+    const id = scrollOffset.addListener(({
+      value
+    }) => {
+      if (!headerHeight) {
+        return;
+      }
+      if (value > headerHeight) {
+        setCollapsed(true);
+      } else {
+        setCollapsed(false);
+      }
+    });
+    return () => {
+      scrollOffset.removeListener(id);
+    };
+  }, [scrollOffset, searchBar, headerHeight]);
+  const playHeaderFoldAnimation = !staticHeader && headerHeight;
+  const scrollHeaderAnimatedStyle = playHeaderFoldAnimation ? {
+    transform: [{
+      translateY: scrollOffset.interpolate({
+        extrapolate: 'clamp',
+        inputRange: [0, headerHeight],
+        outputRange: [0, -headerHeight]
+      })
+    }]
+  } : undefined;
+  const fadeHeaderOutAnimatedStyle = playHeaderFoldAnimation ? {
+    opacity: scrollOffset.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [0, headerHeight / 2],
+      outputRange: [1, 0]
+    })
+  } : undefined;
+  const onHeaderLayout = useCallback(event => {
+    setHeaderHeight(event.nativeEvent.layout.height);
+  }, [setHeaderHeight]);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.headerContainer, {
+      paddingTop: safeAreaInsets.top
+    }, scrollHeaderAnimatedStyle]
+  }, /*#__PURE__*/React.createElement(BlurView, {
+    blurStyle: 'header',
+    color: colorScheme.background,
+    style: StyleSheet.absoluteFill
+  }), /*#__PURE__*/React.createElement(View, null, header && /*#__PURE__*/React.createElement(Animated.View, {
+    onLayout: onHeaderLayout,
+    style: fadeHeaderOutAnimatedStyle
+  }, header), searchBar && /*#__PURE__*/React.createElement(AnimatedSearchBar, _extends({}, searchBar, {
+    collapsed: collapsed
+  }))));
+};
+const styles = StyleSheet.create({
+  headerContainer: {
+    position: 'absolute',
+    width: '100%'
+  }
+});
+export default FoldableSearchHeader;
+//# sourceMappingURL=foldable-header.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,96 @@
+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';
+import { BackButton } from '../buttons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+const backButtonHitSlop = {
+  top: 12,
+  bottom: 12,
+  left: 20,
+  right: 20
+};
+
+/**
+ * Unified screen header
+ *
+ * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624
+ * states (Default + Dashboard)
+ */
+const Header = ({
+  onBack,
+  rightButton,
+  style,
+  titleRowStyle,
+  testID,
+  title,
+  ...viewProps
+}) => {
+  const colorScheme = useAppColorScheme();
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [styles.container, style],
+    testID: testID
+  }, viewProps), onBack && /*#__PURE__*/React.createElement(View, {
+    style: styles.backButtonRow
+  }, /*#__PURE__*/React.createElement(BackButton, {
+    hitSlop: backButtonHitSlop,
+    onPress: onBack,
+    testID: concatTestID(testID, 'back')
+  }), /*#__PURE__*/React.createElement(View, null), rightButton), /*#__PURE__*/React.createElement(View, {
+    style: [styles.titleRow, onBack ? styles.titleRow2nd : styles.titleRowNoBackButton, (onBack || !rightButton) && styles.titleRowNoRightButton, titleRowStyle]
+  }, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    accessibilityRole: "header",
+    color: colorScheme.text,
+    preset: "l",
+    style: styles.title,
+    testID: concatTestID(testID, 'title')
+  }, title) : /*#__PURE__*/React.createElement(View, {
+    style: styles.title
+  }, title), !onBack && rightButton && /*#__PURE__*/React.createElement(View, {
+    style: styles.rightButtonWrapper
+  }, rightButton)));
+};
+const styles = StyleSheet.create({
+  backButtonRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    minHeight: 48,
+    paddingHorizontal: 20,
+    width: '100%'
+  },
+  container: {
+    width: '100%'
+  },
+  rightButtonWrapper: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingTop: 2
+  },
+  title: {
+    flex: 1,
+    paddingBottom: 8,
+    // to compensate "l" font line-height difference
+    paddingTop: 9
+  },
+  titleRow: {
+    flexDirection: 'row',
+    paddingLeft: 20,
+    paddingRight: 8,
+    width: '100%'
+  },
+  titleRow2nd: {
+    marginBottom: 12
+  },
+  titleRowNoBackButton: {
+    marginTop: 12
+  },
+  titleRowNoRightButton: {
+    paddingRight: 20
+  }
+});
+export default Header;
+//# sourceMappingURL=header.js.map

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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,133 @@
+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 = ({
+  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(({
+    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)) {
+      return leftItem;
+    } else {
+      const LeftItemComponent = leftItem;
+      return /*#__PURE__*/React.createElement(LeftItemComponent, null);
+    }
+  }, [leftItem]);
+  useEffect(() => {
+    if (animate) {
+      Animated.timing(titleOpacity, {
+        duration: 150,
+        easing: Easing.ease,
+        toValue: titleVisible ? 1 : 0,
+        useNativeDriver: true
+      }).start();
+    } else {
+      titleOpacity.setValue(titleVisible ? 1 : 0);
+    }
+  }, [animate, titleOpacity, titleVisible]);
+  const rightItemView = useMemo(() => {
+    if (!rightItem) {
+      return undefined;
+    }
+    if (/*#__PURE__*/React.isValidElement(rightItem)) {
+      return rightItem;
+    } else {
+      const RightItemComponent = rightItem;
+      return /*#__PURE__*/React.createElement(RightItemComponent, null);
+    }
+  }, [rightItem]);
+  const titleAnimatedStyle = {
+    opacity: titleOpacity
+  };
+  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+    style: [styles.headerContainer, !blurred ? {
+      backgroundColor
+    } : undefined, style],
+    testID: testID
+  }), blurred && /*#__PURE__*/React.createElement(BlurView, {
+    blurAmount: 10,
+    blurStyle: "header",
+    color: backgroundColor,
+    style: StyleSheet.absoluteFill
+  }), modalHandleVisible && /*#__PURE__*/React.createElement(View, {
+    style: [styles.modalHandle, {
+      backgroundColor: colorScheme.grayDark
+    }]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: onSideItemLayout,
+    style: [styles.sideItem, {
+      minWidth: sideItemWidth
+    }]
+  }, leftItemView), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.title, titleAnimatedStyle]
+  }, /*#__PURE__*/React.createElement(Typography, {
+    color: titleColor !== null && titleColor !== void 0 ? titleColor : colorScheme.text,
+    preset: "m/heading",
+    align: "center",
+    numberOfLines: 1,
+    testID: concatTestID(testID, 'title')
+  }, title)), /*#__PURE__*/React.createElement(View, {
+    onLayout: onSideItemLayout,
+    style: [styles.sideItem, styles.rightSideItem, {
+      minWidth: sideItemWidth
+    }]
+  }, rightItemView)));
+};
+const styles = StyleSheet.create({
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 48,
+    width: '100%'
+  },
+  headerContainer: {
+    alignItems: 'center',
+    flexDirection: 'column',
+    paddingHorizontal: 8
+  },
+  modalHandle: {
+    borderRadius: 2.5,
+    height: 5,
+    marginVertical: 5,
+    width: 36
+  },
+  rightSideItem: {
+    alignItems: 'flex-end'
+  },
+  sideItem: {
+    padding: 12
+  },
+  title: {
+    flex: 1
+  }
+});
+export default NavigationHeader;
+//# sourceMappingURL=navigation-header.js.map

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

@@ -0,0 +1 @@
+{"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":[]}