@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/NumberIncrement/utils.ts

@@ -0,0 +1,27 @@
+import { useState, useCallback } from 'react'
+
+const initialState = {
+  message: '',
+  isValid: true,
+}
+
+export const useActionValidate = (validator: any) => {
+  const [error, setError] = useState(initialState)
+
+  const validate = useCallback((value: number) => {
+    if (!validator) return
+
+    const { valid, message } = validator(value, {})
+
+    setError({
+      isValid: valid,
+      message: message,
+    })
+  }, [validator])
+
+  return {
+    onAction: validate,
+    message: error?.message,
+    isValid: error?.isValid
+  }
+}

package/src/components/Pager/index.tsx

@@ -1,14 +1,22 @@
 import {
   ComponentVariants,
+  onUpdate,
+  TypeGuards,
   useDefaultComponentStyle,
+  useWarning
 } from '@codeleap/common'
-import React, {
-  ReactNode,
-} from 'react'
-import { StyleSheet } from 'react-native'
+import React, { ReactNode, useCallback, useRef } from 'react'
+import {
+  Dimensions,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleSheet,
+} from 'react-native'
 import { StylesOf } from '../../types/utility'
+import { ScrollProps } from '../Scroll'
 import { View } from '../View'
-import { PagerStyles, PagerComposition } from './styles'
+import { PagerPresets, PagerComposition } from './styles'
 export * from './styles'
 
 export type PageProps = {
@@ -19,34 +27,46 @@ export type PageProps = {
   page: number
   index: number
   isPrevious: boolean
+
 }
 
-export type PagerProps = {
-  variants?: ComponentVariants<typeof PagerStyles>['variants']
+export type PagerProps = React.PropsWithChildren<{
+  variants?: ComponentVariants<typeof PagerPresets>['variants']
   styles?: StylesOf<PagerComposition>
   children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
   page?: number
   style?: any
   setPage?: (page: number) => void
   returnEarly?: boolean
-  renderPageWrapper?:React.FC<PageProps>
+  renderPageWrapper?: React.FC<PageProps>
   pageWrapperProps?: any
-}
+  width?: number
+  onScroll: ScrollProps['onScroll']
+   /** If TRUE render page, nextPage and prevPage only */
+   windowing?:boolean
+}>
 
-export const Pager:React.FC<PagerProps> = (pagerProps) => {
+export const Pager: React.FC<PagerProps> = (pagerProps) => {
   const {
-
     styles,
     variants,
+    width: widthProp,
     page,
     style = {},
     returnEarly = true,
     renderPageWrapper,
     pageWrapperProps = {},
     children,
+    windowing = false,
+    setPage,
   } = pagerProps
 
-  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerStyles>(
+  
+  const childArr = React.Children.toArray(children)
+  const scrollRef = useRef<ScrollView>(null)
+  const [positionX, setPositionX] = React.useState(0)
+  
+  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerPresets>(
     'u:Pager',
     {
       styles,
@@ -54,69 +74,102 @@ export const Pager:React.FC<PagerProps> = (pagerProps) => {
       variants,
     },
   )
+
+  
+  const windowWidth = Dimensions.get('window').width
+  let width = widthProp ?? variantStyles.wrapper.width
+
+  const validWidth = TypeGuards.isNumber(width)
+  
+  if (!validWidth) {
+    width = windowWidth
+    
+  }
+
+  useWarning(
+    !validWidth,
+    'Pager',
+    'provided width is not a number, using default width',
+  )
+
   const nChildren = React.Children.count(children)
 
   const lastPage = nChildren - 1
 
+  const WrapperComponent = renderPageWrapper || View
 
-  const childArr = React.Children.toArray(children)
 
-  const WrapperComponent = renderPageWrapper || View
+  const handleScrollEnd = useCallback(
+    ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const x = nativeEvent.contentOffset.x
+      const toPage = Math.ceil(x / width)
+
+      if (toPage !== page && toPage <= childArr.length - 1) {
+        setPage(toPage)
+        setPositionX(toPage * width)
+      }
+    },
+    [childArr, page, setPage],
+  )
 
-  // Reamimated seems to glitch if this is not done
-  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+  onUpdate(() => {
+    const x = width * page
+    if (scrollRef.current && x !== positionX) {
+      scrollRef.current.scrollTo({
+        x,
+        animated: true,
+      })
+      setPositionX(x)
+    }
+  }, [page])
 
   return (
-    <View style={[variantStyles.wrapper, style]} >
-      {
-        childArr.map((child:PagerProps['children'][number], index) => {
-          const isActive = index === page
-          const isLast = index === lastPage
-          const isFirst = index === 0
-          const isNext = index === page + 1
-          const isPrevious = index === page - 1
-          const shouldRender = isActive || isNext || isPrevious
-
-          if (!shouldRender && returnEarly) return null
-          let pos = 0
-
-          if (isActive) {
-            pos = 1
-          } else if (index > page) {
-            pos = 2
-          } else {
-            pos = 0
-          }
-
-          const pageProps = {
-            isLast,
-            isActive,
-            isFirst,
-            isNext,
-            isPrevious,
-            index,
-            page,
-          }
-
-          const content = typeof child === 'function' ? child(pageProps) : child
-
-          const wrapperProps = {
-            key: index,
-            style: variantStyles.page,
-            animated: true,
-            transition: variantStyles['page:transition'],
-            animate: [variantStyles['page:previous'], variantStyles['page:current'], variantStyles['page:next']][pos],
-            ...pageWrapperProps,
-          }
-
-          return (
-            <WrapperComponent {...wrapperProps}>
-              {content}
-            </WrapperComponent>
-          )
-
-        })
-      }
-    </View>
+    <ScrollView
+      {...pagerProps}
+      ref={scrollRef}
+      horizontal
+      pagingEnabled
+      onMomentumScrollEnd={handleScrollEnd}
+      scrollEventThrottle={300}
+      showsHorizontalScrollIndicator={false}
+      scrollEnabled={childArr.length > 1}
+      style={[variantStyles.wrapper, style]}
+    >
+      {childArr.map((child: PagerProps['children'][number], index) => {
+
+        const isActive = index === page
+        const isLast = index === lastPage
+        const isFirst = index === 0
+        const isNext = index === page + 1
+        const isPrevious = index === page - 1
+        
+        const shouldRender = windowing ? (isActive || isNext || isPrevious) : true
+
+        if (!shouldRender && returnEarly) {
+          return <View style={{ height: '100%', width }} />
+        }
+
+
+        const pageProps:PageProps = {
+          isLast,
+          isActive,
+          isFirst,
+          isNext,
+          isPrevious,
+          index,
+          page,
+        }
+
+        const content = typeof child === 'function' ? child(pageProps) : child
+
+        const wrapperProps = {
+          key: index,
+          style: [{ height: '100%', width }, variantStyles.page],
+          ...pageWrapperProps,
+        }
+
+        return <WrapperComponent {...wrapperProps}>{content}</WrapperComponent>
+      })}
+    </ScrollView>
   )
 }

package/src/components/Pager/styles.ts

@@ -2,80 +2,13 @@ import {
   createDefaultVariantFactory,
   includePresets,
 } from '@codeleap/common'
-import { Easing } from 'react-native'
+
 
 export type PagerComposition =
   | 'page'
-  | 'page:transition'
-  | 'page:previous'
-  | 'page:next'
-  | 'page:current'
   | 'wrapper'
 
 const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
 
-const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
-)
-export const defaultPagerTransition = {
-  type: 'timing',
-  duration: 300,
-  easing: Easing.linear,
-}
-
-export function pagerAnimation(height, width, translate = 'X', transition = defaultPagerTransition) {
-  const translateProp = `translate${translate}`
-
-  const translateVal = translate === 'X' ? width : height
-
-  return {
-    wrapper: {
-      height,
-      width,
-      overflow: 'hidden',
-    },
-    'page:transition': {
-      [translateProp]: transition,
-    },
-    'page:next': {
-      [translateProp]: translateVal,
-
-    },
-    'page:current': {
-      [translateProp]: 0,
-    },
-    'page:previous': {
-      [translateProp]: -translateVal,
-    },
-  }
-}
-
-export const PagerStyles = {
-  ...presets,
-  default: createPagerStyle((theme) => {
-    const width = theme.values.width
-    const height = theme.values.window.height * 0.8
-    return {
-      ...pagerAnimation(height, width, 'X'),
-      page: {
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        top: 0,
-      },
-    }
-  }),
-  horizontal: createPagerStyle((theme) => {
+export const PagerPresets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })))
 
-    const width = theme.values.width
-    const height = theme.values.window.height * 0.8
-    return pagerAnimation(height, width, 'X')
-  }),
-  vertical: createPagerStyle((theme) => {
-    const height = theme.values.window.height * 0.8
-    const width = theme.values.width
-    return pagerAnimation(height, width, 'Y')
-  }),
-}

