@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/Switch/index.tsx

@@ -4,88 +4,140 @@ import {
   ComponentVariants,
   useDefaultComponentStyle,
   StylesOf,
-  useCodeleapContext,
-  FormTypes,
-  useValidate,
+  PropsOf,
 } from '@codeleap/common'
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
-import { StyleSheet, Switch as NativeSwitch } from 'react-native'
-import { FormError } from '../TextInput'
+import { ReactNode } from 'react'
+import { StyleSheet } from 'react-native'
 import { View } from '../View'
 
 import {
-  SwitchStyles,
+  SwitchPresets,
   SwitchComposition,
 } from './styles'
-import { InputLabel } from '../InputLabel'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { useAnimatedVariantStyles } from '../..'
+import { Touchable } from '../Touchable'
+
+
 export * from './styles'
-type NativeSwitchProps = Omit<
-  ComponentPropsWithRef<typeof NativeSwitch>,
-  'thumbColor' | 'trackColor'
->
-type SwitchProps = NativeSwitchProps & {
-  variants?: ComponentVariants<typeof SwitchStyles>['variants']
-  label?: ReactNode
+
+
+  
+export type SwitchProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> &  {
+  variants?: ComponentVariants<typeof SwitchPresets>['variants']
   styles?: StylesOf<SwitchComposition>
-  validate?: FormTypes.ValidatorFunctionWithoutForm | string
+  value: boolean
+  onValueChange: (value: boolean) => void
+  style?: PropsOf<typeof View>['style']
+  switchOnLeft?: boolean
 }
 
-export const Switch = forwardRef<NativeSwitch, SwitchProps>(
-  (switchProps, ref) => {
+const reversedOrder = [...InputBaseDefaultOrder].reverse()
+
+
+
+export const Switch = (props: SwitchProps) => {
+    const {
+      inputBaseProps,
+      others
+    } = selectInputBaseProps(props)
     const {
       variants = [],
       style = {},
       styles = {},
-      validate,
-      label,
       value,
-      ...props
-    } = switchProps
+      disabled,
+      debugName,
+      onValueChange,
+      switchOnLeft,
+    } = others
 
-    const variantStyles = useDefaultComponentStyle('Switch', {
+    const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
       variants,
+      styles, 
+      rootElement: 'wrapper',
+      transform: StyleSheet.flatten
+    })
+    
+    const trackAnimation = useAnimatedVariantStyles({
+      variantStyles,
+      animatedProperties: ['track:off','track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
+      transition: variantStyles['track:transition'],
+      updater: () =>{
+        'worklet'
+        let disabledStyle = {}
+        if(disabled){
+          disabledStyle =  value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
+        }
+        const style =  value ? variantStyles['track:on'] : variantStyles['track:off']
+
+        return {
+          ...style,
+          ...disabledStyle
+        }
+        
+      },
+      dependencies: [value, disabled],
     })
-    const { error, showError } = useValidate(switchProps.value, validate)
-    function getStyles(key: SwitchComposition) {
-      return [
-        variantStyles[key],
-        styles[key],
-        key === 'wrapper' ? style : {},
-        showError ? variantStyles[key + ':error'] : {},
-        showError ? styles[key + ':error'] : {},
-        value ? variantStyles[key + ':on'] : {},
-        value ? styles[key + ':on'] : {},
-        switchProps.disabled ? variantStyles[key + ':disabled'] : {},
-        switchProps.disabled ? styles[key + ':disabled'] : {},
-      ]
-    }
 
-    const inputStyles = getStyles('input')
+    const thumbAnimation = useAnimatedVariantStyles({
+      variantStyles,
+      animatedProperties: ['thumb:off','thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
+      transition: variantStyles['thumb:transition'],
+      updater: () =>{
+        'worklet'
+        let disabledStyle = {}
+        if(disabled){
+          disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
+        }
+        const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
+        return {
+          ...style,
+          ...disabledStyle
+        }
+        
+      },
+      dependencies: [value, disabled],
+    })
 
-    const { color, backgroundColor } = StyleSheet.flatten(inputStyles)
-    const { Theme } = useCodeleapContext()
+    const _switchOnLeft = switchOnLeft ?? variantStyles['__props']?.switchOnLeft
 
-    const thumbColor = color || Theme.colors.primary
-    const trackColor = backgroundColor || Theme.colors.gray
-    return (
-      <View style={getStyles('wrapper')}>
-        <View style={getStyles('inputWrapper')}>
-          <NativeSwitch
-            thumbColor={thumbColor}
-            trackColor={{ false: trackColor, true: trackColor }}
-            ios_backgroundColor={trackColor}
-            value={value}
-            ref={ref}
-            {...props}
-          />
-          <InputLabel label={label} styles={{
-            asterisk: getStyles('labelAsterisk'),
-            text: getStyles('labelText'),
-            wrapper: getStyles('labelWrapper'),
-          }} />
-        </View>
-        <FormError text={error.message} style={getStyles('error')} />
+    return <InputBase
+      {...inputBaseProps}
+      debugName={debugName}
+      wrapper={Touchable}
+      styles={variantStyles}
+      wrapperProps={{
+        onPress: () => {
+          onValueChange(!value)
+        },
+        disabled,
+        rippleDisabled: true
+      }}
+      order={_switchOnLeft ?  reversedOrder : InputBaseDefaultOrder}
+      style={style}
+      disabled={disabled} 
+      
+    >
+      <View 
+        animated 
+        style={[
+          variantStyles.track, 
+          disabled && variantStyles['track:disabled'],
+          trackAnimation
+        ]}
+        >
+        <View 
+          animated 
+          style={[
+            variantStyles.thumb, 
+            disabled && variantStyles['thumb:disabled'],
+            thumbAnimation
+          ]}
+        />
       </View>
-    )
-  },
-) as React.FC<SwitchProps>
+    </InputBase>
+}

package/src/components/Switch/styles.ts

@@ -1,38 +1,21 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { InputLabelComposition } from '../InputLabel'
+import { InputBaseParts, InputBaseStates } from '../InputBase'
+
+type AnimatableParts = 'track' | 'thumb'
+export type SwitchParts = InputBaseParts | AnimatableParts 
+
+export type SwitchAnimationStates = 'on' | 'off' | 'disabled-on' | 'disabled-off'
+
+export type SwitchStates = InputBaseStates
 
-export type SwitchParts = 'wrapper' | `label${Capitalize<InputLabelComposition>}` | 'input' | 'error' | 'inputWrapper'
 export type SwitchComposition =
   | SwitchParts
-  | `${SwitchParts}:disabled`
-  | `${SwitchParts}:on`
+  | `${SwitchParts}:${SwitchStates}`
+  | `${AnimatableParts}:transition`
+  | `${AnimatableParts}:${SwitchAnimationStates}`
+  | '__props'
 
 const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
 
-const presets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })),
-)
+export const SwitchPresets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })))
 
