@codeleap/mobile 4.3.9 → 5.0.0

package/src/components/Select/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable max-lines */
-import { TypeGuards } from '@codeleap/types'
-import { FormTypes } from '@codeleap/form'
+import { Option, Options, TypeGuards } from '@codeleap/types'
 import {
   onMount,
   onUpdate,
@@ -19,11 +18,13 @@ import Modal from '../Modal'
 import { MobileStyleRegistry } from '../../Registry'
 import { SearchInput } from '../SearchInput'
 import { useStylesFor } from '../../hooks'
+import { SelectableField, fields } from '@codeleap/form'
+import { useInputBase } from '../InputBase/useInputBase'
 
 export * from './styles'
 export * from './types'
 
-const defaultFilterFunction = (search: string, options: FormTypes.Options<any>) => {
+const defaultFilterFunction = (search: string, options: Options<any>) => {
   return options.filter((option) => {
     if (TypeGuards.isString(option.label)) {
       return option.label.toLowerCase().includes(search.toLowerCase())
@@ -38,7 +39,7 @@ const defaultGetLabel = (option) => {
     if (option?.length === 0) return null
 
     const labels = option?.map(option => option?.label)?.filter(value => !!value)
-    
+
     return labels?.join(', ')
   } else {
     if (!option) return null
@@ -82,8 +83,6 @@ export const Select = <T extends string | number = string, Multi extends boolean
   }
 
   const {
-    value,
-    onValueChange,
     label,
     options = [],
     style,
@@ -117,9 +116,16 @@ export const Select = <T extends string | number = string, Multi extends boolean
     searchInputProps,
     outerInputComponent,
     disabled,
+    field,
+    value: _value,
+    onValueChange: _onValueChange,
     ...modalProps
   } = allProps
 
+  const { fieldHandle } = useInputBase(field, fields.selectable as () => SelectableField<T, any>, [_value, _onValueChange])
+
+  const value = fieldHandle.value
+
   const isValueArray = TypeGuards.isArray(value) && multiple
 
   const {
@@ -144,7 +150,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
   const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false, isBooleanToggle: true })
 
   const currentValueLabel = useMemo(() => {
-    const _options = (multiple ? labelOptions : labelOptions?.[0]) as Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]
+    const _options = (multiple ? labelOptions : labelOptions?.[0]) as Multi extends true ? Options<T> : Option<T>
 
     const label = getLabel(_options)
 
@@ -197,7 +203,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
       newOption = currentOptions.find(o => o.value === selectedValue)
     }
 
-    onValueChange(newValue)
+    fieldHandle.setValue(newValue)
 
     if (isValueArray) {
       if (removedIndex !== null) {
@@ -226,20 +232,22 @@ export const Select = <T extends string | number = string, Multi extends boolean
       selected = value === item.value
     }
 
-    return <Item
-      debugName={`${debugName} item ${item.value}`}
-      selected={selected}
-      text={item.label}
-      item={item}
-      onPress={() => select(item.value)}
-      // @ts-ignore
-      icon={selectedIcon}
-      // @ts-ignore
-      rightIcon={selectedIcon}
-      style={compositionStyles?.item}
-      index={index}
-      {...itemProps}
-    />
+    return (
+      <Item
+        debugName={`${debugName} item ${item.value}`}
+        selected={selected}
+        text={item.label}
+        item={item}
+        onPress={() => select(item.value)}
+        // @ts-ignore
+        icon={selectedIcon}
+        // @ts-ignore
+        rightIcon={selectedIcon}
+        style={compositionStyles?.item}
+        index={index}
+        {...itemProps}
+      />
+    )
   }, [value, select, multiple])
 
   const isEmpty = TypeGuards.isNil(value)
@@ -249,7 +257,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
 
   const onPressInputIcon = () => {
     if (showClearIcon) {
-      onValueChange(null)
+      fieldHandle.setValue(null)
     } else {
       close?.()
     }
@@ -314,7 +322,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
     >
       <ListComponent
         data={searchable ? filteredOptions : options}
-        scrollEnabled={false}
+        scrollEnabled={true}
         showsHorizontalScrollIndicator={false}
         style={compositionStyles?.list}
         keyExtractor={(i: { value: any }) => i.value}

package/src/components/Select/types.ts

@@ -1,5 +1,4 @@
-import { PropsOf } from '@codeleap/types'
-import { FormTypes } from '@codeleap/form'
+import { Option, Options, PropsOf } from '@codeleap/types'
 import { AppIcon, StyledProp } from '@codeleap/styles'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
@@ -12,12 +11,13 @@ import { TextInputComposition } from '../TextInput'
 import { SearchInputProps } from '../SearchInput'
 import { Touchable } from '../Touchable'
 import { SelectComposition } from './styles'
+import { SelectableField } from '@codeleap/form'
 
 export type SelectRenderFNProps<T> = {
   style: StylesOf<SelectComposition>
   onPress: () => void
   selected?: boolean
-  item: FormTypes.Options<T>[number]
+  item: Option<T>
   touchableProps?: Partial<PropsOf<typeof Touchable>>
   textProps?: Partial<PropsOf<typeof Text>>
   iconProps?: Partial<PropsOf<typeof Icon>>
@@ -36,44 +36,42 @@ type SelectHeaderProps = {
   searchComponent?: React.ReactNode
 }
 
-export type SelectOuterInputProps<T = any, Multi extends boolean = false> = SelectProps<T, Multi> & {
-  currentValueLabel: FormTypes.Label
+export type SelectOuterInputProps<T extends string | number = any, Multi extends boolean = false> = SelectProps<T, Multi> & {
+  currentValueLabel: string
   styles?: StylesOf<TextInputComposition>
   clearIcon?: Partial<ActionIconProps>
 }
 
-type OuterInputComponent<T, Multi extends boolean> = (props: SelectOuterInputProps<T, Multi>) => JSX.Element
+type OuterInputComponent<T extends string | number, Multi extends boolean> = (props: SelectOuterInputProps<T, Multi>) => JSX.Element
 
 export type ValueBoundSelectProps<
-  T,
+  T extends string | number,
   Multi extends boolean = false
 > = {
-  options?: FormTypes.Options<T>
-  defaultOptions?: FormTypes.Options<T>
-  loadOptions?: (search: string) => Promise<FormTypes.Options<T>>
-  value: SelectValue<T, Multi>
+  options?: Options<T>
+  defaultOptions?: Options<T>
+  loadOptions?: (search: string) => Promise<Options<T>>
   renderItem?: SelectRenderFN<SelectValue<T, Multi>>
-  onValueChange: (value: SelectValue<T, Multi>) => void
-  filterItems?: (search: string, items: FormTypes.Options<T>) => FormTypes.Options<T>
+  filterItems?: (search: string, items: Options<T>) => Options<T>
   onLoadOptionsError?: (error: any) => void
   multiple?: Multi
-  getLabel?: (forOption: Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]) => FormTypes.Label
+  getLabel?: (forOption: Multi extends true ? Options<T> : Option<T>) => string
   outerInputComponent?: OuterInputComponent<T, Multi>
   inputProps?: Partial<SelectOuterInputProps<T, Multi>>
   disabled?: boolean
 }
 
-export type ReplaceSelectProps<Props, T, Multi extends boolean = false> = Omit<
+export type ReplaceSelectProps<Props, T extends string | number, Multi extends boolean = false> = Omit<
   Props,
   keyof ValueBoundSelectProps<T, Multi>
 > & ValueBoundSelectProps<T, Multi>
 
-export type SelectProps<T = any, Multi extends boolean = false> =
+export type SelectProps<T extends string | number = any, Multi extends boolean = false> =
   SelectModalProps &
   ValueBoundSelectProps<T, Multi> &
   {
-    placeholder?: FormTypes.Label
-    label?: FormTypes.Label
+    placeholder?: string
+    label?: string
     hideInput?: boolean
     selectedIcon?: AppIcon
     arrowIconName?: AppIcon
@@ -92,4 +90,7 @@ export type SelectProps<T = any, Multi extends boolean = false> =
     loadOptionsOnMount?: boolean
     loadOptionsOnOpen?: boolean
     style?: StyledProp<SelectComposition>
+    field?: SelectableField<T, any>
+    value?: T
+    onValueChange?: (value: T) => void
   }

package/src/components/Slider/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Slider as RNSlider } from '@miblanchard/react-native-slider'
-import { StyleSheet } from 'react-native'
 import { TypeGuards } from '@codeleap/types'
 import { onUpdate } from '@codeleap/hooks'
 import { SliderProps, TrackMarkProps } from './types'
@@ -11,6 +10,9 @@ import { Touchable } from '../Touchable'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { useInputBase } from '../InputBase/useInputBase'
+import { fields } from '@codeleap/form'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
 
 export * from './styles'
 export * from './types'
@@ -45,8 +47,7 @@ export const Slider = (props: SliderProps) => {
 
   const {
     debounce = null,
-    onValueChange,
-    value,
+    field,
     label,
     description,
     debugName,
@@ -57,54 +58,32 @@ export const Slider = (props: SliderProps) => {
     labelClickable,
     updateImmediately = false,
     trackMarkComponent: SliderTrackMark,
+    value,
+    onValueChange,
     ...sliderProps
   } = others
 
-  const [_value, _setValue] = updateImmediately ? [value, onValueChange] : React.useState(value)
+  const {
+    fieldHandle,
+    wrapperRef,
+  } = useInputBase(field, fields.number, [value, onValueChange])
+
+  const [_value, _setValue] = updateImmediately ? [fieldHandle?.value, fieldHandle.setValue] : React.useState<number | Array<number>>(0)
 
   onUpdate(() => {
-    if(updateImmediately) return
-    if (value !== _value) {
-      _setValue(value)
+    if (updateImmediately) return
+    if (fieldHandle?.value !== _value) {
+      _setValue(fieldHandle?.value)
     }
-  }, [value])
+  }, [fieldHandle?.value])
 
   const styles = useStylesFor(Slider.styleRegistryName, style)
 
-  const thumbStyle = React.useMemo(() => {
-    return StyleSheet.flatten([
-      styles?.thumb,
-      disabled && styles['thumb:disabled'],
-    ])
-  }, [])
-
-  const trackStyle = React.useMemo(() => {
-    return StyleSheet.flatten([
-      styles?.track,
-      disabled && styles['track:disabled'],
-    ])
-  }, [disabled])
-
-  const selectedTrackStyle = React.useMemo(() => {
-    return StyleSheet.flatten([
-      styles?.selectedTrack,
-      disabled && styles['selectedTrack:disabled'],
-    ])
-  }, [disabled])
-
-  const unselectedTrackStyle = React.useMemo(() => {
-    return StyleSheet.flatten([
-      styles?.unselectedTrack,
-      disabled && styles['unselectedTrack:disabled'],
-    ])
-  }, [disabled])
-
-  const containerStyle = React.useMemo(() => {
-    return StyleSheet.flatten([
-      styles?.sliderContainer,
-      disabled && styles['sliderContainer:disabled'],
-    ])
-  }, [disabled])
+  const partialStyles = useInputBasePartialStyles(
+    styles,
+    ['thumb', 'track', 'selectedTrack', 'unselectedTrack', 'sliderContainer', 'trackMark'],
+    { disabled }
+  )
 
   const trackMarksHaveContent = !(TypeGuards.isArray(trackMarks) || TypeGuards.isNil(trackMarks))
 
@@ -115,16 +94,10 @@ export const Slider = (props: SliderProps) => {
     return Object.keys(trackMarks).map((key) => Number(key))
   }, [trackMarksHaveContent])
 
-  const trackMarkStyle = React.useMemo(() => {
-    return StyleSheet.flatten([
-      styles?.trackMark,
-      disabled && styles['trackMark:disabled'],
-    ])
-  }, [disabled])
-
   return (
     <InputBase
       {..._inputBaseProps}
+      ref={wrapperRef}
       disabled={disabled}
       style={styles}
       labelAsRow
@@ -133,7 +106,7 @@ export const Slider = (props: SliderProps) => {
         <View style={styles.labelRow}>
           {label ? (
             <Touchable
-              onPress={() => labelClickable ? onValueChange(sliderProps?.minimumValue || minimumValue) : null}
+              onPress={() => labelClickable ? fieldHandle.setValue(sliderProps?.minimumValue || minimumValue) : null}
               style={styles.labelBtn}
               debugName='slider title'
             >
@@ -142,7 +115,7 @@ export const Slider = (props: SliderProps) => {
           ) : null}
           {description ? (
             <Touchable
-              onPress={() => labelClickable ? onValueChange(sliderProps?.maximumValue || maximumValue) : null}
+              onPress={() => labelClickable ? fieldHandle.setValue(sliderProps?.maximumValue || maximumValue) : null}
               style={styles?.descriptionBtn}
               debugName='slider description'
             >
@@ -155,18 +128,16 @@ export const Slider = (props: SliderProps) => {
       <RNSlider
         value={_value}
         onValueChange={_setValue}
-        // @ts-ignore
-        thumbStyle={thumbStyle}
-        // @ts-ignore
-        trackStyle={trackStyle}
-        minimumTrackStyle={selectedTrackStyle}
-        maximumTrackStyle={unselectedTrackStyle}
-        containerStyle={containerStyle}
+        thumbStyle={partialStyles?.thumb}
+        trackStyle={partialStyles?.track}
+        minimumTrackStyle={partialStyles?.selectedTrack}
+        maximumTrackStyle={partialStyles?.unselectedTrack}
+        containerStyle={partialStyles?.sliderContainer}
         minimumValue={minimumValue}
         maximumValue={maximumValue}
         onSlidingComplete={() => {
-          if(updateImmediately) return
-          onValueChange(_value)
+          if (updateImmediately) return
+          fieldHandle.setValue(_value)
         }}
         disabled={disabled}
         {...sliderProps}
@@ -185,17 +156,14 @@ export const Slider = (props: SliderProps) => {
                   idxStyle = styles?.lastTrackMark
                 }
 
-                const style = [
-                  trackMarkStyle,
-                  idxStyle,
-                ]
+                const style = [partialStyles?.trackMark, idxStyle]
 
                 if (!trackMarksHaveContent) {
                   return <SliderTrackMark
                     index={idx}
                     style={style}
                     key={idx}
-                    onPress={() => trackMarksClickable ? onValueChange(trackMarksProp[idx]) : null}
+                    onPress={() => trackMarksClickable ? fieldHandle.setValue(trackMarksProp[idx]) : null}
                   />
                 }
 
@@ -207,7 +175,7 @@ export const Slider = (props: SliderProps) => {
                   content={content}
                   style={style}
                   key={idx}
-                  onPress={() => trackMarksClickable ? onValueChange(trackMarksProp[idx]) : null}
+                  onPress={() => trackMarksClickable ? fieldHandle.setValue(trackMarksProp[idx]) : null}
                 />
               })
             }

package/src/components/Slider/types.ts

@@ -1,27 +1,29 @@
 import { SliderComposition } from './styles'
 import { SliderProps as RNSliderProps } from '@miblanchard/react-native-slider/lib/types'
 import { InputBaseProps } from '../InputBase'
-import { StyledProp } from '@codeleap/styles'
+import { ICSS, StyledProp } from '@codeleap/styles'
+import { NumberField } from '@codeleap/form'
 
 export type SliderProps =
   Partial<Omit<RNSliderProps, 'value' | 'onValueChange' | 'style'>> &
   Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> &
   {
     debounce?: number | null
-    trackMarklabels: string[]
-    value: number | number[]
-    onValueChange: (val: number | number[]) => void
+    trackMarklabels?: string[]
     trackMarks?: RNSliderProps['trackMarks'] | Record<number, string>
     trackMarksClickable?: boolean
     labelClickable?: boolean
     trackMarkComponent?: React.ComponentType<TrackMarkProps>
     style?: StyledProp<SliderComposition>
     updateImmediately?: boolean
+    field?: NumberField<any>
+    value?: number | number[]
+    onValueChange?: (value: number | number[]) => void
   }
 
 export type TrackMarkProps = {
   index: number
   content?: string | React.ReactNode
-  style?: any
+  style?: ICSS | ICSS[]
   onPress?: () => void
 }

package/src/components/SortablePhotos/index.tsx

@@ -2,22 +2,24 @@ import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@co
 import { FileInput } from '../FileInput'
 import { Icon } from '../Icon'
 import { Image } from '../Image'
-import { Dimensions, View } from 'react-native'
-import { DragSortableView } from 'react-native-drag-sort'
-import { SortableItemProps, SortablePhoto, SortablePhotosProps } from './types'
+import { Pressable, View } from 'react-native'
+import { SortableItemProps, SortablePhoto, SortablePhotosProps, WithId } from './types'
 import { useSortablePhotos } from './useSortablePhotos'
 import { useStylesFor } from '../../hooks'
 import { MobileStyleRegistry } from '../../Registry'
 import { ActivityIndicator } from '../ActivityIndicator'
+import Sortable, { type SortableGridRenderItem } from 'react-native-sortables'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { useCallback } from 'react'
 
 export * from './styles'
 export * from './types'
 
 const DefaultItem = <T extends SortablePhoto>(props: SortableItemProps<T>) => {
-  const { photo, width, height, styles, emptyIcon } = props
+  const { photo, styles, emptyIcon } = props
 
   return (
-    <View style={[{ width, height }, styles.photoWrapper]}>
+    <View style={styles.photoWrapper}>
       {
         !!photo?.filename
           ? <Image resizeMode='cover' source={{ uri: photo?.file }} style={styles.photoImage} />
@@ -39,8 +41,6 @@ const defaultGetFilename = (file: string) => {
   return new Date().toISOString()
 }
 
-const screenWidth = Dimensions.get('screen').width
-
 export const SortablePhotos = <T extends SortablePhoto>(props: SortablePhotosProps<T>) => {
   const allProps = {
     ...SortablePhotos.defaultProps,
@@ -54,10 +54,6 @@ export const SortablePhotos = <T extends SortablePhoto>(props: SortablePhotosPro
     multiple,
     pickerConfig,
     emptyIcon,
-    disableDragDropEmptyItems,
-    itemWidth: _itemWidth,
-    itemHeight: _itemHeight,
-    width: _parentWidth,
     style,
     loading,
     ...rest
@@ -71,20 +67,11 @@ export const SortablePhotos = <T extends SortablePhoto>(props: SortablePhotosPro
     input,
     handlePressPhoto,
     numberPhotosMissing,
-    emptyIndexes,
+    enabledDragDrop,
     onChangePhotosOrder,
     data,
   } = useSortablePhotos<T>(allProps)
 
-  const defaultParentWidth = screenWidth - (gap * 2)
-  const defaultItemWidth = (defaultParentWidth / numColumns) - gap
-
-  const itemWidth = _itemWidth ?? defaultItemWidth
-  const itemHeight = _itemHeight ?? itemWidth
-  const parentWidth = _parentWidth ?? defaultParentWidth
-
-  const childrenMargin = gap / 2
-
   const fileInputPickerOptions = {
     ...SortablePhotos.defaultProps.pickerConfig,
     ...pickerConfig,
@@ -92,6 +79,17 @@ export const SortablePhotos = <T extends SortablePhoto>(props: SortablePhotosPro
     maxFiles: numberPhotosMissing,
   }
 
+  const renderItem: SortableGridRenderItem<WithId<T>> = useCallback(({ item, index }) => (
+    <Sortable.Pressable onPress={() => handlePressPhoto(item, index)}>
+      <RenderItem
+        photo={item}
+        order={index}
+        styles={styles}
+        emptyIcon={emptyIcon}
+      />
+    </Sortable.Pressable>
+  ), [handlePressPhoto])
+
   if (loading) {
     return (
       <View style={[styles.wrapper, styles['wrapper:loading']]}>
@@ -100,7 +98,7 @@ export const SortablePhotos = <T extends SortablePhoto>(props: SortablePhotosPro
     )
   }
 
-  return (
+  return <GestureHandlerRootView>
     <View style={styles.wrapper}>
       <FileInput
         mode='hidden'
@@ -108,32 +106,19 @@ export const SortablePhotos = <T extends SortablePhoto>(props: SortablePhotosPro
         pickerOptions={fileInputPickerOptions}
       />
 
-      <DragSortableView
-        dataSource={data}
-        childrenHeight={itemHeight}
-        childrenWidth={itemWidth}
-        parentWidth={parentWidth}
-        marginChildrenBottom={childrenMargin}
-        marginChildrenLeft={childrenMargin}
-        marginChildrenRight={childrenMargin}
-        marginChildrenTop={childrenMargin}
-        onDataChange={onChangePhotosOrder}
-        onClickItem={handlePressPhoto}
-        fixedItems={disableDragDropEmptyItems ? emptyIndexes : undefined}
+      <Sortable.Grid
+        columns={numColumns}
+        columnGap={gap}
+        rowGap={gap}
+        sortEnabled={enabledDragDrop}
+        showDropIndicator
         {...rest}
-        renderItem={(item, order) => (
-          <RenderItem
-            width={itemWidth}
-            height={itemHeight}
-            photo={item}
-            order={order}
-            styles={styles}
-            emptyIcon={emptyIcon}
-          />
-        )}
+        data={data}
+        renderItem={renderItem}
+        onDragEnd={({ data }) => onChangePhotosOrder(data as unknown as WithId<T>[])}
       />
     </View>
-  )
+  </GestureHandlerRootView>
 }
 
 SortablePhotos.styleRegistryName = 'SortablePhotos'
@@ -149,8 +134,7 @@ SortablePhotos.defaultProps = {
   numColumns: 3,
   renderPhoto: DefaultItem,
   multiple: true,
-  disableDragDropEmptyItems: true,
-  gap: 16,
+  gap: 8,
   emptyIcon: 'plus',
   modalTitle: 'Photos',
   modalBody: null,

package/src/components/SortablePhotos/types.ts

@@ -1,17 +1,20 @@
 import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
 import { ReactElement } from 'react'
 import { SortablePhotosComposition } from './styles'
+import { type SortableGridProps } from 'react-native-sortables'
 
 export type SortablePhoto = {
   filename: string | null
   file: string | null
 }
 
+export type WithId<T extends SortablePhoto> = T & {
+  key: string
+}
+
 export type SortableItemProps<T extends SortablePhoto> = {
   photo: T
   order: number
-  height: number
-  width: number
   styles: Record<SortablePhotosComposition, ICSS>
   emptyIcon: AppIcon
 }
@@ -24,29 +27,17 @@ export type SortablePhotosPickerConfig = {
   showCropFrame?: boolean
 }
 
-export type SortablePhotosProps<T extends SortablePhoto> = {
+export type SortablePhotosProps<T extends SortablePhoto> = Omit<SortableGridProps<T>, 'data' | 'columns'> & {
   numColumns?: number
   numPhotos?: number
   renderPhoto?: (props: SortableItemProps<T>) => ReactElement
   photos: T[]
   onChangePhotos: (newPhotos: T[]) => void
   gap?: number
-  itemHeight?: number
-  itemWidth?: number
-  width?: number
   onPressPhoto?: (data: T[], photo: T, order: number) => void
-  onDragStart?: (fromIndex: number) => void
-  onDragEnd?: (fromIndex: number, toIndex: number) => void
-  keyExtractor?: (photo: T, order: number) => any
-  delayLongPress?: number
   pickerConfig?: SortablePhotosPickerConfig
   multiple?: boolean
-  maxScale?: number
-  minOpacity?: number
-  scaleDuration?: number
-  slideDuration?: number
   emptyIcon?: AppIcon
-  disableDragDropEmptyItems?: boolean
   style?: StyledProp<SortablePhotosComposition>
   modalTitle?: string
   modalBody?: string