@codeleap/mobile 1.4.0 → 1.4.1

package/src/components/Sections.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  KeyboardAwareSectionListProps,
+  KeyboardAwareSectionList as KBDView,
+} from 'react-native-keyboard-aware-scroll-view'
+import { RefreshControl, SectionList } from 'react-native'
+import { View, ViewProps } from './View'
+
+export type SectionListProps = KeyboardAwareSectionListProps<any> &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    separators?: boolean
+  }
+
+const KeyboardAwareSectionList =
+  KBDView as unknown as React.ForwardRefExoticComponent<
+    ViewProps & {
+      refreshControl?: JSX.Element
+      ref?: SectionList
+    }
+  >
+
+export const Sections = forwardRef<SectionList, SectionListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      changeData,
+      ...props
+    } = flatListProps
+    const hasRefresh = !!props.onRefresh
+    const [refreshing, setRefreshing] = useState(false)
+
+    const timer = React.useRef(null)
+    const previousData = usePrevious(changeData)
+
+    const onRefresh = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+      }
+
+      setRefreshing(true)
+
+      props.onRefresh()
+
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshing && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
+      }
+    }, [refreshing, changeData])
+    const { Theme } = useCodeleapContext()
+
+    const variantStyles = useDefaultComponentStyle('View', {
+      variants,
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    return (
+      <KeyboardAwareSectionList
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as SectionList}
+        ItemSeparatorComponent={separator}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      />
+    )
+  },
+)

package/src/components/Select/index.tsx

