@codeleap/mobile 1.9.31 → 2.0.0

package/src/components/Pager/index.tsx

@@ -1,58 +1,52 @@
 import {
   ComponentVariants,
-  onUpdate,
   useDefaultComponentStyle,
-  useDebounce,
-  useCodeleapContext,
 } from '@codeleap/common'
 import React, {
-  forwardRef,
   ReactNode,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
 } from 'react'
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
-import { Animated } from '../Animated'
-import { Button } from '../Button'
 import { View } from '../View'
-import { Text } from '../Text'
-import { MobilePagerStyles, PagerComposition } from './styles'
-
+import { PagerStyles, PagerComposition } from './styles'
 export * from './styles'
 
+type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
 export type PagerProps = {
-  variants?: ComponentVariants<typeof MobilePagerStyles>['variants']
+  variants?: ComponentVariants<typeof PagerStyles>['variants']
   styles?: StylesOf<PagerComposition>
+  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
   page?: number
-  loop?: boolean
-  debug?: boolean
-  children?: ReactNode
-  onPageChange?: (page: number) => void
+  style?: any
+  setPage?: (page: number) => void
+  returnEarly?: boolean
+  renderPageWrapper?:React.FC<PageProps>
+  pageWrapperProps?: any
 }
 
-export type PagerRef = {
-  forward(by?: number): void
-  back(by?: number): void
-  to(index?: number): void
-}
-
-export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
+export const Pager:React.FC<PagerProps> = (pagerProps) => {
   const {
-    children,
+
     styles,
     variants,
-    page: propPage,
-    debug,
-    loop,
-    onPageChange,
+    page,
+    style = {},
+    returnEarly = true,
+    renderPageWrapper,
+    pageWrapperProps = {},
+    children,
   } = pagerProps
 
-  const [page, setPage] = useState(() => propPage ?? 0)
-
-  const variantStyles = useDefaultComponentStyle<'u:Pager', typeof MobilePagerStyles>(
+  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerStyles>(
     'u:Pager',
     {
       styles,
@@ -60,183 +54,68 @@ export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
       variants,
     },
   )
-  const { logger } = useCodeleapContext()
   const nChildren = React.Children.count(children)
 
   const lastPage = nChildren - 1
 
-  const pagerRef = useRef<PagerRef>({
-    forward: (by = 1) => {
-      setPage((currentPage) => {
-        if (currentPage < lastPage) {
-          return currentPage + by
-        } else if (loop) {
-          return by - 1
-        }
-        return currentPage
-      })
-    },
-    back: (by = 1) => {
-      setPage((currentPage) => {
-        if (currentPage > 0) {
-          return currentPage - by
-        } else if (loop) {
-          return nChildren - by
-        }
-        return currentPage
-      })
-    },
-    to: (n: number) => {
-      if (n >= 0 && n <= lastPage) {
-        setPage(n)
-      } else {
-        logger.warn(
-          'Attempted to go to a page which falls outside range',
-          { currentPage: page, attemptedToGoTo: n, pageRange: [0, lastPage] },
-          'Component',
-        )
-      }
-    },
-  })
-
-  onUpdate(() => {
-    onPageChange?.(page)
-  }, [page])
+  const childArr = React.Children.toArray(children)
 
-  onUpdate(() => {
-    if (typeof propPage === 'number') {
-      setPage(propPage)
-    }
-  }, [propPage])
+  const WrapperComponent = renderPageWrapper || View
 
-  useImperativeHandle(ref, () => pagerRef.current)
-
-  const pagePoses = useMemo(() => {
-    return {
-      current: variantStyles['page:pose:current'],
-      next: variantStyles['page:pose:next'],
-      previous: variantStyles['page:pose:previous'],
-    }
-  }, [variantStyles])
+  // Reamimated seems to glitch if this is not done
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
 
   return (
-    <View style={variantStyles.wrapper}>
-      {React.Children.map(children, (child, idx) => (
-        <Page
-          {...pagerProps}
-          idx={idx}
-          lastPage={lastPage}
-          pagePoses={pagePoses}
-          style={[variantStyles.page]}
-          page={page}
-        >
-          {child}
-        </Page>
-      ))}
-
-      {debug && (
-        <View
-          variants={['absolute']}
-          style={{ bottom: 0, left: 0, right: 0 }}
-        >
-          <Button text='previous' debugName='Previous Pager' onPress={pagerRef.current.back} />
-          <Text text={page.toString()} />
-          <Button text='next' debugName='Next Pager' onPress={pagerRef.current.forward} />
-        </View>
-      )}
+    <View style={[variantStyles.wrapper, style]} >
+      {
+        childArr.map((child:PagerProps['children'][number], index) => {
+          const isActive = index === page
+          const isLast = index === lastPage
+          const isFirst = index === 0
+          const isNext = index === page + 1
+          const isPrevious = index === page - 1
+          const shouldRender = isActive || isNext || isPrevious
+
+          if (!shouldRender && returnEarly) return null
+          let pos = 0
+
+          if (isActive) {
+            pos = 1
+          } else if (index > page) {
+            pos = 2
+          } else {
+            pos = 0
+          }
+
+          const pageProps = {
+            isLast,
+            isActive,
+            isFirst,
+            isNext,
+            isPrevious,
+            index,
+            page,
+          }
+
+          const content = typeof child === 'function' ? child(pageProps) : child
+
+          const wrapperProps = {
+            key: index,
+            style: variantStyles.page,
+            animated: true,
+            transition: variantStyles['page:transition'],
+            animate: [variantStyles['page:previous'], variantStyles['page:current'], variantStyles['page:next']][pos],
+            ...pageWrapperProps,
+          }
+
+          return (
+            <WrapperComponent {...wrapperProps}>
+              {content}
+            </WrapperComponent>
+          )
+
+        })
+      }
     </View>
-
   )
-})
-type PageProps = PagerProps & {
-  idx: number
-  lastPage: number
-  page: number
-  pagePoses: any
-  style: any
-}
-const Page: React.FC<PageProps> = (pageProps) => {
-  const {
-    children: child,
-    idx,
-    loop,
-    lastPage,
-    page,
-    style,
-    pagePoses,
-  } = pageProps
-
-  if (!React.isValidElement(child)) return null
-
-  // const isLast = idx === lastPage
-  // const isFirst = idx === 0
-
-  // const isLoopNext = (loop && isFirst && page === lastPage)
-  // const isLoopPrevious = (loop && isLast && page === 0)
-
-  // const isCurrent = idx === page
-  // const isSequenceNext = idx ===  page + 1
-  // const isSequencePrevious = idx ===  page  - 1
-
-  // const isNext = isSequenceNext || isLoopNext
-
-  // const isPrevious = isSequencePrevious || isLoopPrevious
-
-  // const isCurrentOrAdjacent = [
-  //     isCurrent,
-  //     isNext,
-  //     isPrevious
-  // ].includes(true)
-
-  // if(isCurrentOrAdjacent){
-  //     return <Animated
-  //         key={idx}
-  //         component='View'
-  //         config={pagePoses}
-  //         pose={isCurrent ? 'current' : (isNext ? 'next' : 'previous')}
-  //         style={[{
-  //             position: 'absolute',
-  //             top: 0,
-
-  //         },style]}
-  //     >
-  //         {child}
-  //     </Animated>
-  // }
-  const isCurrent = idx === page
-  const isNext = idx > page
-  const [_opacity, setOpacity] = useState(isCurrent ? 1 : 0)
-
-  const [opacity, resetDebounceTimer] = useDebounce(_opacity, 800)
-
-  onUpdate(() => {
-    if (isCurrent) {
-      setOpacity(1)
-    } else {
-      setOpacity(0)
-    }
-
-    return resetDebounceTimer
-  }, [idx, page])
-
-  return (
-    <Animated
-      key={idx}
-      component='View'
-      config={pagePoses}
-      pose={isCurrent ? 'current' : isNext ? 'next' : 'previous'}
-      style={[
-        {
-          position: 'absolute',
-          top: 0,
-          opacity: isCurrent ? _opacity : opacity,
-        },
-        style,
-      ]}
-    >
-      {child}
-    </Animated>
-  )
-
-  // return <View style={{display:'none'}} key={idx}>{child}</View>
 }

