esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/component/scanner.tsx

@@ -0,0 +1,271 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UserCoupon_detailProperty } from 'esoftplay/cache/user/coupon_detail/import';
+
+import { ComponentCamera_error_view } from 'esoftplay/cache/component/camera_error_view/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useEffect, useRef } from 'react';
+import { AppState, AppStateStatus, Text, View } from 'react-native';
+
+export interface ComponentBarcodeProps {
+
+}
+export default function m(props: ComponentBarcodeProps): any {
+  let isScanned = useRef(false).current
+  const [hasPermission, setHasPermission] = useSafeState()
+  const {
+    url_ticket_detail,
+    url_ticket_update,
+    fromPage,
+    cashier_id,
+    event_title,
+    event_id,
+    selectGate,
+    isFromTempOut,
+    typeScanner,
+    gate_type,
+    price_type,
+    is_free,
+    urlCoupon,
+    status_user,
+    configPriority,
+    scan_type
+  }: any = LibNavigation.getArgsAll(props)
+
+  // ini dari event/order_share_to
+  const { qty, qty_shared, url_order_detail }: any = LibNavigation.getArgsAll(props)
+  const [permission, requestPermission] = useCameraPermissions();
+  const check = useRef(false)
+
+  const request = async () => {
+    try {
+      const response = await requestPermission();
+      const { granted } = response;
+      setHasPermission(granted);
+    } catch (error) { }
+  };
+
+  const handleAppStateChange = (nextAppState: AppStateStatus) => {
+    if (nextAppState === 'active' && !check.current) {
+      check.current = true
+      request().finally(() => {
+        check.current = false
+      });
+    }
+  };
+
+  // Camera permissions are still loading.
+  useEffect(() => {
+    if (!permission) {
+      request()
+    } else {
+      setHasPermission(permission.granted)
+    }
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange)
+    return () => subscription.remove()
+  }, [permission])
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  let args = {
+    price_type: price_type,
+    gate_type: gate_type,
+    url_ticket_detail: url_ticket_detail,
+    url_ticket_update: url_ticket_update,
+    event_id: event_id,
+    isFromTempOut: isFromTempOut,
+    event_title: event_title,
+    selectGate: selectGate,
+    typeScanner: typeScanner,
+    configPriority: configPriority,
+    scan_type: scan_type
+  }
+
+  function onBarCodeScanned({ data }: any): void {
+    isScanned = true
+    if (fromPage == 'home') {
+      UserCoupon_detailProperty.subscribe().trigger()
+      let modUrl = data
+      const base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+      if (base64regex.test(modUrl)) {
+        modUrl = LibUtils.decodeBase64(modUrl)
+      }
+      if (data.includes('download.html?device_id')) {
+        let tsid = data.split('download.html?device_id=')?.[1]
+        LibNavigation.replace('user/scan_turnstile', { turnstile_id: tsid })
+      } else if (data.includes('download.html?gateID=')) {
+        let tsid = data.split('download.html?gateID=')?.[1]
+        LibNavigation.replace('user/scan_turnstile', { gateID: tsid })
+      } else if (modUrl.includes("TURNSTILE")) { // untuk turnstile
+        let removeTurnstile = modUrl.replace('TURNSTILE', '')
+        let getTurnstileId = removeTurnstile.substr(0, removeTurnstile.length - 1)
+        LibNavigation.replace('user/scan_turnstile', { turnstile_id: getTurnstileId })
+      } else if (modUrl.includes("|")) { // untuk dari home bisa kemana2 dengan module dan url
+        let a = modUrl.split('|')
+        if (a.length > 1) {
+          LibNavigation.replace(a[0], { url: a[1], is_free: is_free, urlCoupon: urlCoupon })
+        }
+      } else {
+        LibNavigation.replace('transfer/input', { user_id: data }) // untuk transfer
+      }
+    } else if (fromPage == "cashier/qr") {
+      // ini sudah gak kanggo kayaknya
+      LibNavigation.replace('cashier/list_coupon', { user_qr: data, cashier_id: cashier_id })
+
+    } else if (fromPage == "profil") {
+      // ini sudah tidak kanggo
+      if (typeScanner == "turnstile_admin") {
+        LibNavigation.replace('event/turnstile_settings', { serial_number: data })
+      }
+
+    } else if (fromPage == 'event/order_share_to') {
+      LibNavigation.replace('event/order_share_to_detail', { user_id: data, qty: qty, qty_shared: qty_shared, url_order_detail: url_order_detail })
+
+    } else if (fromPage == "event/tms_home") {
+
+      if (scan_type == 'entrance') {
+        // untuk gate in
+        LibNavigation.replace('event/tms_in', {
+          qr_code: data,
+          ...args
+        })
+      }
+      if (scan_type == 'exit') {
+        // untuk gate out
+        LibNavigation.replace('event/tms_out', {
+          qr_code: data,
+          ...args
+        })
+      }
+      if (scan_type == 'exit_temporary') {
+        // untuk keluar sementara
+        LibNavigation.replace('event/tms_out_temporary', {
+          qr_code: data,
+          ...args
+        })
+      }
+      if (scan_type == "entrance_again") {
+        // untuk masuk kembali
+        LibNavigation.replace('event/tms_in_again', {
+          qr_code: data,
+          ...args
+        })
+      }
+      if (scan_type == "hall_in") {
+        // untuk masuk hall
+        LibNavigation.replace('event/tms_in_hall', {
+          qr_code: data,
+          ...args
+        })
+      }
+      if (scan_type == "hall_out") {
+        // untuk keluar hall
+        LibNavigation.replace('event/tms_out_hall', {
+          qr_code: data,
+          ...args
+        })
+      }
+
+    } else if (fromPage == "event/counter_eo") {
+
+      if (status_user == 3 && !data.includes('://'))
+        LibNavigation.replace('event/counter_cashier_sell', { qr: data })
+      else
+        LibNavigation.replace('event/counter_request_detail', { url: data })
+
+    } else if (fromPage == "event/tms_check_ticket") { // untuk ngecek tiket valid apa tidak
+      LibNavigation.replace('event/tms_check_ticket_result', { selectGate: selectGate, event_id: event_id, qr: data })
+
+    } else if (fromPage == "event/tms_add") { // untuk nambah tms via mobile
+      let qr = data
+      LibNavigation.sendBackResult(qr, LibNavigation.getResultKey(props))
+
+    } else if (fromPage == 'event/exchange_ticket') { // untuk tukat tiket
+      LibNavigation.replace('event/exchange_ticket_result', { event_title: event_title, event_id: event_id, qr: data })
+
+    } else if (fromPage == 'event/exchange_reward') { // untuk tukat reward review
+      LibNavigation.replace('event/exchange_reward_result', { event_title: event_title, event_id: event_id, qr: data })
+
+    } else {
+      LibNavigation.sendBackResult(data, LibNavigation.getResultKey(props))
+    }
+  }
+
+  return (
+    <View style={{ flex: 1 }} >
+      <ComponentHeader title={fromPage == "transfer" ? esp.lang("component/scanner", "title_receive") : esp.lang("component/scanner", "title")} subtitle={fromPage == "profil" ? event_title : undefined} />
+      {
+        hasPermission == true ?
+          <View style={{ flex: 1, backgroundColor: "#000000" }} >
+            <CameraView
+              onBarcodeScanned={
+                isScanned ? () => { } :
+                  onBarCodeScanned
+              }
+              autofocus='on'
+              ratio={'16:9'}
+              style={{ height: LibStyle.width * 16 / 9, width: LibStyle.width }}
+            >
+            </CameraView>
+            {
+              fromPage == "cashier/qr" &&
+              <ComponentButton style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} label={esp.lang("component/scanner", "list_coupon")} onPress={() => {
+                LibNavigation.back()
+                LibNavigation.navigate('cashier/list_coupon_transaksi', { cashier_id: cashier_id })
+              }} />
+            }
+            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+              <View style={{ borderWidth: 1, borderColor: '#EAECEB', width: LibStyle.width * 2 / 3, height: LibStyle.width * 2 / 3 }} />
+            </View>
+
+            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+              <LibPicture resizeMode='contain' source={esp.assets('scanner.gif')} style={{
+                width: LibStyle.width * 2 / 3,
+                height: LibStyle.width * 2 / 3,
+              }}
+              />
+
+            </View>
+
+            <LinearGradient colors={["#fff", "#fff", "#fff", "#fff", 'rgba(255,255,255,0.8)', 'transparent']} style={{ position: 'absolute', top: 0, left: 0, right: 0, paddingBottom: 30, /* backgroundColor: '#fff' */ }} >
+              <View style={{ padding: 16, alignItems: 'center', paddingBottom: 10, paddingTop: 10 }} >
+                <LibTextstyle text={fromPage == 'home' ? esp.lang("component/scanner", "scan_msg1") : esp.lang("component/scanner", "scan_position")} textStyle={'callout'} style={{ textAlign: 'center' }} />
+              </View>
+              {
+                selectGate &&
+                <>
+                  <View style={{ padding: 16, alignItems: 'center', paddingBottom: 10, paddingTop: 5, flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignSelf: 'center' }} >
+                    <Text allowFontScaling={false} ellipsizeMode={"tail"} numberOfLines={1} style={{ marginRight: 10, fontFamily: "Arial", fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#000', paddingLeft: 3, paddingRight: 3 }}>{selectGate.name}</Text>
+                    <LibIcon name={"radiobox-marked"} size={22} color={LibStyle.colorGreen} />
+                  </View>
+                </>
+              }
+            </LinearGradient>
+
+          </View>
+          :
+          hasPermission == undefined ?
+            <LibLoading />
+            :
+            <ComponentCamera_error_view />
+        // <View style={{ flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }} >
+        //   <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0.16, color: "#9b9b9b" }} >{esp.lang("component/scanner", "camera_access")}</Text>
+        // </View>
+      }
+    </View>
+  )
+}

