@codeleap/mobile 2.4.6 → 3.0.2

package/src/components/Modal/index.tsx

@@ -1,27 +1,25 @@
 import * as React from 'react'
 import { View, ViewProps } from '../View'
-import { Button, ButtonProps } from '../Button'
+import { ButtonProps } from '../Button'
 import { Scroll } from '../Scroll'
 import {
   ComponentVariants,
   getNestedStylesByKey,
   IconPlaceholder,
-  onUpdate,
   PropsOf,
   TypeGuards,
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import {
   ModalComposition,
-  ModalStyles,
+  ModalPresets,
   ModalParts,
 } from './styles'
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
 
-import { useDynamicAnimation } from 'moti'
 import { Backdrop } from '../Backdrop'
-import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
+import { useAnimatedVariantStyles, useBackButton } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
@@ -30,7 +28,7 @@ import { ActionIcon } from '../ActionIcon'
 export * from './styles'
 
 export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-  variants?: ComponentVariants<typeof ModalStyles>['variants']
+  variants?: ComponentVariants<typeof ModalPresets>['variants']
   styles?: StylesOf<ModalComposition>
   dismissOnBackdrop?: boolean
   buttonProps?: ButtonProps
@@ -50,36 +48,54 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   closeOnHardwareBackPress?: boolean
   renderHeader?: (props: ModalHeaderProps) => React.ReactElement
   keyboardAware?: GetKeyboardAwarePropsOptions
-  scrollProps?: PropsOf<typeof Scroll>
+  scrollProps?: PropsOf<typeof Scroll, 'ref'>
 }
 
 export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
   styles: {
     wrapper: ViewProps['style']
+    titleWrapper: ViewProps['style']
     title: TextProps['style']
+    description: TextProps['style']
     closeButton: ButtonProps['styles']
   }
   description?: React.ReactElement
 }
 
 const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
