@codeleap/mobile 1.3.1 → 1.4.0

package/src/components/Scroll.tsx

@@ -1,87 +1,98 @@
 import * as React from 'react'
 import { forwardRef, useState } from 'react'
-import { deepEqual, onUpdate, useComponentStyle, usePrevious, useStyle } from '@codeleap/common'
-import { KeyboardAwareScrollViewProps, KeyboardAwareScrollView  as KBDView} from 'react-native-keyboard-aware-scroll-view'
-import { RefreshControl, ScrollView } from 'react-native'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  KeyboardAwareScrollViewProps,
+  KeyboardAwareScrollView as KBDView,
+} from 'react-native-keyboard-aware-scroll-view'
+import { RefreshControl, ScrollView, ScrollViewProps, ViewStyle } from 'react-native'
 import { ViewProps } from './View'
 
+export type ScrollProps = KeyboardAwareScrollViewProps &
+  ViewProps & {
+    onRefresh?: () => void;
+    refreshTimeout?: number;
+    changeData?: any;
+    styles?: ViewStyle
+  };
 
-export type ScrollProps = KeyboardAwareScrollViewProps & ViewProps & {
-  onRefresh?:() => void
-  refreshTimeout?: number
-  changeData?:any
-}
+const KeyboardAwareScrollView =
+  KBDView as unknown as React.ForwardRefExoticComponent<
+    ViewProps & {
+      refreshControl?: JSX.Element;
+      ref?: ScrollView;
+     
+    } & ScrollViewProps
+  >
 
-const KeyboardAwareScrollView = KBDView as unknown as React.ForwardRefExoticComponent<
-  ViewProps & 
-  {
-    refreshControl?: JSX.Element
-    ref?: ScrollView
-    
-  }
->
+export const Scroll = forwardRef<ScrollView, ScrollProps>(
+  (scrollProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      children,
+      changeData,
+      styles,
+      ...props
+    } = scrollProps
+    const hasRefresh = !!props.onRefresh
+    const [refreshing, setRefreshing] = useState(false)
 
+    const timer = React.useRef(null)
+    const previousData = usePrevious(changeData)
 
-export const Scroll = forwardRef<ScrollView, ScrollProps>((scrollProps, ref) => {
-  const { 
-    variants = [], 
-    style,
-    refreshTimeout = 3000,
-    children,
-    changeData,
-    ...props
-  } = scrollProps
-  const hasRefresh = !!props.onRefresh
-  const [refreshing, setRefreshing] = useState(false)
-
-  const timer = React.useRef(null)
-  const previousData = usePrevious(changeData)
-
-  const onRefresh = () => {
-    if(timer.current){
-      clearTimeout(timer.current)
-    }
-
-    setRefreshing(true)   
-  
-    props.onRefresh()
-   
-    timer.current = setTimeout(() => {
-      setRefreshing(false)
-    }, refreshTimeout)
-
-  }
-  onUpdate(() => {
-    if(refreshing && !deepEqual(previousData, changeData)){
-      setRefreshing(false)
-      if(timer.current){
+    const onRefresh = () => {
+      if (timer.current) {
         clearTimeout(timer.current)
       }
-    }
-  },[refreshing, changeData])
-  const {
-    Theme
-  } = useStyle()
 
-  const variantStyles  = useComponentStyle('View', {
-    variants
-  })
+      setRefreshing(true)
 
-  return (
+      props.onRefresh()
 
-    <KeyboardAwareScrollView
-      style={[Theme.presets.full, variantStyles.wrapper, style]}
-      ref={ref as unknown as ScrollView}
-      {...props}
-      refreshControl={
-        hasRefresh &&
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-          />
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshing && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
       }
-    > 
-      { children }
-    </KeyboardAwareScrollView>
-  )
-})
+    }, [refreshing, changeData])
+    const { Theme } = useCodeleapContext()
+
+    const variantStyles = useDefaultComponentStyle('View', {
+      variants,
+      styles: {
+        wrapper: styles,
+      },
+      rootElement: 'wrapper',
+    })
+
+    return (
+      <KeyboardAwareScrollView
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as ScrollView}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      >
+        {children}
+      </KeyboardAwareScrollView>
+    )
+  },
+)

package/src/components/Select/index.tsx

@@ -1,8 +1,181 @@
-import * as React from 'react'
-import { View } from "../View"
+import {  IconPlaceholder, useBooleanToggle, getNestedStylesByKey, useDefaultComponentStyle, TypeGuards } from '@codeleap/common'
+import React, { useMemo } from 'react'
+import { Modal, StyleSheet } from 'react-native'
+import { Button } from '../Button'
+import { Scroll } from '../Scroll'
 
