@codeleap/mobile 2.4.7 → 3.0.2

package/src/modules/PressableRipple/ripple.js

@@ -0,0 +1,258 @@
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { View, Animated, Easing, Platform, TouchableWithoutFeedback, I18nManager } from 'react-native';
+import { styles, radius } from './styles.js';
+
+export default class Ripple extends PureComponent {
+  static defaultProps = {
+    ...TouchableWithoutFeedback.defaultProps,
+
+    rippleColor: 'rgb(0, 0, 0)',
+    rippleOpacity: 0.30,
+    rippleDuration: 400,
+    rippleSize: 0,
+    rippleContainerBorderRadius: 0,
+    rippleCentered: false,
+    rippleSequential: false,
+    rippleFades: true,
+    disabled: false,
+
+    onRippleAnimation: (animation, callback) => animation.start(callback),
+  };
+
+  static propTypes = {
+    ...Animated.View.propTypes,
+    ...TouchableWithoutFeedback.propTypes,
+
+    rippleColor: PropTypes.string,
+    rippleOpacity: PropTypes.number,
+    rippleDuration: PropTypes.number,
+    rippleSize: PropTypes.number,
+    rippleContainerBorderRadius: PropTypes.number,
+    rippleCentered: PropTypes.bool,
+    rippleSequential: PropTypes.bool,
+    rippleFades: PropTypes.bool,
+    disabled: PropTypes.bool,
+
+    onRippleAnimation: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.onLayout = this.onLayout.bind(this);
+    this.onPress = this.onPress.bind(this);
+    this.onPressIn = this.onPressIn.bind(this);
+    this.onPressOut = this.onPressOut.bind(this);
+    this.onLongPress = this.onLongPress.bind(this);
+    this.onAnimationEnd = this.onAnimationEnd.bind(this);
+
+    this.renderRipple = this.renderRipple.bind(this);
+
+    this.unique = 0;
+    this.mounted = false;
+
+    this.state = {
+      width: 0,
+      height: 0,
+      ripples: [],
+    };
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  onLayout(event) {
+    let { width, height } = event.nativeEvent.layout;
+    let { onLayout } = this.props;
+
+    if ('function' === typeof onLayout) {
+      onLayout(event);
+    }
+
+    this.setState({ width, height });
+  }
+
+  onPress(event) {
+    let { onPress } = this.props;
+
+    if ('function' === typeof onPress) {
+      onPress(event)
+    }
+  }
+
+  onLongPress(event) {
+    let { onLongPress } = this.props;
+
+    if ('function' === typeof onLongPress) {
+      requestAnimationFrame(() => onLongPress(event));
+    }
+
+    this.startRipple(event);
+  }
+
+  onPressIn(event) {
+    let { onPressIn } = this.props;
+
+    if ('function' === typeof onPressIn) {
+      onPressIn(event);
+    }
+
+    this.startRipple(event);
+  }
+
+  onPressOut(event) {
+    let { onPressOut } = this.props;
+
+    if ('function' === typeof onPressOut) {
+      onPressOut(event);
+    }
+  }
+
+  onAnimationEnd() {
+    if (this.mounted) {
+      this.setState(({ ripples }) => ({ ripples: ripples.slice(1) }));
+    }
+  }
+
+  startRipple(event) {
+    let { width, height } = this.state;
+    let {
+      rippleDuration,
+      rippleCentered,
+      rippleSize,
+      onRippleAnimation,
+    } = this.props;
+
+    let w2 = 0.5 * width;
+    let h2 = 0.5 * height;
+
+    let { locationX, locationY } = rippleCentered?
+      { locationX: w2, locationY: h2 }:
+      event.nativeEvent;
+
+    let offsetX = Math.abs(w2 - locationX);
+    let offsetY = Math.abs(h2 - locationY);
+
+    let R = rippleSize > 0?
+      0.5 * rippleSize:
+      Math.sqrt(Math.pow(w2 + offsetX, 2) + Math.pow(h2 + offsetY, 2));
+
+    let ripple = {
+      unique: this.unique++,
+      progress: new Animated.Value(0),
+      locationX,
+      locationY,
+      R,
+    };
+
+    let animation = Animated
+      .timing(ripple.progress, {
+        toValue: 1,
+        easing: Easing.out(Easing.ease),
+        duration: rippleDuration,
+        useNativeDriver: true,
+      });
+
+    onRippleAnimation(animation, this.onAnimationEnd);
+
+    this.setState(({ ripples }) => ({ ripples: ripples.concat(ripple) }));
+  }
+
+  renderRipple({ unique, progress, locationX, locationY, R }) {
+    let { rippleColor, rippleOpacity, rippleFades } = this.props;
+
+    let rippleStyle = {
+      top: locationY - radius,
+      [I18nManager.isRTL? 'right' : 'left']: locationX - radius,
+      backgroundColor: rippleColor,
+
+      transform: [{
+        scale: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.5 / radius, R / radius],
+        }),
+      }],
+
+      opacity: rippleFades?
+        progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [rippleOpacity, 0],
+        }):
+        rippleOpacity,
+    };
+
+    return (
+      <Animated.View style={[styles.ripple, rippleStyle]} key={unique} />
+    );
+  }
+
+  render() {
+    let { ripples } = this.state;
+    let {
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      disabled,
+      hitSlop,
+      pressRetentionOffset,
+      children,
+      rippleContainerBorderRadius,
+      testID,
+      nativeID,
+      accessible,
+      accessibilityHint,
+      accessibilityLabel,
+
+      onPress,
+      onLongPress,
+      onLayout,
+      onRippleAnimation,
+
+      rippleColor,
+      rippleOpacity,
+      rippleDuration,
+      rippleSize,
+      rippleCentered,
+      rippleSequential,
+      rippleFades,
+      ref,
+      radiusStyles,
+
+      ...props
+    } = this.props;
+
+    let touchableProps = {
+      disabled,
+      hitSlop,
+      pressRetentionOffset,
+      testID,
+      accessible,
+      accessibilityHint,
+      accessibilityLabel,
+      onLayout: this.onLayout,
+      onPress: this.onPress,
+      onPressIn: this.onPressIn,
+      onPressOut: this.onPressOut,
+      onLongPress: onLongPress ? this.onLongPress : undefined,
+
+      ...('web' !== Platform.OS? { nativeID } : null),
+    };
+
+    return (
+      <TouchableWithoutFeedback {...touchableProps} ref={ref}>
+        <Animated.View {...props} pointerEvents='box-only'>
+          {children}
+          <View style={[styles.container, radiusStyles]}>
+            {ripples.map(this.renderRipple)}
+          </View>
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}

package/src/modules/PressableRipple/styles.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+
+const radius = 10
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+
+    backgroundColor: 'transparent',
+    overflow: 'hidden',
+  },
+
+  ripple: {
+    width: radius * 2,
+    height: radius * 2,
+    borderRadius: radius,
+    overflow: 'hidden',
+    position: 'absolute',
+  },
+})
+
+export { styles, radius }

