@codeleap/mobile 4.2.5 → 4.2.6

package/dist/components/components.d.ts

@@ -40,3 +40,4 @@ export * from './SearchInput';
 export * from './PaginationIndicator';
 export * from './PlacesAutocomplete';
 export * from './SortablePhotos';
+export * from './SectionFilters';

package/dist/components/components.js

@@ -56,4 +56,5 @@ __exportStar(require("./SearchInput"), exports);
 __exportStar(require("./PaginationIndicator"), exports);
 __exportStar(require("./PlacesAutocomplete"), exports);
 __exportStar(require("./SortablePhotos"), exports);
+__exportStar(require("./SectionFilters"), exports);
 //# sourceMappingURL=components.js.map

package/dist/components/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAsB;AACtB,yCAAsB;AACtB,8CAA2B;AAC3B,yCAAsB;AACtB,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,2CAAwB;AACxB,6CAA0B;AAC1B,2CAAwB;AACxB,8CAA2B;AAC3B,2CAAwB;AACxB,qDAAkC;AAClC,+CAA4B;AAC5B,2CAAwB;AACxB,yCAAsB;AACtB,sDAAmC;AACnC,2CAAwB;AACxB,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,0CAAuB;AACvB,qDAAkC;AAClC,6CAA0B;AAC1B,qDAAkC;AAClC,iDAA8B;AAC9B,yCAAsB;AACtB,mDAAgC;AAChC,+CAA4B;AAC5B,8CAA2B;AAC3B,oDAAiC;AACjC,mDAAgC;AAChC,2CAAwB;AACxB,gDAA6B;AAC7B,oDAAiC;AACjC,0CAAuB;AACvB,gDAA6B;AAC7B,wDAAqC;AACrC,uDAAoC;AACpC,mDAAgC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAsB;AACtB,yCAAsB;AACtB,8CAA2B;AAC3B,yCAAsB;AACtB,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,2CAAwB;AACxB,6CAA0B;AAC1B,2CAAwB;AACxB,8CAA2B;AAC3B,2CAAwB;AACxB,qDAAkC;AAClC,+CAA4B;AAC5B,2CAAwB;AACxB,yCAAsB;AACtB,sDAAmC;AACnC,2CAAwB;AACxB,0CAAuB;AACvB,6CAA0B;AAC1B,8CAA2B;AAC3B,+CAA4B;AAC5B,0CAAuB;AACvB,qDAAkC;AAClC,6CAA0B;AAC1B,qDAAkC;AAClC,iDAA8B;AAC9B,yCAAsB;AACtB,mDAAgC;AAChC,+CAA4B;AAC5B,8CAA2B;AAC3B,oDAAiC;AACjC,mDAAgC;AAChC,2CAAwB;AACxB,gDAA6B;AAC7B,oDAAiC;AACjC,0CAAuB;AACvB,gDAA6B;AAC7B,wDAAqC;AACrC,uDAAoC;AACpC,mDAAgC;AAChC,mDAAgC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "4.2.5",
+  "version": "4.2.6",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,16 +9,16 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/common": "4.2.5",
-    "@codeleap/config": "4.2.5"
+    "@codeleap/common": "4.2.6",
+    "@codeleap/config": "4.2.6"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/common": "4.2.5",
-    "@codeleap/styles": "4.2.5",
+    "@codeleap/common": "4.2.6",
+    "@codeleap/styles": "4.2.6",
     "@d11/react-native-fast-image": "8.8.0",
     "@react-native-firebase/messaging": "14.4.0",
     "@react-navigation/bottom-tabs": "6.5.3",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "4.2.5",
+  "version": "4.2.6",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/SectionFilters/context.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react'
+import { SectionFiltersProps } from './types'
+import { TSectionFilterItem, useSectionFilters } from './useSectionFilters'
+
+export type SectionFiltersContextProps<T = TSectionFilterItem> = React.PropsWithChildren<SectionFiltersProps<T> & {
+  handle?: ReturnType<typeof useSectionFilters<T>>
+}>
+
+type TSectionFiltersContext<T = TSectionFilterItem> = ReturnType<typeof useSectionFilters<T>>
+
+export const SectionsFilterContext = createContext({} as TSectionFiltersContext)
+
+export function useSectionFiltersContext<T = TSectionFilterItem>() {
+  return useContext(SectionsFilterContext) as TSectionFiltersContext<T>
+}

