@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/TextInput/styles.ts

@@ -1,127 +1,13 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { ActionIconParts } from '../ActionIcon'
-import { InputLabelComposition } from '../InputLabel'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputBaseComposition, InputBaseStates, InputBaseParts } from '../InputBase'
 
-export type IconParts = Exclude<ActionIconParts, 'icon' | 'icon:disabled'>
-type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
 
-export type InputIconComposition = `${InputIcons}${Capitalize<IconParts>}`
-| InputIcons
+type TextInputParts =  InputBaseParts | 'input'  | 'placeholder' | 'selection'
+export type TextInputStates = InputBaseStates | 'multiline' | 'hasMultipleLines' | 'pressable'
 
-type TextInputParts =
-  | 'wrapper'
-  | InputIconComposition
-  | 'textField'
-  | 'innerWrapper'
-  | 'error'
-  | 'subtitle'
-  | 'subtitleWrapper'
-  | 'placeholder'
-  | 'selection'
-  | `label${Capitalize<InputLabelComposition>}`
-
-export type TextInputComposition =
-  | `${TextInputParts}:error`
-  | `${TextInputParts}:focus`
-  | TextInputParts
+export type TextInputComposition =  `${TextInputParts}:${TextInputStates}` | TextInputParts
 
 const createTextInputStyle =
   createDefaultVariantFactory<TextInputComposition>()
 
-const presets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))
-
-export const TextInputStyles = {
-  ...presets,
-  default: createTextInputStyle((theme) => ({
-    textField: {
-      ...theme.spacing.padding(0),
-      ...theme.spacing.paddingHorizontal(1),
-      ...assignTextStyle('p1')(theme).text,
-      minWidth: 1,
-      backgroundColor: 'transparent',
-      flex: 1,
-    },
-    placeholder: {
-      color: theme.colors.lightGray,
-    },
-    selection: {
-      color: theme.colors.primary,
-    },
-    wrapper: {
-      display: 'flex',
-      flexDirection: 'column',
-
-    },
-    innerWrapper: {
-      ...theme.spacing.paddingVertical(0.5),
-      ...theme.spacing.paddingHorizontal(1),
-      ...theme.presets.row,
-      ...theme.border.neutral(1),
-      display: 'flex',
-      alignItems: 'center',
-    },
-
-    labelWrapper: {
-      ...theme.spacing.marginBottom(1),
-
-    },
-    labelText: {
-      ...assignTextStyle('h5')(theme).text,
-    },
-    'icon': {
-      color: theme.colors.neutral,
-    },
-    'icon:error': {
-      color: theme.colors.negative,
-    },
-    'icon:focus': {
-      color: theme.colors.primary,
-    },
-    leftIconTouchableWrapper: {
-      // ...theme.spacing.marginRight(0.5),
-    },
-    rightIconTouchableWrapper: {
-      // ...theme.spacing.marginLeft(0.5),
-    },
-    error: {
-      color: theme.colors.negative,
-
-    },
-    subtitleWrapper: {
-      ...theme.spacing.marginTop(0.2),
-      ...theme.presets.row,
-      ...theme.presets.justifySpaceBetween,
-      ...theme.presets.alignCenter,
-    },
-    subtitle: {
-      ...theme.presets.textRight,
-    },
-    'labelText:error': {
-      color: theme.colors.negative,
-    },
-
-    'innerWrapper:error': {
-      ...theme.border.negative(1),
-    },
-    'innerWrapper:focus': {
-      ...theme.border.primary(1),
-    },
-
-  })),
-  line: createTextInputStyle((theme) => ({
-    innerWrapper: {
-      ...theme.border.neutral({ width: 1, directions: ['bottom'] }),
-    },
-  })),
-  box: createTextInputStyle((theme) => ({
-    innerWrapper: {
-      ...theme.border.neutral(1),
-    },
-  })),
-  pill: createTextInputStyle((theme) => ({
-    innerWrapper: {
-      ...theme.border.neutral(1),
-      borderRadius: 15,
-    },
-  })),
-}
+export const TextInputPresets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))

package/src/components/Touchable/index.tsx

@@ -10,19 +10,18 @@ import {
   TypeGuards,
   onMount,
 } from '@codeleap/common'
