@codeleap/mobile 2.4.6 → 3.0.2

package/src/components/AutoComplete/styles.ts

@@ -1,150 +0,0 @@
-import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
-import { SelectComposition, SelectStyles } from '../Select'
-import { TextInputComposition } from '../TextInput'
-
-export type AutoCompleteComposition = SelectComposition | `searchInput${Capitalize<TextInputComposition>}` | 'titleWrapper'
-
-const createAutoCompleteStyle = createDefaultVariantFactory<AutoCompleteComposition>()
-
-export const AutoCompleteStyles = {
-  ...SelectStyles,
-  default: createAutoCompleteStyle((theme) => {
-
-    return {
-      wrapper: {
-        ...theme.presets.absolute,
-        // ...theme.presets.whole,
-        ...theme.presets.fullHeight,
-        ...theme.presets.fullWidth,
-      },
-      'box:transition': {
-        scale: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      'backdrop:transition': {
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      backdrop: {
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
-
-        backgroundColor: theme.colors.black,
-
-      },
-      backdropTouchable: {
-        // height: '100%',
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
-
-      },
-      'backdrop:visible': {
-        opacity: 0.5,
-      },
-      'backdrop:hidden': {
-        opacity: 0,
-      },
-      innerWrapper: {
-
-      },
-      scroll: {
-        flex: 1,
-        // maxHeight: theme.values.height,
-      },
-      scrollContent: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        minHeight: '100%',
-        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
-        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
-      },
-      box: {
-        backgroundColor: theme.colors.background,
-        width: theme.values.width - theme.spacing.value(theme.values.innerSpacing.X * 2),
-        borderRadius: theme.borderRadius.modalOuter,
-        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
-        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
-      },
-
-      'box:hidden': {
-        opacity: 0,
-        scale: 0.8,
-
-      },
-      'box:visible': {
-        opacity: 1,
-        scale: 1,
-      },
-
-      closeButtonTouchableWrapper: {
-        alignSelf: 'center',
-        ...theme.spacing.marginLeft('auto'),
-      },
-      closeButtonIcon: {
-        color: theme.colors.text,
-      },
-
-      listWrapper: {
-        height: 'auto',
-      },
-
-      itemWrapper: {
-        ...theme.presets.row,
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(1),
-        backgroundColor: theme.colors.backgroundSecondary,
-      },
-      'itemWrapper:selected': {
-        backgroundColor: theme.colors.primary,
-      },
-      'itemIcon:selected': {
-        color: theme.colors.backgroundSecondary,
-        ...theme.sized(2),
-
-      },
-      'itemText:selected': {
-        color: theme.colors.backgroundSecondary,
-
-      },
-      itemIcon: {
-        height: 0,
-        width: 0,
-      },
-      header: {
-        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
-        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
-        ...theme.presets.column,
-        ...theme.presets.alignStart,
-      },
-      searchInputWrapper: {
-        ...theme.presets.fullWidth,
-        ...theme.spacing.marginTop(2),
-      },
-      titleWrapper: {
-        ...theme.presets.row,
-        ...theme.presets.alignCenter,
-        ...theme.presets.fullWidth,
-        ...theme.presets.justifyCenter,
-      },
-      title: {
-        ...theme.presets.textCenter,
-        ...assignTextStyle('h3')(theme).text,
-        flex: 1,
-      },
-      closeButtonWrapper: {
-        position: 'absolute',
-        right: 0,
-      },
-    }
-  }),
-}

package/src/components/MultiSelect/index.tsx

@@ -1,148 +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 { TextInput } from '../TextInput'
-import { MultiSelectProps } from './types'
-import { ModalManager } from '../../utils'
-import { MultiSelectStyles } from './styles'
-import { SelectItem } from '../Select'
-
-export * from './styles'
-export const MultiSelect = <T extends string|number = string>(selectProps:MultiSelectProps<T>) => {
-  const {
-    value,
-    onValueChange,
-    label,
-    styles = {},
-    options,
-    style,
-    variants,
-    hideInput = false,
-    renderItem,
-    listProps,
-    placeholder = 'Select',
-    arrowIconName = 'selectArrow',
-    selectedIcon = 'multiSelectMarker',
-    inputProps = {},
-    clearable = false,
-    clearIconName = 'close',
-    limit = null,
-    validate = null,
-    itemProps = {},
-    ...drawerProps
-  } = selectProps
-
-  const variantStyles = useDefaultComponentStyle<'u:MultiSelect', typeof MultiSelectStyles>('u:MultiSelect', {
-    transform: StyleSheet.flatten,
-    rootElement: 'inputWrapper',
-    styles,
-    variants,
-  })
-
-  const inputStyles = useMemo(
-    () => getNestedStylesByKey('input', variantStyles),
-    [variantStyles],
-  )
-
-  const close = () => drawerProps?.toggle?.()
-
-  const select = (itemValue) => {
-    const newVal = [...value]
-
-    if (newVal.includes(itemValue)) {
-      newVal.splice(newVal.indexOf(itemValue), 1)
-    } else {
-      if (TypeGuards.isNumber(limit) && newVal.length >= limit) {
-        return
-      }
-      newVal.push(itemValue)
-    }
-    onValueChange(newVal)
-
-  }
-
-  const selectedLabel:string = useMemo(() => {
-    const current = options.filter(o => value.includes(o.value)).map(o => o.label)
-
-    const display = current?.join(', ') ?? placeholder
-
-    return TypeGuards.isString(display) ? display : ''
-  }, [value, placeholder, options])
-
-  const Item = renderItem || SelectItem
-
-  const renderListItem = ({ item }) => {
-    return <Item
-      isSelected={value.includes(item.value)}
-      item={item}
-      onPress={() => select(item.value)}
-      styles={variantStyles}
-      icon={selectedIcon as IconPlaceholder}
-      {...itemProps}
-
-    />
-  }
-
-  const isEmpty = value.length === 0
-  const showClearIcon = !isEmpty && clearable
-  const inputIcon = showClearIcon ? clearIconName : arrowIconName
-
-  const onPressInputIcon = () => {
-    if (showClearIcon) {
-      onValueChange([])
-    } else {
-      close?.()
-    }
-
-  }
-  return <>
-    {
-      !hideInput && (
-        <TextInput
-          caretHidden
-          value={selectedLabel}
-          rightIcon={{
-            icon: inputIcon as IconPlaceholder,
-            onPress: onPressInputIcon,
-          }}
-          editable={false}
-          touchableWrapper
-          wrapperProps={{
-            debugName: 'Select',
-            onPress: close,
-          }}
-          pointerEvents={'none'}
-          label={label}
-          debugName={'Select input'}
-          styles={inputStyles}
-          style={style}
-          validate={validate}
-          {...inputProps}
-        />
-      )
-    }
-
-    <ModalManager.Modal title={label} {...drawerProps} styles={variantStyles} id={null}>
-      <List<MultiSelectProps<any>['options']>
-        data={options}
-        styles={getNestedStylesByKey('list', variantStyles)}
-        keyExtractor={(i) => i.value}
-        separators
-        keyboardAware={{
-          enabled: false,
-        }}
-        renderItem={renderListItem}
-        {...listProps}
-      />
-    </ModalManager.Modal>
-
-  </>
-}
-
-export * from './styles'
-export * from './types'
-

package/src/components/MultiSelect/styles.ts

@@ -1,131 +0,0 @@
-import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
-import { SelectComposition, SelectStyles } from '../Select'
-type ItemStates = '' | ':selected'
-export type MultiSelectComposition =
-  SelectComposition | `itemIcon${ItemStates}`
-
-const createMultiSelectStyle = createDefaultVariantFactory<MultiSelectComposition>()
-
-export const MultiSelectStyles = {
-  default: createMultiSelectStyle((theme) => {
-    return {
-      wrapper: {
-        ...theme.presets.absolute,
-        // ...theme.presets.whole,
-        ...theme.presets.fullHeight,
-        ...theme.presets.fullWidth,
-      },
-      'box:transition': {
-        scale: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      'backdrop:transition': {
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      backdrop: {
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
-
-        backgroundColor: theme.colors.black,
-
-      },
-      backdropTouchable: {
-        // height: '100%',
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
-
-      },
-      'backdrop:visible': {
-        opacity: 0.5,
-      },
-      'backdrop:hidden': {
-        opacity: 0,
-      },
-      innerWrapper: {
-
-      },
-      scroll: {
-        flex: 1,
-        // maxHeight: theme.values.height,
-      },
-      scrollContent: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        minHeight: '100%',
-        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
-        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
-      },
-      box: {
-        backgroundColor: theme.colors.background,
-        width: theme.values.width - theme.spacing.value(theme.values.innerSpacing.X * 2),
-        borderRadius: theme.borderRadius.modalOuter,
-        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
-        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
-      },
-
-      'box:hidden': {
-        opacity: 0,
-        scale: 0.8,
-
-      },
-      'box:visible': {
-        opacity: 1,
-        scale: 1,
-      },
-      header: {
-        flexDirection: 'row',
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-      },
-      closeButtonTouchableWrapper: {
-        alignSelf: 'center',
-        ...theme.spacing.marginLeft('auto'),
-      },
-      closeButtonIcon: {
-        color: theme.colors.text,
-      },
-      title: {
-        ...assignTextStyle('h3')(theme).text,
-      },
-      listWrapper: {
-        height: 'auto',
-      },
-
-      itemWrapper: {
-        ...theme.presets.row,
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(1),
-        backgroundColor: theme.colors.backgroundSecondary,
-      },
-      'itemWrapper:selected': {
-        backgroundColor: theme.colors.primary,
-      },
-      'itemIcon:selected': {
-        color: theme.colors.backgroundSecondary,
-        ...theme.sized(2),
-
-      },
-      'itemText:selected': {
-        color: theme.colors.backgroundSecondary,
-
-      },
-      itemIcon: {
-        height: 0,
-        width: 0,
-
-      },
-
-    }
-  }),
-}

package/src/components/MultiSelect/types.ts

@@ -1,51 +0,0 @@
-import {
-  ComponentVariants,
-  FormTypes,
-  IconPlaceholder,
-  PropsOf,
-} from '@codeleap/common'
-import { StylesOf } from '../../types/utility'
-import { DrawerProps } from '../Drawer'
-import { Icon } from '../Icon'
-import { FlatListProps } from '../List'
-import { Text } from '../Text'
-import { TextInputProps } from '../TextInput'
-import { Touchable } from '../Touchable'
-import { MultiSelectComposition, MultiSelectStyles } from './styles'
-
-export type MultiSelectRenderFNProps<T> = {
-  styles: StylesOf<MultiSelectComposition>
-  onPress: () => void
-  isSelected?: boolean
-  item: FormTypes.Options<T>[number]
-  icon?: IconPlaceholder
-  touchableProps?: Partial<PropsOf<typeof Touchable>>
-  textProps?: Partial<PropsOf<typeof Text>>
-  iconProps?: Partial<PropsOf<typeof Icon>>
-}
-
-export type MultiSelectRenderFN<T> = (props: MultiSelectRenderFNProps<T>) => JSX.Element
-
-type MultiSelectDrawerProps = Omit<DrawerProps, 'variants' | 'styles'>
-
-export type MultiSelectProps<T> = MultiSelectDrawerProps & {
-    value: T[]
-    placeholder?: FormTypes.Label
-    label?: FormTypes.Label
-    options?: FormTypes.Options<T>
-    onValueChange?: (value: T[]) => void
-    renderItem?: MultiSelectRenderFN<T>
-    styles?: StylesOf<MultiSelectComposition>
-    style?: any
-    arrowIconName?: IconPlaceholder
-    inputProps?: Partial<TextInputProps>
-    selectedIcon?: IconPlaceholder
-    hideInput?: boolean
-    limit?: number
-    listProps?: Partial<FlatListProps>
-    clearable?: boolean
-    clearIconName?: IconPlaceholder
-    validate?: TextInputProps['validate']
-    itemProps?: Partial<Pick<MultiSelectRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'>>
-  } & ComponentVariants<typeof MultiSelectStyles>
-

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>
-  )
-}
-

package/src/modules/textInputMask.ts

@@ -1,11 +0,0 @@
-// @ts-ignore
-// import MaskInput from 'react-native-mask-input'
-import { TextInputMask } from 'react-native-masked-text'
-
-import { TextInputMaskProps } from './types/textInputMask'
-
-export const MaskedTextInput = TextInputMask as unknown as React.ForwardRefExoticComponent<TextInputMaskProps & {
-    ref?: any
-}>
-
-export * from './types/textInputMask'

package/src/utils/KeyboardAware/lib/KeyboardAwareFlatList.ts

@@ -1,4 +0,0 @@
-import { FlatList } from 'react-native'
-import listenToKeyboardEvents from './KeyboardAwareHOC'
-
-export default listenToKeyboardEvents(FlatList)