@codeleap/mobile 2.3.5 → 2.3.7

package/src/components/Slider/index.tsx

@@ -1,130 +0,0 @@
-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,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-
-import { SliderProps } from './types'
-import { InputLabel } from '../InputLabel'
-import { SliderStyles } from './styles'
-
-export * from './styles'
-
-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<'u:Slider', typeof SliderStyles>('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]
-    }
-
-    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} styles={getNestedStylesByKey('label', variantStyles)} />
-      <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] as any
-        }
-        thumbStyle={
-            StyleSheet.flatten([variantStyles.handle]) as any
-        }
-        trackStyle={[variantStyles.track] as any}
-        minimumTrackTintColor={
-          StyleSheet.flatten([
-            variantStyles.selectedTrack,
-
-          ])?.backgroundColor
-        }
-        {...props}
-      />
-    </View>
-  )
-}
-

package/src/components/Slider/styles.ts

@@ -1,76 +0,0 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { InputLabelComposition } from '../InputLabel'
-
-export type SliderComposition =
-  | 'wrapper'
-  | 'handle'
-  | 'track'
-  | `label${Capitalize<InputLabelComposition>}`
-  | 'selectedTrack'
-  | 'inputContainer'
-  | 'tooltip'
-  | 'tooltip:visible'
-  | 'tooltip:hidden'
-  | 'trackLabels'
-  | 'mark'
-  | 'tooltipArrow'
-  | 'tooltipText'
-
-const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
-
-const presets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })),
-)
-
-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,
-    },
-  })),
-}

package/src/components/Slider/types.ts

@@ -1,30 +0,0 @@
-import { ComponentVariants, Form } from '@codeleap/common'
-
-import {
-  SliderComposition, SliderStyles,
-} 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
-    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']
-}

package/src/components/Switch/index.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react'
-import {
-
-  ComponentVariants,
-  useDefaultComponentStyle,
-  StylesOf,
-  useCodeleapContext,
-  FormTypes,
-  useValidate,
-} from '@codeleap/common'
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
-import { StyleSheet, Switch as NativeSwitch } from 'react-native'
-import { FormError } from '../TextInput'
-import { View } from '../View'
-
-import {
-  SwitchStyles,
-  SwitchComposition,
-} from './styles'
-import { InputLabel } from '../InputLabel'
-export * from './styles'
-type NativeSwitchProps = Omit<
-  ComponentPropsWithRef<typeof NativeSwitch>,
-  'thumbColor' | 'trackColor'
->
-type SwitchProps = NativeSwitchProps & {
-  variants?: ComponentVariants<typeof SwitchStyles>['variants']
-  label?: ReactNode
-  styles?: StylesOf<SwitchComposition>
-  validate?: FormTypes.ValidatorFunctionWithoutForm | string
-}
-
-export const Switch = forwardRef<NativeSwitch, SwitchProps>(
-  (switchProps, ref) => {
-    const {
-      variants = [],
-      style = {},
-      styles = {},
-      validate,
-      label,
-      value,
-      ...props
-    } = switchProps
-
-    const variantStyles = useDefaultComponentStyle('Switch', {
-      variants,
-    })
-    const { error, showError } = useValidate(switchProps.value, validate)
-    function getStyles(key: SwitchComposition) {
-      return [
-        variantStyles[key],
-        styles[key],
-        key === 'wrapper' ? style : {},
-        showError ? variantStyles[key + ':error'] : {},
-        showError ? styles[key + ':error'] : {},
-        value ? variantStyles[key + ':on'] : {},
-        value ? styles[key + ':on'] : {},
-        switchProps.disabled ? variantStyles[key + ':disabled'] : {},
-        switchProps.disabled ? styles[key + ':disabled'] : {},
-      ]
-    }
-
-    const inputStyles = getStyles('input')
-
-    const { color, backgroundColor } = StyleSheet.flatten(inputStyles)
-    const { Theme } = useCodeleapContext()
-
-    const thumbColor = color || Theme.colors.primary
-    const trackColor = backgroundColor || Theme.colors.gray
-    return (
-      <View style={getStyles('wrapper')}>
-        <View style={getStyles('inputWrapper')}>
-          <NativeSwitch
-            thumbColor={thumbColor}
-            trackColor={{ false: trackColor, true: trackColor }}
-            ios_backgroundColor={trackColor}
-            value={value}
-            ref={ref}
-            {...props}
-          />
-          <InputLabel label={label} styles={{
-            asterisk: getStyles('labelAsterisk'),
-            text: getStyles('labelText'),
-            wrapper: getStyles('labelWrapper'),
-          }} />
-        </View>
-        <FormError text={error.message} style={getStyles('error')} />
-      </View>
-    )
-  },
-) as React.FC<SwitchProps>

package/src/components/Switch/styles.ts

@@ -1,38 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { InputLabelComposition } from '../InputLabel'
-
-export type SwitchParts = 'wrapper' | `label${Capitalize<InputLabelComposition>}` | 'input' | 'error' | 'inputWrapper'
-export type SwitchComposition =
-  | SwitchParts
-  | `${SwitchParts}:disabled`
-  | `${SwitchParts}:on`
-
-const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
-
-const presets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })),
-)
-
-export const SwitchStyles = {
-  ...presets,
-  default: createSwitchStyle((theme) => ({
-    wrapper: {},
-    inputWrapper: {
-      ...theme.presets.row,
-      ...theme.presets.alignCenter,
-    },
-    labelWrapper: {
-      ...theme.spacing.marginLeft(0.5),
-    },
-    input: {
-      color: theme.colors.white,
-      backgroundColor: theme.colors.gray,
-    },
-    'input:on': {
-      color: theme.colors.primary,
-      backgroundColor: theme.colors.gray,
-    },
-    error: {
-      color: theme.colors.negative,
-    },
-  })),
-}