@@ -1,181 +1,184 @@
-import {  IconPlaceholder, useBooleanToggle, 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 { Touchable } from '../Touchable'
-import { AnimatedView, View } from '../View'
-import { MobileSelectStyles } from './styles' 
-import { CustomSelectProps } from './types'
-
-export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
-  const {
-    value,
-    onValueChange,
-    label, 
-    styles = {},
-    options,
-    style,
-    variants,
-    renderItem,
-    closeOnSelect = true,
-    scroll = false,
-    showClose = true,
-    showLabelOnModal = true,
-    placeholder = 'Select',
-    arrowIconName = 'selectArrow',
-    footer,
-    modalCloseIconName = 'close',
-    header,
-    closeButtonProps,
-    modalLabel,
-    ...props
-  } = selectProps
-
-  const [isModalVisible, setModalVisibility] = useBooleanToggle(false)
-
-  const variantStyles = useDefaultComponentStyle<'u:MobileSelect', typeof MobileSelectStyles>('u:MobileSelect', {
-    transform: StyleSheet.flatten,
-    rootElement: 'inputWrapper',
-    styles,
-    variants,
-  })
-
-  const inputStyles = useMemo(
-    () => getNestedStylesByKey('input', variantStyles), 
-    [variantStyles],
-  )
-
-  const closeButtonStyles = useMemo(
-    () => getNestedStylesByKey('modalCloseButton', variantStyles), 
-    [variantStyles],
-  )
-  
-  const ListComponent = scroll ? Scroll : View
-  
-  const close = () => setModalVisibility()
-  const select = (value) => {
-    
-    onValueChange(value)
-    if (closeOnSelect){
-      close()
-    }
-  }
-
-  const selectedLabel:string = useMemo(() => {
-    const current = options.find(o => o.value === value)
-
-    const display = current?.label ?? placeholder
-
-    return TypeGuards.isString(display) ? display : ''
-  }, [value, placeholder, options])
-
-  return <> 
-    <TextInput 
-      
-      caretHidden
-      value={selectedLabel}
-      rightIcon={{
-        name: arrowIconName as IconPlaceholder,
-      }}
-      editable={false}
-      touchableWrapper
-      innerWrapperProps={{
-        onPress: close,
-      }}
-      label={label} 
-      styles={inputStyles}
-      style={style}
-      {...props}
-    />
-    <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,
-        }}
-      />
-      <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}
-                      {...closeButtonProps}
-                    />}
-                  </>
-                }
-              </View>
-            )
-          }
-          <ListComponent style={variantStyles.modalList}>
-            {
-              options.map((item, idx) => {
-                const isSelected = value === item.value
-                if (renderItem) {
-                  return renderItem({
-                    ...item,
-                    selected: isSelected,
-                    onPress: close,
-                    styles: variantStyles,
-                
-                  }) 
-                }
-
-                return <Touchable key={idx} style={[
-                  variantStyles.modalItem, 
-                  isSelected && variantStyles['modalItem:selected'],
-                ]} onPress={() => 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>
-  </>
-}
-
-
-export * from './styles'
-export * from './types'
+import { IconPlaceholder, useBooleanToggle, 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 { Touchable } from '../Touchable'
+import { AnimatedView, View } from '../View'
+import { MobileSelectStyles } from './styles'
+import { CustomSelectProps } from './types'
+
+export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
+  const {
+    value,
+    onValueChange,
+    label,
+    styles = {},
+    options,
+    style,
+    variants,
+    renderItem,
+    closeOnSelect = true,
+    scroll = false,
+    showClose = true,
+    showLabelOnModal = true,
+    placeholder = 'Select',
+    arrowIconName = 'selectArrow',
+    footer,
+    modalCloseIconName = 'close',
+    header,
+    closeButtonProps,
+    modalLabel,
+    ...props
+  } = selectProps
+
+  const [isModalVisible, setModalVisibility] = useBooleanToggle(false)
+
+  const variantStyles = useDefaultComponentStyle<'u:MobileSelect', typeof MobileSelectStyles>('u:MobileSelect', {
+    transform: StyleSheet.flatten,
+    rootElement: 'inputWrapper',
+    styles,
+    variants,
+  })
+
+  const inputStyles = useMemo(
+    () => getNestedStylesByKey('input', variantStyles),
+    [variantStyles],
+  )
+
+  const closeButtonStyles = useMemo(
+    () => getNestedStylesByKey('modalCloseButton', variantStyles),
+    [variantStyles],
+  )
+
+  const ListComponent = scroll ? Scroll : View
+
+  const close = () => setModalVisibility()
+  const select = (value) => {
+
+    onValueChange(value)
+    if (closeOnSelect) {
+      close()
+    }
+  }
+
+  const selectedLabel:string = useMemo(() => {
+    const current = options.find(o => o.value === value)
+
+    const display = current?.label ?? placeholder
+
+    return TypeGuards.isString(display) ? display : ''
+  }, [value, placeholder, options])
+
+  return <>
+    <TextInput
+
+      caretHidden
+      value={selectedLabel}
+      rightIcon={{
+        name: arrowIconName as IconPlaceholder,
+      }}
+      editable={false}
+      touchableWrapper
+      innerWrapperProps={{
+        debugName: 'Select',
+        onPress: close,
+      }}
+      label={label}
+      debugName={'Select input'}
+      styles={inputStyles}
+      style={style}
+      {...props}
+    />
+    <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`}
+      />
+      <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}>
+            {
+              options.map((item, idx) => {
+                const isSelected = value === item.value
+                if (renderItem) {
+                  return renderItem({
+                    ...item,
+                    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>
+  </>
+}
+
+export * from './styles'
+export * from './types'

package/src/components/Select/styles.ts

@@ -1,81 +1,81 @@
-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>}`
-
-type InputParts = `input${Capitalize<TextInputComposition>}` 
-
-export type MobileSelectParts = InputParts 
-| `backdrop` 
-| `backdrop:visible` 
-| `backdrop:hidden` 
-| `modal${ModalParts}`
-
-export type MobileSelectComposition = MobileSelectParts
-
-const createSelectStyle = createDefaultVariantFactory<MobileSelectComposition>()
-
-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,
-   
-      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',
-    },
-  })),
-}
+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>}`
+
+type InputParts = `input${Capitalize<TextInputComposition>}`
+
+export type MobileSelectParts = InputParts
+| `backdrop`
+| `backdrop:visible`
+| `backdrop:hidden`
+| `modal${ModalParts}`
+
+export type MobileSelectComposition = MobileSelectParts
+
+const createSelectStyle = createDefaultVariantFactory<MobileSelectComposition>()
+
+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,
+
+      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',
+    },
+  })),
+}