@codeleap/mobile 1.9.33 → 2.0.2

package/src/components/SegmentedControl/index.tsx

@@ -6,7 +6,7 @@ import { PropsOf, useCodeleapContext, useDefaultComponentStyle } from '@codeleap
 import { SegmentedControlComposition, SegmentedControlStyles } from './styles'
 import { Touchable } from '../Touchable'
 import { StylesOf } from '../../types/utility'
-import { Text } from '../Text'
+import { Text, TextProps } from '../Text'
 import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { View } from '../View'
 export * from './styles'
@@ -24,6 +24,8 @@ export type SegmentedControlProps<T = string> = ScrollProps & {
       duration?: number
       easing?: EasingFunction
     }
+    textProps?: Partial<PropsOf<typeof Text>>
+    touchableProps?: Partial<PropsOf<typeof Touchable>>
     styles?: StylesOf<SegmentedControlComposition>
     scrollProps?: any
     RenderButton?: (props: SegmentedControlProps & {
@@ -31,12 +33,14 @@ export type SegmentedControlProps<T = string> = ScrollProps & {
       textProps: PropsOf<typeof Text>
       option: {label: string; value: any}
     }) => ReactElement
-    RenderAnimatedView?: (props: SegmentedControlProps) => ReactElement
+    RenderAnimatedView?: (props: Partial<SegmentedControlProps>) => ReactElement
+    getItemWidth?: (item:{label: string; value: T }, idx: number, arr: {label: string; value: T }[]) => number
 }
 
 const defaultAnimation = {
+  type: 'timing',
   duration: 200,
-  // easing: Easing.linear,
+  easing: Easing.linear,
 }
 
 const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
@@ -49,13 +53,13 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     animation = {},
     variants = [],
     scrollProps = {},
+    getItemWidth = (i) => i.label.length * 20,
     RenderAnimatedView,
     RenderButton,
-
+    ...viewProps
   } = props
-  const { Theme } = useCodeleapContext()
 
-  const _animation = {
+  let _animation = {
     ...defaultAnimation, ...animation,
   }
 
@@ -75,14 +79,10 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
   }
 
   const widthStyle = useMemo(() => {
-    const maxWordLength = Object.assign([], options)
-      .sort((a, b) => {
-        return a.label.length - b.label.length
-      })[0].label.length
-    const fitMaxWidth = Theme.values.width - Theme.spacing.value(4)
-    let fitItemWidth = maxWordLength * options.length * 6
-    if (fitItemWidth * options.length < fitMaxWidth) fitItemWidth = fitMaxWidth / options.length
-    return { width: fitItemWidth }
+    const sizes = options.map(getItemWidth)
+    const maxWidth = sizes.sort((a, b) => b - a)[0]
+
+    return { width: maxWidth }
   }, [options])
 
   const currentOptionIdx = options.findIndex(o => o.value === value) || 0
@@ -118,6 +118,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 
   const AnimatedView = RenderAnimatedView || View
   variantStyles = JSON.parse(JSON.stringify(variantStyles))
