@codeleap/mobile 1.3.0 → 1.4.1

package/src/components/Select/types.ts

@@ -0,0 +1,41 @@
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { ReactElement } from 'react'
+import { StylesOf } from '../../types/utility'
+import { ButtonProps } from '../Button'
+import { TextInputProps } from '../TextInput'
+import { MobileSelectComposition, MobileSelectStyles } from './styles'
+
+export type SelectRenderFNProps<T> = FormTypes.Options<T>[number] & {
+  styles: StylesOf<MobileSelectComposition>
+  onPress: () => void
+  selected?: boolean
+}
+
+export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
+
+export type CustomSelectProps<T> = {
+    value: T
+    placeholder?: FormTypes.Label
+    label?: FormTypes.Label
+    options?: FormTypes.Options<T>
+    onDropdownToggle?: (isOpen?: boolean) => void
+    onValueChange?: (value: T) => void
+    renderItem?: SelectRenderFN<T>
+    styles?: StylesOf<MobileSelectComposition>
+    style?: any
+    arrowIconName?: IconPlaceholder
+    scroll?: boolean
+    closeOnSelect?: boolean
+    footer?: ReactElement
+    header?: ReactElement
+    showLabelOnModal?: boolean
+    modalCloseIconName?: IconPlaceholder
+    showClose?: boolean
+    modalLabel?: string
+    closeButtonProps?: Partial<ButtonProps>
+  } & ComponentVariants<typeof MobileSelectStyles> & TextInputProps
+

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,123 @@
+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 {
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { InputLabel } from '../TextInput'
+import { SliderProps } from './types'
+
+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('Slider', {
+    variants,
+  })
+
+  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} style={[variantStyles.label, styles.label]} />
+      <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, styles.inputContainer] as any
+        }
+        thumbStyle={
+            StyleSheet.flatten([variantStyles.handle, styles.handle]) as any
+        }
+        trackStyle={[variantStyles.track, styles.track] as any}
+        minimumTrackTintColor={
+          StyleSheet.flatten([
+            variantStyles.selectedTrack,
+            styles.selectedTrack,
+          ])?.backgroundColor
+        }
+        {...props}
+      />
+    </View>
+  )
+}
+

package/src/components/Slider/types.ts

@@ -0,0 +1,25 @@
+import { ComponentVariants, Form, SliderComposition, SliderStyles } from '@codeleap/common'
+import { SliderProps as RNSliderProps } from '@miblanchard/react-native-slider/lib/types'
+import { StylesOf } from '../../types/utility'
+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']
+}

package/src/components/Switch.tsx

