@codeleap/mobile 2.3.8 → 2.3.12

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

package/src/components/SegmentedControl/styles.ts

@@ -0,0 +1,89 @@
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+import { TouchableStylesGen } from '../Touchable'
+
+export type SegmentedControlStates = 'selected'
+
+export type SegmentedControlComposition =
+ 'selectedBubble' |
+ 'wrapper' |
+ 'scroll' |
+ 'scrollContent' |
+ 'text' |
+ `text:${SegmentedControlStates}` |
+ 'button' |
+ 'buttonFeedback' |
+ `button:${SegmentedControlStates}` |
+ `label${Capitalize<InputLabelComposition>}`
+
+export type SegmentedControlStylesGen<TCSS = any> =
+  StylesOf<
+    Exclude<SegmentedControlComposition, 'buttonFeedback'>
+  > & {
+    buttonFeedback?: TouchableStylesGen['feedback']
+  }
+
+const createSegmentedControlStyle = createDefaultVariantFactory<
+SegmentedControlComposition,
+SegmentedControlStylesGen
+>()
+
+const presets = includePresets((style) => createSegmentedControlStyle(() => ({ scrollContent: style })))
+
+export const SegmentedControlStyles = {
+  ...presets,
+  default: createSegmentedControlStyle((theme) => {
+
+    return {
+      buttonFeedback: {
+        type: 'opacity',
+        value: 0.5,
+      },
+      text: {
+        color: theme.colors.text,
+      },
+      'text:selected': {
+        color: theme.colors.white,
+      },
+      scroll: {
+        height: theme.values.buttons.default.height,
+        // borderRadius: Theme.borderRadius.large,
+      },
+      scrollContent: {
+        // borderRadius: Theme.borderRadius.large,
+        ...theme.presets.row,
+        ...theme.spacing.paddingHorizontal(2),
+        ...theme.presets.alignStretch,
+      },
+      button: {
+        backgroundColor: 'transparent',
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+
+        borderRadius: theme.borderRadius.large,
+        ...theme.spacing.padding(1),
+        minHeight: '100%',
+
+      },
+      selectedBubble: {
+        position: 'absolute',
+        zIndex: -1,
+        ...theme.spacing.padding(2),
+        // maxHeight: 50,
+        // minHeight: 50,
+        top: 0,
+        bottom: 0,
+        borderRadius: theme.borderRadius.large,
+        backgroundColor: theme.colors.primary,
+      },
+      wrapper: {
+        borderRadius: theme.borderRadius.large,
+        backgroundColor: theme.colors.backgroundSecondary,
+        ...theme.presets.row,
+        position: 'relative',
+      },
+
+    }
+
+  }),
+}

package/src/components/Select/index.tsx

