@codeleap/mobile 1.9.23 → 1.9.26

package/src/components/NewPager/index.tsx

@@ -0,0 +1,123 @@
+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 { NewMobilePagerStyles, NewPagerComposition } from './styles'
+export * from './styles'
+
+type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
+export type NewPagerProps = {
+  variants?: ComponentVariants<typeof NewMobilePagerStyles>['variants']
+  styles?: StylesOf<NewPagerComposition>
+  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
+  page?: number
+  style?: any
+  setPage?: (page: number) => void
+  returnEarly?: boolean
+  renderPageWrapper?:React.FC<PageProps>
+  pageWrapperProps?: any
+}
+
+export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
+  const {
+
+    styles,
+    variants,
+    page,
+    style = {},
+    returnEarly = true,
+    renderPageWrapper,
+    pageWrapperProps = {},
+
+  } = pagerProps
+  let { children } = pagerProps
+  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof NewMobilePagerStyles>(
+    'u:Pager',
+    {
+      styles,
+      transform: StyleSheet.flatten,
+      variants,
+    },
+  )
+  const nChildren = React.Children.count(children)
+
+  const lastPage = nChildren - 1
+
+  children = Array.isArray(children) ? children : [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]} >
+      {
+        children.map((child:NewPagerProps['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,
+          }
+          console.log({
+            child,
+          })
+          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/NewPager/styles.ts

@@ -0,0 +1,76 @@
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+import { Easing } from 'react-native'
+
+export type NewPagerComposition =
+  | 'page'
+  | 'page:transition'
+  | 'page:previous'
+  | 'page:next'
+  | 'page:current'
+  | 'wrapper'
+
+const createPagerStyle = createDefaultVariantFactory<NewPagerComposition>()
+
+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 NewMobilePagerStyles = {
+  ...presets,
+  default: createPagerStyle((theme) => ({
+    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.height * 0.8
+    return pagerAnimation(height, width, 'X')
+  }),
+  vertical: createPagerStyle((Theme) => {
+    const height = Theme.values.height * 0.8
+    const width = Theme.values.width
+    return pagerAnimation(height, width, 'Y')
+  }),
+}

package/src/components/Overlay.tsx

@@ -1,77 +1,77 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  IconPlaceholder,
-  OverlayComposition,
-  OverlayStyles,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import { ReactNode } from 'react'
-import { InputLabel } from './TextInput'
-import { Button } from './Button'
-
-import { View } from './View'
-import { StylesOf } from '../types/utility'
-import { StyleSheet, ViewProps } from 'react-native'
-import { AnimatedTouchable } from './Touchable'
-
-export type OverlayProps = ViewProps & {
-  title?: ReactNode
-  visible?: boolean
-  showClose?: boolean
-  variants?: ComponentVariants<typeof OverlayStyles>
-  styles?: StylesOf<OverlayComposition>
-  style?: any
-  onPress?: () => void
-} & React.ComponentPropsWithoutRef<typeof AnimatedTouchable>
-
-export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
-  const {
-    showClose,
-    title,
-    children,
-    visible,
-    styles = {},
-    style,
-    variants,
-    ...props
-  } = overlayProps
-
-  const variantStyles = useDefaultComponentStyle('Overlay', {
-    styles,
-    transform: StyleSheet.flatten,
-    variants: variants as any,
-  }) as StylesOf<OverlayComposition>
-
-  const touchableStyle = [
-    variantStyles.wrapper,
-    styles.wrapper,
-    visible && variantStyles['wrapper:visible'],
-    visible && styles['wrapper:visible'],
-  ]
-
-  return (
-    <AnimatedTouchable
-      // @ts-ignore
-      transition={'opacity'}
-      style={touchableStyle}
-      {...props}
-    >
-      <View>
-        {(title || showClose) && (
-          <View style={variantStyles.header}>
-            <InputLabel style={variantStyles.title} label={title} />
-            {showClose && (
-              <Button
-                variants={['icon']}
-                icon={'close' as IconPlaceholder}
-                style={variantStyles.closeButton}
-                debugName={'Close icon'}
-              />
-            )}
-          </View>
-        )}
-      </View>
-    </AnimatedTouchable>
-  )
-}
+import * as React from 'react'
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  OverlayComposition,
+  OverlayStyles,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { ReactNode } from 'react'
+import { InputLabel } from './TextInput'
+import { Button } from './Button'
+
+import { View } from './View'
+import { StylesOf } from '../types/utility'
+import { StyleSheet, ViewProps } from 'react-native'
+import { AnimatedTouchable } from './Touchable'
+
+export type OverlayProps = ViewProps & {
+  title?: ReactNode
+  visible?: boolean
+  showClose?: boolean
+  variants?: ComponentVariants<typeof OverlayStyles>
+  styles?: StylesOf<OverlayComposition>
+  style?: any
+  onPress?: () => void
+} & React.ComponentPropsWithoutRef<typeof AnimatedTouchable>
+
+export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
+  const {
+    showClose,
+    title,
+    children,
+    visible,
+    styles = {},
+    style,
+    variants,
+    ...props
+  } = overlayProps
+
+  const variantStyles = useDefaultComponentStyle('Overlay', {
+    styles,
+    transform: StyleSheet.flatten,
+    variants: variants as any,
+  }) as StylesOf<OverlayComposition>
+
+  const touchableStyle = [
+    variantStyles.wrapper,
+    styles.wrapper,
+    visible && variantStyles['wrapper:visible'],
+    visible && styles['wrapper:visible'],
+  ]
+
+  return (
+    <AnimatedTouchable
+      // @ts-ignore
+      transition={'opacity'}
+      style={touchableStyle}
+      {...props}
+    >
+      <View>
+        {(title || showClose) && (
+          <View style={variantStyles.header}>
+            <InputLabel style={variantStyles.title} label={title} />
+            {showClose && (
+              <Button
+                variants={['icon']}
+                icon={'close' as IconPlaceholder}
+                style={variantStyles.closeButton}
+                debugName={'Close icon'}
+              />
+            )}
+          </View>
+        )}
+      </View>
+    </AnimatedTouchable>
+  )
+}