@codeleap/mobile 1.5.3 → 1.8.1

package/src/components/List.tsx

@@ -1,104 +1,109 @@
-import * as React from 'react'
-import { forwardRef, useState } from 'react'
-import {
-  deepEqual,
-  onUpdate,
-  useDefaultComponentStyle,
-  usePrevious,
-  useCodeleapContext,
-} from '@codeleap/common'
-import {
-  KeyboardAwareFlatListProps,
-  KeyboardAwareFlatList as KBDView,
-} from 'react-native-keyboard-aware-scroll-view'
-import { RefreshControl, FlatList } from 'react-native'
-import { View, ViewProps } from './View'
-
-export type FlatListProps = KeyboardAwareFlatListProps<any> &
-  ViewProps & {
-    onRefresh?: () => void
-    refreshTimeout?: number
-    changeData?: any
-    separators?: boolean
-    keyboardAware?: boolean
-  }
-
-const KeyboardAwareFlatList =
-  KBDView as unknown as React.ForwardRefExoticComponent<
-    ViewProps & {
-      refreshControl?: JSX.Element
-      ref?: FlatList
-    }
-  >
-
-export const List = forwardRef<FlatList, FlatListProps>(
-  (flatListProps, ref) => {
-    const {
-      variants = [],
-      style,
-      refreshTimeout = 3000,
-      changeData,
-      keyboardAware = true,
-      ...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
-
-    const Component = keyboardAware ? KeyboardAwareFlatList : FlatList
-
-    return (
-      <Component
-        style={[Theme.presets.full, style]}
-        contentContainerStyle={[variantStyles.wrapper]}
-        ref={ref as unknown as FlatList}
-        ItemSeparatorComponent={separator}
-        {...props}
-        refreshControl={
-          hasRefresh && (
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          )
-        }
-      />
-    )
-  },
-)
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+
+  KeyboardAwareFlatList as KBDView,
+  // @ts-ignore
+} from 'react-native-keyboard-aware-scroll-view'
+
+import { RefreshControl, FlatList } from 'react-native'
+import { View, ViewProps } from './View'
+
+type RNFlatListProps<T = any> = FlatList<T>['props']
+export type FlatListProps<T = any> = RNFlatListProps<T> &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    separators?: boolean
+    keyboardAware?: boolean
+  }
+
+const KeyboardAwareFlatList =
+  KBDView as unknown as React.ForwardRefExoticComponent<
+    ViewProps & {
+      refreshControl?: JSX.Element
+      ref?: FlatList
+    }
+  >
+
+const ListCP = forwardRef<FlatList, FlatListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      changeData,
+      keyboardAware = true,
+      ...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
+
+    const Component = keyboardAware ? KeyboardAwareFlatList : FlatList
+
+    return (
+      <Component
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as FlatList}
+        ItemSeparatorComponent={separator}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      />
+    )
+  },
+)
+
+export const List = ListCP as (<T = any>(props: FlatListProps<T>) => JSX.Element)

package/src/components/Modal/index.tsx

