@codeleap/mobile 3.7.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "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/ImageView/Spotlight.tsx

@@ -2,15 +2,18 @@ import React, { useContext, useState } from 'react'
 import { deepEqual, onUpdate, ReactState, TypeGuards, usePrevious, useUnmount } from '@codeleap/common'
 
 import uuid from 'react-native-uuid'
-import { ImageView } from './component'
+import { ImageView, ImageViewProps } from './component'
 import { ImageProps } from '../Image'
 import { ImageURISource, ImageRequireSource } from 'react-native'
+import { View } from '../View'
+import { Text } from '../Text'
+
 type ImageSource = ImageURISource | ImageRequireSource
 
 type TImage = {
-    source: ImageSource
-    created: number
-    id: string
+  source: ImageSource
+  created: number
+  id: string
 
 }
 type ImageList = Record<string, TImage>
@@ -18,19 +21,18 @@ type ImageList = Record<string, TImage>
 type SpotlightState = ReactState<Record<string, ImageList>>
 type IndexState = ReactState<Record<string, number>>
 type TSpotlightCtx = {
-    spotlights: SpotlightState[0]
-    setSpotlights: SpotlightState[1]
-    indexes: IndexState[0]
-    setIndexes: IndexState[1]
-
+  spotlights: SpotlightState[0]
+  setSpotlights: SpotlightState[1]
+  indexes: IndexState[0]
+  setIndexes: IndexState[1]
 }
 
 const SpotlightCtx = React.createContext({} as TSpotlightCtx)
 
-export const SpotlightProvider:React.FC<React.PropsWithChildren<any>> = ({ children }) => {
+export const SpotlightProvider: React.FC<React.PropsWithChildren<any>> = ({ children }) => {
   const [spotlights, setSpotlights] = useState<TSpotlightCtx['spotlights']>({})
   const [indexes, setIndexes] = useState<TSpotlightCtx['indexes']>({})
-  const ctxValue:TSpotlightCtx = {
+  const ctxValue: TSpotlightCtx = {
     spotlights,
     setSpotlights,
     indexes,
@@ -143,17 +145,48 @@ export const useImageSpotlight = (name: string | null, src: ImageProps['source']
   }
 }
 
-export const Spotlight = ({ name }: {name: string}) => {
+type HeaderComponentProps = {
+  imageIndex: number
+  spotlight: ReturnType<typeof useSpotlight>
+}
+
+type DefaultFooterComponentType = React.ComponentType<{
+  imageIndex: number
+  imagesLength: number
+}>
+
+type FooterComponentProps = HeaderComponentProps
+
+type SpotlightProps = {
+  name?: string
+  HeaderComponent?: (props: HeaderComponentProps) => JSX.Element
+  FooterComponent?: (props: FooterComponentProps) => JSX.Element
+  showFooter?: boolean
+} & ImageViewProps
+
+const DefaultFooterComponent: DefaultFooterComponentType = ({ imageIndex, imagesLength }) => (
+  <View variants={['marginBottom:5', 'alignCenter']}>
+    <Text text={imageIndex + 1 + '/' + imagesLength} />
+  </View>
+)
+
+export const Spotlight: React.FC<SpotlightProps> = ({ name, HeaderComponent, FooterComponent, ...rest }) => {
   const spotlight = useSpotlight(name)
   useUnmount(() => {
     spotlight.clear()
   })
+
   return <ImageView
     imageIndex={spotlight.currentIndex}
     images={spotlight.images.map(x => x.source)}
     keyExtractor={(_, index) => index.toString()}
     onRequestClose={spotlight.close}
     visible={typeof spotlight.currentIndex !== 'undefined'}
-
+    {...rest}
+    FooterComponent={({ imageIndex }) => !!FooterComponent ?
+      <FooterComponent imageIndex={imageIndex} spotlight={spotlight} /> :
+      <DefaultFooterComponent imageIndex={imageIndex} imagesLength={spotlight.images.length} />
+    }
+    HeaderComponent={!!HeaderComponent ? ({ imageIndex }) => <HeaderComponent spotlight={spotlight} imageIndex={imageIndex} /> : undefined}
   />
 }

package/src/components/ImageView/component.tsx

@@ -3,22 +3,8 @@ import * as React from 'react'
 import { onUpdate, PropsOf } from '@codeleap/common'
 import _ImageView from 'react-native-image-viewing'
 import { StatusBar } from 'react-native'
-import { View } from '../View'
-import { Text } from '../Text'
-
-type FooterComponentType = React.ComponentType<{
-  imageIndex: number
-  imagesLength: number
-}>
-
-const FooterComponent: FooterComponentType = ({ imageIndex, imagesLength }) => (
-  <View variants={['marginBottom:5', 'alignCenter']}>
-    <Text text={imageIndex + 1 + '/' + imagesLength}/>
-  </View>
-)
 
 export type ImageViewProps = PropsOf<typeof _ImageView>
-
 export const ImageView: React.FC<ImageViewProps> = (props) => {
   onUpdate(() => {
     StatusBar.setHidden(props.visible)
@@ -27,7 +13,6 @@ export const ImageView: React.FC<ImageViewProps> = (props) => {
   return (
     <_ImageView
       doubleTapToZoomEnabled={false}
-      FooterComponent={({ imageIndex }) => <FooterComponent imageIndex={imageIndex} imagesLength={props.images.length}/>}
       presentationStyle={'overFullScreen'}
       {...props}
     />

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}
   />
 }
 
@@ -150,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
+}