@codeleap/mobile 1.4.0 → 1.4.1

package/src/components/Pager/styles.ts

@@ -1,51 +1,51 @@
-import {
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
-
-export type PagerComposition =
-  | 'page'
-  | 'page:transition'
-  | 'page:pose:previous'
-  | 'page:pose:next'
-  | 'page:pose:current'
-  | 'wrapper';
-
-const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
-
-const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
-)
-
-export const MobilePagerStyles = {
-  ...presets,
-  default: createPagerStyle((Theme) => {
-    const transition = {
-      duration: 500,
-      ease: 'easeInOut',
-      useNativeDriver: true,
-    }
-
-    return {
-      wrapper: {
-        ...Theme.presets.full,
-      },
-      'page:pose:next': {
-        left: Theme.values.width * 1.8,
-        transition: transition,
-      },
-      'page:pose:current': {
-        left: 0,
-        transition: transition,
-      },
-      'page:pose:previous': {
-        left: -Theme.values.width * 1.8,
-        transition: transition,
-      },
-      page: {
-        width: '100%',
-        height: '100%',
-      },
-    }
-  }),
-  pageless: createPagerStyle(() => ({})),
-}
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+
+export type PagerComposition =
+  | 'page'
+  | 'page:transition'
+  | 'page:pose:previous'
+  | 'page:pose:next'
+  | 'page:pose:current'
+  | 'wrapper'
+
+const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
+
+const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
+)
+
+export const MobilePagerStyles = {
+  ...presets,
+  default: createPagerStyle((Theme) => {
+    const transition = {
+      duration: 500,
+      ease: 'easeInOut',
+      useNativeDriver: true,
+    }
+
+    return {
+      wrapper: {
+        ...Theme.presets.full,
+      },
+      'page:pose:next': {
+        left: Theme.values.width * 1.8,
+        transition: transition,
+      },
+      'page:pose:current': {
+        left: 0,
+        transition: transition,
+      },
+      'page:pose:previous': {
+        left: -Theme.values.width * 1.8,
+        transition: transition,
+      },
+      page: {
+        width: '100%',
+        height: '100%',
+      },
+    }
+  }),
+  pageless: createPagerStyle(() => ({})),
+}

package/src/components/RadioInput/index.tsx

