@codeleap/mobile 3.6.2 → 3.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.6.2",
+  "version": "3.7.1",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/FileInput/index.tsx

@@ -150,7 +150,7 @@ const _FileInput = forwardRef<
                   onPress('camera')
                 }
               },
-              ...alertProps?.options[1],
+              ...alertProps?.options?.[1],
             },
             {
               text: 'Library',
@@ -161,13 +161,13 @@ const _FileInput = forwardRef<
                   onPress('library')
                 }
               },
-              ...alertProps?.options[2],
+              ...alertProps?.options?.[2],
             },
             {
               text: 'Cancel',
               style: 'cancel',
               onPress: () => {},
-              ...alertProps?.options[0],
+              ...alertProps?.options?.[0],
             },
           ],
         })

package/src/components/Select/index.tsx

@@ -41,10 +41,11 @@ const OuterInput:ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (p
     toggle,
     styles,
     style,
+    placeholder,
   } = props
 
   return <TextInput
-    value={TypeGuards.isString(currentValueLabel) ? currentValueLabel : ''}
+    value={TypeGuards.isString(currentValueLabel) ? currentValueLabel : null}
     rightIcon={clearIcon}
     onPress={() => toggle()}
     label={label}
@@ -54,7 +55,7 @@ const OuterInput:ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (p
     innerWrapperProps={{
       rippleDisabled: true,
     }}
-
+    placeholder={placeholder as string}
   />
 }
 
@@ -74,6 +75,8 @@ const defaultProps:Partial<SelectProps<any, boolean>> = {
   },
   outerInputComponent: OuterInput,
   searchInputProps: {},
+  arrowIconName: 'chevrons-up-down' as IconPlaceholder,
+  clearIconName: 'x' as IconPlaceholder,
 }
 
 export const Select = <T extends string|number = string, Multi extends boolean = false>(selectProps:SelectProps<T, Multi>) => {
@@ -94,8 +97,8 @@ export const Select = <T extends string|number = string, Multi extends boolean =
     listProps,
     debugName,
     placeholder = 'Select',
-    arrowIconName = 'chevrons-up-down',
-    clearIconName = 'x',
+    arrowIconName,
+    clearIconName,
     clearable = false,
     selectedIcon = 'check',
     inputProps = {},
@@ -148,7 +151,7 @@ export const Select = <T extends string|number = string, Multi extends boolean =
 
     const label = getLabel(
       _options,
-    ) || placeholder
+    )
 
     return label
   }, [labelOptions])

package/src/components/Slider/index.tsx

@@ -12,11 +12,12 @@ import { InputBase, selectInputBaseProps } from '../InputBase'
 import { SliderPresets } from './styles'
 import { Text } from '../Text'
 import { View } from '../View'
+import { Touchable } from '../Touchable'
 
 export * from './styles'
 
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
-  const { index, content, style } = props
+  const { index, content, style, onPress } = props
 
   if (!TypeGuards.isString(props.content)) {
     return <>
@@ -27,12 +28,16 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
   return <Text
     text={props.content}
     style={style}
+    onPress={onPress}
   />
 }
 
+const minimumValue = 0
+const maximumValue = 100
+
 export const Slider = (props:SliderProps) => {
   const {
-    inputBaseProps,
+    inputBaseProps: { label: _label, description: _description, ..._inputBaseProps },
     others,
   } = selectInputBaseProps(props)
 
@@ -41,16 +46,18 @@ export const Slider = (props:SliderProps) => {
     onValueChange,
     value,
     label,
+    description,
     debugName,
     styles = {},
     style,
     disabled,
     variants,
     trackMarks,
+    trackMarksClickable = false,
+    labelClickable = false,
     trackMarkComponent = DefaultSliderTrackMark,
     ...sliderProps
   } = others
-
   const SliderTrackMark = trackMarkComponent
   const [_value, _setValue] = React.useState(value)
 
@@ -119,11 +126,33 @@ export const Slider = (props:SliderProps) => {
 
   return (
     <InputBase
-      {...inputBaseProps}
+      {..._inputBaseProps}
       disabled={disabled}
       styles={variantStyles}
       labelAsRow
     >
+      {label || description ? (
+        <View style={variantStyles.labelRow}>
+          {label ? (
+            <Touchable
+              onPress={() => labelClickable ? onValueChange(sliderProps?.minimumValue || minimumValue) : null}
+              styles={variantStyles.labelBtn}
+              debugName='slider title'
+            >
+              <Text style={variantStyles.label} text={label}/>
+            </Touchable>
+          ) : null}
+          {description ? (
+            <Touchable
+              onPress={() => labelClickable ? onValueChange(sliderProps?.maximumValue || maximumValue) : null}
+              styles={variantStyles.descriptionBtn}
+              debugName='slider description'
+            >
+              <Text style={variantStyles.description} text={description}/>
+            </Touchable>
+          ) : null}
+        </View>
+      ) : null}
       <RNSlider
         value={_value}
         onValueChange={_setValue}
@@ -134,8 +163,8 @@ export const Slider = (props:SliderProps) => {
         minimumTrackStyle={selectedTrackStyle}
         maximumTrackStyle={unselectedTrackStyle}
         containerStyle={containerStyle}
-        minimumValue={0}
-        maximumValue={100}
+        minimumValue={minimumValue}
+        maximumValue={maximumValue}
         onSlidingComplete={() => {
           onValueChange(_value)
         }}
@@ -165,13 +194,20 @@ export const Slider = (props:SliderProps) => {
                     index={idx}
                     style={style}
                     key={idx}
+                    onPress={() => trackMarksClickable ? onValueChange(trackMarksProp[idx]) : null}
                   />
                 }
 
                 const relativeValue = trackMarksProp[idx]
                 const content = trackMarks[relativeValue]
 
-                return <SliderTrackMark index={idx} content={content} style={style} key={idx}/>
+                return <SliderTrackMark
+                  index={idx}
+                  content={content}
+                  style={style}
+                  key={idx}
+                  onPress={() => trackMarksClickable ? onValueChange(trackMarksProp[idx]) : null}
+                />
               })
             }
           </View>

package/src/components/Slider/styles.ts

@@ -1,11 +1,15 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { IconLessInputBaseParts, InputBaseComposition, InputBaseParts, InputBaseStates } from '../InputBase'
+import { PartialComponentStyle, TouchableComposition, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { IconLessInputBaseParts, InputBaseStates } from '../InputBase'
+import { TouchableStylesGen } from '../Touchable'
 
 type SliderParts = 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'firstTrackMark' | 'lastTrackMark' | 'trackMarkWrapper' | 'sliderContainer' | IconLessInputBaseParts
 type SliderStates = Exclude<InputBaseStates, 'focus'>
 
-export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts
-
+export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts | 'labelBtn' | 'descriptionBtn'
+export type SliderStylesGen = {
+  labelBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
+  descriptionBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
+}
 const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
 
 export const SliderPresets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })))

package/src/components/Slider/types.ts

@@ -18,6 +18,8 @@ export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>
     styles?: StylesOf<SliderComposition>
     style?: PropsOf<typeof View>['style']
     trackMarks?: RNSliderProps['trackMarks'] | Record<number, string>
+    trackMarksClickable?: boolean
+    labelClickable?: boolean
     trackMarkComponent?: React.ComponentType<TrackMarkProps>
 }
 
@@ -25,4 +27,5 @@ export type TrackMarkProps = {
   index: number
   content?: string | React.ReactNode
   style?: any
-}
+  onPress?: () => void
+}