@codeleap/mobile 1.2.1 → 1.4.0

package/src/components/Pager/index.tsx

@@ -0,0 +1,241 @@
+import {
+  ComponentVariants,
+  onUpdate,
+  useDefaultComponentStyle,
+  useDebounce,
+  useCodeleapContext,
+} from '@codeleap/common'
+import React, {
+  forwardRef,
+  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'
+
+export * from './styles'
+
+export type PagerProps = {
+  variants?: ComponentVariants<typeof MobilePagerStyles>['variants'];
+  styles?: StylesOf<PagerComposition>;
+  page?: number;
+  loop?: boolean;
+  debug?: boolean;
+  onPageChange?: (page: number) => void;
+};
+
+export type PagerRef = {
+  forward(by?: number): void;
+  back(by?: number): void;
+  to(index?: number): void;
+};
+
+
+export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
+  const {
+    children,
+    styles,
+    variants,
+    page: propPage,
+    debug,
+    loop,
+    onPageChange,
+  } = pagerProps
+
+  const [page, setPage] = useState(() => propPage ?? 0)
+
+  const variantStyles = useDefaultComponentStyle<'u:Pager', typeof MobilePagerStyles>(
+    'u:Pager',
+    {
+      styles,
+      transform: StyleSheet.flatten,
+      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])
+
+  onUpdate(() => {
+    if (typeof propPage === 'number') {
+      setPage(propPage)
+    }
+  }, [propPage])
+  
+  useImperativeHandle(ref, () => pagerRef.current)
+
+  const pagePoses = useMemo(() => {
+    return {
+      current: variantStyles['page:pose:current'],
+      next: variantStyles['page:pose:next'],
+      previous: variantStyles['page:pose:previous'],
+    }
+  }, [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' onPress={pagerRef.current.back} />
+          <Text text={page.toString()} />
+          <Button text='next' onPress={pagerRef.current.forward} />
+        </View>
+      )}
+    </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

@@ -0,0 +1,51 @@
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+
+export type PagerComposition =
+  | 'page'
+  | 'page:transition'
+  | 'page:pose:previous'
+  | 'page:pose:next'
+  | 'page:pose:current'
+  | 'wrapper';
+
+const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
+
+const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
+)
+
+export const MobilePagerStyles = {
+  ...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%',
+      },
+    }
+  }),
+  pageless: createPagerStyle(() => ({})),
+}

package/src/components/RadioInput/index.tsx

@@ -2,75 +2,99 @@ import * as React from 'react'
 import { ReactNode, useRef, ComponentPropsWithoutRef } from 'react'
 import { v4 } from 'uuid'
 
-import {Text } from '../Text'
+import { Text } from '../Text'
 import { Touchable } from '../Touchable'
-import { ComponentVariants, StylesOf, useComponentStyle } from '@codeleap/common'
+import {
+  ComponentVariants,
+  StylesOf,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
 import { View } from '../View'
-import { MobileRadioInputStyles, MobileRadioInputComposition} from './styles'
+import { MobileRadioInputStyles, MobileRadioInputComposition } from './styles'
 
 export * from './styles'
 
 type RadioItem<T extends unknown = any> = {
-    value: T,
-    label: ReactNode
-}
+  value: T;
+  label: ReactNode;
+};
 
-const getRadioStyle = (props) => useComponentStyle('RadioInput', props)
+const getRadioStyle = (props) => useDefaultComponentStyle('RadioInput', props)
 
-export type RadioButtonProps = Omit<ComponentPropsWithoutRef<typeof Touchable>, 'style'> & {
-    item: RadioItem
-    select: () => void
-    style: StylesOf<MobileRadioInputComposition>
-    checked: boolean
-}   
+export type RadioButtonProps = Omit<
+  ComponentPropsWithoutRef<typeof Touchable>,
+  'style'
+> & {
+  item: RadioItem;
+  select: () => void;
+  style: StylesOf<MobileRadioInputComposition>;
+  checked: boolean;
+  defaultValue?: number;
+};
 
 export type RadioGroupProps<T> = {
-    options: RadioItem<T>[]
-    value: T
-    onValueChange(value:T):void
-    label:ReactNode
-    styles?: StylesOf<MobileRadioInputComposition>
-} & ComponentVariants<typeof MobileRadioInputStyles>
-
+  options: RadioItem<T>[];
+  value: T;
+  onValueChange(value: T): void;
+  label: ReactNode;
+  styles?: StylesOf<MobileRadioInputComposition>;
+} & ComponentVariants<typeof MobileRadioInputStyles>;
 
