@codeleap/mobile 1.9.27 → 1.9.30

package/src/components/List.tsx

@@ -6,6 +6,7 @@ import {
   useDefaultComponentStyle,
   usePrevious,
   useCodeleapContext,
+  TypeGuards,
 } from '@codeleap/common'
 import {
 
@@ -13,13 +14,29 @@ import {
   // @ts-ignore
 } from 'react-native-keyboard-aware-scroll-view'
 
-import { RefreshControl, FlatList, FlatListProps as RNFlatListProps } from 'react-native'
+import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo } from 'react-native'
 import { View, ViewProps } from './View'
 import { EmptyPlaceholder, EmptyPlaceholderProps } from './EmptyPlaceholder'
-
-export type FlatListProps<T = any> = RNFlatListProps<T> &
+import { ActivityIndicator } from './ActivityIndicator'
+import { Text } from './Text'
+export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+export type ReplaceFlatlistProps<P, T> = Omit<P, DataboundFlatListPropsTypes> & {
+  data: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: ListRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data:T,
+    index: number,
+) => { length: number; offset: number; index: number })
+}
+
+export type FlatListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =RNFlatListProps<Data> &
   ViewProps & {
-    onRefresh?: () => void
     refreshTimeout?: number
     changeData?: any
     separators?: boolean
@@ -112,5 +129,27 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
   },
 )
 
-export const List = ListCP as (<T = any>(props: FlatListProps<T>) => JSX.Element)
+export type PaginationIndicatorProps = {
+  isFetching?: boolean
+  hasMore?: boolean
+  noMoreItemsText: React.ReactChild
+  activityIndicator?: JSX.Element
+}
+
+export const PaginationIndicator = ({ hasMore, isFetching, noMoreItemsText, activityIndicator }: PaginationIndicatorProps) => {
+  if (isFetching) {
+    return activityIndicator || <ActivityIndicator variants={['center', 'marginVertical:3']}/>
+  }
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return <Text variants={['h4', 'marginVertical:3', 'textCenter', 'fullWidth']} text={noMoreItemsText.toString()}/>
+    }
+    return noMoreItemsText
+  }
+  return null
+}
+
+export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
+
+export const List = ListCP as ListComponentType
 

