react-native-molecules 0.5.0-beta.0

package/hooks/useControlledValue.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+type ReturnType<T> = [T, (value: T, ...args: any[]) => void];
+
+type Args<T> = {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T, ...args: any[]) => any;
+    disabled?: boolean;
+    manipulateValue?: (value: T | undefined, prevValue: T | undefined) => T;
+};
+
+const defaultManipulateValue = (val: any) => val;
+
+const useControlledValue = <T,>({
+    value: valueProp,
+    defaultValue,
+    disabled = false,
+    onChange,
+    manipulateValue = defaultManipulateValue,
+}: Args<T>): ReturnType<T> => {
+    const value = useMemo(
+        () =>
+            valueProp !== undefined
+                ? manipulateValue(valueProp, undefined)
+                : manipulateValue(defaultValue, undefined),
+        [defaultValue, manipulateValue, valueProp],
+    );
+
+    const hasWarnedRef = useRef(false);
+
+    const isUncontrolled = useRef(valueProp).current === undefined;
+    const [uncontrolledValue, setValue] = useState(value);
+
+    const updateValue = useCallback(
+        (val: T, ...rest: any[]) => {
+            if (disabled) return;
+
+            if (isUncontrolled) {
+                setValue(manipulateValue(val, uncontrolledValue));
+            }
+
+            onChange?.(
+                manipulateValue(val, isUncontrolled ? uncontrolledValue : valueProp),
+                ...rest,
+            );
+        },
+        [disabled, isUncontrolled, manipulateValue, onChange, uncontrolledValue, valueProp],
+    );
+
+    useEffect(() => {
+        if (hasWarnedRef.current) return;
+        hasWarnedRef.current = true;
+
+        if (valueProp !== undefined && isUncontrolled) {
+            console.warn(
+                'Trying to change the value from uncontrolled to controlled can lead to inconsistencies',
+            );
+        }
+    }, [isUncontrolled, valueProp]);
+
+    return useMemo(
+        () => [isUncontrolled ? uncontrolledValue : value, updateValue],
+        [isUncontrolled, uncontrolledValue, updateValue, value],
+    );
+};
+
+export default useControlledValue;

package/hooks/useFilePicker.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+
+import {
+    DocumentPicker,
+    type DocumentPickerOptions,
+    type DocumentResult,
+} from '../utils/DocumentPicker';
+import { isNil, omitBy } from '../utils/lodash';
+
+export const useFilePicker = ({
+    multiple,
+    onCancel,
+    onError,
+    ...options
+}: DocumentPickerOptions) => {
+    const openFilePicker = useCallback(
+        async (callback: (response: DocumentResult | DocumentResult[]) => void): Promise<void> => {
+            const omittedOptions = omitBy(options, isNil);
+
+            try {
+                let response;
+
+                if (multiple) {
+                    response = await DocumentPicker.pickMultiple(omittedOptions);
+                } else {
+                    response = await DocumentPicker.pickSingle(omittedOptions);
+                }
+
+                callback?.(response);
+            } catch (e: any) {
+                // eslint-disable-next-line no-console
+                console.log('FilePicker Error', e, e?.code);
+
+                if (e?.code === 'DOCUMENT_PICKER_CANCELED.') {
+                    onCancel?.();
+                    return;
+                }
+                // It might result in an error.
+                onError?.(e);
+            }
+        },
+        [multiple, onCancel, onError, options],
+    );
+
+    return { openFilePicker };
+};
+
+export default useFilePicker;

package/hooks/useFocus.tsx

@@ -0,0 +1,5 @@
+import createPseudoHook from './createPsuedoHook';
+
+export const useFocus = createPseudoHook({
+    events: ['focus', 'blur'],
+});

