feat(nc): add components

Author: alexruzenhack

src/components/EditInfoContainer.component.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity
+} from 'react-native';
+import { COLORS } from '../styles/themes';
+
+import { PenIcon } from './Icon/Pen.icon';
+
+export const EditInfoContainer = ({ center, onPress, children }) => (
+  <TouchableOpacity
+    style={[
+      center && styles.editInfoWrapperCentered
+    ]}
+    onPress={onPress}
+  >
+    <View style={[
+      styles.editInfoContainer,
+      center && styles.editInfoContainerCentered,
+    ]}
+    >
+      <View style={[
+        center && styles.alignCenter,
+      ]}
+      >
+        {children}
+      </View>
+      <View style={styles.editIcon}>
+        <PenIcon />
+      </View>
+    </View>
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  editInfoWrapperCentered: {
+    alignSelf: 'center',
+  },
+  editInfoContainer: {
+    paddingVertical: 8,
+    paddingLeft: 8,
+    paddingRight: 40,
+    borderRadius: 8,
+    backgroundColor: COLORS.white,
+  },
+  editInfoContainerCentered: {
+    paddingLeft: 40,
+  },
+  alignCenter: {
+    alignItems: 'center',
+  },
+  editIcon: {
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'center',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 24,
+    height: '100%',
+    marginVertical: 8,
+    marginRight: 8,
+  },
+});

src/components/HathorHeader.js