@@ -1,100 +1,101 @@
-import * as React from 'react'
-import { ReactNode, useRef, ComponentPropsWithoutRef } from 'react'
-import { v4 } from 'uuid'
-
-import { Text } from '../Text'
-import { Touchable } from '../Touchable'
-import {
-  ComponentVariants,
-  StylesOf,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import { View } from '../View'
-import { MobileRadioInputStyles, MobileRadioInputComposition } from './styles'
-
-export * from './styles'
-
-type RadioItem<T extends unknown = any> = {
-  value: T;
-  label: ReactNode;
-};
-
-const getRadioStyle = (props) => useDefaultComponentStyle('RadioInput', props)
-
-export type RadioButtonProps = Omit<
-  ComponentPropsWithoutRef<typeof Touchable>,
-  'style'
-> & {
-  item: RadioItem;
-  select: () => void;
-  style: StylesOf<MobileRadioInputComposition>;
-  checked: boolean;
-  defaultValue?: number;
-};
-
-export type RadioGroupProps<T> = {
-  options: RadioItem<T>[];
-  value: T;
-  onValueChange(value: T): void;
-  label: ReactNode;
-  styles?: StylesOf<MobileRadioInputComposition>;
-} & ComponentVariants<typeof MobileRadioInputStyles>;
-
-export const RadioButton: React.FC<RadioButtonProps> = ({
-  item,
-  select,
-  style,
-  checked,
-  ...props
-}) => {
-  return (
-    <Touchable onPress={select} style={style.itemWrapper}>
-      <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} />
-      ) : (
-        item.label
-      )}
-    </Touchable>
-  )
-}
-
-export const RadioGroup = <T extends unknown>(
-  radioGroupProps: RadioGroupProps<T>,
-) => {
-  const {
-    options,
-    value,
-    onValueChange,
-    label,
-    responsiveVariants,
-    variants,
-    styles,
-  } = radioGroupProps
-
-  const radioStyle = getRadioStyle({
-    responsiveVariants,
-    variants,
-    styles,
-  })
-  return (
-    <View style={radioStyle.wrapper}>
-      {typeof label === 'string' ? <Text text={label} /> : label}
-      <View style={radioStyle.listWrapper}>
-        {options?.map((item, idx) => (
-          <RadioButton
-            item={item}
-            key={idx}
-            style={radioStyle}
-            checked={value === item.value}
-            select={() => onValueChange(item.value)}
-          />
-        ))}
-      </View>
-    </View>
-  )
-}
+import * as React from 'react'
+import { ReactNode, useRef, ComponentPropsWithoutRef } from 'react'
+import { v4 } from 'uuid'
+
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import {
+  ComponentVariants,
+  StylesOf,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { View } from '../View'
+import { MobileRadioInputStyles, MobileRadioInputComposition } from './styles'
+
+export * from './styles'
+
+type RadioItem<T extends unknown = any> = {
+  value: T
+  label: ReactNode
+}
+
+const getRadioStyle = (props) => useDefaultComponentStyle('RadioInput', props)
+
+export type RadioButtonProps = Omit<
+  ComponentPropsWithoutRef<typeof Touchable>,
+  'style'
+> & {
+  item: RadioItem
+  select: () => void
+  style: StylesOf<MobileRadioInputComposition>
+  checked: boolean
+  defaultValue?: number
+}
+
+export type RadioGroupProps<T> = {
+  options: RadioItem<T>[]
+  value: T
+  onValueChange(value: T): void
+  label: ReactNode
+  styles?: StylesOf<MobileRadioInputComposition>
+} & ComponentVariants<typeof MobileRadioInputStyles>
+
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  item,
+  select,
+  style,
+  checked,
+  ...props
+}) => {
+  return (
+    <Touchable onPress={select} style={style.itemWrapper} debugName={'Change radioButton value'}>
+      <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} />
+      ) : (
+        item.label
+      )}
+    </Touchable>
+  )
+}
+
+export const RadioGroup = <T extends unknown>(
+  radioGroupProps: RadioGroupProps<T>,
+) => {
+  const {
+    options,
+    value,
+    onValueChange,
+    label,
+    responsiveVariants,
+    variants,
+    styles,
+  } = radioGroupProps
+
+  const radioStyle = getRadioStyle({
+    responsiveVariants,
+    variants,
+    styles,
+  })
+  return (
+    <View style={radioStyle.wrapper}>
+      {typeof label === 'string' ? <Text text={label} /> : label}
+      <View style={radioStyle.listWrapper}>
+        {options?.map((item, idx) => (
+          <RadioButton
+            debugName={'RadioButton'}
+            item={item}
+            key={idx}
+            style={radioStyle}
+            checked={value === item.value}
+            select={() => onValueChange(item.value)}
+          />
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/components/RadioInput/styles.ts

@@ -1,67 +1,67 @@
-import {
-  createDefaultVariantFactory,
-  RadioInputStyles,
-} from '@codeleap/common'
-type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark';
-
-type RadioGroupParts = 'label' | 'wrapper' | 'list';
-
-export type MobileRadioInputComposition =
-  | `${RadioParts}:checked`
-  | RadioParts
-  | RadioGroupParts;
-
-const createRadioStyle =
-  createDefaultVariantFactory<MobileRadioInputComposition>()
-
-const defaultStyles = RadioInputStyles.default
-
-export const MobileRadioInputStyles = {
-  ...RadioInputStyles,
-  default: createRadioStyle((theme) => {
-    const style = defaultStyles(theme)
-
-    const itemHeight = theme.typography.baseFontSize * 1.2
-    const markHeight = itemHeight / 2
-    const translateX = -(markHeight / 2)
-    const translateY = -(markHeight / 2)
-    return {
-      ...style,
-      itemWrapper: {
-        ...style.itemWrapper,
-      },
-      button: {
-        height: itemHeight,
-        width: itemHeight,
-        ...theme.border.primary(1),
-        borderRadius: theme.borderRadius.large,
-
-        position: 'relative',
-        ...theme.spacing.marginRight(1),
-      },
-      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,
-    },
-  })),
-}
+import {
+  createDefaultVariantFactory,
+  RadioInputStyles,
+} from '@codeleap/common'
+type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark'
+
+type RadioGroupParts = 'label' | 'wrapper' | 'list'
+
+export type MobileRadioInputComposition =
+  | `${RadioParts}:checked`
+  | RadioParts
+  | RadioGroupParts
+
+const createRadioStyle =
+  createDefaultVariantFactory<MobileRadioInputComposition>()
+
+const defaultStyles = RadioInputStyles.default
+
+export const MobileRadioInputStyles = {
+  ...RadioInputStyles,
+  default: createRadioStyle((theme) => {
+    const style = defaultStyles(theme)
+
+    const itemHeight = theme.typography.baseFontSize * 1.2
+    const markHeight = itemHeight / 2
+    const translateX = -(markHeight / 2)
+    const translateY = -(markHeight / 2)
+    return {
+      ...style,
+      itemWrapper: {
+        ...style.itemWrapper,
+      },
+      button: {
+        height: itemHeight,
+        width: itemHeight,
+        ...theme.border.primary(1),
+        borderRadius: theme.borderRadius.large,
+
+        position: 'relative',
+        ...theme.spacing.marginRight(1),
+      },
+      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,
+    },
+  })),
+}

package/src/components/Scroll.tsx

@@ -1,98 +1,98 @@
-import * as React from 'react'
-import { forwardRef, useState } from 'react'
-import {
-  deepEqual,
-  onUpdate,
-  useDefaultComponentStyle,
-  usePrevious,
-  useCodeleapContext,
-} from '@codeleap/common'
-import {
-  KeyboardAwareScrollViewProps,
-  KeyboardAwareScrollView as KBDView,
-} from 'react-native-keyboard-aware-scroll-view'
-import { RefreshControl, ScrollView, ScrollViewProps, ViewStyle } from 'react-native'
-import { ViewProps } from './View'
-
-export type ScrollProps = KeyboardAwareScrollViewProps &
-  ViewProps & {
-    onRefresh?: () => void;
-    refreshTimeout?: number;
-    changeData?: any;
-    styles?: ViewStyle
-  };
-
-const KeyboardAwareScrollView =
-  KBDView as unknown as React.ForwardRefExoticComponent<
-    ViewProps & {
-      refreshControl?: JSX.Element;
-      ref?: ScrollView;
-     
-    } & ScrollViewProps
-  >
-
-export const Scroll = forwardRef<ScrollView, ScrollProps>(
-  (scrollProps, ref) => {
-    const {
-      variants = [],
-      style,
-      refreshTimeout = 3000,
-      children,
-      changeData,
-      styles,
-      ...props
-    } = scrollProps
-    const hasRefresh = !!props.onRefresh
-    const [refreshing, setRefreshing] = useState(false)
-
-    const timer = React.useRef(null)
-    const previousData = usePrevious(changeData)
-
-    const onRefresh = () => {
-      if (timer.current) {
-        clearTimeout(timer.current)
-      }
-
-      setRefreshing(true)
-
-      props.onRefresh()
-
-      timer.current = setTimeout(() => {
-        setRefreshing(false)
-      }, refreshTimeout)
-    }
-    onUpdate(() => {
-      if (refreshing && !deepEqual(previousData, changeData)) {
-        setRefreshing(false)
-        if (timer.current) {
-          clearTimeout(timer.current)
-        }
-      }
-    }, [refreshing, changeData])
-    const { Theme } = useCodeleapContext()
-
-    const variantStyles = useDefaultComponentStyle('View', {
-      variants,
-      styles: {
-        wrapper: styles,
-      },
-      rootElement: 'wrapper',
-    })
-
-    return (
-      <KeyboardAwareScrollView
-        style={[Theme.presets.full, style]}
-        contentContainerStyle={[variantStyles.wrapper]}
-        ref={ref as unknown as ScrollView}
-        {...props}
-        refreshControl={
-          hasRefresh && (
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          )
-        }
-      >
-        {children}
-      </KeyboardAwareScrollView>
-    )
-  },
-)
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  KeyboardAwareScrollViewProps,
+  KeyboardAwareScrollView as KBDView,
+} from 'react-native-keyboard-aware-scroll-view'
+import { RefreshControl, ScrollView, ScrollViewProps, ViewStyle } from 'react-native'
+import { ViewProps } from './View'
+
+export type ScrollProps = KeyboardAwareScrollViewProps &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    styles?: ViewStyle
+  }
+
+const KeyboardAwareScrollView =
+  KBDView as unknown as React.ForwardRefExoticComponent<
+    ViewProps & {
+      refreshControl?: JSX.Element
+      ref?: ScrollView
+
+    } & ScrollViewProps
+  >
+
+export const Scroll = forwardRef<ScrollView, ScrollProps>(
+  (scrollProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      children,
+      changeData,
+      styles,
+      ...props
+    } = scrollProps
+    const hasRefresh = !!props.onRefresh
+    const [refreshing, setRefreshing] = useState(false)
+
+    const timer = React.useRef(null)
+    const previousData = usePrevious(changeData)
+
+    const onRefresh = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+      }
+
+      setRefreshing(true)
+
+      props.onRefresh()
+
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshing && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
+      }
+    }, [refreshing, changeData])
+    const { Theme } = useCodeleapContext()
+
+    const variantStyles = useDefaultComponentStyle('View', {
+      variants,
+      styles: {
+        wrapper: styles,
+      },
+      rootElement: 'wrapper',
+    })
+
+    return (
+      <KeyboardAwareScrollView
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as ScrollView}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      >
+        {children}
+      </KeyboardAwareScrollView>
+    )
+  },
+)