package/modules/component/scannerv2.tsx

@@ -0,0 +1,132 @@
+// withHooks
+import { ComponentCamera_error_view } from 'esoftplay/cache/component/camera_error_view/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useEffect, useRef } from 'react';
+
+import React from 'react';
+import { AppState, AppStateStatus, View } from 'react-native';
+
+
+export interface ComponentScannerv2Args {
+
+}
+export interface ComponentScannerv2Props {
+
+}
+export default function m(props: ComponentScannerv2Props): any {
+  let isScanned = useRef(false).current
+  const [hasPermission, setHasPermission] = useSafeState()
+  const [permission, requestPermission] = useCameraPermissions();
+  const check = useRef(false)
+
+  const request = async () => {
+    try {
+      const response = await requestPermission();
+      const { granted } = response;
+      setHasPermission(granted);
+    } catch (error) { }
+  };
+
+  const handleAppStateChange = (nextAppState: AppStateStatus) => {
+    if (nextAppState === 'active' && !check.current) {
+      check.current = true
+      request().finally(() => {
+        check.current = false
+      });
+    }
+  };
+
+  // Camera permissions are still loading.
+  useEffect(() => {
+    if (!permission) {
+      request()
+    } else {
+      setHasPermission(permission.granted)
+    }
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange)
+    return () => subscription.remove()
+  }, [permission])
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function onBarCodeScanned({ data }: any): void {
+    isScanned = true
+    LibNavigation.sendBackResult(data, LibNavigation.getResultKey(props))
+  }
+
+  return (
+    <View style={{ flex: 1 }} >
+      <ComponentHeader title={/* fromPage == "transfer" ? esp.lang("component/scanner", "title_receive") : */ esp.lang("component/scanner", "title")} />
+      {
+        hasPermission == true ?
+          <View style={{ flex: 1, backgroundColor: "#000000" }} >
+            <CameraView
+              onBarcodeScanned={
+                isScanned ? () => { } :
+                  onBarCodeScanned
+              }
+              autofocus='on'
+              ratio={'16:9'}
+              style={{ height: LibStyle.width * 16 / 9, width: LibStyle.width }}
+            >
+            </CameraView>
+            {/* {
+              fromPage == "cashier/qr" &&
+              <ComponentButton style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} label={esp.lang("component/scanner", "list_coupon")} onPress={() => {
+                LibNavigation.back()
+                LibNavigation.navigate('cashier/list_coupon_transaksi', { cashier_id: cashier_id })
+              }} />
+            } */}
+            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+              <View style={{ borderWidth: 1, borderColor: '#EAECEB', width: LibStyle.width * 2 / 3, height: LibStyle.width * 2 / 3 }} />
+            </View>
+
+            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+              <LibPicture resizeMode='contain' source={esp.assets('scanner.gif')} style={{
+                width: LibStyle.width * 2 / 3,
+                height: LibStyle.width * 2 / 3,
+              }}
+              />
+
+            </View>
+
+            <LinearGradient colors={["#fff", "#fff", "#fff", "#fff", 'rgba(255,255,255,0.8)', 'transparent']} style={{ position: 'absolute', top: 0, left: 0, right: 0, paddingBottom: 30, /* backgroundColor: '#fff' */ }} >
+              <View style={{ padding: 16, alignItems: 'center', paddingBottom: 10, paddingTop: 10 }} >
+                <LibTextstyle text={/* fromPage == 'home' ? esp.lang("component/scanner", "scan_msg1") :  */esp.lang("component/scanner", "scan_position")} textStyle={'callout'} style={{ textAlign: 'center' }} />
+              </View>
+              {/* {
+                selectGate &&
+                <>
+                  <View style={{ padding: 16, alignItems: 'center', paddingBottom: 10, paddingTop: 5, flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignSelf: 'center' }} >
+                    <Text allowFontScaling={false} ellipsizeMode={"tail"} numberOfLines={1} style={{ marginRight: 10, fontFamily: "Arial", fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#000', paddingLeft: 3, paddingRight: 3 }}>{selectGate.name}</Text>
+                    <LibIcon name={"radiobox-marked"} size={22} color={LibStyle.colorGreen} />
+                  </View>
+                </>
+              } */}
+            </LinearGradient>
+
+          </View>
+          :
+          hasPermission == undefined ?
+            <LibLoading />
+            :
+            <ComponentCamera_error_view />
+        // <View style={{ flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }} >
+        //   <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0.16, color: "#9b9b9b" }} >{esp.lang("component/scanner", "camera_access")}</Text>
+        // </View>
+      }
+    </View>
+  )
+}

