@codeleap/mobile 2.0.1 → 2.0.2

package/src/components/Pager/styles.ts

@@ -51,17 +51,22 @@ export function pagerAnimation(height, width, translate = 'X', transition = defa
 
 export const PagerStyles = {
   ...presets,
-  default: createPagerStyle((theme) => ({
-    page: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 0,
-    },
-  })),
+  default: createPagerStyle((theme) => {
+    const width = theme.values.width
+    const height = theme.values.height * 0.8
+    return {
+      ...pagerAnimation(height, width, 'X'),
+      page: {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+      },
+    }
+  }),
   horizontal: createPagerStyle((Theme) => {
 
     const width = Theme.values.width

package/src/components/RadioInput/index.tsx

@@ -47,7 +47,9 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   ...props
 }) => {
   return (
-    <Touchable onPress={select} style={style.itemWrapper} debugName={'Change radioButton value'}>
+    <Touchable onPress={select} style={style.itemWrapper} debugName={'Change radioButton value'} styles={{
+      feedback: style.buttonFeedback,
+    }}>
       <View style={[style.button, checked && style['button:checked']]}>
         <View
           style={[style.buttonMark, checked && style['buttonMark:checked']]}

package/src/components/RadioInput/styles.ts

@@ -1,7 +1,7 @@
 import {
   createDefaultVariantFactory, includePresets,
 } from '@codeleap/common'
-type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark'
+type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark' | 'buttonFeedback'
 
 type RadioGroupParts = 'label' | 'wrapper' | 'list'
 
@@ -37,6 +37,7 @@ export const RadioInputStyles = {
         position: 'relative',
         ...theme.spacing.marginRight(1),
       },
+      buttonFeedback: { type: 'opacity', value: 0.5 },
       buttonMark: {
         backgroundColor: theme.colors.primary,
         position: 'absolute',

package/src/components/SegmentedControl/index.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
 import { Scroll, ScrollProps } from '../Scroll'
 
-import { EasingFunction, StyleSheet } from 'react-native'
+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 { Text, TextProps } from '../Text'
 import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { View } from '../View'
 export * from './styles'
@@ -24,6 +24,8 @@ export type SegmentedControlProps<T = string> = ScrollProps & {
       duration?: number
       easing?: EasingFunction
     }
+    textProps?: Partial<PropsOf<typeof Text>>
+    touchableProps?: Partial<PropsOf<typeof Touchable>>
     styles?: StylesOf<SegmentedControlComposition>
     scrollProps?: any
     RenderButton?: (props: SegmentedControlProps & {
@@ -31,12 +33,14 @@ export type SegmentedControlProps<T = string> = ScrollProps & {
       textProps: PropsOf<typeof Text>
       option: {label: string; value: any}
     }) => ReactElement
-    RenderAnimatedView?: (props: SegmentedControlProps) => ReactElement
+    RenderAnimatedView?: (props: Partial<SegmentedControlProps>) => ReactElement
+    getItemWidth?: (item:{label: string; value: T }, idx: number, arr: {label: string; value: T }[]) => number
 }
 
 const defaultAnimation = {
+  type: 'timing',
   duration: 200,
-  // easing: Easing.linear,
+  easing: Easing.linear,
 }
 
 const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
@@ -49,13 +53,13 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     animation = {},
     variants = [],
     scrollProps = {},
+    getItemWidth = (i) => i.label.length * 20,
     RenderAnimatedView,
     RenderButton,
-
+    ...viewProps
   } = props
-  const { Theme } = useCodeleapContext()
 
-  const _animation = {
+  let _animation = {
     ...defaultAnimation, ...animation,
   }
 
@@ -75,14 +79,10 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
   }
 
   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 }
+    const sizes = options.map(getItemWidth)
+    const maxWidth = sizes.sort((a, b) => b - a)[0]
+
+    return { width: maxWidth }
   }, [options])
 
   const currentOptionIdx = options.findIndex(o => o.value === value) || 0
@@ -118,6 +118,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 
   const AnimatedView = RenderAnimatedView || View
   variantStyles = JSON.parse(JSON.stringify(variantStyles))