+  _animation = JSON.parse(JSON.stringify(_animation))
   return (
     <Scroll
       horizontal
@@ -128,14 +129,19 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
       ref={scrollRef}
     >
       <View style={variantStyles.wrapper}>
-        <AnimatedView {...props}
+        <AnimatedView
+          options={options}
+          styles={variantStyles}
+
           animated
           style={[variantStyles.selectedBubble, widthStyle]}
           animate={{
             translateX,
           }}
+          transition={{
+            translateX: _animation,
+          }}
 
-          transition={_animation}
         />
         {options.map((o, idx) => {
           const selected = value === o.value
@@ -145,13 +151,16 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
             debugName: `Segmented Control ${debugName}, option ${o.label}`,
             onPress: onPress(o.value, idx),
             style: [widthStyle, variantStyles.button],
+            ...props.touchableProps,
+
           }
 
-          const textProps = {
+          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) {
@@ -161,7 +170,11 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
           }
           return <Touchable
             {...touchableProps}
+            noFeedback={selected}
             key={touchableProps.key}
+            styles={{
+              feedback: variantStyles.buttonFeedback,
+            }}
           >
             <Text
 

package/src/components/SegmentedControl/styles.ts

@@ -1,4 +1,5 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { TouchableStylesGen } from '../Touchable'
 
 export type SegmentedControlStates = 'selected'
 
@@ -10,9 +11,20 @@ export type SegmentedControlComposition =
  'text' |
  `text:${SegmentedControlStates}` |
  'button' |
+ 'buttonFeedback' |
  `button:${SegmentedControlStates}`
 
-const createSegmentedControlStyle = createDefaultVariantFactory<SegmentedControlComposition>()
+export type SegmentedControlStylesGen<TCSS = any> =
+  StylesOf<
+    Exclude<SegmentedControlComposition, 'buttonFeedback'>
+  > & {
+    buttonFeedback?: TouchableStylesGen['feedback']
+  }
+
+const createSegmentedControlStyle = createDefaultVariantFactory<
+SegmentedControlComposition,
+SegmentedControlStylesGen
+>()
 
 const presets = includePresets((style) => createSegmentedControlStyle(() => ({ scrollContent: style })))
 
@@ -21,7 +33,10 @@ export const SegmentedControlStyles = {
   default: createSegmentedControlStyle((theme) => {
 
     return {
-
+      buttonFeedback: {
+        type: 'opacity',
+        value: 0.5,
+      },
       text: {
         color: theme.colors.text,
       },
@@ -34,21 +49,28 @@ export const SegmentedControlStyles = {
       },
       scrollContent: {
         // borderRadius: Theme.borderRadius.large,
+        ...theme.presets.row,
         ...theme.spacing.paddingHorizontal(2),
+        ...theme.presets.alignStretch,
       },
       button: {
         backgroundColor: 'transparent',
         ...theme.presets.alignCenter,
-        color: 'red',
-        ...theme.spacing.padding(2),
         ...theme.presets.justifyCenter,
+
+        borderRadius: theme.borderRadius.large,
+        ...theme.spacing.padding(1),
+        minHeight: '100%',
+
       },
       selectedBubble: {
         position: 'absolute',
         zIndex: -1,
         ...theme.spacing.padding(2),
-        maxHeight: 50,
-        minHeight: 50,
+        // maxHeight: 50,
+        // minHeight: 50,
+        top: 0,
+        bottom: 0,
         borderRadius: theme.borderRadius.large,
         backgroundColor: theme.colors.primary,
       },

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,53 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     return TypeGuards.isString(display) ? display : ''
   }, [value, placeholder, options])
 
-  return <>
-    <TextInput
-
-      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 Item = renderItem || SelectItem
+
+  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'],
-    ]} />
-
-    <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`}
+  }
+  return <>
+    {
+      !hideInput && (
+        <TextInput
+          caretHidden
+          value={selectedLabel}
+          rightIcon={{
+            icon: arrowIconName as IconPlaceholder,
+          }}
+          editable={false}
+          touchableWrapper
+          onPress={close}
+          wrapperProps={{
+            debugName: 'Select',
+
+          }}
+          pointerEvents={'none'}
+          label={label}
+          debugName={'Select input'}
+          styles={inputStyles}
+          style={style}
+          {...inputProps}
+        />
+      )
+    }
+
+    <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>
-
-          {
-            footer && <View style={variantStyles.modalFooter}>
-              {footer}
-            </View>
-          }
-        </View>
-      </View>
-    </Modal>
+    </ModalManager.Drawer>
+
   </>
 }
 

package/src/components/Select/styles.ts

@@ -1,81 +1,59 @@
-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' |
+  `itemIcon${ItemStates}`
 
-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.presets.row,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+        ...theme.spacing.padding(1.4),
+        height: 50,
+      },
+      'itemWrapper:selected': {
+        backgroundColor: theme.colors.primary,
+      },
+      'itemText:selected': {
+        color: theme.colors.white,
 
-const createSelectStyle = createDefaultVariantFactory<MobileSelectComposition>()
+      },
+      'itemIcon:selected': {
+        color: theme.colors.white,
+        ...theme.sized(3),
+      },
+      itemIcon: {
+        width: 0,
+        height: 0,
+      },
+      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>
 

package/src/components/Slider/index.tsx

@@ -12,6 +12,8 @@ import {
 import { InputLabel } from '../TextInput'
 import { SliderProps } from './types'
 
+export * from './styles'
+
 export const Slider: React.FC<SliderProps> = (sliderProps) => {
   const [tooltipVisible, setTooltipVisible] = React.useState(false)