@codeleap/mobile 1.9.33 → 2.0.0

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'

package/src/components/Select/index.tsx

@@ -1,14 +1,32 @@
-import { IconPlaceholder, useBooleanToggle, getNestedStylesByKey, useDefaultComponentStyle, TypeGuards } from '@codeleap/common'
+import { IconPlaceholder,
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+  TypeGuards } from '@codeleap/common'
 import React, { useMemo } from 'react'
-import { Modal, StyleSheet } from 'react-native'
-import { Button } from '../Button'
-import { Scroll } from '../Scroll'
-import { InputLabel, TextInput } from '../TextInput'
+import { StyleSheet } from 'react-native'
+import { List } from '../List'
+import { Text } from '../Text'
+import { TextInput } from '../TextInput'
 import { Touchable } from '../Touchable'
-import { AnimatedView, View } from '../View'
-import { MobileSelectStyles } from './styles'
+import { SelectStyles } from './styles'
 import { CustomSelectProps } from './types'
+import { ModalManager } from '../../utils'
+import { Icon } from '../Icon'
+
+export const SelectItem = ({ item, icon = null, isSelected, styles, onPress }) => {
+  return <Touchable style={[
+    styles.itemWrapper,
+    isSelected && styles['itemWrapper:selected'],
+  ]} onPress={onPress} debugName={`Select ${item.value}`}>
+    <Text text={item.label} style={[
+      styles.itemText,
+      isSelected && styles['itemText:selected'],
+    ]}/>
+    {icon ? <Icon name={icon} style={[styles?.itemIcon, isSelected && styles?.['itemIcon:selected']]}/> : null}
+  </Touchable>
+}
 
+export * from './styles'
 export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
   const {
     value,
@@ -20,29 +38,15 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     variants,
     renderItem,
     closeOnSelect = true,
-    scroll = false,
-    showClose = true,
-    showLabelOnModal = true,
+    listProps,
     placeholder = 'Select',
     arrowIconName = 'selectArrow',
-    footer,
-    modalCloseIconName = 'close',
-    header,
-    closeButtonProps,
-    modalLabel,
-    textInputProps = {},
-    visible = null,
-    toggle = null,
-    renderList,
-    ...props
+    inputProps = {},
+    hideInput = false,
+    ...drawerProps
   } = selectProps
 
