esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/event/seat_map_test.tsx

@@ -0,0 +1,401 @@
+// withHooks
+
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventTap } from 'esoftplay/cache/event/tap/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/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 { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import React, { useEffect, useRef } from 'react';
+import { Dimensions, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
+import Svg, { G, Rect, Text as SVGText } from 'react-native-svg';
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+const AnimatedSVG = Animated.createAnimatedComponent(Svg);
+const AnimatedSVGText = Animated.createAnimatedComponent(SVGText);
+
+
+export default function m(props: any) {
+  const { dataTicket, url } = LibNavigation.getArgsAll<any>(props)
+  const qty = dataTicket?.qty
+  let numRows = useRef(0)
+  let numCols = useRef(0)
+  let selectedSeat = useRef<any>(null).current
+
+  const [seatNames, setSeatNames] = useLazyState<string[]>([])
+  const [data, setData] = useLazyState<number[]>([])
+  const [coordinates, setCoordinates] = useLazyState<string[]>([])
+  const [selectedSeatData, setSelectedSeatData] = useLazyState<any>({})
+
+
+  const squareSizeAnimated = useSharedValue(10)
+  const marginAnimated = useSharedValue(squareSizeAnimated.value * 0.25)
+  const boxSizeAnimated = useSharedValue(squareSizeAnimated.value + marginAnimated.value)
+  const rBAnimated = useSharedValue(squareSizeAnimated.value * 0.1)
+
+  function change(x: any) {
+    const val = x * 0.25
+    squareSizeAnimated.value = x
+    marginAnimated.value = val
+    boxSizeAnimated.value = x + val
+    rBAnimated.value = x * 0.1
+
+  }
+
+  function plus() {
+    let x = squareSizeAnimated.value * 3 / 2
+    if (x <= 50) {
+      change(x)
+    }
+  }
+
+  function min() {
+    let x = squareSizeAnimated.value * 2 / 3
+    if (x >= 10)
+      change(x)
+  }
+
+  function resetZoomAnim() {
+    const square = (Dimensions.get('screen').width / numRows.current) * 0.75
+    const margin = square * 0.25
+
+    squareSizeAnimated.value = square
+    marginAnimated.value = margin
+    boxSizeAnimated.value = square + margin
+    rBAnimated.value = square * 0.1
+  }
+
+  useEffect(() => {
+    new LibCurl(url + '?' + LibUtils.objectToUrlParam({
+      offset_row: 1, offset_column: 1
+    }), {
+      event_id: dataTicket.event_id,
+      price_id: dataTicket?.selected_ticket?.price_id,
+      ondate: dataTicket?.selected_ticket?.list?.ondate,
+      compact: 4
+    }, (res, msg) => {
+      numRows.current = res.seat_row
+      numCols.current = res.seat_column
+      resetZoomAnim()
+      setSeatNames(buildSeatNames(res.list.names, res.list.layout, setCoordinates))
+      const sizes = res.list.statuses;
+      const sizesArray: number[] = [];
+      sizes?.split(",").forEach((size: string) => {
+        if (size.includes('x')) {
+          const [v, x] = size?.split("x");
+          for (let i = 0; i < parseInt(v); i++) {
+            sizesArray.push(parseInt(x));
+          }
+        } else {
+          sizesArray.push(parseInt(size))
+        }
+      });
+      setData(sizesArray)()
+    })
+  }, []);
+
+  function toggleSeat(x: number, y: number) {
+    const cx = Math.floor(x / boxSizeAnimated.value)
+    const cy = Math.floor(y / boxSizeAnimated.value)
+    const index = (((cy * numCols.current) + cx))
+    const [_x, _y] = coordinates[index]?.split(":")
+
+    selectedSeat = {
+      x: _x,
+      y: _y,
+      index: index,
+      name: seatNames[index]
+    }
+    const countQty = data.filter((x) => x == -1).length
+    setData(LibObject.update(data, (old) => {
+      let out = old;
+      if (old == 0) {
+        if (countQty >= qty) {
+          LibToastProperty.show(esp.lang("event/seat_map", "max_seat", qty))
+        } else {
+          setSelectedSeatData(LibObject.set(selectedSeatData, selectedSeat)(selectedSeat.index))
+          out = -1;
+        }
+      }
+      if (old == -1) {
+        out = 0;
+        setSelectedSeatData(LibObject.set(selectedSeatData, () => null)(selectedSeat.index))
+      }
+      return out
+    })(selectedSeat.index))()
+  }
+
+  if (data.length == 0) {
+    return <LibLoading />
+  }
+
+  return (
+    <View style={styles.container}>
+      <EventHeader title={esp.lang("event/seat_map_test", "header_title")} />
+      <View style={{ alignItems: 'center', flex: 1 }} >
+        <ScrollView showsVerticalScrollIndicator style={{ marginTop: 12 }} >
+          <View style={{ height: 30, marginHorizontal: 16, backgroundColor: LibStyle.colorPrimary, marginBottom: 20, borderRadius: 5, justifyContent: 'center', alignItems: 'center' }} >
+            <Text style={{ color: 'white', fontWeight: 'bold' }} >{esp.lang("event/seat_map_test", "front")}</Text>
+          </View>
+          <ScrollView horizontal showsHorizontalScrollIndicator >
+            <EventTap onCoordinateGet={toggleSeat}>
+              <MatrixAnimated
+                data={data}
+                numRows={numRows}
+                // mapWidth={numCols.current * boxSizeAnimated.value + (marginAnimated.value)}
+                // mapHeight={numRows.current * boxSizeAnimated.value + (marginAnimated.value)}
+                seatNames={seatNames}
+                numCols={numCols}
+                boxSize={boxSizeAnimated}
+                margin={marginAnimated}
+                squareSize={squareSizeAnimated}
+                rB={rBAnimated}
+              />
+            </EventTap>
+          </ScrollView>
+        </ScrollView>
+      </View>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+        <Pressable onPress={min} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+          <LibIcon.SimpleLineIcons name='magnifier-remove' />
+        </Pressable>
+        <Pressable onPress={plus} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+          <LibIcon.SimpleLineIcons name='magnifier-add' />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+
+function MatrixAnimated(props: any) {
+  const { /* mapWidth, mapHeight, */ data, seatNames, numCols, numRows, boxSize, margin, squareSize, rB } = props
+  let col = 0
+  let row = 0
+
+  const svgProps = useAnimatedProps(() => {
+    return {
+      width: withTiming(numCols.current * boxSize.value + (margin.value)),
+      height: withTiming(numRows.current * boxSize.value + (margin.value)),
+    }
+  })
+
+  return (
+    <AnimatedSVG
+      animatedProps={svgProps}
+    // width={mapWidth} height={mapHeight}
+    >
+      {
+        data.map((status: number, i: number) => {
+          const c = seatNames[i]
+          const color = status == -1 ? "#8EF67B" : "#f1f1f1"
+          const colorDark = status == -1 ? "#15D71F" : "#aeaeae"
+          if (i % (numCols.current) == 0) {
+            col = i / (numCols.current)
+          }
+          row = i % numCols.current
+          // const xSize = row * (boxSize.value) + margin.value
+          // const ySize = col * (boxSize.value) + margin.value
+
+          const duration = 1000
+
+          const animatedPropsA = useAnimatedProps(() => {
+            return {
+              x: withTiming((row * (boxSize.value) + margin.value) + squareSize.value * 0.05, { duration }),
+              y: withTiming((col * (boxSize.value) + margin.value), { duration }),
+              rx: withTiming(rB.value, { duration }),
+              ry: withTiming(rB.value, { duration }),
+              width: withTiming(squareSize.value - (squareSize.value * 0.1), { duration }),
+              height: withTiming(squareSize.value, { duration }),
+            }
+          })
+
+          const animatedPropsB = useAnimatedProps(() => {
+            return {
+              x: withTiming((row * (boxSize.value) + margin.value), { duration }),
+              y: withTiming((col * (boxSize.value) + margin.value) + squareSize.value * 0.8, { duration }),
+              width: withTiming(squareSize.value, { duration }),
+              height: withTiming(squareSize.value * 0.2, { duration }),
+            }
+          })
+
+          const animatedPropsC = useAnimatedProps(() => {
+            return {
+              x: withTiming((row * (boxSize.value) + margin.value), { duration }),
+              y: withTiming((col * (boxSize.value) + margin.value) + squareSize.value * 0.5, { duration }),
+              width: withTiming(squareSize.value * 0.1, { duration }),
+              height: withTiming(squareSize.value * 0.5, { duration }),
+            }
+          })
+
+          const animatedPropsD = useAnimatedProps(() => {
+            return {
+              x: withTiming((row * (boxSize.value) + margin.value) + squareSize.value * 0.9, { duration }),
+              y: withTiming((col * (boxSize.value) + margin.value) + squareSize.value * 0.5, { duration }),
+              width: withTiming(squareSize.value * 0.1, { duration }),
+              height: withTiming(squareSize.value * 0.5, { duration }),
+            }
+          })
+
+          const animatedPropsE = useAnimatedProps(() => {
+            return {
+              x: withTiming([(row * (boxSize.value) + margin.value) + squareSize.value * 0.37], { duration }),
+              y: withTiming([(col * (boxSize.value) + margin.value) + squareSize.value * 0.6], { duration }),
+              fontSize: squareSize.value * 0.25,
+            }
+          })
+
+          const animatedPropsF = useAnimatedProps(() => {
+            return {
+              x: withTiming((row * (boxSize.value) + margin.value), { duration }),
+              y: withTiming((col * (boxSize.value) + margin.value), { duration }),
+              rx: withTiming(rB.value, { duration }),
+              ry: withTiming(rB.value, { duration }),
+              width: withTiming(squareSize.value, { duration }),
+              height: withTiming(squareSize.value, { duration }),
+            }
+          })
+
+          if (status == 0 || status == -1) {
+            return (
+              <G key={row + ":" + col}>
+                <AnimatedRect
+                  animatedProps={animatedPropsA}
+                  fill={color} />
+                <AnimatedRect
+                  rx={2}
+                  ry={2}
+                  animatedProps={animatedPropsB}
+                  fill={colorDark} />
+                <AnimatedRect
+                  rx={2}
+                  ry={2}
+                  animatedProps={animatedPropsC}
+                  fill={colorDark} />
+                <AnimatedRect
+                  rx={2}
+                  ry={2}
+                  animatedProps={animatedPropsD}
+                  fill={colorDark} />
+                <AnimatedSVGText
+                  animatedProps={animatedPropsE}
+                  fill="#060606"
+                  textAnchor={"middle"}
+                >{c}</AnimatedSVGText>
+              </G>
+            )
+          } else {
+            return (<AnimatedRect
+              key={row + ":" + col}
+              animatedProps={animatedPropsF}
+              fill={getColorByStatus(status)} />)
+          }
+        })}
+    </AnimatedSVG>
+  )
+}
+
+
+function getColorByStatus(statuses: number) {
+  const colors: any = {
+    0: "#fff",
+    1: "#9FA1A4",
+    2: "#6B71E6",
+    3: "#2EBBE8",
+    4: "#FFA601",
+    5: "#fff",
+    6: "#FF4866",
+  }
+  return colors[statuses]
+}
+
+function buildSeatNames(input: string, { letter_axis, letter_position }: any, cb?: (coordinates: string[]) => void) {
+  const output = [];
+  let coordinates = []
+  const sections = input?.split(",");
+
+
+  function renderNames(letter_axis: string, letter_position: number, x: number, y: number) {
+    coordinates.push(x + ':' + y)
+    if (letter_position == 0) {
+      if (letter_axis == 'x')
+        output.push(toBase26(x) + y)
+      else if (letter_axis == 'y') {
+        output.push(toBase26(y) + x)
+      }
+    } else {
+      if (letter_axis == 'x')
+        output.push(y + toBase26(x))
+      else if (letter_axis == 'y') {
+        output.push(x + toBase26(y))
+      }
+    }
+  }
+
+
+  for (let a = 0; a < sections.length; a++) {
+    if (sections[a].length == 0) {
+      output.push("")
+      coordinates.push('0:0')
+    } else {
+      const [x, y] = sections[a]?.split(":")
+      if (!x.includes("-") && !y.includes('-')) {
+        renderNames(letter_axis, letter_position, parseInt(x), parseInt(y))
+      } else {
+        const [xfrom, xto] = x?.split("-")
+        const [yfrom, yto] = y?.split("-")
+        if (xto) {
+          if (parseInt(xfrom) <= parseInt(xto)) {
+            for (let i1 = parseInt(xfrom); i1 <= parseInt(xto); i1++) {
+              renderNames(letter_axis, letter_position, i1, parseInt(y))
+            }
+          } else {
+            coordinates.push('0:0')
+            output.push("")
+          }
+        } else if (yto) {
+          if (parseInt(yfrom) <= parseInt(yto)) {
+            for (let i = parseInt(yfrom); i <= parseInt(yto); i++) {
+              renderNames(letter_axis, letter_position, i, parseInt(y))
+            }
+          } else {
+            coordinates.push('0:0')
+            output.push("")
+          }
+        }
+      }
+    }
+  }
+
+  if (cb) cb(coordinates)
+
+  return output
+}
+
+
+// Function to convert a number to base26
+function toBase26(num: number) {
+  let result = "";
+
+  while (num > 0) {
+    let remainder = (num - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    num = Math.floor((num - 1) / 26);
+  }
+
+  return result;
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/modules/event/section.tsx

@@ -0,0 +1,35 @@
+// withHooks
+
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventSectionArgs {
+
+}
+export interface EventSectionProps {
+  text: string,
+  textColor: string,
+  caption?: string,
+  icon?: string,
+  moreAction?: () => void
+}
+export default function m(props: EventSectionProps): 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 &&
+        <TouchableOpacity onPress={() => props.moreAction ? props.moreAction() : {}} >
+          <LibPicture style={{ height: 25, width: 25, resizeMode: 'contain' }} source={esp.assets(props.icon)} />
+        </TouchableOpacity>
+      }
+    </View>
+  )
+}

package/modules/event/section_menu.tsx

@@ -0,0 +1,40 @@
+// withHooks
+
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventSection_menuArgs {
+  
+}
+export interface EventSection_menuProps {
+  title?: string,
+  size?: "line" | "small" | "default",
+  smooth?: boolean,
+  footer?: boolean,
+  rightText?: string,
+  rightView?: any,
+  rightOnPress?: () => void
+  mandatory?: boolean,
+  mandatoryColor?: string
+}
+export default function m(props: EventSection_menuProps): any {
+  const size = props.size || "default"
+  const smooth = props.smooth
+  if (size == 'line') {
+    return <View style={{ height: 1, backgroundColor: "#f5f5f5" }} />
+  }
+  return (
+    <View style={{ backgroundColor: smooth ? "transparent" : "#f5f5f5", paddingHorizontal: 17, paddingTop: props.footer ? 3 : 12, paddingBottom: props.footer ? 12 : 5, height: size == 'small' ? 10 : undefined, borderTopWidth: 1, borderTopColor: smooth ? "transparent" : "#eee", borderBottomWidth: 1, borderBottomColor: smooth ? "transparent" : "#eee", flexDirection: "row" }} >
+      {
+        size == 'default' &&
+        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }} >
+          <LibTextstyle text={props.title || ''} textStyle={props.footer ? "caption2" : "footnote"} style={{ fontSize: 12, fontWeight: "bold", lineHeight: 13, textAlign: "left", color: "#03192a", fontFamily: 'ArialBold' }} />
+          {props.mandatory && <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: props.mandatoryColor ? props.mandatoryColor : "#d0021b", marginBottom: 8 }}> *</Text>}
+        </View>
+      }
+      {props.rightView ? props.rightView : props.rightText ? <TouchableOpacity disabled={!props.rightOnPress} onPress={props.rightOnPress}><LibTextstyle text={props.rightText || ''} textStyle={"footnote"} style={{ color: "#888", textAlign: "right" }} /></TouchableOpacity> : null}
+    </View>
+  )
+}