package/src/components/Text/index.tsx

@@ -1,123 +0,0 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  BaseViewProps,
-  TypeGuards,
-  useState,
-} from '@codeleap/common'
-import { Animated, GestureResponderEvent, Platform, StyleSheet, Text as NativeText } from 'react-native'
-import { MotiText as _MotiText, MotiProps } from 'moti'
-import { useAnimateColor, usePressableFeedback } from '../../utils'
-import { TextStyles } from './styles'
-import { View } from '../View'
-
-export * from './styles'
-
-export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
-  text?: React.ReactNode
-  variants?: ComponentVariants<typeof TextStyles>['variants']
-  animated?: boolean
-  colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
-  debugName?: string
-  debounce?: number
-} & BaseViewProps & MotiProps
-
-const MotiText = Animated.createAnimatedComponent(_MotiText)
-
-export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
-  const { variants = [], text, children, onPress, style, colorChangeConfig, debounce = 1000, ...props } = textProps
-
-  const pressPolyfillEnabled = Platform.OS === 'android' && !!onPress
-
-  const [pressed, setPressed] = useState(false)
-  const pressedRef = React.useRef(false)
-
-  const _onPress:TextProps['onPress'] = (e) => {
-    if (!onPress) return
-
-    if (TypeGuards.isNumber(debounce)) {
-      if (pressedRef.current) {
-        return
-      }
-
-      pressedRef.current = true
-      onPress?.(e)
-      setTimeout(() => {
-        pressedRef.current = false
-      }, debounce)
-
-    } else {
-      onPress?.(e)
-    }
-  }
-
-  const handlePress = (pressed) => {
-    if (!pressPolyfillEnabled) return
-    return () => {
-      if (onPress) {
-        setPressed(pressed)
-      }
-    }
-  }
-  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextStyles>('u:Text', {
-    variants,
-    transform: StyleSheet.flatten,
-    rootElement: 'text',
-  })
-
-  const styles = StyleSheet.flatten([variantStyles.text, style])
-
-  const animatedColor = useAnimateColor(styles.color, colorChangeConfig)
-
-  if (!!text && !TypeGuards.isString(text)) return <>{text}</>
-
-  const Component = textProps.animated ? MotiText : NativeText
-
-  const colorStyle = { color: props.animated ? animatedColor : styles.color }
-
-  const { getFeedbackStyle } = usePressableFeedback(styles, {
-    disabled: !pressPolyfillEnabled,
-    feedbackConfig: variantStyles.pressFeedback,
-    hightlightPropertyIn: 'color',
-    hightlightPropertyOut: 'backgroundColor',
-  })
-  const feedbackStyle = pressPolyfillEnabled ? getFeedbackStyle(pressed) : undefined
-
-  const pressProps = !!onPress ? {
-    onPress: _onPress,
-  } : {}
-
-  return <Component {...props}
-    onPressIn={handlePress(true)} onPressOut={handlePress(false)}
-    style={[styles, colorStyle, feedbackStyle]}
-    {...pressProps}
-    // @ts-ignore
-    ref={ref}
-  >
-    {text}
-    {children}
-  </Component>
-
-})
-
-// const childArr = React.Children.toArray([
-//   text,
-//   children,
-// ])
-
-// return <View style={[styles, colorStyle]}>
-//   {
-//     childArr.map((child) => {
-//       if (TypeGuards.isString(child)) {
-//         // @ts-ignore
-//         return <Component {...props} ref={ref}>
-//           {child}
-//         </Component>
-
-//       }
-//       return child
-//     })
-//   }
-// </View>

package/src/components/Text/styles.ts

@@ -1,50 +0,0 @@
-import { assignTextStyle, createDefaultVariantFactory, includePresets, shadeColor, StylesOf } from '@codeleap/common'
-import { FeedbackConfig } from '../../utils'
-
-export type TextComposition = 'text' | 'touchFeedback'
-
-export type TextStylesGen<TCSS = any> = StylesOf<'text', TCSS> & {
-  'pressFeedback'?: FeedbackConfig
-}
-
-const createTextStyle = createDefaultVariantFactory<
-  TextComposition, TextStylesGen
->()
-
-const presets = includePresets((styles) => createTextStyle(() => ({ text: styles })),
-)
-
-export const TextStyles = {
-  ...presets,
-  default: createTextStyle((theme) => {
-    const defaultStyle = assignTextStyle('p1')(theme).text
-    return {
-      text: {
-        fontFamily: theme.typography.fontFamily,
-        ...defaultStyle,
-      },
-      pressFeedback: {
-        type: 'highlight',
-        brightness: 0,
-        shiftOpacity: 0.3,
-      },
-    }
-  }),
-  h1: assignTextStyle('h1'),
-  h2: assignTextStyle('h2'),
-  h3: assignTextStyle('h3'),
-  h4: assignTextStyle('h4'),
-  h5: assignTextStyle('h5'),
-  h6: assignTextStyle('h6'),
-  p1: assignTextStyle('p1'),
-  p2: assignTextStyle('p2'),
-  p3: assignTextStyle('p3'),
-  p4: assignTextStyle('p4'),
-  link: assignTextStyle('p1'),
-  OSAlertBody: createTextStyle((theme) => ({
-    text: {
-      ...assignTextStyle('p1')(theme).text,
-      ...theme.presets.textCenter,
-    },
-  })),
-}