@codeleap/mobile 1.4.0 → 1.4.1

package/src/components/Select/types.ts

@@ -1,41 +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;
-  
+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

@@ -1,46 +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}
-    </>
-  )
-}
+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

@@ -1,29 +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>
-  )
-}
-  
+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

@@ -1,123 +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>
-  )
-}
-  
+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

@@ -1,25 +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'];
-};
+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']
+}