@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/Select/types.ts

@@ -6,13 +6,14 @@ import {
 } from '@codeleap/common'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
-import { DrawerProps } from '../Drawer'
+import { ActionIconProps } from '../ActionIcon'
 import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
+import { ModalProps } from '../Modal'
 import { Text } from '../Text'
-import { TextInputProps } from '../TextInput'
+import { SearchInputProps, TextInputComposition, TextInputProps } from '../TextInput'
 import { Touchable } from '../Touchable'
-import { SelectComposition, SelectStyles } from './styles'
+import { SelectComposition, SelectPresets } from './styles'
 
 export type SelectRenderFNProps<T> = {
   styles: StylesOf<SelectComposition>
@@ -26,17 +27,44 @@ export type SelectRenderFNProps<T> = {
 
 export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
 
-type SelectDrawerProps = Omit<DrawerProps, 'variants' | 'styles'>
+type SelectModalProps = Omit<ModalProps, 'variants' | 'styles'>
 
-export type CustomSelectProps<T> = SelectDrawerProps & {
-    value: T
+export type SelectValue<T, Multi extends boolean = false> = Multi extends true ? T[] : T
+
+type SelectHeaderProps = {
+  searchComponent?: React.ReactNode
+}
+
+type OuterInputProps<T = any, Multi extends boolean = false> = Omit<SelectProps<T, Multi>, 'variants'| 'styles'> & {
+  currentValueLabel: FormTypes.Label
+  styles?: StylesOf<TextInputComposition>
+  clearIcon?: Partial<ActionIconProps>
+}
+
+export type ValueBoundSelectProps<T, Multi extends boolean = false> = {
+  options?: FormTypes.Options<T>
+  defaultOptions?: FormTypes.Options<T>
+  loadOptions?: (search: string) => Promise<FormTypes.Options<T>>
+  value: SelectValue<T, Multi>
+  renderItem?: SelectRenderFN<SelectValue<T, Multi>>
+  onValueChange: (value: SelectValue<T, Multi>) => void
+  filterItems?: (search: string, items: FormTypes.Options<T>) => FormTypes.Options<T>
+  onLoadOptionsError?: (error: any) => void
+  multiple?: Multi
+  getLabel?: (forOption: Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]) => FormTypes.Label
+  outerInputComponent?: React.ComponentType<OuterInputProps<T, Multi>>
+}
+
+export type ReplaceSelectProps<Props, T, Multi extends boolean = false> = Omit<
+  Props,
+  keyof ValueBoundSelectProps<T, Multi>
+> & ValueBoundSelectProps<T, Multi>
+
+export type SelectProps<T = any, Multi extends boolean = false> = {
     placeholder?: FormTypes.Label
     label?: FormTypes.Label
-    options?: FormTypes.Options<T>
-    onValueChange?: (value: T) => void
-    renderItem?: SelectRenderFN<T>
     styles?: StylesOf<SelectComposition>
-    style?: any
+    style?: TextInputProps['style']
     hideInput?: boolean
     selectedIcon?: IconPlaceholder
     arrowIconName?: IconPlaceholder
@@ -46,8 +74,16 @@ export type CustomSelectProps<T> = SelectDrawerProps & {
     clearable?: boolean
     clearIconName?: IconPlaceholder
     keyboardAware?: GetKeyboardAwarePropsOptions
+    multiple?: Multi
     itemProps?: Partial<
       Pick<SelectRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'
     >>
-  } & ComponentVariants<typeof SelectStyles>
+    searchable?: boolean
+    limit?: number
+    ListHeaderComponent?: React.ComponentType<SelectHeaderProps>
+    searchInputProps?: Partial<SearchInputProps>
+    loadOptionsOnMount?: boolean
+    loadOptionsOnOpen?: boolean
+
+  } & ComponentVariants<typeof SelectPresets> & SelectModalProps & ValueBoundSelectProps<T, Multi>
 

package/src/components/Slider/index.tsx

@@ -1,130 +1,187 @@
-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,
+  TypeGuards,
   useDefaultComponentStyle,
+  onUpdate
 } from '@codeleap/common'
 
-import { SliderProps } from './types'
-import { InputLabel } from '../InputLabel'
-import { SliderStyles } from './styles'
+import { SliderProps, TrackMarkProps } from './types'
+import { InputBase, selectInputBaseProps } from '../InputBase'
+import {SliderPresets} from './styles'
+import { Text } from '../Text'
+import { View } from '../View'
 
 export * from './styles'
 
-export const Slider: React.FC<SliderProps> = (sliderProps) => {
-  const [tooltipVisible, setTooltipVisible] = React.useState(false)
 
+
+const DefaultSliderTrackMark = (props: TrackMarkProps) => {
+  const { index, content, style } = props
+
+  if(!TypeGuards.isString(props.content)){
+    return <>
+      {props.content}
+    </>
+  }
+
+  return <Text 
+    text={props.content}
+    style={style}
+  />
+}
+
+export const Slider = (props:SliderProps) => {
   const {
-    debounce,
+    inputBaseProps,
+    others
+  } = selectInputBaseProps(props)
+
+  const {
+    debounce = null,
     onValueChange,
-    labels,
     value,
     label,
-    valueOverThumb,
-    formatTooltip,
+    debugName,
     styles = {},
     style,
-    tooltipVisibilityWindow = 830,
+    disabled,
     variants,
-    ...props
-  } = sliderProps
+    trackMarks,
+    trackMarkComponent = DefaultSliderTrackMark,
+    ...sliderProps
+  } = others
 
-  const changeDebounce = typeof debounce === 'number' ? debounce : 100
+  const SliderTrackMark = trackMarkComponent
+  const [_value, _setValue] = React.useState(value)
 
-  const debounceTimeout = useRef(null)
-  const toggleTooltipTimeout = useRef(null)
-  const valueRef = useRef(value)
+  onUpdate(() => {
+    if(value !== _value){
+      _setValue(value)
+    }
+  }, [value])
 
-  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderStyles>('u:Slider', {
+
+
+  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('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]
+  const thumbStyle = React.useMemo(() => {
+    return StyleSheet.flatten([
+      variantStyles.thumb,
+      disabled && variantStyles['thumb:disabled'],
+    ])  
+  }, []) 
+
+  const trackStyle = React.useMemo(() => {
+    return StyleSheet.flatten([
+      variantStyles.track,
+      disabled && variantStyles['track:disabled'],
+    ])  
+  }, [disabled]) 
+
+  const selectedTrackStyle = React.useMemo(() => {
+    return StyleSheet.flatten([
+      variantStyles.selectedTrack,
+      disabled && variantStyles['selectedTrack:disabled'],
+    ])  
+  }, [disabled]) 
+
+  const unselectedTrackStyle = React.useMemo(() => {
+    return StyleSheet.flatten([
+      variantStyles.unselectedTrack,
+      disabled && variantStyles['unselectedTrack:disabled'],
+    ])  
+  }, [disabled])
+  
+  const containerStyle = React.useMemo(() => {
+    return StyleSheet.flatten([
+      variantStyles.sliderContainer,
+      disabled && variantStyles['sliderContainer:disabled'],
+    ])
+  }, [disabled])
+
+  const trackMarksHaveContent = !(TypeGuards.isArray(trackMarks) || TypeGuards.isNil(trackMarks))
+
+  const trackMarksProp = React.useMemo(() => {
+    if(!trackMarksHaveContent){
+      return trackMarks
     }
+    return Object.keys(trackMarks).map((key) => Number(key))
+  },[trackMarksHaveContent])
 
-    if (eventValue === value) return
-
-    valueRef.current = eventValue as number
-
-    if (debounceTimeout.current) clearTimeout(debounceTimeout.current)
-
-    debounceTimeout.current = setTimeout(() => {
-      setValue()
-    }, changeDebounce)
-  }
+  const trackMarkStyle = React.useMemo(() => {
+    return StyleSheet.flatten([
+      variantStyles.trackMark,
+      disabled && variantStyles['trackMark:disabled'],
+    ])
+  }, [disabled])
 
   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)
-        }}
+    <InputBase
+      {...inputBaseProps}
+      disabled={disabled}
+      styles={variantStyles}
+      labelAsRow
+    >
+      <RNSlider 
+        value={_value}
+        onValueChange={_setValue}
+        // @ts-ignore
+        thumbStyle={thumbStyle}
+        // @ts-ignore
+        trackStyle={trackStyle}
+        minimumTrackStyle={selectedTrackStyle}
+        maximumTrackStyle={unselectedTrackStyle}
+        containerStyle={containerStyle}
+        minimumValue={0}
+        maximumValue={100}
         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>
-          )
+          onValueChange(_value)
         }}
