esoftplay-event 0.0.0-a

package/event/list.tsx

@@ -0,0 +1,219 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { BigbangSchedule_item } from 'esoftplay/cache/bigbang/schedule_item/import';
+import { BigbangSchedule_item2 } from 'esoftplay/cache/bigbang/schedule_item2/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { EventList_filter } from 'esoftplay/cache/event/list_filter/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import moment from 'esoftplay/moment';
+import React, { useRef } from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+
+export interface EventListProps {
+
+}
+export interface EventListArgs {
+  url?: string,
+  cat_id?: string,
+  keywords?: string
+}
+export default function m(props: EventListProps): any {
+  const { title, url, cat_id, keywords } = LibNavigation.getArgsAll(props)
+  const [viewType, setViewType] = useSafeState<number>(1)
+  const [location, setLocation] = useSafeState<any>(undefined)
+  const [ondate, setOndate] = useSafeState<any>(undefined)
+  const [category, setCategory] = useSafeState<any>(cat_id || undefined)
+  const [query, setQuery] = useSafeState<string>(keywords || '')
+  const inputSearch = useRef<TextInput>(null)
+  let keyword = useRef<string>('').current
+  let filterDialog = React.useRef<ComponentSlidingup>(null)
+
+  function buildUrl(url: string) {
+    if (query) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'keyword=' + query
+    }
+    if (category) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'cat_id=' + category
+    }
+    if (location) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'location_id=' + location.id
+    }
+    if (ondate) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'ondate=' + ondate
+    }
+    return url
+  }
+
+  function renderItem(item: any) {
+    return (
+      <View>
+        {
+          viewType == 1 ?
+            <View style={{ width: LibStyle.width }} >
+              <BigbangSchedule_item2 {...item} onPress={() => LibNavigation.navigate('event/detail', { url: item.url })} />
+            </View>
+            :
+            <BigbangSchedule_item {...item} style={{ width: (LibStyle.width * 0.5) - 32, marginRight: 0, marginHorizontal: 20, marginVertical: 10 }} onPress={() => LibNavigation.navigate('event/detail', { url: item.url })} />
+        }
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }} >
+      <LibStatusbar style="dark" />
+      <View style={[{ flexDirection: 'row', backgroundColor: 'white', padding: 15, paddingVertical: 10, alignItems: 'center', paddingTop: LibStyle.STATUSBAR_HEIGHT + 17 }, LibStyle.elevation(2)]} >
+        <Pressable hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }} onPress={() => LibNavigation.back()} >
+          <LibPicture style={{ height: 27, width: 27 }} source={esp.assets('icons/ic_header_back.png')} />
+        </Pressable>
+        <View style={{ marginLeft: 15, borderRadius: 20, flexDirection: 'row', padding: 5, alignItems: 'center', backgroundColor: "#ffffff", borderStyle: "solid", borderWidth: 0.5, borderColor: "#c5c5c5", flex: 1, marginHorizontal: 12 }} >
+          <LibPicture style={{ height: 15, width: 15, marginLeft: 6, marginRight: 6 }} source={esp.assets('icons/ic_search.png')} />
+          <TextInput
+            ref={inputSearch}
+            style={{ fontFamily: "ArialBold", fontSize: 12, color: "#9e9e9e", flex: 1 }}
+            placeholder={esp.lang("event/list", "find_event")}
+            defaultValue={query}
+            onChangeText={(t) => { keyword = t }}
+            returnKeyType={'search'}
+            returnKeyLabel={'Search'}
+            placeholderTextColor={'#e5e5e5'}
+            onSubmitEditing={() => setQuery(keyword)}
+          />
+          {
+            query != '' &&
+            <Pressable onPress={() => {
+              inputSearch.current?.setNativeProps({ text: '' })
+              setQuery('')
+            }} style={{ marginRight: 6 }} >
+              <LibIcon name='close' />
+            </Pressable>
+          }
+        </View>
+      </View>
+      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }} >
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} >
+          <ComponentTouchable onPress={() => filterDialog.current?.show()} >
+            <View style={{ marginLeft: 17, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, borderColor: '#c5c5c5', borderRadius: 8 }} >
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", marginRight: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }} >{esp.lang("event/list", "text_filter")}</Text>
+              <LibIcon name={'chevron-down'} size={18} color={'#9b9b9b'} />
+            </View>
+          </ComponentTouchable>
+          {
+            ondate &&
+            <ComponentTouchable onPress={() => { setOndate(undefined) }} >
+              <View style={{ marginLeft: 10, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, borderColor: '#c5c5c5', borderRadius: 8 }} >
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", marginRight: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }} >{moment(ondate).localeFormat('DD MMMM YYYY')}</Text>
+                <LibIcon name={'close'} size={18} color={'#9b9b9b'} />
+              </View>
+            </ComponentTouchable>
+          }
+          {
+            location &&
+            <ComponentTouchable onPress={() => { setLocation(undefined) }} >
+              <View style={{ marginLeft: 10, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, borderColor: '#c5c5c5', borderRadius: 8 }} >
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", marginRight: 5, fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }} >{location?.detail}</Text>
+                <LibIcon name={'close'} size={18} color={'#9b9b9b'} />
+              </View>
+            </ComponentTouchable>
+          }
+        </ScrollView>
+        <View style={{ flex: 1 }} />
+        <ComponentTouchable onPress={() => setViewType(viewType == 1 ? 2 : 1)} >
+          <LibPicture source={esp.assets(viewType == 2 ? 'icons/ic_product_list.png' : 'icons/ic_event_grid.png')} style={{ marginRight: 20, marginLeft: 10, width: 19, height: 19, resizeMode: 'contain', marginVertical: 16 }} />
+        </ComponentTouchable>
+      </View>
+      <LibInfinite
+        url={buildUrl(url)}
+        key={buildUrl(url) + viewType.toString()}
+        errorView={(err: any) => (
+          <ComponentMessage message={err} />
+        )}
+        numColumns={viewType == 1 ? 1 : 2}
+        renderItem={renderItem}
+        LoadingView={
+          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
+            {
+              viewType == 1 ?
+                <>
+                  {
+                    new Array(7).fill('').map((x: any, i: number) => (
+                      <View key={i} style={applyStyle({ flexDirection: 'row', borderWidth: 1, borderRadius: 10, marginVertical: 10, marginHorizontal: 20, ...LibStyle.elevation(2) })} >
+                        <View style={applyStyle({ width: 154, height: 140, borderBottomLeftRadius: 10, borderTopLeftRadius: 10, overflow: 'hidden' })} >
+                          <View style={applyStyle({ height: 140, width: 154, backgroundColor: 'white' })} />
+                        </View>
+                        <View style={applyStyle({ flex: 1, padding: 12 })} >
+                          <View style={{ width: '70%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
+                          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 6, marginBottom: 5 })} >
+                            <LibIcon name="calendar" color={LibStyle.colorGreen} size={10} />
+                            <View style={{ width: '60%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
+                          </View>
+                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 6 }} />
+                          <View style={{ width: '100%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 10 }} />
+                          <View style={{ width: '100%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 5 }} />
+                          <View style={{ width: '100%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 5 }} />
+                        </View>
+                      </View>
+                    ))
+                  }
+                </>
+                :
+                <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
+                  {
+                    new Array(8).fill('').map((x: any, i: number) => (
+                      <View style={{ width: (LibStyle.width * 0.5) - 32, borderRadius: 10, marginRight: 0, marginHorizontal: 20, marginVertical: 10, borderWidth: 1 }} >
+                        <View style={applyStyle({ borderTopLeftRadius: 10, borderTopRightRadius: 10, overflow: 'hidden' })} >
+                          <View style={applyStyle({ height: 100, width: '100%', backgroundColor: 'white' })} />
+                        </View>
+                        <View style={{ width: '60%', height: 10, borderRadius: 10, backgroundColor: 'white', marginTop: 6, marginHorizontal: 8 }} />
+                        <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 6, paddingHorizontal: 8 })} >
+                          <LibIcon name="calendar" color={LibStyle.colorGreen} size={10} />
+                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white', marginLeft: 5 }} />
+                        </View>
+                        <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 6, paddingHorizontal: 8, paddingBottom: 10 })} >
+                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
+                        </View>
+                        <View style={applyStyle({ position: 'absolute', top: 12, right: 0, height: 17, borderTopLeftRadius: 10, paddingHorizontal: 5, alignItems: 'center', justifyContent: 'center', borderBottomLeftRadius: 10, backgroundColor: "rgba(0, 0, 0, 0.9)" })} >
+                          <View style={{ width: '50%', height: 10, borderRadius: 10, backgroundColor: 'white' }} />
+                        </View>
+                      </View>
+                    ))
+                  }
+                </View>
+
+            }
+          </LibSkeleton>
+        }
+      />
+      <ComponentSlidingup ref={filterDialog} >
+        <EventList_filter
+          onFilterChange={(loc: any, ondt: string, cat: any) => {
+            setLocation(loc)
+            setOndate(ondt)
+            setCategory(cat)
+          }}
+          onDismiss={() => { filterDialog?.current?.hide() }}
+          ondate={ondate}
+          category={category}
+          location={location}
+        />
+      </ComponentSlidingup>
+    </View>
+  )
+}

