@codeleap/mobile 3.1.2 → 3.2.3

package/src/components/Pager/index.tsx

@@ -3,7 +3,7 @@ import {
   onUpdate,
   TypeGuards,
   useDefaultComponentStyle,
-  useWarning
+  useWarning,
 } from '@codeleap/common'
 import React, { ReactNode, useCallback, useRef } from 'react'
 import {
@@ -46,7 +46,7 @@ export type PagerProps = React.PropsWithChildren<{
    windowing?:boolean
 }>
 
-export const Pager: React.FC<PagerProps> = (pagerProps) => {
+export const Pager = (pagerProps:PagerProps) => {
   const {
     styles,
     variants,
@@ -61,12 +61,11 @@ export const Pager: React.FC<PagerProps> = (pagerProps) => {
     setPage,
   } = pagerProps
 
-  
   const childArr = React.Children.toArray(children)
   const scrollRef = useRef<ScrollView>(null)
   const [positionX, setPositionX] = React.useState(0)
-  
-  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerPresets>(
+
+  const variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerPresets>(
     'u:Pager',
     {
       styles,
@@ -75,15 +74,14 @@ export const Pager: React.FC<PagerProps> = (pagerProps) => {
     },
   )
 
-  
   const windowWidth = Dimensions.get('window').width
   let width = widthProp ?? variantStyles.wrapper.width
 
   const validWidth = TypeGuards.isNumber(width)
-  
+
   if (!validWidth) {
     width = windowWidth
-    
+
   }
 
   useWarning(
@@ -98,7 +96,6 @@ export const Pager: React.FC<PagerProps> = (pagerProps) => {
 
   const WrapperComponent = renderPageWrapper || View
 
-
   const handleScrollEnd = useCallback(
     ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
       const x = nativeEvent.contentOffset.x
@@ -142,14 +139,13 @@ export const Pager: React.FC<PagerProps> = (pagerProps) => {
         const isFirst = index === 0
         const isNext = index === page + 1
         const isPrevious = index === page - 1
-        
+
         const shouldRender = windowing ? (isActive || isNext || isPrevious) : true
 
         if (!shouldRender && returnEarly) {
           return <View style={{ height: '100%', width }} />
         }
 
-
         const pageProps:PageProps = {
           isLast,
           isActive,

package/src/components/RadioInput/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { ReactNode, ComponentPropsWithoutRef } from 'react'
 
 import { Text } from '../Text'

package/src/components/RefreshControl/index.tsx

@@ -6,7 +6,7 @@ export type RefreshControlProps = {
   styles?: StylesOf<RefreshControlComposition>
 } & RNRefreshControlProps & ComponentVariants<typeof RefreshControlPresets>
 
-export const RefreshControl: React.FC<RefreshControlProps> = (props) => {
+export const RefreshControl = (props:RefreshControlProps) => {
   const { variants = [], styles } = props
 
   const variantStyles = useDefaultComponentStyle<'u:RefreshControl', typeof RefreshControlPresets>('u:RefreshControl', {

package/src/components/Scroll/index.tsx

@@ -6,16 +6,13 @@ import {
   useDefaultComponentStyle,
   usePrevious,
 } from '@codeleap/common'
-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, ScrollPresets } from './styles'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
-
-type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
+import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
 
 export type ScrollProps = KeyboardAwareScrollViewProps &
   ViewProps & {
@@ -29,7 +26,9 @@ export type ScrollProps = KeyboardAwareScrollViewProps &
     debugName?: string
   }
 
-export const Scroll = forwardRef<ScrollView, ScrollProps>(
+export type ScrollRef = KeyboardAwareScrollView
+
+export const Scroll = forwardRef<ScrollRef, ScrollProps>(
   (scrollProps, ref) => {
     const {
       variants = [],
@@ -41,7 +40,6 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       refreshControlProps = {},
       contentContainerStyle,
       keyboardAware,
-      debugName = '',
       animated = true,
       ...props
     } = scrollProps
@@ -81,14 +79,14 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       rootElement: 'content',
     })
 
-    const Component = (animated ? KeyboardAwareScrollView : KeyboardAwareScrollView) as unknown as typeof ScrollView
+    const Component = KeyboardAwareScrollView
 
     return (
       <Component
         style={[variantStyles.wrapper, style]}
         contentContainerStyle={[variantStyles.content, contentContainerStyle]}
         showsVerticalScrollIndicator={false}
-        // @ts-expect-error - Refs suck
+        // @ts-ignore
         ref={ref}
         refreshControl= {
           hasRefresh && (
@@ -105,5 +103,5 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       </Component>
     )
   },
-)
+) as unknown as (props:ScrollProps) => JSX.Element
 export * from './styles'

package/src/components/Sections/index.tsx

@@ -6,23 +6,22 @@ import {
   useCallback,
 } from '@codeleap/common'
 
-import { 
-  RefreshControl, 
-  StyleSheet, 
-  RefreshControlProps, 
+import {
+  RefreshControl,
+  StyleSheet,
+  RefreshControlProps,
   SectionListRenderItemInfo,
   SectionListProps as RNSectionListProps,
 } from 'react-native'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
 import { StylesOf } from '../../types'
-import { KeyboardAwareSectionList } from 'react-native-keyboard-aware-scroll-view'
+import { KeyboardAwareSectionList, KeyboardAwareSectionListProps } 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
@@ -43,7 +42,6 @@ export type ReplaceSectionListProps<P, T> = Omit<P, DataboundSectionListPropsTyp
 
 export * from './styles'
 
-
 export type SectionListProps<
   T = any[],
   Data = T extends Array<infer D> ? D : never
@@ -56,7 +54,6 @@ export type SectionListProps<
     fakeEmpty?: boolean
   } & ComponentVariants<typeof SectionsPresets>
 
-
 export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
   (sectionsProps, ref) => {
     const {
@@ -80,7 +77,7 @@ export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
       transform: StyleSheet.flatten,
 
     })
-    
+
     const renderSeparator = () => {
       return (
         <View style={variantStyles.separator}></View>
@@ -132,7 +129,7 @@ export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
 
     return (
       <KeyboardAwareSectionList
-        style={[variantStyles.wrapper,style]}
+        style={[variantStyles.wrapper, style]}
         contentContainerStyle={[variantStyles.content]}
         showsVerticalScrollIndicator={false}
         // @ts-ignore
@@ -150,4 +147,4 @@ export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
       />
     )
   },
-)
+) as unknown as <T = any>(props: SectionListProps<T>) => JSX.Element

package/src/components/SegmentedControl/Option.tsx

@@ -3,7 +3,6 @@ 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'
 
@@ -23,12 +22,13 @@ export const SegmentedControlOption = (props: SegmentedControlOptionProps) => {
   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}
+    {...touchableProps}
   >
     {
       !!icon && (

package/src/components/SegmentedControl/index.tsx

@@ -1,30 +1,38 @@
 import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
-import { Scroll, ScrollProps } from '../Scroll'
+import { Scroll, ScrollProps, ScrollRef } from '../Scroll'
 
 import { Easing, StyleSheet } from 'react-native'
-import { FormTypes, getNestedStylesByKey, PropsOf, TypeGuards, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import { FormTypes, getNestedStylesByKey, PropsOf, useCodeleapContext, useDefaultComponentStyle, useState } from '@codeleap/common'
 import { SegmentedControlComposition, SegmentedControlPresets } from './styles'
 import { Touchable } from '../Touchable'
 import { StylesOf } from '../../types/utility'
 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'
+import { SegmentedControlOptionProps } from './Option'
 
 export * from './styles'
-export type SegmentedControlRef =KeyboardAwareScrollViewTypes.KeyboardAwareScrollView & {
+
+export type SegmentedControlRef = ScrollRef & {
   scrollTo: (index: number) => void
   scrollToCurrent: () => void
 }
 
-type SegmentedContropOptions<T = string> = {label: string; value: T; icon?: IconPlaceholder; badge?: BadgeProps['badge']}
+const DefaultBubble = (props:Partial<SegmentedControlProps>) => {
+  const {
+    style,
+
+  } = props
+  return <View
+    animated
+    style={style}
+  />
+}
 
 export type SegmentedControlProps<T = string> = ScrollProps & {
-    options : SegmentedContropOptions[]
+    options : SegmentedControlOptionProps[]
     onValueChange: (value: T) => any
     value: T
     debugName: string
@@ -34,14 +42,10 @@ export type SegmentedControlProps<T = string> = ScrollProps & {
     styles?: StylesOf<SegmentedControlComposition>
     scrollProps?: any
     label?: FormTypes.Label
-    RenderButton?: (props: SegmentedControlProps & {
-      touchableProps: PropsOf<typeof Touchable>
-      textProps: PropsOf<typeof Text>
-      option: SegmentedContropOptions
-    }) => ReactElement
-    RenderAnimatedView?: (props: Partial<SegmentedControlProps>) => ReactElement
-    getItemWidth?: (item: SegmentedContropOptions, idx: number, arr: SegmentedContropOptions[]) => number
-    badgeProps?: Partial<BadgeProps>
+    renderOption?: (props: SegmentedControlOptionProps) => JSX.Element
+    renderBubble?: (props: Partial<SegmentedControlProps>) => JSX.Element
+    getItemWidth?: (item:{label: string; value: T }, idx: number, arr: {label: string; value: T }[]) => number
+    scrollToCurrentOptionOnMount?: boolean
 }
 
 const defaultAnimation = {
@@ -65,10 +69,15 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     variants = [],
     scrollProps = {},
     getItemWidth = (i) => (Theme.values.width - Theme.spacing.value(4)) / options.length,
-    RenderAnimatedView,
-    RenderButton,
-    badgeProps = {},
-  } = props
+    renderBubble,
+    scrollToCurrentOptionOnMount = true,
+    renderOption,
+  } = {
+    ...(_SegmentedControl.defaultProps || {}),
+    ...props,
+  }
+
+  const [bubbleWidth, setBubbleWidth] = useState(0)
 
   const _animation = {
     ...defaultAnimation, ...animation,
@@ -81,7 +90,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     rootElement: 'scroll',
   })
 
-  const scrollRef = useRef<KeyboardAwareScrollViewTypes.KeyboardAwareScrollView>(null)
+  const scrollRef = useRef<SegmentedControlRef>(null)
 
   function scrollTo(idx:number) {
     if (!scrollRef.current) return
@@ -91,11 +100,18 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
   }
 
   const widthStyle = useMemo(() => {
-    const sizes = options.map(getItemWidth)
-    const maxWidth = sizes.sort((a, b) => b - a)[0]
+    if (getItemWidth) {
+      const sizes = options.map(getItemWidth)
+      const maxWidth = sizes.sort((a, b) => b - a)[0]
+
+      return { width: maxWidth }
 
-    return { width: maxWidth }
-  }, [options])
+    }
+
+    return {
+      width: bubbleWidth,
+    }
+  }, [options, bubbleWidth])
 
   const currentOptionIdx = options.findIndex(o => o.value === value) || 0
 
@@ -119,14 +135,18 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
         scrollTo(currentOptionIdx)
       },
     } as SegmentedControlRef
-  })
+  }, [
+    currentOptionIdx,
+  ])
 
-  if (!hasScrolledInitially.current && scrollRef.current) {
+  if (!hasScrolledInitially.current && scrollRef.current && scrollToCurrentOptionOnMount) {
     scrollTo(currentOptionIdx)
     hasScrolledInitially.current = true
   }
 
-  const BubbleView = RenderAnimatedView || View
+  const BubbleView = renderBubble
+  const Option = renderOption
+
   variantStyles = JSON.parse(JSON.stringify(variantStyles))
 
   const labelStyles = getNestedStylesByKey('label', variantStyles)
@@ -144,7 +164,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     dependencies: [currentOptionIdx, widthStyle.width],
   })
 
-  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+  const largestWidth = useRef(0)
 
   return (<View style={variantStyles.wrapper}>
     <InputLabel label={label} styles={labelStyles} required={false}/>
@@ -164,11 +184,15 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
           options={options}
           styles={variantStyles}
           animated
-          style={[variantStyles.selectedBubble, props?.touchableProps?.disabled && variantStyles['selectedBubble:disabled'], widthStyle, bubbleAnimation]}
-
+          style={[
+            variantStyles.selectedBubble,
+            props?.touchableProps?.disabled && variantStyles['selectedBubble:disabled'],
+            widthStyle,
+            bubbleAnimation,
+          ]}
         />
         {options.map((o, idx) => (
-          <SegmentedControlOption
+          <Option
             debugName={debugName}
             label={o.label}
             value={o.value}
@@ -178,7 +202,17 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
             style={widthStyle}
             selected={value === o.value}
             variantStyles={variantStyles}
-            badge={!TypeGuards.isNil(o.badge) ? <Badge badge={o.badge} styles={badgeStyles} {...badgeProps} /> : null}
+            onLayout={e => {
+              const { width } = e.nativeEvent.layout
+              if (width > largestWidth.current) {
+                largestWidth.current = width
+              }
+
+              if (idx === options.length - 1) {
+                setBubbleWidth(largestWidth.current)
+                largestWidth.current = 0
+              }
+            }}
           />
         ))}
       </View>
@@ -188,6 +222,11 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 
 })
 
+_SegmentedControl.defaultProps = {
+  renderBubble: DefaultBubble,
+  renderOption: SegmentedControlOption,
+}
+
 type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & {ref?: React.Ref<SegmentedControlRef>}) => ReactElement
 
 export const SegmentedControl = _SegmentedControl as SegControlComponent

package/src/components/Select/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { IconPlaceholder,
   useDefaultComponentStyle,
   TypeGuards,
@@ -312,7 +313,7 @@ export const Select = <T extends string|number = string, Multi extends boolean =
             icon: inputIcon as IconPlaceholder,
             onPress: onPressInputIcon,
           }}
-          onPress={close}
+
           currentValueLabel={currentValueLabel}
 
           debugName={`${debugName} select input`}

package/src/components/Select/styles.ts

@@ -3,7 +3,6 @@ import { ListComposition } from '../List'
 import { ModalComposition } from '../Modal'
 type ItemStates = '' | ':selected'
 
-
 type ItemParts = ButtonComposition
 
 type ItemComposition = `${ItemParts}${ItemStates}` | ItemParts

package/src/components/Select/types.ts

@@ -35,13 +35,18 @@ type SelectHeaderProps = {
   searchComponent?: React.ReactNode
 }
 
-type OuterInputProps<T = any, Multi extends boolean = false> = Omit<SelectProps<T, Multi>, 'variants'| 'styles'> & {
+export type SelectOuterInputProps<T = any, Multi extends boolean = false> = Omit<SelectProps<T, Multi>, 'variants'| 'styles'> & {
   currentValueLabel: FormTypes.Label
   styles?: StylesOf<TextInputComposition>
   clearIcon?: Partial<ActionIconProps>
 }
 
-export type ValueBoundSelectProps<T, Multi extends boolean = false> = {
+type OuterInputComponent<T, Multi extends boolean> = (props: SelectOuterInputProps<T, Multi>) => JSX.Element
+
+export type ValueBoundSelectProps<
+  T,
+  Multi extends boolean = false
+> = {
   options?: FormTypes.Options<T>
   defaultOptions?: FormTypes.Options<T>
   loadOptions?: (search: string) => Promise<FormTypes.Options<T>>
@@ -52,7 +57,8 @@ export type ValueBoundSelectProps<T, Multi extends boolean = false> = {
   onLoadOptionsError?: (error: any) => void
   multiple?: Multi
   getLabel?: (forOption: Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]) => FormTypes.Label
-  outerInputComponent?: React.ComponentType<OuterInputProps<T, Multi>>
+  outerInputComponent?: OuterInputComponent<T, Multi>
+  inputProps?: Partial<SelectOuterInputProps<T, Multi>>
 }
 
 export type ReplaceSelectProps<Props, T, Multi extends boolean = false> = Omit<
@@ -69,7 +75,7 @@ export type SelectProps<T = any, Multi extends boolean = false> = {
     selectedIcon?: IconPlaceholder
     arrowIconName?: IconPlaceholder
     closeOnSelect?: boolean
-    inputProps?: Partial<TextInputProps>
+
     listProps?: Partial<FlatListProps>
     clearable?: boolean
     clearIconName?: IconPlaceholder