sapo-components-ui-rn 1.0.0

package/src/utils/function-utils.tsx

@@ -0,0 +1,108 @@
+import React, { forwardRef, memo } from "react";
+import { Animated } from "react-native";
+import isEqual from "lodash/isEqual";
+
+// Helper function to check if value is Date object
+function isDateObject(value: any): boolean {
+  return value instanceof Date && !isNaN(value.getTime());
+}
+
+// Wrapper function for deepEqual to handle Date object comparison
+export function deepEqualWithDate(a: any, b: any): boolean {
+  // Handle Date object comparison
+  if (isDateObject(a) !== isDateObject(b)) {
+    return false;
+  }
+  if (isDateObject(a) && isDateObject(b)) {
+    return a.getTime() === b.getTime();
+  }
+  return isEqual(a, b);
+}
+
+// Wrapper function for deepEqual to handle arguments object comparison
+export function deepEqualWithArguments(a: any, b: any): boolean {
+  // Handle arguments object comparison
+  if (isArguments(a) !== isArguments(b)) {
+    return false;
+  }
+  return deepEqualWithDate(a, b);
+}
+
+// Helper function to check if value is arguments object
+function isArguments(value: any): boolean {
+  return Object.prototype.toString.call(value) === "[object Arguments]";
+}
+
+export function memoDeepEqual<T>(component: React.ComponentType<T>) {
+  return memo(component, (prevProps, nextProps) =>
+    deepEqualWithArguments(prevProps, nextProps)
+  );
+}
+
+export const memoWithRef = (component: any) => {
+  return memo(forwardRef(component), (prevProps, nextProps) =>
+    isEqual(prevProps, nextProps)
+  );
+};
+
+export const detectEmail = (email: string) => {
+  var re =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(email);
+};
+
+export const detectUserName = (name: string) => {
+  var re =
+    /^[a-zA-Z0-9ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂưăạảấầẩẫậắằẳẵặẹẻẽềềểỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ ]*$/i;
+  return re.test(name);
+};
+
+export const detectPhoneNumber = (phoneNum: string) => {
+  var filter = /^[0-9]+$/;
+  if (filter.test(phoneNum)) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+export function withAnimated(
+  WrappedComponent: React.ComponentType<any>
+): React.ComponentType {
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || "Component";
+  class WithAnimated extends React.Component {
+    static displayName = `WithAnimated(${displayName})`;
+
+    render(): React.ReactNode {
+      return <WrappedComponent {...this.props} />;
+    }
+  }
+
+  return Animated.createAnimatedComponent(WithAnimated);
+}
+
+export const phoneValid = (phone: string) => {
+  const phoneRegex = /(((\+|)84)|0)(3|5|7|8|9)+([0-9]{8})\b/;
+  return phoneRegex.test(phone?.trim());
+};
+
+export const lightenColor = (color: string, percent: number) => {
+  const num = parseInt(color.slice(1), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = (num >> 16) + amt;
+  const G = ((num >> 8) & 0x00ff) + amt;
+  const B = (num & 0x0000ff) + amt;
+  return `#${(
+    0x1000000 +
+    (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+    (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+    (B < 255 ? (B < 1 ? 0 : B) : 255)
+  )
+    .toString(16)
+    .slice(1)}`;
+};
+
+export function getFileExtension(filename: string) {
+  return filename.substring(filename.lastIndexOf(".") + 1);
+}

package/src/utils/getContrastingColor.tsx

@@ -0,0 +1,15 @@
+import type { ColorValue } from 'react-native';
+
+import color from 'color';
+
+export default function getContrastingColor(
+  input: ColorValue,
+  light: string,
+  dark: string
+): string {
+  if (typeof input === 'string') {
+    return color(input).isLight() ? dark : light;
+  }
+
+  return light;
+}

package/src/utils/hasTouchHandler.tsx

@@ -0,0 +1,23 @@
+import type { GestureResponderEvent } from 'react-native';
+
+const touchableEvents = [
+  'onPress',
+  'onLongPress',
+  'onPressIn',
+  'onPressOut',
+] as const;
+
+type TouchableEventObject = Partial<
+  Record<
+    (typeof touchableEvents)[number],
+    (event: GestureResponderEvent) => void
+  >
+>;
+
+export default function hasTouchHandler(
+  touchableEventObject: TouchableEventObject
+) {
+  return touchableEvents.some((event) => {
+    return Boolean(touchableEventObject[event]);
+  });
+}

package/src/utils/roundLayoutSize.ts

@@ -0,0 +1,2 @@
+export const roundLayoutSize = (size: number): number =>
+  Math.round(size * 1000) / 1000;

package/src/utils/splitStyles.ts

@@ -0,0 +1,60 @@
+import type { ViewStyle } from 'react-native';
+
+type FiltersArray = readonly ((style: keyof ViewStyle) => boolean)[];
+
+type MappedTuple<Tuple extends FiltersArray> = {
+  [Index in keyof Tuple]: ViewStyle;
+} & { length: Tuple['length'] };
+
+type Style = ViewStyle[keyof ViewStyle];
+type Entry = [keyof ViewStyle, Style];
+
+/**
+ * Utility function to extract styles in separate objects
+ *
+ * @param styles The style object you want to filter
+ * @param filters The filters by which you want to split the styles
+ * @returns An array of filtered style objects:
+ * - The first style object contains the properties that didn't match any filter
+ * - After that there will be a style object for each filter you passed in the same order as the matching filters
+ * - A style property will exist in a single style object, the first filter it matched
+ */
+export function splitStyles<Tuple extends FiltersArray>(
+  styles: ViewStyle,
+  ...filters: Tuple
+) {
+  if (process.env.NODE_ENV !== 'production' && filters.length === 0) {
+    console.error('No filters were passed when calling splitStyles');
+  }
+
+  // `Object.entries` will be used to iterate over the styles and `Object.fromEntries` will be called before returning
+  // Entries which match the given filters will be temporarily stored in `newStyles`
+  const newStyles = filters.map(() => [] as Entry[]);
+
+  // Entries which match no filter
+  const rest: Entry[] = [];
+
+  // Iterate every style property
+  outer: for (const item of Object.entries(styles) as Entry[]) {
+    // Check each filter
+    for (let i = 0; i < filters.length; i++) {
+      // Check if filter matches
+      if (filters[i](item[0])) {
+        newStyles[i].push(item); // Push to temporary filtered entries array
+        continue outer; // Skip to checking next style property
+      }
+    }
+
+    // Adds to rest styles if not filtered
+    rest.push(item);
+  }
+
+  // Put unmatched styles in the beginning
+  newStyles.unshift(rest);
+
+  // Convert arrays of entries into objects
+  return newStyles.map((styles) => Object.fromEntries(styles)) as unknown as [
+    ViewStyle,
+    ...MappedTuple<Tuple>
+  ];
+}

package/src/utils/toast-manager.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+interface ToastRef {
+  show: (params: {
+    message?: string;
+    duration?: number;
+    position?: "top" | "bottom";
+    type?: "success" | "info" | "warning" | "error";
+    onPress?: () => void;
+    title?: string;
+  }) => void;
+}
+
+export const toastRef = React.createRef<ToastRef>();
+
+export const showToast = ({
+  message,
+  duration = 5000,
+  position = "top",
+  type = "success",
+  onPress = () => {},
+  title,
+}: {
+  message?: string;
+  duration?: number;
+  position?: "top" | "bottom";
+  type?: "success" | "info" | "warning" | "error";
+  onPress?: () => void;
+  title?: string;
+}) => {
+  if (!toastRef.current) {
+    console.warn(
+      "Toast component is not mounted. Make sure to add <ToastProvider> to your app."
+    );
+    return;
+  }
+
+  toastRef.current.show({
+    message,
+    duration,
+    position,
+    type,
+    onPress,
+    title,
+  });
+};

package/src/utils/useAnimatedValue.tsx

@@ -0,0 +1,9 @@
+import { Animated } from 'react-native';
+
+import useLazyRef from './useLazyRef';
+
+export default function useAnimatedValue(initialValue: number) {
+  const { current } = useLazyRef(() => new Animated.Value(initialValue));
+
+  return current;
+}

package/src/utils/useAnimatedValueArray.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+export default function useAnimatedValueArray(initialValues: number[]) {
+  const refs = React.useRef<Animated.Value[]>([]);
+
+  refs.current.length = initialValues.length;
+  initialValues.forEach((initialValue, i) => {
+    refs.current[i] = refs.current[i] ?? new Animated.Value(initialValue);
+  });
+
+  return refs.current;
+}

package/src/utils/useIsKeyboardShown.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Keyboard, NativeEventSubscription, Platform } from 'react-native';
+
+type Props = {
+  onShow: () => void;
+  onHide: () => void;
+};
+export default function useIsKeyboardShown({ onShow, onHide }: Props) {
+  React.useEffect(() => {
+    let willShowSubscription: NativeEventSubscription | undefined;
+    let willHideSubscription: NativeEventSubscription | undefined;
+    let didShowSubscription: NativeEventSubscription | undefined;
+    let didHideSubscription: NativeEventSubscription | undefined;
+
+    if (Platform.OS === 'ios') {
+      willShowSubscription = Keyboard.addListener('keyboardWillShow', onShow);
+      willHideSubscription = Keyboard.addListener('keyboardWillHide', onHide);
+    } else {
+      didShowSubscription = Keyboard.addListener('keyboardDidShow', onShow);
+      didHideSubscription = Keyboard.addListener('keyboardDidHide', onHide);
+    }
+
+    return () => {
+      if (Platform.OS === 'ios') {
+        if (willShowSubscription?.remove) {
+          willShowSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardWillShow', onShow);
+        }
+
+        if (willHideSubscription?.remove) {
+          willHideSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardWillHide', onHide);
+        }
+      } else {
+        if (didShowSubscription?.remove) {
+          didShowSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardDidShow', onShow);
+        }
+
+        if (didHideSubscription?.remove) {
+          didHideSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Keyboard.removeListener('keyboardDidHide', onHide);
+        }
+      }
+    };
+  }, [onHide, onShow]);
+}

package/src/utils/useLayout.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+
+export default function useLayout() {
+  const [layout, setLayout] = React.useState<{
+    height: number;
+    width: number;
+    measured: boolean;
+  }>({ height: 0, width: 0, measured: false });
+
+  const onLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      const { height, width } = e.nativeEvent.layout;
+
+      if (height === layout.height && width === layout.width) {
+        return;
+      }
+
+      setLayout({
+        height,
+        width,
+        measured: true,
+      });
+    },
+    [layout.height, layout.width]
+  );
+
+  return [layout, onLayout] as const;
+}

package/src/utils/useLazyRef.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export default function useLazyRef<T>(callback: () => T) {
+  const lazyRef = React.useRef<T | undefined>(null);
+
+  if (lazyRef.current === undefined) {
+    lazyRef.current = callback();
+  }
+
+  return lazyRef as React.MutableRefObject<T>;
+}