@@ -0,0 +1,167 @@
+import { IconPlaceholder,
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+  TypeGuards } from '@codeleap/common'
+import React, { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import { List } from '../List'
+import { Text } from '../Text'
+import { TextInput } from '../TextInput'
+import { Touchable } from '../Touchable'
+import { SelectStyles } from './styles'
+import { CustomSelectProps } from './types'
+import { ModalManager } from '../../utils'
+import { Icon } from '../Icon'
+
+export const SelectItem = ({ item, icon = null, isSelected, styles, onPress }) => {
+  return <Touchable style={[
+    styles.itemWrapper,
+    isSelected && styles['itemWrapper:selected'],
+  ]} onPress={onPress} debugName={`Select ${item.value}`}>
+    <Text text={item.label} style={[
+      styles.itemText,
+      isSelected && styles['itemText:selected'],
+    ]}/>
+    {icon ? <Icon name={icon} style={[styles?.itemIcon, isSelected && styles?.['itemIcon:selected']]}/> : null}
+  </Touchable>
+}
+
+export * from './styles'
+export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
+  const {
+    value,
+    onValueChange,
+    label,
+    styles = {},
+    options,
+    style,
+    variants,
+    renderItem,
+    closeOnSelect = true,
+    listProps,
+    placeholder = 'Select',
+    arrowIconName = 'selectArrow',
+    clearIconName = 'close',
+    clearable = false,
+    selectedIcon = 'selectMarker',
+    inputProps = {},
+    hideInput = false,
+
+    ...drawerProps
+  } = selectProps
+
+  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectStyles>('u:Select', {
+    transform: StyleSheet.flatten,
+    rootElement: 'inputWrapper',
+    styles,
+    variants,
+  })
+
+  const inputStyles = useMemo(
+    () => getNestedStylesByKey('input', variantStyles),
+    [variantStyles],
+  )
+
+  const close = () => drawerProps?.toggle?.()
+
+  const select = (value) => {
+
+    onValueChange(value)
+    if (closeOnSelect) {
+      close?.()
+    }
+  }
+
+  const selectedLabel:string = useMemo(() => {
+    const current = options.find(o => o.value === value)
+
+    const display = current?.label ?? placeholder
+
+    return TypeGuards.isString(display) ? display : ''
+  }, [value, placeholder, options])
+  const Item = renderItem || SelectItem
+
+  const renderListItem = ({ item }) => {
+    return <Item
+      isSelected={value === item.value}
+      item={item}
+      onPress={() => select(item.value)}
+      icon={selectedIcon}
+      styles={variantStyles}
+    />
+  }
+  const isEmpty = TypeGuards.isNil(value)
+  const showClearIcon = !isEmpty && clearable
+
+  const inputIcon = showClearIcon ? clearIconName : arrowIconName
+
+  const onPressInputIcon = () => {
+    if (showClearIcon) {
+      onValueChange(null)
+    } else {
+      close?.()
+    }
+
+  }
+
+  return <>
+    {
+      !hideInput && (
+        <TextInput
+          caretHidden
+          value={selectedLabel}
+          rightIcon={{
+            icon: inputIcon as IconPlaceholder,
+            onPress: onPressInputIcon,
+            noFeedback: true,
+          }}
+          editable={false}
+          touchableWrapper
+          onPress={close}
+          wrapperProps={{
+            debugName: 'Select',
+
+          }}
+          pointerEvents={'none'}
+          label={label}
+          debugName={'Select input'}
+          styles={inputStyles}
+          style={style}
+          {...inputProps}
+        />
+      )
+    }
+
+    <ModalManager.Drawer
+      scroll={false}
+      title={label}
+      keyboardAware={{
+        baseStyleProp: 'style',
+        adapt: 'paddingBottom',
+        enabled: true,
+        enableOnAndroid: true,
+      }}
+      {...drawerProps}
+      styles={variantStyles}
+    >
+      <List<CustomSelectProps<any>['options']>
+        data={options}
+        style={variantStyles.list}
+        contentContainerStyle={variantStyles.listContent}
+        keyExtractor={(i) => i.value}
+        renderItem={renderListItem}
+        keyboardAware={{
+          baseStyleProp: 'style',
+          adapt: 'maxHeight',
+          enabled: true,
+          enableOnAndroid: true,
+        }}
+        {...listProps}
+      />
+    </ModalManager.Drawer>
+
+  </>
+}
+
+export * from './styles'
+export * from './types'

package/src/components/Select/styles.ts

