@codeleap/mobile 3.24.3 → 4.0.0

package/src/components/Image/types.ts

@@ -0,0 +1,18 @@
+import { LoadingOverlayProps } from '../LoadingOverlay'
+import FastImage, { Source } from 'react-native-fast-image'
+import { ImageProps as RNImageProps } from 'react-native'
+import { ImageComposition } from './styles'
+import { StyledProp } from '@codeleap/styles'
+import { FormTypes } from '@codeleap/common'
+
+export type ImageProps =
+  Omit<RNImageProps, 'source' | 'style'> &
+  {
+    fast?: boolean
+    style?: StyledProp<ImageComposition>
+    source: Source | FormTypes.AnyFile
+    resizeMode?: keyof typeof FastImage.resizeMode
+    spotlight?: string
+    maintainAspectRatio?: boolean
+    withLoadingOverlay?: boolean | ((props: LoadingOverlayProps) => JSX.Element)
+  }

package/src/components/ImageView/Spotlight.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState } from 'react'
 import { deepEqual, onUpdate, ReactState, TypeGuards, usePrevious, useUnmount } from '@codeleap/common'
-
 import uuid from 'react-native-uuid'
 import { ImageView, ImageViewProps } from './component'
 import { ImageProps } from '../Image'
@@ -166,9 +165,7 @@ export type SpotlightProps = {
 } & ImageViewProps
 
 const DefaultFooterComponent: SpootlightFooterComponent = ({ imageIndex, imagesLength }) => (
-  <View variants={['marginBottom:5', 'alignCenter']}>
-    <Text text={imageIndex + 1 + '/' + imagesLength} />
-  </View>
+  <View><Text text={imageIndex + 1 + '/' + imagesLength} /></View>
 )
 
 export const Spotlight = (props: SpotlightProps) => {

package/src/components/ImageView/component.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-
+import React from 'react'
 import { onUpdate, PropsOf } from '@codeleap/common'
 import _ImageView from 'react-native-image-viewing'
 import { StatusBar } from 'react-native'

package/src/components/InputBase/index.tsx

@@ -16,11 +16,12 @@ export const InputBaseDefaultOrder: InputBaseProps['order'] = [
   'innerWrapper',
   'error',
 ]
+
 const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
   return <>{props.children}</>
 }
 
-export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
+export const InputBase = (props: InputBaseProps) => {
   const {
     children,
     error = null,
@@ -28,69 +29,67 @@ export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
     description = null,
     leftIcon = null,
     rightIcon = null,
-    styles,
-    wrapper,
+    wrapper: WrapperComponent,
     debugName,
-    innerWrapper,
+    innerWrapper: InnerWrapperComponent,
     focused,
     innerWrapperProps = {},
     wrapperProps = {},
-    disabled = false,
+    disabled,
     order = InputBaseDefaultOrder,
     style,
-    labelAsRow = false,
-    hideErrorMessage = false,
+    labelAsRow,
+    hideErrorMessage,
     ...otherProps
-  } = props
-
-  const WrapperComponent = wrapper || View
-  const InnerWrapperComponent = innerWrapper || View
+  } = {
+    ...InputBase.defaultProps,
+    ...props,
+  }
 
-  const _styles = useInputBaseStyles(props)
+  const styles = useInputBaseStyles(props)
 
   const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
     // @ts-ignore
-    styles: _styles.leftIconStyles,
+    style: styles.leftIconStyles,
     debugName: `${debugName} left icon`,
     dismissKeyboard: false,
   })
 
   const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
-
     // @ts-ignore
-    styles: _styles.rightIconStyles,
+    style: styles.rightIconStyles,
     debugName: `${debugName} right icon`,
     dismissKeyboard: false,
   })
 
-  const _label = TypeGuards.isString(label) ? <Text text={label} style={_styles.labelStyle} /> : label
+  const _label = TypeGuards.isString(label) ? <Text text={label} style={styles.labelStyle} /> : label
 
