@codeleap/mobile 2.2.11 → 2.3.0

package/src/components/Navigation/utils.tsx

@@ -1,57 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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} />
-          )
-        }
-      />
-    )
-  },
-)