-export const SwitchStyles = {
-  ...presets,
-  default: createSwitchStyle((theme) => ({
-    wrapper: {},
-    inputWrapper: {
-      ...theme.presets.row,
-      ...theme.presets.alignCenter,
-    },
-    labelWrapper: {
-      ...theme.spacing.marginLeft(0.5),
-    },
-    input: {
-      color: theme.colors.white,
-      backgroundColor: theme.colors.gray,
-    },
-    'input:on': {
-      color: theme.colors.primary,
-      backgroundColor: theme.colors.gray,
-    },
-    error: {
-      color: theme.colors.negative,
-    },
-  })),
-}

package/src/components/Text/index.tsx

@@ -8,26 +8,25 @@ import {
   useState,
 } from '@codeleap/common'
 import { Animated, Platform, StyleSheet, Text as NativeText } from 'react-native'
-import { MotiText as _MotiText, MotiProps } from 'moti'
 import { useAnimateColor, usePressableFeedback } from '../../utils'
-import { TextStyles } from './styles'
+import { TextPresets } from './styles'
 
 export * from './styles'
 
 export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
   text?: React.ReactNode
-  variants?: ComponentVariants<typeof TextStyles>['variants']
+  variants?: ComponentVariants<typeof TextPresets>['variants']
   animated?: boolean
   colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
   debugName?: string
   debounce?: number
   pressDisabled?: boolean
-} & BaseViewProps & MotiProps
+} & BaseViewProps 
+
 
