esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/mart/home.tsx

@@ -0,0 +1,457 @@
+// withHooks
+import { ComponentRefresh_button } from 'esoftplay/cache/component/refresh_button/import';
+import { ComponentSection } from 'esoftplay/cache/component/section/import';
+import { LibBlock } from 'esoftplay/cache/lib/block/import';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketInfo } from 'esoftplay/cache/market/info/import';
+import { MartBagProperty } from 'esoftplay/cache/mart/bag/import';
+import { MartDetailArgs } from 'esoftplay/cache/mart/detail/import';
+import { MartEmpty } from 'esoftplay/cache/mart/empty/import';
+import { MartHeader_home } from 'esoftplay/cache/mart/header_home/import';
+import { MartLocation_emptyProperty } from 'esoftplay/cache/mart/location_empty/import';
+import { PpobMain_item } from 'esoftplay/cache/ppob/main_item/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartHomeArgs {
+
+}
+export interface MartHomeProps {
+
+}
+
+
+const sliderHeight = 0.50 * LibStyle.width
+const wdth = LibStyle.width * 0.3
+const hgth = wdth * 0.7
+
+const cacheInfoMitra = useGlobalState(undefined)
+
+function Blocktitle(props: any) {
+  if (props.block.show_title == 1)
+    // return null
+    return (
+      <ComponentSection
+        text={props?.block?.title}
+        textColor={props.color}
+        icon={(props?.block?.params?.more_module == '' || props?.block?.show_more != 1) ? undefined : 'icons/ic_btn_more_rounded.png'}
+        moreAction={() => props?.block?.params?.more_module == '' || props?.block?.show_more != 1 ? {} : LibNavigation.navigate(props?.block?.params?.more_module, { url: props?.block?.params?.more_url, title: props?.block?.title })}
+      />
+    )
+  else
+    return null
+}
+
+export default function m(props: MartHomeProps): any {
+  const location = MartLocation_emptyProperty.state().useSelector(s => s)
+  const user = UserClass.state().useSelector(s => s)
+  const [data, setData] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+  const [height, setHeight] = useSafeState(1)
+  const [showPpobIcons, setShowPpobIcons] = useSafeState<any>(undefined)
+  const bagCount = MartBagProperty.countState().useSelector(s => s)
+
+  const renderSkeleton = (t: any, i: number) => (
+    <View key={i} style={{ marginRight: 10, borderWidth: 1, borderColor: '#f1f2f3', width: wdth, borderRadius: 4 }} >
+      <View style={{ backgroundColor: 'white', width: wdth, height: hgth, borderTopLeftRadius: 4, borderTopRightRadius: 4 }} />
+      <View style={{ margin: 5, justifyContent: 'space-around' }} >
+        <View style={{ marginBottom: 10, marginHorizontal: 4 }}>
+          <View style={{ width: '60%', height: 15, borderRadius: 10, backgroundColor: 'white' }} />
+          <View style={{ width: '60%', height: 15, borderRadius: 10, backgroundColor: 'white', marginTop: 5 }} />
+        </View>
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginHorizontal: 4 }} >
+          <LibIcon name='storefront-outline' size={14} />
+          <View style={{ marginLeft: 4, height: 15, width: '50%', borderRadius: 10, backgroundColor: 'white' }} />
+        </View>
+      </View>
+    </View>
+  )
+
+  const renderBlockSliderItem = (item1: any, i: number) => (
+    item1.url !== '' ?
+      <TouchableOpacity activeOpacity={1} key={i.toString()} onPress={() => {
+        {
+          item1.url !== '' &&
+            LibNavigation.navigate(item1.module, { url: item1.url, title: item1.title })
+        }
+      }}>
+        <LibPicture source={{ uri: item1.image }} style={{ height: sliderHeight, width: LibStyle.width, resizeMode: 'cover' }} />
+      </TouchableOpacity>
+      :
+      <LibPicture key={i.toString()} source={{ uri: item1.image }} style={{ height: sliderHeight, width: LibStyle.width, resizeMode: 'cover' }} />
+  )
+
+  const renderBlockSlider = (block: any) => {
+    return (
+      <LibCarrousel
+        delay={4000}
+        style={{ height: sliderHeight, width: LibStyle.width }}
+        autoplay
+        bullets
+        bulletStyle={{ width: 7, height: 7, backgroundColor: "#7e7e7e", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+        chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "white", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+        bulletsContainerStyle={{ marginBottom: -15 }} >
+        {
+          block.map(renderBlockSliderItem)
+        }
+      </LibCarrousel>
+    )
+  }
+
+  const renderBlockMitraItem = (block2: any, i: number) => {
+    return (
+      <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate<MartDetailArgs>('mart/detail', { url: block2?.url }) }} activeOpacity={1} style={{ margin: 15, marginBottom: 0, flexDirection: 'row', backgroundColor: 'white', paddingBottom: 15, borderBottomWidth: 0.5, borderBottomColor: '#e6e6e6' }} >
+        <LibPicture source={{ uri: block2?.image }} style={{ width: 80, height: 80, borderRadius: 5 }} />
+        <View style={{ marginHorizontal: 10, flex: 1, justifyContent: 'space-around' }} >
+          <View>
+            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="tail" style={{ fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold', lineHeight: 20 }} >{block2?.name}</Text>
+            <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode="tail" style={{ fontFamily: 'Arial', fontSize: 12, fontWeight: 'normal', lineHeight: 20 }} >{block2?.description}</Text>
+          </View>
+          <View style={{ flexDirection: 'row', marginTop: 5 }} >
+            <LibIcon name="map-marker-outline" size={18} />
+            <Text allowFontScaling={false} style={{ marginTop: 3, fontFamily: 'Arial', fontSize: 12 }} >{block2?.address}</Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  const renderBlockMitraList = (block: any) => {
+    return (
+      <LibList
+        data={block.list}
+        style={{ marginHorizontal: 7, marginTop: 10 }}
+        renderItem={renderBlockMitraItem}
+      />
+    )
+  }
+
+  const renderBlockProductHistoryItem = (block2: any, i: number) => {
+    return (
+      <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate<MartDetailArgs>('mart/detail', { url: 'mitra/detail/' + block2.mitra_id }) }} activeOpacity={1} style={{ marginRight: 10, borderWidth: 1, borderColor: '#f1f2f3', width: wdth, borderRadius: 4, overflow: 'hidden' }} >
+        <LibPicture source={{ uri: block2?.image }} style={{ width: wdth, height: hgth }} />
+        <View style={{ margin: 5, justifyContent: 'space-around', flex: 1 }} >
+          <View style={{ marginBottom: 10, marginHorizontal: 4 }}>
+            <Text numberOfLines={2} ellipsizeMode='tail' style={{ fontFamily: 'Arial', fontSize: 12 }} >{block2.name}</Text>
+            <Text numberOfLines={1} ellipsizeMode='tail' style={{ fontFamily: 'Arial', fontSize: 12, marginTop: 5, fontWeight: 'bold' }} >{LibUtils.money(block2.price)}</Text>
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginHorizontal: 4 }} >
+            <LibIcon name='storefront-outline' size={14} />
+            <Text numberOfLines={1} ellipsizeMode='tail' style={{ marginLeft: 4, fontFamily: 'Arial', fontSize: 12 }} >{block2.mitra_name}</Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  const renderBlockProductHistory = (block: any) => {
+    return (
+      <>
+        <LibList
+          data={block}
+          horizontal
+          ListHeaderComponent={
+            <View style={{ width: 15 }} />
+          }
+          style={{ marginTop: 10 }}
+          renderItem={renderBlockProductHistoryItem}
+        />
+      </>
+    )
+  }
+
+  const renderBlockBbopay = (block: any) => {
+    return (
+      <View style={{ marginRight: 10, flexDirection: 'row', alignItems: 'center' }} >
+        <View
+          onLayout={(e) => {
+            if (showPpobIcons == undefined)
+              setShowPpobIcons(e.nativeEvent.layout.width > LibStyle.width * 0.42)
+          }}
+          style={{ flex: 1, marginHorizontal: 10, marginTop: 10, marginBottom: 0, borderRadius: 10, backgroundColor: "#fff9f9", flexDirection: 'row', alignItems: 'center' }} >
+          <TouchableOpacity activeOpacity={1} onPress={() => {
+            UserProfileProperty.isLogin(() => {
+              LibNavigation.navigate('user/menu_bigbank')
+            })
+          }} style={{ flex: 1 }} >
+            <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+              <View>
+                <LibPicture style={{ height: 25, width: 25, marginLeft: 6, marginVertical: 10, resizeMode: 'contain' }} source={esp.assets('icons/ic_wallet_pocket.png')} />
+              </View>
+              <View style={{ marginLeft: 7, flex: 3, marginVertical: 10 }} >
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, color: "#9b9b9b" }} >{esp.lang("mart/home", "bbo_pay")}</Text>
+                {
+                  user ?
+                    <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 11, color: "#6c432c" }} >{LibUtils.money(user.saldo)}</Text>
+                    :
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, color: "#9b9b9b" }} >{esp.lang("mart/home", "Pay_Easier")}</Text>
+                }
+              </View>
+              {
+                user &&
+                <ComponentRefresh_button onPress={() => { UserProfileProperty.update() }} />
+              }
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => {
+            UserProfileProperty.isLogin(() => {
+              LibNavigation.navigate('component/scanner', { fromPage: 'home' })
+            })
+          }} style={{}} >
+            <View style={{ width: 34, flex: 1, backgroundColor: "#FF591E", alignItems: 'center', justifyContent: 'center', borderTopRightRadius: 10, borderBottomRightRadius: 10 }} >
+              <LibIcon name={"qrcode-scan"} color={"white"} />
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 8, textAlign: "center", color: "white", marginTop: 4 }} >{esp.lang("mart/home", "scan")}</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        {
+          showPpobIcons == undefined || showPpobIcons == true ?
+            block.map((item: any, i: number) => (
+              <PpobMain_item id={item.id} key={i} image={item.image} module={item.module} title={item.title} url={item.url} columns={5} />
+            ))
+            :
+            showPpobIcons == false &&
+            <TouchableOpacity style={{ paddingHorizontal: 6, paddingTop: 15 }} onPress={() => { LibNavigation.navigate('ppob/menu') }}>
+              <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                <LibPicture source={esp.assets('icons/ppob.png')} style={{ width: 35, height: 35 }} resizeMode="contain" />
+                <Text allowFontScaling={false} style={{ fontSize: 11, paddingTop: 5, textAlign: 'center', textAlignVertical: 'center' }} >{esp.lang("mart/home", "Digital_Products")}</Text>
+              </View>
+            </TouchableOpacity>
+        }
+      </View>
+    )
+  }
+
+  const renderBlocks = (block: any, i: number) => {
+    if (block.type == 'slider') {
+      return (
+        <View key={i.toString()} style={{ flex: 1 }} >
+          <Blocktitle block={block} color={LibStyle.colorRed} />
+          <View style={{ height: sliderHeight, width: LibStyle.width }} >
+            <LibBlock
+              cache
+              url={block.list_url}
+              render={renderBlockSlider} />
+          </View>
+        </View>
+      )
+    } else if (block.type == 'mitra_list') {
+      return (
+        <View key={i.toString() + '' + location.id} >
+          <Blocktitle block={block} color={LibStyle.colorRed} />
+          <LibBlock
+            cache
+            url={'mitra/list?location_kpu=' + location.id}
+            ErrorView={(x: string) => (
+              <View style={{ marginHorizontal: 20, alignItems: 'center', backgroundColor: 'white', marginTop: 20 }}>
+                <Text allowFontScaling={false} style={{ fontSize: 14, lineHeight: 20, fontWeight: "bold", marginBottom: 5, color: "#4a4a4a", textAlign: "center" }}>{(x)}</Text>
+              </View>
+            )}
+            render={renderBlockMitraList} />
+        </View>
+      )
+    } else if (block.type == 'product_history') {
+      return (
+        <View key={i.toString()} >
+          <Blocktitle block={block} color={LibStyle.colorRed} />
+          <LibBlock
+            cache
+            url={block.list_url}
+            render={renderBlockProductHistory} />
+        </View>
+      )
+    } else if (block.type == 'banner') {
+      return (
+        <View key={i.toString()}>
+          <Blocktitle block={block} color={LibStyle.colorRed} />
+          <TouchableOpacity activeOpacity={1} onPress={() => {
+            LibNavigation.navigate(block.task_module, { url: block.task, title: block.title })
+          }}>
+            <LibPicture key={i.toString()} source={{ uri: block.image_background }} style={{ height: sliderHeight, width: LibStyle.width, resizeMode: 'cover', marginTop: 10 }} />
+          </TouchableOpacity>
+        </View>
+      )
+    } else if (block.type == 'bbopay-ppob') {
+      return (
+        <View key={"home" + i.toString()}  >
+          <Blocktitle block={block} color={LibStyle.colorRed} />
+          <LibBlock
+            cache
+            url={block.list_url}
+            render={renderBlockBbopay}
+          />
+        </View>
+      )
+    } else if (block.type == "button_point") {
+      return (
+        <TouchableOpacity key={"button" + i.toString()} onPress={() => { LibNavigation.navigate(block.task_module, { type: 1 }) }} style={{ ...LibStyle.elevation(5), margin: 15, marginTop: 15, padding: 10, backgroundColor: "#fed904", alignItems: 'center', alignContent: 'center', borderRadius: 5, marginVertical: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
+          <View style={{ flexDirection: 'row', flex: 1 }}>
+            <LibPicture source={esp.assets('icons/coin.png')} style={{ height: 40, width: 40, marginRight: 10 }} />
+            <Text allowFontScaling={false} style={{ flexWrap: 'wrap', flex: 1, fontSize: 14 }} >{esp.lang("mart/home", "Collect_Purchase_Points_and_redeem_Rewards_here")} </Text>
+          </View>
+          <LibIcon name="chevron-right-circle" size={28} />
+        </TouchableOpacity>
+      )
+    } else if (block.type == 'info') {
+      return (
+        <View key={i.toString()}>
+          {
+            cacheInfoMitra.get() != 'info' ?
+              <View style={{ height: height != 1 ? height : undefined }} >
+                <MarketInfo mode="info"
+                  text={block?.title}
+                  disabled={block?.task_module == '' && block?.task == ''}
+                  onClose={() => {
+                    // setData(LibObject.splice(data, i, 1)('blocks'))
+                    setHeight(0)
+                    cacheInfoMitra.set(block.type)
+                  }}
+                  onPress={() => {
+                    LibNavigation.navigate(block?.task_module, { url: block?.task, title: block?.title })
+                  }} />
+              </View>
+              :
+              null
+          }
+        </View>
+      )
+    } else {
+      return null
+    }
+  }
+
+  useEffect(() => {
+    if (user) {
+      loadData()
+      MartBagProperty.getCountState()
+      if (!location.id && user) {
+        LibNavigation.replace('mart/location_empty')
+      }
+    } else {
+      LibNavigation.back()
+      LibNavigation.navigate('user/login')
+    }
+  }, [])
+
+  // useEffect(() => {
+  // }, [])
+
+  function loadData() {
+    new LibCurl('home_mitra', null,
+      (res, msg) => {
+        setData(res)
+      }, (msg) => {
+        setError(msg)
+      }, 1)
+  }
+
+  function resetCart() {
+    new LibCurl('mitra/product_cart_reset', null, (res, msg) => {
+      MartBagProperty.getCountState()
+    })
+  }
+
+  function selectLocation() {
+    LibNavigation.setRedirect(() => {
+      resetCart()
+      LibNavigation.back(4)
+    })
+    LibNavigation.navigate('mart/location')
+  }
+
+  if (!data) {
+    return (
+      <View style={{ flex: 1 }} >
+        <View style={{ position: 'relative', top: 0, left: 0, right: 0, backgroundColor: '#fff', ...LibStyle.elevation(3) }} >
+          <MartHeader_home />
+        </View>
+        <LibSkeleton>
+          <View style={{ marginHorizontal: 15, padding: 10, flexDirection: 'row', margin: 10, borderRadius: 5, borderWidth: 1, borderColor: 'white' }} >
+            <View style={{ height: 16, width: '70%', backgroundColor: 'white', borderRadius: 10 }} />
+          </View>
+          <View style={{ height: sliderHeight, width: LibStyle.width, backgroundColor: 'white' }} />
+          <View style={{ ...LibStyle.elevation(5), margin: 15, marginTop: 15, padding: 10, borderWidth: 1, alignItems: 'center', alignContent: 'center', borderRadius: 5, marginVertical: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
+            <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center' }}>
+              <View style={{ backgroundColor: 'white', height: 40, width: 40, borderRadius: 20, marginRight: 10 }} />
+              <View style={{ flex: 1, marginRight: 15 }}>
+                <View style={{ width: '90%', height: 15, borderRadius: 10, backgroundColor: 'white', marginBottom: 7 }} />
+                <View style={{ width: '50%', height: 15, borderRadius: 10, backgroundColor: 'white' }} />
+              </View>
+            </View>
+            <LibIcon name="chevron-right-circle" size={28} />
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginHorizontal: 15, marginTop: 10 }}>
+            <View style={{ width: 10, height: 30, backgroundColor: 'white', borderRadius: 10, marginRight: 10 }} />
+            <View style={{ width: '40%', height: 20, borderRadius: 10, backgroundColor: 'white' }} />
+          </View>
+          <View style={{ marginLeft: 15, marginTop: 10, flexDirection: 'row' }}>
+            {
+              [1, 1, 1].map(renderSkeleton)
+            }
+          </View>
+        </LibSkeleton >
+      </View >
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }} >
+      <View style={{ position: 'relative', top: 0, left: 0, right: 0, backgroundColor: '#fff', ...LibStyle.elevation(3) }} >
+        <MartHeader_home />
+      </View>
+      {
+        error ?
+          <MartEmpty message={error?.message} />
+          :
+          <>
+            <LibScroll onRefresh={loadData} style={{ flex: 1 }} >
+              {
+                user &&
+                <View style={{ marginHorizontal: 15, padding: 10, flexDirection: 'row', margin: 10, borderRadius: 5, backgroundColor: 'white', ...LibStyle.elevation(2) }} >
+                  {
+                    location.id ?
+                      <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'Arial', fontSize: 14 }} >{esp.lang("mart/home", "store_id", location?.title)} </Text>
+                      :
+                      <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'Arial', fontSize: 14 }} >{esp.lang("mart/home", "Please_select_a_Store_location")} </Text>
+                  }
+                  <TouchableOpacity onPress={() => {
+                    if (bagCount > 0) {
+                      LibDialog.warningConfirm(esp.lang("mart/home", "change_this_location"), esp.lang("mart/home", "If_you_change_your_current_location"),
+                        esp.lang("mart/home", "yes"), () => {
+                          selectLocation()
+                        },
+                        esp.lang("mart/home", "no"), () => { })
+                    } else {
+                      selectLocation()
+                    }
+                  }} >
+                    <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14 }} >{location.id ? esp.lang("mart/home", "change") : esp.lang("mart/home", "select_location")}</Text>
+                  </TouchableOpacity>
+                </View>
+              }
+              {
+                data?.blocks?.map?.(renderBlocks)
+              }
+            </LibScroll>
+          </>
+      }
+    </View>
+  )
+}

