@codeleap/mobile 2.3.0 → 2.3.1

package/src/components/Navigation/utils.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Navigation } from './Navigation'
+
+export function createAppNavigation(Scenes:any) {
+
+  const AllScenes = Object.entries<any>(Scenes).reduce((allScenes, [moduleName, content]) => {
+
+    const subScenes = []
+
+    for (const [name, sceneContent] of Object.entries(content.scenes)) {
+      subScenes.push(
+        [`${moduleName}.${name}`, sceneContent],
+      )
+    }
+
+    return [
+      ...allScenes,
+      ...subScenes,
+    ]
+  }, [])
+
+  const AppScenes = Object.fromEntries(AllScenes)
+
+  const SCENES_RESULT = Object.fromEntries(
+    Object.entries<any>(Scenes)
+      .map(([S, { _ig_scenes, exclude, type, navigationProps, ...otherProps }]) => {
+        let filterScenes = null
+
+        if (exclude) {
+          filterScenes = Object.fromEntries(
+            AllScenes.filter(([path]) => !exclude.some(param => path.startsWith(param))),
+          )
+        }
+
+        const Component = () => <Navigation
+          type={type || 'Stack'}
+          scenes={filterScenes || AppScenes}
+          screenOptions={{
+            headerShown: false,
+            ...navigationProps?.screenOptions,
+          }}
+          {...navigationProps}
+        />
+        // console.log('SCENES_RESULT create', { _ig_scenes, exclude, type, navigationProps, otherProps })
+
+        return [S, {
+          ...otherProps,
+          component: Component,
+        }]
+      }),
+  )
+
+  // console.log('SCENES_RESULT', SCENES_RESULT)
+
+  return SCENES_RESULT
+}
+

package/src/components/Pager/index.tsx

@@ -0,0 +1,121 @@
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import React, {
+  ReactNode,
+} from 'react'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types/utility'
+import { View } from '../View'
+import { PagerStyles, PagerComposition } from './styles'
+export * from './styles'
+
+export type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
+export type PagerProps = {
+  variants?: ComponentVariants<typeof PagerStyles>['variants']
+  styles?: StylesOf<PagerComposition>
+  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
+  page?: number
+  style?: any
+  setPage?: (page: number) => void
+  returnEarly?: boolean
+  renderPageWrapper?:React.FC<PageProps>
+  pageWrapperProps?: any
+}
+
+export const Pager:React.FC<PagerProps> = (pagerProps) => {
+  const {
+
+    styles,
+    variants,
+    page,
+    style = {},
+    returnEarly = true,
+    renderPageWrapper,
+    pageWrapperProps = {},
+    children,
+  } = pagerProps
+
+  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerStyles>(
+    'u:Pager',
+    {
+      styles,
+      transform: StyleSheet.flatten,
+      variants,
+    },
+  )
+  const nChildren = React.Children.count(children)
+
+  const lastPage = nChildren - 1
+
+  const childArr = React.Children.toArray(children)
+
+  const WrapperComponent = renderPageWrapper || View
+
+  // Reamimated seems to glitch if this is not done
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+
+  return (
+    <View style={[variantStyles.wrapper, style]} >
+      {
+        childArr.map((child:PagerProps['children'][number], index) => {
+          const isActive = index === page
+          const isLast = index === lastPage
+          const isFirst = index === 0
+          const isNext = index === page + 1
+          const isPrevious = index === page - 1
+          const shouldRender = isActive || isNext || isPrevious
+
+          if (!shouldRender && returnEarly) return null
+          let pos = 0
+
+          if (isActive) {
+            pos = 1
+          } else if (index > page) {
+            pos = 2
+          } else {
+            pos = 0
+          }
+
+          const pageProps = {
+            isLast,
+            isActive,
+            isFirst,
+            isNext,
+            isPrevious,
+            index,
+            page,
+          }
+
+          const content = typeof child === 'function' ? child(pageProps) : child
+
+          const wrapperProps = {
+            key: index,
+            style: variantStyles.page,
+            animated: true,
+            transition: variantStyles['page:transition'],
+            animate: [variantStyles['page:previous'], variantStyles['page:current'], variantStyles['page:next']][pos],
+            ...pageWrapperProps,
+          }
+
+          return (
+            <WrapperComponent {...wrapperProps}>
+              {content}
+            </WrapperComponent>
+          )
+
+        })
+      }
+    </View>
+  )
+}

package/src/components/Pager/styles.ts