-import { Pressable, StyleSheet, View as RNView } from 'react-native'
-
-import { createAnimatableComponent } from 'react-native-animatable'
-import { TouchableComposition, TouchableStyles } from './styles'
+import { Pressable, StyleSheet, View as RNView, Insets, Platform } from 'react-native'
+import { TouchableComposition, TouchablePresets } from './styles'
 import { StylesOf } from '../../types'
 import { View } from '../View'
 import { usePressableFeedback } from '../../utils'
+import { PressableRipple } from '../../modules/PressableRipple'
 export type TouchableProps = React.PropsWithChildren<
   Omit<
     ComponentPropsWithoutRef<typeof Pressable>,
     'onPress'|'children'
   > & {
-    variants?: ComponentVariants<typeof TouchableStyles>['variants']
+    variants?: ComponentVariants<typeof TouchablePresets>['variants']
     component?: any
     ref?: React.Ref<RNView>
     debugName: string
@@ -33,6 +32,8 @@ export type TouchableProps = React.PropsWithChildren<
     debounce?: number
     leadingDebounce?: boolean
     styles?: StylesOf<TouchableComposition>
+    setPressed?: (param: boolean) => void
+    rippleDisabled?: boolean
 } & BaseViewProps
 >
 export * from './styles'
@@ -52,21 +53,22 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     leadingDebounce,
     noFeedback = false,
     styles,
+    setPressed,
+    rippleDisabled = false,
     ...props
   } = touchableProps
 
