esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/component/tabheader.tsx

@@ -0,0 +1,48 @@
+// withHooks
+// noPage
+
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { useTimeout } from 'esoftplay/timeout';
+
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+
+export interface ComponentTabheaderProps {
+  titles: string[],
+  activeIndex: number,
+  onPress: (index: number) => void
+}
+export default function m(props: ComponentTabheaderProps): any {
+  const scroll = useRef<ScrollView>(null)
+  const timeout = useTimeout()
+
+  useEffect(() => {
+    timeout(() => {
+      scroll.current?.scrollTo(0, props.activeIndex * 45, false)
+    }, 1000);
+  }, [])
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+      <ScrollView ref={scroll} horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 16 }} >
+        {
+          props.titles.map((title, i) =>
+            i == props.activeIndex
+              ?
+              <ComponentTouchable onPress={() => props.onPress(i)} key={i.toString()} >
+                <View style={{ borderBottomColor: LibStyle.colorBlue, borderBottomWidth: 2, marginRight: 20 }} >
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#3ea4dc", marginVertical: 10, }} >{title}</Text>
+                </View>
+              </ComponentTouchable>
+              :
+              <ComponentTouchable onPress={() => props.onPress(i)} key={i.toString()} >
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", paddingVertical: 10, marginRight: 20 }} >{title}</Text>
+              </ComponentTouchable>
+          )
+        }
+      </ScrollView>
+    </View>
+  )
+}

package/modules/component/text.tsx