-export const Select:React.FC = () => {
-    return <View >
+import {  InputLabel, TextInput } from '../TextInput'
+import { Touchable } from '../Touchable'
+import { AnimatedView, View } from '../View'
+import { MobileSelectStyles } from './styles' 
+import { CustomSelectProps } from './types'
 
-    </View> 
-}
+export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
+  const {
+    value,
+    onValueChange,
+    label, 
+    styles = {},
+    options,
+    style,
+    variants,
+    renderItem,
+    closeOnSelect = true,
+    scroll = false,
+    showClose = true,
+    showLabelOnModal = true,
+    placeholder = 'Select',
+    arrowIconName = 'selectArrow',
+    footer,
+    modalCloseIconName = 'close',
+    header,
+    closeButtonProps,
+    modalLabel,
+    ...props
+  } = selectProps
+
+  const [isModalVisible, setModalVisibility] = useBooleanToggle(false)
+
+  const variantStyles = useDefaultComponentStyle<'u:MobileSelect', typeof MobileSelectStyles>('u:MobileSelect', {
+    transform: StyleSheet.flatten,
+    rootElement: 'inputWrapper',
+    styles,
+    variants,
+  })
+
+  const inputStyles = useMemo(
+    () => getNestedStylesByKey('input', variantStyles), 
+    [variantStyles],
+  )
+
+  const closeButtonStyles = useMemo(
+    () => getNestedStylesByKey('modalCloseButton', variantStyles), 
+    [variantStyles],
+  )
+  
+  const ListComponent = scroll ? Scroll : View
+  
+  const close = () => setModalVisibility()
+  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])
+
+  return <> 
+    <TextInput 
+      
+      caretHidden
+      value={selectedLabel}
+      rightIcon={{
+        name: arrowIconName as IconPlaceholder,
+      }}
+      editable={false}
+      touchableWrapper
+      innerWrapperProps={{
+        onPress: close,
+      }}
+      label={label} 
+      styles={inputStyles}
+      style={style}
+      {...props}
+    />
+    <AnimatedView pointerEvents={'none'} transition='opacity' style={[
+      {      
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
+      },
+      variantStyles.backdrop,
+      isModalVisible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'],  
+    ]} />
+    
+    <Modal
+      animationType='slide'
+      transparent={true}
+      visible={isModalVisible}
+      onRequestClose={() => {
+        setModalVisibility()
+      }}
+      pointerEvents={isModalVisible ? 'auto': 'none'}
+    >
+      <Touchable       
+        onPress={close} 
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          left: 0,
+          bottom: 0,
+        }}
+      />
+      <View style={variantStyles.modalWrapper}>
+       
+        <View style={variantStyles.modalBox}>
+          {
+            (showClose || showLabelOnModal || header) && (
+              <View style={variantStyles.modalHeader}>
+                {
+                  header ? header :  <>
+                    {showLabelOnModal && <InputLabel label={modalLabel || label} style={variantStyles.modalLabelText}/>}
+                    {showClose && <Button 
+                      icon={modalCloseIconName as IconPlaceholder} 
+                      onPress={close} 
+                      styles={closeButtonStyles}
+                      {...closeButtonProps}
+                    />}
+                  </>
+                }
+              </View>
+            )
+          }
+          <ListComponent style={variantStyles.modalList}>
+            {
+              options.map((item, idx) => {
+                const isSelected = value === item.value
+                if (renderItem) {
+                  return renderItem({
+                    ...item,
+                    selected: isSelected,
+                    onPress: close,
+                    styles: variantStyles,
+                
+                  }) 
+                }
+
+                return <Touchable key={idx} style={[
+                  variantStyles.modalItem, 
+                  isSelected && variantStyles['modalItem:selected'],
+                ]} onPress={() => select(item.value)}>
+                  <InputLabel label={item.label} style={[variantStyles.modalItemText,   isSelected && variantStyles['modalItemText:selected']]}/>
+                </Touchable>
+              })
+            }
+          </ListComponent>
+       
+          {
+            footer && <View style={variantStyles.modalFooter}>
+              {footer}
+            </View>
+          } 
+        </View>
+      </View>
+    </Modal>
+  </>
+}
+
+
+export * from './styles'
+export * from './types'

package/src/components/Select/styles.ts

@@ -0,0 +1,81 @@
+import { assignTextStyle, ButtonParts, createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
+import { MobileModalStyles } from '../Modal'
+type ModalParts = 
+  'Box' |
+  'Wrapper' |
+  'Header' |
+  'Footer' |
+  'List' |
+  'Item' |
+  'ItemText' |
+  'Item:selected' |
+  'ItemText:selected' |
+  'LabelText' |
+  `CloseButton${Capitalize<ButtonParts>}`
+
+type InputParts = `input${Capitalize<TextInputComposition>}` 
+
+export type MobileSelectParts = InputParts 
+| `backdrop` 
+| `backdrop:visible` 
+| `backdrop:hidden` 
+| `modal${ModalParts}`
+
+export type MobileSelectComposition = MobileSelectParts
+
+const createSelectStyle = createDefaultVariantFactory<MobileSelectComposition>()
+
+export const MobileSelectStyles = {
+  default: createSelectStyle((theme) => ({
+    modalBox: {
+      // ...MobileModalStyles.default(theme).box,
+      backgroundColor: theme.colors.background,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      zIndex: 1,
+      elevation: 5,
+    },
+    modalWrapper: {
+      // ...MobileModalStyles.default(theme).wrapper,
+      flex: 1,
+      alignItems: 'stretch',
+      justifyContent: 'flex-end',
+    },
+    modalItem: {
+      ...theme.spacing.paddingVertical(1),
+      ...theme.spacing.paddingHorizontal(2),
+      color: theme.colors.text,
+    },
+    'modalItemText:selected': {
+      color: theme.colors.primary,
+    },
+    modalList: {
+      ...theme.spacing.marginVertical(0.6),
+    },
+    backdrop: {
+      // ...MobileModalStyles.default(theme).overlay,
+      zIndex: 10,
+      flex: 1,
+   
+      backgroundColor: theme.colors.black,
+    },
+    'backdrop:hidden': {
+      opacity: 0,
+    },
+    'backdrop:visible': {
+      opacity: 0.4,
+    },
+    modalHeader: {
+      ...theme.spacing.padding(2),
+      flexDirection: 'row',
+      ...theme.presets.alignCenter,
+      ...theme.presets.justifySpaceBetween,
+    },
+    modalLabelText: {
+      ...assignTextStyle('p2')(theme).text,
+    },
+    modalCloseButtonWrapper: {
+      backgroundColor: 'transparent',
+    },
+  })),
+}

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