-export const RadioButton:React.FC<RadioButtonProps> = ({item, select, style, checked, ...props}) => {
- 
-  return <Touchable  onPress={select} style={style.itemWrapper} >
-    <View  style={[
-      style.button,
-      checked && style['button:checked'],
-    ]}> 
-        <View style={[
-              style['buttonMark'],
-              checked && style['buttonMark:checked'],
-        ]} />
-    </View>
-    {typeof item.label === 'string' ? <Text text={item.label} style={style.text}/> : item.label }
-  </Touchable>
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  item,
+  select,
+  style,
+  checked,
+  ...props
+}) => {
+  return (
+    <Touchable onPress={select} style={style.itemWrapper}>
+      <View style={[style.button, checked && style['button:checked']]}>
+        <View
+          style={[style.buttonMark, checked && style['buttonMark:checked']]}
+        />
+      </View>
+      {typeof item.label === 'string' ? (
+        <Text text={item.label} style={style.text} />
+      ) : (
+        item.label
+      )}
+    </Touchable>
+  )
 }
 
+export const RadioGroup = <T extends unknown>(
+  radioGroupProps: RadioGroupProps<T>,
+) => {
+  const {
+    options,
+    value,
+    onValueChange,
+    label,
+    responsiveVariants,
+    variants,
+    styles,
+  } = radioGroupProps
 
-export const RadioGroup =  <T extends unknown>(radioGroupProps:RadioGroupProps<T>) => {
-  const {options, value, onValueChange, label, responsiveVariants, variants, styles} = radioGroupProps
-  
   const radioStyle = getRadioStyle({
     responsiveVariants,
     variants,
-    styles, 
+    styles,
   })
-  return <View style={radioStyle.wrapper}>
-    {typeof label === 'string' ? <Text text={label}/> : label }
-    <View style={radioStyle.listWrapper}>
-      {
-        options?.map((item, idx) =>  <RadioButton 
-          item={item} 
-          key={idx} 
-          style={radioStyle}
-         
-          checked={value === item.value}
-          select={() => onValueChange(item.value)} 
-        />)
-      }
+  return (
+    <View style={radioStyle.wrapper}>
+      {typeof label === 'string' ? <Text text={label} /> : label}
+      <View style={radioStyle.listWrapper}>
+        {options?.map((item, idx) => (
+          <RadioButton
+            item={item}
+            key={idx}
+            style={radioStyle}
+            checked={value === item.value}
+            select={() => onValueChange(item.value)}
+          />
+        ))}
+      </View>
     </View>
-  </View>
+  )
 }

package/src/components/RadioInput/styles.ts

@@ -1,11 +1,18 @@
-import { createDefaultVariantFactory,  RadioInputStyles } from '@codeleap/common';
-type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark'
-    
-type RadioGroupParts = 'label' |'wrapper' |'list'
+import {
+  createDefaultVariantFactory,
+  RadioInputStyles,
+} from '@codeleap/common'
+type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark';
 
-export type MobileRadioInputComposition = `${RadioParts}:checked` | RadioParts | RadioGroupParts
+type RadioGroupParts = 'label' | 'wrapper' | 'list';
 
-const createRadioStyle = createDefaultVariantFactory<MobileRadioInputComposition>()
+export type MobileRadioInputComposition =
+  | `${RadioParts}:checked`
+  | RadioParts
+  | RadioGroupParts;
+
+const createRadioStyle =
+  createDefaultVariantFactory<MobileRadioInputComposition>()
 
 const defaultStyles = RadioInputStyles.default
 
@@ -16,47 +23,45 @@ export const MobileRadioInputStyles = {
 
     const itemHeight = theme.typography.baseFontSize * 1.2
     const markHeight = itemHeight / 2
-    const translateX = -(markHeight/2)
-    const translateY = -(markHeight/2)
+    const translateX = -(markHeight / 2)
+    const translateY = -(markHeight / 2)
     return {
       ...style,
       itemWrapper: {
         ...style.itemWrapper,
       },
-      button: { 
+      button: {
         height: itemHeight,
         width: itemHeight,
         ...theme.border.primary(1),
         borderRadius: theme.borderRadius.large,
-        
+
         position: 'relative',
         ...theme.spacing.marginRight(1),
-
       },
-      'buttonMark': {
+      buttonMark: {
         backgroundColor: theme.colors.primary,
         position: 'absolute',
         left: '50%',
         top: '50%',
         height: markHeight,
         width: markHeight,
-        
-        transform: [{translateX},{translateY}],
+
+        transform: [{ translateX }, { translateY }],
         borderRadius: theme.borderRadius.large,
-        opacity: 0
+        opacity: 0,
       },
       'buttonMark:checked': {
-          opacity: 1
+        opacity: 1,
       },
     }
   }),
   square: createRadioStyle(() => ({
-    'buttonMark': {
+    buttonMark: {
       borderRadius: 0,
     },
     button: {
       borderRadius: 0,
-
     },
   })),
 }

package/src/components/Scroll.tsx

@@ -1,87 +1,98 @@
 import * as React from 'react'
 import { forwardRef, useState } from 'react'
-import { deepEqual, onUpdate, useComponentStyle, usePrevious, useStyle } from '@codeleap/common'
-import { KeyboardAwareScrollViewProps, KeyboardAwareScrollView  as KBDView} from 'react-native-keyboard-aware-scroll-view'
-import { RefreshControl, ScrollView } from 'react-native'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  KeyboardAwareScrollViewProps,
+  KeyboardAwareScrollView as KBDView,
+} from 'react-native-keyboard-aware-scroll-view'
+import { RefreshControl, ScrollView, ScrollViewProps, ViewStyle } from 'react-native'
 import { ViewProps } from './View'
 
+export type ScrollProps = KeyboardAwareScrollViewProps &
+  ViewProps & {
+    onRefresh?: () => void;
+    refreshTimeout?: number;
+    changeData?: any;
+    styles?: ViewStyle
+  };
 
-export type ScrollProps = KeyboardAwareScrollViewProps & ViewProps & {
-  onRefresh?:() => void
-  refreshTimeout?: number
-  changeData?:any
-}
+const KeyboardAwareScrollView =
+  KBDView as unknown as React.ForwardRefExoticComponent<
+    ViewProps & {
+      refreshControl?: JSX.Element;
+      ref?: ScrollView;
+     
+    } & ScrollViewProps
+  >
 
-const KeyboardAwareScrollView = KBDView as unknown as React.ForwardRefExoticComponent<
-  ViewProps & 
-  {
-    refreshControl?: JSX.Element
-    ref?: ScrollView
-    
-  }
->
+export const Scroll = forwardRef<ScrollView, ScrollProps>(
+  (scrollProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      children,
+      changeData,
+      styles,
+      ...props
+    } = scrollProps
+    const hasRefresh = !!props.onRefresh
+    const [refreshing, setRefreshing] = useState(false)
 
+    const timer = React.useRef(null)
+    const previousData = usePrevious(changeData)
 
-export const Scroll = forwardRef<ScrollView, ScrollProps>((scrollProps, ref) => {
-  const { 
-    variants = [], 
-    style,
-    refreshTimeout = 3000,
-    children,
-    changeData,
-    ...props
-  } = scrollProps
-  const hasRefresh = !!props.onRefresh
-  const [refreshing, setRefreshing] = useState(false)
-
-  const timer = React.useRef(null)
-  const previousData = usePrevious(changeData)
-
-  const onRefresh = () => {
-    if(timer.current){
-      clearTimeout(timer.current)
-    }
-
-    setRefreshing(true)   
-  
-    props.onRefresh()
-   
-    timer.current = setTimeout(() => {
-      setRefreshing(false)
-    }, refreshTimeout)
-
-  }
-  onUpdate(() => {
-    if(refreshing && !deepEqual(previousData, changeData)){
-      setRefreshing(false)
-      if(timer.current){
+    const onRefresh = () => {
+      if (timer.current) {
         clearTimeout(timer.current)
       }
-    }
-  },[refreshing, changeData])
-  const {
-    Theme
-  } = useStyle()
 
-  const variantStyles  = useComponentStyle('View', {
-    variants
-  })
+      setRefreshing(true)
 
-  return (
+      props.onRefresh()
 
-    <KeyboardAwareScrollView
-      style={[Theme.presets.full, variantStyles.wrapper, style]}
-      ref={ref as unknown as ScrollView}
-      {...props}
-      refreshControl={
-        hasRefresh &&
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-          />
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshing && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
       }
-    > 
-      { children }
-    </KeyboardAwareScrollView>
-  )
-})
+    }, [refreshing, changeData])
+    const { Theme } = useCodeleapContext()
+
+    const variantStyles = useDefaultComponentStyle('View', {
+      variants,
+      styles: {
+        wrapper: styles,
+      },
+      rootElement: 'wrapper',
+    })
+
+    return (
+      <KeyboardAwareScrollView
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as ScrollView}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      >
+        {children}
+      </KeyboardAwareScrollView>
+    )
+  },
+)