@@ -1,73 +1,81 @@
-import * as React from 'react'
-import { SwitchStyles,SwitchComposition, ComponentVariants, useComponentStyle, StylesOf, useStyle, FormTypes, useValidate } from '@codeleap/common'
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
-import { StyleSheet, Switch as NativeSwitch } from 'react-native'
-import { InputLabel,  FormError} from './TextInput'
-import { View } from './View'
-
-
-type NativeSwitchProps = Omit<
-    ComponentPropsWithRef<typeof NativeSwitch>, 
-    'thumbColor'|'trackColor'
->
-type SwitchProps = NativeSwitchProps & {
-    variants?: ComponentVariants<typeof SwitchStyles>['variants']
-    label?: ReactNode
-    styles?: StylesOf<SwitchComposition> 
-    validate?: FormTypes.ValidatorFunction | string
-} 
-
-export const Switch = forwardRef<NativeSwitch,SwitchProps>((switchProps,ref) => {
-    const  {
-        variants = [],
-        style = {},
-        styles = {},
-        validate,
-        label,
-        value,
-        ...props
-    } = switchProps
-
-    const variantStyles = useComponentStyle('Switch', {
-        variants,
-     
-    })
-    const {error,showError} = useValidate(switchProps.value, validate)
-    function getStyles(key:SwitchComposition){
-        return [
-            variantStyles[key],
-            styles[key],
-            key === 'wrapper' ? style : {},
-            showError ? variantStyles[key + ':error']  : {}, 
-            showError ? styles[key + ':error']  : {}, 
-            value ? variantStyles[key + ':on'] : {},
-            value ? styles[key + ':on'] : {},
-            switchProps.disabled ? variantStyles[key + ':disabled'] : {},
-            switchProps.disabled ? styles[key + ':disabled'] : {},
-         
-        ]
-    }
-
-    const inputStyles = getStyles('input')
-
-    const {color,backgroundColor} = StyleSheet.flatten(inputStyles)
-    const {Theme} = useStyle()
-
-    const thumbColor = color || Theme.colors.primary
-    const trackColor =  backgroundColor || Theme.colors.gray
-    return <View style={getStyles('wrapper')}>
-        <View style={getStyles('inputWrapper')}>
-
-            <NativeSwitch 
-
-                thumbColor={thumbColor}
-                trackColor={{ false:trackColor,  true: trackColor}}
-                ios_backgroundColor={trackColor}
-                value={value}
-                {...props}
-            />
-            <InputLabel label={label} style={getStyles('label')}/>
-        </View>
-        <FormError message={error.message} style={getStyles('error')}/>
-    </View>
-})
+import * as React from 'react'
+import {
+  SwitchStyles,
+  SwitchComposition,
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  useCodeleapContext,
+  FormTypes,
+  useValidate,
+} from '@codeleap/common'
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
+import { StyleSheet, Switch as NativeSwitch } from 'react-native'
+import { InputLabel, FormError } from './TextInput'
+import { View } from './View'
+
+type NativeSwitchProps = Omit<
+  ComponentPropsWithRef<typeof NativeSwitch>,
+  'thumbColor' | 'trackColor'
+>
+type SwitchProps = NativeSwitchProps & {
+  variants?: ComponentVariants<typeof SwitchStyles>['variants']
+  label?: ReactNode
+  styles?: StylesOf<SwitchComposition>
+  validate?: FormTypes.ValidatorFunctionWithoutForm | string
+}
+
+export const Switch = forwardRef<NativeSwitch, SwitchProps>(
+  (switchProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      validate,
+      label,
+      value,
+      ...props
+    } = switchProps
+
+    const variantStyles = useDefaultComponentStyle('Switch', {
+      variants,
+    })
+    const { error, showError } = useValidate(switchProps.value, validate)
+    function getStyles(key: SwitchComposition) {
+      return [
+        variantStyles[key],
+        styles[key],
+        key === 'wrapper' ? style : {},
+        showError ? variantStyles[key + ':error'] : {},
+        showError ? styles[key + ':error'] : {},
+        value ? variantStyles[key + ':on'] : {},
+        value ? styles[key + ':on'] : {},
+        switchProps.disabled ? variantStyles[key + ':disabled'] : {},
+        switchProps.disabled ? styles[key + ':disabled'] : {},
+      ]
+    }
+
+    const inputStyles = getStyles('input')
+
+    const { color, backgroundColor } = StyleSheet.flatten(inputStyles)
+    const { Theme } = useCodeleapContext()
+
+    const thumbColor = color || Theme.colors.primary
+    const trackColor = backgroundColor || Theme.colors.gray
+    return (
+      <View style={getStyles('wrapper')}>
+        <View style={getStyles('inputWrapper')}>
+          <NativeSwitch
+            thumbColor={thumbColor}
+            trackColor={{ false: trackColor, true: trackColor }}
+            ios_backgroundColor={trackColor}
+            value={value}
+            {...props}
+          />
+          <InputLabel label={label} style={getStyles('label')} />
+        </View>
+        <FormError message={error.message} style={getStyles('error')} />
+      </View>
+    )
+  },
+) as React.FC<SwitchProps>

package/src/components/Text.tsx

@@ -1,31 +1,30 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ComponentVariants, useComponentStyle, BaseViewProps, TextStyles } from '@codeleap/common'
-import { Text as NativeText } from  'react-native'
-
-
-export type TextProps =
-  ComponentPropsWithoutRef<typeof NativeText> & 
-{
-  text?: string,
-  variants?: ComponentVariants <typeof TextStyles>['variants'],
-} & BaseViewProps
-
-export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
-  const { 
-    variants = [], 
-    text,
-    style,
-    ...props
-  } = textProps
-  
-  const variantStyles = useComponentStyle('Text', {
-    variants,
-    rootElement : 'text'
-  })
-  
-  const styles = [variantStyles.text, style]
-  return <NativeText  {...props} style={styles} ref={ref}> 
-    {text}
-  </NativeText>
-})
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+  TextStyles,
+} from '@codeleap/common'
+import { Text as NativeText } from 'react-native'
+
+export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
+  text?: string
+  variants?: ComponentVariants<typeof TextStyles>['variants']
+} & BaseViewProps
+
+export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+  const { variants = [], text, style, ...props } = textProps
+
+  const variantStyles = useDefaultComponentStyle('Text', {
+    variants,
+    rootElement: 'text',
+  })
+
+  const styles = [variantStyles.text, style]
+  return (
+    <NativeText {...props} style={styles} ref={ref}>
+      {text}
+    </NativeText>
+  )
+})