@codeleap/mobile 4.3.9 → 5.0.0

package/src/components/NumberIncrement/useNumberIncrement.ts

@@ -0,0 +1,152 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native/types'
+import { useInputBase } from '../InputBase/useInputBase'
+import { NumberIncrementProps } from './types'
+import { TypeGuards } from '@codeleap/types'
+import { Field, fields } from '@codeleap/form'
+
+export const MAX_VALID_DIGITS = 1000000000000000 // maximum number of digits that the input supports to perform operations
+
+export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
+  const {
+    onFocus,
+    onBlur,
+    field,
+    actionPressAutoFocus,
+    timeoutActionFocus,
+    onChangeMask,
+    forceError,
+    editable,
+    step,
+    parseValue,
+    min,
+    max,
+    value,
+    onValueChange,
+  } = props
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  const {
+    fieldHandle,
+    validation,
+    innerInputRef,
+    wrapperRef,
+  } = useInputBase(
+    field as Field<number, any, any>,
+    fields.number as () => Field<number, any, any>,
+    [value, onValueChange]
+  )
+
+  const actionTimeoutRef = useRef(null)
+
+  const clearActionTimeoutRef = useCallback(() => {
+    if (actionTimeoutRef.current !== null) {
+      clearTimeout(actionTimeoutRef.current)
+      actionTimeoutRef.current = null
+    }
+  }, [actionTimeoutRef.current])
+
+  const handleChange = useCallback((action: 'increment' | 'decrement') => {
+    if (actionPressAutoFocus) setIsFocused(true)
+    clearActionTimeoutRef()
+
+    if (action === 'increment' && !incrementDisabled) {
+      const newValue = Number(fieldHandle?.value) + step
+      fieldHandle.setValue(newValue)
+    } else if (action === 'decrement' && !decrementDisabled) {
+      const newValue = Number(fieldHandle?.value) - step
+      fieldHandle.setValue(newValue)
+    }
+
+    if (actionPressAutoFocus) {
+      actionTimeoutRef.current = setTimeout(() => {
+        setIsFocused(false)
+      }, timeoutActionFocus)
+    }
+  }, [fieldHandle?.value])
+
+  const checkValue = useCallback((newValue: number = null, withLimits = true) => {
+    const value = newValue ?? fieldHandle?.value
+
+    if (withLimits) {
+      if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
+        return max
+      } else if (TypeGuards.isNumber(min) && (Number(value) <= min) || TypeGuards.isNil(value) || String(value)?.length <= 0) {
+        return min
+      }
+    }
+
+    if (!value) {
+      return min
+    }
+
+    if (value >= MAX_VALID_DIGITS) {
+      fieldHandle.setValue(MAX_VALID_DIGITS)
+      return MAX_VALID_DIGITS
+    }
+
+    return value
+  }, [])
+
+  const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    fieldHandle.setValue(checkValue())
+    validation.onInputBlurred()
+    setIsFocused(false)
+    onBlur?.(e)
+  }, [validation.onInputBlurred, onBlur])
+
+  const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    clearActionTimeoutRef()
+    if (editable) setIsFocused(true)
+    onFocus?.(e)
+  }, [onFocus])
+
+  const handleChangeInput = useCallback((text: string) => {
+    const value = checkValue(parseValue(text), false)
+
+    fieldHandle.setValue(value)
+
+    return value
+  }, [])
+
+  const handleMaskChange = useCallback((masked, unmasked) => {
+    handleChangeInput?.(masked)
+    if (onChangeMask) onChangeMask(masked, unmasked)
+  }, [onChangeMask])
+
+  const incrementDisabled = useMemo(() => {
+    const maxLimit = TypeGuards.isNumber(max) && (Number(fieldHandle?.value) >= max)
+    return maxLimit
+  }, [fieldHandle?.value])
+
+  const decrementDisabled = useMemo(() => {
+    const minLimit = TypeGuards.isNumber(min) && (Number(fieldHandle?.value) <= min)
+    return minLimit
+  }, [fieldHandle?.value])
+
+  const hasValue = TypeGuards.isString(fieldHandle?.value)
+    ? (fieldHandle?.value as string).length > 0
+    : !TypeGuards.isNil(fieldHandle?.value)
+
+  const hasError = validation.showError || forceError
+
+  return {
+    isFocused,
+    handleBlur,
+    handleFocus,
+    handleMaskChange,
+    handleChange,
+    handleChangeInput,
+    fieldHandle,
+    validation,
+    innerInputRef,
+    wrapperRef,
+    hasValue,
+    hasError,
+    incrementDisabled,
+    decrementDisabled,
+    min,
+    max,
+  }
+}