-  
   const pressed = React.useRef(!!leadingDebounce)
 
   onMount(() => {
-    if(!!leadingDebounce && !!debounce){
+    if (!!leadingDebounce && !!debounce) {
       setTimeout(() => {
         pressed.current = false
       }, debounce)
     }
   })
 
-  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchableStyles>('u:Touchable', {
+  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchablePresets>('u:Touchable', {
     variants,
     transform: StyleSheet.flatten,
     rootElement: 'wrapper',
@@ -94,9 +96,11 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
       if (pressed.current) {
         return
       }
+      setPressed?.(true)
       pressed.current = true
       _onPress()
       setTimeout(() => {
+        setPressed?.(false)
         pressed.current = false
       }, debounce)
     } else {
@@ -118,18 +122,23 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
 
   const Wrapper = View
 
-  const { wrapperStyle, pressableStyle } = React.useMemo(() => {
+  const { radiusStyle, wrapperStyle, pressableStyle } = React.useMemo(() => {
     const wrapperkeys = [
       'margin',
       'alignSelf',
-      'border',
       'top!',
       'left!',
       'right!',
       'bottom!',
       'position!',
+      'transform!',
       // 'flex!',
     ]
+
+    const radiusKey = [
+      'Radius#',
+    ]
+
     const sharedKeys = [
       'width!',
       'height!',
@@ -139,8 +148,12 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
 
     const wrapperStyle = {} as any
     const pressableStyle = {} as any
+    const radiusStyle = {} as any
+
     const match = (k, key) => {
-      if (k.endsWith('!')) {
+      if (k.endsWith('#')) {
+        return key.includes(k.substring(0, k.length - 1))
+      } else if (k.endsWith('!')) {
         return key === k.substring(0, k.length - 1)
       } else {
 
@@ -148,6 +161,12 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
       }
     }
     Object.entries(_styles).forEach(([key, value]) => {
+      if (radiusKey.some(k => match(k, key))) {
+        wrapperStyle[key] = value
+        pressableStyle[key] = value
+        radiusStyle[key] = value
+        return
+      }
 
       if (wrapperkeys.some(k => match(k, key))) {
         wrapperStyle[key] = value
@@ -163,30 +182,58 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
       pressableStyle.width = '100%'
       pressableStyle.height = '100%'
     }
-    wrapperStyle.overflow = 'hidden'
-    // wrapperStyle.flexDirection = 'row'
-    // wrapperStyle.alignItems = 'stretch'
+    wrapperStyle.overflow = 'visible'
 
     return {
       wrapperStyle,
       pressableStyle,
+      radiusStyle,
     }
   }, [JSON.stringify(_styles)])
 
+  const hitSlop = TypeGuards.isNumber(props.hitSlop) ? {
+    top: props.hitSlop,
+    left: props.hitSlop,
+    right: props.hitSlop,
+    bottom: props.hitSlop,
+  } as Insets : props.hitSlop
+
+  const disableRipple = disableFeedback || rippleDisabled || Platform.OS !== 'android'
+
   return (
-    <Wrapper style={[wrapperStyle]}>
-      <Pressable onPress={press} style={({ pressed }) => ([
-
-        // defaultPressableStyles,
-        pressableStyle,
-        // !!rippleConfig && ripplePressableStyles,
-        getFeedbackStyle(pressed),
-        variantStyles.pressable,
-      ])} android_ripple={rippleConfig} {...props} ref={ref}>
-        {children}
-      </Pressable>
+    <Wrapper style={[wrapperStyle]} hitSlop={hitSlop}>
+      {!disableRipple ? (
+        <PressableRipple
+          onPress={press}
+          style={[
+            pressableStyle,
+            variantStyles.pressable,
+          ]}
+          {...props}
+          rippleFades={false}
+          rippleDuration={350}
+          rippleOpacity={0.1}
+          {...rippleConfig}
+          radiusStyles={radiusStyle}
+          // @ts-ignore
+          ref={ref}
+        >
+          {children}
+        </PressableRipple>
+      ) : (
+        <Pressable
+          onPress={press}
+          style={({ pressed }) => ([
+            pressableStyle,
+            getFeedbackStyle(pressed),
+            variantStyles.pressable,
+          ])}
+          {...props}
+          ref={ref}
+        >
+          {children}
+        </Pressable>
+      )}
     </Wrapper>
   )
 })
-
-export const AnimatedTouchable = createAnimatableComponent(Touchable) as unknown as typeof Touchable

package/src/components/Touchable/styles.ts

@@ -13,16 +13,5 @@ const createTouchableStyle = createDefaultVariantFactory<
   TouchableStylesGen
 >()
 
-const presets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })),
-)
+export const TouchablePresets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })))
 
-export const TouchableStyles = {
-  ...presets,
-  default: createTouchableStyle((t) => ({
-    feedback: {
-      type: 'opacity',
-      value: 0.5,
-    },
-  })),
-
-}

package/src/components/View/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as Animatable from 'react-native-animatable'
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
 import {
   ComponentVariants,
@@ -9,29 +8,29 @@ import {
   useCodeleapContext,
   useMemo,
 } from '@codeleap/common'
-import { View as NativeView } from 'react-native'
-import { MotiView, MotiProps } from 'moti'
+import { View as NativeView, ViewProps as RNViewProps } from 'react-native'
 import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
 import {TransitionConfig} from '../../types'
 import Animated from 'react-native-reanimated'
 export * from './styles'
 
-type MotiViewProps =  Omit< Partial<MotiProps>, 'transition'|'children'>
+
 
 type NativeViewProps =Omit<ComponentPropsWithoutRef<typeof NativeView>, 'children'>
 
+export type ViewRefType = NativeView | React.ForwardedRef<NativeView>
 export type ViewProps = React.PropsWithChildren<{
-  ref?: any
+  ref?: ViewRefType
   component?: any
   animated?: boolean
   keyboardAware?: GetKeyboardAwarePropsOptions
   transition?: Partial<TransitionConfig>
 } &
-  NativeViewProps & ComponentVariants<typeof ViewStyles>   & BaseViewProps & MotiViewProps
+  NativeViewProps & ComponentVariants<typeof ViewStyles>   & BaseViewProps
 >
 
 
-export const View: React.FC<ViewProps> = forwardRef<NativeView,ViewProps>((viewProps, ref) => {
+export const View  = forwardRef<NativeView,ViewProps>((viewProps, ref) => {
   const {
     responsiveVariants = {},
     variants = [],
@@ -47,28 +46,14 @@ export const View: React.FC<ViewProps> = forwardRef<NativeView,ViewProps>((viewP
     responsiveVariants,
     variants,
   })
-  const Component = animated ? MotiView : (component || NativeView)
-  const keyboard = useKeyboardAwareView()
-  const _props = keyboard.getKeyboardAwareProps(
-    {
-      style: [variantStyles.wrapper, style], ref: ref, ...props,
-    },
-    {
-      adapt: 'paddingBottom',
-      baseStyleProp: 'style',
-
-      enabled: false,
-      ...keyboardAware,
-    },
-  )
+  const Component = animated ? Animated.View  : component || NativeView
+
   return (
-    <Component {..._props}>
+    <Component  {...props} style={[variantStyles.wrapper, style]}>
       {children}
     </Component>
   )
-})
-
-export const AnimatedView = Animated.createAnimatedComponent(View)
+}) as unknown as React.FC<ViewProps>
 
 
 type GapProps = ViewProps & {
@@ -77,7 +62,7 @@ type GapProps = ViewProps & {
   defaultProps?: any
 }
 
-export const Gap:React.FC<GapProps> = ({ children, value, defaultProps = {}, ...props }) => {
+export const Gap:React.FC<React.PropsWithChildren<GapProps>> = ({ children, value, defaultProps = {}, ...props }) => {
   const { Theme } = useCodeleapContext()
   const childArr = React.Children.toArray(children)
 

package/src/components/View/styles.ts

@@ -4,21 +4,5 @@ export type ViewComposition = 'wrapper'
 
 const createViewStyle = createDefaultVariantFactory<ViewComposition>()
 
-const presets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })),
-)
+export const ViewPresets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })))
 