@@ -0,0 +1,81 @@
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+import { Easing } from 'react-native'
+
+export type PagerComposition =
+  | 'page'
+  | 'page:transition'
+  | 'page:previous'
+  | 'page:next'
+  | 'page:current'
+  | 'wrapper'
+
+const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
+
+const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
+)
+export const defaultPagerTransition = {
+  type: 'timing',
+  duration: 300,
+  easing: Easing.linear,
+}
+
+export function pagerAnimation(height, width, translate = 'X', transition = defaultPagerTransition) {
+  const translateProp = `translate${translate}`
+
+  const translateVal = translate === 'X' ? width : height
+
+  return {
+    wrapper: {
+      height,
+      width,
+      overflow: 'hidden',
+    },
+    'page:transition': {
+      [translateProp]: transition,
+    },
+    'page:next': {
+      [translateProp]: translateVal,
+
+    },
+    'page:current': {
+      [translateProp]: 0,
+    },
+    'page:previous': {
+      [translateProp]: -translateVal,
+    },
+  }
+}
+
+export const PagerStyles = {
+  ...presets,
+  default: createPagerStyle((theme) => {
+    const width = theme.values.width
+    const height = theme.values.window.height * 0.8
+    return {
+      ...pagerAnimation(height, width, 'X'),
+      page: {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+      },
+    }
+  }),
+  horizontal: createPagerStyle((theme) => {
+
+    const width = theme.values.width
+    const height = theme.values.window.height * 0.8
+    return pagerAnimation(height, width, 'X')
+  }),
+  vertical: createPagerStyle((theme) => {
+    const height = theme.values.window.height * 0.8
+    const width = theme.values.width
+    return pagerAnimation(height, width, 'Y')
+  }),
+}

