@codeleap/mobile 4.2.9 → 4.2.11

package/src/components/SectionFilters/useSectionFilters.tsx

@@ -1,5 +1,5 @@
 import { deepEqual, TypeGuards } from '@codeleap/common'
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 export type TSectionFilterItem = {
   value?: string | number
@@ -22,6 +22,7 @@ export type UseSectionFilters<T = TSectionFilterItem> = {
   sectionSelectionLimit?: number
   disableItemsOnLimitReached?: boolean
   initialSelectedItems?: SelectedItemsPerSection<T>
+  onToggleItem?: (item: T, section: Section<T>) => boolean
 }
 
 export function useSectionFilters<T = TSectionFilterItem>(props: UseSectionFilters<T>) {
@@ -32,6 +33,7 @@ export function useSectionFilters<T = TSectionFilterItem>(props: UseSectionFilte
     sectionSelectionLimit = null,
     disableItemsOnLimitReached = selectionLimit > 1 && !sectionSelectionLimit,
     initialSelectedItems = [],
+    onToggleItem,
   } = props
 
   const [selectedItems, setSelectedItems] = React.useState<SelectedItemsPerSection<T>>(() => {
@@ -44,6 +46,26 @@ export function useSectionFilters<T = TSectionFilterItem>(props: UseSectionFilte
     return initialSelectedItems ?? {}
   })
 
+  const changed = useCallback(() => {
+    return Object.entries(selectedItems).some(([sectionIndex, items]) => {
+      const initialItems = initialSelectedItems[sectionIndex] ?? []
+
+      if (!initialItems) {
+        return items.length > 0
+      }
+
+      if (items.length !== initialItems.length) {
+        return true
+      }
+
+      return items.some((item) => !initialItems.some((i) => areItemsEqual(i, item)))
+    })
+  }, [selectedItems, initialSelectedItems])
+
+  const getAllItems = () => {
+    return sections?.flatMap((section) => section.data) ?? []
+  }
+
   const findItemSection = (item: T) => {
     if (!sections) {
       return {
@@ -98,6 +120,19 @@ export function useSectionFilters<T = TSectionFilterItem>(props: UseSectionFilte
       sectionIndex = 0
     }
 
+    const handled = onToggleItem?.(item, sections[sectionIndex]) ?? false
+
+    if (handled) {
+      return
+    }
+
+    if (selectionLimit === 1) {
+      setSelectedItems({
+        [sectionIndex]: [item],
+      })
+      return
+    }
+
     const currentItems = selectedItems[sectionIndex] ?? []
 
     const isItemSelected = currentItems.some((i) => areItemsEqual(i, item))
@@ -162,5 +197,8 @@ export function useSectionFilters<T = TSectionFilterItem>(props: UseSectionFilte
     limitReached,
     disableItemsOnLimitReached,
     clearSelectedItemsWithSection,
+    changed,
+    areItemsEqual,
+    getAllItems,
   }
 }

package/src/components/Sections/index.tsx

@@ -17,7 +17,7 @@ const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
   return <View style={props.separatorStyles} />
 }
 
-export const Sections = <T extends any>(sectionsProps: SectionProps<T>) => {
+export function Sections<T>(sectionsProps: SectionProps<T>) {
   const {
     style,
     onRefresh,
@@ -132,6 +132,7 @@ export const Sections = <T extends any>(sectionsProps: SectionProps<T>) => {
       showsHorizontalScrollIndicator={false}
       {...props}
       ListHeaderComponentStyle={styles.header}
+      ListFooterComponentStyle={styles.footer}
       style={wrapperStyle}
       contentContainerStyle={keyboardStyle}
       sections={sections}
@@ -143,7 +144,7 @@ export const Sections = <T extends any>(sectionsProps: SectionProps<T>) => {
 }
 
 Sections.styleRegistryName = 'Sections'
-Sections.elements = ['wrapper', 'content', 'separator', 'header', 'refreshControl']
+Sections.elements = ['wrapper', 'content', 'separator', 'header', 'footer', 'refreshControl']
 Sections.rootElement = 'wrapper'
 
 Sections.withVariantTypes = <S extends AnyRecord>(styles: S) => {

package/src/components/Sections/styles.ts

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

package/src/components/Slider/index.tsx

@@ -218,7 +218,15 @@ Slider.styleRegistryName = 'Slider'
 Slider.rootElement = 'wrapper'
 Slider.elements = [
   ...InputBase.elements,
-  'thumb', 'track', 'selectedTrack', 'unselectedTrack', 'firstTrackMark', 'lastTrackMark', 'sliderContainer', 'labelBtn', 'descriptionBtn'
+  'thumb',
+  'track',
+  'selectedTrack',
+  'unselectedTrack',
+  'firstTrackMark',
+  'lastTrackMark',
+  'sliderContainer',
+  'labelBtn',
+  'descriptionBtn',
 ]
 
 Slider.withVariantTypes = <S extends AnyRecord>(styles: S) => {

package/src/components/Slider/styles.ts

@@ -1,6 +1,4 @@
-import { PartialComponentStyle } from '@codeleap/common'
 import { IconLessInputBaseParts, InputBaseStates } from '../InputBase'
-import { TouchableComposition, TouchableStylesGen } from '../Touchable'
 
 type SliderParts =
   'thumb' |
@@ -18,7 +16,3 @@ type SliderStates = Exclude<InputBaseStates, 'focus'>
 
 export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts | 'labelBtn' | 'descriptionBtn'
 
-export type SliderStylesGen = {
-  labelBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
-  descriptionBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
-}

package/src/components/TextInput/index.tsx

@@ -132,6 +132,8 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
 
   const hasMultipleLines = isMultiline && value?.includes('\n')
 
+  const hasValue = value?.length > 0
+
   return <InputBase
     {...inputBaseProps}
     innerWrapper={isPressable ? Touchable : undefined}
@@ -153,6 +155,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     }}
     rightIcon={rightIcon}
     focused={isFocused}
+    hasValue={hasValue}
   >
     <InputElement
       allowFontScaling={false}
@@ -174,6 +177,8 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
         !validation.isValid && styles['input:error'],
         isDisabled && styles['input:disabled'],
         hasMultipleLines && styles['input:hasMultipleLines'],
+        hasValue && styles['input:typed'],
+
       ]}
       ref={innerInputRef}
       pointerEvents={isPressable ? 'none' : undefined}