-const MotiText = Animated.createAnimatedComponent(_MotiText)
 
 export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
-  const { variants = [], text, children, onPress, style, colorChangeConfig, debounce = 1000, pressDisabled, ...props } = textProps
+  const { variants = [], text, children, onPress, style, debounce = 1000, pressDisabled, ...props } = textProps
 
   const pressPolyfillEnabled = Platform.OS === 'android' && !!onPress && !pressDisabled
 
@@ -61,7 +60,7 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
       }
     }
   }
-  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextStyles>('u:Text', {
+  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
     variants,
     transform: StyleSheet.flatten,
     rootElement: 'text',
@@ -69,13 +68,13 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
 
   const styles = StyleSheet.flatten([variantStyles.text, style])
 
-  const animatedColor = useAnimateColor(styles.color, colorChangeConfig)
+
 
   if (!!text && !TypeGuards.isString(text)) return <>{text}</>
 
-  const Component = textProps.animated ? MotiText : NativeText
+  const Component = textProps.animated ? Animated.Text : NativeText
 
-  const colorStyle = { color: props.animated ? animatedColor : styles.color }
+  
 
   const { getFeedbackStyle } = usePressableFeedback(styles, {
     disabled: !pressPolyfillEnabled,
@@ -89,10 +88,9 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
     onPress: pressDisabled ? null : _onPress,
   } : {}
 
-
   return <Component {...props}
     onPressIn={handlePress(true)} onPressOut={handlePress(false)}
-    style={[styles, colorStyle, feedbackStyle, !!onPress && pressDisabled ? variantStyles['text:disabled'] : null]}
+    style={[styles,  feedbackStyle, !!onPress && pressDisabled ? variantStyles['text:disabled'] : null]}
     allowFontScaling={false}
     {...pressProps}
     // @ts-ignore
@@ -104,22 +102,7 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
 
 })
 
-// const childArr = React.Children.toArray([
-//   text,
-//   children,
-// ])
-
-// return <View style={[styles, colorStyle]}>
-//   {
-//     childArr.map((child) => {
-//       if (TypeGuards.isString(child)) {
-//         // @ts-ignore
-//         return <Component {...props} ref={ref}>
-//           {child}
-//         </Component>
-
-//       }
-//       return child
-//     })
-//   }
-// </View>
+
+
+export const AnimatedText = Animated.createAnimatedComponent(Text)
+

package/src/components/Text/styles.ts

@@ -1,4 +1,4 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets, shadeColor, StylesOf } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
 import { FeedbackConfig } from '../../utils'
 
 export type TextComposition = 'text' | 'pressFeedback' | 'text:disabled'
@@ -11,43 +11,4 @@ const createTextStyle = createDefaultVariantFactory<
   TextComposition, TextStylesGen
 >()
 
-const presets = includePresets((styles) => createTextStyle(() => ({ text: styles })),
-)
-
-export const TextStyles = {
-  ...presets,
-  default: createTextStyle((theme) => {
-    const defaultStyle = assignTextStyle('p1')(theme).text
-    return {
-      text: {
-        fontFamily: theme.typography.fontFamily,
-        ...defaultStyle,
-      },
-      'text:disabled': {
-        color: theme.colors.disabled,
-      },
-      pressFeedback: {
-        type: 'highlight',
-        brightness: 0,
-        shiftOpacity: 0.3,
-      },
-    }
-  }),
-  h1: assignTextStyle('h1'),
-  h2: assignTextStyle('h2'),
-  h3: assignTextStyle('h3'),
-  h4: assignTextStyle('h4'),
-  h5: assignTextStyle('h5'),
-  h6: assignTextStyle('h6'),
-  p1: assignTextStyle('p1'),
-  p2: assignTextStyle('p2'),
-  p3: assignTextStyle('p3'),
-  p4: assignTextStyle('p4'),
-  link: assignTextStyle('p1'),
-  OSAlertBody: createTextStyle((theme) => ({
-    text: {
-      ...assignTextStyle('p1')(theme).text,
-      ...theme.presets.textCenter,
-    },
-  })),
-}
+export const TextPresets = includePresets((styles) => createTextStyle(() => ({ text: styles })))