@codeleap/mobile 2.3.19 → 2.3.20

package/src/components/MultiSelect/styles.ts

@@ -1,4 +1,4 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
+import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
 import { SelectComposition, SelectStyles } from '../Select'
 type ItemStates = '' | ':selected'
 export type MultiSelectComposition =
@@ -7,11 +7,124 @@ export type MultiSelectComposition =
 const createMultiSelectStyle = createDefaultVariantFactory<MultiSelectComposition>()
 
 export const MultiSelectStyles = {
-  ...SelectStyles,
   default: createMultiSelectStyle((theme) => {
-    const defaultStyle = SelectStyles.default(theme)
     return {
-      ...defaultStyle,
+      wrapper: {
+        ...theme.presets.absolute,
+        // ...theme.presets.whole,
+        ...theme.presets.fullHeight,
+        ...theme.presets.fullWidth,
+      },
+      '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: {
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
+        backgroundColor: theme.colors.black,
+
+      },
+      backdropTouchable: {
+        // height: '100%',
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
+      },
+      'backdrop:visible': {
+        opacity: 0.5,
+      },
+      'backdrop:hidden': {
+        opacity: 0,
+      },
+      innerWrapper: {
+
+      },
+      scroll: {
+        flex: 1,
+        // maxHeight: theme.values.height,
+      },
+      scrollContent: {
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        minHeight: '100%',
+        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
+        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
+      },
+      box: {
+        backgroundColor: theme.colors.background,
+        width: theme.values.width - theme.spacing.value(theme.values.innerSpacing.X * 2),
+        borderRadius: theme.borderRadius.modalOuter,
+        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
+        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
+      },
+
+      'box:hidden': {
+        opacity: 0,
+        scale: 0.8,
+
+      },
+      'box:visible': {
+        opacity: 1,
+        scale: 1,
+      },
+      header: {
+        flexDirection: 'row',
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+      },
+      closeButtonTouchableWrapper: {
+        alignSelf: 'center',
+        ...theme.spacing.marginLeft('auto'),
+      },
+      closeButtonIcon: {
+        color: theme.colors.text,
+      },
+      title: {
+        ...assignTextStyle('h3')(theme).text,
+      },
+      listWrapper: {
+        height: 'auto',
+      },
+
+      itemWrapper: {
+        ...theme.presets.row,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+        borderRadius: theme.borderRadius.medium,
+        ...theme.spacing.padding(1),
+        backgroundColor: theme.colors.backgroundSecondary,
+      },
+      'itemWrapper:selected': {
+        backgroundColor: theme.colors.primary,
+      },
+      'itemIcon:selected': {
+        color: theme.colors.backgroundSecondary,
+        ...theme.sized(2),
+
+      },
+      'itemText:selected': {
+        color: theme.colors.backgroundSecondary,
+
+      },
+      itemIcon: {
+        height: 0,
+        width: 0,
+
+      },
 
     }
   }),

package/src/components/MultiSelect/types.ts

@@ -2,11 +2,15 @@ import {
   ComponentVariants,
   FormTypes,
   IconPlaceholder,
+  PropsOf,
 } from '@codeleap/common'
 import { StylesOf } from '../../types/utility'
 import { DrawerProps } from '../Drawer'
+import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
+import { Text } from '../Text'
 import { TextInputProps } from '../TextInput'
+import { Touchable } from '../Touchable'
 import { MultiSelectComposition, MultiSelectStyles } from './styles'
 
 export type MultiSelectRenderFNProps<T> = {
@@ -15,6 +19,9 @@ export type MultiSelectRenderFNProps<T> = {
   isSelected?: boolean
   item: FormTypes.Options<T>[number]
   icon?: IconPlaceholder
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+  textProps?: Partial<PropsOf<typeof Text>>
+  iconProps?: Partial<PropsOf<typeof Icon>>
 }
 
 export type MultiSelectRenderFN<T> = (props: MultiSelectRenderFNProps<T>) => JSX.Element
@@ -39,5 +46,6 @@ export type MultiSelectProps<T> = MultiSelectDrawerProps & {
     clearable?: boolean
     clearIconName?: IconPlaceholder
     validate?: TextInputProps['validate']
+    itemProps?: Partial<Pick<MultiSelectRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'>>
   } & ComponentVariants<typeof MultiSelectStyles>
 

package/src/components/Scroll/styles.ts

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

package/src/components/SegmentedControl/index.tsx

@@ -69,6 +69,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     styles,
     transform: StyleSheet.flatten,
     variants,
+    rootElement: 'scroll',
   })
 
   const scrollRef = useRef<KeyboardAwareScrollViewTypes.KeyboardAwareScrollView>(null)