-  const _error = TypeGuards.isString(error) ? <Text text={error} style={_styles.errorStyle} /> : error
+  const _error = TypeGuards.isString(error) ? <Text text={error} style={styles.errorStyle} /> : error
 
-  const _description = TypeGuards.isString(description) ? <Text text={description} style={_styles.descriptionStyle} /> : description
+  const _description = TypeGuards.isString(description) ? <Text text={description} style={styles.descriptionStyle} /> : description
 
   const parts = {
-    label: labelAsRow ? <View style={_styles.labelRowStyle}>
+    label: labelAsRow ? <View style={styles.labelRowStyle}>
       {_label}
       {_description}
     </View> : _label,
     description: labelAsRow ? null : _description,
     innerWrapper: <InnerWrapperComponent style={[
-      _styles.innerWrapperStyle,
+      styles.innerWrapperStyle,
     ]} {...innerWrapperProps}>
       {_leftIcon}
       {children}
       {_rightIcon}
     </InnerWrapperComponent>,
     error: hideErrorMessage ? null : (
-      _error || <Text text={''} style={_styles.errorStyle} />
+      _error || <Text text={''} style={styles.errorStyle} />
     ),
   }
 
   return <WrapperComponent
-    style={[_styles.wrapperStyle, style]}
     {...otherProps}
     {...wrapperProps}
+    style={styles.wrapperStyle}
   >
     {
       order.map((key) => <KeyPassthrough key={key}>
@@ -98,6 +97,16 @@ export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
       </KeyPassthrough>)
 
     }
-
   </WrapperComponent>
-})
+}
+
+InputBase.elements = ['wrapper', 'innerWrapper', 'label', 'errorMessage', 'description', 'icon', 'leftIcon', 'rightIcon']
+
+InputBase.defaultProps = {
+  disabled: false,
+  labelAsRow: false,
+  hideErrorMessage: false,
+  order: InputBaseDefaultOrder,
+  wrapper: View,
+  innerWrapper: View,
+} as Partial<InputBaseProps>

package/src/components/InputBase/styles.ts

@@ -1,7 +1,8 @@
-import { TypeGuards, createDefaultVariantFactory, getRenderedComponent, includePresets, useDefaultComponentStyle, useMemo, useNestedStylesByKey } from "@codeleap/common"
-import { ActionIconComposition, ActionIconParts } from "../ActionIcon"
+import { TypeGuards } from "@codeleap/common"
+import { ActionIconParts } from "../ActionIcon"
 import { InputBaseProps } from "./types"
-import { StyleSheet } from "react-native"
+import { mergeStyles, useCompositionStyles } from '@codeleap/styles'
+import { useMemo } from 'react'
 
 type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
 
@@ -24,32 +25,33 @@ export type IconLessInputBaseParts = Exclude<InputBaseParts, InputIconCompositio
 
 export type InputBaseComposition = `${InputBaseParts}:${InputBaseStates}` | InputBaseParts
 