-  const [_isModalVisible, _setModalVisibility] = useBooleanToggle(false)
-
-  const isModalVisible = visible ?? _isModalVisible
-  const setModalVisibility = toggle ?? _setModalVisibility
-
-  const variantStyles = useDefaultComponentStyle<'u:MobileSelect', typeof MobileSelectStyles>('u:MobileSelect', {
+  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectStyles>('u:Select', {
     transform: StyleSheet.flatten,
     rootElement: 'inputWrapper',
     styles,
@@ -54,21 +58,16 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     [variantStyles],
   )
 
-  const closeButtonStyles = useMemo(
-    () => getNestedStylesByKey('modalCloseButton', variantStyles),
-    [variantStyles],
-  )
+  const close = () => drawerProps?.toggle?.()
 
-  const ListComponent = scroll ? Scroll : View
-
-  const close = () => setModalVisibility()
   const select = (value) => {
 
     onValueChange(value)
     if (closeOnSelect) {
-      close()
+      close?.()
     }
   }
+
   const selectedLabel:string = useMemo(() => {
     const current = options.find(o => o.value === value)
 
@@ -77,116 +76,52 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     return TypeGuards.isString(display) ? display : ''
   }, [value, placeholder, options])
 
-  return <>
-    <TextInput
+  const Item = renderItem || SelectItem
 
-      caretHidden
-      value={selectedLabel}
-      rightIcon={{
-        name: arrowIconName as IconPlaceholder,
-      }}
-      editable={false}
-      touchableWrapper
-      wrapperProps={{
-        debugName: 'Select',
-        onPress: close,
-      }}
-      pointerEvents={'none'}
-      label={label}
-      debugName={'Select input'}
-      styles={inputStyles}
-      style={style}
-      {...textInputProps}
+  const renderListItem = ({ item }) => {
+    return <Item
+      isSelected={value === item.value}
+      item={item}
+      onPress={() => select(item.value)}
+      styles={variantStyles}
     />
-    <AnimatedView pointerEvents={'none'} transition='opacity' style={[
-      {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0,
-      },
-      variantStyles.backdrop,
-      isModalVisible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'],
-    ]} />
+  }
+  return <>
+    {
+      !hideInput && (
+        <TextInput
+          caretHidden
+          value={selectedLabel}
+          rightIcon={{
+            icon: arrowIconName as IconPlaceholder,
+          }}
+          editable={false}
+          touchableWrapper
+          wrapperProps={{
+            debugName: 'Select',
+            onPress: close,
+          }}
+          pointerEvents={'none'}
+          label={label}
+          debugName={'Select input'}
+          styles={inputStyles}
+          style={style}
+          {...inputProps}
+        />
+      )
+    }
 
-    <Modal
-      animationType='slide'
-      transparent={true}
-      visible={isModalVisible}
-      onRequestClose={() => {
-        setModalVisibility()
-      }}
-      pointerEvents={isModalVisible ? 'auto' : 'none'}
-    >
-      <Touchable
-        onPress={close}
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          left: 0,
-          bottom: 0,
-        }}
-        debugName={`Close modal`}
+    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
+      <List<CustomSelectProps<any>['options']>
+        data={options}
+        style={variantStyles.list}
+        contentContainerStyle={variantStyles.listContent}
+        keyExtractor={(i) => i.value}
+        renderItem={renderListItem}
+        {...listProps}
       />
-      <View style={variantStyles.modalWrapper}>
-
-        <View style={variantStyles.modalBox}>
-          {
-            (showClose || showLabelOnModal || header) && (
-              <View style={variantStyles.modalHeader}>
-                {
-                  header ? header : <>
-                    {showLabelOnModal && <InputLabel label={modalLabel || label} style={variantStyles.modalLabelText}/>}
-                    {showClose && <Button
-                      icon={modalCloseIconName as IconPlaceholder}
-                      onPress={close}
-                      styles={closeButtonStyles}
-                      debugName={'Close modal'}
-                      {...closeButtonProps}
-                    />}
-                  </>
-                }
-              </View>
-            )
-          }
-          <ListComponent style={variantStyles.modalList}>
-            {
-              renderList ? renderList({
-                ...selectProps,
-                isEmpty: !options.length,
-
-              }) : options.map((item, idx) => {
-                const isSelected = value === item.value
-                if (renderItem) {
-                  return renderItem({
-                    ...item,
-                    index: idx,
-                    selected: isSelected,
-                    onPress: close,
-                    styles: variantStyles,
-                  })
-                }
-
-                return <Touchable key={idx} style={[
-                  variantStyles.modalItem,
-                  isSelected && variantStyles['modalItem:selected'],
-                ]} onPress={() => select(item.value)} debugName={`Select ${item.value}`}>
-                  <InputLabel label={item.label} style={[variantStyles.modalItemText, isSelected && variantStyles['modalItemText:selected']]}/>
-                </Touchable>
-              })
-            }
-          </ListComponent>
+    </ModalManager.Drawer>
 
-          {
-            footer && <View style={variantStyles.modalFooter}>
-              {footer}
-            </View>
-          }
-        </View>
-      </View>
-    </Modal>
   </>
 }
 

package/src/components/Select/styles.ts

