@codeleap/mobile 1.9.28 → 1.9.29

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,182 @@
+import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
+import { Scroll, ScrollProps } from '../Scroll'
+
+import { Easing, EasingFunction, StyleSheet } from 'react-native'
+import { PropsOf, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import { SegmentedControlComposition, SegmentedControlStyles } from './styles'
+import { Touchable } from '../Touchable'
+import { StylesOf } from '../../types/utility'
+import { Text } from '../Text'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { View } from '../View'
+export * from './styles'
+export type SegmentedControlRef =KeyboardAwareScrollViewTypes.KeyboardAwareScrollView & {
+  scrollTo: (index: number) => void
+  scrollToCurrent: () => void
+}
+
+export type SegmentedControlProps<T = string> = ScrollProps & {
+    options : {label: string; value: T }[]
+    onValueChange: (value: T) => any
+    value: T
+    debugName: string
+    animation?: {
+      duration?: number
+      easing?: EasingFunction
+    }
+    styles?: StylesOf<SegmentedControlComposition>
+    scrollProps?: any
+    RenderButton?: (props: SegmentedControlProps & {
+      touchableProps: PropsOf<typeof Touchable>
+      textProps: PropsOf<typeof Text>
+      option: {label: string; value: any}
+    }) => ReactElement
+    RenderAnimatedView?: (props: SegmentedControlProps) => ReactElement
+}
+
+const defaultAnimation = {
+  duration: 200,
+  // easing: Easing.linear,
+}
+
+const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
+  const {
+    options = [],
+    onValueChange,
+    debugName,
+    value,
+    styles = {},
+    animation = {},
+    variants = [],
+    scrollProps = {},
+    RenderAnimatedView,
+    RenderButton,
+
+  } = props
+  const { Theme } = useCodeleapContext()
+
+  const _animation = {
+    ...defaultAnimation, ...animation,
+  }
+
+  let variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlStyles>('u:SegmentedControl', {
+    styles,
+    transform: StyleSheet.flatten,
+    variants,
+  })
+
+  const scrollRef = useRef<KeyboardAwareScrollViewTypes.KeyboardAwareScrollView>(null)
+
+  function scrollTo(idx:number) {
+    if (!scrollRef.current) return
+    setTimeout(() => {
+      scrollRef.current?.scrollToPosition?.(widthStyle.width * idx, 0, true)
+    })
+  }
+
+  const widthStyle = useMemo(() => {
+    const maxWordLength = Object.assign([], options)
+      .sort((a, b) => {
+        return a.label.length - b.label.length
+      })[0].label.length
+    const fitMaxWidth = Theme.values.width - Theme.spacing.value(4)
+    let fitItemWidth = maxWordLength * options.length * 6
+    if (fitItemWidth * options.length < fitMaxWidth) fitItemWidth = fitMaxWidth / options.length
+    return { width: fitItemWidth }
+  }, [options])
+
+  const currentOptionIdx = options.findIndex(o => o.value === value) || 0
+
+  const translateX = widthStyle.width * currentOptionIdx
+
+  const onPress = (txt:string, idx: number) => {
+    return () => {
+      onValueChange(txt)
+      scrollTo(idx)
+    }
+  }
+
+  const hasScrolledInitially = useRef(false)
+
+  useImperativeHandle(ref, () => {
+    if (!scrollRef.current) return null
+
+    return {
+      ...(scrollRef.current),
+      scrollTo,
+      scrollToCurrent() {
+        if (!scrollRef.current) return
+        scrollTo(currentOptionIdx)
+      },
+    } as SegmentedControlRef
+  })
+
+  if (!hasScrolledInitially.current && scrollRef.current) {
+    scrollTo(currentOptionIdx)
+    hasScrolledInitially.current = true
+  }
+
+  const AnimatedView = RenderAnimatedView || View
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+  return (
+    <Scroll
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={variantStyles.scroll}
+      contentContainerStyle={variantStyles.scrollContent}
+      {...scrollProps}
+      ref={scrollRef}
+    >
+      <View style={variantStyles.wrapper}>
+        <AnimatedView {...props}
+          animated
+          style={[variantStyles.selectedBubble, widthStyle]}
+          animate={{
+            translateX,
+          }}
+
+          transition={_animation}
+        />
+        {options.map((o, idx) => {
+          const selected = value === o.value
+
+          const touchableProps = {
+            key: idx,
+            debugName: `Segmented Control ${debugName}, option ${o.label}`,
+            onPress: onPress(o.value, idx),
+            style: [widthStyle, variantStyles.button],
+          }
+
+          const textProps = {
+            text: o.label as string,
+            colorChangeConfig: _animation,
+            style: StyleSheet.flatten([variantStyles.text, selected && variantStyles['text:selected']]),
+            animated: true,
+          }
+
+          if (RenderButton) {
+            return (
+              <RenderButton {...props} touchableProps={touchableProps} key={touchableProps.key} textProps={textProps} option={o}/>
+            )
+          }
+          return <Touchable
+            {...touchableProps}
+            key={touchableProps.key}
+          >
+            <Text
+
+              {...textProps}
+            />
+
+          </Touchable>
+
+        })}
+      </View>
+    </Scroll>
+  )
+
+})
+
+type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & {ref?: React.Ref<SegmentedControlRef>}) => ReactElement
+
+export const SegmentedControl = _SegmentedControl as SegControlComponent

