esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/lib/dialogview.tsx

@@ -0,0 +1,59 @@
+// withHooks 
+// noPage
+
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTheme } from 'esoftplay/cache/lib/theme/import';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface LibDialogviewArgs {
+
+}
+export interface LibDialogviewProps {
+
+}
+export default function m(props: LibDialogviewProps): any {
+  const { visible, icon, view, style, title, msg, ok, cancel, onPressOK, onPressCancel } = LibDialog.state().useSelector(s => s)
+
+  if (!visible) return null
+  var color = LibTheme._colorPrimary()
+  if (style == 'danger') {
+    color = '#DE204C'
+  }
+  return (
+    <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', alignItems: 'center', justifyContent: 'center', flex: 1 }} >
+      <View style={{ backgroundColor: LibTheme._colorBackgroundCardPrimary(), padding: 10, paddingBottom: 20, borderRadius: 4, width: LibStyle.width - 80 }} >
+        {
+          view ?
+            view
+            :
+            <View>
+              <View style={{ marginTop: 16, marginHorizontal: 10 }} >
+                <View style={{ alignItems: 'center', justifyContent: 'center' }} >
+                  {icon && <View style={{ marginBottom: 10 }} ><LibIcon name={icon} size={48} color={color} /></View>}
+                  {title && <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a", marginBottom: 15 }}>{title}</Text>}
+                  {msg && <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 19, letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{msg || ''}</Text>}
+                </View>
+              </View>
+              <View style={{ flexDirection: 'row', marginBottom: -5, marginHorizontal: -5, borderRadius: 4, overflow: 'hidden', marginTop: 24 }} >
+                {onPressCancel &&
+                  <TouchableOpacity onPress={() => { onPressCancel(); LibDialog.hide() }} style={{ alignItems: "center", justifyContent: "center", padding: 10, flex: 1, marginRight: 2, borderRadius: 4, backgroundColor: LibTheme._colorBackgroundPrimary() }} >
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#000" }}>{cancel || ''}</Text>
+                  </TouchableOpacity>
+                }
+                {onPressOK &&
+                  <TouchableOpacity onPress={() => { onPressOK(); LibDialog.hide() }} style={{ alignItems: "center", justifyContent: "center", padding: 10, flex: 1, borderRadius: 4, backgroundColor: LibTheme._colorBackgroundPrimary() }} >
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: LibStyle.colorRed }}>{ok || ''}</Text>
+                  </TouchableOpacity>
+                }
+              </View>
+            </View>
+        }
+      </View>
+    </View>
+  )
+}

package/modules/lib/distribution_lock.ts

@@ -0,0 +1,18 @@
+// useLibs
+// noPage
+
+import { LibProgress } from "esoftplay/cache/lib/progress/import";
+import esp from "esoftplay/esp";
+
+
+export interface LibDistribution_lockProps {
+
+}
+
+
+export default function m(callback: Function): any {
+  LibProgress.show(esp.lang("lib/distribution_lock", "message"))
+  setTimeout(() => {
+    callback()
+  }, 5000);
+}

package/modules/lib/document.ts

@@ -0,0 +1,43 @@
+// noPage
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import esp from 'esoftplay/esp';
+
+import * as DocumentPicker from 'expo-document-picker';
+
+export default class m {
+
+  // ini tak unggahkan grgr curlnya ke file_upload
+
+  static pick(mimeType?: string): Promise<any> {
+    return new Promise((r) => {
+      let _mimeType = mimeType || '*/*'
+      DocumentPicker.getDocumentAsync({ type: _mimeType }).then((doc) => {
+        const { type, uri, size, lastModified, output, file } = doc
+        if (type != 'cancel' && uri) {
+          r(doc)
+        }
+      })
+    })
+  }
+
+  static upload(mimeType?: string): Promise<string> {
+    return new Promise((r) => {
+      let _mimeType = mimeType || '*/*'
+      m.pick(_mimeType).then((doc) => {
+        LibProgress.show(esp.lang("lib/document", "waiting_upload"))
+        new LibCurl().upload('file_upload', 'file', doc.uri, _mimeType,
+          (res, msg) => {
+            LibProgress.hide()
+            r(res)
+          },
+          (msg) => {
+            LibProgress.hide()
+            LibDialog.warning(esp.lang("lib/document", "failed_title"), esp.lang("lib/document", "failed_msg"))
+          }
+          , 1)
+      })
+    })
+  }
+}

