esoftplay 0.0.105 → 0.0.106

package/bin/build.js

@@ -307,7 +307,6 @@ export default function App() {
 			'expo-document-picker',
 			'expo-file-system',
 			'expo-font',
-			'expo-image-crop',
 			'expo-image-manipulator',
 			'expo-image-picker',
 			'expo-linear-gradient',

package/bin/router.js

@@ -375,7 +375,7 @@ declare module "esoftplay" {
     function reducer(): any;
     function versionName(): string;
     function navigations(): any;
-    function isDebug(): boolean;
+    function isDebug(message: string): boolean;
     function lang(moduleTask: string, langName: string, ...string: string[]): string;
     function langId(): string;
     function home(): any;

package/esp.ts

@@ -4,7 +4,9 @@ import routers from './cache/routers';
 import { Platform } from 'react-native';
 import { _global, esp, LibLocale, UserRoutes } from 'esoftplay';
 import { LogBox } from 'react-native';
+import Constants from 'expo-constants';
 LogBox.ignoreLogs(['YellowBox has been replaced with LogBox. Please call LogBox.ignoreLogs() instead.']);
+LogBox.ignoreLogs(['VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.']);
 let app = require('../../app.json');
 let conf = require('../../config.json');
 let lconf = require('../../config.live.json');
@@ -40,7 +42,7 @@ export default (() => {
   }
 
   function versionName(): string {
-    return (Platform.OS == 'android' ? appjson().expo?.android?.versionCode : appjson()?.expo?.ios?.buildNumber) + '-' + config('publish_id')
+    return (Platform.OS == 'android' ? Constants.manifest.android.versionCode : Constants.manifest.ios.buildNumber) + '-' + config('publish_id')
   }
 
   function config(param?: string, ...params: string[]): any {
@@ -60,7 +62,7 @@ export default (() => {
     return out;
   }
 
-  function isDebug(): boolean {
+  function isDebug(message: string): boolean {
     if (!lconf) {
       return false
     }

package/global.ts

@@ -28,13 +28,18 @@ _global.useGlobalUserDelete = {}
 class Context {
   idx = 0
   increment = () => this.idx++
-  reset = () => this.idx = 0
+  reset = () => {
+    this.idx = 0
+  }
 }
 
 export const globalIdx = new Context()
 
 const n = () => {
   let subscriber = {}
+  let debouceTime
+  let persistKeys: any = {}
+
   function m<T>(initValue: T, o?: useGlobalOption): useGlobalReturn<T> {
     const _idx = globalIdx.idx
     if (!subscriber[_idx])
@@ -43,10 +48,7 @@ const n = () => {
 
     // rehidryte instant
     if (o?.persistKey) {
-      AsyncStorage.getItem(o.persistKey).then((p) => {
-        if (p)
-          set(JSON.parse(p))
-      })
+      rehidryte(o.persistKey, (p) => { if (typeof p == 'string') set(JSON.parse(p)) })
     }
 
     /* register to userData to automatically reset state and persist */
@@ -137,6 +139,24 @@ const n = () => {
     globalIdx.increment()
     return { useState, get, set, useSelector, reset: del, connect: _connect };
   }
+
+  function debounce(func: () => any, delay: number): void {
+    clearTimeout(debouceTime)
+    debouceTime = setTimeout(() => func(), delay)
+  }
+
+  function rehidryte(key: string, func: (e: string) => void) {
+    persistKeys[key] = func
+    debounce(() => {
+      AsyncStorage.multiGet(Object.keys(persistKeys), (e, v) => {
+        if (v && !e) {
+          Object.entries(persistKeys).forEach((item: any, idx) => {
+            item?.[1]?.(v[item?.[0]])
+          })
+        }
+      })
+    }, 50)
+  }
   return m
 }
 

package/modules/content/category_list.tsx

@@ -34,7 +34,8 @@ export default function m(props: ContentCategory_listProps): any {
 
   return (
     <View style={{}} >
-      <ScrollView horizontal style={{ margin: 0 }} >
+      <ScrollView horizontal nestedScrollEnabled
+        style={{ margin: 0 }} >
         {
           menu?.list?.[0]?.filter?.((row: any) => row.par_id == id).map((row: any) => (
             <Pressable

package/modules/content/gallery.tsx

@@ -1,7 +1,7 @@
 // withHooks
 
 import React, { useRef } from 'react';
-import { Image, Pressable, View, ScrollView } from 'react-native';
+import { Pressable, ScrollView } from 'react-native';
 import Gallery from 'react-native-awesome-gallery';
 import { LibIcon, LibNavigation, LibStyle, LibUtils } from 'esoftplay'
 
@@ -24,21 +24,17 @@ export default function m(props: ContentGalleryProps): any {
       description: ""
     })
   }
+
   return (
-    <ScrollView scrollEnabled={false} style={{ flex: 1, backgroundColor: 'black', overflow: 'hidden' }} >
+    <ScrollView nestedScrollEnabled
+      style={{ flex: 1, backgroundColor: 'black' }} >
       <Gallery
         data={images.map((image) => (image?.image))}
         onSwipeToClose={() => {
           if (scale == 1)
             LibNavigation.back()
         }}
-        maxScale={10}
-        renderItem={(renderItemInfo) => {
-          Image.getSize(String(renderItemInfo.item), (w, h) => {
-            renderItemInfo.setImageDimensions({ width: w, height: h })
-          })
-          return <Image style={{ flex: 1, resizeMode: 'contain' }} source={{ uri: String(renderItemInfo.item) }} />
-        }}
+        maxScale={6}
         disableTransitionOnScaledImage
         onScaleChange={(sc) => scale = sc}
         doubleTapScale={4}

package/modules/lib/collaps.tsx

@@ -1,97 +1,58 @@
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity, Animated } from 'react-native';
-import { LibComponent, LibStyle, LibTheme, esp } from 'esoftplay';
-const { elevation } = LibStyle;
+// withHooks
 
+import { useSafeState } from 'esoftplay';
+import React, { useCallback } from 'react';
+import { Pressable } from 'react-native';
+import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+
+export interface LibCollapsArgs {
+}
 export interface LibCollapsProps {
   show?: boolean,
   header: (isShow: boolean) => any,
   children: any,
   style?: any
 }
-export interface LibCollapsState {
-  expanded: boolean,
-  animation: any,
-  maxHeight: number,
-  minHeight: number,
-}
-
-
-export default class m extends LibComponent<LibCollapsProps, LibCollapsState> {
-  constructor(props: LibCollapsProps) {
-    super(props);
-    this.state = {
-      expanded: !!props.show,
-      animation: 10000,
-      maxHeight: 0,
-      minHeight: 0,
-    };
-    this.toggle = this.toggle.bind(this)
-    this._setMaxHeight = this._setMaxHeight.bind(this)
-    this._setMinHeight = this._setMinHeight.bind(this)
-    this.initState = this.initState.bind(this)
-  }
-
-  initState(): void {
-    let height = this.state.expanded ? (this.state.maxHeight + this.state.minHeight) : this.state.minHeight
-    this.setState({
-      animation: new Animated.Value(height)
+export default function m(props: LibCollapsProps): any {
+  const animHeight = useSharedValue(-1)
+  const bodyHeight = useSharedValue(1)
+  const [expand, setExpand] = useSafeState(props.show)
+
+  const heightStyle = useAnimatedStyle(() => {
+    return {
+      overflow: 'hidden',
+      height: interpolate(animHeight.value,
+        [0, 1, 2],
+        [0, bodyHeight.value, bodyHeight.value]),
+      opacity: interpolate(animHeight.value,
+        [-1, 0],
+        [0, 1])
+    }
+  })
+
+  const toggle = useCallback(() => {
+    animHeight.value = withTiming(animHeight.value == 0 ? 1 : 0, {
+      easing: Easing.sin
     })
-  }
-
-  toggle(): void {
-    let initialValue = this.state.expanded ? (this.state.maxHeight + this.state.minHeight) : this.state.minHeight;
-    let finalValue = this.state.expanded ? this.state.minHeight : (this.state.maxHeight + this.state.minHeight);
-
-    this.setState({
-      expanded: !this.state.expanded
-    });
-
-    this.state.animation.setValue(initialValue);
-    Animated.spring(
-      this.state.animation,
-      {
-        toValue: finalValue,
-        useNativeDriver: false
-      }
-    ).start();
-  }
-
-  _setMaxHeight(event: any): void {
-    if (this.state.maxHeight == 0) {
-      this.setState({ maxHeight: event.nativeEvent.layout.height + 15 }, () => {
-        if (this.state.minHeight > 0 && this.state.maxHeight > 0) {
-          this.initState()
-        }
-      })
-    };
-  }
-
-  _setMinHeight(event: any): void {
-    if (this.state.minHeight == 0)
-      this.setState(
-        {
-          minHeight: event.nativeEvent.layout.height,
-        }, () => {
-          if (this.state.minHeight > 0 && this.state.maxHeight > 0) {
-            this.initState()
-          }
-        })
-  }
-
-  render(): any {
-    return (
+    setExpand(animHeight.value != 1)
+  }, [])
+
+  return (
+    <Animated.View style={{ overflow: 'hidden' }} >
+      <Pressable onPress={toggle} >
+        {props.header(expand)}
+      </Pressable>
       <Animated.View
-        style={[{ overflow: 'hidden', backgroundColor: LibTheme._colorBackgroundCardPrimary(), marginBottom: 1, height: this.state.animation, opacity: this.state.animation == 10000 ? 0 : 1 }, this.props.style ? StyleSheet.flatten(this.props.style) : {}, elevation(0)]} >
-        <TouchableOpacity onPress={this.toggle} >
-          <View onLayout={this._setMinHeight} >
-            {this.props.header(this.state.expanded)}
-          </View>
-        </TouchableOpacity>
-        <View onLayout={this._setMaxHeight}>
-          {this.props.children}
-        </View>
+        onLayout={({ nativeEvent: { layout: { height } } }) => {
+          if (height && animHeight.value == -1) {
+            bodyHeight.value = height + 5
+            animHeight.value = props.show ? 1 : 0
+          }
+        }}
+        style={[heightStyle]}>
+        {props.children}
       </Animated.View>
-    );
-  }
+    </Animated.View>
+  )
 }

package/modules/lib/curl.ts

@@ -392,6 +392,6 @@ export default class ecurl {
   }
 
   getTimeByTimeZone(timeZone: string): number {
-    return moment(new Date()).tz(timeZone).valueOf();
+    return moment(new Date()).tz(timeZone).toMiliseconds();
   }
 }

package/modules/lib/image.tsx

@@ -24,7 +24,6 @@ export interface LibImageProps {
   show?: boolean,
   image?: string,
   maxDimension?: number,
-  editor?: boolean,
 }
 
 export interface LibImageState {
@@ -36,7 +35,6 @@ export interface LibImageState {
 
 export interface LibImageGalleryOptions {
   crop?: LibImageCrop
-  editor?: boolean,
   maxDimension?: number,
   multiple?: boolean,
   max?: number
@@ -45,13 +43,11 @@ export interface LibImageGalleryOptions {
 export interface LibImageCameraOptions {
   crop?: LibImageCrop
   maxDimension?: number,
-  editor?: boolean
 }
 
 const initState = {
   show: false,
   image: undefined,
-  editor: false,
   maxDimension: 1280
 }
 const state = useGlobalState(initState)
@@ -63,16 +59,14 @@ class m extends LibComponent<LibImageProps, LibImageState> {
       ...state.get(),
       image: image,
       show: false,
-      editor: false,
     })
   }
 
-  static show(editor?: boolean): void {
+  static show(): void {
     state.set({
       ...state.get(),
       show: true,
       image: undefined,
-      editor: editor,
     })
   }
 
@@ -96,20 +90,11 @@ class m extends LibComponent<LibImageProps, LibImageState> {
   async takePicture(): Promise<void> {
     if (this.camera) {
       this.setState({ loading: true })
-      const { editor } = this.props
       let result = await this.camera.takePictureAsync({})
       this.setState({ image: result, loading: false })
-      if (editor) {
-        m.showEditor(result.uri, (d) => {
-          this.setState({ image: d, loading: false })
-        })
-      }
     }
   }
 
-  static showEditor(uri: string, result: (x: any) => void): void {
-    LibNavigation.navigateForResult("lib/image_edit", { uri }, 81793).then(result)
-  }
   static showCropper(uri: string, forceCrop: boolean, ratio: string, message: string, result: (x: any) => void): void {
     LibNavigation.navigateForResult("lib/image_crop", { image: uri, forceCrop, ratio, message }, 81793).then(result)
   }
@@ -143,18 +128,11 @@ class m extends LibComponent<LibImageProps, LibImageState> {
                 m.setResult(imageUri)
                 _r(imageUri)
               })
-            } else
-              if (options && options.editor) {
-                m.showEditor(result.uri, async (x) => {
-                  let imageUri = await m.processImage(x, options?.maxDimension)
-                  m.setResult(imageUri)
-                  _r(imageUri)
-                })
-              } else {
-                let imageUri = await m.processImage(result, options?.maxDimension)
-                m.setResult(imageUri)
-                _r(imageUri)
-              }
+            } else {
+              let imageUri = await m.processImage(result, options?.maxDimension)
+              m.setResult(imageUri)
+              _r(imageUri)
+            }
           }
         })
         // }
@@ -190,19 +168,11 @@ class m extends LibComponent<LibImageProps, LibImageState> {
                   m.setResult(imageUri)
                   _r(imageUri)
                 })
-              } else
-                if (options?.editor == true) {
-                  m.showEditor(x.uri, async (x) => {
-                    let imageUri = await m.processImage(x, options?.maxDimension)
-                    m.setResult(imageUri)
-                    _r(imageUri)
-                  })
-                  return
-                } else {
-                  let imageUri = await m.processImage(x, options?.maxDimension)
-                  m.setResult(imageUri)
-                  _r(imageUri)
-                }
+              } else {
+                let imageUri = await m.processImage(x, options?.maxDimension)
+                m.setResult(imageUri)
+                _r(imageUri)
+              }
             }
           })
           return
@@ -215,12 +185,7 @@ class m extends LibComponent<LibImageProps, LibImageState> {
                 m.setResult(imageUri)
                 _r(imageUri)
               })
-            } else if (options?.editor == true)
-              m.showEditor(x[0].uri, async (x) => {
-                let imageUri = await m.processImage(x, options?.maxDimension)
-                m.setResult(imageUri)
-                _r(imageUri)
-              })
+            }
             return
           }
           let a: string[] = []
@@ -308,7 +273,7 @@ class m extends LibComponent<LibImageProps, LibImageState> {
     return (
       <state.connect
         render={(props) => {
-          const { show, editor, maxDimension } = props
+          const { show, maxDimension } = props
           if (!show) return null
           return (
             <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} >

package/modules/lib/image_multi.tsx

@@ -94,6 +94,7 @@ export default function m(props: LibImage_multiProps): any {
           showsVerticalScrollIndicator={false}
           initialNumToRender={5}
           maxToRenderPerBatch={10}
+          nestedScrollEnabled
           windowSize={5}
           style={{ paddingHorizontal: 0.5, flex: 1 }}
           onEndReached={() => getPhotos()}

package/modules/lib/menu.tsx

@@ -41,6 +41,7 @@ export default class emenu extends LibComponent<LibMenuProps, LibMenuState> {
       <FlatList
         style={style}
         data={data}
+        nestedScrollEnabled
         keyExtractor={(item: any) => (item.id).toString()}
         renderItem={({ item }: any) => <LibMenusub {...item} selectedId={this.props.selectedId} data={this.props.data} parent={parent} onClick={(item: any) => this.onItemSelected(item)} />}
       />

package/modules/lib/object.ts

@@ -1,7 +1,66 @@
-import { fastFilter } from './../../fast';
 import { update } from "immhelper";
 
 export default class m {
+  _value = undefined
+
+  constructor(array: any) {
+    this._value = array
+    this.value = this.value.bind(this)
+    this.push = this.push.bind(this)
+    this.unset = this.unset.bind(this)
+    this.unshift = this.unshift.bind(this)
+    this.set = this.set.bind(this)
+    this.splice = this.splice.bind(this)
+    this.update = this.update.bind(this)
+    this.assign = this.assign.bind(this)
+    this.cursorBuilder = this.cursorBuilder.bind(this)
+  }
+
+  cursorBuilder(command: string, array: any, value: any, ...values: any[]): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return (cursor?: string | number, ...cursors: (string | number)[]) => {
+      let pathToUpdate = [cursor, ...cursors].filter(x => x != undefined).join('.')
+      let allValues = [value, ...values].filter(x => x != undefined)
+      let spec = {}
+      if (pathToUpdate != '')
+        spec = { [pathToUpdate]: [command, ...allValues] }
+      else
+        spec = [command, ...allValues]
+      this._value = update(array, spec)
+      return this
+    }
+  }
+
+  push(value?: any, ...values: any[]): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return this.cursorBuilder("push", this._value, value, ...values)
+  }
+
+  unshift(value?: any, ...values: any[]): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return this.cursorBuilder("unshift", this._value, value, ...values)
+  }
+
+  splice(index: number, deleteCount: number, value?: any, ...values: any[]): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return this.cursorBuilder("splice", this._value, index, deleteCount, value, ...values)
+  }
+  unset(index: number | string, ...indexs: (string | number)[]): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return this.cursorBuilder("unset", this._value, index, ...indexs)
+  }
+
+  set(value: any): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return this.cursorBuilder("set", this._value, value)
+  }
+
+  update(callback: (lastValue: any) => any): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return this.cursorBuilder("batch", this._value, callback)
+  }
+
+  assign(obj1: any): (cursor?: string | number, ...cursors: (string | number)[]) => this {
+    return this.cursorBuilder("assign", this._value, obj1)
+  }
+
+  value(): any {
+    return this._value
+  }
+
   static push(array: any, value?: any, ...values: any[]): (cursor?: string | number, ...cursors: (string | number)[]) => any {
     return cursorBuilder("push", array, value, ...values)
   }

package/modules/lib/pin.tsx

@@ -1,6 +1,6 @@
 // withHooks
 
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { View, TextInput } from 'react-native';
 
 
@@ -8,38 +8,52 @@ export interface LibPinProps {
   length: number,
   onChangePin: (pin: string) => void
   boxStyle?: any,
+  overrideKeyboard?: boolean,
+  pinValue?: string,
   pinStyle?: any
 }
 export default function m(props: LibPinProps): any {
   const [pin, setPin] = useState<string[]>([])
   const input = useRef<TextInput>(null)
+
+  useEffect(() => {
+    setPin(props?.pinValue?.split?.(''))
+    props.onChangePin(props?.pinValue || '')
+  }, [props.pinValue])
+
   return (
     <View>
       <View style={{ alignItems: 'center', marginTop: 20 }} >
         <View style={{ height: 70 }} >
           <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} >
             {
-              new Array(props.length).fill('').map((_, __) => (
-                <View key={__} style={{ height: 40, width: 40, margin: 5, borderRadius: 4, borderWidth: 0.5, borderColor: '#444', ...props.boxStyle, alignItems: 'center', justifyContent: 'center' }}>
-                  {!!pin[__] && <View style={{ height: 10, width: 10, borderRadius: 5, backgroundColor: '#444', ...props.pinStyle }} />}
+              new Array(props.length).fill('').map((_, i) => (
+                <View key={i} style={{ height: 40, width: 40, margin: 5, borderRadius: 4, borderWidth: 0.5, borderColor: '#444', ...props.boxStyle, alignItems: 'center', justifyContent: 'center' }}>
+                  {!!pin?.[i] && <View style={{ height: 10, width: 10, borderRadius: 5, backgroundColor: '#444', ...props.pinStyle }} />}
                 </View>
               ))
             }
           </View>
-          <View style={{ flexDirection: 'row', width: 60 * props.length, alignSelf: 'center', justifyContent: 'center' }} >
-            <TextInput
-              ref={input}
-              contextMenuHidden={true}
-              keyboardType='numeric'
-              style={{ opacity: 0, marginLeft: -400, width: 400 + 60 * props.length, fontSize: 0, height: 60, marginTop: -40, alignSelf: 'flex-start' }} autoFocus onChangeText={(t: string) => {
-                if (t.length == props.length) {
-                  input.current!.blur()
-                }
-                let _t: string[] = t.split('')
-                setPin(_t)
-                props.onChangePin(t)
-              }} maxLength={props.length} />
-          </View>
+          {
+            !props.overrideKeyboard &&
+            <View style={{ flexDirection: 'row', width: 60 * props.length, alignSelf: 'center', justifyContent: 'center' }} >
+              <TextInput
+                ref={input}
+                contextMenuHidden={true}
+                keyboardType='numeric'
+                secureTextEntry
+                style={{ opacity: 0, marginLeft: -400, width: 400 + 60 * props.length, fontSize: 0, height: 60, marginTop: -40, alignSelf: 'flex-start' }}
+                autoFocus 
+                onChangeText={(t: string) => {
+                  if (t.length == props.length) {
+                    input.current!.blur()
+                  }
+                  let _t: string[] = t.split('')
+                  setPin(_t)
+                  props.onChangePin(t)
+                }} maxLength={props.length} />
+            </View>
+          }
         </View>
       </View>
     </View>

package/modules/lib/scroll.tsx

@@ -89,6 +89,7 @@ export default class escroll extends LibComponent<LibScrollProps, LibScrollState
           ref={this.flatscroll}
           scrollEventThrottle={64}
           showsHorizontalScrollIndicator={false}
+          nestedScrollEnabled
           showsVerticalScrollIndicator={false}
           {...this.props}
           refreshControl={this.props.onRefresh && <RefreshControl onRefresh={this.props.onRefresh} refreshing={false} />} >

package/modules/lib/skeleton.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react';
+import { LibComponent, LibSkeleton } from 'esoftplay';
+import { View } from 'react-native';
+import { LibStyle } from 'esoftplay';
+import { LinearGradient } from 'expo-linear-gradient';
+import MaskedView from '@react-native-masked-view/masked-view';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming } from 'react-native-reanimated';
+
+
+export interface LibSkeletonProps {
+
+}
+export interface LibSkeletonState {
+
+}
+export interface LibSkeletonStatic {
+  size: number
+}
+
+
+export default class m extends LibComponent<LibSkeletonProps, LibSkeletonState> {
+  constructor(props: LibSkeletonProps) {
+    super(props);
+  }
+
+  static BoxFull(props: LibSkeletonStatic): any {
+    return <View style={{ margin: '2.5%', marginVertical: 8, alignSelf: 'center', backgroundColor: 'black', height: props.size, width: '95%', borderRadius: 10 }} />
+  }
+
+  static BoxFlex(props: LibSkeletonStatic): any {
+    return (<View style={{ margin: '2.5%', marginVertical: 8, backgroundColor: 'black', flexGrow: 1, height: props.size, borderRadius: 10 }} />)
+  }
+
+  static BoxHalf(props: LibSkeletonStatic): any {
+    return <View style={{ margin: '2.5%', marginVertical: 8, backgroundColor: 'black', height: props.size, width: '45%', borderRadius: 10 }} />
+  }
+
+  static Box(props: LibSkeletonStatic): any {
+    return <View style={{ margin: '2.5%', marginVertical: 8, backgroundColor: 'black', height: props.size, width: props.size, borderRadius: 10 }} />
+  }
+
+  static Circle(props: LibSkeletonStatic): any {
+    return <View style={{ margin: '2.5%', marginVertical: 8, backgroundColor: 'black', height: props.size, width: props.size, borderRadius: props.size * 0.5 }} />
+  }
+
+  render(): any {
+    return (
+      <Skeleton {...this.props} />
+    )
+  }
+}
+
+export interface LibSkeletonArgs {
+
+}
+export interface LibSkeletonProps {
+  duration?: number
+  reverse?: boolean,
+  colors?: string[],
+  backgroundStyle?: any,
+  children?: any
+}
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
+function Skeleton(props: LibSkeletonProps): any {
+  const offset = useSharedValue(-LibStyle.width * 0.75)
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: offset.value }]
+    }
+  })
+
+  useEffect(() => {
+    offset.value = -LibStyle.width * 0.75
+    offset.value = withRepeat(withTiming(LibStyle.width * 0.5, { duration: props.duration || 1000 }), -1, props.reverse ?? false)
+  }, [])
+
+
+  return (
+    <View style={[{ flex: 1 }, props?.backgroundStyle]} >
+      <MaskedView
+        style={{ flex: 1 }}
+        maskElement={
+          props.children ?
+            <View style={{ flex: 1 }} >
+              {props.children}
+            </View>
+            :
+            <View style={{ flex: 1, justifyContent: 'center' }} >
+              <View>
+                <View style={{ marginTop: 24, backgroundColor: 'black', height: LibStyle.width * 9 / 16, width: LibStyle.width }} >
+                </View>
+              </View>
+            </View>
+        }>
+        <AnimatedLinearGradient
+          style={[{ height: '100%', width: LibStyle.width * 3.5, alignSelf: 'center', }, animatedStyle]}
+          colors={props.colors ?? ['#f1f2f3', '#f1f2f3', '#f1f2f3', '#f1f2f3', '#f1f2f3', '#f1f2f3', '#dedede', '#f1f2f3', '#f1f2f3', '#f1f2f3', '#f1f2f3', '#f1f2f3', '#f1f2f3']}
+          start={{ x: 0, y: 1 }}
+          end={{ x: 1, y: 1 }}
+        />
+      </MaskedView>
+    </View>
+  )
+}