-        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}
+        disabled={disabled}
+        {...sliderProps}
+        trackMarks={trackMarksProp}
       />
-    </View>
+      {
+        trackMarksProp ? (
+          <View style={variantStyles.trackMarkWrapper}>
+          {
+            trackMarksProp.map((_, idx) => {
+              let idxStyle = {}
+
+              if(idx === 0){
+                idxStyle = variantStyles.firstTrackMark
+              } else if(idx === trackMarksProp.length - 1){
+                idxStyle = variantStyles.lastTrackMark
+              }
+              const style = [
+                trackMarkStyle,
+                idxStyle,
+              ]
+
+              if(!trackMarksHaveContent){
+                return <SliderTrackMark 
+                  index={idx} 
+                  style={style}
+                  key={idx}
+                />
+              }
+              
+              const relativeValue = trackMarksProp[idx]
+              const content = trackMarks[relativeValue]
+          
+              return <SliderTrackMark index={idx} content={content} style={style} key={idx}/>
+            })
+          }
+          </View>
+        ) : null
+      }
+    </InputBase>    
   )
 }
 

package/src/components/Slider/styles.ts

@@ -1,76 +1,11 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { InputLabelComposition } from '../InputLabel'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { IconLessInputBaseParts, InputBaseComposition, InputBaseParts, InputBaseStates } from '../InputBase'
 