package/modules/lib/editbox.tsx

@@ -0,0 +1,113 @@
+
+// noPage
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentLabel_input } from 'esoftplay/cache/component/label_input/import';
+import { LibComponent } from 'esoftplay/cache/lib/component/import';
+import { LibInput_circle2 } from 'esoftplay/cache/lib/input_circle2/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTheme } from 'esoftplay/cache/lib/theme/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+export interface ComponentEditboxProps {
+  defaultValue?: string,
+  onSubmit?: (e: string) => void,
+  label?: string,
+  placeholder?: string,
+  error?: string,
+  helper?: string
+  allowFontScaling?: boolean,
+  autoCapitalize?: "none" | "sentences" | "words" | "characters",
+  autoCorrect?: boolean,
+  autoFocus?: boolean,
+  blurOnSubmit?: boolean,
+  caretHidden?: boolean,
+  contextMenuHidden?: boolean,
+  editable?: boolean,
+  inactive?: boolean,
+  keyboardType?: "default" | "email-address" | "numeric" | "phone-pad",
+  maxLength?: number,
+  multiline?: boolean,
+  onSubmitEditing?: () => void,
+  onChangeText?: (text: string) => void,
+  placeholderTextColor?: string,
+  returnKeyType?: "done" | "go" | "next" | "search" | "send",
+  secureTextEntry?: boolean,
+  selectTextOnFocus?: boolean,
+  selectionColor?: string,
+  style?: any,
+  value?: string,
+}
+
+export interface ComponentEditboxState {
+
+}
+const initState = {
+  defaultValue: undefined,
+  onSubmit: undefined,
+  label: undefined,
+  keyboardType: undefined
+}
+
+const state = useGlobalState<any>(initState)
+
+class m extends LibComponent<ComponentEditboxProps, ComponentEditboxState>{
+
+  static show(label: string, defaultValue: string, keyboardType: "default" | "email-address" | "numeric" | "phone-pad", onSubmit: (e: string) => void): void {
+    state.set(
+      {
+        label: label,
+        defaultValue: defaultValue,
+        onSubmit: onSubmit,
+        keyboardType: keyboardType
+      }
+    )
+  }
+
+  static hide(): void {
+    state.set(initState)
+  }
+
+
+  input = React.createRef<LibInput_circle2>()
+
+  render(): any {
+    return (
+      <state.connect
+        render={(props) => {
+          const { label, onSubmit } = props
+          if (this?.input?.current && onSubmit) {
+            if (props.defaultValue)
+              this?.input?.current?.setText?.(props.defaultValue);
+            this?.input?.current?.focus?.()
+          }
+          if (!onSubmit) return null
+          return (
+            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)' }}  >
+              <TouchableOpacity onPress={() => m.hide()} activeOpacity={1} style={{ flex: 1 }} >
+                <LibKeyboard_avoid style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 24 }} >
+                  <TouchableOpacity onPress={() => { }} activeOpacity={1}>
+                    <View style={[{ backgroundColor: LibTheme._colorBackgroundCardPrimary(), padding: 10 }, LibStyle.elevation(2)]} >
+                      <ComponentLabel_input label={label || ''} />
+                      <LibInput_circle2
+                        ref={this.input}
+                        {...props}
+                      />
+                      <ComponentButton label={esp.lang("lib/editbox", "btn_save")} style={{ marginTop: 20 }} onPress={() => { onSubmit(this.input?.current?.getText?.()); m.hide(); }} />
+                    </View>
+                  </TouchableOpacity>
+                </LibKeyboard_avoid>
+              </TouchableOpacity>
+            </View>
+          )
+        }}
+      />
+    )
+  }
+}
+
+export default m

