@codeleap/mobile 1.9.25 → 1.9.28

package/dist/utils/styles.js

@@ -1,13 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLogStyles = void 0;
-var common_1 = require("@codeleap/common");
-var react_native_1 = require("react-native");
-function useLogStyles() {
-    var logger = (0, common_1.useCodeleapContext)().logger;
-    return function (name, styles) {
-        logger.debug.blue(name, JSON.stringify(react_native_1.StyleSheet.flatten(styles), null, 2), 'Component Styles');
-    };
-}
-exports.useLogStyles = useLogStyles;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogStyles = void 0;
+var common_1 = require("@codeleap/common");
+var react_native_1 = require("react-native");
+function useLogStyles() {
+    var logger = (0, common_1.useCodeleapContext)().logger;
+    return function (name, styles) {
+        logger.debug.blue(name, JSON.stringify(react_native_1.StyleSheet.flatten(styles), null, 2), 'Component Styles');
+    };
+}
+exports.useLogStyles = useLogStyles;
 //# sourceMappingURL=styles.js.map

package/package.json

@@ -1,40 +1,43 @@
-{
-  "name": "@codeleap/mobile",
-  "version": "1.9.25",
-  "main": "src/index.ts",
-  "author": "Paulo Henrique De Souza <paulosouza300272@gmail.com>",
-  "license": "UNLICENSED",
-  "repository": "PRIVATE",
-  "devDependencies": {
-    "@codeleap/config": "*",
-    "@types/react-native": "^0.66.15",
-    "@types/react-window": "^1.8.5",
-    "typescript": "^4.5.5"
-  },
-  "scripts": {
-    "build": "tsc --build",
-    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
-  },
-  "peerDependencies": {
-    "@codeleap/common": "*",
-    "@react-navigation/bottom-tabs": "^6.0.9",
-    "@react-navigation/drawer": "^6.1.8",
-    "@react-navigation/native": "^6.0.6",
-    "@react-navigation/native-stack": "^6.2.5",
-    "@react-navigation/stack": "^6.1.1",
-    "react": "*",
-    "react-native": "*",
-    "react-native-animatable": "^1.3.3",
-    "react-native-fast-image": "^8.5.11",
-    "react-native-gesture-handler": "^2.2.0",
-    "react-native-image-crop-picker": "*",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-text-input-mask": "3.1.4"
-  },
-  "dependencies": {
-    "@miblanchard/react-native-slider": "^2.1.0",
-    "react-native-animatable": "^1.3.3",
-    "react-native-masked-text": "^1.13.0",
-    "react-native-pose": "^0.9.1"
-  }
-}
+{
+  "name": "@codeleap/mobile",
+  "version": "1.9.28",
+  "main": "src/index.ts",
+  "author": "Paulo Henrique De Souza <paulosouza300272@gmail.com>",
+  "license": "UNLICENSED",
+  "repository": "PRIVATE",
+  "devDependencies": {
+    "@codeleap/config": "*",
+    "@types/react-native": "^0.66.15",
+    "@types/react-window": "^1.8.5",
+    "moti": "^0.18.0",
+    "typescript": "^4.5.5"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
+  },
+  "peerDependencies": {
+    "@codeleap/common": "*",
+    "@react-navigation/bottom-tabs": "^6.0.9",
+    "@react-navigation/drawer": "^6.1.8",
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native-stack": "^6.2.5",
+    "@react-navigation/stack": "^6.1.1",
+    "moti": "^0.18.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-animatable": "^1.3.3",
+    "react-native-fast-image": "^8.5.11",
+    "react-native-gesture-handler": "^2.2.0",
+    "react-native-image-crop-picker": "*",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-text-input-mask": "3.1.4"
+  },
+  "dependencies": {
+    "@gorhom/portal": "^1.0.13",
+    "@miblanchard/react-native-slider": "^2.1.0",
+    "react-native-animatable": "^1.3.3",
+    "react-native-masked-text": "^1.13.0",
+    "react-native-pose": "^0.9.1"
+  }
+}