-export const ViewStyles = {
-  ...presets,
-  default: createViewStyle((t) => ({
-    // wrapper: {
-    //   display: 'flex',
-    // },
-  })),
-  separator: createViewStyle((t) => ({
-    wrapper: {
-      width: '100%',
-      height: t.values.pixel,
-      backgroundColor: t.colors.borders,
-    },
-  })),
-}

package/src/components/components.ts

@@ -1,5 +1,4 @@
 export * from './View'
-export * from './Animated'
 export * from './Icon'
 export * from './Touchable'
 export * from './Text'
@@ -28,13 +27,18 @@ export * from './Pager'
 export * from './EmptyPlaceholder'
 export * from './Backdrop'
 export * from './Drawer'
-export * from './MultiSelect'
-export * from './AutoComplete'
+export * from './Autocomplete'
+
 export * from './Grid'
 export * from './InputLabel'
 export * from './LoadingOverlay'
 export * from './ActionIcon'
-
-
+export * from './InputBase'
+export * from './DatePickerModal'
+export * from './RefreshControl'
+export * from './Avatar'
+export * from './AvatarGroup'
+export * from './NumberIncrement'
+export * from './Badge'
 
 export * from './defaultStyles'

package/src/components/defaultStyles.ts

@@ -1,64 +1,77 @@
-import { ViewStyles } from './View'
-import { IconStyles } from './Icon'
-import { TouchableStyles } from './Touchable'
-import { TextStyles } from './Text'
-import { ImageStyles } from './Image'
-import { CheckboxStyles } from './Checkbox'
-import { TextInputStyles } from './TextInput'
-import { RadioInputStyles } from './RadioInput'
-import { SwitchStyles } from './Switch'
-import { SelectStyles } from './Select'
-import { FileInputStyles } from './FileInput'
-import { SliderStyles } from './Slider'
-import { SegmentedControlStyles } from './SegmentedControl'
-import { ActivityIndicatorStyles } from './ActivityIndicator'
-import { ButtonStyles } from './Button'
-import { ContentViewStyles } from './ContentView'
-import { ModalStyles } from './Modal'
-import { EmptyPlaceholderStyles } from './EmptyPlaceholder'
-import { BackdropStyles } from './Backdrop'
-import { PagerStyles } from './Pager'
-import { CalendarStyles } from './Calendar'
-import { DrawerStyles } from './Drawer/styles'
-import { ListStyles, PaginationIndicatorStyles } from './List'
-import { AutoCompleteStyles } from './AutoComplete'
-import { MultiSelectStyles } from './MultiSelect'
-import { ScrollStyles } from './Scroll'
-import { ActionIconStyles } from './ActionIcon'
-import { GridStyles } from './Grid'
-import { InputLabelStyles } from './InputLabel'
-import { LoadingOverlayStyles } from './LoadingOverlay'
+import { ViewPresets } from './View'
+import { IconPresets } from './Icon'
+import { TouchablePresets } from './Touchable'
+import { TextPresets } from './Text'
+import { ImagePresets } from './Image'
+import { CheckboxPresets } from './Checkbox'
+import { TextInputPresets } from './TextInput'
+import { RadioInputPresets } from './RadioInput'
+import { SwitchPresets } from './Switch'
+import { SelectPresets } from './Select'
+import { FileInputPresets } from './FileInput'
+import { SliderPresets } from './Slider'
+import { SegmentedControlPresets } from './SegmentedControl'
+import { ActivityIndicatorPresets } from './ActivityIndicator'
+import { ButtonPresets } from './Button'
+import { ContentViewPresets } from './ContentView'
+import { ModalPresets } from './Modal'
+import { EmptyPlaceholderPresets } from './EmptyPlaceholder'
+import { BackdropPresets } from './Backdrop'
+import { PagerPresets } from './Pager'
+import { CalendarPresets } from './Calendar'
+import { DrawerPresets } from './Drawer/styles'
+import { ListPresets, PaginationIndicatorPresets } from './List'
+
+import { ScrollPresets } from './Scroll'
+import { ActionIconPresets } from './ActionIcon'
+import { GridPresets } from './Grid'
+import { InputLabelPresets } from './InputLabel'
+import { LoadingOverlayPresets } from './LoadingOverlay'
+import { InputBasePresets } from './InputBase'
+import { RefreshControlPresets } from './RefreshControl'
+import { AvatarPresets } from './Avatar'
+import { AvatarGroupPresets } from './AvatarGroup'
+import { SectionsPresets } from './Sections'
+import { DatePickerModalPresets } from './DatePickerModal'
+import { NumberIncrementPresets } from './NumberIncrement'
+import { BadgePresets } from './Badge'
 
 export const defaultStyles = {
-  View: ViewStyles,
-  Icon: IconStyles,
-  Touchable: TouchableStyles,
-  Text: TextStyles,
-  Image: ImageStyles,
-  Checkbox: CheckboxStyles,
-  TextInput: TextInputStyles,
-  RadioInput: RadioInputStyles,
-  Switch: SwitchStyles,
-  Select: SelectStyles,
-  FileInput: FileInputStyles,
-  List: ListStyles,
-  Slider: SliderStyles,
-  SegmentedControl: SegmentedControlStyles,
-  ActivityIndicator: ActivityIndicatorStyles,
-  Button: ButtonStyles,
-  ContentView: ContentViewStyles,
-  Modal: ModalStyles,
-  EmptyPlaceholder: EmptyPlaceholderStyles,
-  Backdrop: BackdropStyles,
-  Calendar: CalendarStyles,
-  Pager: PagerStyles,
-  Drawer: DrawerStyles,
-  AutoComplete: AutoCompleteStyles,
-  MultiSelect: MultiSelectStyles,
-  Scroll: ScrollStyles,
-  PaginationIndicator: PaginationIndicatorStyles,
-  ActionIcon: ActionIconStyles,
-  Grid: GridStyles,
-  LoadingOverlay: LoadingOverlayStyles,
-  InputLabel: InputLabelStyles,
+  View: ViewPresets,
+  Icon: IconPresets,
+  Avatar: AvatarPresets,
+  AvatarGroup: AvatarGroupPresets,
+  Touchable: TouchablePresets,
+  Text: TextPresets,
+  Image: ImagePresets,
+  Checkbox: CheckboxPresets,
+  TextInput: TextInputPresets,
+  RadioInput: RadioInputPresets,
+  Switch: SwitchPresets,
+  Select: SelectPresets,
+  FileInput: FileInputPresets,
+  List: ListPresets,
+  Slider: SliderPresets,
+  SegmentedControl: SegmentedControlPresets,
+  ActivityIndicator: ActivityIndicatorPresets,
+  Button: ButtonPresets,
+  ContentView: ContentViewPresets,
+  Modal: ModalPresets,
+  EmptyPlaceholder: EmptyPlaceholderPresets,
+  Backdrop: BackdropPresets,
+  Calendar: CalendarPresets,
+  Pager: PagerPresets,
+  Drawer: DrawerPresets,
+  Scroll: ScrollPresets,
+  Sections: SectionsPresets,
+  ActionIcon: ActionIconPresets,
+  Grid: GridPresets,
+  LoadingOverlay: LoadingOverlayPresets,
+  InputLabel: InputLabelPresets,
+  InputBase: InputBasePresets,
+  DatePickerModal: DatePickerModalPresets,
+  RefreshControl: RefreshControlPresets,
+  PaginationIndicator: PaginationIndicatorPresets,
+  NumberIncrement: NumberIncrementPresets,
+  Badge: BadgePresets,
 }

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from './components/components'
-export { default as posed } from 'react-native-pose'
 export { Linking } from 'react-native'
 export * from './utils'
 import uuid from 'react-native-uuid'

package/src/modules/PressableRipple/index.ts

@@ -0,0 +1,5 @@
+import PressableRipple from './ripple'
+
+export {
+  PressableRipple
+}