@codeleap/mobile 2.3.0 → 2.3.2

package/src/components/ImageView/Spotlight.tsx

@@ -0,0 +1,157 @@
+import React, { useContext, useState } from 'react'
+import { deepEqual, onUpdate, ReactState, TypeGuards, usePrevious, useUnmount } from '@codeleap/common'
+// @ts-ignore
+import { ImageSource } from 'react-native-image-viewing/dist/@types'
+import uuid from 'react-native-uuid'
+import { ImageView } from './component'
+import { ImageProps } from '../Image'
+type TImage = {
+    source: ImageSource
+    created: number
+    id: string
+
+}
+type ImageList = Record<string, TImage>
+
+type SpotlightState = ReactState<Record<string, ImageList>>
+type IndexState = ReactState<Record<string, number>>
+type TSpotlightCtx = {
+    spotlights: SpotlightState[0]
+    setSpotlights: SpotlightState[1]
+    indexes: IndexState[0]
+    setIndexes: IndexState[1]
+
+}
+
+const SpotlightCtx = React.createContext({} as TSpotlightCtx)
+
+export const SpotlightProvider:React.FC = ({ children }) => {
+  const [spotlights, setSpotlights] = useState<TSpotlightCtx['spotlights']>({})
+  const [indexes, setIndexes] = useState<TSpotlightCtx['indexes']>({})
+  const ctxValue:TSpotlightCtx = {
+    spotlights,
+    setSpotlights,
+    indexes,
+    setIndexes,
+  }
+
+  return <SpotlightCtx.Provider value={ctxValue}>
+    {children}
+  </SpotlightCtx.Provider>
+}
+
+export function useSpotlight(name: string) {
+  const ctx = useContext(SpotlightCtx)
+
+  const imList =
+    Object.values(ctx.spotlights[name] || {})
+
+  return {
+    images: imList,
+    currentIndex: ctx.indexes[name],
+    set(img: ImageSource, id?: string) {
+      const newId = id || uuid.v4() as string
+      ctx.setSpotlights((prev) => {
+        const images = { ...prev[name] }
+
+        if (id !== null) {
+          images[id] = {
+            ...images[id],
+            source: img,
+          }
+        } else {
+          const now = Date.now()
+
+          images[newId] = {
+            created: now,
+            id: newId,
+            source: img,
+          }
+        }
+
+        return {
+          ...prev,
+          [name]: images,
+        }
+      })
+
+      return newId
+    },
+    remove(id: string) {
+      ctx.setSpotlights((prev) => {
+        const images = { ...prev[name] }
+        delete images[id]
+        return {
+          ...prev,
+          [name]: images,
+        }
+      })
+    },
+    open(id: string) {
+      const newIdx = imList.findIndex(x => x.id === id)
+      ctx.setIndexes((prev) => ({
+        ...prev,
+        [name]: newIdx,
+      }))
+    },
+    close() {
+
+      ctx.setIndexes((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }))
+    },
+    clear() {
+      ctx.setIndexes((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }))
+      ctx.setSpotlights((prev) => {
+
+        return {
+          ...prev,
+          [name]: {},
+        }
+      })
+    },
+  }
+}
+
+export const useImageSpotlight = (name: string | null, src: ImageProps['source']) => {
+  const [id, setId] = useState(null)
+  const spotlight = useSpotlight(name)
+  const imSource = TypeGuards.isString(src) ? { uri: src } : src as TImage['source']
+  const prevSource = usePrevious(imSource)
+
+  onUpdate(() => {
+    if (!name) return
+    if (deepEqual(prevSource, imSource)) return
+    setId(spotlight.set(imSource, id))
+  }, [src, id])
+
+  useUnmount(() => {
+    if (!name) return
+    spotlight.remove(id)
+  })
+
+  return {
+    onImagePressed: () => {
+      spotlight.open(id)
+    },
+  }
+}
+
+export const Spotlight = ({ name }) => {
+  const spotlight = useSpotlight(name)
+  useUnmount(() => {
+    spotlight.clear()
+  })
+  return <ImageView
+    imageIndex={spotlight.currentIndex}
+    images={spotlight.images.map(x => x.source)}
+    keyExtractor={(_, index) => index.toString()}
+    onRequestClose={spotlight.close}
+    visible={typeof spotlight.currentIndex !== 'undefined'}
+
+  />
+}

