@codeleap/mobile 1.9.33 → 2.0.0

package/src/components/Modal/styles.ts

@@ -7,7 +7,7 @@ import {
 
 export type AnimatableParts = 'box' | 'backdrop'
 
-export type MobileModalParts =
+export type ModalParts =
   | AnimatableParts
   | 'wrapper'
   | 'innerWrapper'
@@ -19,23 +19,25 @@ export type MobileModalParts =
   | 'title'
   | `closeButton${Capitalize<ButtonComposition>}`
 
-export type MobileModalComposition =
-  | MobileModalParts
+export type ModalComposition =
+  | ModalParts
   | `${AnimatableParts}:visible`
   | `${AnimatableParts}:hidden`
   | `${AnimatableParts}:transition`
 
-const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
+const createModalStyle = createDefaultVariantFactory<ModalComposition>()
 
 const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
 
-export const MobileModalStyles = {
+export const ModalStyles = {
 
   ...presets,
   default: createModalStyle((Theme) => {
     const fullSize = {
       ...Theme.presets.whole,
       position: 'absolute',
+      width: Theme?.values?.width,
+      height: Theme?.values?.height,
     }
 
     return {

package/src/components/MultiSelect/index.tsx

@@ -0,0 +1,120 @@
+import { IconPlaceholder,
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+  TypeGuards } from '@codeleap/common'
+import React, { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import { List } from '../List'
+import { TextInput } from '../TextInput'
+import { MultiSelectProps } from './types'
+import { ModalManager } from '../../utils'
+import { MultiSelectStyles } from './styles'
+import { SelectItem } from '../Select'
+
+export * from './styles'
+export const MultiSelect = <T extends string|number = string>(selectProps:MultiSelectProps<T>) => {
+  const {
+    value,
+    onValueChange,
+    label,
+    styles = {},
+    options,
+    style,
+    variants,
+    hideInput = false,
+    renderItem,
+    listProps,
+    placeholder = 'Select',
+    arrowIconName = 'selectArrow',
+    selectedIcon = 'multiSelectMarker',
+    inputProps = {},
+    ...drawerProps
+  } = selectProps
+
+  const variantStyles = useDefaultComponentStyle<'u:MultiSelect', typeof MultiSelectStyles>('u:MultiSelect', {
+    transform: StyleSheet.flatten,
+    rootElement: 'inputWrapper',
+    styles,
+    variants,
+  })
+
+  const inputStyles = useMemo(
+    () => getNestedStylesByKey('input', variantStyles),
+    [variantStyles],
+  )
+
+  const close = () => drawerProps?.toggle?.()
+
+  const select = (itemValue) => {
+    const newVal = [...value]
+
+    if (newVal.includes(itemValue)) {
+      newVal.splice(newVal.indexOf(itemValue), 1)
+    } else {
+      newVal.push(itemValue)
+    }
+    onValueChange(newVal)
+
+  }
+
+  const selectedLabel:string = useMemo(() => {
+    const current = options.filter(o => value.includes(o.value)).map(o => o.label)
+
+    const display = current?.join(', ') ?? placeholder
+
+    return TypeGuards.isString(display) ? display : ''
+  }, [value, placeholder, options])
+
+  const Item = renderItem || SelectItem
+
+  const renderListItem = ({ item }) => {
+    return <Item
+      isSelected={value.includes(item.value)}
+      item={item}
+      onPress={() => select(item.value)}
+      styles={variantStyles}
+      icon={selectedIcon as IconPlaceholder}
+    />
+  }
+  return <>
+    {
+      !hideInput && (
+        <TextInput
+          caretHidden
+          value={selectedLabel}
+          rightIcon={{
+            icon: arrowIconName as IconPlaceholder,
+          }}
+          editable={false}
+          touchableWrapper
+          wrapperProps={{
+            debugName: 'Select',
+            onPress: close,
+          }}
+          pointerEvents={'none'}
+          label={label}
+          debugName={'Select input'}
+          styles={inputStyles}
+          style={style}
+          {...inputProps}
+        />
+      )
+    }
+
+    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
+      <List<MultiSelectProps<any>['options']>
+        data={options}
+        style={variantStyles.list}
+        contentContainerStyle={variantStyles.listContent}
+        keyExtractor={(i) => i.value}
+        renderItem={renderListItem}
+        {...listProps}
+      />
+    </ModalManager.Drawer>
+
+  </>
+}
+
+export * from './styles'
+export * from './types'
+

package/src/components/MultiSelect/styles.ts

@@ -0,0 +1,25 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { SelectComposition, SelectStyles } from '../Select'
+type ItemStates = '' | ':selected'
+export type MultiSelectComposition =
+  SelectComposition | `itemIcon${ItemStates}`
+
+const createMultiSelectStyle = createDefaultVariantFactory<MultiSelectComposition>()
+
+export const MultiSelectStyles = {
+  ...SelectStyles,
+  default: createMultiSelectStyle((theme) => {
+    const defaultStyle = SelectStyles.default(theme)
+    return {
+      ...defaultStyle,
+      'itemIcon:selected': {
+        color: theme.colors.white,
+        ...theme.sized(3),
+      },
+      itemIcon: {
+        width: 0,
+        height: 0,
+      },
+    }
+  }),
+}

package/src/components/MultiSelect/types.ts

@@ -0,0 +1,39 @@
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { StylesOf } from '../../types/utility'
+import { DrawerProps } from '../Drawer'
+import { FlatListProps } from '../List'
+import { TextInputProps } from '../TextInput'
+import { MultiSelectComposition, MultiSelectStyles } from './styles'
+
+export type MultiSelectRenderFNProps<T> = {
+  styles: StylesOf<MultiSelectComposition>
+  onPress: () => void
+  isSelected?: boolean
+  item: FormTypes.Options<T>[number]
+  icon?: IconPlaceholder
+}
+
+export type MultiSelectRenderFN<T> = (props: MultiSelectRenderFNProps<T>) => JSX.Element
+
+type MultiSelectDrawerProps = Omit<DrawerProps, 'variants' | 'styles'>
+
+export type MultiSelectProps<T> = MultiSelectDrawerProps & {
+    value: T[]
+    placeholder?: FormTypes.Label
+    label?: FormTypes.Label
+    options?: FormTypes.Options<T>
+    onValueChange?: (value: T[]) => void
+    renderItem?: MultiSelectRenderFN<T>
+    styles?: StylesOf<MultiSelectComposition>
+    style?: any
+    arrowIconName?: IconPlaceholder
+    inputProps?: Partial<TextInputProps>
+    selectedIcon?: IconPlaceholder
+    hideInput?: boolean
+    listProps?: Partial<FlatListProps>
+  } & ComponentVariants<typeof MultiSelectStyles>
+

package/src/components/Navigation/Navigation.tsx

@@ -10,13 +10,9 @@ import { Navigators } from './constants'
 export const Navigation = <T extends NavigatorType>({ type, scenes, ...props }: NavigationProps<T>) => {
   const NavigationComponent = Navigators[type] as TNavigators[T]
 
-  const defaultProps = {}
-  if (type === 'Tab') {
-    defaultProps.screenOptions = { headerShown: false }
-  }
   // console.log('render Navigation', { type, scenes, props, defaultProps })
 
-  return <NavigationComponent.Navigator {...(props as any)} {...defaultProps}>
+  return <NavigationComponent.Navigator {...props}>
     {
       Object.entries(scenes).map(([name, content], idx) => {
         const isFunction = TypeGuards.isFunction(content)

package/src/components/Pager/index.tsx

@@ -1,58 +1,52 @@
 import {
   ComponentVariants,
-  onUpdate,
   useDefaultComponentStyle,
-  useDebounce,
-  useCodeleapContext,
 } from '@codeleap/common'
 import React, {
-  forwardRef,
   ReactNode,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
 } from 'react'
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
-import { Animated } from '../Animated'
-import { Button } from '../Button'
 import { View } from '../View'
-import { Text } from '../Text'
-import { MobilePagerStyles, PagerComposition } from './styles'
-
+import { PagerStyles, PagerComposition } from './styles'
 export * from './styles'
 
+type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
 export type PagerProps = {
-  variants?: ComponentVariants<typeof MobilePagerStyles>['variants']
+  variants?: ComponentVariants<typeof PagerStyles>['variants']
   styles?: StylesOf<PagerComposition>
+  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
   page?: number
-  loop?: boolean
-  debug?: boolean
-  children?: ReactNode
-  onPageChange?: (page: number) => void
+  style?: any
+  setPage?: (page: number) => void
+  returnEarly?: boolean
+  renderPageWrapper?:React.FC<PageProps>
+  pageWrapperProps?: any
 }
 
-export type PagerRef = {
-  forward(by?: number): void
-  back(by?: number): void
-  to(index?: number): void
-}
-
-export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
+export const Pager:React.FC<PagerProps> = (pagerProps) => {
   const {
-    children,
+
     styles,
     variants,
-    page: propPage,
-    debug,
-    loop,
-    onPageChange,
+    page,
+    style = {},
+    returnEarly = true,
+    renderPageWrapper,
+    pageWrapperProps = {},
+    children,
   } = pagerProps
 
-  const [page, setPage] = useState(() => propPage ?? 0)
-
-  const variantStyles = useDefaultComponentStyle<'u:Pager', typeof MobilePagerStyles>(
+  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerStyles>(
     'u:Pager',
     {
       styles,
@@ -60,183 +54,68 @@ export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
       variants,
     },
   )
-  const { logger } = useCodeleapContext()
   const nChildren = React.Children.count(children)
 
   const lastPage = nChildren - 1
 
-  const pagerRef = useRef<PagerRef>({
-    forward: (by = 1) => {
-      setPage((currentPage) => {
-        if (currentPage < lastPage) {
-          return currentPage + by
-        } else if (loop) {
-          return by - 1
-        }
-        return currentPage
-      })
-    },
-    back: (by = 1) => {
-      setPage((currentPage) => {
-        if (currentPage > 0) {
-          return currentPage - by
-        } else if (loop) {
-          return nChildren - by
-        }
-        return currentPage
-      })
-    },
-    to: (n: number) => {
-      if (n >= 0 && n <= lastPage) {
-        setPage(n)
-      } else {
-        logger.warn(
-          'Attempted to go to a page which falls outside range',
-          { currentPage: page, attemptedToGoTo: n, pageRange: [0, lastPage] },
-          'Component',
-        )
-      }
-    },
-  })
-
-  onUpdate(() => {
-    onPageChange?.(page)
-  }, [page])
+  const childArr = React.Children.toArray(children)
 
-  onUpdate(() => {
-    if (typeof propPage === 'number') {
-      setPage(propPage)
-    }
-  }, [propPage])
+  const WrapperComponent = renderPageWrapper || View
 
-  useImperativeHandle(ref, () => pagerRef.current)
-
-  const pagePoses = useMemo(() => {
-    return {
-      current: variantStyles['page:pose:current'],
-      next: variantStyles['page:pose:next'],
-      previous: variantStyles['page:pose:previous'],
-    }
-  }, [variantStyles])
+  // Reamimated seems to glitch if this is not done
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
 
   return (
-    <View style={variantStyles.wrapper}>
-      {React.Children.map(children, (child, idx) => (
-        <Page
-          {...pagerProps}
-          idx={idx}
-          lastPage={lastPage}
-          pagePoses={pagePoses}
-          style={[variantStyles.page]}
-          page={page}
-        >
-          {child}
-        </Page>
-      ))}
-
-      {debug && (
-        <View
-          variants={['absolute']}
-          style={{ bottom: 0, left: 0, right: 0 }}
-        >
-          <Button text='previous' debugName='Previous Pager' onPress={pagerRef.current.back} />
-          <Text text={page.toString()} />
-          <Button text='next' debugName='Next Pager' onPress={pagerRef.current.forward} />
-        </View>
-      )}
+    <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>
-
   )
-})
-type PageProps = PagerProps & {
-  idx: number
-  lastPage: number
-  page: number
-  pagePoses: any
-  style: any
-}
-const Page: React.FC<PageProps> = (pageProps) => {
-  const {
-    children: child,
-    idx,
-    loop,
-    lastPage,
-    page,
-    style,
-    pagePoses,
-  } = pageProps
-
-  if (!React.isValidElement(child)) return null
-
-  // const isLast = idx === lastPage
-  // const isFirst = idx === 0
-
-  // const isLoopNext = (loop && isFirst && page === lastPage)
-  // const isLoopPrevious = (loop && isLast && page === 0)
-
-  // const isCurrent = idx === page
-  // const isSequenceNext = idx ===  page + 1
-  // const isSequencePrevious = idx ===  page  - 1
-
-  // const isNext = isSequenceNext || isLoopNext
-
-  // const isPrevious = isSequencePrevious || isLoopPrevious
-
-  // const isCurrentOrAdjacent = [
-  //     isCurrent,
-  //     isNext,
-  //     isPrevious
-  // ].includes(true)
-
-  // if(isCurrentOrAdjacent){
-  //     return <Animated
-  //         key={idx}
-  //         component='View'
-  //         config={pagePoses}
-  //         pose={isCurrent ? 'current' : (isNext ? 'next' : 'previous')}
-  //         style={[{
-  //             position: 'absolute',
-  //             top: 0,
-
-  //         },style]}
-  //     >
-  //         {child}
-  //     </Animated>
-  // }
-  const isCurrent = idx === page
-  const isNext = idx > page
-  const [_opacity, setOpacity] = useState(isCurrent ? 1 : 0)
-
-  const [opacity, resetDebounceTimer] = useDebounce(_opacity, 800)
-
-  onUpdate(() => {
-    if (isCurrent) {
-      setOpacity(1)
-    } else {
-      setOpacity(0)
-    }
-
-    return resetDebounceTimer
-  }, [idx, page])
-
-  return (
-    <Animated
-      key={idx}
-      component='View'
-      config={pagePoses}
-      pose={isCurrent ? 'current' : isNext ? 'next' : 'previous'}
-      style={[
-        {
-          position: 'absolute',
-          top: 0,
-          opacity: isCurrent ? _opacity : opacity,
-        },
-        style,
-      ]}
-    >
-      {child}
-    </Animated>
-  )
-
-  // return <View style={{display:'none'}} key={idx}>{child}</View>
 }

package/src/components/Pager/styles.ts

@@ -2,50 +2,75 @@ import {
   createDefaultVariantFactory,
   includePresets,
 } from '@codeleap/common'
+import { Easing } from 'react-native'
 
 export type PagerComposition =
   | 'page'
   | 'page:transition'
-  | 'page:pose:previous'
-  | 'page:pose:next'
-  | 'page:pose:current'
+  | '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,
 
-export const MobilePagerStyles = {
+    },
+    'page:current': {
+      [translateProp]: 0,
+    },
+    'page:previous': {
+      [translateProp]: -translateVal,
+    },
+  }
+}
+
+export const PagerStyles = {
   ...presets,
-  default: createPagerStyle((Theme) => {
-    const transition = {
-      duration: 500,
-      ease: 'easeInOut',
-      useNativeDriver: true,
-    }
-
-    return {
-      wrapper: {
-        ...Theme.presets.full,
-      },
-      'page:pose:next': {
-        left: Theme.values.width * 1.8,
-        transition: transition,
-      },
-      'page:pose:current': {
-        left: 0,
-        transition: transition,
-      },
-      'page:pose:previous': {
-        left: -Theme.values.width * 1.8,
-        transition: transition,
-      },
-      page: {
-        width: '100%',
-        height: '100%',
-      },
-    }
+  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')
   }),
-  pageless: createPagerStyle(() => ({})),
 }