package/modules/event/secure_page.tsx

@@ -0,0 +1,33 @@
+// useLibs
+
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { useEffect } from 'react';
+import RNPrevent from "react-native-screenshot-prevent";
+
+export interface EventSecure_pageProps {
+
+}
+export default function m(): any {
+  const can_screencapture = UserClass.state().get('config', 'can_screencapture')
+  // const focus = useIsFocused()
+
+  useEffect(() => {
+    let subs: any
+    if (!__DEV__)
+      if (can_screencapture != 1) {
+        RNPrevent?.enabled?.(true)
+        RNPrevent?.enableSecureView?.()
+        // subs = RNPrevent?.addListener?.(() => { })
+      }
+    return () => {
+      if (!__DEV__)
+        if (can_screencapture != 1) {
+          RNPrevent?.disableSecureView?.()
+          RNPrevent?.enabled?.(false)
+          // subs?.remove?.()
+        }
+    }
+  }, [])
+
+  return null
+}

package/modules/event/share.ts

@@ -0,0 +1,20 @@
+// noPage
+import { Linking } from 'react-native'
+
+export default class m {
+
+  static facebook(url: string): void {
+    let base = 'https://www.facebook.com/sharer/sharer.php?u='
+    Linking.openURL(base + url)
+  }
+
+  static twitter(url: string): void {
+    let base = 'http://twitter.com/share?url='
+    Linking.openURL(base + url)
+  }
+
+  static whatsapp(url: string): void {
+    let base = 'https://api.whatsapp.com/send?text='
+    Linking.openURL(base + url)
+  }
+}