package/src/components/ImageView/component.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+
+import { onUpdate, PropsOf } from '@codeleap/common'
+
+// @ts-ignore
+import _ImageView from 'react-native-image-viewing'
+import { StatusBar } from 'react-native'
+import { View } from '../View'
+import { Text } from '../Text'
+
+type FooterComponentType = React.ComponentType<{
+  imageIndex: number
+  imagesLength: number
+}>
+
+const FooterComponent: FooterComponentType = ({ imageIndex, imagesLength }) => (
+  <View variants={['marginBottom:5', 'alignCenter']}>
+    <Text text={imageIndex + 1 + '/' + imagesLength}/>
+  </View>
+)
+
+export type ImageViewProps = PropsOf<typeof _ImageView>
+
+export const ImageView: React.FC<ImageViewProps> = (props) => {
+  onUpdate(() => {
+    StatusBar.setHidden(props.visible)
+    // StatusBar.setBarStyle(`${props.visible ? 'light' : 'dark'}-content`)
+  }, [props.visible])
+
+  return (
+    <_ImageView
+      doubleTapToZoomEnabled={false}
+      FooterComponent={({ imageIndex }) => <FooterComponent imageIndex={imageIndex} imagesLength={props.images.length}/>}
+      presentationStyle={'overFullScreen'}
+      {...props}
+    />
+  )
+}

package/src/components/ImageView/index.ts

@@ -0,0 +1,2 @@
+export * from './Spotlight'
+export * from './component'