package/src/components/SegmentedControl/styles.ts

@@ -0,0 +1,65 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type SegmentedControlStates = 'selected'
+
+export type SegmentedControlComposition =
+ 'selectedBubble' |
+ 'wrapper' |
+ 'scroll' |
+ 'scrollContent' |
+ 'text' |
+ `text:${SegmentedControlStates}` |
+ 'button' |
+ `button:${SegmentedControlStates}`
+
+const createSegmentedControlStyle = createDefaultVariantFactory<SegmentedControlComposition>()
+
+const presets = includePresets((style) => createSegmentedControlStyle(() => ({ scrollContent: style })))
+
+export const SegmentedControlStyles = {
+  ...presets,
+  default: createSegmentedControlStyle((theme) => {
+
+    return {
+
+      text: {
+        color: theme.colors.text,
+      },
+      'text:selected': {
+        color: theme.colors.white,
+      },
+      scroll: {
+        height: theme.values.buttons.default.height,
+        // borderRadius: Theme.borderRadius.large,
+      },
+      scrollContent: {
+        // borderRadius: Theme.borderRadius.large,
+        ...theme.spacing.paddingHorizontal(2),
+      },
+      button: {
+        backgroundColor: 'transparent',
+        ...theme.presets.alignCenter,
+        color: 'red',
+        ...theme.spacing.padding(2),
+        ...theme.presets.justifyCenter,
+      },
+      selectedBubble: {
+        position: 'absolute',
+        zIndex: -1,
+        ...theme.spacing.padding(2),
+        maxHeight: 50,
+        minHeight: 50,
+        borderRadius: theme.borderRadius.large,
+        backgroundColor: theme.colors.primary,
+      },
+      wrapper: {
+        borderRadius: theme.borderRadius.large,
+        backgroundColor: theme.colors.backgroundSecondary,
+        ...theme.presets.row,
+        position: 'relative',
+      },
+
+    }
+
+  }),
+}

package/src/components/Select/index.tsx

@@ -69,7 +69,6 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
       close()
     }
   }
-
   const selectedLabel:string = useMemo(() => {
     const current = options.find(o => o.value === value)
 
@@ -88,7 +87,7 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
       }}
       editable={false}
       touchableWrapper
-      innerWrapperProps={{
+      wrapperProps={{
         debugName: 'Select',
         onPress: close,
       }}

package/src/components/Text.tsx

@@ -6,25 +6,38 @@ import {
   BaseViewProps,
   TextStyles,
 } from '@codeleap/common'
-import { Text as NativeText } from 'react-native'
-
+import { Animated, StyleSheet, Text as NativeText } from 'react-native'
+import { MotiText as _MotiText, MotiProps } from 'moti'
+import { useAnimateColor } from '../utils/hooks'
 export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
   text?: string
   variants?: ComponentVariants<typeof TextStyles>['variants']
-} & BaseViewProps
+  animated?: boolean
+  colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
+} & BaseViewProps & MotiProps
+
+const MotiText = Animated.createAnimatedComponent(_MotiText)
 
 export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
-  const { variants = [], text, style, ...props } = textProps
+  const { variants = [], text, children, style, colorChangeConfig, ...props } = textProps
 
   const variantStyles = useDefaultComponentStyle('Text', {
     variants,
     rootElement: 'text',
   })
 
-  const styles = [variantStyles.text, style]
-  return (
-    <NativeText {...props} style={styles} ref={ref}>
-      {text}
-    </NativeText>
-  )
+  const styles = StyleSheet.flatten([variantStyles.text, style])
+
+  const animatedColor = useAnimateColor(styles.color, colorChangeConfig)
+
+  const Component = textProps.animated ? MotiText : NativeText
+
+  const colorStyle = { color: props.animated ? animatedColor : styles.color }
+
+  // @ts-ignore
+  return <Component {...props} style={[styles, colorStyle]} ref={ref}>
+    {text || children}
+  </Component>
+
 })