package/modules/mart/image_picker.tsx

@@ -0,0 +1,60 @@
+// withHooks
+// noPage
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibImage } from 'esoftplay/cache/lib/image/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+
+export interface MartImage_pickerProps {
+  _ref: any,
+  onFinish: (img: string | string[]) => void,
+  onDelete?: () => void
+}
+export default function m(props: MartImage_pickerProps): any {
+  return (
+    <LibSlidingup ref={props._ref} >
+      <View style={applyStyle({ backgroundColor: "white", borderTopLeftRadius: 20, borderTopRightRadius: 20 })} >
+        <View style={applyStyle({ width: 40, height: 4, borderRadius: 2, backgroundColor: "#ccc", alignSelf: "center", margin: 10 })} />
+        <View style={applyStyle([{ flexDirection: "row", padding: 20, justifyContent: "space-around" }, LibStyle.elevation(0)])} >
+          <View style={applyStyle({ alignItems: "center" })} >
+            <TouchableOpacity
+              onPress={() => { LibImage.fromCamera().then(props.onFinish); props._ref.current!.hide() }}
+              style={applyStyle({ alignItems: "center", justifyContent: "center", ...LibStyle.elevation(0) })} >
+              <LibPicture source={esp.assets('market/ic_camera_purple.png')} style={{ width: 60, height: 60 }} resizeMode='contain' />
+            </TouchableOpacity>
+            <LibTextstyle text={esp.lang("mart/image_picker", "camera")} textStyle="footnote" style={applyStyle({ textAlign: "center", color: "#888", marginTop: 5 })} />
+          </View>
+          <View style={applyStyle({ alignItems: "center" })} >
+            <TouchableOpacity
+              onPress={() => { LibImage.fromGallery().then(props.onFinish); props._ref.current!.hide() }}
+              style={applyStyle({ alignItems: "center", justifyContent: "center" })} >
+              <LibPicture source={esp.assets('market/ic_gallery_purple.png')} style={{ width: 60, height: 60 }} resizeMode='contain' />
+            </TouchableOpacity>
+            <LibTextstyle text={esp.lang("mart/image_picker", "gallery")} textStyle="footnote" style={applyStyle({ textAlign: "center", color: "#888", marginTop: 5 })} />
+          </View>
+          {
+            props.onDelete &&
+            <View style={applyStyle({ alignItems: "center" })} >
+              <TouchableOpacity
+                onPress={() => { props.onDelete && props.onDelete(); props._ref.current!.hide() }}
+                style={applyStyle({ height: 54, width: 54, borderRadius: 35, borderWidth: 2, borderColor: "#888", alignItems: "center", justifyContent: "center" })} >
+                <LibIcon.AntDesign name="close" color={"#888"} size={24} />
+              </TouchableOpacity>
+              <LibTextstyle text={esp.lang("mart/image_picker", "delete")} textStyle="footnote" style={applyStyle({ textAlign: "center", color: "#888", marginTop: 5 })} />
+            </View>
+          }
+        </View>
+      </View>
+    </LibSlidingup>
+  )
+}
+function applyStyle(style: any) {
+  return style
+}