package/src/components/SectionFilters/index.tsx

@@ -0,0 +1,80 @@
+import { memoBy, TypeGuards } from '@codeleap/common'
+import { Button } from '../Button'
+import { AugmentedSectionRenderItemInfo, SectionComponentProps, Sections } from '../Sections'
+import { Text } from '../Text'
+import { SectionsFilterContext, useSectionFiltersContext } from './context'
+import { SectionFilterComponentProps, SectionFiltersProps } from './types'
+import { TSectionFilterItem, useSectionFilters } from './useSectionFilters'
+
+export * from './types'
+export * from './context'
+export * from './useSectionFilters'
+
+const SectionComponent = memoBy((props: SectionComponentProps<TSectionFilterItem> & { renderWith: (props: SectionFilterComponentProps<TSectionFilterItem>) => JSX.Element }) => {
+  const { renderWith: Component, index } = props
+
+  const handle = useSectionFiltersContext()
+
+  if (!Component) return null
+
+  return (
+    <Component
+      {...props} 
+      selectedItems={handle.selectedItems[index] ?? []}
+      clearSelectedItems={() => handle.clearSelectedItemsWithSection(index)}
+    />
+  )
+}, ['renderWith'])
+
+export function SectionFilters<T extends TSectionFilterItem = TSectionFilterItem>(props: SectionFiltersProps<T>) {
+  const {
+    sections,
+    renderItem: RenderItem,
+    renderSectionHeader,
+    renderSectionFooter,
+    ...rest
+  } = {
+    ...SectionFilters.defaultProps,
+    ...props,
+  }
+
+  const handle = props.handle ?? useSectionFilters(props)
+
+  const renderItem = (section: AugmentedSectionRenderItemInfo<T>) => {
+    const hasSection = !TypeGuards.isNil(section?.index) && !TypeGuards.isNil(section)
+    const sectionLimitReached = hasSection && handle.sectionLimitReached(section?.index)
+    const limitReached = handle.limitReached()
+    const disableOnReachLimit = handle.disableItemsOnLimitReached
+    const disableNonSelectedItems = (limitReached || sectionLimitReached) && disableOnReachLimit
+
+    const isSelected = handle.isSelected(section?.item)
+    const isDisabled = disableNonSelectedItems && !isSelected
+
+    return (
+      <RenderItem
+        {...section}
+        onPress={() => handle.toggleItem(section?.item)}
+        selected={isSelected}
+        disabled={isDisabled}
+        text={section?.item?.label}
+      />
+    )
+  }
+
+  return (
+    <SectionsFilterContext.Provider value={handle}>
+      <Sections
+        {...rest}
+        sections={sections}
+        renderItem={renderItem}
+        renderSectionHeader={(props) => <SectionComponent {...props} renderWith={renderSectionHeader} />}
+        renderSectionFooter={(props) => <SectionComponent {...props} renderWith={renderSectionFooter} />}
+      />
+    </SectionsFilterContext.Provider>
+  )
+}
+
+SectionFilters.defaultProps = {
+  renderItem: Button as unknown,
+  renderSectionHeader: ({ title }) => <Text text={title} />
+} as Partial<SectionFiltersProps>

package/src/components/SectionFilters/types.ts