@@ -0,0 +1,62 @@
+import { createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
+import { DrawerComposition, DrawerStyles } from '../Drawer'
+type ItemStates = '' | ':selected'
+export type SelectComposition =
+  DrawerComposition |
+  `input${TextInputComposition}` |
+  'list' |
+  'listContent' |
+  `itemWrapper${ItemStates}` |
+  `itemText${ItemStates}` |
+  'scroll' |
+  'scrollContent' |
+  `itemIcon${ItemStates}`
+
+const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
+
+export const SelectStyles = {
+  ...DrawerStyles,
+  default: createSelectStyle((theme) => {
+    const defaultStyle = DrawerStyles.default(theme)
+
+    return {
+      ...defaultStyle,
+      box: {
+        ...theme.spacing.paddingHorizontal(0),
+
+      },
+      itemWrapper: {
+        ...theme.presets.row,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+        ...theme.spacing.padding(1.4),
+        height: 50,
+      },
+      'itemWrapper:selected': {
+        backgroundColor: theme.colors.primary,
+      },
+      'itemText:selected': {
+        color: theme.colors.white,
+
+      },
+      'itemIcon:selected': {
+        color: theme.colors.white,
+        ...theme.sized(3),
+      },
+      itemIcon: {
+        width: 0,
+        height: 0,
+      },
+      list: {
+        height: 'auto',
+
+        maxHeight: theme.values.window.height * 0.75,
+
+      },
+      // listContent: {
+      //   paddingBottom: theme.values.safeAreaTop,
+      // },
+
+    }
+  }),
+}

package/src/components/Select/types.ts

@@ -0,0 +1,43 @@
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { StylesOf } from '../../types/utility'
+import { GetKeyboardAwarePropsOptions } from '../../utils'
+import { DrawerProps } from '../Drawer'
+import { FlatListProps } from '../List'
+import { TextInputProps } from '../TextInput'
+import { SelectComposition, SelectStyles } from './styles'
+
+export type SelectRenderFNProps<T> = & {
+  styles: StylesOf<SelectComposition>
+  onPress: () => void
+  isSelected?: boolean
+  item: FormTypes.Options<T>[number]
+}
+
+export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
+
+type SelectDrawerProps = Omit<DrawerProps, 'variants' | 'styles'>
+
+export type CustomSelectProps<T> = SelectDrawerProps & {
+    value: T
+    placeholder?: FormTypes.Label
+    label?: FormTypes.Label
+    options?: FormTypes.Options<T>
+    onValueChange?: (value: T) => void
+    renderItem?: SelectRenderFN<T>
+    styles?: StylesOf<SelectComposition>
+    style?: any
+    hideInput?: boolean
+    selectedIcon?: IconPlaceholder
+    arrowIconName?: IconPlaceholder
+    closeOnSelect?: boolean
+    inputProps?: Partial<TextInputProps>
+    listProps?: Partial<FlatListProps>
+    clearable?: boolean
+    clearIconName?: IconPlaceholder
+    keyboardAware?: GetKeyboardAwarePropsOptions
+  } & ComponentVariants<typeof SelectStyles>
+

package/src/components/Slider/Mark.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { StyleProp } from 'react-native'
+import { Text } from '../Text'
+import { View } from '../View'
+import { SliderMarkProps } from './types'
+export const SliderMark: React.FC<SliderMarkProps> = ({
+  index,
+  sliderProps,
+  styles,
+  variantStyles,
+}) => {
+  const { labels = [], showMarks } = sliderProps
+
+  const l = labels?.[index] || ''
+
+  const isFirst = index === 0
+  const isLast = index === labels.length - 1
+
+  const centerAdjustWord = -(l.length * 2)
+
+  const markStyles: StyleProp<any> = {}
+
+  const labelStyles: StyleProp<any> = {}
+
+  if (!isFirst && !isLast) {
+    labelStyles.left = centerAdjustWord
+  }
+
+  if (isLast) {
+    labelStyles.right = -20
+    markStyles.right = -10
+  }
+  return (
+    <>
+      {showMarks ? (
+        <View style={[markStyles, variantStyles.mark, styles.mark]} />
+      ) : null}
+      {l ? (
+        <Text
+          style={[labelStyles, variantStyles.trackLabels, styles.trackLabels]}
+          text={l}
+        />
+      ) : null}
+    </>
+  )
+}

package/src/components/Slider/Thumb.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Text } from '../Text'
+import { View } from '../View'
+export const ThumbTooltip = ({ children, visible, styles, variantStyles }) => {
+  return (
+    <View
+      style={[
+        StyleSheet.flatten([variantStyles.tooltip, styles.tooltip]),
+        visible
+          ? StyleSheet.flatten([
+            variantStyles['tooltip:visible'],
+            styles['tooltip:visible'],
+          ])
+          : StyleSheet.flatten([
+            variantStyles['tooltip:hidden'],
+            styles['tooltip:hidden'],
+          ]),
+      ]}
+    >
+      <Text
+        style={[variantStyles.tooltipText, styles.tooltipText]}
+        text={children}
+      />
+      <View style={[variantStyles.tooltipArrow, styles.tooltipArrow]} />
+    </View>
+  )
+}
+