@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/Button/index.tsx

@@ -2,17 +2,14 @@ import * as React from 'react'
 import {
   useDefaultComponentStyle,
   ComponentVariants,
-
   IconPlaceholder,
   GetRefType,
-  SmartOmit,
   TypeGuards,
-  deepMerge,
-  PropsOf,
+  getNestedStylesByKey,
 } from '@codeleap/common'
 
 import {
-  ButtonStyles,
+  ButtonPresets,
   ButtonComposition,
   ButtonParts,
 } from './styles'
@@ -21,9 +18,10 @@ import { StylesOf } from '../../types/utility'
 import { Text } from '../Text'
 import { Touchable, TouchableProps } from '../Touchable'
 import { Icon } from '../Icon'
-import { View, ViewProps } from '../View'
 import { ActivityIndicator } from '../ActivityIndicator'
 import { StyleSheet } from 'react-native'
+import { usePressableFeedback } from '../../utils'
+import { Badge, BadgeComponentProps } from '../Badge'
 export * from './styles'
 
 type ChildProps = {
@@ -31,16 +29,8 @@ type ChildProps = {
   props: Omit<ButtonProps, 'children'>
 }
 
-type BadgeProps = Partial<ViewProps> & {
-  text?: string
-  children?: React.ReactElement | ((props: Partial<SmartOmit<BadgeProps, 'children'>>) => React.ReactElement)
-  styles?: StylesOf<'text'|'wrapper'>
-  position?: [number, number]
-  textProps?: Partial<PropsOf<typeof Text>>
-}
-
 export type ButtonProps = Omit<TouchableProps, 'variants'> &
-  ComponentVariants<typeof ButtonStyles> & {
+  ComponentVariants<typeof ButtonPresets> & {
     text?: string
     rightIcon?: IconPlaceholder
     icon?: IconPlaceholder
@@ -48,24 +38,9 @@ export type ButtonProps = Omit<TouchableProps, 'variants'> &
     loading?: boolean
     debounce?: number
     debugName: string
-    badge?: React.ReactElement | BadgeProps
+    selected?: boolean
     children?: React.ReactNode | ((props: ChildProps) => React.ReactNode)
-  }
-
-export const Badge = forwardRef<GetRefType<ViewProps['ref']>, BadgeProps>((props, ref) => {
-  const {
-    children = null,
-    styles,
-    text,
-    textProps = {},
-    ...viewProps
-  } = props
-
-  return <View style={[styles.wrapper]} {...viewProps} ref={ref}>
-    {text && <Text text={text} style={styles.text} {...textProps}/>}
-    {(TypeGuards.isFunction(children) ? children({ ...viewProps, styles, text }) : children)}
-  </View>
-})
+  } & BadgeComponentProps
 
 export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>((buttonProps, ref) => {
   const {
@@ -77,12 +52,14 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
     styles = {},
     onPress,
     disabled,
-    badge = null,
+    selected,
     rightIcon,
     style,
+    badge = false,
+    badgeProps = {},
     ...props
   } = buttonProps
-
+  const [pressed, setPressed] = React.useState(false)
   const variantStyles = useDefaultComponentStyle('u:Button', {
     variants,
     transform: StyleSheet.flatten,
@@ -95,6 +72,7 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
       key === 'wrapper' && style,
       disabled && variantStyles[key + ':disabled'],
       styles[key],
+      selected && variantStyles[key + ':selected'],
       disabled && styles[key + ':disabled'],
     ]
   }
@@ -104,8 +82,6 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
   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'),
@@ -116,24 +92,37 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
 
   }
 
+  const disableFeedback = !onPress || props?.noFeedback
+
+  const { getFeedbackStyle } = usePressableFeedback(variantStyles.text, {
+    hightlightPropertyIn: 'color',
+    hightlightPropertyOut: 'color',
+    feedbackConfig: variantStyles?.textFeedback,
+    disabled: disableFeedback,
+  })
+
+  const { getFeedbackStyle: getFeedbackWrapperStyle } = usePressableFeedback(variantStyles.wrapper, {
+    hightlightPropertyIn: 'borderColor',
+    hightlightPropertyOut: 'borderColor',
+    disabled: disableFeedback,
+    feedbackConfig: variantStyles?.wrapperFeedback,
+  })
+
   const childrenContent = TypeGuards.isFunction(children) ?
     // @ts-ignore
     children({ styles: _styles, props: buttonProps })
     : children
 
-  let _badge = null
+  const rightFeedback = getFeedbackStyle(pressed)
 
-  if (badge) {
-    _badge = React.isValidElement(badge) ? badge : <Badge {...badge} styles={deepMerge({
-      text: variantStyles.badgeText,
-      wrapper: variantStyles.badgeWrapper,
-    }, badge?.styles || {})}/>
+  // TODO - This is a hack to hide the icon when there is no text
+  const isLeftIconHidden = _styles?.leftIcon?.display != 'none'
 
-  }
+  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
 
   return (
     <Touchable
-      style={_styles.wrapper}
+      style={[_styles.wrapper, getFeedbackWrapperStyle(pressed)]}
       ref={ref}
       disabled={disabled}
       styles={{
@@ -142,14 +131,15 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
       onPress={onPress}
       debugComponent={'Button'}
       noFeedback={!onPress}
+      setPressed={setPressed}
       {...props}
     >
-      {_badge}
-      {loading && <ActivityIndicator style={_styles.loader} />}
-      {!loading && <Icon name={icon} style={_styles.leftIcon} renderEmptySpace={hasText && !!rightIcon}/>}
-      {text ? <Text text={text} style={_styles.text} /> : null}
+      {loading && <ActivityIndicator style={[_styles.loader, getFeedbackStyle(pressed)]} />}
+      {(!loading && isLeftIconHidden) && <Icon name={icon} style={[_styles.leftIcon, getFeedbackStyle(pressed)]} />}
+      {text ? <Text text={text} style={[_styles.text, getFeedbackStyle(pressed)]} /> : null}
       {childrenContent}
-      <Icon name={rightIcon} style={_styles.rightIcon} renderEmptySpace={(hasText && !!icon) || loading} />
+      <Icon name={rightIcon} style={[_styles.rightIcon, rightFeedback]} />
+      <Badge badge={badge} style={badgeStyles} {...badgeProps} />
     </Touchable>
   )
 })

package/src/components/Button/styles.ts

@@ -1,8 +1,9 @@
 import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
+import { BadgeComposition } from '../Badge'
 import { TouchableStylesGen } from '../Touchable'
 
-export type ButtonStates = 'disabled'
+export type ButtonStates = 'disabled' | 'selected'
 export type ButtonParts =
 | 'text'
 | 'inner'
@@ -12,118 +13,16 @@ export type ButtonParts =
 | 'rightIcon'
 | 'loader'
 | `loader${Capitalize<ActivityIndicatorComposition>}`
-| 'badgeText'
-| 'badgeWrapper'
+| `badge${Capitalize<BadgeComposition>}`
 
 export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
 
 export type ButtonStylesGen<TCSS = any> = StylesOf<ButtonComposition, TCSS> & {
   feedback?: TouchableStylesGen['feedback']
+  textFeedback?: TouchableStylesGen['feedback']
+  wrapperFeedback?: TouchableStylesGen['feedback']
 }
 
 const createButtonStyle = createDefaultVariantFactory<ButtonComposition, ButtonStylesGen >()
 
-const presets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))
-
-export const ButtonStyles = {
-  ...presets,
-  default: createButtonStyle((theme) => ({
-    wrapper: {
-
-      flexDirection: 'row',
-      backgroundColor: theme.colors.primary,
-      ...theme.presets.justifyCenter,
-      ...theme.presets.alignCenter,
-      ...theme.spacing.paddingHorizontal(2.5),
-    },
-    text: {
-      textAlign: 'center',
-      // ...theme.spacing.marginHorizontal(2.5),
-    },
-    loader: {
-      height: 20,
-      width: 20,
-    },
-
-    loaderFrontCircle: {
-      borderTopColor: theme.colors.white,
-    },
-    'wrapper:disabled': {
-      backgroundColor: theme.colors.disabled,
-      opacity: 0.9,
-      cursor: 'auto',
-
-    },
-    badgeWrapper: {
-      backgroundColor: theme.colors.negative,
-      position: 'absolute',
-      ...theme.spacing.padding(2.5),
-    },
-    badgeText: {
-      color: theme.colors.white,
-    },
-
-    leftIcon: {
-      ...theme.sized(4),
-      ...theme.spacing.marginRight('auto'),
-      // ...theme.spacing.marginLeft(2.5),
-    },
-    rightIcon: {
-      ...theme.spacing.marginLeft('auto'),
-      // ...theme.spacing.marginRight(2.5),
-      ...theme.sized(4),
-    },
-
-  })),
-  negative: createButtonStyle((theme) => ({
-    wrapper: {
-      backgroundColor: theme.colors.negative,
-
-    },
-
-  })),
-
-  circle: createButtonStyle((theme) => ({
-    wrapper: {
-      borderRadius: 100,
-      ...theme.spacing.padding(1),
-    },
-  })),
-  pill: createButtonStyle((theme) => ({
-    wrapper: {
-      borderRadius: theme.borderRadius.medium,
-      ...theme.spacing.paddingHorizontal(1),
-      ...theme.spacing.paddingVertical(0.5),
-    },
-  })),
-  icon: createButtonStyle((theme) => ({
-    wrapper: {
-      backgroundColor: 'transparent',
-      aspectRatio: 1,
-      display: 'flex',
-      ...theme.presets.center,
-      ...theme.spacing.padding(0),
-
-    },
-    text: {
-      flex: 1,
-      textAlign: 'center',
-    },
-    loader: {
-      ...theme.spacing.margin(0),
-    },
-    icon: {
-      ...theme.spacing.margin(0),
-      ...theme.presets.center,
-      height: null,
-      width: null,
-      color: theme.colors.icon,
-    },
-    leftIcon: {
-      ...theme.spacing.marginRight(0),
-    },
-    rightIcon: {
-      ...theme.spacing.marginRight(0),
-    },
-  })),
-}
+export const ButtonPresets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))