@@ -0,0 +1,29 @@
+import { ReactElement } from 'react'
+import { AugmentedSectionRenderItemInfo, SectionComponentProps, SectionProps } from '../Sections'
+import { TSectionFilterItem, UseSectionFilters, useSectionFilters } from './useSectionFilters'
+
+export type SectionFilterItemProps<T> =
+  AugmentedSectionRenderItemInfo<T> &
+  {
+    onPress: () => void
+    selected: boolean
+    disabled: boolean
+    text: string
+  }
+
+export type SectionFilterComponentProps<T> =
+  SectionComponentProps<T> &
+  {
+    selectedItems: TSectionFilterItem[]
+    clearSelectedItems: () => void
+  }
+
+export type SectionFiltersProps<T = any> =
+  UseSectionFilters &
+  Omit<SectionProps<T>, 'renderItem' | 'renderSectionFooter' | 'renderSectionHeader'> &
+  {
+    handle?: ReturnType<typeof useSectionFilters<T>>
+    renderItem?: (props: SectionFilterItemProps<T>) => ReactElement
+    renderSectionFooter?: (props: SectionFilterComponentProps<T>) => ReactElement
+    renderSectionHeader?: (props: SectionFilterComponentProps<T>) => ReactElement
+  }

package/src/components/SectionFilters/useSectionFilters.tsx

@@ -0,0 +1,166 @@
+import { deepEqual, TypeGuards } from '@codeleap/common'
+import React from 'react'
+
+export type TSectionFilterItem = {
+  value?: string | number
+  label?: string
+}
+
+type Section<T = TSectionFilterItem> = {
+  data: T[]
+  title: string
+  selectionLimit?: number
+  disableItemsOnLimitReached?: boolean
+}
+
+type SelectedItemsPerSection<T = TSectionFilterItem> = { [X: number]: T[] }
+
+export type UseSectionFilters<T = TSectionFilterItem> = {
+  sections: Section<T>[]
+  areItemsEqual?: (a: T, b: T) => boolean
+  selectionLimit?: number
+  sectionSelectionLimit?: number
+  disableItemsOnLimitReached?: boolean
+  initialSelectedItems?: SelectedItemsPerSection<T>
+}
+
+export function useSectionFilters<T = TSectionFilterItem>(props: UseSectionFilters<T>) {
+  const {
+    sections,
+    areItemsEqual = deepEqual,
+    selectionLimit = 1,
+    sectionSelectionLimit = null,
+    disableItemsOnLimitReached = selectionLimit > 1 && !sectionSelectionLimit,
+    initialSelectedItems = [],
+  } = props
+
+  const [selectedItems, setSelectedItems] = React.useState<SelectedItemsPerSection<T>>(() => {
+    if (TypeGuards.isArray(initialSelectedItems)) {
+      return {
+        0: initialSelectedItems,
+      }
+    }
+
+    return initialSelectedItems ?? {}
+  })
+
+  const findItemSection = (item: T) => {
+    if (!sections) {
+      return {
+        sectionIndex: 0,
+        section: null,
+      }
+    }
+
+    const sectionIndex = sections?.findIndex((section) => {
+      return section.data.some((i) => areItemsEqual(item, i))
+    })
+
+    if (sectionIndex === -1) {
+      return {
+        sectionIndex: null,
+        section: null,
+      }
+    }
+
+    const section = sections[sectionIndex]
+
+    return {
+      sectionIndex,
+      section,
+    }
+  }
+
+  const isSelected = (item: T) => {
+    if (sections) {
+      const { sectionIndex } = findItemSection(item)
+
+      return selectedItems[sectionIndex]?.some((i) => areItemsEqual(i, item))
+    }
+
+    return selectedItems[0]?.some((i) => areItemsEqual(i, item))
+  }
+
+  const toggleItem = (item: T) => {
+    let sectionIndex = -1
+    let limit = selectionLimit
+
+    if (sections) {
+      const { sectionIndex: si, section } = findItemSection(item)
+
+      if (si === null) {
+        return
+      }
+
+      sectionIndex = si
+      limit = section.selectionLimit ?? selectionLimit
+    } else {
+      sectionIndex = 0
+    }
+
+    const currentItems = selectedItems[sectionIndex] ?? []
+
+    const isItemSelected = currentItems.some((i) => areItemsEqual(i, item))
+
+    const newItems = [...currentItems]
+
+    if (isItemSelected) {
+      const index = newItems.findIndex((i) => areItemsEqual(i, item))
+
+      newItems.splice(index, 1)
+    } else {
+      if (newItems.length >= limit) {
+        newItems.shift()
+      }
+
+      newItems.push(item)
+    }
+
+    setSelectedItems({
+      ...selectedItems,
+      [sectionIndex]: newItems,
+    })
+  }
+
+  function sectionLimitReached(sectionIndex: number) {
+    const section = sections[sectionIndex]
+
+    if (!section) {
+      return false
+    }
+
+    const limit = section.selectionLimit ?? sectionSelectionLimit ?? selectionLimit
+
+    if (!limit) {
+      return false
+    }
+
+    const nItems = selectedItems[sectionIndex]?.length
+
+    return nItems >= limit
+  }
+
+  function limitReached() {
+    const nItems = Object.values(selectedItems).flatMap((i) => i).length
+
+    return nItems >= selectionLimit
+  }
+
+  function clearSelectedItemsWithSection(sectionIndex: number) {
+    setSelectedItems({
+      ...selectedItems,
+      [sectionIndex]: [],
+    })
+  }
+
+  return {
+    isSelected,
+    toggleItem,
+    findItemSection,
+    selectedItems,
+    sectionLimitReached,
+    limitReached,
+    disableItemsOnLimitReached,
+    clearSelectedItemsWithSection,
+  }
+}