+  _animation = JSON.parse(JSON.stringify(_animation))
   return (
     <Scroll
       horizontal
@@ -128,14 +129,19 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
       ref={scrollRef}
     >
       <View style={variantStyles.wrapper}>
-        <AnimatedView {...props}
+        <AnimatedView
+          options={options}
+          styles={variantStyles}
+
           animated
           style={[variantStyles.selectedBubble, widthStyle]}
           animate={{
             translateX,
           }}
+          transition={{
+            translateX: _animation,
+          }}
 
-          transition={_animation}
         />
         {options.map((o, idx) => {
           const selected = value === o.value
@@ -145,13 +151,16 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
             debugName: `Segmented Control ${debugName}, option ${o.label}`,
             onPress: onPress(o.value, idx),
             style: [widthStyle, variantStyles.button],
+            ...props.touchableProps,
+
           }
 
-          const textProps = {
+          const textProps:TextProps = {
             text: o.label as string,
             colorChangeConfig: _animation,
             style: StyleSheet.flatten([variantStyles.text, selected && variantStyles['text:selected']]),
             animated: true,
+            ...props.textProps,
           }
 
           if (RenderButton) {
@@ -161,7 +170,11 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
           }
           return <Touchable
             {...touchableProps}
+            noFeedback={selected}
             key={touchableProps.key}
+            styles={{
+              feedback: variantStyles.buttonFeedback,
+            }}
           >
             <Text
 

package/src/components/SegmentedControl/styles.ts

@@ -1,4 +1,5 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { TouchableStylesGen } from '../Touchable'
 
 export type SegmentedControlStates = 'selected'
 
@@ -10,9 +11,20 @@ export type SegmentedControlComposition =
  'text' |
  `text:${SegmentedControlStates}` |
  'button' |
+ 'buttonFeedback' |
  `button:${SegmentedControlStates}`
 
-const createSegmentedControlStyle = createDefaultVariantFactory<SegmentedControlComposition>()
+export type SegmentedControlStylesGen<TCSS = any> =
+  StylesOf<
+    Exclude<SegmentedControlComposition, 'buttonFeedback'>
+  > & {
+    buttonFeedback?: TouchableStylesGen['feedback']
+  }
+
+const createSegmentedControlStyle = createDefaultVariantFactory<
+SegmentedControlComposition,
+SegmentedControlStylesGen
+>()
 
 const presets = includePresets((style) => createSegmentedControlStyle(() => ({ scrollContent: style })))
 
@@ -21,7 +33,10 @@ export const SegmentedControlStyles = {
   default: createSegmentedControlStyle((theme) => {
 
     return {
-
+      buttonFeedback: {
+        type: 'opacity',
+        value: 0.5,
+      },
       text: {
         color: theme.colors.text,
       },
@@ -34,21 +49,28 @@ export const SegmentedControlStyles = {
       },
       scrollContent: {
         // borderRadius: Theme.borderRadius.large,
+        ...theme.presets.row,
         ...theme.spacing.paddingHorizontal(2),
+        ...theme.presets.alignStretch,
       },
       button: {
         backgroundColor: 'transparent',
         ...theme.presets.alignCenter,
-        color: 'red',
-        ...theme.spacing.padding(2),
         ...theme.presets.justifyCenter,
+
+        borderRadius: theme.borderRadius.large,
+        ...theme.spacing.padding(1),
+        minHeight: '100%',
+
       },
       selectedBubble: {
         position: 'absolute',
         zIndex: -1,
         ...theme.spacing.padding(2),
-        maxHeight: 50,
-        minHeight: 50,
+        // maxHeight: 50,
+        // minHeight: 50,
+        top: 0,
+        bottom: 0,
         borderRadius: theme.borderRadius.large,
         backgroundColor: theme.colors.primary,
       },

package/src/components/Select/index.tsx

@@ -97,9 +97,10 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
           }}
           editable={false}
           touchableWrapper
+          onPress={close}
           wrapperProps={{
             debugName: 'Select',
-            onPress: close,
+
           }}
           pointerEvents={'none'}
           label={label}

package/src/components/Select/styles.ts

@@ -9,7 +9,8 @@ export type SelectComposition =
   `itemWrapper${ItemStates}` |
   `itemText${ItemStates}` |
   'scroll' |
-  'scrollContent'
+  'scrollContent' |
+  `itemIcon${ItemStates}`
 
 const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
 
@@ -24,10 +25,11 @@ export const SelectStyles = {
 
       },
       itemWrapper: {
-        ...theme.spacing.padding(2),
         ...theme.presets.row,
         ...theme.presets.justifySpaceBetween,
         ...theme.presets.alignCenter,
+        ...theme.spacing.padding(1.4),
+        height: 50,
       },
       'itemWrapper:selected': {
         backgroundColor: theme.colors.primary,
@@ -36,6 +38,14 @@ export const SelectStyles = {
         color: theme.colors.white,
 
       },
+      'itemIcon:selected': {
+        color: theme.colors.white,
+        ...theme.sized(3),
+      },
+      itemIcon: {
+        width: 0,
+        height: 0,
+      },
       list: {
         height: 'auto',
 

package/src/components/Switch/index.tsx

@@ -79,7 +79,7 @@ export const Switch = forwardRef<NativeSwitch, SwitchProps>(
           />
           <InputLabel label={label} style={getStyles('label')} />
         </View>
-        <FormError message={error.message} style={getStyles('error')} />
+        <FormError text={error.message} style={getStyles('error')} />
       </View>
     )
   },

package/src/components/Text/index.tsx

@@ -4,12 +4,14 @@ import {
   ComponentVariants,
   useDefaultComponentStyle,
   BaseViewProps,
-
+  TypeGuards,
+  useState,
 } from '@codeleap/common'
-import { Animated, StyleSheet, Text as NativeText } from 'react-native'
+import { Animated, GestureResponderEvent, Platform, StyleSheet, Text as NativeText } from 'react-native'
 import { MotiText as _MotiText, MotiProps } from 'moti'
-import { useAnimateColor } from '../../utils'
+import { useAnimateColor, usePressableFeedback } from '../../utils'
 import { TextStyles } from './styles'
+import { View } from '../View'
 
 export * from './styles'
 
@@ -18,6 +20,7 @@ export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
   variants?: ComponentVariants<typeof TextStyles>['variants']
   animated?: boolean
   colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
+  debugName?: string
 } & BaseViewProps & MotiProps
 
 const MotiText = Animated.createAnimatedComponent(_MotiText)
@@ -25,8 +28,21 @@ const MotiText = Animated.createAnimatedComponent(_MotiText)
 export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
   const { variants = [], text, children, style, colorChangeConfig, ...props } = textProps
 
-  const variantStyles = useDefaultComponentStyle('Text', {
+  const pressPolyfillEnabled = Platform.OS === 'android' && !!props.onPress
+
+  const [pressed, setPressed] = useState(false)
+  const handlePress = (pressed) => {
+    if (!pressPolyfillEnabled) return
+    return () => {
+      if (props.onPress) {
+        setPressed(pressed)
+
+      }
+    }
+  }
+  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextStyles>('u:Text', {
     variants,
+    transform: StyleSheet.flatten,
     rootElement: 'text',
   })
 
@@ -34,14 +50,53 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
 
   const animatedColor = useAnimateColor(styles.color, colorChangeConfig)
 
+  if (!!text && !TypeGuards.isString(text)) return <>{text}</>
+
   const Component = textProps.animated ? MotiText : NativeText
 
   const colorStyle = { color: props.animated ? animatedColor : styles.color }
 
+  const { getFeedbackStyle } = usePressableFeedback(styles, {
+    disabled: !pressPolyfillEnabled,
+    feedbackConfig: variantStyles.pressFeedback,
+    hightlightPropertyIn: 'color',
+    hightlightPropertyOut: 'backgroundColor',
+  })
+  const feedbackStyle = pressPolyfillEnabled ? getFeedbackStyle(pressed) : undefined
+
+  return <Component {...props}
+    onPressIn={handlePress(true)} onPressOut={handlePress(false)}
+    style={[styles, colorStyle, feedbackStyle]}
+    // @ts-ignore
+    ref={ref}
+  >
+    {text}
+  </Component>
+
   // @ts-ignore
   return <Component {...props} style={[styles, colorStyle]} ref={ref}>
-    {text || children}
+    {text}
+    {children}
   </Component>
 
 })
 
+// const childArr = React.Children.toArray([
+//   text,
+//   children,
+// ])
+
+// return <View style={[styles, colorStyle]}>
+//   {
+//     childArr.map((child) => {
+//       if (TypeGuards.isString(child)) {
+//         // @ts-ignore
+//         return <Component {...props} ref={ref}>
+//           {child}
+//         </Component>
+
+//       }
+//       return child
+//     })
+//   }
+// </View>

package/src/components/Text/styles.ts

@@ -1,19 +1,35 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { assignTextStyle, createDefaultVariantFactory, includePresets, shadeColor, StylesOf } from '@codeleap/common'
+import { FeedbackConfig } from '../../utils'
 
-export type TextComposition = 'text'
-const createTextStyle = createDefaultVariantFactory<TextComposition>()
+export type TextComposition = 'text' | 'touchFeedback'
+
+export type TextStylesGen<TCSS = any> = StylesOf<'text', TCSS> & {
+  'pressFeedback'?: FeedbackConfig
+}
+
+const createTextStyle = createDefaultVariantFactory<
+  TextComposition, TextStylesGen
+>()
 
 const presets = includePresets((styles) => createTextStyle(() => ({ text: styles })),
 )
 
 export const TextStyles = {
   ...presets,
-  default: createTextStyle((theme) => ({
-    text: {
-      fontFamily: theme.typography.fontFamily,
-      ...assignTextStyle('p1')(theme).text,
-    },
-  })),
+  default: createTextStyle((theme) => {
+    const defaultStyle = assignTextStyle('p1')(theme).text
+    return {
+      text: {
+        fontFamily: theme.typography.fontFamily,
+        ...defaultStyle,
+      },
+      pressFeedback: {
+        type: 'highlight',
+        brightness: 0,
+        shiftOpacity: 0.3,
+      },
+    }
+  }),
   h1: assignTextStyle('h1'),
   h2: assignTextStyle('h2'),
   h3: assignTextStyle('h3'),

package/src/components/TextInput/index.tsx

@@ -5,12 +5,14 @@ import {
   getNestedStylesByKey,
   IconPlaceholder,
 
+  TypeGuards,
+
   useBooleanToggle,
   useDefaultComponentStyle,
   useValidate,
 } from '@codeleap/common'
 import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { Text } from '../Text'
+import { Text, TextProps } from '../Text'
 import { View, ViewProps } from '../View'
 import { StylesOf } from '../../types'
 import { Icon } from '../Icon'
@@ -34,6 +36,11 @@ type IconProp = { name: IconPlaceholder; action?: () => void }
 
 type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
 
+type SubtitleProps = {
+  errorProps: TextProps
+  styles: Record<'wrapper'|'error'|'subtitle', any>
+}
+
 export type TextInputProps =
   Partial<TextInputMaskProps> &
   ComponentVariants<typeof TextInputStyles> &
@@ -54,6 +61,7 @@ export type TextInputProps =
     password?: boolean
     visibilityToggle?: boolean
     touchableWrapper?: boolean
+    subtitle?: string | ((props: SubtitleProps) => React.ReactElement)
     onPress?: () => void
     masking?: FormTypes.TextField['masking']
     innerWrapperProps?: ViewProps
@@ -82,6 +90,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     visibilityToggle,
     innerWrapperProps,
     masking = null,
+    subtitle = '',
     onChangeMask,
     debugName,
     required = false,
@@ -144,7 +153,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
       isFocused ? variantStyles[key + ':focus'] : {},
       showError ? variantStyles[key + ':error'] : {},
     ]
-    return requestedStyles
+    return StyleSheet.flatten(requestedStyles)
   }
 
   function handlePress() {
@@ -161,6 +170,19 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     debugName: `${debugName} toggle visibility`,
   } : {}
 
+  const subtitleStyles = {
+    error: getStyles('error'),
+    wrapper: getStyles('subtitleWrapper'),
+    subtitle: getStyles('subtitle'),
+
+  }
+  const errorProps = { text: error.message, style: subtitleStyles.error }
+
+  const subtitleContent = TypeGuards.isFunction(subtitle) ? subtitle({ styles: subtitleStyles, errorProps }) : <View style={subtitleStyles.wrapper}>
+    <FormError {...errorProps}/>
+    {TypeGuards.isString(subtitle) ? <Text text={subtitle} style={subtitleStyles.subtitle}/> : (subtitle || null)}
+  </View>
+
   return (
     <Touchable
       style={getStyles('wrapper')}
@@ -168,6 +190,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
       onPress={handlePress}
       {...wrapperProps}
       android_ripple={null}
+      noFeedback
     >
       <InputLabel
         label={label}
@@ -214,17 +237,27 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
         />
 
       </View>
-      <FormError message={error.message} style={getStyles('error')} />
+      {subtitleContent}
     </Touchable>
   )
 })
 
-export const FormError = ({ message, ...props }) => {
-  if (['number', 'string', 'undefined'].includes(typeof message)) {
+export const FormError:React.FC<TextProps> = ({ text, ...props }) => {
+  let message = text
+  if (TypeGuards.isNumber(message)) {
+    message = message.toString()
+  }
+  if (typeof message === 'undefined') {
+    message = ''
+  }
+
+  if (TypeGuards.isString(message)) {
     const text = message ? `${message.charAt(0).toUpperCase() + message.slice(1)}` : ' '
-    return <Text text={text} variants={['p2', 'marginTop:1']} {...props} />
+    return <Text text={text} {...props} />
   }
-  return message
+  return <>
+    {text}
+  </>
 }
 
 type InputIconProps = {
@@ -237,7 +270,8 @@ type InputIconProps = {
 export const InputIcon:React.FC<InputIconProps> = ({ styles, commonStyles, isFocused, showError, ...props }) => {
   if (!props.icon) return null
 
-  function getStyles(key: ActionIconParts | '') {
+  function getStyles(k: ActionIconParts | '') {
+    let key = k
     if (key === 'icon') key = ''
     const requestedStyles = [
       commonStyles[key],
@@ -247,13 +281,14 @@ export const InputIcon:React.FC<InputIconProps> = ({ styles, commonStyles, isFoc
       isFocused ? styles[key + ':focus'] : {},
       showError ? styles[key + ':error'] : {},
     ]
+
     return StyleSheet.flatten(requestedStyles)
   }
   const iconStyles = {
     icon: getStyles('icon'),
     touchablePressable: getStyles('touchablePressable'),
     touchableWrapper: getStyles('touchableWrapper'),
-    touchableRipple: getStyles('touchableRipple'),
+    touchableFeedback: getStyles('touchableFeedback'),
   }
 
   return <ActionIcon

package/src/components/TextInput/styles.ts

@@ -14,6 +14,8 @@ type TextInputParts =
   | 'label'
   | 'innerWrapper'
   | 'error'
+  | 'subtitle'
+  | 'subtitleWrapper'
   | 'placeholder'
   | 'selection'
   | 'requiredAsterisk'
@@ -74,16 +76,24 @@ export const TextInputStyles = {
       color: theme.colors.primary,
     },
     leftIconTouchableWrapper: {
-      ...theme.spacing.marginRight(1),
+      // ...theme.spacing.marginRight(0.5),
     },
     rightIconTouchableWrapper: {
-      ...theme.spacing.marginLeft(1),
+      // ...theme.spacing.marginLeft(0.5),
     },
     error: {
       color: theme.colors.negative,
-      ...theme.spacing.marginTop(0.5),
-    },
 
+    },
+    subtitleWrapper: {
+      ...theme.spacing.marginTop(0.2),
+      ...theme.presets.row,
+      ...theme.presets.justifySpaceBetween,
+      ...theme.presets.alignCenter,
+    },
+    subtitle: {
+      ...theme.presets.textRight,
+    },
     'label:error': {
       color: theme.colors.negative,
     },