@@ -30,6 +30,9 @@ const HathorHeader = ({
   const left = React.Children.toArray(children).find(
     (child) => child.type.displayName === HathorHeaderLeft.displayName
   );
+  const central = React.Children.toArray(children).find(
+    (child) => child.type.displayName === HathorHeaderCentral.displayName
+  );
   const right = React.Children.toArray(children).find(
     (child) => child.type.displayName === HathorHeaderRight.displayName
   );
@@ -40,6 +43,7 @@ const HathorHeader = ({
           && (
           <InnerWrapper>
             {left}
+            {central}
             {right}
           </InnerWrapper>
           )}
@@ -70,10 +74,14 @@ const InnerWrapper = ({ children }) => (
 const HathorHeaderLeft = ({ children }) => (<View>{children}</View>);
 HathorHeaderLeft.displayName = 'HathorHeaderLeft';
 
+const HathorHeaderCentral = ({ style, children }) => <View style={style}>{children}</View>;
+HathorHeaderCentral.displayName = 'HathorHeaderCentral';
+
 const HathorHeaderRight = ({ children }) => <View>{children}</View>;
 HathorHeaderRight.displayName = 'HathorHeaderRight';
 
 HathorHeader.Left = HathorHeaderLeft;
+HathorHeader.Central = HathorHeaderCentral;
 HathorHeader.Right = HathorHeaderRight;
 
 const CancelButton = ({ onCancel }) => (
@@ -118,7 +126,7 @@ const RightComponent = ({ rightElement, onCancel }) => {
 
 const styles = StyleSheet.create({
   wrapper: {
-    height: STYLE.headerHeight,
+    minHeight: STYLE.headerHeight,
     flexDirection: 'row',
     alignItems: 'flex-end',
     borderColor: COLORS.borderColor,

src/components/ModalBase.component.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  StyleProp,
+  ViewStyle
+} from 'react-native';
+import Modal from 'react-native-modal';
+
+import { COLORS } from '../styles/themes';
+import NewHathorButton from './NewHathorButton';
+
+const ModalBase = ({ styleModal, styleWrapper, show, onDismiss, children }) => {
+  const hasChildren = children != null;
+
+  const title = hasChildren && React.Children.toArray(children).find(
+    (child) => child.type.displayName === Title.displayName
+  );
+  const body = hasChildren && React.Children.toArray(children).find(
+    (child) => child.type.displayName === Body.displayName
+  );
+  const button = hasChildren && React.Children.toArray(children).find(
+    (child) => child.type.displayName === Button.displayName
+  );
+
+  const discreteButton = hasChildren && React.Children.toArray(children).find(
+    (child) => child.type.displayName === DiscreteButton.displayName
+  );
+
+  return (
+    <Modal
+      isVisible={show}
+      animationIn='slideInUp'
+      swipeDirection={['down']}
+      onSwipeComplete={onDismiss}
+      onBackButtonPress={onDismiss}
+      onBackdropPress={onDismiss}
+      style={styleModal}
+      propagateSwipe
+    >
+      <View style={[
+        styles.wrapper,
+        styleWrapper,
+      ]}
+      >
+        {title && title}
+        {body && body}
+        {button && button}
+        {discreteButton && discreteButton}
+      </View>
+    </Modal>
+  );
+};
+
+const Title = ({ children }) => (
+  <View style={styles.titleWrapper}>
+    <Text style={styles.title}>
+      {children}
+    </Text>
+  </View>
+);
+Title.displayName = 'ModalBaseTitle';
+
+/**
+ * @typedef {Object} Properties p
+ * @property {ReactNode} p.children
+ * @property {StyleProp<ViewStyle>} p.style
+ *
+ * @param {Properties}
+ */
+const Body = ({ style, children }) => (
+  <View style={style}>
+    {children}
+  </View>
+);
+Body.displayName = 'ModalBaseBody';
+
+const Button = ({ title, disabled, secondary, danger, onPress }) => (
+  <NewHathorButton title={title} {...{ disabled, secondary, danger, onPress }} />
+);
+Button.displayName = 'ModalBaseButton';
+
+const DiscreteButton = ({ title, onPress }) => (
+  <NewHathorButton title={title} discrete {...{ onPress }} wrapperStyle={styles.discreteButton} />
+);
+DiscreteButton.displayName = 'ModalBaseDiscreteButton';
+
+ModalBase.Title = Title;
+ModalBase.Body = Body;
+ModalBase.Button = Button;
+ModalBase.DiscreteButton = DiscreteButton;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 8,
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.white,
+  },
+  titleWrapper: {
+    paddingBottom: 20,
+  },
+  title: {
+    color: 'black',
+    fontSize: 18,
+    lineHeight: 20,
+  },
+  discreteButton: {
+    marginTop: 8,
+  },
+});
+
+export { ModalBase }

src/components/NewHathorButton.js

@@ -21,6 +21,11 @@ const NewHathorButton = (props) => {
     textStyle.push(style.textDisabled);
   }
 
+  if (props.discrete) {
+    wrapperViewStyle.push(style.wrapperDiscrete);
+    textStyle.push(style.textDiscrete);
+  }
+
   if (props.secondary) {
     wrapperViewStyle.push(style.wrapperSecondary);
     textStyle.push(style.textSecondary);
@@ -34,6 +39,11 @@ const NewHathorButton = (props) => {
     }
   }
 
+  if (props.danger) {
+    wrapperViewStyle.push(style.wrapperSecondaryDanger);
+    textStyle.push(style.textSecondaryDanger);
+  }
+
   return (
     <View style={[...wrapperViewStyle, props.wrapperStyle, props.style]}>
       <TouchableOpacity onPress={props.onPress} style={style.touchable} disabled={props.disabled}>
@@ -79,6 +89,14 @@ const style = StyleSheet.create({
   wrapperSecondaryDisabled: {
     borderColor: COLORS.textColorShadow,
   },
+  wrapperDiscrete: {
+    backgroundColor: COLORS.backgroundColor,
+    borderColor: COLORS.backgroundColor,
+    borderWidth: 1.5,
+  },
+  wrapperSecondaryDanger: {
+    borderColor: COLORS.errorBgColor,
+  },
   touchable: {
     flex: 1,
     flexDirection: 'row',
@@ -101,6 +119,12 @@ const style = StyleSheet.create({
   textDisabled: {
     color: COLORS.textColorShadow,
   },
+  textDiscrete: {
+    color: COLORS.freeze300,
+  },
+  textSecondaryDanger: {
+    color: COLORS.errorBgColor,
+  },
 });
 
 export default NewHathorButton;

src/components/TextLabel.component.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+} from 'react-native';
+
+export const TextLabel = ({ pb8, bold, children }) => (
+  <Text style={[
+    styles.textLabel,
+    pb8 && styles.pb8,
+    bold && styles.bold,
+  ]}
+  >{children}</Text>
+);
+
+const styles = StyleSheet.create({
+  textLabel: {
+    fontSize: 12,
+    lineHeight: 20,
+    color: 'hsla(0, 0%, 38%, 1)',
+  },
+  pb8: {
+    paddingBottom: 8,
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+});

src/components/TextValue.component.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+} from 'react-native';
+
+export const TextValue = ({ bold, pb4, children }) => (
+  <Text style={[
+    styles.textValue,
+    bold && styles.bold,
+    pb4 && styles.pb4,
+  ]}
+  >{children}</Text>
+);
+
+const styles = StyleSheet.create({
+  textValue: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: 'black',
+  },
+  pb4: {
+    paddingBottom: 4,
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+});

src/components/TransactionStatusLabel.component.js

@@ -9,9 +9,9 @@ import React from 'react';
 import { StyleSheet, Text, View, } from 'react-native';
 import { t } from 'ttag';
 import { COLORS } from '../styles/themes';
-import { CircleCheck } from './CircleCheck.icon';
-import { CircleClock } from './CircleClock.icon';
-import { CircleError } from './CircleError.icon';
+import { CircleCheckIcon } from './Icon/CircleCheck.icon';
+import { CircleClockIcon } from './Icon/CircleClock.icon';
+import { CircleErrorIcon } from './Icon/CircleError.icon';
 
 const styles = StyleSheet.create({
   wrapper: {
@@ -69,22 +69,22 @@ const TransactionStatusBase = ({ label, style, children: icon }) => (
 
 const Confirmed = () => (
   <TransactionStatusBase style={styles.feedbackSuccess} label={t`Confirmed`}>
-    <CircleCheck size={16} color={styles.feedbackSuccess.color} />
+    <CircleCheckIcon size={16} color={styles.feedbackSuccess.color} />
   </TransactionStatusBase>
 );
 const Processing = () => (
   <TransactionStatusBase style={styles.feedbackWarning} label={t`Processing`}>
-    <CircleClock size={16} color={styles.feedbackWarning.color} />
+    <CircleClockIcon size={16} color={styles.feedbackWarning.color} />
   </TransactionStatusBase>
 );
 const Voided = () => (
   <TransactionStatusBase style={styles.feedbackError} label={t`Voided`}>
-    <CircleError size={16} color={styles.feedbackError.color} />
+    <CircleErrorIcon size={16} color={styles.feedbackError.color} />
   </TransactionStatusBase>
 );
 const Unkown = () => (
   <TransactionStatusBase style={styles.freeze} label={t`Unkown`}>
-    <CircleError size={16} color={styles.freeze.color} />
+    <CircleErrorIcon size={16} color={styles.freeze.color} />
   </TransactionStatusBase>
 );
 

src/utils.js

@@ -11,6 +11,7 @@ import React from 'react';
 import { t } from 'ttag';
 import { Linking, Platform, Text } from 'react-native';
 import { getStatusBarHeight } from 'react-native-status-bar-height';
+import moment from 'moment';
 import baseStyle from './styles/init';
 import { KEYCHAIN_USER } from './constants';
 import { STORE } from './store';
@@ -383,3 +384,5 @@ export function combineURLs(baseURL, relativeURL) {
 export const isPushNotificationAvailableForUser = (state) => (
   state.pushNotification.available && state.pushNotification.deviceRegistered
 );
+
+export const getTimestampFormat = (timestamp) => moment.unix(timestamp).format('DD MMM YYYY [•] HH:mm')