package/modules/event/sheet.tsx

@@ -0,0 +1,74 @@
+// withHooks
+
+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 { ScrollView, TouchableOpacity, View } from 'react-native';
+
+export interface EventSheetData {
+  text: string,
+  onPress: () => void,
+  textStyle?: any,
+  containerStyle?: any
+}
+
+export interface EventSheetProps {
+  _ref: React.Ref<LibSlidingup>,
+  options: EventSheetData[]
+  cancel?: EventSheetData,
+  title?: string,
+  detail?: string,
+}
+export default function m(props: EventSheetProps): any {
+  let { cancel, options, title, detail, _ref } = props
+
+  if (!cancel)
+    cancel = {
+      text: esp.lang("market/sheet", "cancel"), onPress: () => {
+        try {
+          // @ts-ignore
+          _ref?.current?.hide() || _ref.hide()
+        } catch (error) { }
+      }
+    }
+
+  return (
+    <LibSlidingup ref={_ref}>
+      <View style={{ alignItems: 'center', marginBottom: 17 }} >
+        <View style={{ width: LibStyle.width - 30, borderRadius: 13, overflow: 'hidden', }} >
+          <ScrollView showsVerticalScrollIndicator={false} style={{ borderRadius: 13, overflow: 'hidden', backgroundColor: "white", maxHeight: LibStyle.height * 0.5 }} >
+            <View style={{ marginVertical: title || detail ? 17 : 0 }} >
+              {title && <LibTextstyle textStyle="caption1" text={title} style={{ textAlign: 'center', fontWeight: "bold", color: "#888" }} />}
+              {detail && <LibTextstyle textStyle="caption1" text={detail} style={{ textAlign: 'center', color: "#888", marginTop: 5 }} />}
+            </View>
+            {
+              options.map((opt, i) => (
+                <TouchableOpacity
+                  key={i}
+                  style={{ paddingHorizontal: 17, paddingVertical: 15, alignItems: 'center', borderTopWidth: 1, borderTopColor: "#f4f4f4", ...opt.containerStyle }}
+                  onPress={() => {
+                    opt.onPress()
+                    try {
+                      // @ts-ignore
+                      _ref?.current?.hide() || _ref.hide()
+                    } catch (error) { }
+                  }} >
+                  <LibTextstyle text={opt.text} textStyle="body" style={opt.textStyle} />
+                </TouchableOpacity>
+              ))
+            }
+          </ScrollView>
+          <View style={{ borderRadius: 13, marginTop: 10, backgroundColor: "white" }} >
+            <TouchableOpacity
+              style={{ paddingHorizontal: 17, paddingVertical: 15, alignItems: 'center', ...cancel.containerStyle }}
+              onPress={cancel.onPress} >
+              <LibTextstyle text={cancel.text} textStyle="body" style={{ fontWeight: "bold", color: LibStyle.colorBlue, ...cancel.textStyle }} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </LibSlidingup>
+  )
+}