package/hooks/useHandleNumberFormat.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+
+import { formatNumberWithMask, normalizeToNumberString } from '../utils';
+import { isNil } from '../utils/lodash';
+import usePrevious from './usePrevious';
+
+export type NumberMaskConfig = {
+    prefix?: string;
+    suffix?: string;
+    delimiter?: string;
+    separator?: string;
+    precision?: number;
+    allowNegative?: boolean;
+};
+
+type DefaultPropsT = { [key: string]: any };
+
+export type UseHandleNumberFormatProps<T extends DefaultPropsT = DefaultPropsT> = T & {
+    value: number | null;
+    onChangeText: (newValue: number | null) => void;
+    config?: NumberMaskConfig;
+    onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    formatInitialValue?: boolean;
+};
+
+const useHandleNumberFormat = <T extends DefaultPropsT = DefaultPropsT>({
+    value: valueProp,
+    onChangeText: onChangeTextProp,
+    config,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    formatInitialValue = true,
+    ...rest
+}: UseHandleNumberFormatProps<T>) => {
+    const [displayValue, setDisplayValue] = useState(() =>
+        !isNil(valueProp)
+            ? formatInitialValue
+                ? `${formatNumberWithMask({ number: valueProp, ...config })}`
+                : `${valueProp}`
+            : '',
+    );
+
+    const [isBlur, setIsBlur] = useState(true);
+
+    const firstRenderRef = useRef(true);
+
+    const isFirstRender = usePrevious(firstRenderRef.current);
+
+    const onChangeText = useCallback(
+        (text: string) => {
+            const normalizedNumberString = normalizeToNumberString({ text, ...config });
+
+            onChangeTextProp(
+                normalizedNumberString === ''
+                    ? null
+                    : +normalizeToNumberString({ text, ...config }),
+            );
+            setDisplayValue(text);
+        },
+        [config, onChangeTextProp],
+    );
+
+    const onBlur = useCallback(
+        (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+            onBlurProp?.(e);
+
+            setDisplayValue(`${formatNumberWithMask({ number: valueProp, ...config })}`);
+            setIsBlur(true);
+        },
+        [config, onBlurProp, valueProp],
+    );
+
+    const onFocus = useCallback(
+        (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+            onFocusProp?.(e);
+
+            setIsBlur(false);
+        },
+        [onFocusProp],
+    );
+
+    useEffect(() => {
+        firstRenderRef.current = false;
+    });
+
+    useEffect(() => {
+        if (!isBlur || isFirstRender.current) return;
+
+        setDisplayValue(`${formatNumberWithMask({ number: valueProp, ...config })}`);
+    }, [config, formatInitialValue, isBlur, isFirstRender, valueProp]);
+
+    return useMemo(
+        () => ({
+            value: displayValue,
+            onChangeText: onChangeText,
+            onFocus,
+            onBlur,
+            ...rest,
+        }),
+        [displayValue, onBlur, onChangeText, onFocus, rest],
+    );
+};
+
+export default useHandleNumberFormat;

package/hooks/useHover.tsx

@@ -0,0 +1,5 @@
+import createPseudoHook from './createPsuedoHook';
+
+export const useHover = createPseudoHook({
+    events: ['mouseenter', 'mouseleave'],
+});

package/hooks/useKeyboardDismissable.ts

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { BackHandler, Platform } from 'react-native';
+
+type TKeyboardDismissableParams = {
+    enabled?: boolean;
+    callback: Function;
+};
+
+type TBackHandler = TKeyboardDismissableParams;
+
+let keyboardDismissHandlers: Array<Function> = [];
+export const keyboardDismissHandlerManager = {
+    push: (handler: Function) => {
+        keyboardDismissHandlers.push(handler);
+        return () => {
+            keyboardDismissHandlers = keyboardDismissHandlers.filter(h => h !== handler);
+        };
+    },
+
+    length: () => keyboardDismissHandlers.length,
+
+    pop: () => {
+        return keyboardDismissHandlers.pop();
+    },
+};
+
+/**
+ * Handles attaching callback for Escape key listener on web and Back button listener on Android
+ */
+export const useKeyboardDismissable = ({ enabled, callback }: TKeyboardDismissableParams) => {
+    React.useEffect(() => {
+        let cleanupFn = () => {};
+        if (enabled) {
+            cleanupFn = keyboardDismissHandlerManager.push(callback);
+        } else {
+            cleanupFn();
+        }
+        return () => {
+            cleanupFn();
+        };
+    }, [enabled, callback]);
+
+    useBackHandler({ enabled, callback });
+};
+
+/**
+ * Handles attaching callback for Escape key listener on web and Back button listener on Android
+ */
+export function useBackHandler({ enabled, callback }: TBackHandler) {
+    useEffect(() => {
+        if (Platform.OS === 'web') return;
+
+        const backHandler = () => {
+            callback();
+            return true;
+        };
+
+        if (enabled) {
+            BackHandler.addEventListener('hardwareBackPress', backHandler);
+        } else {
+            // BackHandler.removeEventListener('hardwareBackPress', backHandler);
+        }
+
+        // return () => BackHandler.removeEventListener('hardwareBackPress', backHandler);
+    }, [enabled, callback]);
+}