package/src/modules/PressableRipple/type.ts

@@ -0,0 +1,17 @@
+import {
+  Animated,
+} from 'react-native';
+
+export type PressableRippleProps = {
+  rippleColor?: string;
+  rippleOpacity?: number;
+  rippleDuration?: number;
+  rippleSize?: number;
+  rippleCentered?: boolean;
+  rippleSequential?: boolean;
+  rippleFades?: boolean;
+  onRippleAnimation?: (
+    animation: Animated.CompositeAnimation,
+    callback: () => void,
+  ) => void;
+}

package/src/modules/textInputMask.tsx

@@ -0,0 +1,13 @@
+
+// import MaskInput from 'react-native-mask-input'
+import { TextInputMask, TextInputMaskProps } from 'react-native-masked-text'
+
+// import { TextInputMaskProps } from './types/textInputMask'
+
+export const MaskedTextInput = TextInputMask as unknown as React.ForwardRefExoticComponent<Partial<TextInputMaskProps> & {
+    ref?: any
+}>
+
+
+
+export * from './types/textInputMask'

package/src/types/index.ts

@@ -1 +1,6 @@
 export * from './utility'
+
+
+export type ComponentWithDefaultProps<P> = React.FC<P> & {
+  defaultProps: Partial<P>
+}

package/src/types/utility.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react'
 import { StyleProp } from 'react-native'
-import { EasingFunction } from 'react-native-animatable'
+import { EasingFn } from 'react-native-reanimated'
 
 export type StylesOf<C extends string> = Partial<Record<C, StyleProp<any>>>
 type TransitionBase = {
-  easing?: EasingFunction
+  easing?: EasingFn
   type?: string
   duration?: number
 }

package/src/utils/KeyboardAware/index.ts

@@ -1,17 +1,4 @@
-/* @flow */
 
-import listenToKeyboardEvents from './lib/KeyboardAwareHOC'
-import KeyboardAwareScrollView from './lib/KeyboardAwareScrollView'
-import KeyboardAwareFlatList from './lib/KeyboardAwareFlatList'
-import KeyboardAwareSectionList from './lib/KeyboardAwareSectionList'
 export * from './keyboardHooks'
 export * from './context'
-
-export {
-  listenToKeyboardEvents,
-  KeyboardAwareFlatList,
-  KeyboardAwareSectionList,
-  KeyboardAwareScrollView,
-}
-
 export * from './types'

package/src/utils/KeyboardAware/keyboardHooks.ts