package/src/components/Sections/index.tsx

@@ -1,118 +1,160 @@
-import React, { forwardRef } from 'react'
-import { useCallback } from '@codeleap/common'
-import { RefreshControl, SectionList } from 'react-native'
-import { View } from '../View'
+import React, { useMemo } from 'react'
+import { TypeGuards, useCallback } from '@codeleap/common'
+import { SectionList, SectionListProps as RNSectionProps } from 'react-native'
+import { View, ViewProps } from '../View'
+import { RefreshControl } from '../RefreshControl'
 import { useKeyboardPaddingStyle } from '../../utils'
-import { SectionListProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { AugmentedSectionRenderItemInfo, SectionComponentProps, SectionProps, SectionRenderComponentProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { EmptyPlaceholder } from '../EmptyPlaceholder'
 
 export * from './styles'
 export * from './types'
 
-export const Sections = forwardRef<SectionList, SectionListProps>((sectionsProps, ref) => {
+const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
+  return <View style={props.separatorStyles} />
+}
+
+export const Sections = <T extends any>(sectionsProps: SectionProps<T>) => {
   const {
     style,
     onRefresh,
     component,
     refreshing,
     placeholder,
-    keyboardAware,
     refreshControlProps,
+    loading,
+    keyboardAware,
+    fakeEmpty = loading,
     contentContainerStyle,
-    fakeEmpty,
     refreshControl,
+    renderItem: RenderItem,
+    sections: data,
+    renderSectionHeader: RenderSectionHeader,
+    renderSectionFooter: RenderSectionFooter,
     ...props
   } = {
     ...Sections.defaultProps,
     ...sectionsProps,
   }
 
+  const sections = useMemo(() => {
+    return data?.map((section, index) => ({
+      ...section,
+      index,
+    }))
+  }, [JSON.stringify(data)])
+
   const styles = useStylesFor(Sections.styleRegistryName, style)
 
-  const renderSeparator = useCallback(() => {
-    return <View style={styles?.separator} />
-  }, [styles?.separator])
+  const separator = useCallback(() => {
+    if (!props?.separators) return null
+    return <RenderSeparator separatorStyles={styles.separator} />
+  }, [])
 
-  const getItemPosition = (section, itemIdx) => {
-    const listLength = section?.length || 0
+  const getSectionProps = (data: SectionRenderComponentProps<T>) => {
+    const listLength = sections?.length || 0
 
-    const isFirst = itemIdx === 0
-    const isLast = itemIdx === listLength - 1
+    const isFirst = data?.section?.index === sections?.[0]?.index
+    const isLast = data?.section?.index === sections?.[listLength - 1]?.index
     const isOnly = isFirst && isLast
+    const title = data?.section?.title
+    const index = data?.section?.index
 
-    return { isFirst, isLast, isOnly }
+    return { isFirst, isLast, isOnly, title, index }
   }
 
-  const getSectionPosition = (data) => {
-    const listLength = props.sections?.length || 0
+  const renderSectionHeader = useCallback((data: SectionRenderComponentProps<T>) => {
+    if (!RenderSectionHeader) return null
 
-    const isFirst = data.section.key === props.sections[0].key
-    const isLast = data.section.key === props.sections[listLength - 1].key
-    const isOnly = isFirst && isLast
+    const positionProps = getSectionProps(data)
 
-    return { isFirst, isLast, isOnly }
-  }
+    return <RenderSectionHeader {...data.section} {...positionProps} />
+  }, [RenderSectionHeader, sections?.length])
 
-  const renderSectionHeader = useCallback((data) => {
-    if (!props?.renderSectionHeader) return null
+  const renderSectionFooter = useCallback((data: SectionRenderComponentProps<T>) => {
+    if (!RenderSectionFooter) return null
 
-    return props?.renderSectionHeader({ ...data, ...getSectionPosition(data) })
-  }, [props?.renderSectionHeader, props?.sections?.length])
+    const positionProps = getSectionProps(data)
 
-  const renderSectionFooter = useCallback((data) => {
-    if (!props?.renderSectionFooter) return null
+    return <RenderSectionFooter {...data.section} {...positionProps} />
+  }, [RenderSectionFooter, sections?.length])
 
-    return props?.renderSectionFooter({ ...data, ...getSectionPosition(data) })
-  }, [props?.renderSectionFooter, props?.sections?.length])
+  const renderItem = useCallback((data: AugmentedSectionRenderItemInfo<T>) => {
+    if (!RenderItem) return null
 
-  const renderItem = useCallback((data) => {
-    if (!props?.renderItem) return null
+    const listLength = data?.section?.data?.length || 0
 
-    return props?.renderItem({ ...data, ...getItemPosition(data.section?.data, data?.index) })
+    const isFirst = data?.index === 0
+    const isLast = data?.index === listLength - 1
+    const isOnly = isFirst && isLast
 
-  }, [props?.renderItem, props?.sections?.length])
+    return (
+      <RenderItem
+        {...data}
+        isFirst={isFirst}
+        isLast={isLast}
+        isOnly={isOnly}
+      />
+    )
+  }, [RenderItem])
+
+  const isEmpty = !sections || !sections?.length
+
+  const _placeholder = {
+    ...placeholder,
+    loading: TypeGuards.isBoolean(placeholder?.loading) ? placeholder.loading : loading,
+  }
 
-  const separatorProp = props.separators
-  const isEmpty = !props.sections || !props.sections.length
-  const separator = !isEmpty && separatorProp == true && renderSeparator
+  const keyboardStyle = useKeyboardPaddingStyle([
+    styles.content,
+    contentContainerStyle,
+    isEmpty && styles['content:empty'],
+    loading && styles['content:loading'],
+  ], keyboardAware && !props.horizontal)
 
-  const keyboardStyle = useKeyboardPaddingStyle([styles?.content, contentContainerStyle], keyboardAware)
+  const wrapperStyle = [styles.wrapper, isEmpty && styles['wrapper:empty'], loading && styles['wrapper:loading']]
 
   return (
     <SectionList
-      contentContainerStyle={keyboardStyle}
-      showsVerticalScrollIndicator={false}
-      // @ts-ignore
-      ref={ref}
       ItemSeparatorComponent={separator}
+      refreshControl={!!onRefresh && (
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          {...refreshControlProps}
+        />
+      )}
+      ListEmptyComponent={<EmptyPlaceholder {..._placeholder} />}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
       {...props}
-      style={styles?.wrapper}
-      refreshControl={
-        !!onRefresh && (
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        )
-      }
+      ListHeaderComponentStyle={styles.header}
+      style={wrapperStyle}
+      contentContainerStyle={keyboardStyle}
+      sections={sections}
       renderItem={renderItem}
-      renderSectionHeader={renderSectionHeader}
-      renderSectionFooter={renderSectionFooter}
+      renderSectionHeader={renderSectionHeader as unknown as RNSectionProps<T>['renderSectionHeader']}
+      renderSectionFooter={renderSectionFooter as unknown as RNSectionProps<T>['renderSectionHeader']}
     />
   )
-},
-) as StyledComponentWithProps<SectionListProps>
+}
 
 Sections.styleRegistryName = 'Sections'
-Sections.elements = ['wrapper', 'content', 'separator']
+Sections.elements = ['wrapper', 'content', 'separator', 'header', 'refreshControl']
 Sections.rootElement = 'wrapper'
 
 Sections.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Sections as (props: StyledComponentProps<SectionListProps, typeof styles>) => IJSX
+  return Sections as <T>(props: StyledComponentProps<SectionProps<T>, typeof styles>) => IJSX
 }
 
 Sections.defaultProps = {
   keyboardShouldPersistTaps: 'handled',
+  fakeEmpty: false,
+  loading: false,
   keyboardAware: true,
-} as Partial<SectionListProps>
+} as Partial<SectionProps>
 
 MobileStyleRegistry.registerComponent(Sections)