package/src/components/RadioInput/index.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import { ReactNode, ComponentPropsWithoutRef } from 'react'
+
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import {
+  ComponentVariants,
+  getNestedStylesByKey,
+  StylesOf,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { View } from '../View'
+import { RadioInputComposition, RadioInputStyles } from './styles'
+import { InputLabel } from '../InputLabel'
+
+export * from './styles'
+
+type RadioItem<T extends unknown = any> = {
+  value: T
+  label: ReactNode
+}
+
+const getRadioStyle = (props) => useDefaultComponentStyle<'u:RadioInput', typeof RadioInputStyles>('u:RadioInput', props)
+
+export type RadioButtonProps = Omit<
+  ComponentPropsWithoutRef<typeof Touchable>,
+  'style'
+> & {
+  item: RadioItem
+  select: () => void
+  style: StylesOf<RadioInputComposition>
+  checked: boolean
+  defaultValue?: number
+}
+
+export type RadioGroupProps<T> = {
+  options: RadioItem<T>[]
+  value: T
+  onValueChange(value: T): void
+  required?: boolean
+  label: ReactNode
+  styles?: StylesOf<RadioInputComposition>
+} & ComponentVariants<typeof RadioInputStyles>
+
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  item,
+  select,
+  style,
+  checked,
+  ...props
+}) => {
+  return (
+    <Touchable onPress={select} style={style.itemWrapper} debugName={'Change radioButton value'} styles={{
+      feedback: style.buttonFeedback,
+    }}>
+      <View style={[style.button, checked && style['button:checked']]}>
+        <View
+          style={[style.buttonMark, checked && style['buttonMark:checked']]}
+        />
+      </View>
+      {typeof item.label === 'string' ? (
+        <Text text={item.label} style={style.text} />
+      ) : (
+        item.label
+      )}
+    </Touchable>
+  )
+}
+
+export const RadioGroup = <T extends unknown>(
+  radioGroupProps: RadioGroupProps<T>,
+) => {
+  const {
+    options,
+    value,
+    onValueChange,
+    label,
+    responsiveVariants,
+    required = false,
+    variants,
+    styles,
+  } = radioGroupProps
+
+  const radioStyle = getRadioStyle({
+    responsiveVariants,
+    variants,
+    styles,
+  })
+  return (
+    <View style={radioStyle.wrapper}>
+      <InputLabel required={required} label={label} styles={getNestedStylesByKey('label', radioStyle)}/>
+      <View style={radioStyle.list}>
+        {options?.map((item, idx) => (
+          <RadioButton
+            debugName={'RadioButton'}
+            item={item}
+            key={idx}
+            style={radioStyle}
+            checked={value === item.value}
+            select={() => onValueChange(item.value)}
+          />
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/components/RadioInput/styles.ts

@@ -0,0 +1,67 @@
+import {
+  createDefaultVariantFactory, includePresets,
+} from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark' | 'buttonFeedback'
+
+type RadioGroupParts = `label${Capitalize<InputLabelComposition>}` | 'wrapper' | 'list'
+
+export type RadioInputComposition =
+  | `${RadioParts}:checked`
+  | RadioParts
+  | RadioGroupParts
+
+const createRadioStyle =
+  createDefaultVariantFactory<RadioInputComposition>()
+
+const presets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))
+
+export const RadioInputStyles = {
+  ...presets,
+  default: createRadioStyle((theme) => {
+
+    const itemHeight = theme.typography.baseFontSize * 1.2
+    const markHeight = itemHeight / 2
+    const translateX = -(markHeight / 2)
+    const translateY = -(markHeight / 2)
+    return {
+      itemWrapper: {
+        ...theme.presets.row,
+        ...theme.spacing.marginVertical(1.3),
+      },
+      button: {
+        height: itemHeight,
+        width: itemHeight,
+        ...theme.border.primary(1),
+        borderRadius: theme.borderRadius.large,
+
+        position: 'relative',
+        ...theme.spacing.marginRight(1),
+      },
+      buttonFeedback: { type: 'opacity', value: 0.5 },
+      buttonMark: {
+        backgroundColor: theme.colors.primary,
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        height: markHeight,
+        width: markHeight,
+
+        transform: [{ translateX }, { translateY }],
+        borderRadius: theme.borderRadius.large,
+        opacity: 0,
+      },
+      'buttonMark:checked': {
+        opacity: 1,
+      },
+    }
+  }),
+  square: createRadioStyle(() => ({
+    buttonMark: {
+      borderRadius: 0,
+    },
+    button: {
+      borderRadius: 0,
+    },
+  })),
+}

package/src/components/Scroll/index.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+} from '@codeleap/common'
+
+import { RefreshControl, RefreshControlProps, ScrollView, StyleSheet } from 'react-native'
+import { ViewProps } from '../View'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { StylesOf } from '../../types'
+import { ScrollComposition, ScrollStyles } from './styles'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+import { ScrollView as MotiScrollView } from 'moti'
+// import { KeyboardAwareScrollView } from '../../utils'
+
+type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
+
+export type ScrollProps = KeyboardAwareScrollViewProps &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    keyboardAware?: GetKeyboardAwarePropsOptions
+    refreshing?: boolean
+    styles?: StylesOf<ScrollComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+    debugName?: string
+  }
+
+export const Scroll = forwardRef<ScrollView, ScrollProps>(
+  (scrollProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      children,
+      changeData,
+      styles = {},
+      refreshControlProps = {},
+      contentContainerStyle,
+      keyboardAware,
+      debugName = '',
+      animated = true,
+      ...props
+    } = scrollProps
+    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)
+
+    const onRefresh = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+      }
+
+      setRefreshing(true)
+
+      props.onRefresh()
+
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshingDisplay && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
+      }
+    }, [refreshingDisplay, changeData])
+
+    const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollStyles>('u:Scroll', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+      rootElement: 'content',
+    })
+
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+    const _scrollProps = {
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: [variantStyles.content, contentContainerStyle],
+      ref: ref as unknown as ScrollView,
+      refreshControl: hasRefresh && (
+        <RefreshControl
+          refreshing={refreshingDisplay}
+          onRefresh={onRefresh}
+          tintColor={refreshStyles?.color}
+          colors={[refreshStyles?.color]}
+          {...refreshControlProps}
+        />
+      ),
+      ...props,
+    }
+    const keyboard = useKeyboardAwareView({
+      debugName,
+    })
+
+    const rootProps = keyboard.getKeyboardAwareProps(_scrollProps, {
+      adapt: 'marginBottom',
+      baseStyleProp: 'style',
+      animated,
+      ...keyboardAware,
+
+    })
+    const Component = animated ? MotiScrollView : ScrollView
+
+    return (
+      <Component
+        {...rootProps}
+
+      >
+        {children}
+      </Component>
+    )
+  },
+)
+export * from './styles'

package/src/components/Scroll/styles.ts

@@ -0,0 +1,18 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+
+export type ScrollComposition = 'wrapper' |'content' | 'refreshControl'
+
+const createScrollStyle = createDefaultVariantFactory<ScrollComposition>()
+
+export const ScrollStyles = {
+  default: createScrollStyle((theme) => {
+    return {
+      wrapper: {
+        ...theme.presets.fullHeight,
+      },
+      refreshControl: {
+        color: theme.colors.primary,
+      },
+    }
+  }),
+}

package/src/components/Sections/index.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+
+import { RefreshControl, SectionList } from 'react-native'
+import { View, ViewProps } from '../View'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { KeyboardAwareSectionList } from '../../utils'
+
+export type SectionListProps = KeyboardAwareScrollViewTypes.KeyboardAwareSectionListProps<any> &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    separators?: boolean
+  }
+
+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} />
+          )
+        }
+      />
+    )
+  },
+)