package/modules/component/section.tsx

@@ -0,0 +1,33 @@
+// withHooks
+// noPage
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export interface ComponentSectionProps {
+  text: string,
+  textColor: string,
+  caption?: string,
+  icon?: string,
+  moreAction?: () => void
+}
+export default function m(props: ComponentSectionProps): any {
+  return (
+    <View style={{ marginLeft: 4, marginVertical: 5, flexDirection: 'row', alignItems: 'center' }} >
+      <View style={{ width: 8, height: 28, borderRadius: 10, backgroundColor: "#ededed" }} />
+      <View style={{ marginLeft: 12, flex: 1 }} >
+        <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 15, lineHeight: 22, color: props.textColor }} >{props.text}</Text>
+        {props.caption && <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, color: "#b8b8b8" }} >{props.caption}</Text>}
+      </View>
+      {
+        props.icon &&
+        <ComponentTouchable onPress={() => props.moreAction ? props.moreAction() : {}} >
+          <LibPicture style={{ height: 25, width: 25, resizeMode: 'contain' }} source={esp.assets(props.icon)} />
+        </ComponentTouchable>
+      }
+    </View>
+  )
+}

package/modules/component/section_notif.tsx

@@ -0,0 +1,21 @@
+// withHooks
+// noPage
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface ComponentSection_notifProps {
+  title: string
+  onPress: () => void
+}
+export default function m(props: ComponentSection_notifProps): any {
+  return (
+    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginLeft: 15, marginRight: 15, alignContent: 'center', alignItems: 'center' }}>
+      <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{props.title}</Text>
+      <TouchableOpacity hitSlop={{ top: 5, bottom: 5, right: 5, left: 5 }} onPress={() => props.onPress()}>
+        <Text style={{ fontFamily: "SFProText", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#51b596" }}>{esp.lang("component/section_notif", "show_all")}</Text>
+      </TouchableOpacity>
+    </View>)
+}