package/src/components/Calendar/index.tsx

@@ -6,14 +6,14 @@ import { format, formatISO } from 'date-fns'
 import { Calendar as RNCalendar, CalendarProps as RNCalendarProps, DateData } from 'react-native-calendars'
 
 import { View } from '../View'
-import { CalendarStyles } from './style'
 import { TCalendarStyles } from './types'
+import { CalendarPresets } from './style'
 export type CalendarProps = PropsOf<typeof View> & {
   styles?: TCalendarStyles
   onValueChange?: (date: Date|string) => any
   value?: Date|string
   calendarProps?: RNCalendarProps
-} & ComponentVariants<typeof CalendarStyles>
+} & ComponentVariants<typeof CalendarPresets>
 export * from './style'
 export * from './types'
 
@@ -27,7 +27,7 @@ export const Calendar = (props:CalendarProps) => {
     onValueChange,
     ...viewProps
   } = props
-  const variantStyles = useDefaultComponentStyle<'u:Calendar', typeof CalendarStyles>('u:Calendar', {
+  const variantStyles = useDefaultComponentStyle<'u:Calendar', typeof CalendarPresets>('u:Calendar', {
     variants,
     styles,
     transform: StyleSheet.flatten,

package/src/components/Calendar/style.ts

@@ -1,35 +1,6 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { TCalendarStyles, CalendarComposition } from './types'
 
 const createCalendarStyle = createDefaultVariantFactory<CalendarComposition, TCalendarStyles>()
 
-export const CalendarStyles = {
-  default: createCalendarStyle((theme) => ({
-    theme: {
-      backgroundColor: '#0000',
-      calendarBackground: '#0000',
-      textSectionTitleColor: theme.colors.textH,
-      textSectionTitleDisabledColor: theme.colors.disabled,
-      selectedDayBackgroundColor: theme.colors.primary,
-      selectedDayTextColor: theme.colors.white,
-      todayTextColor: theme.colors.textH,
-      dayTextColor: theme.colors.textP,
-      textDisabledColor: theme.colors.disabled,
-      dotColor: theme.colors.primary,
-      selectedDotColor: theme.colors.primary,
-      arrowColor: theme.colors.primary,
-      disabledArrowColor: theme.colors.disabled,
-      monthTextColor: theme.colors.textH,
-      indicatorColor: theme.colors.backgroundSecondary,
-      textDayFontFamily: theme.typography.fontFamily,
-      textMonthFontFamily: theme.typography.fontFamily,
-      textDayHeaderFontFamily: theme.typography.fontFamily,
-      textDayFontWeight: '400',
-      textMonthFontWeight: 'bold',
-      textDayHeaderFontWeight: '400',
-      textDayFontSize: 16,
-      textMonthFontSize: 22,
-      textDayHeaderFontSize: 15,
-    },
-  })),
-}
+export const CalendarPresets = includePresets((style) => createCalendarStyle(() => ({ theme: style })))

package/src/components/Checkbox/index.tsx

@@ -1,91 +1,154 @@
 import * as React from 'react'
 import {
+
   ComponentVariants,
   useDefaultComponentStyle,
   StylesOf,
-  Form,
-  useValidate,
-  GetRefType,
   PropsOf,
+  IconPlaceholder,
 } from '@codeleap/common'
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
-import { StyleSheet, Switch as NativeCheckbox } from 'react-native'
-import { FormError } from '../TextInput'
+import { ReactNode } from 'react'
+import { StyleSheet } from 'react-native'
 import { View } from '../View'
-import { Touchable } from '../Touchable'
+
 import {
-  CheckboxStyles,
+  CheckboxPresets,
   CheckboxComposition,
 } from './styles'
-import { InputLabel } from '../InputLabel'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { useAnimatedVariantStyles } from '../..'
+import { Touchable } from '../Touchable'
+import { Icon } from '../Icon'
+
 export * from './styles'
 
-type NativeCheckboxProps = Omit<
-  ComponentPropsWithRef<typeof NativeCheckbox>,
-  'thumbColor' | 'trackColor'
->
-type CheckboxProps = NativeCheckboxProps & {
-  variants?: ComponentVariants<typeof CheckboxStyles>['variants']
-  label?: ReactNode
+export type CheckboxProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> & {
+  variants?: ComponentVariants<typeof CheckboxPresets>['variants']
   styles?: StylesOf<CheckboxComposition>
-  validate?: Form.ValidatorFunctionWithoutForm | string
-  required?: boolean
+  value: boolean
+  onValueChange: (value: boolean) => void
+  style?: PropsOf<typeof View>['style']
+  checkboxOnLeft?: boolean
+  checkIcon?: IconPlaceholder
 }
 
-export const Checkbox = forwardRef<GetRefType<PropsOf<typeof View>['ref']>, CheckboxProps>(
-  (checkboxProps, ref) => {
-    const {
-      variants = [],
-      style = {},
-      styles = {},
-      label,
-      value,
-      onValueChange,
-      validate,
-      required,
-      ...props
-    } = checkboxProps
-
-    const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxStyles>('u:Checkbox', {
-      variants,
-      styles,
-      transform: StyleSheet.flatten,
-    })
-
-    const { error, showError } = useValidate(value, validate)
-
-    function getStyles(key: CheckboxComposition, styleObj = variantStyles) {
-      return [
-        styleObj[key],
-        value ? styleObj[key + ':checked'] : {},
-        showError ? styleObj[key + ':error'] : {},
-        checkboxProps.disabled ? styleObj[key + ':disabled'] : {},
-      ]
-    }
-
-    return (
-      <View style={[getStyles('wrapper'), style]} ref={ref} {...props}>
-        <Touchable
-          debugName={`Set checkbox value to ${!value}`}
-          style={getStyles('input')}
-          onPress={() => onValueChange(!value)}
-          styles={{
-            feedback: getStyles('inputFeedback'),
-          }}
-        >
-          <View style={getStyles('checkmarkWrapper')}>
-            <View style={getStyles('checkmark')} />
-          </View>
-
-          <InputLabel label={label} styles={{
-            asterisk: getStyles('labelAsterisk'),
-            wrapper: getStyles('labelWrapper'),
-            text: getStyles('labelText'),
-          }} required={required}/>
-
-        </Touchable>
-        <FormError text={error.message} style={getStyles('error')} />
+const reversedOrder = [...InputBaseDefaultOrder].reverse()
+const defaultProps: Partial<CheckboxProps> = {
+  checkIcon: 'check' as IconPlaceholder,
+}
+export const Checkbox = (props: CheckboxProps) => {
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps({
+    ...defaultProps,
+    ...props,
+  })
+
+  const {
+    variants = [],
+    style = {},
+    styles = {},
+    value,
+    disabled,
+    debugName,
+    onValueChange,
+    checkboxOnLeft,
+    checkIcon,
+  } = others
+
+  const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxPresets>('u:Checkbox', {
+    variants,
+    styles,
+    rootElement: 'wrapper',
+    transform: StyleSheet.flatten,
+  })
+
+  const boxAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['box:unchecked', 'box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
+    transition: variantStyles['box:transition'],
+    updater: () => {
+      'worklet'
+      let disabledStyle = {}
+      if (disabled) {
+        disabledStyle = value ? variantStyles['box:disabled-checked'] : variantStyles['box:disabled-unchecked']
+      }
+      const style = value ? variantStyles['box:checked'] : variantStyles['box:unchecked']
+
+      return {
+        ...style,
+        ...disabledStyle,
+      }
+
+    },
+    dependencies: [value, disabled],
+  })
+
+  const checkmarkWrapperAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['checkmarkWrapper:unchecked', 'checkmarkWrapper:disabled', 'checkmarkWrapper:checked', 'checkmarkWrapper:disabled-unchecked', 'checkmarkWrapper:disabled-checked'],
+    transition: variantStyles['checkmarkWrapper:transition'],
+    updater: () => {
+      'worklet'
+      let disabledStyle = {}
+      if (disabled) {
+        disabledStyle = value ? variantStyles['checkmarkWrapper:disabled-checked'] : variantStyles['checkmarkWrapper:disabled-unchecked']
+      }
+      const style = value ? variantStyles['checkmarkWrapper:checked'] : variantStyles['checkmarkWrapper:unchecked']
+      return {
+        ...style,
+        ...disabledStyle,
+      }
+
+    },
+    dependencies: [value, disabled],
+  })
+
+  const _checkboxOnLeft = checkboxOnLeft ?? variantStyles.__props?.checkboxOnLeft
+
+  return <InputBase
+    {...inputBaseProps}
+    debugName={debugName}
+    wrapper={Touchable}
+    styles={variantStyles}
+    wrapperProps={{
+      onPress: () => {
+        onValueChange(!value)
+      },
+      disabled,
+      rippleDisabled: true,
+    }}
+    order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
+    style={style}
+  >
+    <View
+      animated
+      style={[
+        variantStyles.box,
+        disabled && variantStyles['box:disabled'],
+        boxAnimation,
+      ]}
+    >
+      <View
+        animated
+        style={[
+          variantStyles.checkmarkWrapper,
+          disabled && variantStyles['checkmarkWrapper:disabled'],
+          checkmarkWrapperAnimation,
+        ]}
+      >
+        <Icon
+          name={checkIcon as any}
+          style={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
+
+        />
       </View>
-    )
-  },
-)
+    </View>
+  </InputBase>
+}
+
+Checkbox.defaultProps = defaultProps