@@ -1,81 +1,49 @@
-import { assignTextStyle, ButtonParts, createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
-import { MobileModalStyles } from '../Modal'
-type ModalParts =
-  'Box' |
-  'Wrapper' |
-  'Header' |
-  'Footer' |
-  'List' |
-  'Item' |
-  'ItemText' |
-  'Item:selected' |
-  'ItemText:selected' |
-  'LabelText' |
-  `CloseButton${Capitalize<ButtonParts>}`
+import { createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
+import { DrawerComposition, DrawerStyles } from '../Drawer'
+type ItemStates = '' | ':selected'
+export type SelectComposition =
+  DrawerComposition |
+  `input${TextInputComposition}` |
+  'list' |
+  'listContent' |
+  `itemWrapper${ItemStates}` |
+  `itemText${ItemStates}` |
+  'scroll' |
+  'scrollContent'
 
-type InputParts = `input${Capitalize<TextInputComposition>}`
+const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
 
-export type MobileSelectParts = InputParts
-| `backdrop`
-| `backdrop:visible`
-| `backdrop:hidden`
-| `modal${ModalParts}`
+export const SelectStyles = {
+  ...DrawerStyles,
+  default: createSelectStyle((theme) => {
+    const defaultStyle = DrawerStyles.default(theme)
+    return {
+      ...defaultStyle,
+      box: {
+        ...theme.spacing.paddingHorizontal(0),
 
-export type MobileSelectComposition = MobileSelectParts
+      },
+      itemWrapper: {
+        ...theme.spacing.padding(2),
+        ...theme.presets.row,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+      },
+      'itemWrapper:selected': {
+        backgroundColor: theme.colors.primary,
+      },
+      'itemText:selected': {
+        color: theme.colors.white,
 
-const createSelectStyle = createDefaultVariantFactory<MobileSelectComposition>()
+      },
+      list: {
+        height: 'auto',
 
-export const MobileSelectStyles = {
-  default: createSelectStyle((theme) => ({
-    modalBox: {
-      // ...MobileModalStyles.default(theme).box,
-      backgroundColor: theme.colors.background,
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
-      zIndex: 1,
-      elevation: 5,
-    },
-    modalWrapper: {
-      // ...MobileModalStyles.default(theme).wrapper,
-      flex: 1,
-      alignItems: 'stretch',
-      justifyContent: 'flex-end',
-    },
-    modalItem: {
-      ...theme.spacing.paddingVertical(1),
-      ...theme.spacing.paddingHorizontal(2),
-      color: theme.colors.text,
-    },
-    'modalItemText:selected': {
-      color: theme.colors.primary,
-    },
-    modalList: {
-      ...theme.spacing.marginVertical(0.6),
-    },
-    backdrop: {
-      // ...MobileModalStyles.default(theme).overlay,
-      zIndex: 10,
-      flex: 1,
+      },
+      listContent: {
+        paddingBottom: theme.values.bottomNavHeight + theme.spacing.value(1),
+      },
 
-      backgroundColor: theme.colors.black,
-    },
-    'backdrop:hidden': {
-      opacity: 0,
-    },
-    'backdrop:visible': {
-      opacity: 0.4,
-    },
-    modalHeader: {
-      ...theme.spacing.padding(2),
-      flexDirection: 'row',
-      ...theme.presets.alignCenter,
-      ...theme.presets.justifySpaceBetween,
-    },
-    modalLabelText: {
-      ...assignTextStyle('p2')(theme).text,
-    },
-    modalCloseButtonWrapper: {
-      backgroundColor: 'transparent',
-    },
-  })),
+    }
+  }),
 }

package/src/components/Select/types.ts

@@ -3,44 +3,37 @@ import {
   FormTypes,
   IconPlaceholder,
 } from '@codeleap/common'
-import { ReactElement } from 'react'
 import { StylesOf } from '../../types/utility'
-import { ButtonProps } from '../Button'
+import { DrawerProps } from '../Drawer'
+import { FlatListProps } from '../List'
 import { TextInputProps } from '../TextInput'
-import { MobileSelectComposition, MobileSelectStyles } from './styles'
+import { SelectComposition, SelectStyles } from './styles'
 
-export type SelectRenderFNProps<T> = FormTypes.Options<T>[number] & {
-  styles: StylesOf<MobileSelectComposition>
+export type SelectRenderFNProps<T> = & {
+  styles: StylesOf<SelectComposition>
   onPress: () => void
-  selected?: boolean
-  index: number
+  isSelected?: boolean
+  item: FormTypes.Options<T>[number]
 }
 
 export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
 
-export type CustomSelectProps<T> = {
+type SelectDrawerProps = Omit<DrawerProps, 'variants' | 'styles'>
+
+export type CustomSelectProps<T> = SelectDrawerProps & {
     value: T
     placeholder?: FormTypes.Label
     label?: FormTypes.Label
     options?: FormTypes.Options<T>
-    onDropdownToggle?: (isOpen?: boolean) => void
     onValueChange?: (value: T) => void
     renderItem?: SelectRenderFN<T>
-    styles?: StylesOf<MobileSelectComposition>
+    styles?: StylesOf<SelectComposition>
     style?: any
+    hideInput?: boolean
+
     arrowIconName?: IconPlaceholder
-    scroll?: boolean
     closeOnSelect?: boolean
-    footer?: ReactElement
-    header?: ReactElement
-    showLabelOnModal?: boolean
-    modalCloseIconName?: IconPlaceholder
-    showClose?: boolean
-    modalLabel?: string
-    textInputProps?: Partial<TextInputProps>
-    closeButtonProps?: Partial<ButtonProps>
-    toggle: (isOpen?: boolean) => void
-    visible: boolean
-    renderList?: (props:CustomSelectProps<T> & {isEmpty: boolean}) => JSX.Element
-  } & ComponentVariants<typeof MobileSelectStyles> & TextInputProps
+    inputProps?: Partial<TextInputProps>
+    listProps?: Partial<FlatListProps>
+  } & ComponentVariants<typeof SelectStyles>