-const createTextInputBaseComposition = createDefaultVariantFactory<InputBaseComposition>()
-
-export const InputBasePresets = includePresets((styles) => createTextInputBaseComposition(() => ({ wrapper: styles })))
-
-
-const getIconStyles = (obj, state) => {
-  return {
-    icon: [
-      obj.icon, 
-      state.focused && obj['icon:focus'],
-      state.hasError && obj['icon:error'], 
-      state.disabled && obj['icon:disabled']
-    ],
-    'icon:disabled': [
-      state.disabled && obj['icon:disabled']
-    ],
-    touchableWrapper: [
-      obj.touchableWrapper, 
-      state.focused && obj['touchableWrapper:focus'],
-      state.hasError && obj['touchableWrapper:error'], 
-      state.disabled && obj['touchableWrapper:disabled']
-    ],
-    'touchableWrapper:disabled': [
-      state.disabled && obj['touchableWrapper:disabled']
-    ]
-  }
+const getIconStyles = (obj, state) => ({
+  icon: mergeStyles([
+    obj.icon, 
+    state.focused && obj['icon:focus'],
+    state.hasError && obj['icon:error'], 
+    state.disabled && obj['icon:disabled']
+  ]),
+  'icon:disabled': mergeStyles([
+    state.disabled && obj['icon:disabled']
+  ]),
+  touchableWrapper: mergeStyles([
+    obj.touchableWrapper, 
+    state.focused && obj['touchableWrapper:focus'],
+    state.hasError && obj['touchableWrapper:error'], 
+    state.disabled && obj['touchableWrapper:disabled']
+  ]),
+  'touchableWrapper:disabled': mergeStyles([
+    state.disabled && obj['touchableWrapper:disabled']
+  ])
+})
+
+const useIconStyles = (styles, iconStyles, states) => {
+  return useMemo(() => {
+    const _iconStyles = getIconStyles(iconStyles, states)
+
+    return mergeStyles([styles, _iconStyles])
+  }, [states, styles, iconStyles])
 }
 
 export const useInputBaseStyles = (props: InputBaseProps) => {
@@ -57,76 +59,65 @@ export const useInputBaseStyles = (props: InputBaseProps) => {
     focused,
     disabled,
     error,
-    styles
+    style: styles,
   } = props
 
   const hasError = !TypeGuards.isNil(error)
 
-  const variantStyles = useDefaultComponentStyle<'u:InputBase', typeof InputBasePresets>('u:InputBase', {
-    styles,
-    transform: StyleSheet.flatten,
-    rootElement: 'wrapper'
-  })
-
-  const _leftIconStyles = useNestedStylesByKey<ActionIconComposition>('leftIcon', variantStyles)
-  const _rightIconStyles = useNestedStylesByKey<ActionIconComposition>('rightIcon', variantStyles)
-  const _generalIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
+  const compositionStyles = useCompositionStyles(['leftIcon', 'rightIcon', 'icon'], styles)
 
-  const generalIconStyles = getIconStyles(_generalIconStyles, { hasError, disabled })
+  const generalIconStyles = getIconStyles(compositionStyles?.icon, { hasError, disabled })
 
-  const leftIconStyles = [
-    generalIconStyles, 
-    // @ts-ignore
-    getIconStyles(_leftIconStyles, { hasError, disabled: disabled || props?.leftIcon?.disabled, focused })
-  ]
+  const leftIconStyles = useIconStyles(generalIconStyles, compositionStyles?.leftIcon, { 
+    // @ts-expect-error
+    hasError, disabled: (disabled || props?.leftIcon?.disabled), focused 
+  })
 
-  const rightIconStyles = [
-    generalIconStyles,
-    // @ts-ignore
-    getIconStyles(_rightIconStyles, { hasError, disabled: disabled || props?.right?.disabled, focused })
-  ]
+  const rightIconStyles = useIconStyles(generalIconStyles, compositionStyles?.rightIcon, { 
+    // @ts-expect-error
+    hasError, disabled: (disabled || props?.rightIcon?.disabled), focused
+  })
 
   const labelStyle = [
-    variantStyles.label,
-    focused && variantStyles['label:focus'],
-    hasError && variantStyles['label:error'],
-    disabled && variantStyles['label:disabled'],
-    
+    styles.label,
+    focused && styles['label:focus'],
+    hasError && styles['label:error'],
+    disabled && styles['label:disabled'],
   ]
 
   const errorStyle = [
-    variantStyles.errorMessage,
-    focused && variantStyles['errorMessage:focus'],
-    hasError && variantStyles['errorMessage:error'],
-    disabled && variantStyles['errorMessage:disabled'],
+    styles.errorMessage,
+    focused && styles['errorMessage:focus'],
+    hasError && styles['errorMessage:error'],
+    disabled && styles['errorMessage:disabled'],
   ]
 
   const descriptionStyle = [
-    variantStyles.description,
-    focused && variantStyles['description:focus'],
-    hasError && variantStyles['description:error'],
-    disabled && variantStyles['description:disabled'],
+    styles.description,
+    focused && styles['description:focus'],
+    hasError && styles['description:error'],
+    disabled && styles['description:disabled'],
   ]
 
   const wrapperStyle = [
-    variantStyles.wrapper,
-    focused && variantStyles['wrapper:focus'],
-    error && variantStyles['wrapper:error'],
-    disabled && variantStyles['wrapper:disabled'],
+    styles.wrapper,
+    focused && styles['wrapper:focus'],
+    error && styles['wrapper:error'],
+    disabled && styles['wrapper:disabled'],
   ]
 
   const innerWrapperStyle = [
-    variantStyles.innerWrapper,
-    focused && variantStyles['innerWrapper:focus'],
-    hasError && variantStyles['innerWrapper:error'],
-    disabled && variantStyles['innerWrapper:disabled'],
+    styles.innerWrapper,
+    focused && styles['innerWrapper:focus'],
+    hasError && styles['innerWrapper:error'],
+    disabled && styles['innerWrapper:disabled'],
   ]
 
   const labelRowStyle = [
-    variantStyles.labelRow,
-    focused && variantStyles['labelRow:focus'],
-    hasError && variantStyles['labelRow:error'],
-    disabled && variantStyles['labelRow:disabled'],
+    styles.labelRow,
+    focused && styles['labelRow:focus'],
+    hasError && styles['labelRow:error'],
+    disabled && styles['labelRow:disabled'],
   ]
 
  return {

package/src/components/InputBase/types.ts

@@ -1,5 +1,4 @@
-import { PropsOf } from '@codeleap/common'
-import { StylesOf } from '../../types'
+import { PropsOf, StylesOf } from '@codeleap/common'
 import { InputBaseComposition } from './styles'
 import { ActionIcon } from '../ActionIcon'
 
@@ -7,6 +6,7 @@ type ActionIconProps = PropsOf<typeof ActionIcon>
 
 type OrderedParts = 'label' | 'description' | 'innerWrapper' | 'error'
 type IconProp = Partial<ActionIconProps> | JSX.Element
+
 export type InputBaseProps = React.PropsWithChildren<{
   label?: React.ReactNode
   error?: React.ReactNode
@@ -16,13 +16,12 @@ export type InputBaseProps = React.PropsWithChildren<{
   wrapperProps?: any
   innerWrapper?: React.FC<any>
   innerWrapperProps?: any
-  styles?: StylesOf<InputBaseComposition>
   description?: React.ReactNode
   debugName: string
   focused?: boolean
   disabled?: boolean
   order?: OrderedParts[]
-  style?: any
+  style?: StylesOf<InputBaseComposition>
   labelAsRow?: boolean
   hideErrorMessage?: boolean
 }>

package/src/components/InputBase/utils.ts

@@ -8,8 +8,10 @@ type OmitDiff<T1, T2> = {
 
 type InputBaseKey = keyof InputBaseProps
 
-export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
-  inputBaseProps: InputBaseProps
+type BaseProps = Omit<InputBaseProps, 'style'>
+
+export function selectInputBaseProps<T extends BaseProps>(props: T): {
+  inputBaseProps: BaseProps
   others: OmitDiff<T, T>
 } {
   const varList:InputBaseKey[] = [
@@ -19,7 +21,6 @@ export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
     'innerWrapper',
     'leftIcon',
     'rightIcon',
-    // 'styles',
     'description',
     'wrapper',
     'children',
@@ -27,6 +28,7 @@ export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
     'wrapperProps',
     'disabled',
     'hideErrorMessage',
+    'style',
   ]
 
   const copy = { ...props }
@@ -36,7 +38,7 @@ export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
     acc[key] = copy[key]
 
     return acc
-  }, {} as InputBaseProps)
+  }, {} as BaseProps)
 
   return { inputBaseProps: result, others: copy as OmitDiff<T, T> }
 }