package/modules/lib/slidingup.tsx

@@ -34,14 +34,16 @@ export default class m extends LibComponent<LibSlidingupProps, LibSlidingupState
     } else if (prevState.show == true && this.state.show == false) {
       BackHandler.removeEventListener("hardwareBackPress", this.handleBack)
       this.props?.onChangeShow?.(this.state.show)
-    }      
+    }
   }
 
   show(): void {
     Keyboard.dismiss()
     if (this.props.children) {
       this.setState({ show: true }, () => {
-        this._toggleSubview(true)
+        setTimeout(() => {
+          this._toggleSubview(true)
+        }, 1);
       })
     }
   }

package/modules/lib/tabs.tsx

@@ -86,6 +86,7 @@ export default class m extends LibComponent<LibTabsProps, LibTabsState> {
         horizontal
         showsHorizontalScrollIndicator={false}
         scrollEnabled={!!this.props.swipeEnabled}
+        nestedScrollEnabled
         scrollEventThrottle={16}
         onScroll={this.changePage}
         pagingEnabled

package/modules/lib/utils.ts

@@ -3,7 +3,7 @@ import moment from "../../moment"
 import { Linking, Platform, Share } from "react-native"
 import { esp, LibToastProperty, _global, createCache } from "esoftplay"
 import shorthash from "shorthash"
-import Clipboard from 'expo-clipboard'
+import * as Clipboard from 'expo-clipboard';
 const Buffer = require('buffer/').Buffer
 const isEqual = require("react-fast-compare");
 

package/modules/lib/version.tsx

@@ -14,7 +14,7 @@ export interface LibVersionState {
 export default class m extends LibComponent<LibVersionProps, LibVersionState> {
 
   static appVersion(): string {
-    let version: any = Constants.nativeBuildVersion
+    let version: any = (Platform.OS == 'android' ? Constants.manifest.android.versionCode : Constants.manifest.ios.buildNumber)
     return version
   }
 

package/modules/user/index.tsx

@@ -1,11 +1,11 @@
 // withHooks
 
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo } from "react";
 //@ts-ignore
 import Navs from "../../cache/navs";
-import { View, ImageBackground, InteractionManager } from "react-native";
+import { View } from "react-native";
 import * as Font from "expo-font";
-import { esp, _global, UserClass, LibWorker, UseDeeplink, LibUpdaterProperty, LibWorkloop, LibNet_status, LibDialog, LibStyle, LibImage, LibProgress, UserMain, LibToast, useSafeState, LibVersion, UserRoutes, LibWorkview } from 'esoftplay';
+import { esp, _global, UserClass, LibWorker, UseDeeplink, LibUpdaterProperty, LibWorkloop, LibNet_status, LibDialog, LibStyle, LibImage, LibProgress, UserLoading, UserMain, LibToast, useSafeState, LibVersion, UserRoutes, LibWorkview } from 'esoftplay';
 import firebase from 'firebase';
 
 export interface UserIndexProps {
@@ -33,11 +33,12 @@ function setFonts(): Promise<void> {
   })
 }
 
+
 export default function m(props: UserIndexProps): any {
   const [loading, setLoading] = useSafeState(true)
   const user = UserClass.state().useSelector(s => s)
-  //@ts-ignore
   UseDeeplink()
+  //@ts-ignore
   const initialState = __DEV__ ? _global.nav__state : undefined
 
   function handler(currentState: any): void {
@@ -50,18 +51,10 @@ export default function m(props: UserIndexProps): any {
 
   useMemo(() => {
     if (esp.config('firebase')) {
-      InteractionManager.runAfterInteractions(() => {
-        try {
-          firebase.initializeApp(esp.config('firebase'));
-        } catch (error) {
-          console.warn(error)
-        }
-        try {
-          firebase.auth().signInAnonymously()
-        } catch (error) {
-          console.warn(error)
-        }
-      })
+      if (!firebase.apps.length) {
+        firebase.initializeApp(esp.config('firebase'));
+        firebase.auth().signInAnonymously()
+      }
     }
     UserClass.isLogin(async () => {
       await setFonts()
@@ -83,7 +76,7 @@ export default function m(props: UserIndexProps): any {
     }
   }, [loading])
 
-  if (loading) return <ImageBackground source={esp.assets('splash.gif') || esp.assets('splash.png')} style={{ flex: 1 }} />
+  if (loading) return <UserLoading />
   return (
     <>
       <View style={{ flex: 1 }}>

package/modules/user/loading.tsx

@@ -0,0 +1,15 @@
+// withHooks
+
+import React from 'react';
+import { ImageBackground } from "react-native";
+import { esp } from 'esoftplay'
+
+export interface UserLoadingArgs {
+
+}
+export interface UserLoadingProps {
+
+}
+export default function m(props: UserLoadingProps): any {
+  return <ImageBackground source={esp.assets('splash.gif') || esp.assets('splash.png')} style={{ flex: 1 }} />
+}

package/moment.ts

@@ -4,6 +4,8 @@ import dayjs from 'dayjs'
 const utc = require('dayjs/plugin/utc')
 const timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
 const relativeTime = require('dayjs/plugin/relativeTime')
+var duration = require('dayjs/plugin/duration')
+dayjs.extend(duration)
 dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(relativeTime)
@@ -49,10 +51,15 @@ export default function moment(date?: string | Date | any) {
       const out = dayjs(_date).toDate()
       return out
     },
-    valueOf: () => {
+    toMiliseconds: () => {
       const out = String(dayjs(_date).valueOf())
       return out
-    }
+    },
+    duration: (other_date: string | Date) => {
+      const x = dayjs(_date)
+      const y = dayjs(other_date)
+      return dayjs.duration(x.diff(y))
+    },
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "description": "embedding data from esoftplay framework (web based) into mobile app",
   "main": "cache/index.js",
   "types": "../../index.d.ts",

package/modules/lib/image_edit.tsx

@@ -1,37 +0,0 @@
-// withHooks
-
-import React, { useEffect } from 'react';
-import { View, Image } from 'react-native';
-//@ts-ignore
-import { ImageManipulator } from 'expo-image-crop'
-import { LibUtils, LibNavigation, useSafeState } from 'esoftplay';
-
-export interface LibImage_editProps {
-
-}
-export default function m(props: LibImage_editProps): any {
-  const { uri } = LibUtils.getArgsAll(props)
-  const [show, setShow] = useSafeState(true)
-  
-  useEffect(() => {
-    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
-  }, [])
-
-  return (
-    <View style={{ flex: 1, backgroundColor: "#000", position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999, elevation: 10 }} >
-      <ImageManipulator
-        photo={{ uri }}
-        isVisible={show}
-        onPictureChoosed={(x: any) => {
-          Image.getSize(x.uri, (width, height) => {
-            LibNavigation.sendBackResult({ uri: x.uri, width, height }, LibNavigation.getResultKey(props))
-          }, () => { })
-        }}
-        onToggleModal={() => {
-          setShow(!show)
-          LibNavigation.back()
-        }}
-      />
-    </View>
-  )
-}