package/src/components/Pager/styles.ts

@@ -2,50 +2,75 @@ import {
   createDefaultVariantFactory,
   includePresets,
 } from '@codeleap/common'
+import { Easing } from 'react-native'
 
 export type PagerComposition =
   | 'page'
   | 'page:transition'
-  | 'page:pose:previous'
-  | 'page:pose:next'
-  | 'page:pose:current'
+  | 'page:previous'
+  | 'page:next'
+  | 'page:current'
   | 'wrapper'
 
 const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
 
 const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
 )
+export const defaultPagerTransition = {
+  type: 'timing',
+  duration: 300,
+  easing: Easing.linear,
+}
+
+export function pagerAnimation(height, width, translate = 'X', transition = defaultPagerTransition) {
+  const translateProp = `translate${translate}`
+
+  const translateVal = translate === 'X' ? width : height
+
+  return {
+    wrapper: {
+      height,
+      width,
+      overflow: 'hidden',
+    },
+    'page:transition': {
+      [translateProp]: transition,
+    },
+    'page:next': {
+      [translateProp]: translateVal,
 
-export const MobilePagerStyles = {
+    },
+    'page:current': {
+      [translateProp]: 0,
+    },
+    'page:previous': {
+      [translateProp]: -translateVal,
+    },
+  }
+}
+
+export const PagerStyles = {
   ...presets,
-  default: createPagerStyle((Theme) => {
-    const transition = {
-      duration: 500,
-      ease: 'easeInOut',
-      useNativeDriver: true,
-    }
-
-    return {
-      wrapper: {
-        ...Theme.presets.full,
-      },
-      'page:pose:next': {
-        left: Theme.values.width * 1.8,
-        transition: transition,
-      },
-      'page:pose:current': {
-        left: 0,
-        transition: transition,
-      },
-      'page:pose:previous': {
-        left: -Theme.values.width * 1.8,
-        transition: transition,
-      },
-      page: {
-        width: '100%',
-        height: '100%',
-      },
-    }
+  default: createPagerStyle((theme) => ({
+    page: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+    },
+  })),
+  horizontal: createPagerStyle((Theme) => {
+
+    const width = Theme.values.width
+    const height = Theme.values.height * 0.8
+    return pagerAnimation(height, width, 'X')
+  }),
+  vertical: createPagerStyle((Theme) => {
+    const height = Theme.values.height * 0.8
+    const width = Theme.values.width
+    return pagerAnimation(height, width, 'Y')
   }),
-  pageless: createPagerStyle(() => ({})),
 }

package/src/components/RadioInput/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { ReactNode, useRef, ComponentPropsWithoutRef } from 'react'
-import { v4 } from 'uuid'
+import { ReactNode, ComponentPropsWithoutRef } from 'react'
 
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
@@ -10,7 +9,7 @@ import {
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import { View } from '../View'
-import { MobileRadioInputStyles, MobileRadioInputComposition } from './styles'
+import { RadioInputComposition, RadioInputStyles } from './styles'
 
 export * from './styles'
 
@@ -27,7 +26,7 @@ export type RadioButtonProps = Omit<
 > & {
   item: RadioItem
   select: () => void
-  style: StylesOf<MobileRadioInputComposition>
+  style: StylesOf<RadioInputComposition>
   checked: boolean
   defaultValue?: number
 }
@@ -37,8 +36,8 @@ export type RadioGroupProps<T> = {
   value: T
   onValueChange(value: T): void
   label: ReactNode
-  styles?: StylesOf<MobileRadioInputComposition>
-} & ComponentVariants<typeof MobileRadioInputStyles>
+  styles?: StylesOf<RadioInputComposition>
+} & ComponentVariants<typeof RadioInputStyles>
 
 export const RadioButton: React.FC<RadioButtonProps> = ({
   item,

package/src/components/RadioInput/styles.ts

@@ -1,34 +1,32 @@
 import {
-  createDefaultVariantFactory,
-  RadioInputStyles,
+  createDefaultVariantFactory, includePresets,
 } from '@codeleap/common'
 type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark'
 
 type RadioGroupParts = 'label' | 'wrapper' | 'list'
 
-export type MobileRadioInputComposition =
+export type RadioInputComposition =
   | `${RadioParts}:checked`
   | RadioParts
   | RadioGroupParts
 
 const createRadioStyle =
-  createDefaultVariantFactory<MobileRadioInputComposition>()
+  createDefaultVariantFactory<RadioInputComposition>()
 
-const defaultStyles = RadioInputStyles.default
+const presets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))
 
-export const MobileRadioInputStyles = {
-  ...RadioInputStyles,
+export const RadioInputStyles = {
+  ...presets,
   default: createRadioStyle((theme) => {
-    const style = defaultStyles(theme)
 
     const itemHeight = theme.typography.baseFontSize * 1.2
     const markHeight = itemHeight / 2
     const translateX = -(markHeight / 2)
     const translateY = -(markHeight / 2)
     return {
-      ...style,
       itemWrapper: {
-        ...style.itemWrapper,
+        ...theme.presets.row,
+        ...theme.spacing.marginVertical(1.3),
       },
       button: {
         height: itemHeight,

package/src/components/{Scroll.tsx → Scroll/index.tsx}

@@ -8,13 +8,12 @@ import {
   useCodeleapContext,
 } from '@codeleap/common'
 
-import {
-  KeyboardAwareScrollView as KBDView,
-  // @ts-ignore
-} from 'react-native-keyboard-aware-scroll-view'
-import { RefreshControl, ScrollView, ScrollViewProps, ViewStyle } from 'react-native'
-import { ViewProps } from './View'
-import { KeyboardAwareScrollViewTypes } from '../modules'
+import { RefreshControl, RefreshControlProps, ScrollView, StyleSheet } from 'react-native'
+import { ViewProps } from '../View'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { StylesOf } from '../../types'
+import { ScrollComposition, ScrollStyles } from './styles'
+import { KeyboardAwareScrollView } from '../../utils'
 
 type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
 
@@ -25,18 +24,10 @@ export type ScrollProps = KeyboardAwareScrollViewProps &
     changeData?: any
     keyboardAware?: boolean
     refreshing?: boolean
-    styles?: ViewStyle
+    styles?: StylesOf<ScrollComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
   }
 
-const KeyboardAwareScrollView =
-  KBDView as unknown as React.ForwardRefExoticComponent<
-    ViewProps & {
-      refreshControl?: JSX.Element
-      ref?: ScrollView
-
-    } & ScrollViewProps
-  >
-
 export const Scroll = forwardRef<ScrollView, ScrollProps>(
   (scrollProps, ref) => {
     const {
@@ -45,7 +36,8 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       refreshTimeout = 3000,
       children,
       changeData,
-      styles,
+      styles = {},
+      refreshControlProps = {},
       keyboardAware = true,
       ...props
     } = scrollProps
@@ -79,16 +71,15 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
     }, [refreshingDisplay, changeData])
     const { Theme } = useCodeleapContext()
 
-    const variantStyles = useDefaultComponentStyle('View', {
+    const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollStyles>('u:Scroll', {
       variants,
-      styles: {
-        wrapper: styles,
-      },
+      styles,
+      transform: StyleSheet.flatten,
       rootElement: 'wrapper',
     })
 
     const Component = keyboardAware ? KeyboardAwareScrollView : ScrollView
-
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
     return (
       <Component
         style={[Theme.presets.full, style]}
@@ -96,7 +87,13 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
         ref={ref as unknown as ScrollView}
         refreshControl={
           hasRefresh && (
-            <RefreshControl refreshing={refreshingDisplay} onRefresh={onRefresh} />
+            <RefreshControl
+              refreshing={refreshingDisplay}
+              onRefresh={onRefresh}
+              tintColor={refreshStyles?.color}
+              colors={[refreshStyles?.color]}
+              {...refreshControlProps}
+            />
           )
         }
         {...props}
@@ -106,3 +103,4 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
     )
   },
 )
+export * from './styles'

package/src/components/Scroll/styles.ts

@@ -0,0 +1,18 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+
+export type ScrollComposition = 'wrapper' |'content' | 'refreshControl'
+
+const createScrollStyle = createDefaultVariantFactory<ScrollComposition>()
+
+export const ScrollStyles = {
+  default: createScrollStyle((theme) => {
+    return {
+      wrapper: {
+        ...theme.presets.fullHeight,
+      },
+      refreshControl: {
+        color: theme.colors.primary,
+      },
+    }
+  }),
+}

package/src/components/{Sections.tsx → Sections/index.tsx}

@@ -7,15 +7,13 @@ import {
   usePrevious,
   useCodeleapContext,
 } from '@codeleap/common'
-import {
-  KeyboardAwareSectionListProps,
-  KeyboardAwareSectionList as KBDView,
-  // @ts-ignore
-} from 'react-native-keyboard-aware-scroll-view'
+
 import { RefreshControl, SectionList } from 'react-native'
-import { View, ViewProps } from './View'
+import { View, ViewProps } from '../View'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { KeyboardAwareSectionList } from '../../utils'
 
-export type SectionListProps = KeyboardAwareSectionListProps<any> &
+export type SectionListProps = KeyboardAwareScrollViewTypes.KeyboardAwareSectionListProps<any> &
   ViewProps & {
     onRefresh?: () => void
     refreshTimeout?: number
@@ -23,14 +21,6 @@ export type SectionListProps = KeyboardAwareSectionListProps<any> &
     separators?: boolean
   }
 
-const KeyboardAwareSectionList =
-  KBDView as unknown as React.ForwardRefExoticComponent<
-    ViewProps & {
-      refreshControl?: JSX.Element
-      ref?: SectionList
-    }
-  >
-
 export const Sections = forwardRef<SectionList, SectionListProps>(
   (flatListProps, ref) => {
     const {

package/src/components/SegmentedControl/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
 import { Scroll, ScrollProps } from '../Scroll'
 
-import { Easing, EasingFunction, StyleSheet } from 'react-native'
+import { EasingFunction, StyleSheet } from 'react-native'
 import { PropsOf, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
 import { SegmentedControlComposition, SegmentedControlStyles } from './styles'
 import { Touchable } from '../Touchable'