-export type SliderComposition =
-  | 'wrapper'
-  | 'handle'
-  | 'track'
-  | `label${Capitalize<InputLabelComposition>}`
-  | 'selectedTrack'
-  | 'inputContainer'
-  | 'tooltip'
-  | 'tooltip:visible'
-  | 'tooltip:hidden'
-  | 'trackLabels'
-  | 'mark'
-  | 'tooltipArrow'
-  | 'tooltipText'
+type SliderParts = 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'firstTrackMark' | 'lastTrackMark' | 'trackMarkWrapper' | 'sliderContainer' | IconLessInputBaseParts
+type SliderStates = Exclude<InputBaseStates, 'focus'>
 
-const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
+export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts
 
-const presets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })),
-)
+const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
 
-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,
-    },
-  })),
-}
+export const SliderPresets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })))

package/src/components/Slider/types.ts

@@ -1,30 +1,28 @@
-import { ComponentVariants, Form } from '@codeleap/common'
+import { ComponentVariants, Form, PropsOf, SliderStyles } from '@codeleap/common'
 
 import {
-  SliderComposition, SliderStyles,
+  SliderComposition,
 } 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
+import { View } from '../View'
+import { InputBaseProps } from '../InputBase'
+
+export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>> & Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & {
+    debounce?: number | null
+    trackMarklabels: string[]
+    value: number | number[]
+    onValueChange: (val: number| number[]) => void
     variants?: ComponentVariants<typeof SliderStyles>['variants']
     styles?: StylesOf<SliderComposition>
-    style?: ViewProps['style']
-    tooltipVisibilityWindow?: number
+    style?: PropsOf<typeof View>['style']
+    trackMarks?: RNSliderProps['trackMarks'] | Record<number, string>
+    trackMarkComponent?: React.ComponentType<TrackMarkProps>
 }
 
-export type SliderMarkProps = {
-    sliderProps: SliderProps
-    index: number
-    styles: SliderProps['styles']
-    variantStyles: SliderProps['styles']
-}
+export type TrackMarkProps = {
+  index: number
+  content?: string | React.ReactNode
+  style?: any
+}