package/event/list_filter.tsx

@@ -0,0 +1,124 @@
+// withHooks
+// noPage
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { MarketExpander } from 'esoftplay/cache/market/expander/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import moment from 'esoftplay/moment';
+import React, { useEffect } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+export interface EventList_filterProps {
+  onDismiss: () => void,
+  onFilterChange: (location: any, ondate: any, category: any) => void,
+  location: any,
+  ondate: string,
+  category: string
+}
+moment().locale('id')
+
+export default function m(props: EventList_filterProps): any {
+  const [loc, setLoc] = useSafeState<any>(props.location)
+  const [ondate, setOndate] = useSafeState<any>(props.ondate)
+  const [allCat, setAllCat] = useSafeState<any>()
+  const [catId, setCatId] = useSafeState(props.category || '')
+
+  useEffect(() => {
+    new LibCurl('event_category', null,
+      (res, msg) => {
+        setAllCat(res)
+      }, (msg) => {
+
+      }, 1)
+  }, [])
+
+  function reset(): void {
+    setLoc(undefined)
+    setOndate(undefined)
+    setCatId('')
+    props.onFilterChange(undefined, undefined, undefined)
+    props.onDismiss()
+  }
+
+  function sendBack(): void {
+    props.onFilterChange(loc, ondate, catId)
+    props.onDismiss()
+  }
+
+  function renderAllCategory(item: any, i: number) {
+    const styleId_Z1WaMUx: any = { backgroundColor: item.id == catId ? '#f39c12' : '#f1f2f3', paddingHorizontal: 20, paddingVertical: 6, margin: 2.5, borderRadius: 4 }
+    const styleId_Z15cyGt: any = { color: item.id == catId ? 'white' : "#000" }
+    return (
+      <Pressable key={i}
+        onPress={() => { setCatId(item.id) }}
+        style={styleId_Z1WaMUx} >
+        <LibTextstyle text={(item?.title)} textStyle="footnote" style={styleId_Z15cyGt} />
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingTop: 23, paddingBottom: 17, paddingHorizontal: 19, maxHeight: LibStyle.height * 0.5 }} >
+      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#34495e", marginBottom: 20 }} >{esp.lang("event/list_filter", "text_filter")}</Text>
+      <ScrollView>
+        <ComponentTouchable onPress={() => LibNavigation.navigateForResult('user/location').then((location) => { setLoc(location) })} >
+          <View style={{ flexDirection: 'row', marginBottom: 20, alignItems: 'center' }} >
+            <View style={{ flex: 1 }} >
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" }} >{esp.lang("event/list_filter", "event_location")}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 3 }} >{loc && loc.detail || esp.lang("event/list_filter", "text_all_location")}</Text>
+            </View>
+            <LibIcon name={'chevron-right'} size={20} color={'#9b9b9b'} />
+          </View>
+        </ComponentTouchable>
+        <ComponentTouchable onPress={() => {
+          LibNavigation.navigateForResult('event/date_picker', { ranged: 'notranged', minDate: new Date(), maxDate: moment().add(5, 'years').localeFormat('YYYY-MM-DD') }).then((item) => {
+            setOndate(item?.date_start)
+          })
+        }}>
+          <View style={{ flexDirection: 'row', marginBottom: 20, alignItems: 'center' }} >
+            <View style={{ flex: 1 }} >
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" }} >{esp.lang("event/list_filter", "date")}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 3 }} >{ondate && moment(ondate).localeFormat('DD MMMM YYYY') || esp.lang("event/list_filter", "all_date")}</Text>
+            </View>
+            <LibIcon name={'chevron-right'} size={20} color={'#9b9b9b'} />
+          </View>
+        </ComponentTouchable>
+        {
+          allCat &&
+          <View style={{ marginBottom: 20 }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" }} >{esp.lang("event/list_filter", "event_category")}</Text>
+            <MarketExpander >
+              <View style={styleId_26qIWp} >
+                <Pressable
+                  onPress={() => { setCatId('') }}
+                  style={{ backgroundColor: catId == '' ? '#f39c12' : '#f1f2f3', paddingHorizontal: 20, paddingVertical: 6, margin: 2.5, borderRadius: 4 }} >
+                  <LibTextstyle text={esp.lang("event/list_filter", "text_all")} textStyle="footnote" style={{ color: catId == '' ? 'white' : "#000" }} />
+                </Pressable>
+                {
+                  allCat?.map?.(renderAllCategory)
+                }
+              </View>
+            </MarketExpander>
+          </View>
+        }
+      </ScrollView>
+      <View style={{ flexDirection: 'row', marginTop: 30 }} >
+        <ComponentTouchable style={{ height: 35, flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} onPress={reset} >
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: LibStyle.colorRed }} >{esp.lang("event/list_filter", "clear_filter")}</Text>
+        </ComponentTouchable>
+        <View style={{ width: 20 }} />
+        <ComponentTouchable style={{ height: 35, flex: 1, borderRadius: 17.5, backgroundColor: '#f39c12', alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} onPress={sendBack} >
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#ffffff" }} >{esp.lang("event/list_filter", "apply")}</Text>
+        </ComponentTouchable>
+      </View>
+    </View>
+  )
+}
+const styleId_26qIWp: any = { flexDirection: 'row', flexWrap: "wrap", marginTop: 10 }