@@ -123,7 +124,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
   _animation = JSON.parse(JSON.stringify(_animation))
 
   const labelStyles = getNestedStylesByKey('label', variantStyles)
-  return (<>
+  return (<View style={variantStyles.wrapper}>
     <InputLabel label={label} styles={labelStyles} required={false}/>
     <Scroll
       horizontal
@@ -136,7 +137,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
       }}
       ref={scrollRef}
     >
-      <View style={variantStyles.wrapper}>
+      <View style={variantStyles.innerWrapper}>
         <AnimatedView
           options={options}
           styles={variantStyles}
@@ -158,7 +159,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
             key: idx,
             debugName: `Segmented Control ${debugName}, option ${o.label}`,
             onPress: onPress(o.value, idx),
-            style: [widthStyle, variantStyles.button],
+            style: [widthStyle, variantStyles.button, selected && variantStyles['button:selected']],
             ...props.touchableProps,
 
           }
@@ -194,7 +195,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
         })}
       </View>
     </Scroll>
-  </>
+  </View>
   )
 
 })

package/src/components/SegmentedControl/styles.ts

@@ -7,6 +7,7 @@ export type SegmentedControlStates = 'selected'
 export type SegmentedControlComposition =
  'selectedBubble' |
  'wrapper' |
+ 'innerWrapper' |
  'scroll' |
  'scrollContent' |
  'text' |
@@ -28,7 +29,7 @@ SegmentedControlComposition,
 SegmentedControlStylesGen
 >()
 
-const presets = includePresets((style) => createSegmentedControlStyle(() => ({ scrollContent: style })))
+const presets = includePresets((style) => createSegmentedControlStyle(() => ({ wrapper: style })))
 
 export const SegmentedControlStyles = {
   ...presets,
@@ -45,22 +46,25 @@ export const SegmentedControlStyles = {
       'text:selected': {
         color: theme.colors.white,
       },
+      wrapper: {
+        height: 'auto',
+      },
       scroll: {
         height: theme.values.buttons.default.height,
-        // borderRadius: Theme.borderRadius.large,
+        maxHeight: theme.values.buttons.default.height,
       },
       scrollContent: {
-        // borderRadius: Theme.borderRadius.large,
         ...theme.presets.row,
-        ...theme.spacing.paddingHorizontal(2),
         ...theme.presets.alignStretch,
+        height: theme.values.buttons.default.height,
+
       },
       button: {
         backgroundColor: 'transparent',
         ...theme.presets.alignCenter,
         ...theme.presets.justifyCenter,
 
-        borderRadius: theme.borderRadius.large,
+        borderRadius: theme.borderRadius.medium,
         ...theme.spacing.padding(1),
         minHeight: '100%',
 
@@ -69,18 +73,17 @@ export const SegmentedControlStyles = {
         position: 'absolute',
         zIndex: -1,
         ...theme.spacing.padding(2),
-        // maxHeight: 50,
-        // minHeight: 50,
         top: 0,
         bottom: 0,
-        borderRadius: theme.borderRadius.large,
+        borderRadius: theme.borderRadius.medium,
         backgroundColor: theme.colors.primary,
       },
-      wrapper: {
-        borderRadius: theme.borderRadius.large,
+      innerWrapper: {
+        borderRadius: theme.borderRadius.medium,
         backgroundColor: theme.colors.backgroundSecondary,
         ...theme.presets.row,
         position: 'relative',
+        height: theme.values.buttons.default.height,
       },
 
     }

package/src/components/Select/index.tsx

@@ -2,7 +2,7 @@ import { IconPlaceholder,
   getNestedStylesByKey,
   useDefaultComponentStyle,
   TypeGuards } from '@codeleap/common'
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { List } from '../List'
 import { Text } from '../Text'
@@ -13,16 +13,39 @@ 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}
+export const SelectItem = ({
+  item,
+  icon = null,
+  isSelected,
+  styles,
+  onPress,
+  iconProps = {},
+  textProps = {},
+  ...touchableProps
+}) => {
+  return <Touchable
+    style={[
+      styles.itemWrapper,
+      isSelected && styles['itemWrapper:selected'],
+    ]}
+    onPress={onPress}
+    debugName={`Select ${item.value}`}
+    debounce={null}
+    {...touchableProps}
+  >
+    <Text
+      text={item.label}
+      style={[
+        styles.itemText,
+        isSelected && styles['itemText:selected'],
+      ]}
+      {...textProps}
+    />
+    {icon ? <Icon
+      name={icon}
+      style={[styles?.itemIcon, isSelected && styles?.['itemIcon:selected']]}
+      {...iconProps}
+    /> : null}
   </Touchable>
 }
 
@@ -46,7 +69,7 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     selectedIcon = 'selectMarker',
     inputProps = {},
     hideInput = false,
-
+    itemProps = {},
     ...drawerProps
   } = selectProps
 
@@ -81,15 +104,17 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
   }, [value, placeholder, options])
   const Item = renderItem || SelectItem
 