+

package/src/components/TextInput.tsx

@@ -45,7 +45,8 @@ export type TextInputProps =
     touchableWrapper?: boolean
     onPress?: () => void
     masking?: FormTypes.TextField['masking']
-    innerWrapperProps?: TouchableProps | ViewProps
+    innerWrapperProps?: ViewProps
+    wrapperProps?: TouchableProps | ViewProps
     onChangeMask?: TextInputMaskProps['onChangeText']
     required?:boolean
   }
@@ -62,6 +63,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     onBlur,
     variants,
     label,
+    wrapperProps,
     leftIcon,
     rightIcon,
     styles,
@@ -165,7 +167,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
       style={getStyles('wrapper')}
       debugName={debugName}
       onPress={handlePress}
-      {...innerWrapperProps}
+      {...wrapperProps}
     >
       <InputLabel
         label={label}

package/src/components/Touchable.tsx

@@ -8,23 +8,25 @@ import {
   useCodeleapContext,
   AnyFunction,
 } from '@codeleap/common'
-import { TouchableOpacity as NativeTouchable } from 'react-native'
+import { TouchableOpacity as NativeTouchable, Pressable, View } from 'react-native'
 
 import { createAnimatableComponent } from 'react-native-animatable'
 export type TouchableProps = Omit<
-  ComponentPropsWithoutRef<typeof NativeTouchable>,
+  ComponentPropsWithoutRef<typeof Pressable>,
   'onPress'
 > & {
   variants?: ComponentVariants<typeof ViewStyles>['variants']
   component?: any
-  ref?: React.Ref<NativeTouchable>
+  ref?: React.Ref<View>
   debugName: string
+  activeOpacity?: number
   debugComponent?: string
+  feedbackVariant?: 'opacity' | 'none' | 'highlight'
   onPress?: AnyFunction
 } & BaseViewProps
 
 export const Touchable: React.FC<TouchableProps> = forwardRef<
-  NativeTouchable,
+  View,
   TouchableProps
 >((touchableProps, ref) => {
   const {
@@ -32,8 +34,10 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     children,
     onPress,
     style,
+    activeOpacity = 0.5,
     debugName,
     debugComponent,
+    feedbackVariant = 'opacity',
     ...props
   } = touchableProps
 
@@ -41,24 +45,12 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     variants,
   })
 
-  const { logger: contextLogger } = useCodeleapContext() // NOTE for some reason this does not work in actual projects
-  let activeLogger = null
-  try {
-    // @ts-ignore
-    if (global?.logger) {
-      // @ts-ignore
-      activeLogger = global.logger
-    } else {
-      activeLogger = contextLogger
-    }
-  } catch (e) {
-    console.log('Error getting Touchable logger')
-  }
+  const { logger } = useCodeleapContext()
 
   const press = () => {
     if (!onPress) { throw { message: 'No onPress passed to touchable', touchableProps } }
 
-    activeLogger && activeLogger.log(
+    logger.log(
       `<${debugComponent || 'Touchable'}/>  pressed`,
       debugName || variants,
       'User interaction',
@@ -68,10 +60,29 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
 
   const styles = [variantStyles.wrapper, style]
 
+  function getFeedbackStyle(pressed:boolean, variant: TouchableProps['feedbackVariant']) {
+    switch (variant) {
+      case 'highlight':
+        return {
+          backgroundColor: pressed ? '#e0e0e0' : 'transparent',
+        }
+        break
+      case 'opacity':
+        return {
+          opacity: pressed ? activeOpacity : 1,
+        }
+      case 'none':
+        return {}
+    }
+  }
+
   return (
-    <NativeTouchable onPress={press} style={styles} {...props} ref={ref}>
+    <Pressable onPress={press} style={({ pressed }) => ([
+      getFeedbackStyle(pressed, feedbackVariant),
+      styles,
+    ])} {...props} ref={ref}>
       {children}
-    </NativeTouchable>
+    </Pressable>
   )
 })
 

package/src/components/View.tsx

@@ -32,7 +32,7 @@ export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeV
     responsiveVariants,
     variants,
   })
-  const Component = animated ? MotiView : component || NativeView
+  const Component = animated ? MotiView : (component || NativeView)
 
   return (
     <Component style={[variantStyles.wrapper, style]} ref={ref} {...props}>

package/src/components/_Modal/index.tsx

@@ -0,0 +1,162 @@
+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'
+
+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?: boolean
+}
+
+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 = true,
+    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