package/modules/component/select.tsx

@@ -0,0 +1,51 @@
+// withHooks 
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface ComponentSelectProps {
+  data: any[],
+  titleIndex: string,
+  placeholder: string
+}
+export default function m(props: ComponentSelectProps): any {
+
+
+  const { data, placeholder } = props
+  const [query, setQuery] = useSafeState('')
+
+  const filteredData = data && data?.filter((item: any) => item?.name?.includes?.(query))
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  return (
+    <View style={{ flex: 1 }} >
+      <ComponentHeader searchPlaceholder={placeholder} onChangeText={(t) => { LibUtils.debounce(() => { setQuery(t) }, 300) }} />
+      <View style={{ flex: 1 }} >
+        <LibScroll >
+          {
+            filteredData && filteredData.map((item: any, index: number) => {
+              return (
+                <TouchableOpacity key={index} onPress={() => LibNavigation.sendBackResult(item)} >
+                  <View style={{ padding: 12, borderColor: '#f1f2f3', borderWidth: 0.5, flexDirection: 'row', alignItems: 'center' }} >
+                    <Text allowFontScaling={false} style={{ marginLeft: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#444' }} >{item[props.titleIndex]}</Text>
+                  </View>
+                </TouchableOpacity>
+              )
+            })
+          }
+          <View />
+        </LibScroll>
+      </View>
+    </View>
+  )
+}

package/modules/component/slider.tsx

@@ -0,0 +1,45 @@
+// withHooks
+// noPage
+
+import { LibCarrousel_snap } from 'esoftplay/cache/lib/carrousel_snap/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+
+import { LibImage_shadow } from 'esoftplay/cache/lib/image_shadow/import';
+import React from 'react';
+import { Pressable } from 'react-native';
+
+
+export interface ComponentSliderProps {
+  images: any[],
+  onIndexChange: (i: number) => void
+}
+export default function m(props: ComponentSliderProps): any {
+  const widthImg = LibStyle?.width - 60
+  const sliderHeight = widthImg / 1920 * 1080
+
+  function row(item: any, index: any, itemWidth: number): any {
+    return (
+      <Pressable onPress={() => LibNavigation.navigate('lib/gallery', { images: props.images, index: index })}>
+        <LibImage_shadow
+        source={{ uri: item.image }}
+        style={{ width: widthImg, height: sliderHeight, borderRadius: 10 }}
+        shadowRadius={0.2}
+      />
+        {/* <LibPicture source={{ uri: item.image }} style={{ height: sliderHeight, width: widthImg, borderRadius: 10 }} /> */}
+      </Pressable>
+    )
+  }
+
+  return (
+    <LibCarrousel_snap
+      data={props.images}
+      style={{ marginVertical: 10 }}
+      itemMarginHorizontal={10}
+      itemWidth={LibStyle.width - 40}
+      maxWidth={LibStyle.width}
+      align={"center"}
+      renderItem={row}
+    />
+  )
+}

package/modules/component/slidingup.tsx

@@ -0,0 +1,85 @@
+// noPage
+
+import { LibComponent } from 'esoftplay/cache/lib/component/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+
+import React from 'react';
+import { Animated, Keyboard, TouchableOpacity, View } from 'react-native';
+
+export interface ComponentSlidingupProps {
+  children: any
+}
+export interface ComponentSlidingupState {
+  show: boolean,
+}
+export default class m extends LibComponent<ComponentSlidingupProps, ComponentSlidingupState>{
+
+  _show: boolean = false
+  animValue: any = new Animated.Value(LibStyle.height)
+  constructor(props: ComponentSlidingupProps) {
+    super(props);
+    this.state = {
+      show: false,
+    }
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+  }
+
+  show(): void {
+    if (this.props.children) {
+      Keyboard.dismiss()
+      // this.animValue = new Animated.Value(0)
+      this.setState({ show: true }, () => {
+        this._toggleSubview(true)
+      })
+    }
+  }
+
+  hide(): void {
+    // this.animValue = new Animated.Value(LibStyle.height)
+    this._toggleSubview(false).then(() => {
+      this.setState({ show: false })
+    })
+  }
+
+  _toggleSubview(isOpen: boolean): Promise<void> {
+    return new Promise((r) => {
+      var toValue = LibStyle.height;
+      if (isOpen) {
+        toValue = 0;
+      }
+      //This will animate the transalteY of the subview between 0 & 100 depending on its current state
+      //100 comes from the style below, which is the height of the subview.
+      Animated.timing(
+        this.animValue,
+        {
+          toValue: toValue,
+          duration: 200,
+          useNativeDriver: true
+          // velocity: 3,
+          // tension: 2,
+          // friction: 8,
+        }
+      ).start(() => {
+        r()
+      })
+    })
+  }
+
+  render(): any {
+    const { show } = this.state
+    if (!show) return null
+    return (
+      <LibKeyboard_avoid style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} >
+        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end', zIndex: 999999 }}>
+          <TouchableOpacity style={{ flex: 1 }} activeOpacity={1} onPress={() => this.hide()} />
+          <Animated.View style={{ transform: [{ translateY: this.animValue }] }} >
+            {this.props.children}
+            <View style={{ paddingBottom: LibStyle.isIphoneX ? 30 : 0, backgroundColor: 'white' }} />
+          </Animated.View>
+        </View>
+      </LibKeyboard_avoid>
+    )
+  }
+}

package/modules/component/step.tsx

@@ -0,0 +1,29 @@
+// withHooks
+// noPage
+
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import React from 'react';
+import { Linking, Pressable, View } from 'react-native';
+import RenderHtml from 'react-native-render-html';
+
+
+export interface ComponentStepProps {
+  text: string
+}
+export default function m(props: ComponentStepProps): any {
+  const urls = props.text.match(/(https?:\/\/[^\s]+)/g)
+  let VIEW: any = View
+  if (urls && urls.length > 0) {
+    VIEW = Pressable
+  }
+  return (
+    <VIEW
+      onPress={() => { if (urls && urls.length > 0) Linking.openURL(urls[0]) }}
+      style={{ flexDirection: 'row', marginLeft: 10, paddingRight: 25, paddingBottom: 10 }}>
+      <View style={{ marginRight: 15, marginTop: 3, borderRadius: 15, width: 14, height: 14, backgroundColor: "#f5e71e", borderStyle: "solid", borderWidth: 2, borderColor: "#70472b" }} />
+      <View style={{ flex: 1 }} >
+        <RenderHtml contentWidth={LibStyle.width} source={{ html: props?.text?.trim?.() }} />
+      </View>
+    </VIEW>
+  )
+}