@codeleap/mobile 2.3.0 → 2.3.2

package/src/components/Pager/styles.ts

@@ -0,0 +1,81 @@
+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) => {
+
+    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

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import { ReactNode, ComponentPropsWithoutRef } from 'react'
+
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import {
+  ComponentVariants,
+  getNestedStylesByKey,
+  StylesOf,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { View } from '../View'
+import { RadioInputComposition, RadioInputStyles } from './styles'
+import { InputLabel } from '../InputLabel'
+
+export * from './styles'
+
+type RadioItem<T extends unknown = any> = {
+  value: T
+  label: ReactNode
+}
+
+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
+}
+
+export type RadioGroupProps<T> = {
+  options: RadioItem<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} />
+      ) : (
+        item.label
+      )}
+    </Touchable>
+  )
+}
+
+export const RadioGroup = <T extends unknown>(
+  radioGroupProps: RadioGroupProps<T>,
+) => {
+  const {
+    options,
+    value,
+    onValueChange,
+    label,
+    responsiveVariants,
+    required = false,
+    variants,
+    styles,
+  } = radioGroupProps
+
+  const radioStyle = getRadioStyle({
+    responsiveVariants,
+    variants,
+    styles,
+  })
+  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>
+  )
+}

package/src/components/RadioInput/styles.ts

@@ -0,0 +1,67 @@
+import {
+  createDefaultVariantFactory, includePresets,
+} from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark' | 'buttonFeedback'
+
+type RadioGroupParts = `label${Capitalize<InputLabelComposition>}` | 'wrapper' | 'list'
+
+export type RadioInputComposition =
+  | `${RadioParts}:checked`
+  | RadioParts
+  | RadioGroupParts
+
+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,
+    },
+  })),
+}

package/src/components/Scroll/index.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+} from '@codeleap/common'
+
+import { RefreshControl, RefreshControlProps, ScrollView, StyleSheet } from 'react-native'
+import { ViewProps } from '../View'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { StylesOf } from '../../types'
+import { ScrollComposition, ScrollStyles } from './styles'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+import { ScrollView as MotiScrollView } from 'moti'
+// import { KeyboardAwareScrollView } from '../../utils'
+
+type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
+
+export type ScrollProps = KeyboardAwareScrollViewProps &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    keyboardAware?: GetKeyboardAwarePropsOptions
+    refreshing?: boolean
+    styles?: StylesOf<ScrollComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+    debugName?: string
+  }
+
+export const Scroll = forwardRef<ScrollView, ScrollProps>(
+  (scrollProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      children,
+      changeData,
+      styles = {},
+      refreshControlProps = {},
+      contentContainerStyle,
+      keyboardAware,
+      debugName = '',
+      animated = true,
+      ...props
+    } = scrollProps
+    const hasRefresh = !!props.onRefresh
+    const [refreshingState, setRefreshing] = useState(false)
+    const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
+
+    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 (refreshingDisplay && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
+      }
+    }, [refreshingDisplay, changeData])
+
+    const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollStyles>('u:Scroll', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+      rootElement: 'content',
+    })
+
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+    const _scrollProps = {
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: [variantStyles.content, contentContainerStyle],
+      ref: ref as unknown as ScrollView,
+      refreshControl: hasRefresh && (
+        <RefreshControl
+          refreshing={refreshingDisplay}
+          onRefresh={onRefresh}
+          tintColor={refreshStyles?.color}
+          colors={[refreshStyles?.color]}
+          {...refreshControlProps}
+        />
+      ),
+      ...props,
+    }
+    const keyboard = useKeyboardAwareView({
+      debugName,
+    })
+
+    const rootProps = keyboard.getKeyboardAwareProps(_scrollProps, {
+      adapt: 'marginBottom',
+      baseStyleProp: 'style',
+      animated,
+      ...keyboardAware,
+
+    })
+    const Component = animated ? MotiScrollView : ScrollView
+
+    return (
+      <Component
+        {...rootProps}
+
+      >
+        {children}
+      </Component>
+    )
+  },
+)
+export * from './styles'

package/src/components/Scroll/styles.ts

@@ -0,0 +1,18 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+
+export type ScrollComposition = 'wrapper' |'content' | 'refreshControl'
+
+const createScrollStyle = createDefaultVariantFactory<ScrollComposition>()
+
+export const ScrollStyles = {
+  default: createScrollStyle((theme) => {
+    return {
+      wrapper: {
+        ...theme.presets.fullHeight,
+      },
+      refreshControl: {
+        color: theme.colors.primary,
+      },
+    }
+  }),
+}

