@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/RefreshControl/index.tsx

@@ -0,0 +1,28 @@
+import { ComponentVariants, StylesOf, useDefaultComponentStyle } from '@codeleap/common'
+import { RefreshControl as RNRefreshControl, RefreshControlProps as RNRefreshControlProps } from 'react-native'
+import { RefreshControlComposition, RefreshControlPresets } from './styles'
+
+export type RefreshControlProps = {
+  styles?: StylesOf<RefreshControlComposition>
+} & RNRefreshControlProps & ComponentVariants<typeof RefreshControlPresets>
+
+export const RefreshControl: React.FC<RefreshControlProps> = (props) => {
+  const { variants = [], styles } = props
+
+  const variantStyles = useDefaultComponentStyle<'u:RefreshControl', typeof RefreshControlPresets>('u:RefreshControl', {
+    variants,
+    styles,
+  })
+  return (
+    <RNRefreshControl
+      colors={[variantStyles.loadingAnimation?.color]}
+      tintColor={variantStyles.loadingAnimation?.color}
+      progressBackgroundColor={variantStyles.progressBackgroundColor?.color}
+      titleColor={variantStyles.titleColor?.color}
+      {...props}
+    />
+
+  )
+}
+
+export * from './styles'

package/src/components/RefreshControl/styles.ts

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

package/src/components/Scroll/index.tsx

@@ -6,15 +6,14 @@ import {
   useDefaultComponentStyle,
   usePrevious,
 } from '@codeleap/common'
-
-import { RefreshControl, RefreshControlProps, ScrollView, StyleSheet } from 'react-native'
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import { ScrollView, StyleSheet } from 'react-native'
 import { ViewProps } from '../View'
+import { RefreshControl, RefreshControlProps } from '../RefreshControl'
 import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { StylesOf } from '../../types'
-import { ScrollComposition, ScrollStyles } from './styles'
-import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
-import { ScrollView as MotiScrollView } from 'moti'
-// import { KeyboardAwareScrollView } from '../../utils'
+import { ScrollComposition, ScrollPresets } from './styles'
+import { GetKeyboardAwarePropsOptions } from '../../utils'
 
 type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
 
@@ -75,46 +74,32 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       }
     }, [refreshingDisplay, changeData])
 