package/src/components/RadioInput/index.tsx

@@ -8,6 +8,9 @@ import { RadioGroupProps, RadioOptionProps } from './types'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
+import { useInputBase } from '../InputBase/useInputBase'
+import { SelectableField, fields } from '@codeleap/form'
 
 export * from './styles'
 export * from './types'
@@ -26,34 +29,25 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
 
   const isDisabled = disabled || item.disabled
 
-  const getStyle = (key) => {
-    if (isDisabled && selected) {
-      return styles[`${key}:selectedDisabled`]
-    }
-    if (isDisabled) {
-      return styles[`${key}:disabled`]
-    }
-    if (selected) {
-      return styles[`${key}:selected`]
+  const partialStyles = useInputBasePartialStyles(
+    styles,
+    ['optionLabel', 'optionWrapper', 'optionIndicator', 'optionIndicatorInner'],
+    {
+      selectedDisabled: isDisabled && selected,
+      disabled: isDisabled,
+      selected,
     }
-    return styles[key]
-  }
+  )
 
   const label = TypeGuards.isString(item.label) ? <Text
-    style={[
-      styles.optionLabel,
-      getStyle('optionLabel'),
-    ]}
+    style={partialStyles.optionLabel}
     text={item.label}
   /> : item.label
 
   return <>
     <Touchable
       debugName={`${debugName} option ${item.value}`}
-      style={[
-        styles.optionWrapper,
-        getStyle('optionWrapper'),
-      ]}
+      style={partialStyles.optionWrapper}
       rippleDisabled
       onPress={onSelect}
       disabled={isDisabled}
@@ -61,40 +55,20 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
       {reverseOrder ? (
         <>
           {label}
-          <View
-            style={[
-              styles.optionIndicator,
-              getStyle('optionIndicator'),
-            ]}
-          >
-            <View
-              style={[
-                styles.optionIndicatorInner,
-                getStyle('optionIndicatorInner'),
-              ]}
-            />
+          <View style={partialStyles.optionIndicator}>
+            <View style={partialStyles.optionIndicatorInner} />
           </View>
         </>
       ) : (
         <>
-          <View
-            style={[
-              styles.optionIndicator,
-              getStyle('optionIndicator'),
-            ]}
-          >
-            <View
-              style={[
-                styles.optionIndicatorInner,
-                getStyle('optionIndicatorInner'),
-              ]}
-            />
+          <View style={partialStyles.optionIndicator}>
+            <View style={partialStyles.optionIndicatorInner} />
           </View>
           {label}
         </>
       )}
-
     </Touchable>
+
     {separator ? <View style={styles.optionSeparator} /> : null}
   </>
 }
@@ -109,24 +83,35 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
   })
 
   const {
-    options,
-    value,
-    onValueChange,
     disabled,
     debugName,
     radioOnRight,
     style,
+    field,
+    options,
+    value,
+    onValueChange,
   } = others
 
   const styles = useStylesFor(RadioGroup.styleRegistryName, style)
 
+  const {
+    fieldHandle,
+    wrapperRef,
+  } = useInputBase(
+    field as SelectableField<T, any>,
+    fields.selectable as () => SelectableField<T, any>,
+    [value, onValueChange]
+  )
+
   // @ts-expect-error icss type
   const _radioOnRight = radioOnRight ?? styles?.__props?.radioOnRight
 
-  const hasValue = !TypeGuards.isNil(value)
+  const hasValue = !TypeGuards.isNil(fieldHandle?.value)
 
   return <InputBase
     {...inputBaseProps}
+    ref={wrapperRef}
     disabled={disabled}
     style={styles}
     debugName={debugName}
@@ -139,11 +124,10 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
         key={idx}
         disabled={disabled}
         styles={styles}
-        selected={value === item.value}
-        onSelect={() => onValueChange(item.value)}
-        separator={idx < options.length - 1}
+        selected={fieldHandle?.value === item.value}
+        onSelect={() => fieldHandle.setValue(item.value)}
+        separator={idx < options?.length - 1}
         reverseOrder={_radioOnRight}
-
       />
     ))}
   </InputBase>
@@ -157,6 +141,6 @@ RadioGroup.withVariantTypes = <S extends AnyRecord>(styles: S) => {
   return RadioGroup as (<T extends string | number>(props: StyledComponentProps<RadioGroupProps<T>, typeof styles>) => IJSX)
 }
 
-RadioGroup.defaultProps = {} as Partial<RadioGroupProps<string | number>>
+RadioGroup.defaultProps = {} as Partial<RadioGroupProps<string>>
 
 MobileStyleRegistry.registerComponent(RadioGroup)

