@codeleap/mobile 2.3.0 → 2.3.2

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

package/src/components/Slider/index.tsx

@@ -0,0 +1,130 @@
+import { SliderMark } from './Mark'
+import { ThumbTooltip } from './Thumb'
+import * as React from 'react'
+import { Slider as RNSlider } from '@miblanchard/react-native-slider'
+
+import { useRef } from 'react'
+import { StyleSheet } from 'react-native'
+import { View } from '../View'
+import {
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+
+import { SliderProps } from './types'
+import { InputLabel } from '../InputLabel'
+import { SliderStyles } from './styles'
+
+export * from './styles'
+
+export const Slider: React.FC<SliderProps> = (sliderProps) => {
+  const [tooltipVisible, setTooltipVisible] = React.useState(false)
+
+  const {
+    debounce,
+    onValueChange,
+    labels,
+    value,
+    label,
+    valueOverThumb,
+    formatTooltip,
+    styles = {},
+    style,
+    tooltipVisibilityWindow = 830,
+    variants,
+    ...props
+  } = sliderProps
+
+  const changeDebounce = typeof debounce === 'number' ? debounce : 100
+
+  const debounceTimeout = useRef(null)
+  const toggleTooltipTimeout = useRef(null)
+  const valueRef = useRef(value)
+
+  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderStyles>('u:Slider', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  function setValue() {
+    onValueChange(valueRef.current)
+  }
+
+  function onChange(val) {
+    let eventValue = val
+
+    if (Array.isArray(val) && typeof value === 'number') {
+      eventValue = val[0]
+    }
+
+    if (eventValue === value) return
+
+    valueRef.current = eventValue as number
+
+    if (debounceTimeout.current) clearTimeout(debounceTimeout.current)
+
+    debounceTimeout.current = setTimeout(() => {
+      setValue()
+    }, changeDebounce)
+  }
+
+  return (
+    <View style={[variantStyles.wrapper, style]}>
+      <InputLabel label={label} styles={getNestedStylesByKey('label', variantStyles)} />
+      <RNSlider
+        value={value}
+        onSlidingStart={() => {
+          if (toggleTooltipTimeout.current) { clearTimeout(toggleTooltipTimeout.current) }
+
+          setTooltipVisible(true)
+        }}
+        onSlidingComplete={() => {
+          toggleTooltipTimeout.current = setTimeout(
+            () => setTooltipVisible(false),
+            tooltipVisibilityWindow,
+          )
+        }}
+        onValueChange={onChange}
+        renderAboveThumbComponent={(idx) => {
+          if (!valueOverThumb) return null
+          const thisValue = Array.isArray(value) ? value[idx] : value
+          return (
+            <ThumbTooltip
+              visible={tooltipVisible}
+              variantStyles={variantStyles}
+              styles={styles}
+            >
+              {formatTooltip ? formatTooltip(thisValue) : thisValue.toString()}
+            </ThumbTooltip>
+          )
+        }}
+        renderTrackMarkComponent={(idx) => (
+          <SliderMark
+            index={idx}
+            sliderProps={sliderProps}
+            styles={styles}
+            variantStyles={variantStyles}
+          />
+        )}
+        maximumValue={labels ? labels.length - 1 : 10}
+        trackMarks={labels ? Object.keys(labels).map((z) => parseInt(z)) : []}
+        containerStyle={
+            [variantStyles.inputContainer] as any
+        }
+        thumbStyle={
+            StyleSheet.flatten([variantStyles.handle]) as any
+        }
+        trackStyle={[variantStyles.track] as any}
+        minimumTrackTintColor={
+          StyleSheet.flatten([
+            variantStyles.selectedTrack,
+
+          ])?.backgroundColor
+        }
+        {...props}
+      />
+    </View>
+  )
+}
+

package/src/components/Slider/styles.ts

@@ -0,0 +1,76 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputLabelComposition } from '../InputLabel'
+
+export type SliderComposition =
+  | 'wrapper'
+  | 'handle'
+  | 'track'
+  | `label${Capitalize<InputLabelComposition>}`
+  | 'selectedTrack'
+  | 'inputContainer'
+  | 'tooltip'
+  | 'tooltip:visible'
+  | 'tooltip:hidden'
+  | 'trackLabels'
+  | 'mark'
+  | 'tooltipArrow'
+  | 'tooltipText'
+
+const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
+
+const presets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })),
+)
+
+export const SliderStyles = {
+  ...presets,
+  default: createSliderStyle((theme) => ({
+    wrapper: {},
+    handle: {
+      backgroundColor: theme.colors.primary,
+    },
+    selectedTrack: {
+      backgroundColor: theme.colors.primary,
+    },
+    track: {
+      backgroundColor: theme.colors.gray,
+    },
+    tooltip: {
+      padding: theme.spacing.value(0.5),
+      backgroundColor: theme.colors.primary,
+      position: 'relative',
+      borderRadius: theme.borderRadius.small,
+    },
+    'tooltip:visible': {
+      opacity: 1,
+    },
+    'tooltip:hidden': {
+      opacity: 0,
+    },
+    mark: {
+      position: 'absolute',
+      backgroundColor: theme.colors.primary,
+      borderRadius: 29,
+      height: 10,
+      width: 10,
+      top: -5,
+    },
+    trackLabels: {
+      position: 'absolute',
+      top: 8,
+      ...assignTextStyle('p3')(theme).text,
+    },
+    tooltipArrow: {
+      height: 6,
+      width: 6,
+      position: 'absolute',
+      backgroundColor: theme.colors.primary,
+      transform: [{ rotate: '45deg' }],
+      bottom: -3,
+      left: '50%',
+    },
+    tooltipText: {
+      color: theme.colors.white,
+      ...assignTextStyle('p3')(theme).text,
+    },
+  })),
+}

package/src/components/Slider/types.ts

@@ -0,0 +1,30 @@
+import { ComponentVariants, Form } from '@codeleap/common'
+
+import {
+  SliderComposition, SliderStyles,
+} from './styles'
+
+import { SliderProps as RNSliderProps } from '@miblanchard/react-native-slider/lib/types'
+import { StylesOf } from '../../types'
+import { ViewProps } from '../View'
+export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>> & {
+    debounce?: number
+    labels: string[]
+    value: number
+    valueOverThumb?: boolean
+    showMarks?: boolean
+    onValueChange: (val: number) => void
+    label: Form.Label
+    formatTooltip?: (val: number) => React.ReactNode
+    variants?: ComponentVariants<typeof SliderStyles>['variants']
+    styles?: StylesOf<SliderComposition>
+    style?: ViewProps['style']
+    tooltipVisibilityWindow?: number
+}
+
+export type SliderMarkProps = {
+    sliderProps: SliderProps
+    index: number
+    styles: SliderProps['styles']
+    variantStyles: SliderProps['styles']
+}