package/modules/lib/htmltext.tsx

@@ -0,0 +1,61 @@
+import React, { ReactNode } from 'react';
+import { Text, TextProps, TextStyle } from 'react-native';
+
+export interface LibHtmltextProps extends TextProps {
+  style?: TextStyle;
+  children?: ReactNode;
+}
+
+export default function m({ style, children, ...props }: LibHtmltextProps): JSX.Element {
+  const renderChildren = (child: ReactNode) => {
+    if (typeof child === 'string') {
+      return parseHtmlText(child).map((part, index) => (
+        <Text key={index} style={[style, part.style]}>
+          {part.text}
+        </Text>
+      ));
+    } else if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        style: [style, child.props.style], // Merge styles properly
+      });
+    } else if (Array.isArray(child)) {
+      return child.map((nestedChild, index) => (
+        <React.Fragment key={index}>{renderChildren(nestedChild)}</React.Fragment>
+      ));
+    }
+    return child;
+  };
+
+  return <Text {...props}>{renderChildren(children)}</Text>;
+}
+
+const parseHtmlText = (htmlString: string) => {
+  const regex = /(<b>(.*?)<\/b>)|(<i>(.*?)<\/i>)|(<u>(.*?)<\/u>)|(<br\s*\/?>)/g;
+  let parts = [];
+  let lastIndex = 0;
+
+  htmlString.replace(regex, (match, bold, boldText, italic, italicText, underline, underlineText, br, index) => {
+    if (index > lastIndex) {
+      parts.push({ text: htmlString.substring(lastIndex, index), style: {} });
+    }
+
+    if (boldText) {
+      parts.push({ text: boldText, style: { fontWeight: 'bold' } });
+    } else if (italicText) {
+      parts.push({ text: italicText, style: { fontStyle: 'italic' } });
+    } else if (underlineText) {
+      parts.push({ text: underlineText, style: { textDecorationLine: 'underline' } });
+    } else if (br) {
+      parts.push({ text: '\n', style: {} });
+    }
+
+    lastIndex = index + match.length;
+    return match;
+  });
+
+  if (lastIndex < htmlString.length) {
+    parts.push({ text: htmlString.substring(lastIndex), style: {} });
+  }
+
+  return parts;
+};

package/modules/lib/image.tsx