package/src/components/Modal/index.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
-import { View, ViewProps, AnimatedView } from '../View'
+import { View, ViewProps } from '../View'
 import { Button, ButtonProps } from '../Button'
 import { Scroll } from '../Scroll'
 import {
-  capitalize,
   ComponentVariants,
+  getNestedStylesByKey,
   IconPlaceholder,
   onUpdate,
+  TypeGuards,
   useDefaultComponentStyle,
-  useCodeleapContext,
 } from '@codeleap/common'
 import {
   MobileModalComposition,
@@ -18,9 +18,10 @@ import {
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
 
-import { Touchable } from '../Touchable'
+import { useDynamicAnimation } from 'moti'
+import { Backdrop } from '../Backdrop'
+import { useStaticAnimationStyles } from '../../utils/hooks'
 import { Text } from '../Text'
-import { Animated } from '../Animated'
 
 export * from './styles'
 
@@ -34,7 +35,7 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   closable?: boolean
   footer?: React.ReactNode
   title?: React.ReactNode
-  debugName?: string
+  debugName: string
   closeIconName?: IconPlaceholder
   visible: boolean
   toggle?: () => void
@@ -63,7 +64,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     ...props
   } = modalProps
 
-  const variantStyles = useDefaultComponentStyle('Modal', {
+  const variantStyles = useDefaultComponentStyle('u:Modal', {
     variants: variants as any,
     transform: StyleSheet.flatten,
     styles,
@@ -73,61 +74,46 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     const s = [
       variantStyles[key],
       styles[key],
-      visible ? variantStyles[key + ':visible'] : {},
-      visible ? styles[key + ':visible'] : {},
     ]
 
-    return s
+    return StyleSheet.flatten(s)
   }
+  const buttonStyles = React.useMemo(() => getNestedStylesByKey('closeButton', variantStyles), [variantStyles])
 
-  const buttonStyles = React.useMemo(() => {
-    const buttonEntries = {}
+  const boxAnimationStates = useStaticAnimationStyles(variantStyles, ['box:hidden', 'box:visible'])
 
-    for (const [key, style] of Object.entries(variantStyles)) {
-      if (key.startsWith('closeButton')) {
-        buttonEntries[capitalize(key.replace('closeButton', ''), true)] = style
-      }
-    }
-    return buttonEntries
-  }, [variantStyles])
+  const boxAnimation = useDynamicAnimation(() => {
+    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
+  })
 
-  const boxAnimation = {
-    hidden: {
-      ...variantStyles['box:pose'],
-      ...styles['box:pose'],
-    },
-    visible: {
-      ...variantStyles['box:pose:visible'],
-      ...styles['box:pose:visible'],
-    },
-  }
-
-  const wrapperStyle = StyleSheet.flatten(getStyles('wrapper'))
+  onUpdate(() => {
+    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
+  }, [visible])
+  const wrapperStyle = getStyles('wrapper')
   return (
-    <View
-      style={[wrapperStyle, { zIndex: typeof zIndex === 'number' ? zIndex : wrapperStyle?.zIndex }]}
-      pointerEvents={visible ? 'auto' : 'none'}
-    >
-      <AnimatedView style={getStyles('overlay')} transition={'opacity'} />
+    <View style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]} pointerEvents={visible ? 'auto' : 'none'}>
+
       <Scroll
         style={getStyles('innerWrapper')}
         contentContainerStyle={getStyles('innerWrapperScroll')}
         scrollEnabled={scroll}
         keyboardAware={keyboardAware}
       >
-        {dismissOnBackdrop && (
-          <Touchable
-            debugName={`${debugName} modal backdrop`}
-            activeOpacity={1}
-            onPress={() => toggle()}
-            style={getStyles('touchableBackdrop')}
-          />
-        )}
-        <Animated
-          component='View'
-          config={boxAnimation}
-          pose={visible ? 'visible' : 'hidden'}
+        <Backdrop visible={visible} debugName={`Modal ${debugName} backdrop`} styles={{
+          'wrapper:hidden': variantStyles['backdrop:hidden'],
+          'wrapper:visible': variantStyles['backdrop:visible'],
+          wrapper: variantStyles.backdrop,
+        }} onPress={(dismissOnBackdrop && closable) ? toggle : (() => {})}
+        wrapperProps={{
+          transition: { ...variantStyles['backdrop:transition'] },
+        }}
+        />
+        <View
+          animated
+          state={boxAnimation}
           style={getStyles('box')}
+          transition={{ ...variantStyles['box:transition'] }}
+          {...props}
         >
           {(title || showClose) && (
             <View style={getStyles('header')}>
@@ -137,7 +123,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
                 title
               )}
 
-              {showClose && closable && (
+              {(showClose && closable) && (
                 <Button
                   debugName={`${debugName} modal close button`}
                   icon={closeIconName as IconPlaceholder}
@@ -155,9 +141,10 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
               {typeof footer === 'string' ? <Text text={footer} /> : footer}
             </View>
           )}
-        </Animated>
+        </View>
       </Scroll>
     </View>
+
   )
 }
 

package/src/components/Modal/styles.ts

@@ -1,58 +1,40 @@
 import {
+  assignTextStyle,
   ButtonComposition,
   createDefaultVariantFactory,
   includePresets,
-  ModalComposition,
-  ModalStyles,
-  assignTextStyle,
 } from '@codeleap/common'
 
-export const backgroundTransition = {
-  duration: 200,
-  ease: 'easeOut',
-  useNativeDriver: false,
-}
-
-export const modalTransition = {
-  duration: 150,
-  ease: 'easeOut',
-  useNativeDriver: false,
-}
+export type AnimatableParts = 'box' | 'backdrop'
 
 export type MobileModalParts =
+  | AnimatableParts
   | 'wrapper'
-  | 'overlay'
   | 'innerWrapper'
   | 'innerWrapperScroll'
-  | 'box'
-  | 'footer'
   | 'body'
+  | 'footer'
   | 'header'
-  | 'touchableBackdrop'
-  | 'box:pose'
   | 'title'
   | `closeButton${Capitalize<ButtonComposition>}`
 
 export type MobileModalComposition =
   | MobileModalParts
-  | `${MobileModalParts}:visible`
+  | `${AnimatableParts}:visible`
+  | `${AnimatableParts}:hidden`
+  | `${AnimatableParts}:transition`
 
 const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
 
-const presets = includePresets((style) => createModalStyle(() => ({ body: style })),
-)
-
-const defaultModalStyles = ModalStyles
+const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
 
 export const MobileModalStyles = {
-  ...defaultModalStyles,
+
   ...presets,
   default: createModalStyle((Theme) => {
     const fullSize = {
       ...Theme.presets.whole,
       position: 'absolute',
-      width: Theme?.values?.width,
-      height: Theme?.values?.height,
     }
 
     return {
@@ -61,16 +43,34 @@ export const MobileModalStyles = {
 
         ...fullSize,
       },
-
-      overlay: {
-        opacity: 0,
+      'box:transition': {
+        scale: {
+          duration: Theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+        opacity: {
+          duration: Theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      'backdrop:transition': {
+        opacity: {
+          duration: Theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      backdrop: {
 
         backgroundColor: Theme.colors.black,
         ...fullSize,
       },
-      'overlay:visible': {
+
+      'backdrop:visible': {
         opacity: 0.5,
       },
+      'backdrop:hidden': {
+        opacity: 0,
+      },
       innerWrapper: {},
       innerWrapperScroll: {
         display: 'flex',
@@ -84,18 +84,15 @@ export const MobileModalStyles = {
         borderRadius: Theme.borderRadius.medium,
         ...Theme.spacing.padding(2),
       },
-      touchableBackdrop: {
-        ...fullSize,
-      },
-      'box:pose': {
+
+      'box:hidden': {
         opacity: 0,
         scale: 0.8,
-        transition: modalTransition,
+
       },
-      'box:pose:visible': {
+      'box:visible': {
         opacity: 1,
         scale: 1,
-        transition: modalTransition,
       },
       header: {
         flexDirection: 'row',
@@ -114,7 +111,7 @@ export const MobileModalStyles = {
       },
     }
   }),
-  popup: createModalStyle((theme) => ({})),
+  popup: createModalStyle(() => ({})),
   fullscreen: createModalStyle((theme) => ({
     overlay: {
       backgroundColor: theme.colors.background,

package/src/components/NewPager/index.tsx

@@ -43,9 +43,9 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
     returnEarly = true,
     renderPageWrapper,
     pageWrapperProps = {},
-
+    children,
   } = pagerProps
-  let { children } = pagerProps
+
   let variantStyles = useDefaultComponentStyle<'u:Pager', typeof NewMobilePagerStyles>(
     'u:Pager',
     {
@@ -58,7 +58,7 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
 
   const lastPage = nChildren - 1
 
-  children = Array.isArray(children) ? children : [children]
+  const childArr = React.Children.toArray(children)
 
   const WrapperComponent = renderPageWrapper || View
 
@@ -68,7 +68,7 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
   return (
     <View style={[variantStyles.wrapper, style]} >
       {
-        children.map((child:NewPagerProps['children'][number], index) => {
+        childArr.map((child:NewPagerProps['children'][number], index) => {
           const isActive = index === page
           const isLast = index === lastPage
           const isFirst = index === 0
@@ -96,9 +96,7 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
             index,
             page,
           }
-          console.log({
-            child,
-          })
+
           const content = typeof child === 'function' ? child(pageProps) : child
 
           const wrapperProps = {

package/src/components/Overlay.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import {
   ComponentVariants,
   IconPlaceholder,
+  onUpdate,
   OverlayComposition,
   OverlayStyles,
   useDefaultComponentStyle,
@@ -13,7 +14,8 @@ import { Button } from './Button'
 import { View } from './View'
 import { StylesOf } from '../types/utility'
 import { StyleSheet, ViewProps } from 'react-native'
-import { AnimatedTouchable } from './Touchable'
+import { AnimatedTouchable, Touchable } from './Touchable'
+import { useAnimationState } from 'moti'
 
 export type OverlayProps = ViewProps & {
   title?: ReactNode
@@ -43,21 +45,28 @@ export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
     variants: variants as any,
   }) as StylesOf<OverlayComposition>
 
-  const touchableStyle = [
+  const animation = useAnimationState({
+    visible: variantStyles['wrapper:visible'],
+    hidden: styles['wrapper:visible'],
+  })
+
+  onUpdate(() => {
+    animation.transitionTo(visible ? 'visible' : 'hidden')
+  }, [visible])
+
+  const viewStyles = [
     variantStyles.wrapper,
     styles.wrapper,
-    visible && variantStyles['wrapper:visible'],
-    visible && styles['wrapper:visible'],
   ]
 
   return (
-    <AnimatedTouchable
-      // @ts-ignore
-      transition={'opacity'}
-      style={touchableStyle}
-      {...props}
-    >
-      <View>
+    <View animated state={animation} style={viewStyles}>
+      <Touchable
+
+        feedbackVariant='none'
+        variants={['whole', 'full', 'absolute']}
+        {...props}
+      >
         {(title || showClose) && (
           <View style={variantStyles.header}>
             <InputLabel style={variantStyles.title} label={title} />
@@ -71,7 +80,7 @@ export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
             )}
           </View>
         )}
-      </View>
-    </AnimatedTouchable>
+      </Touchable>
+    </View>
   )
 }

package/src/components/Scroll.tsx

@@ -9,12 +9,14 @@ import {
 } from '@codeleap/common'
 
 import {
-  KeyboardAwareScrollViewProps,
   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'
+
+type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
 
 export type ScrollProps = KeyboardAwareScrollViewProps &
   ViewProps & {

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,182 @@
+import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
+import { Scroll, ScrollProps } from '../Scroll'
+
+import { Easing, EasingFunction, StyleSheet } from 'react-native'
+import { PropsOf, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import { SegmentedControlComposition, SegmentedControlStyles } from './styles'
+import { Touchable } from '../Touchable'
+import { StylesOf } from '../../types/utility'
+import { Text } from '../Text'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { View } from '../View'
+export * from './styles'
+export type SegmentedControlRef =KeyboardAwareScrollViewTypes.KeyboardAwareScrollView & {
+  scrollTo: (index: number) => void
+  scrollToCurrent: () => void
+}
+
+export type SegmentedControlProps<T = string> = ScrollProps & {
+    options : {label: string; value: T }[]
+    onValueChange: (value: T) => any
+    value: T
+    debugName: string
+    animation?: {
+      duration?: number
+      easing?: EasingFunction
+    }
+    styles?: StylesOf<SegmentedControlComposition>
+    scrollProps?: any
+    RenderButton?: (props: SegmentedControlProps & {
+      touchableProps: PropsOf<typeof Touchable>
+      textProps: PropsOf<typeof Text>
+      option: {label: string; value: any}
+    }) => ReactElement
+    RenderAnimatedView?: (props: SegmentedControlProps) => ReactElement
+}
+
+const defaultAnimation = {
+  duration: 200,
+  // easing: Easing.linear,
+}
+
+const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
+  const {
+    options = [],
+    onValueChange,
+    debugName,
+    value,
+    styles = {},
+    animation = {},
+    variants = [],
+    scrollProps = {},
+    RenderAnimatedView,
+    RenderButton,
+
+  } = props
+  const { Theme } = useCodeleapContext()
+
+  const _animation = {
+    ...defaultAnimation, ...animation,
+  }
+
+  let variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlStyles>('u:SegmentedControl', {
+    styles,
+    transform: StyleSheet.flatten,
+    variants,
+  })
+
+  const scrollRef = useRef<KeyboardAwareScrollViewTypes.KeyboardAwareScrollView>(null)
+
+  function scrollTo(idx:number) {
+    if (!scrollRef.current) return
+    setTimeout(() => {
+      scrollRef.current?.scrollToPosition?.(widthStyle.width * idx, 0, true)
+    })
+  }
+
+  const widthStyle = useMemo(() => {
+    const maxWordLength = Object.assign([], options)
+      .sort((a, b) => {
+        return a.label.length - b.label.length
+      })[0].label.length
+    const fitMaxWidth = Theme.values.width - Theme.spacing.value(4)
+    let fitItemWidth = maxWordLength * options.length * 6
+    if (fitItemWidth * options.length < fitMaxWidth) fitItemWidth = fitMaxWidth / options.length
+    return { width: fitItemWidth }
+  }, [options])
+
+  const currentOptionIdx = options.findIndex(o => o.value === value) || 0
+
+  const translateX = widthStyle.width * currentOptionIdx
+
+  const onPress = (txt:string, idx: number) => {
+    return () => {
+      onValueChange(txt)
+      scrollTo(idx)
+    }
+  }
+
+  const hasScrolledInitially = useRef(false)
+
+  useImperativeHandle(ref, () => {
+    if (!scrollRef.current) return null
+
+    return {
+      ...(scrollRef.current),
+      scrollTo,
+      scrollToCurrent() {
+        if (!scrollRef.current) return
+        scrollTo(currentOptionIdx)
+      },
+    } as SegmentedControlRef
+  })
+
+  if (!hasScrolledInitially.current && scrollRef.current) {
+    scrollTo(currentOptionIdx)
+    hasScrolledInitially.current = true
+  }
+
+  const AnimatedView = RenderAnimatedView || View
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+  return (
+    <Scroll
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={variantStyles.scroll}
+      contentContainerStyle={variantStyles.scrollContent}
+      {...scrollProps}
+      ref={scrollRef}
+    >
+      <View style={variantStyles.wrapper}>
+        <AnimatedView {...props}
+          animated
+          style={[variantStyles.selectedBubble, widthStyle]}
+          animate={{
+            translateX,
+          }}
+
+          transition={_animation}
+        />
+        {options.map((o, idx) => {
+          const selected = value === o.value
+
+          const touchableProps = {
+            key: idx,
+            debugName: `Segmented Control ${debugName}, option ${o.label}`,
+            onPress: onPress(o.value, idx),
+            style: [widthStyle, variantStyles.button],
+          }
+
+          const textProps = {
+            text: o.label as string,
+            colorChangeConfig: _animation,
+            style: StyleSheet.flatten([variantStyles.text, selected && variantStyles['text:selected']]),
+            animated: true,
+          }
+
+          if (RenderButton) {
+            return (
+              <RenderButton {...props} touchableProps={touchableProps} key={touchableProps.key} textProps={textProps} option={o}/>
+            )
+          }
+          return <Touchable
+            {...touchableProps}
+            key={touchableProps.key}
+          >
+            <Text
+
+              {...textProps}
+            />
+
+          </Touchable>
+
+        })}
+      </View>
+    </Scroll>
+  )
+
+})
+
+type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & {ref?: React.Ref<SegmentedControlRef>}) => ReactElement
+
+export const SegmentedControl = _SegmentedControl as SegControlComponent