@codeleap/mobile 1.4.2 → 1.5.0

package/src/components/Select/styles.ts

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

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