@codeleap/mobile 1.9.24 → 1.9.27

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>
+    )
+  },
+)

package/src/components/Checkbox/styles.ts

@@ -1,76 +1,76 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-type CheckboxParts =
-  | 'wrapper'
-  | 'label'
-  | 'labelWrapper'
-  | 'input'
-  | 'checkmark'
-  | 'checkmarkWrapper'
-  | 'error'
-
-export type MobileCheckboxComposition =
-  | CheckboxParts
-  | `${CheckboxParts}:checked`
-  | `${CheckboxParts}:disabled`
-  | `${CheckboxParts}:error`
-const createCheckboxStyle =
-  createDefaultVariantFactory<MobileCheckboxComposition>()
-
-const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
-)
-
-export const MobileCheckboxStyles = {
-  ...presets,
-  default: createCheckboxStyle((theme) => {
-    const size = theme.typography.baseFontSize * 1.2
-
-    const markHeight = size * 0.5
-    const markWidth = size * 0.25
-
-    const translateX = -(markWidth / 2)
-    const translateY = -(markHeight / 2)
-    return {
-      wrapper: {},
-      input: {
-        flexDirection: 'row',
-        ...theme.presets.alignCenter,
-        borderRadius: theme.borderRadius.small,
-      },
-      labelWrapper: {
-        flex: 1,
-      },
-      label: {
-        ...theme.spacing.marginLeft(0.5),
-      },
-
-      checkmark: {
-        position: 'absolute',
-        top: '40%',
-        left: '50%',
-
-        height: markHeight,
-        width: markWidth,
-        transform: [{ translateX }, { translateY }, { rotate: '45deg' }],
-      },
-      'checkmark:checked': {
-        ...theme.border.white({
-          width: 2,
-          directions: ['right', 'bottom'],
-        }),
-      },
-      checkmarkWrapper: {
-        position: 'relative',
-        width: size,
-        height: size,
-        ...theme.border.neutral(1),
-      },
-      'checkmarkWrapper:checked': {
-        backgroundColor: theme.colors.primary,
-      },
-      error: {
-        color: theme.colors.negative,
-      },
-    }
-  }),
-}
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+type CheckboxParts =
+  | 'wrapper'
+  | 'label'
+  | 'labelWrapper'
+  | 'input'
+  | 'checkmark'
+  | 'checkmarkWrapper'
+  | 'error'
+
+export type MobileCheckboxComposition =
+  | CheckboxParts
+  | `${CheckboxParts}:checked`
+  | `${CheckboxParts}:disabled`
+  | `${CheckboxParts}:error`
+const createCheckboxStyle =
+  createDefaultVariantFactory<MobileCheckboxComposition>()
+
+const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
+)
+
+export const MobileCheckboxStyles = {
+  ...presets,
+  default: createCheckboxStyle((theme) => {
+    const size = theme.typography.baseFontSize * 1.2
+
+    const markHeight = size * 0.5
+    const markWidth = size * 0.25
+
+    const translateX = -(markWidth / 2)
+    const translateY = -(markHeight / 2)
+    return {
+      wrapper: {},
+      input: {
+        flexDirection: 'row',
+        ...theme.presets.alignCenter,
+        borderRadius: theme.borderRadius.small,
+      },
+      labelWrapper: {
+        flex: 1,
+      },
+      label: {
+        ...theme.spacing.marginLeft(0.5),
+      },
+
+      checkmark: {
+        position: 'absolute',
+        top: '40%',
+        left: '50%',
+
+        height: markHeight,
+        width: markWidth,
+        transform: [{ translateX }, { translateY }, { rotate: '45deg' }],
+      },
+      'checkmark:checked': {
+        ...theme.border.white({
+          width: 2,
+          directions: ['right', 'bottom'],
+        }),
+      },
+      checkmarkWrapper: {
+        position: 'relative',
+        width: size,
+        height: size,
+        ...theme.border.neutral(1),
+      },
+      'checkmarkWrapper:checked': {
+        backgroundColor: theme.colors.primary,
+      },
+      error: {
+        color: theme.colors.negative,
+      },
+    }
+  }),
+}

package/src/components/ContentView.tsx

@@ -1,58 +1,58 @@
-import React from 'react'
-import {
-  ComponentVariants,
-  ContentViewStyles,
-  useDefaultComponentStyle,
-  ViewComposition,
-} from '@codeleap/common'
-import { ViewProps, View } from './View'
-import { Text } from './Text'
-import { StylesOf } from '../types/utility'
-import { ActivityIndicator } from './ActivityIndicator'
-import { StyleSheet } from 'react-native'
-
-export type ContentViewProps = Omit<
-  ViewProps,
-  'variants' | 'responsiveVariants'
-> & {
-  placeholderMsg: string
-  loading?: boolean
-  styles?: StylesOf<ViewComposition>
-} & ComponentVariants<typeof ContentViewStyles>
-
-const WrapContent = ({ children, ...props }) => (
-  <View {...props}>{children}</View>
-)
-
-export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
-  const { children, placeholderMsg, loading, variants, styles, ...props } =
-    rawProps
-
-  const variantStyle = useDefaultComponentStyle('ContentView', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles,
-  })
-
-  if (loading) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
-      </WrapContent>
-    )
-  }
-  const hasChildren = Object.keys(children || {}).length > 0
-  if (hasChildren) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        {children}
-      </WrapContent>
-    )
-  }
-
-  return (
-    <WrapContent {...props} style={styles}>
-      <Text text={placeholderMsg} />
-    </WrapContent>
-  )
-}
+import React from 'react'
+import {
+  ComponentVariants,
+  ContentViewStyles,
+  useDefaultComponentStyle,
+  ViewComposition,
+} from '@codeleap/common'
+import { ViewProps, View } from './View'
+import { Text } from './Text'
+import { StylesOf } from '../types/utility'
+import { ActivityIndicator } from './ActivityIndicator'
+import { StyleSheet } from 'react-native'
+
+export type ContentViewProps = Omit<
+  ViewProps,
+  'variants' | 'responsiveVariants'
+> & {
+  placeholderMsg: string
+  loading?: boolean
+  styles?: StylesOf<ViewComposition>
+} & ComponentVariants<typeof ContentViewStyles>
+
+const WrapContent = ({ children, ...props }) => (
+  <View {...props}>{children}</View>
+)
+
+export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
+  const { children, placeholderMsg, loading, variants, styles, ...props } =
+    rawProps
+
+  const variantStyle = useDefaultComponentStyle('ContentView', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  if (loading) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
+      </WrapContent>
+    )
+  }
+  const hasChildren = Object.keys(children || {}).length > 0
+  if (hasChildren) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        {children}
+      </WrapContent>
+    )
+  }
+
+  return (
+    <WrapContent {...props} style={styles}>
+      <Text text={placeholderMsg} />
+    </WrapContent>
+  )
+}