@codeleap/mobile 2.3.5 → 2.3.7

package/src/components/SegmentedControl/index.tsx

@@ -1,204 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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>
-  )
-}
-