-  const { styles, title = null, showClose = false, description = null, closable, debugName, closeIconName = 'close', toggle } = props
+  const {
+    styles,
+    title = null,
+    showClose = false,
+    description = null,
+    closable, debugName,
+    closeIconName = 'close',
+    toggle,
+  } = props
   return <>
     {(title || showClose || description) && (
       <View style={styles.wrapper}>
-        {typeof title === 'string' ? (
-          <Text text={title} style={styles.title} />
-        ) : (
-          title
-        )}
+        <View style={styles.titleWrapper}>
+          {TypeGuards.isString(title) ? (
+            <Text text={title} style={styles.title} />
+          ) : (
+            title
+          )}
+
+          {(showClose && closable) && (
+            <ActionIcon
+              debugName={`${debugName} modal close button`}
+              icon={closeIconName as IconPlaceholder}
+              onPress={toggle}
+              styles={styles.closeButton}
+            />
+          )}
+        </View>
 
-        {(showClose && closable) && (
-          <ActionIcon
-            debugName={`${debugName} modal close button`}
-            icon={closeIconName as IconPlaceholder}
-            onPress={toggle}
-            styles={styles.closeButton}
-          />
+        {TypeGuards.isString(description) ? (
+          <Text text={description} style={styles.description} />
+        ) : (
+          description
         )}
       </View>
     )}</>
@@ -105,7 +121,10 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     scrollProps = {},
     closeOnHardwareBackPress = true,
     ...props
-  } = modalProps
+  } = {
+    ...Modal.defaultProps,
+    ...modalProps,
+  }
   const variantStyles = useDefaultComponentStyle('u:Modal', {
     variants: variants as any,
     transform: StyleSheet.flatten,
@@ -122,15 +141,17 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
   }
   const buttonStyles = React.useMemo(() => getNestedStylesByKey('closeButton', variantStyles), [variantStyles])
 
-  const boxAnimationStates = useStaticAnimationStyles(variantStyles, ['box:hidden', 'box:visible'])
-
-  const boxAnimation = useDynamicAnimation(() => {
-    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
+  const boxAnimationStyles = useAnimatedVariantStyles({
+    updater: (states) => {
+      'worklet'
+      return visible ? states['box:visible'] : states['box:hidden']
+    },
+    animatedProperties: ['box:hidden', 'box:visible'],
+    variantStyles,
+    transition: variantStyles['box:transition'],
+    dependencies: [visible],
   })
 
-  onUpdate(() => {
-    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
-  }, [visible])
   const wrapperStyle = getStyles('wrapper')
 
   const ScrollComponent = scroll ? Scroll : View
@@ -143,7 +164,9 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     styles: {
       wrapper: getStyles('header'),
       title: getStyles('title'),
+      description: getStyles('description'),
       closeButton: buttonStyles,
+      titleWrapper: getStyles('titleWrapper'),
     },
   }
   const Header = renderHeader || DefaultHeader
@@ -187,7 +210,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
       >
         {dismissOnBackdrop &&
           <Touchable
-            onPress={ closable ? toggle : (() => {})}
+            onPress={closable && visible ? toggle : (() => {})}
             debounce={400}
             debugName={'Modal backdrop touchable'}
             style={variantStyles.backdropTouchable}
@@ -197,9 +220,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
 
         <View
           animated
-          state={boxAnimation}
-          style={getStyles('box')}
-          transition={{ ...variantStyles['box:transition'] }}
+          style={[getStyles('box'), boxAnimationStyles]}
 
           {...props}
         >
@@ -220,4 +241,8 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
   )
 }
 
+Modal.defaultProps = {
+  closeIconName: 'close' as IconPlaceholder,
+}
+
 export default Modal

package/src/components/Modal/styles.ts

@@ -1,5 +1,4 @@
 import {
-  assignTextStyle,
   createDefaultVariantFactory,
   includePresets,
 } from '@codeleap/common'
@@ -18,6 +17,8 @@ export type ModalParts =
   | 'header'
   | 'backdropTouchable'
   | 'title'
+  | 'description'
+  | 'titleWrapper'
   | `closeButton${Capitalize<ActionIconComposition>}`
 
 export type ModalComposition =
@@ -28,116 +29,4 @@ export type ModalComposition =
 
 const createModalStyle = createDefaultVariantFactory<ModalComposition>()
 
-const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
-
-export const ModalStyles = {
-  ...presets,
-  default: createModalStyle((theme) => {
-    return {
-      wrapper: {
-        ...theme.presets.absolute,
-        // ...theme.presets.whole,
-        ...theme.presets.fullHeight,
-        ...theme.presets.fullWidth,
-      },
-      'box:transition': {
-        scale: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      'backdrop:transition': {
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      backdrop: {
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
-
-        backgroundColor: theme.colors.black,
-
-      },
-      backdropTouchable: {
-        // height: '100%',
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
-
-      },
-      'backdrop:visible': {
-        opacity: 0.5,
-      },
-      'backdrop:hidden': {
-        opacity: 0,
-      },
-      innerWrapper: {
-
-      },
-      scroll: {
-        flex: 1,
-        // maxHeight: theme.values.height,
-      },
-      scrollContent: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        flexGrow: 1,
-        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
-        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
-      },
-      box: {
-        backgroundColor: theme.colors.background,
-        width: theme.values.width - theme.spacing.value(theme.values.innerSpacing.X * 2),
-        borderRadius: theme.borderRadius.modalOuter,
-        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
-        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
-      },
-
-      'box:hidden': {
-        opacity: 0,
-        scale: 0.8,
-
-      },
-      'box:visible': {
-        opacity: 1,
-        scale: 1,
-      },
-      header: {
-        flexDirection: 'row',
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-        ...theme.presets.alignSelfStretch,
-        ...theme.spacing.marginBottom(1),
-      },
-      closeButtonTouchableWrapper: {
-        alignSelf: 'center',
-        ...theme.spacing.marginLeft('auto'),
-      },
-      closeButtonIcon: {
-        color: theme.colors.text,
-      },
-      title: {
-        ...assignTextStyle('h3')(theme).text,
-      },
-    }
-  }),
-  popup: createModalStyle(() => ({})),
-  fullscreen: createModalStyle((theme) => ({
-    scrollContent: {
-      paddingTop: 0,
-      paddingBottom: 0,
-    },
-    box: {
-      width: '100%',
-      flexGrow: 1,
-      borderRadius: 0,
-      ...theme.presets.center,
-      ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
-      ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
-    },
-  })),
-}
+export const ModalPresets = includePresets((style) => createModalStyle(() => ({ body: style })))

package/src/components/NumberIncrement/index.tsx

@@ -0,0 +1,318 @@
+import * as React from 'react'
+import {
+  useDefaultComponentStyle,
+  TypeGuards,
+  useState,
+  useRef,
+  useValidate,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { forwardRef, useImperativeHandle } from 'react'
+import { NumberIncrementPresets } from './styles'
+import { InputBase, selectInputBaseProps } from '../InputBase'
+import { Text } from '../Text'
+import { MaskedTextInput } from '../../modules/textInputMask'
+import { TextInput as NativeTextInput, TextInputProps as NativeTextInputProps, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+import { Touchable } from '../Touchable'
+import { useActionValidate } from './utils'
+import { NumberIncrementProps } from './types'
+
+export * from './styles'
+export * from './types'
+
+const MAX_VALID_DIGITS = 1000000000000000 // maximum number of digits that the input supports to perform operations
+
+const defaultParseValue = (_value: string) => {
+  const value = _value?.length > 0 ? _value : '0'
+
+  const parsedValue = value?.replace(/[^\d.]/g, '')
+
+  return parseFloat(parsedValue)
+}
+
+const defaultProps: Partial<NumberIncrementProps> = {
+  max: MAX_VALID_DIGITS,
+  min: 0,
+  step: 1,
+  editable: true,
+  separator: null,
+  formatter: null,
+  parseValue: defaultParseValue,
+  delimiter: null,
+  mask: null,
+  masking: null,
+  timeoutActionFocus: 300,
+  actionPressAutoFocus: true,
+  actionDebounce: null,
+}
+
+export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>((props, inputRef) => {
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps({
+    ...NumberIncrement.defaultProps,
+    ...props,
+  })
+
+  const {
+    variants = [],
+    style = {},
+    styles = {},
+    value,
+    disabled,
+    onChangeText,
+    onChangeMask,
+    max,
+    min,
+    step,
+    editable,
+    validate,
+    onPress,
+    _error,
+    masking,
+    separator,
+    prefix,
+    suffix,
+    delimiter,
+    formatter,
+    actionPressAutoFocus,
+    parseValue,
+    timeoutActionFocus,
+    mask,
+    actionDebounce,
+    ...textInputProps
+  } = others
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  const innerInputRef = useRef<NativeTextInput>(null)
+
+  const actionValidation = useActionValidate(validate)
+  const validation = useValidate(value, validate)
+
+  const hasError = !validation.isValid || _error || !actionValidation?.isValid
+  const errorMessage = validation.message || _error || actionValidation?.message
+
+  const isFormatted = TypeGuards.isFunction(formatter)
+
+  const hasMaskProps = [masking, prefix, suffix, delimiter, separator, mask].some(v => !!v)
+
+  const isMasked = hasMaskProps && !isFormatted
+
+  const InputElement = isMasked ? MaskedTextInput : NativeTextInput
+
+  // @ts-expect-error - React's ref type system is weird
+  useImperativeHandle(inputRef, () => {
+    return {
+      ...innerInputRef.current,
+      focus: () => {
+        innerInputRef.current?.focus?.()
+      },
+      isTextInput: true,
+    }
+  }, [!!innerInputRef?.current?.focus])
+
+  const incrementDisabled = React.useMemo(() => {
+    if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
+      return true
+    }
+    return false
+  }, [value])
+
+  const decrementDisabled = React.useMemo(() => {
+    if (TypeGuards.isNumber(min) && (Number(value) <= min)) {
+      return true
+    }
+    return false
+  }, [value])
+
+  const variantStyles = useDefaultComponentStyle<'u:NumberIncrement', typeof NumberIncrementPresets>(
+    'u:NumberIncrement',
+    {
+      variants,
+      styles,
+      rootElement: 'wrapper',
+    },
+  )
+
+  const inputTextStyle = React.useMemo(() => ([
+    variantStyles.input,
+    isFocused && variantStyles['input:focus'],
+    hasError && variantStyles['input:error'],
+    disabled && variantStyles['input:disabled'],
+  ]), [disabled, isFocused, hasError])
+
+  const placeholderTextColor = [
+    [disabled, variantStyles['placeholder:disabled']],
+    [hasError, variantStyles['placeholder:error']],
+    [isFocused, variantStyles['placeholder:focus']],
+    [true, variantStyles.placeholder],
+  ].find(([x]) => x)?.[1]?.color
+
+  const selectionColor = [
+    [disabled, variantStyles['selection:disabled']],
+    [!validation.isValid, variantStyles['selection:error']],
+    [isFocused, variantStyles['selection:focus']],
+    [true, variantStyles.selection],
+  ].find(([x]) => x)?.[1]?.color
+
+  const onChange = (newValue: number) => {
+    actionValidation.onAction(newValue)
+    // @ts-ignore
+    if (onChangeText) onChangeText?.(newValue)
+  }
+
+  const actionTimeoutRef = useRef(null)
+
+  const clearActionTimeoutRef = React.useCallback(() => {
+    if (actionTimeoutRef.current !== null) {
+      clearTimeout(actionTimeoutRef.current)
+      actionTimeoutRef.current = null
+    }
+  }, [actionTimeoutRef.current])
+
+  const handleChange = React.useCallback((action: 'increment' | 'decrement') => {
+    if (actionPressAutoFocus) setIsFocused(true)
+    clearActionTimeoutRef()
+
+    if (action === 'increment' && !incrementDisabled) {
+      const newValue = Number(value) + step
+      onChange(newValue)
+    } else if (action === 'decrement' && !decrementDisabled) {
+      const newValue = Number(value) - step
+      onChange(newValue)
+    }
+
+    if (actionPressAutoFocus) {
+      actionTimeoutRef.current = setTimeout(() => {
+        setIsFocused(false)
+      }, timeoutActionFocus)
+    }
+  }, [value])
+
+  const handleBlur = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    if (TypeGuards.isNumber(max) && (value >= max)) {
+      onChange(max)
+    } else if (TypeGuards.isNumber(min) && (value <= min) || !value || String(value)?.length <= 0) {
+      onChange(min)
+    }
+
+    validation?.onInputBlurred()
+    setIsFocused(false)
+    props?.onBlur?.(e)
+  }, [validation?.onInputBlurred, props?.onBlur, value])
+
+  const handleFocus = React.useCallback((e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    validation?.onInputFocused()
+    clearActionTimeoutRef()
+    if (editable) setIsFocused(true)
+    if (e) props?.onFocus?.(e)
+  }, [validation?.onInputFocused, props?.onFocus])
+
+  const handleChangeInput: NativeTextInputProps['onChangeText'] = (text) => {
+    const value = parseValue(text)
+
+    if (value >= MAX_VALID_DIGITS) {
+      onChange(MAX_VALID_DIGITS)
+      return MAX_VALID_DIGITS
+    }
+
+    onChange(value)
+    return value
+  }
+
+  const handleMaskChange = (masked: string, unmasked: any) => {
+    handleChangeInput?.(masked)
+    if (onChangeMask) onChangeMask(masked, unmasked)
+  }
+
+  const maskingExtraProps = isMasked ? {
+    type: TypeGuards.isNil(mask) ? 'money' : 'custom',
+    onChangeText: handleMaskChange,
+    ...masking,
+    options: {
+      unit: prefix,
+      separator: separator ?? '.',
+      suffixUnit: suffix,
+      delimiter: delimiter ?? ',',
+      mask: mask,
+      ...masking?.options,
+    },
+    ref: null,
+    refInput: (inputRef) => {
+      if (!!inputRef) {
+        innerInputRef.current = inputRef
+      }
+    },
+  } : {}
+
+  const onPressInnerWrapper = () => {
+    handleFocus()
+    if (editable) innerInputRef.current?.focus?.()
+    if (onPress) onPress?.()
+  }
+
+  return (
+    <InputBase
+      {...inputBaseProps}
+      error={hasError ? errorMessage : null}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+        ],
+      }}
+      rightIcon={{
+        name: 'plus' as IconPlaceholder,
+        disabled: disabled || incrementDisabled || !editable,
+        onPress: () => handleChange('increment'),
+        debounce: actionDebounce,
+        ...inputBaseProps.rightIcon,
+      }}
+      leftIcon={{
+        name: 'minus' as IconPlaceholder,
+        disabled: disabled || decrementDisabled || !editable,
+        onPress: () => handleChange('decrement'),
+        debounce: actionDebounce,
+        ...inputBaseProps.leftIcon,
+      }}
+      style={style}
+      disabled={disabled}
+      focused={isFocused}
+      innerWrapper={Touchable}
+      innerWrapperProps={{
+        ...(inputBaseProps.innerWrapperProps || {}),
+        rippleDisabled: true,
+        onPress: onPressInnerWrapper,
+      }}
+    >
+      {editable && !disabled ? (
+        <InputElement
+          keyboardType='numeric'
+          textAlign='center'
+          textAlignVertical='center'
+          allowFontScaling={false}
+          editable={!disabled}
+          placeholderTextColor={placeholderTextColor}
+          value={isFormatted ? formatter(value) : String(value)}
+          selectionColor={selectionColor}
+          onChangeText={handleChangeInput}
+          {...textInputProps}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          style={inputTextStyle}
+          ref={innerInputRef}
+          {...maskingExtraProps}
+        />
+      ) : (
+        <Text
+          text={isFormatted ? formatter(value) : String(value)}
+          style={inputTextStyle}
+        />
+      )}
+    </InputBase>
+  )
+})
+
+NumberIncrement.defaultProps = defaultProps

