@codeleap/mobile 2.3.26 → 2.3.28

package/src/components/legacy/Modal/index.tsx

@@ -1,163 +0,0 @@
-import * as React from 'react'
-import { View, ViewProps, AnimatedView } from '../../View'
-import { Button, ButtonProps } from '../../Button'
-import { Scroll } from '../../Scroll'
-import {
-  capitalize,
-  ComponentVariants,
-  IconPlaceholder,
-  useDefaultComponentStyle,
-} 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'
-import { GetKeyboardAwarePropsOptions } from '../../../utils'
-
-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
-  zIndex?: number
-  scroll?: boolean
-  keyboardAware?: GetKeyboardAwarePropsOptions
-}
-
-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,
-    zIndex = null,
-    ...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'],
-    },
-  }
-
-  const wrapperStyle = StyleSheet.flatten(getStyles('wrapper'))
-  return (
-    <View
-      style={[wrapperStyle, { zIndex: typeof zIndex === 'number' ? zIndex : wrapperStyle?.zIndex }]}
-      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

package/src/components/legacy/Modal/styles.ts

@@ -1,125 +0,0 @@
-import {
-  ButtonComposition,
-  createDefaultVariantFactory,
-  includePresets,
-  ModalStyles,
-  assignTextStyle,
-} from '@codeleap/common'
-
-export const modalTransition = {
-  duration: 150,
-  ease: 'easeOut',
-  useNativeDriver: false,
-}
-
-export type MobileModalParts =
-  | 'wrapper'
-  | 'overlay'
-  | 'innerWrapper'
-  | 'innerWrapperScroll'
-  | 'box'
-  | 'footer'
-  | 'body'
-  | 'header'
-  | 'touchableBackdrop'
-  | 'box:pose'
-  | 'title'
-  | `closeButton${Capitalize<ButtonComposition>}`
-
-export type MobileModalComposition =
-  | MobileModalParts
-  | `${MobileModalParts}:visible`
-
-const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
-
-const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
-
-const defaultModalStyles = ModalStyles
-
-export const MobileModalStyles = {
-  ...defaultModalStyles,
-  ...presets,
-  default: createModalStyle((theme) => {
-    const fullSize = {
-      ...theme.presets.whole,
-      position: 'absolute',
-      width: theme?.values?.width,
-      height: theme?.values?.height,
-    }
-
-    return {
-      wrapper: {
-        zIndex: 1,
-
-        ...fullSize,
-      },
-
-      overlay: {
-        opacity: 0,
-
-        backgroundColor: theme.colors.black,
-        ...fullSize,
-      },
-      'overlay:visible': {
-        opacity: 0.5,
-      },
-      innerWrapper: {},
-      innerWrapperScroll: {
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.presets.justifyCenter,
-        minHeight: theme.values.window.height,
-      },
-      box: {
-        width: '80%',
-        backgroundColor: theme.colors.background,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(2),
-      },
-      touchableBackdrop: {
-        ...fullSize,
-      },
-      'box:pose': {
-        opacity: 0,
-        scale: 0.8,
-        transition: modalTransition,
-      },
-      'box:pose:visible': {
-        opacity: 1,
-        scale: 1,
-        transition: modalTransition,
-      },
-      header: {
-        flexDirection: 'row',
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-      },
-      closeButtonWrapper: {
-        alignSelf: 'center',
-        ...theme.spacing.marginLeft('auto'),
-      },
-      title: {
-        ...theme.presets.textCenter,
-        ...assignTextStyle('h3')(theme).text,
-        ...theme.spacing.paddingBottom(1),
-        flex: 1,
-      },
-    }
-  }),
-  popup: createModalStyle(() => ({})),
-  fullscreen: createModalStyle((theme) => ({
-    overlay: {
-      backgroundColor: theme.colors.background,
-    },
-    'overlay:visible': {
-      opacity: 1,
-    },
-    box: {
-      flex: 1,
-      borderRadius: 0,
-      width: theme.values.width,
-      height: theme.values.window.height,
-      ...theme.presets.center,
-    },
-  })),
-}

package/src/components/legacy/Pager/index.tsx

@@ -1,242 +0,0 @@
-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'
-
-export * from './styles'
-
-export type PagerProps = {
-  variants?: ComponentVariants<typeof MobilePagerStyles>['variants']
-  styles?: StylesOf<PagerComposition>
-  page?: number
-  loop?: boolean
-  debug?: boolean
-  children?: ReactNode
-  onPageChange?: (page: number) => void
-}
-
-export type PagerRef = {
-  forward(by?: number): void
-  back(by?: number): void
-  to(index?: number): void
-}
-
-export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
-  const {
-    children,
-    styles,
-    variants,
-    page: propPage,
-    debug,
-    loop,
-    onPageChange,
-  } = pagerProps
-
-  const [page, setPage] = useState(() => propPage ?? 0)
-
-  const variantStyles = useDefaultComponentStyle<'u:Pager', typeof MobilePagerStyles>(
-    'u:Pager',
-    {
-      styles,
-      transform: StyleSheet.flatten,
-      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])
-
-  onUpdate(() => {
-    if (typeof propPage === 'number') {
-      setPage(propPage)
-    }
-  }, [propPage])
-
-  useImperativeHandle(ref, () => pagerRef.current)
-
-  const pagePoses = useMemo(() => {
-    return {
-      current: variantStyles['page:pose:current'],
-      next: variantStyles['page:pose:next'],
-      previous: variantStyles['page:pose:previous'],
-    }
-  }, [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>
-
-  )
-})
-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/legacy/Pager/styles.ts

@@ -1,51 +0,0 @@
-import {
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
-
-export type PagerComposition =
-  | 'page'
-  | 'page:transition'
-  | 'page:pose:previous'
-  | 'page:pose:next'
-  | 'page:pose:current'
-  | 'wrapper'
-
-const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
-
-const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
-)
-
-export const MobilePagerStyles = {
-  ...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%',
-      },
-    }
-  }),
-  pageless: createPagerStyle(() => ({})),
-}

package/src/components/legacy/index.ts

@@ -1,2 +0,0 @@
-export * from './Modal'
-export * from './Pager'