-  const renderListItem = ({ item }) => {
+  const renderListItem = useCallback(({ item }) => {
+
     return <Item
       isSelected={value === item.value}
       item={item}
       onPress={() => select(item.value)}
       icon={selectedIcon}
       styles={variantStyles}
+      {...itemProps}
     />
-  }
+  }, [value, select])
   const isEmpty = TypeGuards.isNil(value)
   const showClearIcon = !isEmpty && clearable
 
@@ -132,33 +157,31 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
       )
     }
 
-    <ModalManager.Drawer
-      scroll={false}
+    <ModalManager.Modal
       title={label}
       keyboardAware={{
-        baseStyleProp: 'style',
-        adapt: 'paddingBottom',
-        enabled: true,
-        enableOnAndroid: true,
+
+        enabled: false,
       }}
       {...drawerProps}
       styles={variantStyles}
+      id={null}
     >
       <List<CustomSelectProps<any>['options']>
         data={options}
-        style={variantStyles.list}
-        contentContainerStyle={variantStyles.listContent}
+        scrollEnabled={false}
+        showsHorizontalScrollIndicator={false}
+        styles={getNestedStylesByKey('list', variantStyles)}
         keyExtractor={(i) => i.value}
         renderItem={renderListItem}
         keyboardAware={{
-          baseStyleProp: 'style',
-          adapt: 'maxHeight',
-          enabled: true,
-          enableOnAndroid: true,
+          enabled: false,
+          enableOnAndroid: false,
         }}
+        separators
         {...listProps}
       />
-    </ModalManager.Drawer>
+    </ModalManager.Modal>
 
   </>
 }

package/src/components/Select/styles.ts

