@codeleap/mobile 1.9.31 → 2.0.0

package/src/components/Modal/index.tsx

@@ -11,9 +11,9 @@ import {
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import {
-  MobileModalComposition,
-  MobileModalStyles,
-  MobileModalParts,
+  ModalComposition,
+  ModalStyles,
+  ModalParts,
 } from './styles'
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
@@ -21,13 +21,14 @@ import { StylesOf } from '../../types/utility'
 import { useDynamicAnimation } from 'moti'
 import { Backdrop } from '../Backdrop'
 import { useStaticAnimationStyles } from '../../utils/hooks'
-import { Text } from '../Text'
+import { Text, TextProps } from '../Text'
+import { Touchable } from '../Touchable'
 
 export * from './styles'
 
 export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
-  styles?: StylesOf<MobileModalComposition>
+  variants?: ComponentVariants<typeof ModalStyles>['variants']
+  styles?: StylesOf<ModalComposition>
   dismissOnBackdrop?: boolean
   buttonProps?: ButtonProps
   accessible?: boolean
@@ -41,7 +42,41 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   toggle?: () => void
   zIndex?: number
   scroll?: boolean
+  header?: React.ReactElement
   keyboardAware?: boolean
+  renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+}
+
+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, showClose, closable, debugName, closeIconName, 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) => {
@@ -49,16 +84,17 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     variants = [],
     styles = {},
     visible,
-    showClose,
+
     closable = true,
-    title,
+
     footer,
     children,
     toggle = () => null,
     dismissOnBackdrop = true,
-    closeIconName = 'close',
+    header = null,
     debugName,
     scroll = true,
+    renderHeader,
     keyboardAware = true,
     zIndex = null,
     ...props
@@ -70,7 +106,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     styles,
   }) as ModalProps['styles']
 
-  function getStyles(key: MobileModalParts) {
+  function getStyles(key: ModalParts) {
     const s = [
       variantStyles[key],
       styles[key],
@@ -90,24 +126,48 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
   }, [visible])
   const wrapperStyle = getStyles('wrapper')
+  const ScrollComponent = scroll ? Scroll : View
+  const scrollStyle = scroll ? getStyles('innerWrapper') : [getStyles('innerWrapper'), getStyles('innerWrapperScroll')]
+
+  const headerProps:ModalHeaderProps = {
+    ...modalProps,
+    styles: {
+      wrapper: getStyles('header'),
+      title: getStyles('title'),
+      closeButton: buttonStyles,
+    },
+  }
+  const Header = renderHeader || DefaultHeader
+
   return (
-    <View style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]} pointerEvents={visible ? 'auto' : 'none'}>
+    <View
+      style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]}
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
 
-      <Scroll
-        style={getStyles('innerWrapper')}
+      <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('innerWrapperScroll')}
         scrollEnabled={scroll}
         keyboardAware={keyboardAware}
       >
-        <Backdrop visible={visible} debugName={`Modal ${debugName} backdrop`} styles={{
-          'wrapper:hidden': variantStyles['backdrop:hidden'],
-          'wrapper:visible': variantStyles['backdrop:visible'],
-          wrapper: variantStyles.backdrop,
-        }} onPress={(dismissOnBackdrop && closable) ? toggle : (() => {})}
-        wrapperProps={{
-          transition: { ...variantStyles['backdrop:transition'] },
-        }}
-        />
+        {dismissOnBackdrop &&
+          <Touchable
+            feedbackVariant='none'
+            onPress={ closable ? toggle : (() => {})}
+            debugName={'Modal backdrop touchable'}
+            style={variantStyles.backdropTouchable}
+            android_ripple={null}
+          />}
         <View
           animated
           state={boxAnimation}
@@ -115,25 +175,8 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
           transition={{ ...variantStyles['box:transition'] }}
           {...props}
         >
-          {(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>
-          )}
+
+          {header ? header : <Header {...headerProps}/>}
 
           <View style={getStyles('body')}>{children}</View>
           {footer && (
@@ -142,7 +185,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
             </View>
           )}
         </View>
-      </Scroll>
+      </ScrollComponent>
     </View>
 
   )

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'
@@ -15,26 +15,29 @@ export type MobileModalParts =
   | 'body'
   | 'footer'
   | 'header'
+  | 'backdropTouchable'
   | '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 {
@@ -64,7 +67,9 @@ export const MobileModalStyles = {
         backgroundColor: Theme.colors.black,
         ...fullSize,
       },
-
+      backdropTouchable: {
+        ...fullSize,
+      },
       'backdrop:visible': {
         opacity: 0.5,
       },

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)