@codeleap/mobile 5.4.5 → 5.5.0

package/src/components/InputOverlay/index.tsx

@@ -0,0 +1,113 @@
+import React, { useCallback, useState } from 'react'
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { FadeOut, FadeIn } from 'react-native-reanimated'
+import { inputOverlayManager } from './store'
+import { DetectorProps, InterceptorProps, LayoutProps } from './types'
+
+export * from './store'
+
+const Detector = ({ children, style, withWrapper = true }: DetectorProps) => {
+  const tapGesture = Gesture.Tap()
+    .onEnd((event) => {
+      inputOverlayManager.closeAll()
+    })
+    .runOnJS(true)
+
+  if (!withWrapper) {
+    <GestureDetector gesture={tapGesture}>
+      {children}
+    </GestureDetector>
+  }
+
+  return (
+    <GestureDetector gesture={tapGesture}>
+      <View style={[style, styles.detectorContainer]}>
+        {children}
+      </View>
+    </GestureDetector>
+  )
+}
+
+const Interceptor = ({ children }: InterceptorProps) => {
+  const tapGesture = Gesture.Tap()
+    .onEnd(() => {
+      // Intercepts the tap to prevent it from propagating to the parent
+      // Does nothing, just consumes the event
+    })
+    .runOnJS(true)
+
+  return (
+    <GestureDetector gesture={tapGesture}>
+      {children}
+    </GestureDetector>
+  )
+}
+
+const Layout = (props: LayoutProps) => {
+  const {
+    style,
+    children,
+    hideOverlay = false,
+    isOpen,
+    animationDuration = 150,
+    mode = 'overlay',
+    position,
+    gap,
+    content,
+    id,
+  } = props
+
+  const [inputHeight, setInputHeight] = useState(0)
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const height = event?.nativeEvent?.layout?.height ?? 0
+    setInputHeight(height)
+  }, [])
+
+  const isOverlayMode = mode === 'overlay'
+
+  const shouldShowOverlay = isOpen && !hideOverlay
+
+  const overlayStyle = isOverlayMode ? {
+    position: 'absolute' as const,
+    zIndex: 1,
+    [position]: 0,
+    top: inputHeight + gap,
+  } : {
+    marginTop: gap,
+  }
+
+  return (
+    <View style={[style, styles.layoutContainer]} onLayout={handleLayout}>
+      {children}
+
+      {shouldShowOverlay ? (
+        <Interceptor>
+          <Animated.View
+            exiting={FadeOut.duration(animationDuration)}
+            entering={FadeIn.duration(animationDuration)}
+            style={overlayStyle}
+          >
+            {content}
+          </Animated.View>
+        </Interceptor>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  detectorContainer: {
+    flex: 1,
+  },
+  layoutContainer: {
+    position: 'relative',
+  },
+})
+
+export const InputOverlay = {
+  Detector,
+  Interceptor,
+  Layout,
+}

package/src/components/InputOverlay/store.ts

@@ -0,0 +1,60 @@
+import { useCallback, useRef } from 'react'
+import { useId } from '@codeleap/hooks'
+import { atom } from 'nanostores'
+import { useStore } from '@nanostores/react'
+
+const defaultValue = '@input.atom'
+
+const inputIdAtom = atom<string>(defaultValue)
+
+const closeInputOverlays = () => {
+  const currentInputId = inputIdAtom.get()
+
+  if (currentInputId === defaultValue) return
+
+  setTimeout(() => inputIdAtom.set(defaultValue), 100)
+}
+
+const toggleOverlay = (id: string) => {
+  const currentInputId = inputIdAtom.get()
+
+  const isOpen = currentInputId === id
+
+  inputIdAtom.set(isOpen ? defaultValue : id)
+}
+
+const useInputOverlay = (providedId?: string) => {
+  const id = useId(providedId)
+
+  const isCurrentlyOpen = useStore(inputIdAtom) === id
+
+  const toggle = useCallback(() => {
+    const currentInputId = inputIdAtom.get()
+
+    const isAnyOtherOpen = currentInputId !== defaultValue && currentInputId !== id
+    const isOpen = currentInputId === id
+
+    if (isAnyOtherOpen && !isOpen) {
+      inputIdAtom.set(defaultValue)
+
+      setTimeout(() => {
+        inputIdAtom.set(id)
+      }, 100)
+    } else {
+      inputIdAtom.set(isOpen ? defaultValue : id)
+    }
+  }, [id])
+
+  return {
+    id,
+    isOpen: isCurrentlyOpen,
+    toggle,
+  }
+}
+
+export const inputOverlayManager = {
+  store: inputIdAtom,
+  use: useInputOverlay,
+  toggle: toggleOverlay,
+  closeAll: closeInputOverlays,
+}

package/src/components/InputOverlay/types.ts

@@ -0,0 +1,25 @@
+import React from 'react'
+import { ViewStyle } from 'react-native'
+
+export type DetectorProps = {
+  children: React.ReactNode
+  style?: any
+  withWrapper?: boolean
+}
+
+export type InterceptorProps = {
+  children: React.ReactNode
+}
+
+export type LayoutProps = {
+  style?: ViewStyle
+  hideOverlay?: boolean
+  mode: 'overlay' | 'content'
+  isOpen: boolean
+  position: 'left' | 'right' | 'center'
+  gap: number
+  animationDuration?: number
+  children: React.ReactNode
+  content: React.ReactNode
+  id: string
+}

package/src/components/Scroll/index.tsx

@@ -1,8 +1,7 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
+import React, { useRef } from 'react'
 import { ScrollView } from 'react-native'
-import { RefreshControl } from '../RefreshControl'
-import { ScrollProps, ScrollRef } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { ScrollProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
@@ -11,7 +10,7 @@ import { ScrollProvider, useScrollPubSub } from '../../modules/scroll'
 export * from './styles'
 export * from './types'
 
-export const Scroll = forwardRef<ScrollRef, ScrollProps>((scrollProps, ref) => {
+export const Scroll = (scrollProps: ScrollProps) => {
   const {
     style,
     refreshTimeout,
@@ -19,59 +18,27 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>((scrollProps, ref) => {
     refreshControlProps = {},
     contentContainerStyle,
     keyboardAware,
-    onRefresh: onRefresh,
     ...props
   } = {
     ...Scroll.defaultProps,
     ...scrollProps,
   }
 
-  const hasRefresh = !!onRefresh
-  const [refreshing, setRefreshing] = useState(false)
-  const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshing
-
-  const timer = React.useRef(null)
-
-  const refresh = useCallback(() => {
-    if (timer.current !== null) {
-      clearTimeout(timer.current)
-      timer.current = null
-    }
-
-    setRefreshing(true)
-
-    onRefresh?.()
-
-    timer.current = setTimeout(() => {
-      setRefreshing(false)
-    }, refreshTimeout)
-  }, [onRefresh])
-
   const styles = useStylesFor(Scroll.styleRegistryName, style)
 
   const Component = keyboardAware ? KeyboardAwareScrollView : ScrollView
 
   const _scrollRef = useRef<ScrollView>()
 
+  // @ts-ignore
   const { ref: scrollRef, emit } = useScrollPubSub(_scrollRef)
 
-  useImperativeHandle(ref, () => scrollRef.current as unknown as  ScrollView, [])
-
   return (
     <ScrollProvider ref={scrollRef}>
       <Component
         showsVerticalScrollIndicator={false}
         // @ts-ignore
         ref={_scrollRef}
-        refreshControl={
-          hasRefresh && (
-            <RefreshControl
-              refreshing={refreshingDisplay}
-              onRefresh={refresh}
-              {...refreshControlProps}
-            />
-          )
-        }
         bottomOffset={30}
         {...props}
         style={styles?.wrapper}
@@ -85,7 +52,7 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>((scrollProps, ref) => {
       </Component>
     </ScrollProvider>
   )
-}) as StyledComponentWithProps<ScrollProps>
+}
 
 Scroll.styleRegistryName = 'Scroll'
 Scroll.elements = ['wrapper', 'content']

package/src/components/TextInput/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { TypeGuards } from '@codeleap/types'
-import { forwardRef } from 'react'
 import { TextInput as NativeTextInput } from 'react-native'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Touchable } from '../Touchable'
@@ -15,7 +14,7 @@ import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyle
 export * from './styles'
 export * from './types'
 
-export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
+export const TextInput = (props: TextInputProps) => {
   const allProps = {
     ...TextInput.defaultProps,
     ...props,
@@ -155,7 +154,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       {...maskingExtraProps}
     />
   </InputBase>
-}) as StyledComponentWithProps<TextInputProps>
+}
 
 TextInput.styleRegistryName = 'TextInput'
 TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']

package/src/components/TextInput/useTextInput.ts

@@ -3,6 +3,7 @@ import { TextInputProps } from './types'
 import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native/types'
 import { useInputBase } from '../InputBase/useInputBase'
 import { fields } from '@codeleap/form'
+import { inputOverlayManager } from '../InputOverlay'
 
 export function useTextInput(props: Partial<TextInputProps>) {
   const { 
@@ -58,6 +59,7 @@ export function useTextInput(props: Partial<TextInputProps>) {
     setIsFocused(true)
     if (autoAdjustSelection) setCurrentSelection(null)
     onFocus?.(e)
+    inputOverlayManager.closeAll()
   }, [onFocus])
 
   const handleMaskChange = useCallback((masked, unmasked) => {

package/src/components/TimeInput/index.tsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 import { TimeInputProps } from './types'
 import dayjs from 'dayjs'
-import Animated, { FadeOut, FadeIn } from 'react-native-reanimated'
 import { fields } from '@codeleap/form'
 import DatePicker from 'react-native-date-picker'
 import { useStylesFor } from '../../hooks'
@@ -10,7 +9,7 @@ import { useInputBase } from '../InputBase'
 import { View } from '../View'
 import { TextInput } from '../TextInput'
 import { MobileStyleRegistry } from '../../Registry'
-import { useInputOverlay } from '../InputBase/useInputOverlay'
+import { InputOverlay, inputOverlayManager } from '../InputOverlay'
 
 export * from './styles'
 export * from './types'
@@ -45,17 +44,38 @@ export const TimeInput = (props: TimeInputProps) => {
     onInputValueChange,
   } = useInputBase<Date>(field, fields.date as any, { value, onValueChange })
 
-  const [inputHeight, setInputHeight] = useState(0)
-
-  const [isOpen, toggle] = useInputOverlay(autoClosePeersOverlays)
+  const { isOpen, toggle, id } = inputOverlayManager.use()
 
   return (
-    <View style={[styles.wrapper, { position: 'relative' }]}>
+    <InputOverlay.Layout
+      style={styles.wrapper}
+      position={timePickerPosition}
+      gap={gap}
+      isOpen={isOpen}
+      mode={overlay ? 'overlay' : 'content'}
+      hideOverlay={disabled}
+      id={id}
+      content={
+        <View style={styles.timePicker}>
+          <DatePicker
+            mode='time'
+            theme='light'
+            {...timePickerProps}
+            onDateChange={onInputValueChange}
+            date={inputValue ?? new Date()}
+          />
+        </View>
+      }
+    >
       <TextInput
         placeholder='Select a time'
         disabled={disabled}
         {...textInputProps}
         style={compositionStyles.input}
+        value={!inputValue ? '' : dayjs(inputValue).format(format)}
+        onValueChange={() => inputValue}
+        onPress={disabled ? undefined : toggle}
+        focused={isOpen}
         leftIcon={!leftIcon ? null : {
           ...leftIcon,
           onPress: toggle,
@@ -64,41 +84,8 @@ export const TimeInput = (props: TimeInputProps) => {
           ...rightIcon,
           onPress: toggle,
         }}
-        value={!inputValue ? '' : dayjs(inputValue).format(format)}
-        onValueChange={() => inputValue}
-        onPress={disabled ? null : toggle}
-        innerWrapperProps={{
-          rippleDisabled: true,
-        }}
-        focused={isOpen}
-        onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)}
       />
-
-      {!isOpen || disabled ? null : (
-        <Animated.View
-          exiting={FadeOut.duration(150)}
-          entering={FadeIn.duration(150)}
-          style={overlay ? {
-            position: 'absolute',
-            zIndex: 1,
-            [timePickerPosition]: 0,
-            top: inputHeight + gap,
-          } : {
-            marginTop: gap,
-          }}
-        >
-          <View style={styles.timePicker}>
-            <DatePicker
-              mode='time'
-              theme='light'
-              {...timePickerProps}
-              onDateChange={onInputValueChange}
-              date={inputValue ?? new Date()}
-            />
-          </View>
-        </Animated.View>
-      )}
-    </View>
+    </InputOverlay.Layout>
   )
 }
 

package/src/components/components.ts

@@ -41,4 +41,5 @@ export * from './SortablePhotos'
 export * from './SectionFilters'
 export * from './Tabs'
 export * from './CalendarInput'
-export * from './TimeInput'
+export * from './TimeInput'
+export * from './InputOverlay'

package/src/modules/backgroundTimer.ts

@@ -1,17 +1,16 @@
 import { AnyFunction } from '@codeleap/types'
-import BackgroundTimer from '@boterop/react-native-background-timer'
 import { uuid } from '..'
 
 const throttleTimerId = {}
 
-export function throttle(func:AnyFunction, ref?: string, delay = 200) {
+export function throttle(func: AnyFunction, ref?: string, delay = 200) {
   if (!ref) {
     ref = uuid.v4() as string
   }
   if (throttleTimerId[ref]) {
     return
   }
-  throttleTimerId[ref] = BackgroundTimer.setTimeout(function () {
+  throttleTimerId[ref] = setTimeout(function () {
     func()
     throttleTimerId[ref] = undefined
   }, delay)
@@ -21,19 +20,19 @@ export function throttle(func:AnyFunction, ref?: string, delay = 200) {
 
 const debounceTimerId = {}
 
-export function debounce(func:AnyFunction, ref?: string, delay = 200) {
+export function debounce(func: AnyFunction, ref?: string, delay = 200) {
   if (!ref) {
     ref = uuid.v4() as string
   }
 
   if (debounceTimerId[ref]) {
-    BackgroundTimer.clearTimeout(debounceTimerId[ref])
+    clearTimeout(debounceTimerId[ref])
   }
 
-  debounceTimerId[ref] = BackgroundTimer.setTimeout(function () {
+  debounceTimerId[ref] = setTimeout(function () {
     func()
     debounceTimerId[ref] = undefined
   }, delay)
 
   return ref
-}
+}

package/dist/components/InputBase/useInputOverlay.d.ts

@@ -1 +0,0 @@
-export declare const useInputOverlay: (autoClosePeersOverlays: boolean, providedId?: string) => any[] | readonly [boolean, (value?: boolean) => void];

package/dist/components/InputBase/useInputOverlay.js

@@ -1,30 +0,0 @@
-import { useBooleanToggle } from '@codeleap/hooks';
-import { globalState } from '@codeleap/store';
-import { useCallback } from 'react';
-import { useId } from '@codeleap/hooks';
-const inputOverlayStore = globalState({});
-export const useInputOverlay = (autoClosePeersOverlays, providedId) => {
-    if (!autoClosePeersOverlays)
-        return useBooleanToggle(false);
-    const id = useId(providedId);
-    const isOpen = inputOverlayStore.use(state => state[id]);
-    const toggle = useCallback(() => {
-        const isCurrentlyOpen = inputOverlayStore.value[id];
-        const isAnyOtherOpen = Object.entries(inputOverlayStore.value).some(([key, isOpen]) => key !== id && isOpen);
-        const newValues = Object.keys(inputOverlayStore.value).reduce((acc, key) => {
-            acc[key] = false;
-            return acc;
-        }, {});
-        if (isAnyOtherOpen && !isCurrentlyOpen) {
-            inputOverlayStore.set(newValues);
-            setTimeout(() => {
-                inputOverlayStore.set({ [id]: true });
-            }, 100);
-        }
-        else {
-            inputOverlayStore.set({ ...newValues, [id]: !isCurrentlyOpen });
-        }
-    }, []);
-    return [isOpen, toggle];
-};
-//# sourceMappingURL=useInputOverlay.js.map

package/dist/components/InputBase/useInputOverlay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useInputOverlay.js","sourceRoot":"","sources":["../../../src/components/InputBase/useInputOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,MAAM,iBAAiB,GAAG,WAAW,CAAC,EAAE,CAAC,CAAA;AAEzC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,sBAA+B,EAAE,UAAmB,EAAE,EAAE;IACtF,IAAI,CAAC,sBAAsB;QAAE,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAE3D,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,CAAA;IAE5B,MAAM,MAAM,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;IAExD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QACnD,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,IAAI,CACjE,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,IAAI,MAAM,CACxC,CAAA;QAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACzE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YAChB,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAA6B,CAAC,CAAA;QAEjC,IAAI,cAAc,IAAI,CAAC,eAAe,EAAE;YACtC,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;YAEhC,UAAU,CAAC,GAAG,EAAE;gBACd,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;YACvC,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;aAAM;YACL,iBAAiB,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,CAAA;SAChE;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACzB,CAAC,CAAA"}

package/src/components/InputBase/useInputOverlay.ts

@@ -1,38 +0,0 @@
-import { useBooleanToggle } from '@codeleap/hooks'
-import { globalState } from '@codeleap/store'
-import { useCallback } from 'react'
-import { useId } from '@codeleap/hooks'
-
-const inputOverlayStore = globalState({})
-
-export const useInputOverlay = (autoClosePeersOverlays: boolean, providedId?: string) => {
-  if (!autoClosePeersOverlays) return useBooleanToggle(false)
-
-  const id = useId(providedId)
-
-  const isOpen = inputOverlayStore.use(state => state[id])
-
-  const toggle = useCallback(() => {
-    const isCurrentlyOpen = inputOverlayStore.value[id]
-    const isAnyOtherOpen = Object.entries(inputOverlayStore.value).some(
-      ([key, isOpen]) => key !== id && isOpen
-    )
-
-    const newValues = Object.keys(inputOverlayStore.value).reduce((acc, key) => {
-      acc[key] = false
-      return acc
-    }, {} as Record<string, boolean>)
-
-    if (isAnyOtherOpen && !isCurrentlyOpen) {
-      inputOverlayStore.set(newValues)
-
-      setTimeout(() => {
-        inputOverlayStore.set({ [id]: true })
-      }, 100)
-    } else {
-      inputOverlayStore.set({ ...newValues, [id]: !isCurrentlyOpen })
-    }
-  }, [])
-
-  return [isOpen, toggle]
-}