@@ -1,15 +1,15 @@
-import { createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
+import { assignTextStyle, createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
 import { DrawerComposition, DrawerStyles } from '../Drawer'
+import { ListComposition } from '../List'
+import { ModalComposition } from '../Modal'
 type ItemStates = '' | ':selected'
 export type SelectComposition =
-  DrawerComposition |
+  ModalComposition |
   `input${TextInputComposition}` |
-  'list' |
+  `list${Capitalize<ListComposition>}` |
   'listContent' |
   `itemWrapper${ItemStates}` |
   `itemText${ItemStates}` |
-  'scroll' |
-  'scrollContent' |
   `itemIcon${ItemStates}`
 
 const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
@@ -17,46 +17,124 @@ const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
 export const SelectStyles = {
   ...DrawerStyles,
   default: createSelectStyle((theme) => {
-    const defaultStyle = DrawerStyles.default(theme)
 
     return {
-      ...defaultStyle,
+      wrapper: {
+        ...theme.presets.absolute,
+        // ...theme.presets.whole,
+        ...theme.presets.fullHeight,
+        ...theme.presets.fullWidth,
+      },
+      '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: {
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
+        backgroundColor: theme.colors.black,
+
+      },
+      backdropTouchable: {
+        // height: '100%',
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
+      },
+      'backdrop:visible': {
+        opacity: 0.5,
+      },
+      'backdrop:hidden': {
+        opacity: 0,
+      },
+      innerWrapper: {
+
+      },
+      scroll: {
+        flex: 1,
+        // maxHeight: theme.values.height,
+      },
+      scrollContent: {
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        minHeight: '100%',
+        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
+        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
+      },
       box: {
-        ...theme.spacing.paddingHorizontal(0),
+        backgroundColor: theme.colors.background,
+        width: theme.values.width - theme.spacing.value(theme.values.innerSpacing.X * 2),
+        borderRadius: theme.borderRadius.modalOuter,
+        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
+        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
+      },
+
+      'box:hidden': {
+        opacity: 0,
+        scale: 0.8,
 
       },
+      'box:visible': {
+        opacity: 1,
+        scale: 1,
+      },
+      header: {
+        flexDirection: 'row',
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+      },
+      closeButtonTouchableWrapper: {
+        alignSelf: 'center',
+        ...theme.spacing.marginLeft('auto'),
+      },
+      closeButtonIcon: {
+        color: theme.colors.text,
+      },
+      title: {
+        ...assignTextStyle('h3')(theme).text,
+      },
+      listWrapper: {
+        height: 'auto',
+      },
+
       itemWrapper: {
         ...theme.presets.row,
         ...theme.presets.justifySpaceBetween,
         ...theme.presets.alignCenter,
-        ...theme.spacing.padding(1.4),
-        height: 50,
+        borderRadius: theme.borderRadius.medium,
+        ...theme.spacing.padding(1),
+        backgroundColor: theme.colors.backgroundSecondary,
       },
       'itemWrapper:selected': {
         backgroundColor: theme.colors.primary,
       },
-      'itemText:selected': {
-        color: theme.colors.white,
+      'itemIcon:selected': {
+        color: theme.colors.backgroundSecondary,
+        ...theme.sized(2),
 
       },
-      'itemIcon:selected': {
-        color: theme.colors.white,
-        ...theme.sized(3),
+      'itemText:selected': {
+        color: theme.colors.backgroundSecondary,
+
       },
       itemIcon: {
-        width: 0,
         height: 0,
-      },
-      list: {
-        height: 'auto',
-
-        maxHeight: theme.values.window.height * 0.75,
+        width: 0,
 
       },
-      // listContent: {
-      //   paddingBottom: theme.values.safeAreaTop,
-      // },
-
     }
   }),
 }

package/src/components/Select/types.ts

@@ -2,19 +2,26 @@ import {
   ComponentVariants,
   FormTypes,
   IconPlaceholder,
+  PropsOf,
 } from '@codeleap/common'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { DrawerProps } from '../Drawer'
+import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
+import { Text } from '../Text'
 import { TextInputProps } from '../TextInput'
+import { Touchable } from '../Touchable'
 import { SelectComposition, SelectStyles } from './styles'
 
-export type SelectRenderFNProps<T> = & {
+export type SelectRenderFNProps<T> = {
   styles: StylesOf<SelectComposition>
   onPress: () => void
   isSelected?: boolean
   item: FormTypes.Options<T>[number]
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+  textProps?: Partial<PropsOf<typeof Text>>
+  iconProps?: Partial<PropsOf<typeof Icon>>
 }
 
 export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
@@ -39,5 +46,8 @@ export type CustomSelectProps<T> = SelectDrawerProps & {
     clearable?: boolean
     clearIconName?: IconPlaceholder
     keyboardAware?: GetKeyboardAwarePropsOptions
+    itemProps?: Partial<
+      Pick<SelectRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'
+    >>
   } & ComponentVariants<typeof SelectStyles>
 

package/src/components/TextInput/index.tsx

@@ -211,7 +211,9 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
           styles={leftIconStyles}
           commonStyles={commonIconStyles}
           debugName={`${debugName} left icon`}
-          onPress={() => {}}
+          onPress={() => {
+            input?.current?.focus?.()
+          }}
           noFeedback={!leftIcon?.onPress}
           {...leftIcon}
         />

package/src/components/Touchable/index.tsx

@@ -44,7 +44,7 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     style,
     debugName,
     debugComponent,
-    debounce = 1000,
+    debounce = 500,
     noFeedback = false,
     styles,
     ...props
@@ -119,7 +119,6 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
       'height!',
       'flex!',
       'backgroundColor!',
-
     ]
 
     const wrapperStyle = {} as any
@@ -144,7 +143,10 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
         pressableStyle[key] = value
       }
     })
-
+    if (wrapperStyle.position === 'absolute') {
+      pressableStyle.width = '100%'
+      pressableStyle.height = '100%'
+    }
     wrapperStyle.overflow = 'hidden'
     // wrapperStyle.flexDirection = 'row'
     // wrapperStyle.alignItems = 'stretch'