package/src/components/Sections/index.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+
+import { RefreshControl, SectionList } from 'react-native'
+import { View, ViewProps } from '../View'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { KeyboardAwareSectionList } from '../../utils'
+
+export type SectionListProps = KeyboardAwareScrollViewTypes.KeyboardAwareSectionListProps<any> &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    separators?: boolean
+  }
+
+export const Sections = forwardRef<SectionList, SectionListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      changeData,
+      ...props
+    } = flatListProps
+    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,
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    return (
+      <KeyboardAwareSectionList
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as SectionList}
+        ItemSeparatorComponent={separator}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      />
+    )
+  },
+)

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,204 @@
+import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
+import { Scroll, ScrollProps } from '../Scroll'
+
+import { Easing, EasingFunction, StyleSheet } from 'react-native'
+import { FormTypes, getNestedStylesByKey, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
+import { SegmentedControlComposition, SegmentedControlStyles } from './styles'
+import { Touchable } from '../Touchable'
+import { StylesOf } from '../../types/utility'
+import { Text, TextProps } from '../Text'
+import { KeyboardAwareScrollViewTypes } from '../../modules'
+import { View } from '../View'
+import { InputLabel } from '../InputLabel'
+export * from './styles'
+export type SegmentedControlRef =KeyboardAwareScrollViewTypes.KeyboardAwareScrollView & {
+  scrollTo: (index: number) => void
+  scrollToCurrent: () => void
+}
+
+export type SegmentedControlProps<T = string> = ScrollProps & {
+    options : {label: string; value: T }[]
+    onValueChange: (value: T) => any
+    value: T
+    debugName: string
+    animation?: {
+      duration?: number
+      easing?: EasingFunction
+    }
+    textProps?: Partial<PropsOf<typeof Text>>
+    touchableProps?: Partial<PropsOf<typeof Touchable>>
+    styles?: StylesOf<SegmentedControlComposition>
+    scrollProps?: any
+    label?: FormTypes.Label
+    RenderButton?: (props: SegmentedControlProps & {
+      touchableProps: PropsOf<typeof Touchable>
+      textProps: PropsOf<typeof Text>
+      option: {label: string; value: any}
+    }) => ReactElement
+    RenderAnimatedView?: (props: Partial<SegmentedControlProps>) => ReactElement
+    getItemWidth?: (item:{label: string; value: T }, idx: number, arr: {label: string; value: T }[]) => number
+}
+
+const defaultAnimation = {
+  type: 'timing',
+  duration: 200,
+  easing: Easing.linear,
+}
+
+const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
+  const {
+    options = [],
+    onValueChange,
+    debugName,
+    label,
+    value,
+    styles = {},
+    animation = {},
+    variants = [],
+    scrollProps = {},
+    getItemWidth = (i) => i.label.length * 20,
+    RenderAnimatedView,
+    RenderButton,
+  } = props
+
+  let _animation = {
+    ...defaultAnimation, ...animation,
+  }
+
+  let variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlStyles>('u:SegmentedControl', {
+    styles,
+    transform: StyleSheet.flatten,
+    variants,
+  })
+
+  const scrollRef = useRef<KeyboardAwareScrollViewTypes.KeyboardAwareScrollView>(null)
+
+  function scrollTo(idx:number) {
+    if (!scrollRef.current) return
+    setTimeout(() => {
+      scrollRef.current?.scrollToPosition?.(widthStyle.width * idx, 0, true)
+    })
+  }
+
+  const widthStyle = useMemo(() => {
+    const sizes = options.map(getItemWidth)
+    const maxWidth = sizes.sort((a, b) => b - a)[0]
+
+    return { width: maxWidth }
+  }, [options])
+
+  const currentOptionIdx = options.findIndex(o => o.value === value) || 0
+
+  const translateX = widthStyle.width * currentOptionIdx
+
+  const onPress = (txt:string, idx: number) => {
+    return () => {
+      onValueChange(txt)
+      scrollTo(idx)
+    }
+  }
+
+  const hasScrolledInitially = useRef(false)
+
+  useImperativeHandle(ref, () => {
+    if (!scrollRef.current) return null
+
+    return {
+      ...(scrollRef.current),
+      scrollTo,
+      scrollToCurrent() {
+        if (!scrollRef.current) return
+        scrollTo(currentOptionIdx)
+      },
+    } as SegmentedControlRef
+  })
+
+  if (!hasScrolledInitially.current && scrollRef.current) {
+    scrollTo(currentOptionIdx)
+    hasScrolledInitially.current = true
+  }
+
+  const AnimatedView = RenderAnimatedView || View
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+  _animation = JSON.parse(JSON.stringify(_animation))
+
+  const labelStyles = getNestedStylesByKey('label', variantStyles)
+  return (<>
+    <InputLabel label={label} styles={labelStyles} required={false}/>
+    <Scroll
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={variantStyles.scroll}
+      contentContainerStyle={variantStyles.scrollContent}
+      {...scrollProps}
+      keyboardAware={{
+        enabled: false,
+      }}
+      ref={scrollRef}
+    >
+      <View style={variantStyles.wrapper}>
+        <AnimatedView
+          options={options}
+          styles={variantStyles}
+
+          animated
+          style={[variantStyles.selectedBubble, widthStyle]}
+          animate={{
+            translateX,
+          }}
+          transition={{
+            translateX: _animation,
+          }}
+
+        />
+        {options.map((o, idx) => {
+          const selected = value === o.value
+
+          const touchableProps = {
+            key: idx,
+            debugName: `Segmented Control ${debugName}, option ${o.label}`,
+            onPress: onPress(o.value, idx),
+            style: [widthStyle, variantStyles.button],
+            ...props.touchableProps,
+
+          }
+
+          const textProps:TextProps = {
+            text: o.label as string,
+            colorChangeConfig: _animation,
+            style: StyleSheet.flatten([variantStyles.text, selected && variantStyles['text:selected']]),
+            animated: true,
+            ...props.textProps,
+          }
+
+          if (RenderButton) {
+            return (
+              <RenderButton {...props} touchableProps={touchableProps} key={touchableProps.key} textProps={textProps} option={o}/>
+            )
+          }
+          return <Touchable
+            {...touchableProps}
+            noFeedback={selected}
+            key={touchableProps.key}
+            styles={{
+              feedback: variantStyles.buttonFeedback,
+            }}
+          >
+            <Text
+
+              {...textProps}
+            />
+
+          </Touchable>
+
+        })}
+      </View>
+    </Scroll>
+  </>
+  )
+
+})
+
+type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & {ref?: React.Ref<SegmentedControlRef>}) => ReactElement
+
+export const SegmentedControl = _SegmentedControl as SegControlComponent