@codeleap/mobile 2.3.8 → 2.3.10

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

package/src/components/Modal/styles.ts

@@ -0,0 +1,153 @@
+import {
+  assignTextStyle,
+  ButtonComposition,
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+
+export type AnimatableParts = 'box' | 'backdrop'
+
+export type ModalParts =
+  | AnimatableParts
+  | 'wrapper'
+  | 'innerWrapper'
+
+  | 'scrollContent'
+  | 'scroll'
+  | 'body'
+  | 'footer'
+  | 'header'
+  | 'backdropTouchable'
+  | 'title'
+  | `closeButton${Capitalize<ButtonComposition>}`
+
+export type ModalComposition =
+  | ModalParts
+  | `${AnimatableParts}:visible`
+  | `${AnimatableParts}:hidden`
+  | `${AnimatableParts}:transition`
+
+const createModalStyle = createDefaultVariantFactory<ModalComposition>()
+
+const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
+
+export const ModalStyles = {
+
+  ...presets,
+  default: createModalStyle((theme) => {
+    const fullSize = {
+      ...theme.presets.whole,
+      position: 'absolute',
+      width: theme.values.width,
+      height: theme.values.height,
+      maxHeight: theme.values.height,
+    }
+
+    return {
+      wrapper: {
+        zIndex: 1,
+        height: theme.values.height,
+        width: theme.values.width,
+        ...theme.presets.whole,
+        position: 'absolute',
+        ...theme.presets.safeAreaTop(),
+        paddingBottom: theme.values.bottomNavHeight,
+      },
+      'box:transition': {
+        scale: {
+          duration: theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+        opacity: {
+          duration: theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      'backdrop:transition': {
+        opacity: {
+          duration: theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      backdrop: {
+
+        backgroundColor: theme.colors.black,
+        ...fullSize,
+      },
+      backdropTouchable: {
+        ...fullSize,
+      },
+      'backdrop:visible': {
+        opacity: 0.5,
+      },
+      'backdrop:hidden': {
+        opacity: 0,
+      },
+      innerWrapper: {
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        width: theme.values.width,
+        flex: 1,
+      },
+      scroll: {
+        width: theme.values.width,
+        height: theme.values.window.height,
+        maxHeight: theme.values.window.height,
+      },
+      scrollContent: {
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        ...theme.spacing.paddingVertical(2),
+        ...theme.presets.fullWidth,
+        flex: 1,
+      },
+      box: {
+        width: '80%',
+        backgroundColor: theme.colors.background,
+        borderRadius: theme.borderRadius.medium,
+        ...theme.spacing.padding(2),
+      },
+
+      'box:hidden': {
+        opacity: 0,
+        scale: 0.8,
+
+      },
+      'box:visible': {
+        opacity: 1,
+        scale: 1,
+      },
+      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/MultiSelect/index.tsx

@@ -0,0 +1,138 @@
+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 = {},
+    clearable = false,
+    clearIconName = 'close',
+    validate = null,
+    ...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}
+    />
+  }
+
+  const isEmpty = value.length === 0
+  const showClearIcon = !isEmpty && clearable
+  const inputIcon = showClearIcon ? clearIconName : arrowIconName
+
+  const onPressInputIcon = () => {
+    if (showClearIcon) {
+      onValueChange([])
+    } else {
+      close?.()
+    }
+
+  }
+  return <>
+    {
+      !hideInput && (
+        <TextInput
+          caretHidden
+          value={selectedLabel}
+          rightIcon={{
+            icon: inputIcon as IconPlaceholder,
+            onPress: onPressInputIcon,
+          }}
+          editable={false}
+          touchableWrapper
+          wrapperProps={{
+            debugName: 'Select',
+            onPress: close,
+          }}
+          pointerEvents={'none'}
+          label={label}
+          debugName={'Select input'}
+          styles={inputStyles}
+          style={style}
+          validate={validate}
+          {...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,18 @@
+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,
+
+    }
+  }),
+}

package/src/components/MultiSelect/types.ts

@@ -0,0 +1,42 @@
+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>
+    clearable?: boolean
+    clearIconName?: IconPlaceholder
+    validate?: TextInputProps['validate']
+  } & ComponentVariants<typeof MultiSelectStyles>
+

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+import * as React from 'react'
+import {
+  TypeGuards,
+} from '@codeleap/common'
+import { Icon } from '../Icon'
+import { NavigationProps, NavigatorType, PropTypes, TNavigators } from './types'
+import { Navigators } from './constants'
+
+export const Navigation = <T extends NavigatorType>({ type, scenes, ...props }: NavigationProps<T>) => {
+  const NavigationComponent = Navigators[type] as TNavigators[T]
+
+  // console.log('render Navigation', { type, scenes, props, defaultProps })
+
+  return <NavigationComponent.Navigator {...props}>
+    {
+      Object.entries(scenes).map(([name, content], idx) => {
+        const isFunction = TypeGuards.isFunction(content)
+
+        let screenProps = {
+          name,
+        } as PropTypes[T]['Screen']
+
+        if (isFunction) {
+          screenProps.component = content
+          // console.log('Render NavigationScreen', { scenes, screenProps, content, isFunction }, 'PACKAGES')
+        } else {
+          screenProps.component = content?.component?.default || content?.component || content?.default
+          const nameParts = name.split('.')
+          const title = content?.title || nameParts[nameParts.length - 1] || name.replace('.', '')
+
+          screenProps = {
+            ...screenProps,
+            options: (optionProps) => ({
+              title,
+              tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>,
+              tabBarIconFocused: content?.iconFocused ? (style) => <Icon name={content?.iconFocused} style={style}/> : null,
+              ...(TypeGuards.isFunction(content.options) ? content.options(optionProps) : content.options),
+            }),
+          }
+          // console.log('Render NavigationScreen loop', { scenes, screenProps, content, title, isFunction, props }, 'PACKAGES')
+        }
+
+        return (
+          // @ts-ignore
+          <NavigationComponent.Screen
+            key={idx}
+            {...screenProps}
+          />
+        )
+      })
+    }
+  </NavigationComponent.Navigator>
+}

package/src/components/Navigation/constants.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+import { createBottomTabNavigator, createDrawerNavigator, createStackNavigator } from '../../modules/reactNavigation'
+
+export const Navigators = {
+  Drawer: createDrawerNavigator(),
+  Stack: createStackNavigator(),
+  Tab: createBottomTabNavigator(),
+}

package/src/components/Navigation/index.tsx

@@ -0,0 +1,3 @@
+export * from './Navigation'
+export * from './types'
+export * from './utils'

package/src/components/Navigation/types.ts

@@ -0,0 +1,35 @@
+import { IconPlaceholder } from '@codeleap/common'
+import { Navigators } from './constants'
+
+export type TNavigators = typeof Navigators
+export type NavigatorType = keyof TNavigators
+
+export type PropTypes = {
+    [P in NavigatorType] : {
+        Screen: Omit<React.ComponentPropsWithRef<TNavigators[P]['Screen']>, 'children'|'name'>
+        Navigator: Omit<React.ComponentPropsWithRef<TNavigators[P]['Navigator']>, 'children'|'name'>
+        Group: Omit<React.ComponentPropsWithRef<TNavigators[P]['Group']>, 'children'|'name'>
+    }
+}
+export type SceneComponent<K extends NavigatorType> = PropTypes[K]['Screen']
+export type SceneOptions<K extends NavigatorType> =
+    { icon?: IconPlaceholder; default?:SceneComponent<K> } & PropTypes[K]['Screen']
+export type Scene<K extends NavigatorType> = SceneComponent<K> | SceneOptions<K>
+
+export type Scenes<K extends NavigatorType> = {
+    [x:string] : Scene<K>
+}
+
+export type SceneProps = any
+
+export type NavigationProps<T extends NavigatorType> = {
+    type: T
+    scenes: Scenes<T>
+} & PropTypes[T]['Navigator']
+
+// export type NavigationStructure  = {
+//     [module:string] : {
+//         scenes: Scenes,
+
+//     }
+// }