feat(Viewer): added owner viewer component

package.json

@@ -18,6 +18,7 @@
     "@anarock/pebble": "^0.41.0",
     "date-fns": "^1.30.1",
     "just-debounce-it": "^1.1.0",
+    "name-initials": "^0.1.3",
     "react-native-keyboard-aware-scroll-view": "^0.8.0",
     "react-native-otp": "^1.0.0",
     "react-spring": "^5.9.2",

src/components/ActionModal.tsx

@@ -78,7 +78,8 @@ const ActionModal: React.FunctionComponent<ActionModalProps> = function({
   visible,
   header,
   headerType,
-  style = {}
+  style = {},
+  footer
 }) {
   return (
     <Modal
@@ -124,11 +125,12 @@ const ActionModal: React.FunctionComponent<ActionModalProps> = function({
             )}
             <View style={[styles.children, style.children]}>{children}</View>
           </View>
-          {showFooterButton && (
-            <Button.FooterButton onPress={onButtonClick}>
-              {buttonLabel}
-            </Button.FooterButton>
-          )}
+          {showFooterButton &&
+            (footer || (
+              <Button.FooterButton onPress={onButtonClick}>
+                {buttonLabel}
+              </Button.FooterButton>
+            ))}
         </View>
       </View>
     </Modal>

src/components/Button.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { View, StyleSheet, ActivityIndicator } from "react-native";
 import Text from "./Text";
 import colors from "../theme/colors";
-import { ButtonProps } from "./typings/Button";
+import { ButtonProps, DoubleFooterButtonProps } from "./typings/Button";
 import Touchable from "./shared/Touchable";
 
 const styles = StyleSheet.create({
@@ -21,6 +21,14 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white.base,
     borderTopColor: colors.gray.lighter,
     borderTopWidth: 1
+  },
+  doubleFooterBtnWrapper: {
+    flexDirection: "row",
+    marginTop: 30,
+    justifyContent: "space-between"
+  },
+  dfButton: {
+    width: "49%"
   }
 });
 
@@ -62,9 +70,43 @@ const FooterButton: React.FunctionComponent<Partial<ButtonProps>> = ({
   );
 };
 
+const DoubleFooterButton: React.FunctionComponent<DoubleFooterButtonProps> = ({
+  leftButtonLabel,
+  rightButtonLabel,
+  leftButtonType = "secondary",
+  rightButtonType,
+  onLeftButtonPress,
+  onRightButtonPress,
+  leftDisabled,
+  rightDisabled
+}) => {
+  return (
+    <View style={styles.doubleFooterBtnWrapper}>
+      <Button
+        disabled={leftDisabled}
+        style={styles.dfButton}
+        type={leftButtonType}
+        onPress={onLeftButtonPress}
+      >
+        {leftButtonLabel}
+      </Button>
+      <Button
+        disabled={rightDisabled}
+        type={rightButtonType}
+        style={styles.dfButton}
+        onPress={onRightButtonPress}
+      >
+        {rightButtonLabel}
+      </Button>
+    </View>
+  );
+};
+
 class Button extends React.Component<ButtonProps> {
   static FooterButton = FooterButton;
 
+  static DoubleFooterButton = DoubleFooterButton;
+
   static defaultProps = {
     type: "primary"
   };

src/components/ConfirmationPopUp.tsx

@@ -1,13 +1,9 @@
-import React, { PureComponent } from "react";
+import React from "react";
 import ActionModal from "./ActionModal";
-import Touchable from "./shared/Touchable";
-import Text from "./Text";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Button from "./Button";
-import {
-  ConfirmationPopUpProps,
-  ConfirmationPopUpState
-} from "./typings/ConfirmationPopUp";
+import { ConfirmationPopUpProps } from "./typings/ConfirmationPopUp";
+import Text from "./Text";
 
 const styles = StyleSheet.create({
   buttonWrapper: {
@@ -26,73 +22,41 @@ const actionModalStyle = StyleSheet.create({
   }
 });
 
-export default class ConfirmationPopUp extends PureComponent<
-  ConfirmationPopUpProps,
-  ConfirmationPopUpState
-> {
-  state = {
-    isOpen: false
-  };
-
-  private toggle = () =>
-    this.setState({
-      isOpen: !this.state.isOpen
-    });
-
-  render():
-    | React.ReactElement<any>
-    | string
-    | number
-    | {}
-    | React.ReactNodeArray
-    | React.ReactPortal
-    | boolean
-    | null
-    | undefined {
-    const {
-      disabled,
-      children,
-      title,
-      description,
-      onConfirmPress,
-      onRejectPress,
-      confirmButtonText,
-      rejectButtonText
-    } = this.props;
-    const { isOpen } = this.state;
-    return (
+export default function ConfirmationPopUp({
+  title,
+  description,
+  onConfirmPress,
+  onRejectPress,
+  confirmButtonText,
+  rejectButtonText,
+  visible,
+  onClose
+}: ConfirmationPopUpProps) {
+  return (
+    <ActionModal
+      style={actionModalStyle}
+      title={title}
+      visible={visible}
+      onClose={onClose}
+    >
       <>
-        <Touchable onPress={this.toggle} disabled={disabled}>
-          {children({
-            isOpen
-          })}
-        </Touchable>
-        <ActionModal
-          style={actionModalStyle}
-          title={title}
-          visible={isOpen}
-          onClose={this.toggle}
-        >
-          <>
-            <Text size={15} lineHeight={22}>
-              {description}
-            </Text>
+        <Text size={15} lineHeight={22}>
+          {description}
+        </Text>
 
-            <View style={styles.buttonWrapper}>
-              <Button
-                style={styles.button}
-                type="secondary"
-                onPress={onRejectPress}
-              >
-                {rejectButtonText}
-              </Button>
-              <Button style={styles.button} onPress={onConfirmPress}>
-                {confirmButtonText}
-              </Button>
-            </View>
-          </>
-        </ActionModal>
+        <View style={styles.buttonWrapper}>
+          <Button
+            style={styles.button}
+            type="secondary"
+            onPress={onRejectPress}
+          >
+            {rejectButtonText}
+          </Button>
+          <Button style={styles.button} onPress={onConfirmPress}>
+            {confirmButtonText}
+          </Button>
+        </View>
       </>
-    );
-  }
+    </ActionModal>
+  );
 }

src/components/Select.tsx

@@ -47,7 +47,8 @@ export default class Select extends PureComponent<SelectProps, SelectState> {
   static defaultProps: Partial<SelectProps> = {
     valueExtractor: item => item && (item.label || item.name),
     keyExtractor: item => item.id,
-    type: "radio"
+    type: "radio",
+    autoClose: true
   };
 
   state = {
@@ -66,12 +67,12 @@ export default class Select extends PureComponent<SelectProps, SelectState> {
     });
 
   private onSelect = option => {
-    const { onSelect } = this.props;
+    const { onSelect, autoClose } = this.props;
 
     InteractionManager.runAfterInteractions(() => {
       if (this.isRadio()) {
         onSelect(option);
-        this.closeOptions();
+        if (autoClose) this.closeOptions();
       } else {
         this.setState({
           selectedCheckbox: option
@@ -97,6 +98,11 @@ export default class Select extends PureComponent<SelectProps, SelectState> {
     return selectedLabel;
   };
 
+  public toggle = () =>
+    this.setState({
+      showOptions: !this.state.showOptions
+    });
+
   render() {
     const {
       options,
@@ -108,6 +114,9 @@ export default class Select extends PureComponent<SelectProps, SelectState> {
       type,
       disabled,
       label,
+      footer,
+      showFooterButton,
+      autoClose,
       ...rest
     } = this.props;
 
@@ -127,7 +136,8 @@ export default class Select extends PureComponent<SelectProps, SelectState> {
             {label ? (
               label({
                 value: this.getValue(),
-                props: this.props
+                props: this.props,
+                toggle: this.toggle
               })
             ) : (
               <Input
@@ -162,8 +172,9 @@ export default class Select extends PureComponent<SelectProps, SelectState> {
             this.closeOptions();
           }}
           visible={this.state.showOptions}
-          showFooterButton={!this.isRadio()}
+          showFooterButton={!this.isRadio() || showFooterButton}
           onClose={this.closeOptions}
+          footer={footer}
         >
           <KeyboardAwareScrollView keyboardShouldPersistTaps="always">
             <Options

src/components/typings/ActionModal.ts

@@ -10,4 +10,5 @@ export interface ActionModalProps {
   header?: string | JSX.Element;
   headerType?: "success" | "error" | "warning";
   style?: any;
+  footer?: JSX.Element;
 }

src/components/typings/Button.ts

@@ -12,3 +12,14 @@ export interface ButtonProps {
   transparent?: boolean;
   radius?: boolean;
 }
+
+export interface DoubleFooterButtonProps {
+  leftButtonLabel: string;
+  rightButtonLabel: string;
+  leftButtonType?: ButtonProps["type"];
+  rightButtonType?: ButtonProps["type"];
+  onLeftButtonPress: () => void;
+  onRightButtonPress: () => void;
+  leftDisabled?: boolean;
+  rightDisabled?: boolean;
+}

src/components/typings/ConfirmationPopUp.ts

@@ -1,14 +1,10 @@
 export interface ConfirmationPopUpProps {
-  children: (args: { isOpen: boolean }) => JSX.Element;
-  disabled?: boolean;
   onConfirmPress: () => void;
   onRejectPress: () => void;
   confirmButtonText: string;
   rejectButtonText: string;
   title: string;
   description: string;
-}
-
-export interface ConfirmationPopUpState {
-  isOpen: boolean;
+  visible: boolean;
+  onClose: () => void;
 }

src/components/typings/Select.ts

@@ -1,18 +1,20 @@
 import { OptionsProps } from "./Options";
 
 export interface SelectProps extends OptionsProps {
-  placeholder: string;
+  placeholder?: string;
   required?: boolean;
   errorMessage?: string;
   valueExtractor?: (item: any) => string;
   disabled?: boolean;
-  label: (
-    args: {
-      value: string;
-      props: SelectProps;
-    }
-  ) => JSX.Element;
+  label?: (args: {
+    value: string;
+    props: SelectProps;
+    toggle: () => void;
+  }) => JSX.Element;
   title?: string;
+  showFooterButton?: boolean;
+  autoClose?: boolean;
+  footer?: JSX.Element;
 }
 
 export interface SelectState {