package/modules/event/slider.tsx

@@ -0,0 +1,46 @@
+// withHooks
+
+import { LibCarrousel_snap } from 'esoftplay/cache/lib/carrousel_snap/import';
+import { LibImage_shadow } from 'esoftplay/cache/lib/image_shadow/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import React from 'react';
+import { Pressable } from 'react-native';
+
+
+export interface EventSliderArgs {
+  
+}
+export interface EventSliderProps {
+  images: any[],
+  onIndexChange: (i: number) => void
+}
+export default function m(props: EventSliderProps): 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/event/slidingup.tsx

@@ -0,0 +1,37 @@
+// withHooks 
+// noPage
+import _global from 'esoftplay/_global';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import useGlobalState from 'esoftplay/global';
+import React, { useRef } from 'react';
+
+export interface EventSlidingupProps {
+
+}
+
+
+
+const state = useGlobalState(undefined)
+
+export function add(view: any): void {
+  state.set(view)
+}
+
+export function show() {
+  _global.event_slidingup_ref?.current?.show?.()
+}
+
+export function hide(): void {
+  _global.event_slidingup_ref?.current?.hide?.()
+}
+
+export default function m(props: EventSlidingupProps): any {
+  _global.event_slidingup_ref = useRef<LibSlidingup>(null)
+  const view = state.useSelector((s) => s)
+
+  return (
+    <LibSlidingup ref={_global.event_slidingup_ref} >
+      {view}
+    </LibSlidingup>
+  )
+}