@codeleap/mobile 3.24.2 → 3.25.0

package/src/components/Scroll/index.tsx

@@ -1,120 +1,104 @@
-import * as React from 'react'
-import { forwardRef, useState } from 'react'
-import {
-  deepEqual,
-  onUpdate,
-  useDefaultComponentStyle,
-  usePrevious,
-} from '@codeleap/common'
-import { ScrollView, StyleSheet } from 'react-native'
-import { ViewProps } from '../View'
-import { RefreshControl, RefreshControlProps } from '../RefreshControl'
-import { ComponentWithDefaultProps, StylesOf } from '../../types'
-import { ScrollComposition, ScrollPresets } from './styles'
-import { GetKeyboardAwarePropsOptions, useKeyboardPaddingStyle } from '../../utils'
-import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
-import { useSoftInputState } from 'react-native-avoid-softinput'
-import { useMemo } from 'react'
-export type ScrollProps = KeyboardAwareScrollViewProps &
-  ViewProps & {
-    onRefresh?: () => void
-    refreshTimeout?: number
-    changeData?: any
-    keyboardAware?: boolean
-    refreshing?: boolean
-    styles?: StylesOf<ScrollComposition>
-    refreshControlProps?: Partial<RefreshControlProps>
-    debugName?: string
+import React, { forwardRef, useState } from 'react'
+import { deepEqual, onUpdate, usePrevious } from '@codeleap/common'
+import { ScrollView } from 'react-native'
+import { RefreshControl } from '../RefreshControl'
+import { useKeyboardPaddingStyle } from '../../utils'
+import { ScrollProps, ScrollRef } from './types'
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
+
+export * from './styles'
+export * from './types'
+
+export const Scroll = forwardRef<ScrollRef, ScrollProps>((scrollProps, ref) => {
+  const {
+    style,
+    refreshTimeout,
+    children,
+    changeData,
+    refreshControlProps = {},
+    contentContainerStyle,
+    keyboardAware,
+    animated,
+    ...props
+  } = {
+    ...Scroll.defaultProps,
+    ...scrollProps,
   }
 
-export type ScrollRef = KeyboardAwareScrollView
+  const hasRefresh = !!props.onRefresh
+  const [refreshingState, setRefreshing] = useState(false)
+  const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
 
-const defaultProps: Partial<ScrollProps> = {
-  keyboardShouldPersistTaps: 'handled',
-}
+  const timer = React.useRef(null)
+  const previousData = usePrevious(changeData)
 
-export const Scroll = forwardRef<ScrollRef, ScrollProps>(
-  (scrollProps, ref) => {
-    const {
-      variants = [],
-      style,
-      refreshTimeout = 3000,
-      children,
-      changeData,
-      styles = {},
-      refreshControlProps = {},
-      contentContainerStyle,
-      keyboardAware = true,
-      animated = true,
-      ...props
-    } = {
-      ...defaultProps,
-      ...scrollProps,
+  const onRefresh = () => {
+    if (timer.current) {
+      clearTimeout(timer.current)
     }
-    const hasRefresh = !!props.onRefresh
-    const [refreshingState, setRefreshing] = useState(false)
-    const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
 
-    const timer = React.useRef(null)
-    const previousData = usePrevious(changeData)
+    setRefreshing(true)
 
-    const onRefresh = () => {
+    props.onRefresh()
+
+    timer.current = setTimeout(() => {
+      setRefreshing(false)
+    }, refreshTimeout)
+  }
+
+  onUpdate(() => {
+    if (refreshingDisplay && !deepEqual(previousData, changeData)) {
+      setRefreshing(false)
       if (timer.current) {
         clearTimeout(timer.current)
       }
+    }
+  }, [refreshingDisplay, changeData])
 
-      setRefreshing(true)
+  const styles = useStylesFor(Scroll.styleRegistryName, style)
 
-      props.onRefresh()
+  const Component = ScrollView
 
-      timer.current = setTimeout(() => {
-        setRefreshing(false)
-      }, refreshTimeout)
-    }
-    onUpdate(() => {
-      if (refreshingDisplay && !deepEqual(previousData, changeData)) {
-        setRefreshing(false)
-        if (timer.current) {
-          clearTimeout(timer.current)
-        }
+  const keyboardStyle = useKeyboardPaddingStyle([styles?.content, contentContainerStyle], keyboardAware)
+
+  return (
+    <Component
+      showsVerticalScrollIndicator={false}
+      // @ts-ignore
+      ref={ref}
+      refreshControl={
+        hasRefresh && (
+          <RefreshControl
+            refreshing={refreshingDisplay}
+            onRefresh={onRefresh}
+            {...refreshControlProps}
+          />
+        )
       }
-    }, [refreshingDisplay, changeData])
-
-    const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollPresets>('u:Scroll', {
-      variants,
-      styles,
-      transform: StyleSheet.flatten,
-      rootElement: 'content',
-    })
-
-    const Component = ScrollView
-
-    const keyboardStyle = useKeyboardPaddingStyle([variantStyles.content, contentContainerStyle], keyboardAware)
-
-    return (
-      <Component
-        style={[variantStyles.wrapper, style]}
-        contentContainerStyle={keyboardStyle}
-        showsVerticalScrollIndicator={false}
-        // @ts-ignore
-        ref={ref}
-        refreshControl={
-          hasRefresh && (
-            <RefreshControl
-              refreshing={refreshingDisplay}
-              onRefresh={onRefresh}
-              {...refreshControlProps}
-            />
-          )
-        }
-        {...props}
-      >
-        {children}
-      </Component>
-    )
-  },
-) as unknown as ComponentWithDefaultProps<ScrollProps>
-
-Scroll.defaultProps = defaultProps
+      {...props}
+      style={styles?.wrapper}
+      contentContainerStyle={keyboardStyle}
+    >
+      {children}
+    </Component>
+  )
+}) as StyledComponentWithProps<ScrollProps>
 
-export * from './styles'
+Scroll.styleRegistryName = 'Scroll'
+Scroll.elements = ['wrapper', 'content']
+Scroll.rootElement = 'wrapper'
+
+Scroll.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Scroll as (props: StyledComponentProps<ScrollProps, typeof styles>) => IJSX
+}
+
+Scroll.defaultProps = {
+  keyboardShouldPersistTaps: 'handled',
+  refreshTimeout: 3000,
+  keyboardAware: true,
+  animated: true,
+} as Partial<ScrollProps>
+
+MobileStyleRegistry.registerComponent(Scroll)

package/src/components/Scroll/styles.ts

@@ -1,7 +1,2 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type ScrollComposition = 'wrapper' |'content'
-
-const createScrollStyle = createDefaultVariantFactory<ScrollComposition>()
-
-export const ScrollPresets = includePresets(style => createScrollStyle(() => ({ content: style })))

package/src/components/Scroll/types.ts

@@ -0,0 +1,21 @@
+import { StyledProp } from '@codeleap/styles'
+import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
+import { ScrollComposition } from './styles'
+import { RefreshControlProps } from '../RefreshControl'
+import { ViewProps } from '../View'
+
+export type ScrollProps =
+  Omit<KeyboardAwareScrollViewProps, 'style'> &
+  Omit<ViewProps, 'style'> &
+  {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    keyboardAware?: boolean
+    refreshing?: boolean
+    refreshControlProps?: Partial<RefreshControlProps>
+    debugName?: string
+    style?: StyledProp<ScrollComposition>
+  }
+
+export type ScrollRef = KeyboardAwareScrollView

package/src/components/SearchInput/index.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import { AppIcon } from '@codeleap/styles'
+import { ComponentWithDefaultProps } from '../../types'
+import { TextInputProps, TextInput } from '../TextInput'
+import { TypeGuards } from '@codeleap/common'
+
+export type SearchInputProps = {
+  onTypingChange: (isTyping: boolean) => void
+  onSearchChange: (search: string) => void
+  onValueChange?: (search: string) => void
+  onClear?: () => void
+  debugName: string
+  debounce?: number
+  clearIcon?: AppIcon
+  searchIcon?: AppIcon
+  placeholder: string
+} & Partial<TextInputProps>
+
+export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
+  const {
+    debugName,
+    onClear,
+    onSearchChange,
+    onTypingChange,
+    clearIcon,
+    searchIcon,
+    debounce,
+    placeholder,
+    value,
+    onValueChange,
+    ...others
+  } = {
+    ...SearchInput.defaultProps,
+    ...props,
+  }
+
+  const [search, setSearch] = !TypeGuards.isNil(value) && !!onValueChange ? [value, onValueChange] : useState('')
+
+  const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
+
+  const handleChangeSearch = (value: string) => {
+    setSearch(value)
+
+    if (TypeGuards.isNil(debounce)) {
+      onSearchChange?.(value)
+    } else {
+      if (setSearchTimeout.current) {
+        clearTimeout(setSearchTimeout.current)
+      }
+
+      setSearchTimeout.current = setTimeout(() => {
+
+        onSearchChange(value)
+        onTypingChange?.(false)
+      }, debounce ?? 0)
+    }
+  }
+
+  const handleClear = () => {
+    setSearch('')
+    onSearchChange?.('')
+    onClear?.()
+  }
+
+  return (
+    <TextInput
+      value={search}
+      onChangeText={(value) => {
+        onTypingChange?.(true)
+        handleChangeSearch(value)
+      }}
+      placeholder={placeholder}
+      debugName={`Search ${debugName}`}
+      rightIcon={!!search?.trim?.() && {
+        name: clearIcon,
+        onPress: handleClear,
+      }}
+      leftIcon={{
+        name: searchIcon,
+      }}
+      {...others}
+    />
+  )
+}
+
+SearchInput.defaultProps = {
+  debounce: null,
+  clearIcon: 'x' as AppIcon,
+  searchIcon: 'search' as AppIcon,
+} as Partial<SearchInputProps>

package/src/components/Sections/index.tsx

@@ -1,168 +1,118 @@
-import * as React from 'react'
-import { forwardRef } from 'react'
-import {
-  useDefaultComponentStyle,
-  ComponentVariants,
-  useCallback,
-} from '@codeleap/common'
-
-import {
-  RefreshControl,
-  StyleSheet,
-  RefreshControlProps,
-  SectionListRenderItemInfo,
-  SectionListProps as RNSectionListProps,
-  SectionList,
-} from 'react-native'
-import { View, ViewProps } from '../View'
-import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { StylesOf } from '../../types'
+import React, { forwardRef } from 'react'
+import { useCallback } from '@codeleap/common'
+import { RefreshControl, SectionList } from 'react-native'
+import { View } from '../View'
 import { useKeyboardPaddingStyle } from '../../utils'
-import { SectionsComposition, SectionsPresets } from './styles'
-export * from './styles'
-
-export type DataboundSectionListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
-
-export type AugmentedSectionRenderItemInfo<T> = SectionListRenderItemInfo<T> & {
-  isFirst: boolean
-  isLast: boolean
-  isOnly: boolean
-}
-
-export type ReplaceSectionListProps<P, T> = Omit<P, DataboundSectionListPropsTypes> & {
-  sections: T[]
-  keyExtractor?: (item: T, index: number) => string
-  renderItem: (data: AugmentedSectionRenderItemInfo<T>) => React.ReactElement
-  onRefresh?: () => void
-  getItemLayout?: ((
-    data: T,
-    index: number,
-  ) => { length: number; offset: number; index: number })
-  fakeEmpty?: boolean
-}
+import { SectionListProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
+
+export const Sections = forwardRef<SectionList, SectionListProps>((sectionsProps, ref) => {
+  const {
+    style,
+    onRefresh,
+    component,
+    refreshing,
+    placeholder,
+    keyboardAware,
+    refreshControlProps,
+    contentContainerStyle,
+    fakeEmpty,
+    refreshControl,
+    ...props
+  } = {
+    ...Sections.defaultProps,
+    ...sectionsProps,
+  }
+
+  const styles = useStylesFor(Sections.styleRegistryName, style)
+
+  const renderSeparator = useCallback(() => {
+    return <View style={styles?.separator} />
+  }, [styles?.separator])
+
+  const getItemPosition = (section, itemIdx) => {
+    const listLength = section?.length || 0
+
+    const isFirst = itemIdx === 0
+    const isLast = itemIdx === listLength - 1
+    const isOnly = isFirst && isLast
+
+    return { isFirst, isLast, isOnly }
+  }
+
+  const getSectionPosition = (data) => {
+    const listLength = props.sections?.length || 0
+
+    const isFirst = data.section.key === props.sections[0].key
+    const isLast = data.section.key === props.sections[listLength - 1].key
+    const isOnly = isFirst && isLast
+
+    return { isFirst, isLast, isOnly }
+  }
+
+  const renderSectionHeader = useCallback((data) => {
+    if (!props?.renderSectionHeader) return null
+
+    return props?.renderSectionHeader({ ...data, ...getSectionPosition(data) })
+  }, [props?.renderSectionHeader, props?.sections?.length])
+
+  const renderSectionFooter = useCallback((data) => {
+    if (!props?.renderSectionFooter) return null
+
+    return props?.renderSectionFooter({ ...data, ...getSectionPosition(data) })
+  }, [props?.renderSectionFooter, props?.sections?.length])
+
+  const renderItem = useCallback((data) => {
+    if (!props?.renderItem) return null
+
+    return props?.renderItem({ ...data, ...getItemPosition(data.section?.data, data?.index) })
+
+  }, [props?.renderItem, props?.sections?.length])
+
+  const separatorProp = props.separators
+  const isEmpty = !props.sections || !props.sections.length
+  const separator = !isEmpty && separatorProp == true && renderSeparator
+
+  const keyboardStyle = useKeyboardPaddingStyle([styles?.content, contentContainerStyle], keyboardAware)
+
+  return (
+    <SectionList
+      contentContainerStyle={keyboardStyle}
+      showsVerticalScrollIndicator={false}
+      // @ts-ignore
+      ref={ref}
+      ItemSeparatorComponent={separator}
+      {...props}
+      style={styles?.wrapper}
+      refreshControl={
+        !!onRefresh && (
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        )
+      }
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      renderSectionFooter={renderSectionFooter}
+    />
+  )
+},
+) as StyledComponentWithProps<SectionListProps>
+
+Sections.styleRegistryName = 'Sections'
+Sections.elements = ['wrapper', 'content', 'separator']
+Sections.rootElement = 'wrapper'
+
+Sections.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Sections as (props: StyledComponentProps<SectionListProps, typeof styles>) => IJSX
+}
 
-export type SectionListProps<
-  T = any[],
-  Data = T extends Array<infer D> ? D : never
-> = ReplaceSectionListProps<RNSectionListProps<Data>, Data> &
-  Omit<ViewProps, 'variants'> & {
-    separators?: boolean
-    placeholder?: EmptyPlaceholderProps
-    styles?: StylesOf<SectionsComposition>
-    refreshControlProps?: Partial<RefreshControlProps>
-    fakeEmpty?: boolean
-    keyboardAware?: boolean
-  } & ComponentVariants<typeof SectionsPresets>
-
-const defaultProps: Partial<SectionListProps> = {
+Sections.defaultProps = {
   keyboardShouldPersistTaps: 'handled',
-  refreshControlProps: {},
   keyboardAware: true,
+} as Partial<SectionListProps>
 
-}
-
-export const Sections = forwardRef<SectionList, SectionListProps>(
-  (sectionsProps, ref) => {
-    const {
-      variants = [],
-      style,
-      styles = {},
-      onRefresh,
-      component,
-      refreshing,
-      placeholder,
-      keyboardAware,
-      refreshControlProps,
-      contentContainerStyle,
-
-      fakeEmpty,
-      refreshControl,
-      ...props
-    } = {
-      ...defaultProps,
-      ...sectionsProps,
-    }
-
-    const variantStyles = useDefaultComponentStyle<'u:Sections', typeof SectionsPresets>('u:Sections', {
-      variants,
-      styles,
-      transform: StyleSheet.flatten,
-
-    })
-
-    const renderSeparator = useCallback(() => {
-      return (
-        <View style={variantStyles.separator}></View>
-      )
-    }, [variantStyles.separator])
-
-    const getItemPosition = (section, itemIdx) => {
-      const listLength = section?.length || 0
-
-      const isFirst = itemIdx === 0
-      const isLast = itemIdx === listLength - 1
-      const isOnly = isFirst && isLast
-
-      return { isFirst, isLast, isOnly }
-    }
-
-    const getSectionPosition = (data) => {
-      const listLength = props.sections?.length || 0
-
-      const isFirst = data.section.key === props.sections[0].key
-      const isLast = data.section.key === props.sections[listLength - 1].key
-      const isOnly = isFirst && isLast
-
-      return { isFirst, isLast, isOnly }
-    }
-
-    const renderSectionHeader = useCallback((data) => {
-      if (!props?.renderSectionHeader) return null
-
-      return props?.renderSectionHeader({ ...data, ...getSectionPosition(data) })
-    }, [props?.renderSectionHeader, props?.sections?.length])
-
-    const renderSectionFooter = useCallback((data) => {
-      if (!props?.renderSectionFooter) return null
-
-      return props?.renderSectionFooter({ ...data, ...getSectionPosition(data) })
-    }, [props?.renderSectionFooter, props?.sections?.length])
-
-    const renderItem = useCallback((data) => {
-      if (!props?.renderItem) return null
-
-      return props?.renderItem({ ...data, ...getItemPosition(data.section?.data, data?.index) })
-
-    }, [props?.renderItem, props?.sections?.length])
-
-    const separatorProp = props.separators
-    const isEmpty = !props.sections || !props.sections.length
-    const separator = !isEmpty && separatorProp == true && renderSeparator
-
-    const keyboardStyle = useKeyboardPaddingStyle([variantStyles.content, contentContainerStyle], keyboardAware)
-
-    return (
-      <SectionList
-        style={[variantStyles.wrapper, style]}
-        contentContainerStyle={keyboardStyle}
-        showsVerticalScrollIndicator={false}
-        // @ts-ignore
-        ref={ref}
-        ItemSeparatorComponent={separator}
-        {...props}
-        refreshControl={
-          !!onRefresh && (
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          )
-        }
-        renderItem={renderItem}
-        renderSectionHeader={renderSectionHeader}
-        renderSectionFooter={renderSectionFooter}
-      />
-    )
-  },
-) as unknown as (<T = any>(props: SectionListProps<T>) => JSX.Element) & {
-  defaultProps: Partial<SectionListProps>
-}
+MobileStyleRegistry.registerComponent(Sections)

package/src/components/Sections/styles.ts

@@ -1,7 +1,2 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type SectionsComposition = 'wrapper' |'content' | 'separator'
-
-const createSectionsStyle = createDefaultVariantFactory<SectionsComposition>()
-
-export const SectionsPresets = includePresets(style => createSectionsStyle(() => ({ content: style })))

package/src/components/Sections/types.ts

@@ -0,0 +1,39 @@
+import { StyledProp } from '@codeleap/styles'
+import { SectionListRenderItemInfo } from 'react-native'
+import { SectionsComposition } from './styles'
+import { SectionListProps as RNSectionListProps } from 'react-native'
+import { ViewProps } from '../View'
+import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { RefreshControlProps } from '../RefreshControl'
+
+export type DataboundSectionListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout' | 'style'
+
+export type AugmentedSectionRenderItemInfo<T> = SectionListRenderItemInfo<T> & {
+  isFirst: boolean
+  isLast: boolean
+  isOnly: boolean
+}
+
+export type ReplaceSectionListProps<P, T> = Omit<P, DataboundSectionListPropsTypes> & {
+  sections: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: AugmentedSectionRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((data: T, index: number) => { length: number; offset: number; index: number })
+  fakeEmpty?: boolean
+}
+
+export type SectionListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =
+  ReplaceSectionListProps<RNSectionListProps<Data>, Data> &
+  Omit<ViewProps, 'style'> &
+  {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    refreshControlProps?: Partial<RefreshControlProps>
+    fakeEmpty?: boolean
+    keyboardAware?: boolean
+    style?: StyledProp<SectionsComposition>
+  }