@@ -0,0 +1,122 @@
+import { LibComponent } from 'esoftplay/cache/lib/component/import';
+import React from 'react';
+import { Text, TextStyle } from 'react-native';
+
+export interface ComponentTextProps {
+  children: any,
+  size?: number;
+  color?: string;
+  bold?: boolean;
+  style?: TextStyle;
+  numberOfLines?: number
+  ellipsizeMode?: any
+}
+
+export default class ComponentText extends LibComponent<ComponentTextProps, {}> {
+  constructor(props: ComponentTextProps) {
+    super(props);
+  }
+
+  static Caption(props: ComponentTextProps): any {
+    const size = props.size || 12;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Subtitle(props: ComponentTextProps): any {
+    const size = props.size || 14;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Title(props: ComponentTextProps): any {
+    const size = props.size || 18;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Header(props: ComponentTextProps): any {
+    const size = props.size || 24;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Body(props: ComponentTextProps): any {
+    const size = props.size || 16;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+
+    return (
+      <Text {...props} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Small(props: ComponentTextProps): any {
+    const size = props.size || 10;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Button(props: ComponentTextProps): any {
+    const size = props.size || 14;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Overline(props: ComponentTextProps): any {
+    const size = props.size || 10;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  static Display(props: ComponentTextProps): any {
+    const size = props.size || 32;
+    const color = props.color || '#000';
+    const customStyle = props.style || {};
+    const bold = props.bold ? 'bold' : 'normal'
+
+    return (
+      <Text ellipsizeMode={props.ellipsizeMode ? props.ellipsizeMode : "tail"} numberOfLines={props.numberOfLines || 1} style={{ fontSize: size, color: color, ...customStyle, fontWeight: bold }} allowFontScaling={false} >{props.children}</Text>
+    )
+  }
+
+  render(): any {
+    return (
+      <Text allowFontScaling={false}>{this.props.children}</Text>
+    )
+  }
+}

package/modules/component/touchable.tsx

@@ -0,0 +1,20 @@
+// withHooks 
+// noPage
+
+import React from 'react';
+// import TouchableScale from 'react-native-touchable-scale';
+import { TouchableOpacity } from 'react-native';
+
+export interface ComponentTouchableProps {
+  onPress: () => void,
+  style?: any,
+  children: any,
+  testID?: string,
+}
+export default function m(props: ComponentTouchableProps): any {
+  return (
+    <TouchableOpacity testID={props.testID || 'ComponentTouchable'} hitSlop={{ top: 7, left: 7, right: 7, bottom: 7 }} style={props.style} onPress={props.onPress} activeOpacity={1}>
+      {props.children}
+    </TouchableOpacity>
+  )
+}

package/modules/component/translate.tsx

@@ -0,0 +1,50 @@
+// withHooks
+// noPage
+
+import { LibLocale } from 'esoftplay/cache/lib/locale/import';
+import { LibTranslate } from 'esoftplay/cache/lib/translate/import';
+import { UserLanguage_listProperty } from 'esoftplay/cache/user/language_list/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
+
+
+export interface ComponentTranslateArgs {
+
+}
+export interface ComponentTranslateProps {
+  text: string,
+  textStyle?: StyleProp<TextStyle>
+  buttonStyle?: StyleProp<ViewStyle>
+  buttonTextStyle?: StyleProp<TextStyle>
+}
+export default function m(props: ComponentTranslateProps): any {
+  const [text, setText] = useSafeState<any>()
+  const [loadingTl, setLoadingTl] = useSafeState(false)
+
+  const langData = LibLocale.stateLang().get() || {}
+  const currentLanguage = Object.keys(langData).length == 0 ? 'id' : LibLocale.state().get()
+  const selectedLang = UserLanguage_listProperty.allLanguage()?.filter?.((x: any) => x?.name == currentLanguage)?.[0] || {}
+
+  return (
+    <View>
+      <Text allowFontScaling={false} style={[styleId_rm103, props?.textStyle]}>{text || props?.text}</Text>
+      <Pressable onPress={() => {
+        if (!text) {
+          setLoadingTl(true)
+          LibTranslate(props?.text).to(selectedLang?.code, (s) => {
+            setLoadingTl(false)
+            setText(() => s)
+          })
+        } else {
+          setText(undefined)
+        }
+      }} style={[{ marginTop: 7 }, props?.buttonStyle]}>
+        <Text allowFontScaling={false} style={[styleId_Ssexy, props?.buttonTextStyle]}>{loadingTl ? esp.lang("component/translate", "loading") : !text ? esp.lang("component/translate", "see_translation") : esp.lang("component/translate", "see_original")}</Text>
+      </Pressable>
+    </View>
+  )
+}
+const styleId_rm103: any = { marginTop: 7, fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "justify", color: "#909090", flexWrap: 'wrap' }
+const styleId_Ssexy: any = { fontFamily: "SFProText", fontSize: 10, fontWeight: "bold", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, color: "#4a4a4a" }

package/modules/components/header.tsx

@@ -0,0 +1,38 @@
+// withHooks
+
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+
+export interface ComponentsHeaderArgs {
+
+}
+export interface ComponentsHeaderProps {
+
+}
+export default function m(props: ComponentsHeaderProps): any {
+  return (
+    <View style={{ flexDirection: 'row', backgroundColor: LibStyle.colorPrimary, padding: 12, paddingTop: LibStyle.STATUSBAR_HEIGHT, alignItems: 'center' }} >
+      <LibPicture
+        source={esp.assets('icon_ios.png')}
+        style={{ height: 45, width: 45, borderRadius: 22.5, backgroundColor: '#fff' }}
+      />
+      <Pressable style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', marginHorizontal: 16, borderRadius: 20, height: 40, flex: 1, padding: 6 }} >
+        <LibIcon.Feather name='search' size={15} style={{ marginTop: 2, opacity: 0.5 }} />
+        <View style={{ flex: 1, paddingLeft: 12 }} >
+          <LibInput base
+            onChangeText={(text) => console.log(text)}
+            placeholder='search' />
+        </View>
+      </Pressable>
+      <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/home/cart.png')} />
+      <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/home/notification.png')} />
+      <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/home/chat.png')} />
+    </View>
+  )
+}

package/modules/components/header_home.tsx

@@ -0,0 +1,77 @@
+// withHooks
+import { ComponentBadge } from 'esoftplay/cache/component/badge/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface ComponentsHeader_homeArgs {
+
+}
+export interface ComponentsHeader_homeProps {
+
+}
+export default function m(props: ComponentsHeader_homeProps): any {
+  return (
+    <View>
+      <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT }} />
+      <LibStatusbar style="dark" />
+      <View style={{ flexDirection: 'row', padding: 13, alignItems: 'center', height: 60, }} >
+        <Pressable testID='profile' hitSlop={{ top: 7, left: 7, right: 7, bottom: 7 }} onPress={() => {
+          UserProfileProperty.isLogin(() => {
+            LibNavigation.navigate('user/profile')
+          })
+        }} style={{ height: 35, width: 35, borderRadius: 17.5, overflow: 'hidden' }} >
+          <LibPicture style={{ height: 35, width: 35, borderRadius: 17.5, backgroundColor: '#fff' }} source={/* user && user.image != '' ? { uri: user.image } :  */esp.assets('icons/ic_btm_nav_active_profile.png')} />
+        </Pressable>
+
+        <Pressable testID='search-bar' onPress={() => {/* props.onPress() */ }} style={{ flex: 1 }} >
+          <View style={{ marginLeft: 10, height: 20, borderRadius: 20, backgroundColor: 'white', flexDirection: "row", alignItems: 'center', flex: 1, marginHorizontal: 12 }} >
+            <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('icons/ic_search.png')} />
+            <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, color: "#e5e5e5" }} >{esp.lang("component/header_home", "search")}</Text>
+          </View>
+        </Pressable>
+
+        <Pressable hitSlop={{ top: 7, left: 7, right: 7, bottom: 7 }} onPress={() => {
+          // UserProfileProperty.isLogin(() => {
+          //   LibNavigation.navigate('market/cart')
+          // })
+        }}>
+          <View style={{ marginRight: 5, padding: 4 }}>
+            <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/home/cart.png')} />
+            <ComponentBadge counter={/* cartCount */ '99'} />
+          </View>
+        </Pressable>
+
+        <Pressable hitSlop={{ top: 7, left: 7, right: 7, bottom: 7 }} onPress={() => {
+          // UserProfileProperty.isLogin(() => {
+          //   LibNavigation.navigate('notification/index')
+          // })
+        }}>
+          <View style={{ marginRight: 5, padding: 4 }}>
+            <LibPicture style={{ height: 22, width: 27, resizeMode: 'contain' }} source={esp.assets('icons/home/notification.png')} />
+            <ComponentBadge counter={/* counter */'10'} />
+          </View>
+        </Pressable>
+
+        <Pressable testID='chat' hitSlop={{ top: 7, left: 7, right: 7, bottom: 7 }} onPress={() => {
+          // UserProfileProperty.isLogin(() => {
+          //   LibNavigation.navigate('chat/index')
+          // })
+        }}>
+          <View style={{ marginRight: 5, padding: 4 }}>
+            <LibPicture style={{ height: /* counter > 99 ? 27 : */ 22, width: /* counter > 99 ? 27 : */ 22, resizeMode: 'contain' }} source={esp.assets('icons/home/chat.png')} />
+            <ComponentBadge counter={/* unRead ||  */'0'} />
+          </View>
+        </Pressable>
+
+      </View>
+    </View>
+  )
+}

package/modules/components/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 ComponentsSectionProps {
+  text: string,
+  textColor: string,
+  caption?: string,
+  icon?: string,
+  moreAction?: () => void
+}
+export default function m(props: ComponentsSectionProps): any {
+  return (
+    <View style={{ marginLeft: 4, marginVertical: 5, marginTop: 16, 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/content/detail.tsx

@@ -0,0 +1,201 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useEffect, useRef } from 'react';
+import { ImageBackground, Linking, Pressable, Text, View } from 'react-native';
+
+export interface ContentDetailArgs {
+
+}
+export interface ContentDetailProps {
+
+}
+export default function m(props: ContentDetailProps): any {
+	const ComponentTouchable = useRef(esp.mod("component/touchable")).current
+	const LibIcon = useRef(esp.mod("lib/icon")).current
+	const LibPicture = useRef(esp.mod("lib/picture")).current
+	const LibScroll = useRef(esp.mod("lib/scroll")).current
+	const LibVideo = useRef(esp.mod("lib/video")).current
+	const LibWebview = useRef(esp.mod("lib/webview")).current
+	const UseCondition = useRef(esp.mod("use/condition")).current
+
+  const { url } = esp.mod("lib/navigation").getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+
+  function loadData() {
+    new (esp.mod("lib/curl"))(url, null,
+      (res, msg) => {
+        setResult(res)
+      },
+      (err) => {
+        esp.modProp("lib/toast").show(err.message)
+      }
+    )
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const isDownload = result?.link != "" && result?.type === "download"
+  const isVideo = result?.code != "" && result?.type === "video"
+  const _images = result?.images?.length > 0 ? result?.images : [{ image: result?.image || {} }]
+
+  let share = [
+    {
+      icon: 'icons/ic_facebook.png',
+      title: 'Facebook',
+      onPress: () => { esp.mod("lib/share").facebook(result?.url) }
+    },
+    {
+      icon: 'icons/ic_whatsapp.png',
+      title: 'Whatsapp',
+      onPress: () => { esp.mod("lib/share").whatsapp(result?.url) }
+    },
+    {
+      icon: 'icons/ic_twitter.png',
+      title: 'Twitter',
+      onPress: () => { esp.mod("lib/share").twitter(result?.url) }
+    },
+    {
+      icon: 'icons/ic_copy.png',
+      title: 'Copy',
+      onPress: () => {
+        esp.mod("lib/utils").copyToClipboard(result?.url).then((v) => {
+          esp.modProp("lib/toast").show(esp.lang("content/detail", "copied"))
+        })
+      }
+    },
+  ]
+  return (
+    <>
+      <View style={styleId_1a9pLp} >
+        <Pressable onPress={() => esp.mod("lib/navigation").back()} style={styleId_Z1EJSwt} >
+          <LibIcon name='arrow-left' />
+        </Pressable>
+        <UseCondition if={result?.config?.share == 1} >
+          <Pressable onPress={() => esp.mod("lib/utils").share(url.replace('://data.', '://'))} style={styleId_Z1EJSwt} >
+            <LibIcon name="share" />
+          </Pressable>
+        </UseCondition>
+      </View>
+      <LibScroll
+        stickyHeaderIndices={isVideo ? [0] : undefined}
+        onRefresh={loadData} style={styleId_ZcMJmd} >
+        {
+          isVideo ?
+            <>
+              <View style={styleId_1HNw2w} >
+                <LibVideo code={result?.code} />
+              </View>
+            </>
+            :
+            <Pressable onPress={() => esp.mod("lib/navigation").navigate('lib/gallery', { images: _images })} >
+              <ImageBackground
+                source={{ uri: result?.image || "" }}
+                style={styleId_1tc8ob}>
+                <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styleId_24U3Gi} >
+                  {result?.images?.length > 1 && <LibIcon.Ionicons name="copy-outline" color={'white'} size={30} style={applyStyle({ transform: [{ scaleX: -1 }] })} />}
+                </LinearGradient>
+              </ImageBackground>
+            </Pressable>
+        }
+        <UseCondition if={result?.config?.share == 1} >
+          <View style={styleId_1gGHNW}>
+            {
+              share.map((item: any, i: number) => {
+                return (
+                  <View key={i} style={styleId_1hcIwd}>
+                    <ComponentTouchable onPress={item.onPress} >
+                      <LibPicture style={styleId_Z22iTFc} source={esp.assets(item.icon)} />
+                    </ComponentTouchable>
+                  </View>
+                )
+              })
+            }
+          </View>
+        </UseCondition>
+        <View style={{ paddingHorizontal: 16, marginTop: 10 }} >
+          <UseCondition if={result?.config?.created == 1} >
+            <Text allowFontScaling={false} style={styleId_Z1APoLj} >{esp.mod("lib/utils").moment(result?.created).serverFormat('DD MMMM YYYY HH:mm')}</Text>
+          </UseCondition>
+          <UseCondition if={result?.config?.title == 1} >
+            <Text allowFontScaling={false} style={styleId_1oSfCH} >{result?.title}</Text>
+          </UseCondition>
+          <UseCondition if={result?.config?.author == 1} >
+            <View style={styleId_Z1i5LUH} >
+              <View style={styleId_Z1ssSBr} >
+                <Text allowFontScaling={false} style={styleId_S3TXR} >{result?.created_by_alias}</Text>
+              </View>
+            </View>
+          </UseCondition>
+        </View>
+        {
+          isDownload &&
+          <Pressable onPress={() => Linking.openURL(result?.link)} style={styleId_2b3VDC} >
+            <LibIcon.SimpleLineIcons name='cloud-download' color={esp.mod("lib/style").colorPrimary} />
+            <Text allowFontScaling={false} style={styleId_GiXBT} >{esp.lang("content/detail", "download")}</Text>
+          </Pressable>
+        }
+        {
+          result?.content &&
+          <LibWebview
+            source={{ html: result?.content }}
+            style={styleId_Ze3FlD}
+            onFinishLoad={() => { }}
+          />
+        }
+        {/*                 
+        <View style={({ alignItems: 'center', borderBottomWidth: 8, borderBottomColor: '#f2f2f2', paddingBottom: 13 }} >
+          <Pressable onPress={() => esp.mod("lib/navigation").navigate('content/comment', { id: result.id })} style={({ borderRadius: 8, paddingHorizontal: 24, paddingVertical: 10, backgroundColor: esp.mod("lib/style").colorPrimary, }} >
+            <Text allowFontScaling={false} style={({ fontFamily: "ArialBold", fontSize: 14, fontWeight: "500", lineHeight: 18, color: esp.mod("lib/style").colorAccent }} >{esp.lang("content/detail", "comment")}</Text>
+          </Pressable>
+        </View> */}
+        {/* <>
+          {
+            (result?.related?.length > 0) ?
+              <>
+                <View style={styleId_IRUq8} >
+                  <Text allowFontScaling={false}>{esp.lang("content/detail", "maybe")}</Text>
+                </View>
+                <View style={styleId_1N3MCr}>
+                  {
+                    result?.related?.map((rel: any, i: number) => {
+                      return (
+                        <ContentItem key={i} {...rel} onPress={() => { esp.mod("lib/navigation").push("content/detail", { url: rel?.url }) }} />
+                      )
+                    })
+                  }
+                </View>
+
+              </>
+              : null
+          }
+        </> */}
+      </LibScroll>
+
+    </>
+  )
+}
+const styleId_1a9pLp: any = { flexDirection: 'row', justifyContent: 'space-between', paddingTop: esp.mod("lib/style").STATUSBAR_HEIGHT_MASTER + 14, paddingHorizontal: 12, paddingBottom: 10 }
+const styleId_Z1EJSwt: any = { height: 40, width: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' }
+const styleId_ZcMJmd: any = { flex: 1 }
+const styleId_1HNw2w: any = { backgroundColor: 'black', height: (9 / 16 * esp.mod("lib/style").width), overflow: "hidden" }
+const styleId_1tc8ob: any = { height: 9 / 16 * esp.mod("lib/style").width, marginBottom: 4, ...esp.mod("lib/style").elevation(4), width: esp.mod("lib/style").width, justifyContent: 'flex-end' }
+const styleId_24U3Gi: any = { padding: 16, paddingTop: 90 }
+const styleId_1gGHNW: any = { marginTop: 10, marginLeft: 17, flexDirection: 'row' }
+const styleId_1hcIwd: any = { marginRight: 10 }
+const styleId_Z22iTFc: any = { resizeMode: 'contain', height: 25, width: 25, borderRadius: 12.5, backgroundColor: 'white' }
+const styleId_Z1APoLj: any = { fontFamily: "ArialBold", fontSize: 10, fontWeight: "500", letterSpacing: 1.5, textTransform: 'uppercase', marginTop: 12 }
+const styleId_1oSfCH: any = { fontFamily: "ArialBold", fontSize: 32, fontWeight: "500", lineHeight: 40, marginTop: 5 }
+const styleId_Z1i5LUH: any = { flexDirection: 'row', marginTop: 5 }
+const styleId_Z1ssSBr: any = { backgroundColor: "#f1f1f1", borderRadius: 4, paddingHorizontal: 10, }
+const styleId_S3TXR: any = { fontFamily: "Arial", fontSize: 14, lineHeight: 20, color: esp.mod("lib/style").colorPrimary, }
+const styleId_2b3VDC: any = { backgroundColor: '#f8f8f8', borderWidth: 1, borderColor: esp.mod("lib/style").colorPrimary, borderRadius: 13, padding: 16, margin: 16, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }
+const styleId_GiXBT: any = { fontFamily: "Arial", fontSize: 16, marginLeft: 16, fontWeight: "500", letterSpacing: 1.2, color: esp.mod("lib/style").colorPrimary }
+const styleId_Ze3FlD: any = { /* flex: 1,  */marginVertical: 20 }
+const styleId_IRUq8: any = { padding: 15, backgroundColor: '#f5f5f5', paddingTop: 10 }
+const styleId_1N3MCr: any = { marginTop: 10, marginLeft: 8, flexDirection: 'row', flexWrap: 'wrap' }

package/modules/content/item.tsx

@@ -0,0 +1,52 @@
+// withHooks
+// noPage
+import { applyStyle } from 'esoftplay';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+
+import moment from 'esoftplay/moment';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+moment().locale('id')
+export interface ContentItemProps {
+  created: string,
+  description: string,
+  id: number,
+  image: string,
+  intro: string,
+  publish: string,
+  title: string,
+  updated: string,
+  url: string,
+  onPress: () => void
+}
+
+const itemWidth = (LibStyle.width - 49) * 0.49
+
+export default function m(props: ContentItemProps): any {
+  const { image, title, onPress, } = props
+
+  return (
+    <View style={styleId_zwbK3} >
+      <ComponentTouchable onPress={() => onPress()} >
+        <View style={styleId_ZN5qxz} >
+          <View style={styleId_Z94KXV} >
+            <LibPicture source={{ uri: image }} style={styleId_ZAYXTG} />
+            <View style={styleId_Z1JRGzR}>
+              <Text allowFontScaling={false} style={styleId_ZLjAw4} numberOfLines={1} ellipsizeMode={"middle"} >{title}</Text>
+              {/* <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 10, color: "#00b894", marginTop: 5, marginBottom: 10 }} >{moment(created).format('dddd, DD MMMM YYYY')}</Text> */}
+            </View>
+          </View>
+        </View>
+      </ComponentTouchable>
+    </View>
+  )
+}
+const styleId_zwbK3: any = { flexDirection: 'row', flexWrap: 'wrap', padding: 10 }
+const styleId_ZN5qxz: any = { width: itemWidth, backgroundColor: 'white', borderRadius: 10, alignItems: "center", ...LibStyle.elevation(2) }
+const styleId_Z94KXV: any = { borderRadius: 10, overflow: 'hidden' }
+const styleId_ZAYXTG: any = { height: 100 / 155 * itemWidth, width: itemWidth, resizeMode: 'cover' }
+const styleId_Z1JRGzR: any = { paddingHorizontal: 8, }
+const styleId_ZLjAw4: any = { fontFamily: "ArialBold", fontSize: 12, color: "#9b9b9b", marginVertical: 10 }