package/src/components/RadioInput/index.tsx

@@ -5,102 +5,179 @@ import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import {
   ComponentVariants,
+  FormTypes,
   getNestedStylesByKey,
   StylesOf,
+  TypeGuards,
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import { View } from '../View'
-import { RadioInputComposition, RadioInputStyles } from './styles'
+import { RadioInputComposition, RadioInputPresets } from './styles'
 import { InputLabel } from '../InputLabel'
-
+import { StyleSheet } from 'react-native'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
 export * from './styles'
 
-type RadioItem<T extends unknown = any> = {
-  value: T
-  label: ReactNode
-}
+type WrapperProps = InputBaseProps
 
-const getRadioStyle = (props) => useDefaultComponentStyle<'u:RadioInput', typeof RadioInputStyles>('u:RadioInput', props)
-
-export type RadioButtonProps = Omit<
-  ComponentPropsWithoutRef<typeof Touchable>,
-  'style'
-> & {
-  item: RadioItem
-  select: () => void
-  style: StylesOf<RadioInputComposition>
-  checked: boolean
-  defaultValue?: number
+type RadioOption<T> = FormTypes.Options<T>[number] & {
+  disabled?: boolean
 }
-
-export type RadioGroupProps<T> = {
-  options: RadioItem<T>[]
+export type RadioGroupProps<T extends string|number> = WrapperProps & {
+  options: RadioOption<T>[]
   value: T
   onValueChange(value: T): void
-  required?: boolean
   label: ReactNode
   styles?: StylesOf<RadioInputComposition>
-} & ComponentVariants<typeof RadioInputStyles>
-
-export const RadioButton: React.FC<RadioButtonProps> = ({
-  item,
-  select,
-  style,
-  checked,
-  ...props
-}) => {
-  return (
-    <Touchable onPress={select} style={style.itemWrapper} debugName={'Change radioButton value'} styles={{
-      feedback: style.buttonFeedback,
-    }}>
-      <View style={[style.button, checked && style['button:checked']]}>
-        <View
-          style={[style.buttonMark, checked && style['buttonMark:checked']]}
-        />
-      </View>
-      {typeof item.label === 'string' ? (
-        <Text text={item.label} style={style.text} />
+  variants?: ComponentVariants<typeof RadioInputPresets>['variants']
+  radioOnRight?: boolean
+}
+
+type OptionProps<T extends string|number> = {
+  item: RadioOption<T>
+  selected: boolean
+  onSelect(): void
+  styles?: StylesOf<RadioInputComposition>
+  debugName?: string
+  disabled?: boolean
+  separator?: boolean
+  reverseOrder?: boolean
+}
+
+const Option = <T extends string|number>(props: OptionProps<T>) => {
+  const {
+    debugName,
+    item,
+    disabled,
+    styles,
+    selected,
+    onSelect,
+    separator = false,
+    reverseOrder,
+  } = props
+
+  const isDisabled = disabled || item.disabled
+
+  const getStyle = (key) => {
+    if (isDisabled && selected) {
+      return styles[`${key}:selectedDisabled`]
+    }
+    if (isDisabled) {
+      return styles[`${key}:disabled`]
+    }
+    if (selected) {
+      return styles[`${key}:selected`]
+    }
+    return styles[key]
+  }
+
+  const label = TypeGuards.isString(item.label) ? <Text
+    style={[
+      styles.optionLabel,
+      getStyle('optionLabel'),
+    ]}
+    text={item.label}
+  /> : item.label
+
+  return <>
+    <Touchable
+      debugName={`${debugName} option ${item.value}`}
+      style={[
+        styles.optionWrapper,
+        getStyle('optionWrapper'),
+      ]}
+      rippleDisabled
+      onPress={onSelect}
+      disabled={isDisabled}
+    >
+
+      {reverseOrder ? (
+        <>
+          {label}
+          <View
+            style={[
+              styles.optionIndicator,
+              getStyle('optionIndicator'),
+            ]}
+          >
+            <View
+              style={[
+                styles.optionIndicatorInner,
+                getStyle('optionIndicatorInner'),
+              ]}
+            />
+          </View>
+        </>
       ) : (
-        item.label
+        <>
+          <View
+            style={[
+              styles.optionIndicator,
+              getStyle('optionIndicator'),
+            ]}
+          >
+            <View
+              style={[
+                styles.optionIndicatorInner,
+                getStyle('optionIndicatorInner'),
+              ]}
+            />
+          </View>
+          {label}
+        </>
       )}
+
     </Touchable>
-  )
+    {separator && <View style={styles.optionSeparator} />}
+  </>
 }
 
-export const RadioGroup = <T extends unknown>(
-  radioGroupProps: RadioGroupProps<T>,
+export const RadioGroup = <T extends string|number>(
+  props: RadioGroupProps<T>,
 ) => {
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps(props)
+
   const {
     options,
     value,
     onValueChange,
-    label,
-    responsiveVariants,
-    required = false,
     variants,
     styles,
-  } = radioGroupProps
+    disabled,
+    debugName,
+    radioOnRight,
+  } = others
 
-  const radioStyle = getRadioStyle({
-    responsiveVariants,
+  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', {
     variants,
     styles,
+    transform: StyleSheet.flatten,
   })
-  return (
-    <View style={radioStyle.wrapper}>
-      <InputLabel required={required} label={label} styles={getNestedStylesByKey('label', radioStyle)}/>
-      <View style={radioStyle.list}>
-        {options?.map((item, idx) => (
-          <RadioButton
-            debugName={'RadioButton'}
-            item={item}
-            key={idx}
-            style={radioStyle}
-            checked={value === item.value}
-            select={() => onValueChange(item.value)}
-          />
-        ))}
-      </View>
-    </View>
-  )
+
+  const _radioOnRight = radioOnRight ?? variantStyles.__props?.radioOnRight
+
+  return <InputBase
+    {...inputBaseProps}
+    disabled={disabled}
+    styles={variantStyles}
+    debugName={debugName}
+  >
+    {options?.map((item, idx) => (
+      <Option
+        debugName={debugName}
+        item={item}
+        key={idx}
+        disabled={disabled}
+        styles={variantStyles}
+        selected={value === item.value}
+        onSelect={() => onValueChange(item.value)}
+        separator={idx < options.length - 1}
+        reverseOrder={_radioOnRight}
+      />
+    ))}
+  </InputBase>
+
 }

package/src/components/RadioInput/styles.ts

@@ -1,67 +1,14 @@
-import {
-  createDefaultVariantFactory, includePresets,
-} from '@codeleap/common'
-import { InputLabelComposition } from '../InputLabel'
-type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark' | 'buttonFeedback'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { IconLessInputBaseParts } from '../InputBase'
 
-type RadioGroupParts = `label${Capitalize<InputLabelComposition>}` | 'wrapper' | 'list'
+type OptionParts = 'wrapper' | 'label' | 'indicator' | 'indicatorInner' | 'separator'
+type OptionStates = 'selected' | 'disabled' | 'selectedDisabled'
 
-export type RadioInputComposition =
-  | `${RadioParts}:checked`
-  | RadioParts
-  | RadioGroupParts
+type OptionComposition = `${OptionParts}:${OptionStates}` | OptionParts
+
+export type RadioInputComposition = IconLessInputBaseParts | `${IconLessInputBaseParts}:disabled` | `option${Capitalize<OptionComposition>}` | '__props'
 
 const createRadioStyle =
   createDefaultVariantFactory<RadioInputComposition>()
 
-const presets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))
-
-export const RadioInputStyles = {
-  ...presets,
-  default: createRadioStyle((theme) => {
-
-    const itemHeight = theme.typography.baseFontSize * 1.2
-    const markHeight = itemHeight / 2
-    const translateX = -(markHeight / 2)
-    const translateY = -(markHeight / 2)
-    return {
-      itemWrapper: {
-        ...theme.presets.row,
-        ...theme.spacing.marginVertical(1.3),
-      },
-      button: {
-        height: itemHeight,
-        width: itemHeight,
-        ...theme.border.primary(1),
-        borderRadius: theme.borderRadius.large,
-
-        position: 'relative',
-        ...theme.spacing.marginRight(1),
-      },
-      buttonFeedback: { type: 'opacity', value: 0.5 },
-      buttonMark: {
-        backgroundColor: theme.colors.primary,
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        height: markHeight,
-        width: markHeight,
-
-        transform: [{ translateX }, { translateY }],
-        borderRadius: theme.borderRadius.large,
-        opacity: 0,
-      },
-      'buttonMark:checked': {
-        opacity: 1,
-      },
-    }
-  }),
-  square: createRadioStyle(() => ({
-    buttonMark: {
-      borderRadius: 0,
-    },
-    button: {
-      borderRadius: 0,
-    },
-  })),
-}
+export const RadioInputPresets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))