@@ -1,161 +1,161 @@
-import * as React from 'react'
-import { View, ViewProps, AnimatedView } from '../View'
-import { Button, ButtonProps } from '../Button'
-import { Scroll } from '../Scroll'
-import {
-  capitalize,
-  ComponentVariants,
-  IconPlaceholder,
-  onUpdate,
-  useDefaultComponentStyle,
-  useCodeleapContext,
-} from '@codeleap/common'
-import {
-  MobileModalComposition,
-  MobileModalStyles,
-  MobileModalParts,
-} from './styles'
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types/utility'
-
-import { Touchable } from '../Touchable'
-import { Text } from '../Text'
-import { Animated } from '../Animated'
-
-export * from './styles'
-
-export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
-  styles?: StylesOf<MobileModalComposition>
-  dismissOnBackdrop?: boolean
-  buttonProps?: ButtonProps
-  accessible?: boolean
-  showClose?: boolean
-  closable?: boolean
-  footer?: React.ReactNode
-  title?: React.ReactNode
-  debugName?: string
-  closeIconName?: IconPlaceholder
-  visible: boolean
-  toggle?: () => void
-  scroll?: boolean
-  keyboardAware?: boolean
-}
-
-export const Modal: React.FC<ModalProps> = (modalProps) => {
-  const {
-    variants = [],
-    styles = {},
-    visible,
-    showClose,
-    closable = true,
-    title,
-    footer,
-    children,
-    toggle = () => null,
-    dismissOnBackdrop = true,
-    closeIconName = 'close',
-    debugName,
-    scroll = true,
-    keyboardAware = true,
-    ...props
-  } = modalProps
-
-  const variantStyles = useDefaultComponentStyle('Modal', {
-    variants: variants as any,
-    transform: StyleSheet.flatten,
-    styles,
-  }) as ModalProps['styles']
-
-  function getStyles(key: MobileModalParts) {
-    const s = [
-      variantStyles[key],
-      styles[key],
-      visible ? variantStyles[key + ':visible'] : {},
-      visible ? styles[key + ':visible'] : {},
-    ]
-
-    return s
-  }
-
-  const buttonStyles = React.useMemo(() => {
-    const buttonEntries = {}
-
-    for (const [key, style] of Object.entries(variantStyles)) {
-      if (key.startsWith('closeButton')) {
-        buttonEntries[capitalize(key.replace('closeButton', ''), true)] = style
-      }
-    }
-    return buttonEntries
-  }, [variantStyles])
-
-  const boxAnimation = {
-    hidden: {
-      ...variantStyles['box:pose'],
-      ...styles['box:pose'],
-    },
-    visible: {
-      ...variantStyles['box:pose:visible'],
-      ...styles['box:pose:visible'],
-    },
-  }
-
-  return (
-    <View
-      style={getStyles('wrapper')}
-      pointerEvents={visible ? 'auto' : 'none'}
-    >
-      <AnimatedView style={getStyles('overlay')} transition={'opacity'} />
-      <Scroll
-        style={getStyles('innerWrapper')}
-        contentContainerStyle={getStyles('innerWrapperScroll')}
-        scrollEnabled={scroll}
-        keyboardAware={keyboardAware}
-      >
-        {dismissOnBackdrop && (
-          <Touchable
-            debugName={`${debugName} modal backdrop`}
-            activeOpacity={1}
-            onPress={() => toggle()}
-            style={getStyles('touchableBackdrop')}
-          />
-        )}
-        <Animated
-          component='View'
-          config={boxAnimation}
-          pose={visible ? 'visible' : 'hidden'}
-          style={getStyles('box')}
-        >
-          {(title || showClose) && (
-            <View style={getStyles('header')}>
-              {typeof title === 'string' ? (
-                <Text text={title} style={getStyles('title')} />
-              ) : (
-                title
-              )}
-
-              {showClose && closable && (
-                <Button
-                  debugName={`${debugName} modal close button`}
-                  icon={closeIconName as IconPlaceholder}
-                  variants={['icon']}
-                  onPress={toggle}
-                  styles={buttonStyles}
-                />
-              )}
-            </View>
-          )}
-
-          <View style={getStyles('body')}>{children}</View>
-          {footer && (
-            <View style={getStyles('footer')}>
-              {typeof footer === 'string' ? <Text text={footer} /> : footer}
-            </View>
-          )}
-        </Animated>
-      </Scroll>
-    </View>
-  )
-}
-
-export default Modal
+import * as React from 'react'
+import { View, ViewProps, AnimatedView } from '../View'
+import { Button, ButtonProps } from '../Button'
+import { Scroll } from '../Scroll'
+import {
+  capitalize,
+  ComponentVariants,
+  IconPlaceholder,
+  onUpdate,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  MobileModalComposition,
+  MobileModalStyles,
+  MobileModalParts,
+} from './styles'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types/utility'
+
+import { Touchable } from '../Touchable'
+import { Text } from '../Text'
+import { Animated } from '../Animated'
+
+export * from './styles'
+
+export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
+  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
+  styles?: StylesOf<MobileModalComposition>
+  dismissOnBackdrop?: boolean
+  buttonProps?: ButtonProps
+  accessible?: boolean
+  showClose?: boolean
+  closable?: boolean
+  footer?: React.ReactNode
+  title?: React.ReactNode
+  debugName?: string
+  closeIconName?: IconPlaceholder
+  visible: boolean
+  toggle?: () => void
+  scroll?: boolean
+  keyboardAware?: boolean
+}
+
+export const Modal: React.FC<ModalProps> = (modalProps) => {
+  const {
+    variants = [],
+    styles = {},
+    visible,
+    showClose,
+    closable = true,
+    title,
+    footer,
+    children,
+    toggle = () => null,
+    dismissOnBackdrop = true,
+    closeIconName = 'close',
+    debugName,
+    scroll = true,
+    keyboardAware = true,
+    ...props
+  } = modalProps
+
+  const variantStyles = useDefaultComponentStyle('Modal', {
+    variants: variants as any,
+    transform: StyleSheet.flatten,
+    styles,
+  }) as ModalProps['styles']
+
+  function getStyles(key: MobileModalParts) {
+    const s = [
+      variantStyles[key],
+      styles[key],
+      visible ? variantStyles[key + ':visible'] : {},
+      visible ? styles[key + ':visible'] : {},
+    ]
+
+    return s
+  }
+
+  const buttonStyles = React.useMemo(() => {
+    const buttonEntries = {}
+
+    for (const [key, style] of Object.entries(variantStyles)) {
+      if (key.startsWith('closeButton')) {
+        buttonEntries[capitalize(key.replace('closeButton', ''), true)] = style
+      }
+    }
+    return buttonEntries
+  }, [variantStyles])
+
+  const boxAnimation = {
+    hidden: {
+      ...variantStyles['box:pose'],
+      ...styles['box:pose'],
+    },
+    visible: {
+      ...variantStyles['box:pose:visible'],
+      ...styles['box:pose:visible'],
+    },
+  }
+
+  return (
+    <View
+      style={getStyles('wrapper')}
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+      <AnimatedView style={getStyles('overlay')} transition={'opacity'} />
+      <Scroll
+        style={getStyles('innerWrapper')}
+        contentContainerStyle={getStyles('innerWrapperScroll')}
+        scrollEnabled={scroll}
+        keyboardAware={keyboardAware}
+      >
+        {dismissOnBackdrop && (
+          <Touchable
+            debugName={`${debugName} modal backdrop`}
+            activeOpacity={1}
+            onPress={() => toggle()}
+            style={getStyles('touchableBackdrop')}
+          />
+        )}
+        <Animated
+          component='View'
+          config={boxAnimation}
+          pose={visible ? 'visible' : 'hidden'}
+          style={getStyles('box')}
+        >
+          {(title || showClose) && (
+            <View style={getStyles('header')}>
+              {typeof title === 'string' ? (
+                <Text text={title} style={getStyles('title')} />
+              ) : (
+                title
+              )}
+
+              {showClose && closable && (
+                <Button
+                  debugName={`${debugName} modal close button`}
+                  icon={closeIconName as IconPlaceholder}
+                  variants={['icon']}
+                  onPress={toggle}
+                  styles={buttonStyles}
+                />
+              )}
+            </View>
+          )}
+
+          <View style={getStyles('body')}>{children}</View>
+          {footer && (
+            <View style={getStyles('footer')}>
+              {typeof footer === 'string' ? <Text text={footer} /> : footer}
+            </View>
+          )}
+        </Animated>
+      </Scroll>
+    </View>
+  )
+}
+
+export default Modal