package/src/components/RadioInput/types.ts

@@ -1,23 +1,25 @@
-import { StylesOf } from '@codeleap/types'
-import { FormTypes } from '@codeleap/form'
 import { StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
 import { RadioInputComposition } from './styles'
 import { InputBaseProps } from '../InputBase'
+import { ViewStyle } from 'react-native'
+import { SelectableField } from '@codeleap/form'
+import { Options } from '@codeleap/types'
 
-type RadioOption<T> = FormTypes.Options<T>[number] & {
+type RadioOption<T extends string | number> = {
+  value: T
+  label: string
   disabled?: boolean
 }
 
 export type RadioGroupProps<T extends string | number> =
   Omit<InputBaseProps, 'style'> &
   {
-    options: RadioOption<T>[]
-    value: T
-    onValueChange(value: T): void
-    label: ReactNode
     radioOnRight?: boolean
     style?: StyledProp<RadioInputComposition>
+    field?: SelectableField<T, any>
+    options?: Options<T>
+    value?: T
+    onValueChange?: (value: T) => void
   }
 
 export type RadioOptionProps<T extends string | number> = {
@@ -28,5 +30,5 @@ export type RadioOptionProps<T extends string | number> = {
   disabled?: boolean
   separator?: boolean
   reverseOrder?: boolean
-  styles?: StylesOf<RadioInputComposition>
+  styles?: Record<RadioInputComposition, ViewStyle>
 }

package/src/components/Scroll/index.tsx

@@ -1,13 +1,12 @@
-import React, { forwardRef, useState } from 'react'
-import { onUpdate, usePrevious } from '@codeleap/hooks'
-import { deepEqual } from '@codeleap/utils'
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
 import { ScrollView } from 'react-native'
 import { RefreshControl } from '../RefreshControl'
-import { useKeyboardPaddingStyle } from '../../utils'
 import { ScrollProps, ScrollRef } from './types'
 import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
+import { ScrollProvider, useScrollPubSub } from '../../modules/scroll'
 
 export * from './styles'
 export * from './types'
@@ -17,73 +16,74 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>((scrollProps, ref) => {
     style,
     refreshTimeout,
     children,
-    changeData,
     refreshControlProps = {},
     contentContainerStyle,
     keyboardAware,
-    animated,
+    onRefresh: onRefresh,
     ...props
   } = {
     ...Scroll.defaultProps,
     ...scrollProps,
   }
 
-  const hasRefresh = !!props.onRefresh
-  const [refreshingState, setRefreshing] = useState(false)
-  const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
+  const hasRefresh = !!onRefresh
+  const [refreshing, setRefreshing] = useState(false)
+  const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshing
 
   const timer = React.useRef(null)
-  const previousData = usePrevious(changeData)
 
-  const onRefresh = () => {
-    if (timer.current) {
+  const refresh = useCallback(() => {
+    if (timer.current !== null) {
       clearTimeout(timer.current)
+      timer.current = null
     }
 
     setRefreshing(true)
 
-    props.onRefresh()
+    onRefresh?.()
 
     timer.current = setTimeout(() => {
       setRefreshing(false)
     }, refreshTimeout)
-  }
-
-  onUpdate(() => {
-    if (refreshingDisplay && !deepEqual(previousData, changeData)) {
-      setRefreshing(false)
-      if (timer.current) {
-        clearTimeout(timer.current)
-      }
-    }
-  }, [refreshingDisplay, changeData])
+  }, [onRefresh])
 
   const styles = useStylesFor(Scroll.styleRegistryName, style)
 
-  const Component = ScrollView
+  const Component = keyboardAware ? KeyboardAwareScrollView : ScrollView
+
+  const _scrollRef = useRef<ScrollView>()
+
+  const { ref: scrollRef, emit } = useScrollPubSub(_scrollRef)
 
-  const keyboardStyle = useKeyboardPaddingStyle([styles?.content, contentContainerStyle], keyboardAware)
+  useImperativeHandle(ref, () => scrollRef.current as unknown as  ScrollView, [])
 
   return (
-    <Component
-      showsVerticalScrollIndicator={false}
-      // @ts-ignore
-      ref={ref}
-      refreshControl={
-        hasRefresh && (
-          <RefreshControl
-            refreshing={refreshingDisplay}
-            onRefresh={onRefresh}
-            {...refreshControlProps}
-          />
-        )
-      }
-      {...props}
-      style={styles?.wrapper}
-      contentContainerStyle={keyboardStyle}
-    >
-      {children}
-    </Component>
+    <ScrollProvider ref={scrollRef}>
+      <Component
+        showsVerticalScrollIndicator={false}
+        // @ts-ignore
+        ref={_scrollRef}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl
+              refreshing={refreshingDisplay}
+              onRefresh={refresh}
+              {...refreshControlProps}
+            />
+          )
+        }
+        bottomOffset={30}
+        {...props}
+        style={styles?.wrapper}
+        contentContainerStyle={[styles?.content, contentContainerStyle]}
+        onMomentumScrollEnd={(e) => {
+          emit('onMomentumScrollEnd', e)
+          props?.onMomentumScrollEnd?.(e)
+        }}
+      >
+        {children}
+      </Component>
+    </ScrollProvider>
   )
 }) as StyledComponentWithProps<ScrollProps>
 
@@ -99,7 +99,6 @@ Scroll.defaultProps = {
   keyboardShouldPersistTaps: 'handled',
   refreshTimeout: 3000,
   keyboardAware: true,
-  animated: true,
 } as Partial<ScrollProps>
 
 MobileStyleRegistry.registerComponent(Scroll)

package/src/components/Scroll/types.ts

@@ -1,12 +1,12 @@
 import { StyledProp } from '@codeleap/styles'
-import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
 import { ScrollComposition } from './styles'
 import { RefreshControlProps } from '../RefreshControl'
-import { ViewProps } from '../View'
+import { ScrollView, ScrollViewProps } from 'react-native'
+import { KeyboardAwareScrollViewProps } from 'react-native-keyboard-controller'
 
 export type ScrollProps =
+  Omit<ScrollViewProps, 'style'> &
   Omit<KeyboardAwareScrollViewProps, 'style'> &
-  Omit<ViewProps, 'style'> &
   {
     onRefresh?: () => void
     refreshTimeout?: number
@@ -18,4 +18,4 @@ export type ScrollProps =
     style?: StyledProp<ScrollComposition>
   }
 
-export type ScrollRef = KeyboardAwareScrollView
+export type ScrollRef = ScrollView

package/src/components/Sections/index.tsx

@@ -22,7 +22,6 @@ export function Sections<T>(sectionsProps: SectionProps<T>) {
   const {
     style,
     onRefresh,
-    component,
     refreshing,
     placeholder,
     refreshControlProps,

package/src/components/SegmentedControl/index.tsx

@@ -35,9 +35,9 @@ export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedC
     animation = {},
     scrollProps = {},
     getItemWidth = () => (themeValues?.width - themeSpacing?.value?.(4)) / options.length,
-    renderBubble,
+    renderBubble: BubbleView,
     scrollToCurrentOptionOnMount,
-    renderOption,
+    renderOption: Option,
     touchableProps,
     style,
     ...viewProps
@@ -60,7 +60,12 @@ export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedC
   function scrollTo(idx: number) {
     if (!scrollRef.current) return
     setTimeout(() => {
-      scrollRef.current?.scrollToPosition?.(widthStyle.width * idx, 0, true)
+      scrollRef.current?.scrollTo({
+        x: widthStyle.width * idx, 
+        y: 0,
+        animated: true
+      })
+
     })
   }
 
@@ -109,9 +114,6 @@ export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedC
     hasScrolledInitially.current = true
   }
 
-  const BubbleView = renderBubble
-  const Option = renderOption
-
   const bubbleAnimation = useAnimatedVariantStyles({
     variantStyles: styles,
     animatedProperties: [],

package/src/components/SegmentedControl/types.ts

@@ -3,9 +3,8 @@ import { SegmentedControlOptionProps } from './Option'
 import { TransitionConfig } from '../../utils'
 import { TextProps } from '../Text'
 import { TouchableProps } from '../Touchable'
-import { FormTypes } from '@codeleap/form'
 import { StyledProp } from '@codeleap/styles'
-import { SegmentedControlComposition } from '../components'
+import { SegmentedControlComposition, ViewProps } from '../components'
 
 export type SegmentedControlRef = ScrollRef & {
   scrollTo: (index: number) => void
@@ -20,9 +19,11 @@ export type SegmentedControlProps<T = string> =
     value: T
     debugName: string
     animation?: TransitionConfig
+    animated?: boolean
+    animatedStyle?: ViewProps['animatedStyle']
     textProps?: Partial<TextProps>
     touchableProps?: Partial<TouchableProps>
-    label?: FormTypes.Label
+    label?: string
     renderOption?: (props: SegmentedControlOptionProps) => JSX.Element
     renderBubble?: (props: Partial<SegmentedControlProps>) => JSX.Element
     getItemWidth?: (item: { label: string; value: T }, idx: number, arr: { label: string; value: T }[]) => number