-    const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollStyles>('u:Scroll', {
+    const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollPresets>('u:Scroll', {
       variants,
       styles,
       transform: StyleSheet.flatten,
       rootElement: 'content',
     })
 
-    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
-    const _scrollProps = {
-      style: [variantStyles.wrapper, style],
-      contentContainerStyle: [variantStyles.content, contentContainerStyle],
-      ref: ref as unknown as ScrollView,
-      refreshControl: hasRefresh && (
-        <RefreshControl
-          refreshing={refreshingDisplay}
-          onRefresh={onRefresh}
-          tintColor={refreshStyles?.color}
-          colors={[refreshStyles?.color]}
-          {...refreshControlProps}
-        />
-      ),
-      ...props,
-    }
-    const keyboard = useKeyboardAwareView({
-      debugName,
-    })
-
-    const rootProps = keyboard.getKeyboardAwareProps(_scrollProps, {
-      adapt: 'marginBottom',
-      baseStyleProp: 'style',
-      animated,
-      ...keyboardAware,
-
-    })
-    const Component = (animated ? MotiScrollView : ScrollView ) as unknown as typeof ScrollView
+    const Component = (animated ? KeyboardAwareScrollView : KeyboardAwareScrollView) as unknown as typeof ScrollView
 
     return (
       <Component
-        {...rootProps}
-
+        style={[variantStyles.wrapper, style]}
+        contentContainerStyle={[variantStyles.content, contentContainerStyle]}
+        showsVerticalScrollIndicator={false}
+        // @ts-expect-error - Refs suck
+        ref={ref}
+        refreshControl= {
+          hasRefresh && (
+            <RefreshControl
+              refreshing={refreshingDisplay}
+              onRefresh={onRefresh}
+              {...refreshControlProps}
+            />
+          )
+        }
+        {...props}
       >
         {children}
       </Component>

package/src/components/Scroll/styles.ts

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

package/src/components/Sections/index.tsx

@@ -1,90 +1,152 @@
 import * as React from 'react'
-import { forwardRef, useState } from 'react'
+import { forwardRef } from 'react'
 import {
-  deepEqual,
-  onUpdate,
   useDefaultComponentStyle,
-  usePrevious,
-  useCodeleapContext,
+  ComponentVariants,
+  useCallback,
 } from '@codeleap/common'
 
-import { RefreshControl, SectionList } from 'react-native'
+import { 
+  RefreshControl, 
+  StyleSheet, 
+  RefreshControlProps, 
+  SectionListRenderItemInfo,
+  SectionListProps as RNSectionListProps,
+} from 'react-native'
 import { View, ViewProps } from '../View'
-import { KeyboardAwareScrollViewTypes } from '../../modules'
-import { KeyboardAwareSectionList } from '../../utils'
-
-export type SectionListProps = KeyboardAwareScrollViewTypes.KeyboardAwareSectionListProps<any> &
-  ViewProps & {
-    onRefresh?: () => void
-    refreshTimeout?: number
-    changeData?: any
+import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { StylesOf } from '../../types'
+import { KeyboardAwareSectionList } from 'react-native-keyboard-aware-scroll-view'
+import { SectionsComposition, SectionsPresets } from './styles'
+export * from './styles'
+
+export type DataboundSectionListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+
+export type AugmentedSectionRenderItemInfo<T> = SectionListRenderItemInfo<T> & {
+  isFirst: boolean
+  isLast: boolean
+  isOnly: boolean
+}
+
+export type ReplaceSectionListProps<P, T> = Omit<P, DataboundSectionListPropsTypes> & {
+  sections: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: AugmentedSectionRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data:T,
+    index: number,
+  ) => { length: number; offset: number; index: number })
+  fakeEmpty?: boolean
+}
+
+export * from './styles'
+
+
+export type SectionListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> = ReplaceSectionListProps<RNSectionListProps<Data>, Data> &
+  Omit<ViewProps, 'variants'> & {
     separators?: boolean
-  }
+    placeholder?: EmptyPlaceholderProps
+    styles?: StylesOf<SectionsComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+    fakeEmpty?: boolean
+  } & ComponentVariants<typeof SectionsPresets>
 
-export const Sections = forwardRef<SectionList, SectionListProps>(
-  (flatListProps, ref) => {
+
+export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
+  (sectionsProps, ref) => {
     const {
       variants = [],
       style,
-      refreshTimeout = 3000,
-      changeData,
+      styles = {},
+      onRefresh,
+      component,
+      refreshing,
+      placeholder,
+      keyboardAware,
+      refreshControlProps = {},
+      fakeEmpty,
+      refreshControl,
       ...props
-    } = flatListProps
-    const hasRefresh = !!props.onRefresh
-    const [refreshing, setRefreshing] = useState(false)
+    } = sectionsProps
 
-    const timer = React.useRef(null)
-    const previousData = usePrevious(changeData)
+    const variantStyles = useDefaultComponentStyle<'u:Sections', typeof SectionsPresets>('u:Sections', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
 
-    const onRefresh = () => {
-      if (timer.current) {
-        clearTimeout(timer.current)
-      }
+    })
+    
+    const renderSeparator = () => {
+      return (
+        <View style={variantStyles.separator}></View>
+      )
+    }
 
-      setRefreshing(true)
+    const getItemPosition = (section, itemIdx) => {
+      const listLength = section?.length || 0
 
-      props.onRefresh()
+      const isFirst = itemIdx === 0
+      const isLast = itemIdx === listLength - 1
+      const isOnly = isFirst && isLast
 
-      timer.current = setTimeout(() => {
-        setRefreshing(false)
-      }, refreshTimeout)
+      return { isFirst, isLast, isOnly }
     }
-    onUpdate(() => {
-      if (refreshing && !deepEqual(previousData, changeData)) {
-        setRefreshing(false)
-        if (timer.current) {
-          clearTimeout(timer.current)
-        }
-      }
-    }, [refreshing, changeData])
-    const { Theme } = useCodeleapContext()
 
-    const variantStyles = useDefaultComponentStyle('View', {
-      variants,
-    })
+    const getSectionPosition = (data) => {
+      const listLength = props.sections?.length || 0
 
-    const renderSeparator = () => {
-      return (
-        <View variants={['separator']}></View>
-      )
+      const isFirst = data.section.key === props.sections[0].key
+      const isLast = data.section.key === props.sections[listLength - 1].key
+      const isOnly = isFirst && isLast
+
+      return { isFirst, isLast, isOnly }
     }
 
+    const renderSectionHeader = useCallback((data) => {
+      if (!props?.renderSectionHeader) return null
+
+      return props?.renderSectionHeader({ ...data, ...getSectionPosition(data) })
+    }, [props?.renderSectionHeader, props?.sections?.length])
+
+    const renderSectionFooter = useCallback((data) => {
+      if (!props?.renderSectionFooter) return null
+
+      return props?.renderSectionFooter({ ...data, ...getSectionPosition(data) })
+    }, [props?.renderSectionFooter, props?.sections?.length])
+
+    const renderItem = useCallback((data) => {
+      if (!props?.renderItem) return null
+
+      return props?.renderItem({ ...data, ...getItemPosition(data.section?.data, data?.index) })
+
+    }, [props?.renderItem, props?.sections?.length])
+
     const separatorProp = props.separators
-    const isEmpty = !props.data || !props.data.length
+    const isEmpty = !props.sections || !props.sections.length
     const separator = !isEmpty && separatorProp == true && renderSeparator
 
     return (
       <KeyboardAwareSectionList
-        style={[Theme.presets.full, style]}
-        contentContainerStyle={[variantStyles.wrapper]}
-        ref={ref as unknown as SectionList}
+        style={[variantStyles.wrapper,style]}
+        contentContainerStyle={[variantStyles.content]}
+        showsVerticalScrollIndicator={false}
+        // @ts-ignore
+        ref={ref}
         ItemSeparatorComponent={separator}
         {...props}
         refreshControl={
-          hasRefresh && (
+          !!onRefresh && (
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           )
         }
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+        renderSectionFooter={renderSectionFooter}
       />
     )
   },

package/src/components/Sections/styles.ts

@@ -0,0 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type SectionsComposition = 'wrapper' |'content' | 'separator'
+
+const createSectionsStyle = createDefaultVariantFactory<SectionsComposition>()
+
+export const SectionsPresets = includePresets(style => createSectionsStyle(() => ({ content: style })))

package/src/components/SegmentedControl/Option.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { IconPlaceholder, PropsOf } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import { Gap, View } from '../View'
+import { SegmentedControlComposition } from './styles'
+import { Icon } from '../Icon'
+
+export type SegmentedControlOptionProps = PropsOf<typeof Touchable> & {
+  selected?: boolean
+  label: string
+  value: string
+  variantStyles?: StylesOf<SegmentedControlComposition>
+  textProps?: Omit<PropsOf<typeof Text>, 'key'>
+  icon?: IconPlaceholder
+  badge?: React.ReactNode
+}
+
+export const SegmentedControlOption = (props: SegmentedControlOptionProps) => {
+  const { selected, onPress, debugName, style, variantStyles, label, value, icon, textProps, badge = null, ...touchableProps } = props
+
+  return <Touchable
+    debugName={`Segmented Control ${debugName}, option ${label}`}
+    noFeedback={selected}
+    key={touchableProps.key}
+    styles={{
+      feedback: variantStyles.buttonFeedback,
+    }}
+    style={[variantStyles.button, selected && variantStyles['button:selected'], style]}
+    onPress={onPress}
+  >
+    {
+      !!icon && (
+        <Icon name={icon} style={[variantStyles.icon]} />
+
+      )
+    }
+    <Text
+      text={label}
+      style={[
+        variantStyles.text,
+        selected && variantStyles['text:selected'],
+        touchableProps?.disabled && variantStyles['text:disabled'],
+      ]}
+      {...textProps}
+    />
+    { badge }
+
+  </Touchable>
+}

package/src/components/SegmentedControl/index.tsx

@@ -1,15 +1,19 @@
 import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
 import { Scroll, ScrollProps } from '../Scroll'
 
-import { Easing, EasingFunction, StyleSheet } from 'react-native'
-import { FormTypes, getNestedStylesByKey, PropsOf, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
-import { SegmentedControlComposition, SegmentedControlStyles } from './styles'
+import { Easing, StyleSheet } from 'react-native'
+import { FormTypes, getNestedStylesByKey, PropsOf, TypeGuards, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import { SegmentedControlComposition, SegmentedControlPresets } from './styles'
 import { Touchable } from '../Touchable'
 import { StylesOf } from '../../types/utility'
-import { Text, TextProps } from '../Text'
+import { Text } from '../Text'
 import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { View } from '../View'
 import { InputLabel } from '../InputLabel'
+import { useAnimatedVariantStyles, TransitionConfig } from '../../utils'
+import { SegmentedControlOption } from './Option'
+import { IconPlaceholder } from '@codeleap/common'
+import { Badge, BadgeProps } from '../Badge'
 
 export * from './styles'
 export type SegmentedControlRef =KeyboardAwareScrollViewTypes.KeyboardAwareScrollView & {
@@ -17,15 +21,14 @@ export type SegmentedControlRef =KeyboardAwareScrollViewTypes.KeyboardAwareScrol
   scrollToCurrent: () => void
 }
 
+type SegmentedContropOptions<T = string> = {label: string; value: T; icon?: IconPlaceholder; badge?: BadgeProps['badge']}
+
 export type SegmentedControlProps<T = string> = ScrollProps & {
-    options : {label: string; value: T }[]
+    options : SegmentedContropOptions[]
     onValueChange: (value: T) => any
     value: T
     debugName: string
-    animation?: {
-      duration?: number
-      easing?: EasingFunction
-    }
+    animation?: TransitionConfig
     textProps?: Partial<PropsOf<typeof Text>>
     touchableProps?: Partial<PropsOf<typeof Touchable>>
     styles?: StylesOf<SegmentedControlComposition>
@@ -34,10 +37,11 @@ export type SegmentedControlProps<T = string> = ScrollProps & {
     RenderButton?: (props: SegmentedControlProps & {
       touchableProps: PropsOf<typeof Touchable>
       textProps: PropsOf<typeof Text>
-      option: {label: string; value: any}
+      option: SegmentedContropOptions
     }) => ReactElement
     RenderAnimatedView?: (props: Partial<SegmentedControlProps>) => ReactElement
-    getItemWidth?: (item:{label: string; value: T }, idx: number, arr: {label: string; value: T }[]) => number
+    getItemWidth?: (item: SegmentedContropOptions, idx: number, arr: SegmentedContropOptions[]) => number
+    badgeProps?: Partial<BadgeProps>
 }
 
 const defaultAnimation = {
@@ -63,13 +67,14 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     getItemWidth = (i) => (Theme.values.width - Theme.spacing.value(4)) / options.length,
     RenderAnimatedView,
     RenderButton,
+    badgeProps = {},
   } = props
 
-  let _animation = {
+  const _animation = {
     ...defaultAnimation, ...animation,
   }
 
-  let variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlStyles>('u:SegmentedControl', {
+  let variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlPresets>('u:SegmentedControl', {
     styles,
     transform: StyleSheet.flatten,
     variants,
@@ -94,8 +99,6 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 
   const currentOptionIdx = options.findIndex(o => o.value === value) || 0
 
-  const translateX = widthStyle.width * currentOptionIdx
-
   const onPress = (txt:string, idx: number) => {
     return () => {
       onValueChange(txt)
@@ -123,11 +126,26 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     hasScrolledInitially.current = true
   }
 
-  const AnimatedView = RenderAnimatedView || View
+  const BubbleView = RenderAnimatedView || View
   variantStyles = JSON.parse(JSON.stringify(variantStyles))
-  _animation = JSON.parse(JSON.stringify(_animation))
 
   const labelStyles = getNestedStylesByKey('label', variantStyles)
+
+  const bubbleAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: [],
+    updater: () => {
+      'worklet'
+      return {
+        translateX: currentOptionIdx * widthStyle.width,
+      }
+    },
+    transition: _animation,
+    dependencies: [currentOptionIdx, widthStyle.width],
+  })
+
+  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+
   return (<View style={variantStyles.wrapper}>
     <InputLabel label={label} styles={labelStyles} required={false}/>
     <Scroll
@@ -142,61 +160,27 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
       ref={scrollRef}
     >
       <View style={variantStyles.innerWrapper}>
-        <AnimatedView
+        <BubbleView
           options={options}
           styles={variantStyles}
-
           animated
-          style={[variantStyles.selectedBubble, widthStyle]}
-          animate={{
-            translateX,
-          }}
-          transition={{
-            translateX: _animation,
-          }}
+          style={[variantStyles.selectedBubble, props?.touchableProps?.disabled && variantStyles['selectedBubble:disabled'], widthStyle, bubbleAnimation]}
 
         />
-        {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, selected && variantStyles['button:selected']],
-            ...props.touchableProps,
-
-          }
-
-          const textProps:TextProps = {
-            text: o.label as string,
-            colorChangeConfig: _animation,
-            style: StyleSheet.flatten([variantStyles.text, selected && variantStyles['text:selected']]),
-            animated: true,
-            ...props.textProps,
-          }
-
-          if (RenderButton) {
-            return (
-              <RenderButton {...props} touchableProps={touchableProps} key={touchableProps.key} textProps={textProps} option={o}/>
-            )
-          }
-          return <Touchable
-            {...touchableProps}
-            noFeedback={selected}
-            key={touchableProps.key}
-            styles={{
-              feedback: variantStyles.buttonFeedback,
-            }}
-          >
-            <Text
-
-              {...textProps}
-            />
-
-          </Touchable>
-
-        })}
+        {options.map((o, idx) => (
+          <SegmentedControlOption
+            debugName={debugName}
+            label={o.label}
+            value={o.value}
+            icon={o.icon}
+            onPress={onPress(o.value, idx)}
+            key={idx}
+            style={widthStyle}
+            selected={value === o.value}
+            variantStyles={variantStyles}
+            badge={!TypeGuards.isNil(o.badge) ? <Badge badge={o.badge} styles={badgeStyles} {...badgeProps} /> : null}
+          />
+        ))}
       </View>
     </Scroll>
   </View>