package/src/components/ActivityIndicator.tsx

@@ -1,46 +1,46 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
-import {
-  ActivityIndicatorComposition,
-  ActivityIndicatorStyles,
-  useDefaultComponentStyle,
-  ComponentVariants,
-  useCodeleapContext,
-} from '@codeleap/common'
-import { StylesOf } from '../types/utility'
-
-export type ActivityIndicatorProps = ComponentPropsWithoutRef<
-  typeof Indicator
-> & {
-  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants']
-  styles?: StylesOf<ActivityIndicatorComposition>
-}
-
-export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
-  (activityIndicatorProps, ref) => {
-    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
-
-    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
-      variants,
-      transform: StyleSheet.flatten,
-      styles: propStyles,
-    })
-
-    const { Theme } = useCodeleapContext()
-
-    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
-    const color = styles?.color || Theme.colors.gray
-    const size = styles?.height || styles?.width || 'large'
-
-    return (
-      <Indicator
-        size={size}
-        ref={ref}
-        color={color}
-        style={styles}
-        {...props}
-      />
-    )
-  },
-)
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
+import {
+  ActivityIndicatorComposition,
+  ActivityIndicatorStyles,
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCodeleapContext,
+} from '@codeleap/common'
+import { StylesOf } from '../types/utility'
+
+export type ActivityIndicatorProps = ComponentPropsWithoutRef<
+  typeof Indicator
+> & {
+  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants']
+  styles?: StylesOf<ActivityIndicatorComposition>
+}
+
+export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
+  (activityIndicatorProps, ref) => {
+    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
+
+    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
+      variants,
+      transform: StyleSheet.flatten,
+      styles: propStyles,
+    })
+
+    const { Theme } = useCodeleapContext()
+
+    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+    const color = styles?.color || Theme.colors.gray
+    const size = styles?.height || styles?.width || 'large'
+
+    return (
+      <Indicator
+        size={size}
+        ref={ref}
+        color={color}
+        style={styles}
+        {...props}
+      />
+    )
+  },
+)

package/src/components/Animated.tsx

@@ -1,34 +1,34 @@
-import { onUpdate } from '@codeleap/common'
-import React, { useRef } from 'react'
-
-import posed from 'react-native-pose'
-import { Touchable } from './Touchable'
-import { View } from './View'
-const Components = {
-  Touchable,
-  View,
-}
-
-const PosedComponents = Object.fromEntries(
-  Object.entries(Components).map(([key, Render]) => [key, posed(Render)]),
-)
-
-type AnimatedComponents = typeof Components
-type CP = keyof AnimatedComponents
-
-type AnimatedProps<T extends CP, CFG = Record<string, any>> = {
-  component: T
-  config: CFG
-  pose: keyof CFG
-  initialPose?: keyof CFG
-} & Omit<Parameters<AnimatedComponents[T]>[0], 'component'>
-
-export const Animated = <T extends CP, CFG = any>({
-  config,
-  component,
-  ...props
-}: AnimatedProps<T, CFG>) => {
-  const Component = useRef(PosedComponents[component](config)).current
-
-  return <Component withParent={false} {...props} />
-}
+import { onUpdate } from '@codeleap/common'
+import React, { useRef } from 'react'
+
+import posed from 'react-native-pose'
+import { Touchable } from './Touchable'
+import { View } from './View'
+const Components = {
+  Touchable,
+  View,
+}
+
+const PosedComponents = Object.fromEntries(
+  Object.entries(Components).map(([key, Render]) => [key, posed(Render)]),
+)
+
+type AnimatedComponents = typeof Components
+type CP = keyof AnimatedComponents
+
+type AnimatedProps<T extends CP, CFG = Record<string, any>> = {
+  component: T
+  config: CFG
+  pose: keyof CFG
+  initialPose?: keyof CFG
+} & Omit<Parameters<AnimatedComponents[T]>[0], 'component'>
+
+export const Animated = <T extends CP, CFG = any>({
+  config,
+  component,
+  ...props
+}: AnimatedProps<T, CFG>) => {
+  const Component = useRef(PosedComponents[component](config)).current
+
+  return <Component withParent={false} {...props} />
+}