package/hooks/useLatest.tsx

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+
+const useLatest = <T,>(value: T) => {
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+};
+
+export default useLatest;

package/hooks/useMediaQuery.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+import { isNil } from '../utils/lodash';
+
+type Query = {
+    maxWidth?: number;
+    minWidth?: number;
+    maxHeight?: number;
+    minHeight?: number;
+    orientation?: 'portrait' | 'landscape';
+};
+
+export function useMediaQuery(query: Query) {
+    const dims = useWindowDimensions();
+    const height = dims?.height;
+    const width = dims?.width;
+
+    return useMemo(() => queryResolver(query, width, height), [height, query, width]);
+}
+
+function queryResolver(query: Query, width?: number, height?: number) {
+    for (const queryKey in query) {
+        // if the func returns false, stop the loop and return false
+        if (!calculateQuery(queryKey, query[queryKey as keyof Query], height, width)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function calculateQuery(key: string, val?: number | string, height?: number, width?: number) {
+    let returnVal: boolean;
+    if (isNil(width) || isNil(height) || isNil(val)) {
+        return false;
+    }
+
+    switch (key) {
+        case 'maxWidth':
+            returnVal = width <= +val;
+            break;
+        case 'minWidth':
+            returnVal = width >= +val;
+            break;
+        case 'maxHeight':
+            returnVal = height <= +val;
+            break;
+        case 'minHeight':
+            returnVal = height >= +val;
+            break;
+        case 'orientation':
+            if (width > height) {
+                returnVal = val === 'landscape';
+            } else {
+                returnVal = val === 'portrait';
+            }
+            break;
+        default:
+            returnVal = false;
+            break;
+    }
+
+    return returnVal;
+}

package/hooks/useMergedRefs.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+import { mergeRefs } from '../utils';
+import useLatest from './useLatest';
+
+export const useMergedRefs: typeof mergeRefs = refs => {
+    const latestRefs = useLatest(refs);
+    return useCallback(
+        value => {
+            mergeRefs(latestRefs.current)(value);
+        },
+        [latestRefs],
+    );
+};

package/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+const usePrevious = <T>(value: T) => {
+    const ref = useRef<T>(value);
+
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+
+    return ref;
+};
+
+export default usePrevious;

package/hooks/useQueryFilter.tsx

@@ -0,0 +1,35 @@
+import { useMemo, useState } from 'react';
+
+type DefaultItem = { id: string | number; [key: string]: any };
+
+export type UseQueryFilterProps<TItem extends DefaultItem = DefaultItem> = {
+    records: TItem[];
+    filterKey?: string;
+};
+
+type ReturnType<TItem extends DefaultItem = DefaultItem> = [
+    records: TItem[],
+    query: string,
+    onChange: (value: string) => void,
+];
+
+export const useQueryFilter = <TItem extends DefaultItem = DefaultItem>({
+    records: _records,
+    filterKey = 'label',
+}: UseQueryFilterProps<TItem>): ReturnType<TItem> => {
+    const [query, setQuery] = useState('');
+
+    const records = useMemo(
+        // TODO: match all unicode character with regex
+        () =>
+            _records.filter(item => {
+                const value = item[filterKey];
+                if (typeof value !== 'string') return !query;
+
+                return value.toLowerCase().includes(query.toLowerCase());
+            }),
+        [_records, filterKey, query],
+    );
+
+    return useMemo(() => [records, query, setQuery], [records, query, setQuery]);
+};

package/hooks/useSearchable.tsx

@@ -0,0 +1,74 @@
+import { type ReactElement, useCallback, useMemo } from 'react';
+
+import { IconButton } from '../components/IconButton';
+import {
+    TextInput,
+    type TextInputElementProps,
+    type TextInputProps,
+} from '../components/TextInput';
+import useControlledValue from './useControlledValue';
+
+export interface UseSearchableProps {
+    searchable?: boolean;
+    onQueryChange?: (search: string) => void;
+    query?: string;
+    searchInputProps?: Omit<TextInputProps, 'value' | 'onChangeText'>;
+}
+
+const useSearchInputProps = (props?: Partial<TextInputProps>) => {
+    const onChange = props?.onChangeText;
+    const onPressClear = useCallback(() => {
+        onChange?.('');
+    }, [onChange]);
+
+    const right = useCallback(
+        ({ color, forceFocus }: TextInputElementProps) => (
+            <IconButton
+                name={props?.value ? 'close-circle-outline' : 'magnify'}
+                onPress={props?.value ? onPressClear : forceFocus}
+                color={color}
+            />
+        ),
+        [onPressClear, props?.value],
+    );
+
+    return useMemo(
+        () => (props?.right === undefined ? props : { right, ...props }),
+        [props, right],
+    );
+};
+
+const useSearchable = ({
+    searchable,
+    onQueryChange,
+    query,
+    searchInputProps,
+}: UseSearchableProps = {}): ReactElement<TextInputProps> | null => {
+    const [value, onValueChange] = useControlledValue({
+        value: query || '',
+        defaultValue: '', // to disable the useControlledValue inside TextInput
+        onChange: onQueryChange,
+        disabled: !searchable,
+    });
+
+    const props = useSearchInputProps(
+        useMemo(
+            () => ({
+                ...searchInputProps,
+                value,
+                onChangeText: onValueChange,
+            }),
+            [onValueChange, searchInputProps, value],
+        ),
+    );
+
+    return useMemo(() => {
+        if (!searchable || !onQueryChange) return null;
+
+        return <TextInput {...props} />;
+    }, [onQueryChange, props, searchable]);
+};
+
+export { useSearchInputProps };
+
+export default useSearchable;

package/hooks/useSubcomponents.tsx

@@ -0,0 +1,59 @@
+import type { ReactElement } from 'react';
+import { Children, type FC, isValidElement, useMemo } from 'react';
+
+export type UseSubcomponentsProps<T extends string> = {
+    children: ReactElement | ReactElement[];
+    /**
+     * array of displayName as string
+     * */
+    allowedChildren: T[];
+};
+
+/**
+ *  This will return an object with the displayNames as the property names
+ *  eg. allowedChildren: ['Drawer_Header', 'Drawer_Content', 'Drawer_Footer', 'DrawerItem'];
+ *
+ *  return value -> {
+ *    Drawer_Header: [],
+ *    Drawer_Content: [],
+ *    Drawer_Footer: [],
+ *    DrawerItem: [],
+ *  }
+ *  */
+const useSubcomponents = <T extends string = string>({
+    children,
+    allowedChildren,
+}: UseSubcomponentsProps<T>) => {
+    return useMemo(() => {
+        // this will create properties with default empty array values even if they don't exist in the children
+        const defaultContext = allowedChildren.reduce((context, childName) => {
+            return {
+                ...context,
+                [childName]: [],
+            };
+        }, {}) as {
+            [key in T]: ReactElement[];
+        };
+
+        return Children.map(children, child => child).reduce((context, child) => {
+            if (!isValidElement(child)) return context;
+
+            if (
+                !allowedChildren.find(name => name === ((child.type as FC).displayName as string))
+            ) {
+                return context;
+            }
+
+            const name = (child.type as FC).displayName as T;
+
+            if (!name) return context;
+
+            return {
+                ...context,
+                [name]: [...context[name], child],
+            };
+        }, defaultContext);
+    }, [allowedChildren, children]);
+};
+
+export default useSubcomponents;

package/hooks/useTheme.ts

@@ -0,0 +1,3 @@
+import { useUnistyles } from 'react-native-unistyles';
+
+export const useTheme = () => useUnistyles().theme;

package/hooks/useToggle.tsx

@@ -0,0 +1,24 @@
+import { useCallback, useMemo, useState } from 'react';
+
+const useToggle = (initialState = false) => {
+    const [state, setState] = useState<boolean>(initialState);
+
+    const toggle = useCallback(() => setState(prevState => !prevState), []);
+
+    const handleClose = useCallback(() => setState(false), [setState]);
+
+    const handleOpen = useCallback(() => setState(true), [setState]);
+
+    return useMemo(
+        () => ({
+            state,
+            onToggle: toggle,
+            setState,
+            handleOpen,
+            handleClose,
+        }),
+        [state, toggle, setState, handleOpen, handleClose],
+    );
+};
+
+export default useToggle;