@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/Pager/index.tsx

@@ -1,27 +1,86 @@
-import React, { useCallback, useRef } from 'react'
-import { onUpdate, TypeGuards } from '@codeleap/common'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { Dimensions, ScrollView } from 'react-native'
-import { MobileStyleRegistry } from '../../Registry'
+import {
+  AnyFunction,
+  ComponentVariants,
+  onUpdate,
+  TypeGuards,
+  useDefaultComponentStyle,
+  useWarning,
+} from '@codeleap/common'
+import React, { ReactNode, useCallback, useRef } from 'react'
+import {
+  Dimensions,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+} from 'react-native'
+import { StylesOf } from '../../types/utility'
 import { View } from '../View'
-import { PageProps, PagerProps, ScrollEvent } from './types'
-import { useStylesFor } from '../../hooks'
-
+import { PagerPresets, PagerComposition } from './styles'
 export * from './styles'
-export * from './types'
+
+export type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
+type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>
+
+export type PagerProps = React.PropsWithChildren<{
+  variants?: ComponentVariants<typeof PagerPresets>['variants']
+  styles?: StylesOf<PagerComposition>
+  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
+  page?: number
+  style?: any
+  setPage?: (page: number) => void
+  returnEarly?: boolean
+  renderPageWrapper?: React.FC<PageProps>
+  pageWrapperProps?: any
+  width?: number
+  onScroll?: (event: ScrollEvent, args: { isLeft?: boolean; isRight?: boolean; x?: number }) => void
+  /** If TRUE render page, nextPage and prevPage only */
+  windowing?: boolean
+  scrollRightEnabled?: boolean
+  scrollLeftEnabled?: boolean
+  scrollDirectionThrottle?: number
+  onSwipeLastPage?: (event: ScrollEvent) => void
+  waitEventDispatchTimeout?: number
+} & ScrollViewProps>
+
+const defaultProps: Partial<PagerProps> = {
+  variants: [],
+  styles: {},
+  page: 0,
+  returnEarly: true,
+  windowing: false,
+  keyboardShouldPersistTaps: 'handled',
+  scrollEnabled: true,
+  scrollRightEnabled: true,
+  scrollLeftEnabled: true,
+  scrollDirectionThrottle: 650,
+  waitEventDispatchTimeout: 250,
+}
 
 export const Pager = (pagerProps: PagerProps) => {
   const {
+    styles,
+    variants,
     width: widthProp,
     page,
-    style,
-    returnEarly,
+    style = {},
+    returnEarly = true,
     renderPageWrapper,
     pageWrapperProps = {},
     children,
-    windowing,
+    windowing = false,
     setPage,
-    scrollEnabled,
+    scrollEnabled = true,
     scrollLeftEnabled,
     scrollRightEnabled,
     onScroll,
@@ -29,7 +88,7 @@ export const Pager = (pagerProps: PagerProps) => {
     onSwipeLastPage,
     waitEventDispatchTimeout,
   } = {
-    ...Pager.defaultProps,
+    ...defaultProps,
     ...pagerProps,
   }
 
@@ -38,14 +97,20 @@ export const Pager = (pagerProps: PagerProps) => {
   const [positionX, setPositionX] = React.useState(0)
   const [scrollPositionX, setScrollPositionX] = React.useState(0)
   const [_scrollEnabled, setScrollEnabled] = React.useState(true)
+
   const waitEventDispatch = useRef(false)
 
-  const styles = useStylesFor(Pager.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerPresets>(
+    'u:Pager',
+    {
+      styles,
+      transform: StyleSheet.flatten,
+      variants,
+    },
+  )
 
   const windowWidth = Dimensions.get('window').width
-
-  // @ts-expect-error
-  let width = widthProp ?? styles?.wrapper?.width
+  let width = widthProp ?? variantStyles.wrapper.width
 
   const validWidth = TypeGuards.isNumber(width)
 
@@ -53,6 +118,12 @@ export const Pager = (pagerProps: PagerProps) => {
     width = windowWidth
   }
 
+  useWarning(
+    !validWidth,
+    'Pager',
+    'provided width is not a number, using default width',
+  )
+
   const nChildren = React.Children.count(children)
 
   const lastPage = nChildren - 1
@@ -63,7 +134,7 @@ export const Pager = (pagerProps: PagerProps) => {
 
   const handleScrollEnd = useCallback((event: ScrollEvent) => {
     if (!scrollEnabled) return null
-
+    
     if (waitEventDispatch.current === true) return null
 
     waitEventDispatch.current = true
@@ -142,12 +213,13 @@ export const Pager = (pagerProps: PagerProps) => {
       onMomentumScrollEnd={handleScrollEnd}
       scrollEventThrottle={hasScrollDirectionDisabled ? 2000 : 300}
       showsHorizontalScrollIndicator={false}
+      style={[variantStyles.wrapper, style]}
       {...pagerProps}
-      style={styles?.wrapper}
       onScroll={handleScroll}
       scrollEnabled={childArr.length > 1 && scrollEnabled && _scrollEnabled}
     >
       {childArr.map((child: PagerProps['children'][number], index) => {
+
         const isActive = index === page
         const isLast = index === lastPage
         const isFirst = index === 0
@@ -174,8 +246,8 @@ export const Pager = (pagerProps: PagerProps) => {
 
         const wrapperProps = {
           key: index,
+          style: [{ height: '100%', width }, variantStyles.page],
           ...pageWrapperProps,
-          style: [{ height: '100%', width }, styles?.page],
         }
 
         return <WrapperComponent {...wrapperProps}>{content}</WrapperComponent>
@@ -184,24 +256,4 @@ export const Pager = (pagerProps: PagerProps) => {
   )
 }
 
-Pager.styleRegistryName = 'Pager'
-Pager.elements = ['page', 'wrapper']
-Pager.rootElement = 'wrapper'
-
-Pager.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Pager as (props: StyledComponentProps<PagerProps, typeof styles>) => IJSX
-}
-
-Pager.defaultProps = {
-  page: 0,
-  returnEarly: true,
-  windowing: false,
-  keyboardShouldPersistTaps: 'handled',
-  scrollEnabled: true,
-  scrollRightEnabled: true,
-  scrollLeftEnabled: true,
-  scrollDirectionThrottle: 650,
-  waitEventDispatchTimeout: 250,
-} as Partial<PagerProps>
-
-MobileStyleRegistry.registerComponent(Pager)
+Pager.defaultProps = defaultProps

package/src/components/Pager/styles.ts

@@ -1,2 +1,14 @@
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+
+
+export type PagerComposition =
+  | 'page'
+  | 'wrapper'
+
+const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
+
+export const PagerPresets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })))
 
-export type PagerComposition = 'page' | 'wrapper'

package/src/components/RadioInput/index.tsx

@@ -1,18 +1,50 @@
 import React from 'react'
+import { ReactNode, ComponentPropsWithoutRef } from 'react'
+
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
-import { TypeGuards } from '@codeleap/common'
+import {
+  ComponentVariants,
+  FormTypes,
+  getNestedStylesByKey,
+  StylesOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
 import { View } from '../View'
-import { InputBase, selectInputBaseProps } from '../InputBase'
-import { RadioGroupProps, RadioOptionProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
-
+import { RadioInputComposition, RadioInputPresets } from './styles'
+import { InputLabel } from '../InputLabel'
+import { StyleSheet } from 'react-native'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
 export * from './styles'
-export * from './types'
 
-const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
+type WrapperProps = InputBaseProps
+
+type RadioOption<T> = FormTypes.Options<T>[number] & {
+  disabled?: boolean
+}
+export type RadioGroupProps<T extends string|number> = WrapperProps & {
+  options: RadioOption<T>[]
+  value: T
+  onValueChange(value: T): void
+  label: ReactNode
+  styles?: StylesOf<RadioInputComposition>
+  variants?: ComponentVariants<typeof RadioInputPresets>['variants']
+  radioOnRight?: boolean
+}
+
+type OptionProps<T extends string|number> = {
+  item: RadioOption<T>
+  selected: boolean
+  onSelect(): void
+  styles?: StylesOf<RadioInputComposition>
+  debugName?: string
+  disabled?: boolean
+  separator?: boolean
+  reverseOrder?: boolean
+}
+
+const Option = <T extends string|number>(props: OptionProps<T>) => {
   const {
     debugName,
     item,
@@ -58,6 +90,7 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
       onPress={onSelect}
       disabled={isDisabled}
     >
+
       {reverseOrder ? (
         <>
           {label}
@@ -95,38 +128,41 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
       )}
 
     </Touchable>
-    {separator ? <View style={styles.optionSeparator} /> : null}
+    {separator && <View style={styles.optionSeparator} />}
   </>
 }
 
-export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>) => {
+export const RadioGroup = <T extends string|number>(
+  props: RadioGroupProps<T>,
+) => {
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps({
-    ...RadioGroup.defaultProps,
-    ...props,
-  })
+  } = selectInputBaseProps(props)
 
   const {
     options,
     value,
     onValueChange,
+    variants,
+    styles,
     disabled,
     debugName,
     radioOnRight,
-    style,
   } = others
 
-  const styles = useStylesFor(RadioGroup.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
 
-  // @ts-expect-error icss type
-  const _radioOnRight = radioOnRight ?? styles?.__props?.radioOnRight
+  const _radioOnRight = radioOnRight ?? variantStyles.__props?.radioOnRight
 
   return <InputBase
     {...inputBaseProps}
     disabled={disabled}
-    style={styles}
+    styles={variantStyles}
     debugName={debugName}
   >
     {options?.map((item, idx) => (
@@ -135,7 +171,7 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
         item={item}
         key={idx}
         disabled={disabled}
-        styles={styles}
+        styles={variantStyles}
         selected={value === item.value}
         onSelect={() => onValueChange(item.value)}
         separator={idx < options.length - 1}
@@ -143,16 +179,5 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
       />
     ))}
   </InputBase>
-}
-
-RadioGroup.styleRegistryName = 'RadioGroup'
-RadioGroup.elements = [...InputBase.elements, 'option', '__props']
-RadioGroup.rootElement = 'wrapper'
 
-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>>
-
-MobileStyleRegistry.registerComponent(RadioGroup)

package/src/components/RadioInput/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { IconLessInputBaseParts } from '../InputBase'
 
 type OptionParts = 'wrapper' | 'label' | 'indicator' | 'indicatorInner' | 'separator'
@@ -5,8 +6,9 @@ type OptionStates = 'selected' | 'disabled' | 'selectedDisabled'
 
 type OptionComposition = `${OptionParts}:${OptionStates}` | OptionParts
 
-export type RadioInputComposition =
-  IconLessInputBaseParts |
-  `${IconLessInputBaseParts}:disabled` |
-  `option${Capitalize<OptionComposition>}` |
-  '__props'
+export type RadioInputComposition = IconLessInputBaseParts | `${IconLessInputBaseParts}:disabled` | `option${Capitalize<OptionComposition>}` | '__props'
+
+const createRadioStyle =
+  createDefaultVariantFactory<RadioInputComposition>()
+
+export const RadioInputPresets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))

package/src/components/RefreshControl/index.tsx

@@ -1,48 +1,28 @@
-import React from 'react'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { RefreshControl as RNRefreshControl } from 'react-native'
-import { MobileStyleRegistry } from '../../Registry'
-import { RefreshControlProps } from './types'
-import { useStylesFor } from '../../hooks'
-import { ColorValue } from 'react-native'
+import { ComponentVariants, StylesOf, useDefaultComponentStyle } from '@codeleap/common'
+import { RefreshControl as RNRefreshControl, RefreshControlProps as RNRefreshControlProps } from 'react-native'
+import { RefreshControlComposition, RefreshControlPresets } from './styles'
 
-export * from './styles'
-export * from './types'
-
-export const RefreshControl = (props: RefreshControlProps) => {
-  const {
-    style,
-    ...rest
-  } = {
-    ...RefreshControl.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(RefreshControl.styleRegistryName, style)
+export type RefreshControlProps = {
+  styles?: StylesOf<RefreshControlComposition>
+} & RNRefreshControlProps & ComponentVariants<typeof RefreshControlPresets>
 
-  const color: ColorValue = (styles?.loadingAnimation as AnyRecord)?.color
-  const titleColor: ColorValue = (styles?.titleColor as AnyRecord)?.color
-  const progressBackgroundColor: ColorValue = (styles?.progressBackgroundColor as AnyRecord)?.color
+export const RefreshControl = (props:RefreshControlProps) => {
+  const { variants = [], styles } = props
 
+  const variantStyles = useDefaultComponentStyle<'u:RefreshControl', typeof RefreshControlPresets>('u:RefreshControl', {
+    variants,
+    styles,
+  })
   return (
     <RNRefreshControl
-      colors={[color]}
-      tintColor={color}
-      progressBackgroundColor={progressBackgroundColor}
-      titleColor={titleColor}
-      {...rest}
+      colors={[variantStyles.loadingAnimation?.color]}
+      tintColor={variantStyles.loadingAnimation?.color}
+      progressBackgroundColor={variantStyles.progressBackgroundColor?.color}
+      titleColor={variantStyles.titleColor?.color}
+      {...props}
     />
-  )
-}
 
-RefreshControl.styleRegistryName = 'RefreshControl'
-RefreshControl.elements = ['loadingAnimation', 'progressBackgroundColor', 'titleColor']
-RefreshControl.rootElement = 'wrapper'
-
-RefreshControl.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return RefreshControl as (props: StyledComponentProps<RefreshControlProps, typeof styles>) => IJSX
+  )
 }
 
-RefreshControl.defaultProps = {} as Partial<RefreshControlProps>
-
-MobileStyleRegistry.registerComponent(RefreshControl)
+export * from './styles'

package/src/components/RefreshControl/styles.ts

@@ -1,2 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
-export type RefreshControlComposition = 'loadingAnimation' | 'progressBackgroundColor' | 'titleColor'
+export type RefreshControlComposition = 'loadingAnimation' |'progressBackgroundColor' | 'titleColor'
+
+const createRefreshControlStyle = createDefaultVariantFactory<RefreshControlComposition>()
+
+export const RefreshControlPresets = includePresets(style => createRefreshControlStyle(() => ({ loadingAnimation: style })))

package/src/components/Scroll/index.tsx

@@ -1,104 +1,120 @@
-import React, { forwardRef, useState } from 'react'
-import { deepEqual, onUpdate, usePrevious } from '@codeleap/common'
-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'
-
-export * from './styles'
-export * from './types'
-
-export const Scroll = forwardRef<ScrollRef, ScrollProps>((scrollProps, ref) => {
-  const {
-    style,
-    refreshTimeout,
-    children,
-    changeData,
-    refreshControlProps = {},
-    contentContainerStyle,
-    keyboardAware,
-    animated,
-    ...props
-  } = {
-    ...Scroll.defaultProps,
-    ...scrollProps,
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+} from '@codeleap/common'
+import { ScrollView, StyleSheet } from 'react-native'
+import { ViewProps } from '../View'
+import { RefreshControl, RefreshControlProps } from '../RefreshControl'
+import { ComponentWithDefaultProps, StylesOf } from '../../types'
+import { ScrollComposition, ScrollPresets } from './styles'
+import { GetKeyboardAwarePropsOptions, useKeyboardPaddingStyle } from '../../utils'
+import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
+import { useSoftInputState } from 'react-native-avoid-softinput'
+import { useMemo } from 'react'
+export type ScrollProps = KeyboardAwareScrollViewProps &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    keyboardAware?: boolean
+    refreshing?: boolean
+    styles?: StylesOf<ScrollComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+    debugName?: string
   }
 
-  const hasRefresh = !!props.onRefresh
-  const [refreshingState, setRefreshing] = useState(false)
-  const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
+export type ScrollRef = KeyboardAwareScrollView
 
-  const timer = React.useRef(null)
-  const previousData = usePrevious(changeData)
+const defaultProps: Partial<ScrollProps> = {
+  keyboardShouldPersistTaps: 'handled',
+}
 
-  const onRefresh = () => {
-    if (timer.current) {
-      clearTimeout(timer.current)
+export const Scroll = forwardRef<ScrollRef, ScrollProps>(
+  (scrollProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      children,
+      changeData,
+      styles = {},
+      refreshControlProps = {},
+      contentContainerStyle,
+      keyboardAware = true,
+      animated = true,
+      ...props
+    } = {
+      ...defaultProps,
+      ...scrollProps,
     }
+    const hasRefresh = !!props.onRefresh
+    const [refreshingState, setRefreshing] = useState(false)
+    const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
 
-    setRefreshing(true)
+    const timer = React.useRef(null)
+    const previousData = usePrevious(changeData)
 
-    props.onRefresh()
-
-    timer.current = setTimeout(() => {
-      setRefreshing(false)
-    }, refreshTimeout)
-  }
-
-  onUpdate(() => {
-    if (refreshingDisplay && !deepEqual(previousData, changeData)) {
-      setRefreshing(false)
+    const onRefresh = () => {
       if (timer.current) {
         clearTimeout(timer.current)
       }
-    }
-  }, [refreshingDisplay, changeData])
 
-  const styles = useStylesFor(Scroll.styleRegistryName, style)
+      setRefreshing(true)
 
-  const Component = ScrollView
+      props.onRefresh()
 
-  const keyboardStyle = useKeyboardPaddingStyle([styles?.content, contentContainerStyle], keyboardAware)
-
-  return (
-    <Component
-      showsVerticalScrollIndicator={false}
-      // @ts-ignore
-      ref={ref}
-      refreshControl={
-        hasRefresh && (
-          <RefreshControl
-            refreshing={refreshingDisplay}
-            onRefresh={onRefresh}
-            {...refreshControlProps}
-          />
-        )
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshingDisplay && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
       }
-      {...props}
-      style={styles?.wrapper}
-      contentContainerStyle={keyboardStyle}
-    >
-      {children}
-    </Component>
-  )
-}) as StyledComponentWithProps<ScrollProps>
-
-Scroll.styleRegistryName = 'Scroll'
-Scroll.elements = ['wrapper', 'content']
-Scroll.rootElement = 'wrapper'
-
-Scroll.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Scroll as (props: StyledComponentProps<ScrollProps, typeof styles>) => IJSX
-}
-
-Scroll.defaultProps = {
-  keyboardShouldPersistTaps: 'handled',
-  refreshTimeout: 3000,
-  keyboardAware: true,
-  animated: true,
-} as Partial<ScrollProps>
+    }, [refreshingDisplay, changeData])
+
+    const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollPresets>('u:Scroll', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+      rootElement: 'content',
+    })
+
+    const Component = ScrollView
+
+    const keyboardStyle = useKeyboardPaddingStyle([variantStyles.content, contentContainerStyle], keyboardAware)
+
+    return (
+      <Component
+        style={[variantStyles.wrapper, style]}
+        contentContainerStyle={keyboardStyle}
+        showsVerticalScrollIndicator={false}
+        // @ts-ignore
+        ref={ref}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl
+              refreshing={refreshingDisplay}
+              onRefresh={onRefresh}
+              {...refreshControlProps}
+            />
+          )
+        }
+        {...props}
+      >
+        {children}
+      </Component>
+    )
+  },
+) as unknown as ComponentWithDefaultProps<ScrollProps>
+
+Scroll.defaultProps = defaultProps
 
-MobileStyleRegistry.registerComponent(Scroll)
+export * from './styles'