@@ -21,101 +21,91 @@ export type GetKeyboardAwarePropsOptions = {
 }
 type UseKeyboardAwareViewParams = {
   debugName?: string
-}
+  styles?: any
+} & GetKeyboardAwarePropsOptions
+
 export const useKeyboardAwareView = (params?: UseKeyboardAwareViewParams) => {
   const keyboard = useKeyboard()
   const { logger } = useCodeleapContext()
-  function getKeyboardAwareProps<T extends ScrollViewProps>(
-    props?:T,
-    options?: GetKeyboardAwarePropsOptions,
-  ): T {
+  const options = params || {}
 
-    const _options:GetKeyboardAwarePropsOptions = {
-      adapt: 'maxHeight',
-      baseStyleProp: 'style',
-      enabled: true,
-      enableOnAndroid: false,
-      animated: false,
-      ...options,
-      transition: {
-        easing: Easing.linear,
-        duration: 200,
-        type: 'timing',
-      },
-    }
+  const _options:GetKeyboardAwarePropsOptions = {
+    adapt: 'maxHeight',
+    baseStyleProp: 'style',
+    enabled: true,
+    enableOnAndroid: false,
+    animated: false,
+    ...options,
+    transition: {
+      easing: Easing.linear,
+      duration: 200,
+      type: 'timing',
+    },
+  }
 
-    if (!_options.enabled || props?.horizontal || (Platform.OS === 'android' && !_options.enableOnAndroid)) return props
+  if (!_options.enabled ||  (Platform.OS === 'android' && !_options.enableOnAndroid)) return {
+    keyboard,
+    style: params?.styles,
+  }
 
-    if (!props) {
-      props = {} as T
-    }
-    const baseStyle = StyleSheet.flatten(props[_options.baseStyleProp] || {})
 
-    const baseValue = baseStyle[_options.adapt] as number
-    let valid = true
-    const warnOnNotNumber = () => {
-      if (!TypeGuards.isNil(baseValue) && !TypeGuards.isNumber(baseValue)) {
-        valid = false
-        const debugStr = params?.debugName ? 'at ' + params?.debugName + ' ' : ''
-        logger.warn(
-          `${_options.baseStyleProp}.${_options.adapt} must be a number or not be set at all`,
-          { props, options: _options },
-          'useKeyboardAwareView' + debugStr,
-        )
-      }
-    }
+  const baseStyle = StyleSheet.flatten(params.styles || {})
 
-    const newStyleProp = _options.animated ? {
+  let baseValue = baseStyle[_options.adapt] as number
 
-    } : {
-      ...baseStyle,
+  if(TypeGuards.isNil(baseValue)){
+    baseValue = 0
+  }
+  
+  let valid = true
+  const warnOnNotNumber = () => {
+    if (!TypeGuards.isNil(baseValue) && !TypeGuards.isNumber(baseValue)) {
+      valid = false
+      const debugStr = params?.debugName ? 'at ' + params?.debugName + ' ' : ''
+     console.log(debugStr)
     }
+  }
 
-    switch (_options.adapt) {
-      case 'height':
-        warnOnNotNumber()
-        const baseHeight = baseValue || 0
-        newStyleProp.height = baseHeight - keyboard.height
-        break
-      case 'maxHeight':
-        warnOnNotNumber()
-        const baseMaxHeight = baseValue || Dimensions.get('window').height
-        newStyleProp.maxHeight = baseMaxHeight - keyboard.height
-        break
-      case 'paddingBottom':
-        warnOnNotNumber()
-        const basePaddingBottom = baseValue || 0
-        newStyleProp.paddingBottom = basePaddingBottom + keyboard.height
-        break
-      case 'marginBottom':
-        warnOnNotNumber()
-        const baseMarginBottom = baseValue || 0
-        newStyleProp.marginBottom = baseMarginBottom + keyboard.height
-        break
-      case 'bottom':
-        warnOnNotNumber()
-        const baseBottom = baseValue || 0
-        newStyleProp.bottom = baseBottom + keyboard.height
-        break
-    }
+  let newStyleProp =  {
+    ...baseStyle,
+  }
 
-    if (!valid) return props
+  switch (_options.adapt) {
+    case 'height':
+      warnOnNotNumber()
+      const baseHeight = baseValue || 0
+      newStyleProp.height = baseHeight - keyboard.height
+      break
+    case 'maxHeight':
+      warnOnNotNumber()
+      const baseMaxHeight = baseValue || Dimensions.get('window').height
+      newStyleProp.maxHeight = baseMaxHeight - keyboard.height
+      break
+    case 'paddingBottom':
+      warnOnNotNumber()
+      const basePaddingBottom = baseValue || 0
+      newStyleProp.paddingBottom = basePaddingBottom + keyboard.height
+      break
+    case 'marginBottom':
+      warnOnNotNumber()
+      const baseMarginBottom = baseValue || 0
+      newStyleProp.marginBottom = baseMarginBottom + keyboard.height
+      break
+    case 'bottom':
+      warnOnNotNumber()
+      const baseBottom = baseValue || 0
+      newStyleProp.bottom = baseBottom + keyboard.height
+      break
+  }
 
-    const _return = {
-      ...props,
-      [_options?.animated ? 'animate' : _options.baseStyleProp]: newStyleProp,
-    }
+  if (!valid){
+    newStyleProp = params.styles
+  }
 
-    if (_options.animated && !!_options?.transition) {
-      _return.transition = JSON.parse(JSON.stringify({
-        [_options.adapt]: _options.transition,
-      }))
-    }
 
-    return _return
-  }
   return {
     keyboard,
-    getKeyboardAwareProps,
+    style: newStyleProp,
+    
   }
 }