@@ -0,0 +1,388 @@
+//[moved] remove native cropper for android
+// noPage
+import { LibComponent } from 'esoftplay/cache/lib/component/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import { CameraView } from 'expo-camera';
+import * as ImageManipulator from 'expo-image-manipulator';
+import { SaveFormat } from 'expo-image-manipulator';
+import * as ImagePicker from 'expo-image-picker';
+import React from 'react';
+import { ActivityIndicator, Alert, Image, TouchableOpacity, View } from 'react-native';
+const { height, width } = LibStyle;
+
+
+export interface LibImageCrop {
+  ratio: string,
+  forceCrop: boolean,
+  message?: string
+}
+
+export interface LibImageProps {
+  show?: boolean,
+  image?: string,
+  maxDimension?: number,
+}
+
+export interface LibImageState {
+  type: any,
+  loading: boolean,
+  image: any,
+  flashLight: 'on' | 'off'
+}
+
+export interface LibImageGalleryOptions {
+  crop?: LibImageCrop
+  maxDimension?: number,
+  multiple?: boolean,
+  max?: number
+}
+
+export interface LibImageCameraOptions {
+  crop?: LibImageCrop
+  maxDimension?: number,
+}
+
+const initState = {
+  show: false,
+  image: undefined,
+  maxDimension: 1280
+}
+const state = useGlobalState<LibImageProps>(initState)
+
+class m extends LibComponent<LibImageProps, LibImageState> {
+
+  static setResult(image: string): void {
+    state.set({
+      ...state.get(),
+      image: image,
+      show: false,
+    })
+  }
+
+  static show(): void {
+    state.set({
+      ...state.get(),
+      show: true,
+      image: undefined,
+    })
+  }
+
+  static hide(): void {
+    state.set(initState)
+  }
+
+  camera: any;
+  constructor(props: LibImageProps) {
+    super(props);
+    this.state = {
+      type: 'back',
+      loading: false,
+      image: null,
+      flashLight: 'off'
+    }
+    this.camera = React.createRef()
+    this.takePicture = this.takePicture.bind(this);
+  }
+
+  async takePicture(): Promise<void> {
+    if (this.camera) {
+      this.setState({ loading: true })
+      let result = await this.camera.takePictureAsync({})
+      this.setState({ image: result, loading: false })
+    }
+  }
+
+
+  static showCropper(uri: string, forceCrop: boolean, ratio: string, message: string, result: (x: any) => void): void {
+    LibNavigation.navigateForResult("lib/image_crop", { image: uri, forceCrop, ratio, message }, 81793).then(result)
+  }
+
+  static fromCamera(options?: LibImageCameraOptions): Promise<string> {
+    return new Promise((_r) => {
+      const timer = setTimeout(async () => {
+        const cameraPermission = await ImagePicker.getCameraPermissionsAsync();
+        var finalStatus = cameraPermission.status
+        if (finalStatus !== 'granted') {
+          const { status } = await ImagePicker.requestCameraPermissionsAsync();
+          finalStatus = status
+        }
+        if (finalStatus === 'granted') {
+          const rollPermission = await ImagePicker.getMediaLibraryPermissionsAsync();
+          finalStatus = rollPermission.status
+          if (finalStatus !== 'granted') {
+            const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+            finalStatus = status
+          }
+        }
+        if (finalStatus != 'granted') {
+          Alert.alert(esp.lang("lib/image", "cam_title", esp.appjson().expo.name), esp.lang("lib/image", "cam_msg", esp.appjson().expo.name))
+        }
+        ImagePicker.launchCameraAsync({
+          // allowsEditing: Platform.OS != 'ios' && options && options.crop ? true : false,
+          aspect: options?.crop?.ratio?.split(':').map((x) => Number(x)),
+          quality: 1,
+          presentationStyle: ImagePicker.UIImagePickerPresentationStyle.FULL_SCREEN
+        }).then(async (res: any) => {
+          if (!res)
+            res = ImagePicker?.getPendingResultAsync?.()
+          if (!res?.cancelled) {
+            let result: any = undefined
+            let hasUri = res?.uri
+            if (hasUri) {
+              result = res
+            } else if (res?.assets?.[0]) {
+              result = { ...res, ...res.assets[0] }
+            }
+            if (/* Platform.OS == 'ios' && */ options && options.crop) {
+              m.showCropper(result?.uri, options?.crop?.forceCrop, options?.crop?.ratio, options?.crop?.message, async (x) => {
+                let imageUri = await m.processImage(x, options?.maxDimension)
+                m.setResult(imageUri)
+                _r(imageUri)
+              })
+            } else {
+              let imageUri = await m.processImage(result, options?.maxDimension)
+              m.setResult(imageUri)
+              _r(imageUri)
+            }
+          }
+        })
+        clearTimeout(timer)
+      }, 1);
+    })
+  }
+
+  static fromGallery(options?: LibImageGalleryOptions): Promise<string | string[]> {
+    return new Promise((_r) => {
+      const timer = setTimeout(async () => {
+        const { status } = await ImagePicker.getMediaLibraryPermissionsAsync();
+        var finalStatus = status
+        if (finalStatus !== 'granted') {
+          const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+          finalStatus = status
+        }
+        if (finalStatus != 'granted') {
+          Alert.alert(esp.lang("lib/image", "gallery_title"), esp.lang("lib/image", "gallery_msg"))
+          return
+        }
+        let max = 0
+        if (options?.multiple == true) {
+          max = options?.max || 0
+        } else {
+          max = 1
+        }
+        if (max == 1) {
+          ImagePicker.launchImageLibraryAsync({
+            presentationStyle: ImagePicker.UIImagePickerPresentationStyle.FULL_SCREEN,
+            // allowsEditing: Platform.OS != 'ios' && options && options.crop ? true : false,
+            aspect: options?.crop?.ratio?.split(':').map((x) => Number(x)),
+            quality: 1,
+          }).then(async (z: any) => {
+            if (!z.cancelled) {
+              let x: any = undefined
+              let hasUri = z?.uri
+              if (hasUri) {
+                x = z
+              } else if (z?.assets?.[0]) {
+                x = { ...z, ...z.assets[0] }
+              }
+              if (/* Platform.OS == 'ios' && */ options && options.crop) {
+                m.showCropper(x.uri, options.crop.forceCrop, options.crop.ratio, options.crop?.message, async (x) => {
+                  let imageUri = await m.processImage(x, options?.maxDimension)
+                  m.setResult(imageUri)
+                  _r(imageUri)
+                })
+              } else {
+                let imageUri = await m.processImage(x, options?.maxDimension)
+                m.setResult(imageUri)
+                _r(imageUri)
+              }
+            }
+          })
+          return
+        }
+        LibNavigation.navigateForResult("lib/image_multi", { max: max }).then((x: any[]) => {
+          let a: string[] = []
+          x.forEach(async (t: any, i) => {
+            if (i == 0) {
+              LibProgress.show(esp.lang("lib/image", "wait"))
+            }
+            var wantedMaxSize = options?.maxDimension || 1280
+            var rawheight = t.height
+            var rawwidth = t.width
+            var ratio = rawwidth / rawheight
+            if (rawheight > rawwidth) {
+              var wantedwidth = wantedMaxSize * ratio;
+              var wantedheight = wantedMaxSize;
+            } else {
+              var wantedwidth = wantedMaxSize;
+              var wantedheight = wantedMaxSize / ratio;
+            }
+            const manipImage = await ImageManipulator.manipulateAsync(
+              t.uri,
+              [{ resize: { width: wantedwidth, height: wantedheight } }],
+              { format: SaveFormat.JPEG }
+            );
+            new LibCurl().upload('image_upload', "image", String(manipImage.uri), 'image/jpeg',
+              (res: any, msg: string) => {
+                a.push(String(res));
+                if (a.length == x.length) {
+                  if (max == 1) {
+                    _r(res)
+                  } else {
+                    _r(a)
+                  }
+                  LibProgress.hide()
+                }
+              },
+              (msg: any) => {
+                console.log(msg.message, "NOOO")
+                if (x.length - 1 == i)
+                  LibProgress.hide()
+              }, 1)
+          });
+        })
+        clearTimeout(timer)
+      }, 1)
+    })
+  }
+
+  static processImage(result: any, maxDimension?: number): Promise<string> {
+    return new Promise((r) => {
+      if (!result.cancelled) {
+        LibProgress.show(esp.lang("lib/image", "wait_upload"))
+        var wantedMaxSize = maxDimension || 1280
+        var rawheight = result.height
+        var rawwidth = result.width
+        let doResize = false
+        if (wantedMaxSize < Math.max(rawheight, rawwidth)) {
+          doResize = true
+          var ratio = rawwidth / rawheight
+          if (rawheight > rawwidth) {
+            var wantedwidth = wantedMaxSize * ratio;
+            var wantedheight = wantedMaxSize;
+          } else {
+            var wantedwidth = wantedMaxSize;
+            var wantedheight = wantedMaxSize / ratio;
+          }
+        }
+
+        const timer = setTimeout(async () => {
+          const manipImage = await ImageManipulator.manipulateAsync(
+            result.uri,
+            doResize ? [{ resize: { width: wantedwidth, height: wantedheight } }] : [],
+            { format: SaveFormat.JPEG, compress: 1.0 }
+          );
+          new LibCurl().upload('image_upload', "image", String(manipImage.uri), 'image/jpeg',
+            (res: any, msg: string) => {
+              r(res);
+              LibProgress.hide()
+            },
+            (msg: any) => {
+              LibProgress.hide()
+              r(msg.message);
+            }, 1)
+          clearTimeout(timer)
+        }, 1);
+      }
+    })
+  }
+
+  render(): any {
+    const { image, type, loading, flashLight } = this.state
+    return (
+      <state.connect
+        render={(props) => {
+          const { show, maxDimension } = props
+          if (!show) return null
+          return (
+            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} >
+              <View style={{ flex: 1 }} >
+                <CameraView
+                  ref={(camera: any) => this.camera = camera}
+                  facing={type}
+                  ratio={'4:3'}
+                  flash={flashLight}
+                  zoom={0.1}
+                  style={{ height: LibStyle.width * 4 / 3, width: LibStyle.width }}>
+                  <View style={{ height: height, width: width, backgroundColor: 'transparent' }} >
+                    {image ? <Image source={image} style={{ height: LibStyle.width * 4 / 3, width: width, resizeMode: 'cover', transform: [{ scaleX: this.state.type == 'back' ? 'front' : 'back' }] }} /> : null}
+                  </View>
+                </CameraView>
+                <View style={{ position: 'absolute', top: 10 + LibStyle.STATUSBAR_HEIGHT, left: 10 }} >
+                  <TouchableOpacity onPress={() => this.setState({ flashLight: flashLight == 'on' ? 'off' : 'on' })} >
+                    <LibIcon color={'white'} size={24} name={flashLight == 'on' ? 'flash' : "flash-off"} />
+                  </TouchableOpacity>
+                </View>
+                <View style={{ position: 'absolute', top: width * 4 / 3, bottom: 0, left: 0, right: 0, justifyContent: 'center', backgroundColor: 'black', alignItems: 'center', flex: 1 }} >
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
+                      {
+                        image ?
+                          <TouchableOpacity onPress={() => this.setState({ image: false })} >
+                            <LibIcon.Ionicons name='close-circle' style={{ fontSize: 40, color: 'white' }} />
+                          </TouchableOpacity>
+                          :
+                          <TouchableOpacity onPress={() => this.setState({ type: this.state.type === 'back' ? 'front' : 'back' })} >
+                            <LibIcon.Ionicons name='refresh-circle' style={{ fontSize: 40, color: 'white' }} />
+                          </TouchableOpacity>
+                      }
+                    </View>
+                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
+                      {
+                        image ? null :
+                          <TouchableOpacity onPress={() => this.takePicture()} >
+                            <View style={{ height: 70, width: 70, borderRadius: 35, backgroundColor: 'black', borderWidth: 1, borderColor: 'white', justifyContent: 'center', 'alignItems': 'center' }} >
+                              <View style={{ height: 62, width: 62, borderRadius: 31, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }} >
+                                {
+                                  loading ? <ActivityIndicator size={'large'} color={'black'} /> : null
+                                }
+                              </View>
+                            </View>
+                          </TouchableOpacity>
+                      }
+                    </View>
+                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
+                      {
+                        image ?
+                          <TouchableOpacity onPress={() => {
+                            const timer = setTimeout(
+                              async () => {
+                                let imageUri = await m.processImage(image, maxDimension)
+                                m.setResult(imageUri)
+                                this.setState({ image: null })
+                                clearTimeout(timer)
+                              });
+                          }} >
+                            <LibIcon.Ionicons name='checkmark-circle' style={{ fontSize: 40, color: 'white' }} />
+                          </TouchableOpacity>
+                          :
+                          <TouchableOpacity onPress={() => {
+                            const timer = setTimeout(
+                              async () => {
+                                m.hide()
+                                this.setState({ image: null })
+                              });
+                            clearTimeout(timer)
+                          }} >
+                            <LibIcon.Ionicons name='close-circle' style={{ fontSize: 40, color: 'white' }} />
+                          </TouchableOpacity>
+                      }
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          )
+        }}
+      />
+    );
+  }
+}
+
+export default m