@codeleap/mobile 2.3.16 → 2.3.20

package/src/components/Modal/styles.ts

@@ -1,9 +1,9 @@
 import {
   assignTextStyle,
-  ButtonComposition,
   createDefaultVariantFactory,
   includePresets,
 } from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
 
 export type AnimatableParts = 'box' | 'backdrop'
 
@@ -11,7 +11,6 @@ export type ModalParts =
   | AnimatableParts
   | 'wrapper'
   | 'innerWrapper'
-
   | 'scrollContent'
   | 'scroll'
   | 'body'
@@ -19,7 +18,7 @@ export type ModalParts =
   | 'header'
   | 'backdropTouchable'
   | 'title'
-  | `closeButton${Capitalize<ButtonComposition>}`
+  | `closeButton${Capitalize<ActionIconComposition>}`
 
 export type ModalComposition =
   | ModalParts
@@ -32,26 +31,14 @@ const createModalStyle = createDefaultVariantFactory<ModalComposition>()
 const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
 
 export const ModalStyles = {
-
   ...presets,
   default: createModalStyle((theme) => {
-    const fullSize = {
-      ...theme.presets.whole,
-      position: 'absolute',
-      width: theme.values.width,
-      height: theme.values.height,
-      maxHeight: theme.values.height,
-    }
-
     return {
       wrapper: {
-        zIndex: 1,
-        height: theme.values.height,
-        width: theme.values.width,
-        ...theme.presets.whole,
-        position: 'absolute',
-        ...theme.presets.safeAreaTop(),
-        paddingBottom: theme.values.bottomNavHeight,
+        ...theme.presets.absolute,
+        // ...theme.presets.whole,
+        ...theme.presets.fullHeight,
+        ...theme.presets.fullWidth,
       },
       'box:transition': {
         scale: {
@@ -70,12 +57,17 @@ export const ModalStyles = {
         },
       },
       backdrop: {
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
 
         backgroundColor: theme.colors.black,
-        ...fullSize,
+
       },
       backdropTouchable: {
-        ...fullSize,
+        // height: '100%',
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
       },
       'backdrop:visible': {
         opacity: 0.5,
@@ -84,28 +76,25 @@ export const ModalStyles = {
         opacity: 0,
       },
       innerWrapper: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        width: theme.values.width,
-        flex: 1,
+
       },
       scroll: {
-        width: theme.values.width,
-        height: theme.values.window.height,
-        maxHeight: theme.values.window.height,
+        flex: 1,
+        // maxHeight: theme.values.height,
       },
       scrollContent: {
         ...theme.presets.alignCenter,
         ...theme.presets.justifyCenter,
-        ...theme.spacing.paddingVertical(2),
-        ...theme.presets.fullWidth,
-        flex: 1,
+        flexGrow: 1,
+        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
+        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
       },
       box: {
-        width: '80%',
         backgroundColor: theme.colors.background,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(2),
+        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': {
@@ -121,33 +110,34 @@ export const ModalStyles = {
         flexDirection: 'row',
         ...theme.presets.justifySpaceBetween,
         ...theme.presets.alignCenter,
+        ...theme.presets.alignSelfStretch,
+        ...theme.spacing.marginBottom(1),
       },
-      closeButtonWrapper: {
+      closeButtonTouchableWrapper: {
         alignSelf: 'center',
         ...theme.spacing.marginLeft('auto'),
       },
+      closeButtonIcon: {
+        color: theme.colors.text,
+      },
       title: {
-        ...theme.presets.textCenter,
         ...assignTextStyle('h3')(theme).text,
-        ...theme.spacing.paddingBottom(1),
-        flex: 1,
       },
     }
   }),
   popup: createModalStyle(() => ({})),
   fullscreen: createModalStyle((theme) => ({
-    overlay: {
-      backgroundColor: theme.colors.background,
-    },
-    'overlay:visible': {
-      opacity: 1,
+    scrollContent: {
+      paddingTop: 0,
+      paddingBottom: 0,
     },
     box: {
-      flex: 1,
+      width: '100%',
+      flexGrow: 1,
       borderRadius: 0,
-      width: theme.values.width,
-      height: theme.values.window.height,
       ...theme.presets.center,
+      ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
+      ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
     },
   })),
 }

package/src/components/MultiSelect/index.tsx

@@ -32,6 +32,7 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
     clearIconName = 'close',
     limit = null,
     validate = null,
+    itemProps = {},
     ...drawerProps
   } = selectProps
 
@@ -81,6 +82,8 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
       onPress={() => select(item.value)}
       styles={variantStyles}
       icon={selectedIcon as IconPlaceholder}
+      {...itemProps}
+
     />
   }
 
@@ -123,16 +126,19 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
       )
     }
 
-    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
+    <ModalManager.Modal title={label} {...drawerProps} styles={variantStyles} id={null}>
       <List<MultiSelectProps<any>['options']>
         data={options}
-        style={variantStyles.list}
-        contentContainerStyle={variantStyles.listContent}
+        styles={getNestedStylesByKey('list', variantStyles)}
         keyExtractor={(i) => i.value}
+        separators
+        keyboardAware={{
+          enabled: false,
+        }}
         renderItem={renderListItem}
         {...listProps}
       />
-    </ModalManager.Drawer>
+    </ModalManager.Modal>
 
   </>
 }

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>
 
   </>
 }