package/src/components/Sections/styles.ts

@@ -1,2 +1,7 @@
+import { ScrollComposition } from '../Scroll/styles'
 
-export type SectionsComposition = 'wrapper' |'content' | 'separator'
+type SectionsStates = 'empty' | 'loading' 
+
+type SectionsParts = ScrollComposition | 'separator' | 'header' | 'refreshControl'
+
+export type SectionsComposition = `${SectionsParts}:${SectionsStates}` | SectionsParts

package/src/components/Sections/types.ts

@@ -1,39 +1,56 @@
 import { StyledProp } from '@codeleap/styles'
-import { SectionListRenderItemInfo } from 'react-native'
 import { SectionsComposition } from './styles'
-import { SectionListProps as RNSectionListProps } from 'react-native'
+import { SectionListRenderItemInfo, SectionListProps as RNSectionListProps, SectionListData } 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 DataboundSectionListPropsTypes = 'sections' | 'renderItem' | 'keyExtractor' | 'style' | 'renderSectionFooter' | 'renderSectionHeader'
 
-export type AugmentedSectionRenderItemInfo<T> = SectionListRenderItemInfo<T> & {
+export type SectionInfo = {
   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 AugmentedSectionRenderItemInfo<T> = SectionListRenderItemInfo<T> & SectionInfo
+
+export type SectionComponentProps<T> = SectionInfo & {
+  title: string
+  index: number
+  data: T[]
+}
+
+export type SectionRenderComponentProps<T> = {
+  section: {
+    title: string
+    index: number
+    data: T[]
+  }
 }
 
-export type SectionListProps<
-  T = any[],
-  Data = T extends Array<infer D> ? D : never
-> =
-  ReplaceSectionListProps<RNSectionListProps<Data>, Data> &
+export type ReplaceSectionListProps<P, T> =
+  Omit<P, DataboundSectionListPropsTypes> &
+  {
+    sections: Array<{ title: string; data: T[] }>
+    keyExtractor?: (item: T, index: number) => string
+    renderItem: (props: AugmentedSectionRenderItemInfo<T>) => React.ReactElement
+    onRefresh?: () => void
+    fakeEmpty?: boolean
+    loading?: boolean
+    renderSectionHeader?: (props: SectionComponentProps<T>) => React.ReactElement
+    renderSectionFooter?: (props: SectionComponentProps<T>) => React.ReactElement
+  }
+
+export type SectionProps<T = any> =
+  ReplaceSectionListProps<RNSectionListProps<T>, T> &
   Omit<ViewProps, 'style'> &
   {
     separators?: boolean
     placeholder?: EmptyPlaceholderProps
     refreshControlProps?: Partial<RefreshControlProps>
     fakeEmpty?: boolean
+    loading?: boolean
     keyboardAware?: boolean
     style?: StyledProp<SectionsComposition>
   }

package/src/components/components.ts

@@ -40,3 +40,4 @@ export * from './SearchInput'
 export * from './PaginationIndicator'
 export * from './PlacesAutocomplete'
 export * from './SortablePhotos'
+export * from './SectionFilters'