package/src/components/Button.tsx

@@ -1,95 +1,117 @@
-import * as React from 'react'
-import {
-  useDefaultComponentStyle,
-  ButtonStyles,
-  ComponentVariants,
-  ButtonComposition,
-  ButtonParts,
-  IconPlaceholder,
-} from '@codeleap/common'
-import { forwardRef } from 'react'
-import { StylesOf } from '../types/utility'
-import { Text } from './Text'
-import { Touchable, TouchableProps } from './Touchable'
-import { Icon } from './Icon'
-import { ActivityIndicator } from './ActivityIndicator'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-
-export type ButtonProps = Omit<TouchableProps, 'variants'> &
-  ComponentVariants<typeof ButtonStyles> & {
-    text?: string
-    rightIcon?: IconPlaceholder
-    icon?: IconPlaceholder
-    styles?: StylesOf<ButtonComposition>
-    loading?: boolean
-    debounce?: number
-    debugName: string
-  }
-
-export const Button = forwardRef<TouchableOpacity, ButtonProps>((buttonProps, ref) => {
-  const {
-    variants = [],
-    children,
-    icon,
-    text,
-    loading,
-    styles = {},
-    onPress,
-    disabled,
-    rightIcon,
-    debounce = 600,
-    style,
-    ...props
-  } = buttonProps
-  const [pressed, setPressed] = React.useState(false)
-
-  const variantStyles = useDefaultComponentStyle('Button', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles,
-  })
-
-  function handlePress() {
-    if (!pressed) {
-      setPressed(true)
-
-      setTimeout(() => setPressed(false), debounce)
-
-      onPress && onPress()
-    }
-  }
-
-  function getStyles(key: ButtonParts) {
-    return [
-      variantStyles[key],
-      key === 'wrapper' && style,
-      disabled && variantStyles[key + ':disabled'],
-      styles[key],
-      disabled && styles[key + ':disabled'],
-    ]
-  }
-
-  const iconStyle = getStyles('icon')
-
-  const leftIconStyle = StyleSheet.flatten([iconStyle, getStyles('leftIcon')])
-  const rightIconStyle = StyleSheet.flatten([iconStyle, getStyles('rightIcon')])
-
-  const hasText = !!(text || children)
-  return (
-    <Touchable
-      style={getStyles('wrapper')}
-      onPress={handlePress}
-      ref={ref}
-      disabled={disabled}
-      debugComponent={'Button'}
-      {...props}
-    >
-
-      {loading && <ActivityIndicator style={getStyles('loader')} />}
-      {!loading && <Icon name={icon} style={leftIconStyle} renderEmptySpace={hasText}/>}
-      {text ? <Text text={text} style={getStyles('text')} /> : null}
-      {children}
-      <Icon name={rightIcon} style={rightIconStyle} renderEmptySpace={hasText} />
-    </Touchable>
-  )
-})
+import * as React from 'react'
+import {
+  useDefaultComponentStyle,
+  ButtonStyles,
+  ComponentVariants,
+  ButtonComposition,
+  ButtonParts,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { forwardRef } from 'react'
+import { StylesOf } from '../types/utility'
+import { Text } from './Text'
+import { Touchable, TouchableProps } from './Touchable'
+import { Icon } from './Icon'
+import { ActivityIndicator } from './ActivityIndicator'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+
+type ChildProps = {
+  styles: StylesOf<ButtonParts>
+  pressed: boolean
+  props: Omit<ButtonProps, 'children'>
+}
+
+export type ButtonProps = Omit<TouchableProps, 'variants'> &
+  ComponentVariants<typeof ButtonStyles> & {
+    text?: string
+    rightIcon?: IconPlaceholder
+    icon?: IconPlaceholder
+    styles?: StylesOf<ButtonComposition>
+    loading?: boolean
+    debounce?: number
+    debugName: string
+    children?: React.ReactNode | ((props: ChildProps) => React.ReactNode)
+  }
+
+export const Button = forwardRef<TouchableOpacity, ButtonProps>((buttonProps, ref) => {
+  const {
+    variants = [],
+    children,
+    icon,
+    text,
+    loading,
+    styles = {},
+    onPress,
+    disabled,
+    rightIcon,
+    debounce = 600,
+    style,
+    ...props
+  } = buttonProps
+  const [pressed, setPressed] = React.useState(false)
+
+  const variantStyles = useDefaultComponentStyle('Button', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  function handlePress() {
+    if (!pressed) {
+      setPressed(true)
+
+      setTimeout(() => setPressed(false), debounce)
+
+      onPress && onPress()
+    }
+  }
+
+  function getStyles(key: ButtonParts) {
+    return [
+      variantStyles[key],
+      key === 'wrapper' && style,
+      disabled && variantStyles[key + ':disabled'],
+      styles[key],
+      disabled && styles[key + ':disabled'],
+    ]
+  }
+
+  const iconStyle = getStyles('icon')
+
+  const leftIconStyle = StyleSheet.flatten([iconStyle, getStyles('leftIcon')])
+  const rightIconStyle = StyleSheet.flatten([iconStyle, getStyles('rightIcon')])
+
+  const hasText = !!(text || children)
+
+  const _styles = {
+    wrapper: getStyles('wrapper'),
+    loader: getStyles('loader'),
+    leftIcon: leftIconStyle,
+    rightIcon: rightIconStyle,
+    text: getStyles('text'),
+    icon: getStyles('icon'),
+
+  }
+
+  const childrenContent = typeof children === 'function' ?
+    children({ styles: _styles, props: buttonProps, pressed })
+    : children
+
+  return (
+    <Touchable
+      style={_styles.wrapper}
+      onPress={handlePress}
+      ref={ref}
+      disabled={disabled}
+      debugComponent={'Button'}
+      {...props}
+    >
+
+      {loading && <ActivityIndicator style={_styles.loader} />}
+      {!loading && <Icon name={icon} style={_styles.leftIcon} renderEmptySpace={hasText}/>}
+      {text ? <Text text={text} style={_styles.text} /> : null}
+      {childrenContent}
+      <Icon name={rightIcon} style={_styles.rightIcon} renderEmptySpace={hasText} />
+    </Touchable>
+  )
+})

package/src/components/Checkbox/index.tsx

@@ -1,85 +1,85 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  StylesOf,
-  Form,
-  useValidate,
-} from '@codeleap/common'
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
-import { Switch as NativeCheckbox } from 'react-native'
-import { InputLabel, FormError } from '../TextInput'
-import { View } from '../View'
-import { Touchable } from '../Touchable'
-import {
-  MobileCheckboxStyles as CheckboxStyles,
-  MobileCheckboxComposition as CheckboxComposition,
-} from './styles'
-export * from './styles'
-
-type NativeCheckboxProps = Omit<
-  ComponentPropsWithRef<typeof NativeCheckbox>,
-  'thumbColor' | 'trackColor'
->
-type CheckboxProps = NativeCheckboxProps & {
-  variants?: ComponentVariants<typeof CheckboxStyles>['variants']
-  label?: ReactNode
-  styles?: StylesOf<CheckboxComposition>
-  validate?: Form.ValidatorFunctionWithoutForm | string
-  required?: boolean
-}
-
-export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
-  (checkboxProps, ref) => {
-    const {
-      variants = [],
-      style = {},
-      styles = {},
-      label,
-      value,
-      onValueChange,
-      validate,
-      required,
-      ...props
-    } = checkboxProps
-
-    const variantStyles = useDefaultComponentStyle('Checkbox', {
-      // @ts-ignore
-      variants,
-    })
-
-    const { error, showError } = useValidate(value, validate)
-
-    function getStyles(key: CheckboxComposition) {
-      return [
-        variantStyles[key],
-        variantStyles[key],
-        key === 'wrapper' ? style : {},
-        value ? variantStyles[key + ':checked'] : {},
-        value ? styles[key + ':checked'] : {},
-        showError ? variantStyles[key + ':error'] : {},
-        showError ? styles[key + ':error'] : {},
-        checkboxProps.disabled ? variantStyles[key + ':disabled'] : {},
-        checkboxProps.disabled ? styles[key + ':disabled'] : {},
-      ]
-    }
-
-    return (
-      <View style={getStyles('wrapper')} {...props}>
-        <Touchable
-          debugName={`Set checkbox value to ${!value}`}
-          style={getStyles('input')}
-          onPress={() => onValueChange(!value)}
-        >
-          <View style={getStyles('checkmarkWrapper')}>
-            <View style={getStyles('checkmark')} />
-          </View>
-          <View style={getStyles('labelWrapper')}>
-            <InputLabel label={label} style={getStyles('label')} required={required}/>
-          </View>
-        </Touchable>
-        <FormError message={error.message} style={getStyles('error')} />
-      </View>
-    )
-  },
-)
+import * as React from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  Form,
+  useValidate,
+} from '@codeleap/common'
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
+import { Switch as NativeCheckbox } from 'react-native'
+import { InputLabel, FormError } from '../TextInput'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
+import {
+  MobileCheckboxStyles as CheckboxStyles,
+  MobileCheckboxComposition as CheckboxComposition,
+} from './styles'
+export * from './styles'
+
+type NativeCheckboxProps = Omit<
+  ComponentPropsWithRef<typeof NativeCheckbox>,
+  'thumbColor' | 'trackColor'
+>
+type CheckboxProps = NativeCheckboxProps & {
+  variants?: ComponentVariants<typeof CheckboxStyles>['variants']
+  label?: ReactNode
+  styles?: StylesOf<CheckboxComposition>
+  validate?: Form.ValidatorFunctionWithoutForm | string
+  required?: boolean
+}
+
+export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
+  (checkboxProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      label,
+      value,
+      onValueChange,
+      validate,
+      required,
+      ...props
+    } = checkboxProps
+
+    const variantStyles = useDefaultComponentStyle('Checkbox', {
+      // @ts-ignore
+      variants,
+    })
+
+    const { error, showError } = useValidate(value, validate)
+
+    function getStyles(key: CheckboxComposition) {
+      return [
+        variantStyles[key],
+        variantStyles[key],
+        key === 'wrapper' ? style : {},
+        value ? variantStyles[key + ':checked'] : {},
+        value ? styles[key + ':checked'] : {},
+        showError ? variantStyles[key + ':error'] : {},
+        showError ? styles[key + ':error'] : {},
+        checkboxProps.disabled ? variantStyles[key + ':disabled'] : {},
+        checkboxProps.disabled ? styles[key + ':disabled'] : {},
+      ]
+    }
+
+    return (
+      <View style={getStyles('wrapper')} {...props}>
+        <Touchable
+          debugName={`Set checkbox value to ${!value}`}
+          style={getStyles('input')}
+          onPress={() => onValueChange(!value)}
+        >
+          <View style={getStyles('checkmarkWrapper')}>
+            <View style={getStyles('checkmark')} />
+          </View>
+          <View style={getStyles('labelWrapper')}>
+            <InputLabel label={label} style={getStyles('label')} required={required}/>
+          </View>
+        </Touchable>
+        <FormError message={error.message} style={getStyles('error')} />
+      </View>
+    )
+  },
+)