package/src/components/InputLabel/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { ComponentVariants, FormTypes, useDefaultComponentStyle } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { View, ViewProps } from '../View'
+import { InputLabelComposition, InputLabelStyles } from './styles'
+import { Text } from '../Text'
+import { StyleSheet } from 'react-native'
+
+export type InputLabelProps = ViewProps & {
+    styles?: StylesOf<InputLabelComposition>
+    label?: FormTypes.Label
+    required?: boolean
+} & ComponentVariants<typeof InputLabelStyles>
+
+export * from './styles'
+
+export const InputLabel:React.FC<InputLabelProps> = (props) => {
+  const { label, required = false, variants = [], styles = {}, style, ...viewProps } = props
+  const variantStyles = useDefaultComponentStyle<'u:InputLabel', typeof InputLabelStyles>('u:InputLabel', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+
+  if (!label) return null
+
+  switch (typeof label) {
+    case 'string':
+      return <View {...viewProps} style={[variantStyles.wrapper, style]}>
+        <Text style={variantStyles.text} text={label} />
+        {required && <Text style={variantStyles.asterisk} text={' *'} />}
+      </View>
+    case 'object':
+      return <>
+        {label as React.ReactNode}
+      </>
+    default:
+      return null
+  }
+}

package/src/components/InputLabel/styles.ts

@@ -0,0 +1,19 @@
+import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
+
+export type InputLabelComposition = 'text' | 'wrapper' | 'asterisk'
+
+const createInputLabelStyle = createDefaultVariantFactory<InputLabelComposition>()
+
+export const InputLabelStyles = {
+  default: createInputLabelStyle((theme) => ({
+    asterisk: {
+      color: theme.colors.negative,
+    },
+    wrapper: {
+      ...theme.presets.row,
+    },
+    text: {
+      ...assignTextStyle('h5')(theme).text,
+    },
+  })),
+}

package/src/components/List/PaginationIndicator.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  assignTextStyle,
+  ComponentVariants,
+  createDefaultVariantFactory,
+  getNestedStylesByKey,
+  includePresets,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { StyleSheet, ViewStyle } from 'react-native'
+import { StylesOf } from '../../types'
+import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
+import { Text } from '../Text'
+
+export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}`
+
+const createPaginationIndicatorStyle = createDefaultVariantFactory<PaginationIndicatorComposition>()
+const presets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
+export const PaginationIndicatorStyles = {
+  ...presets,
+  default: createPaginationIndicatorStyle((theme) => {
+    return {
+      loaderWrapper: {
+        ...theme.presets.center,
+        ...theme.spacing.marginVertical(3),
+      },
+      text: {
+        ...assignTextStyle('h4')(theme).text,
+        ...theme.presets.textCenter,
+        ...theme.spacing.marginVertical(3),
+        ...theme.presets.fullWidth,
+      },
+    }
+  }),
+}
+
+export type PaginationIndicatorProps = {
+  isFetching?: boolean
+  noMoreItemsText: React.ReactChild
+  hasMore?: boolean
+  activityIndicator?: JSX.Element
+  styles?: StylesOf<PaginationIndicatorComposition>
+  style?: ViewStyle
+} & ComponentVariants<typeof PaginationIndicatorStyles>
+
+export const PaginationIndicator = (props: PaginationIndicatorProps) => {
+  const { hasMore, isFetching, noMoreItemsText, style, activityIndicator, styles = {}, variants = [] } = props
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:PaginationIndicator',
+    typeof PaginationIndicatorStyles
+    >('u:PaginationIndicator', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+    })
+
+  const loaderStyles = getNestedStylesByKey('loader', variantStyles)
+
+  if (isFetching) {
+    return activityIndicator || <ActivityIndicator style={style} styles={loaderStyles}/>
+  }
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return <Text style={[variantStyles.text, style]} text={noMoreItemsText.toString()}/>
+    }
+    return noMoreItemsText
+  }
+  return null
+}

package/src/components/List/index.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+
+  useDefaultComponentStyle,
+
+  ComponentVariants,
+  useCallback,
+} from '@codeleap/common'
+
+import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet, RefreshControlProps } from 'react-native'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { ListComposition, ListStyles } from './styles'
+import { StylesOf } from '../../types'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+
+export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+export type ReplaceFlatlistProps<P, T> = Omit<P, DataboundFlatListPropsTypes> & {
+  data: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: ListRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data:T,
+    index: number,
+) => { length: number; offset: number; index: number })
+}
+
+export * from './styles'
+export * from './PaginationIndicator'
+
+export type FlatListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =RNFlatListProps<Data> &
+  Omit<ViewProps, 'variants'> & {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    keyboardAware?: GetKeyboardAwarePropsOptions
+    styles?: StylesOf<ListComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+  } & ComponentVariants<typeof ListStyles>
+
+const ListCP = forwardRef<FlatList, FlatListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      component,
+      refreshing,
+      placeholder,
+      keyboardAware,
+      refreshControlProps = {},
+      ...props
+    } = flatListProps
+
+    const variantStyles = useDefaultComponentStyle<'u:List', typeof ListStyles>('u:List', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+
+    })
+
+    const renderSeparator = useCallback(() => {
+      return (
+        <View style={variantStyles.separator}></View>
+      )
+    }, [])
+
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && props?.separators && renderSeparator
+
+    const Component:any = component || FlatList
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+
+    const _listProps = {
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: variantStyles.content,
+      ref: ref as unknown as FlatList,
+      ItemSeparatorComponent: separator,
+      refreshControl: !!onRefresh && (
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor={refreshStyles?.color}
+          colors={[refreshStyles?.color]}
+          {...refreshControlProps}
+        />
+      ),
+      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
+      ...props,
+    }
+    const keyboard = useKeyboardAwareView()
+    const listProps = keyboard.getKeyboardAwareProps(_listProps, {
+      adapt: 'paddingBottom',
+      baseStyleProp: 'contentContainerStyle',
+      ...keyboardAware,
+    })
+    return (
+      <Component
+        {...listProps}
+      />
+    )
+  },
+)
+
+export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
+
+export const List = ListCP as ListComponentType
+

package/src/components/List/styles.ts

@@ -0,0 +1,19 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { ScrollComposition, ScrollStyles } from '../Scroll/styles'
+
+export type ListComposition = ScrollComposition | 'separator'
+
+const createListStyle = createDefaultVariantFactory<ListComposition>()
+
+export const ListStyles = {
+  default: createListStyle((theme) => {
+    const defaultStyles = ScrollStyles.default(theme)
+    return {
+      ...defaultStyles,
+      separator: {
+        width: '100%',
+        height: theme.spacing.value(1),
+      },
+    }
+  }),
+}

package/src/components/Modal/index.tsx

@@ -0,0 +1,218 @@
+import * as React from 'react'
+import { View, ViewProps } from '../View'
+import { Button, ButtonProps } from '../Button'
+import { Scroll } from '../Scroll'
+import {
+  ComponentVariants,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  onUpdate,
+  PropsOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import {
+  ModalComposition,
+  ModalStyles,
+  ModalParts,
+} from './styles'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types/utility'
+
+import { useDynamicAnimation } from 'moti'
+import { Backdrop } from '../Backdrop'
+import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
+import { Text, TextProps } from '../Text'
+import { Touchable } from '../Touchable'
+import { GetKeyboardAwarePropsOptions } from '../../utils'
+
+export * from './styles'
+
+export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
+  variants?: ComponentVariants<typeof ModalStyles>['variants']
+  styles?: StylesOf<ModalComposition>
+  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
+  header?: React.ReactElement
+  closeOnHardwareBackPress?: boolean
+  renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+  keyboardAware?: GetKeyboardAwarePropsOptions
+  scrollProps?: PropsOf<typeof Scroll>
+}
+
+export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
+  styles: {
+    wrapper: ViewProps['style']
+    title: TextProps['style']
+    closeButton: ButtonProps['styles']
+  }
+}
+
+const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
+  const { styles, title = null, showClose = false, closable, debugName, closeIconName = 'close', toggle } = props
+  return <>
+    {(title || showClose) && (
+      <View style={styles.wrapper}>
+        {typeof title === 'string' ? (
+          <Text text={title} style={styles.title} />
+        ) : (
+          title
+        )}
+
+        {(showClose && closable) && (
+          <Button
+            debugName={`${debugName} modal close button`}
+            icon={closeIconName as IconPlaceholder}
+            variants={['icon']}
+            onPress={toggle}
+            styles={styles.closeButton}
+          />
+        )}
+      </View>
+    )}</>
+}
+
+export const Modal: React.FC<ModalProps> = (modalProps) => {
+  const {
+    variants = [],
+    styles = {},
+    visible,
+
+    closable = true,
+
+    footer,
+    children,
+    toggle = () => null,
+    dismissOnBackdrop = true,
+    header = null,
+    debugName,
+    scroll = true,
+    renderHeader,
+    zIndex = null,
+    scrollProps = {},
+    closeOnHardwareBackPress = true,
+    ...props
+  } = modalProps
+
+  const variantStyles = useDefaultComponentStyle('u:Modal', {
+    variants: variants as any,
+    transform: StyleSheet.flatten,
+    styles,
+  }) as ModalProps['styles']
+
+  function getStyles(key: ModalParts) {
+    const s = [
+      variantStyles[key],
+      styles[key],
+    ]
+
+    return StyleSheet.flatten(s)
+  }
+  const buttonStyles = React.useMemo(() => getNestedStylesByKey('closeButton', variantStyles), [variantStyles])
+
+  const boxAnimationStates = useStaticAnimationStyles(variantStyles, ['box:hidden', 'box:visible'])
+
+  const boxAnimation = useDynamicAnimation(() => {
+    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
+  })
+
+  onUpdate(() => {
+    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
+  }, [visible])
+  const wrapperStyle = getStyles('wrapper')
+
+  const ScrollComponent = scroll ? Scroll : View
+  const scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper')
+
+  const headerProps:ModalHeaderProps = {
+    ...modalProps,
+    styles: {
+      wrapper: getStyles('header'),
+      title: getStyles('title'),
+      closeButton: buttonStyles,
+    },
+  }
+  const Header = renderHeader || DefaultHeader
+
+  useBackButton(() => {
+    if (visible && closeOnHardwareBackPress) {
+      toggle()
+      return true
+    }
+  }, [visible, toggle, closeOnHardwareBackPress])
+
+  return (
+    <View
+      style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]}
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+
+      <Backdrop visible={visible} debugName={`Modal ${debugName} backdrop`} styles={{
+        'wrapper:hidden': variantStyles['backdrop:hidden'],
+        'wrapper:visible': variantStyles['backdrop:visible'],
+        wrapper: variantStyles.backdrop,
+      }}
+      wrapperProps={{
+        transition: { ...variantStyles['backdrop:transition'] },
+      }}
+      />
+      <ScrollComponent
+        style={scrollStyle}
+        contentContainerStyle={getStyles('scrollContent')}
+        keyboardAware= {{
+          adapt: 'marginBottom',
+          baseStyleProp: 'style',
+          animated: true,
+          enabled: visible,
+          enableOnAndroid: true,
+        }}
+        animated
+        { ...scrollProps}
+      >
+        {dismissOnBackdrop &&
+          <Touchable
+            onPress={ closable ? toggle : (() => {})}
+            debounce={400}
+            debugName={'Modal backdrop touchable'}
+            style={variantStyles.backdropTouchable}
+            android_ripple={null}
+            noFeedback
+          />}
+
+        <View
+          animated
+          state={boxAnimation}
+          style={getStyles('box')}
+          transition={{ ...variantStyles['box:transition'] }}
+
+          {...props}
+        >
+
+          {header ? header : <Header {...headerProps}/>}
+
+          <View style={getStyles('body')}>{children}</View>
+          {footer && (
+            <View style={getStyles('footer')}>
+              {typeof footer === 'string' ? <Text text={footer} /> : footer}
+            </View>
+          )}
+        </View>
+
+      </ScrollComponent>
+    </View>
+
+  )
+}
+
+export default Modal