package/src/components/NumberIncrement/styles.ts

@@ -0,0 +1,14 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputBaseParts, InputBaseStates } from '../InputBase'
+
+export type NumberIncrementParts = InputBaseParts | 'input' | 'placeholder' | 'selection'
+
+export type NumberIncrementStates = InputBaseStates
+
+export type NumberIncrementComposition =
+  | NumberIncrementParts
+  | `${NumberIncrementParts}:${NumberIncrementStates}`
+
+const createNumberIncrementStyle = createDefaultVariantFactory<NumberIncrementComposition>()
+
+export const NumberIncrementPresets = includePresets((styles) => createNumberIncrementStyle(() => ({ wrapper: styles })))

package/src/components/NumberIncrement/types.ts

@@ -0,0 +1,44 @@
+import {
+  ComponentVariants,
+  yup,
+  StylesOf,
+  PropsOf,
+  FormTypes,
+} from '@codeleap/common'
+import { NumberIncrementPresets, NumberIncrementComposition } from './styles'
+import { TextInputMaskProps } from '../../modules/textInputMask'
+import { TextInputProps as NativeTextInputProps } from 'react-native'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
+import { InputBaseProps } from '../InputBase'
+
+type Masking = FormTypes.TextField['masking']
+type MaskOptions =  Masking['options']
+
+export type NumberIncrementProps = 
+  Omit<InputBaseProps, 'styles' | 'variants'> &
+  NativeTextInputProps & {
+  variants?: ComponentVariants<typeof NumberIncrementPresets>['variants']
+  styles?: StylesOf<NumberIncrementComposition>
+  value: number
+  validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+  style?: PropsOf<typeof View>['style']
+  max?: number
+  min?: number
+  step?: number
+  editable?: boolean
+  _error?: string
+  placeholder?: string
+  onChangeMask?: TextInputMaskProps['onChangeText']
+  masking?: Exclude<Masking, 'mask' | 'format'>
+  prefix?: MaskOptions['unit']
+  suffix?: MaskOptions['suffixUnit']
+  separator?: MaskOptions['separator']
+  delimiter?: MaskOptions['delimiter']
+  mask?: MaskOptions['mask']
+  formatter?: (value: string | number) => string
+  parseValue?: (value: string) => number
+  timeoutActionFocus?: number
+  actionPressAutoFocus?: boolean
+  actionDebounce?: number | null
+} & Pick<PropsOf<typeof Touchable>, 'onPress'>