@rn-components-dropdown/dropdown 1.0.0

package/dist/components/dropdown/components/chip/ChipStyle.d.ts

@@ -0,0 +1,84 @@
+import { ChipInterface } from '../../interface/ChipInterface';
+declare const useChipStyle: (props: ChipInterface) => {
+    styles: {
+        box: {
+            elevation: number;
+            width: "auto";
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: string;
+            margin: number;
+            height: number;
+        } | {
+            elevation: number;
+            width: "auto";
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: string;
+            shadowRadius?: undefined;
+            shadowOpacity?: undefined;
+            shadowColor?: undefined;
+            shadowOffset?: undefined;
+            margin: number;
+            height: number;
+        } | {
+            elevation: number;
+            width: "auto";
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: string;
+            shadowRadius: number;
+            shadowOpacity: number;
+            shadowColor: string;
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            margin: number;
+            height: number;
+        };
+        chipText: {
+            paddingLeft: number;
+            fontWeight: "600";
+        };
+        clearContainer: {
+            width: number;
+            height: number;
+            borderWidth: number;
+            borderRadius: number;
+            marginHorizontal: number;
+            alignItems: "center";
+            justifyContent: "center";
+            borderColor: string;
+            backgroundColor: string;
+        };
+        clearIcon: {
+            height: number;
+            width: number;
+            borderRadius: number;
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: string;
+        };
+    };
+    colors: {
+        blue: string;
+        gray: string;
+        error: string;
+        green: string;
+        white: string;
+        black: string;
+        primary: string;
+        lightGray: string;
+        grayishBlue: string;
+        red: string;
+        border: string;
+    };
+};
+export default useChipStyle;

package/dist/components/dropdown/components/chip/ChipStyle.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const style_1 = require("../../../../style");
+const react_native_1 = require("react-native");
+const useChipStyle = (props) => {
+    const { chipColor } = props;
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            box: {
+                margin: 4,
+                height: 26,
+                ...react_native_1.Platform.select({
+                    android: {
+                        elevation: 5,
+                    },
+                    ios: {
+                        shadowRadius: 1.84,
+                        shadowOpacity: 0.25,
+                        shadowColor: colors.black,
+                        shadowOffset: { width: 0, height: 2 },
+                    },
+                }),
+                elevation: 5,
+                width: 'auto',
+                borderRadius: 30,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
+            },
+            chipText: {
+                paddingLeft: 10,
+                fontWeight: '600',
+            },
+            clearContainer: {
+                width: 18,
+                height: 18,
+                borderWidth: 1,
+                borderRadius: 100,
+                marginHorizontal: 4,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderColor: colors.white,
+                backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
+            },
+            clearIcon: {
+                height: 12,
+                width: 12,
+                borderRadius: 100,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: colors.white,
+            },
+        });
+    }, [chipColor, colors]);
+    return {
+        styles,
+        colors,
+    };
+};
+exports.default = useChipStyle;

package/dist/components/dropdown/components/input/TextInput.d.ts

@@ -0,0 +1,3 @@
+import type { CTextInput } from '../../interface/InputProps';
+declare const TextInputComponent: CTextInput;
+export default TextInputComponent;

package/dist/components/dropdown/components/input/TextInput.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const TextInputStyle_1 = require("./TextInputStyle");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppTextInput_1 = __importDefault(require("../../../textInput/AppTextInput"));
+const TextInputComponent = props => {
+    const { value, placeholder = '', placeholderTextColor = '#000', onChangeText = (_value) => { }, searchIcon, } = props;
+    const [searchtext, setSearchText] = (0, react_1.useState)('');
+    const { styles } = (0, TextInputStyle_1.useTextStyle)();
+    (0, react_1.useEffect)(() => {
+        if (value) {
+            setSearchText(value);
+        }
+    }, [value]);
+    const onChange = (text) => {
+        setSearchText(text);
+        onChangeText(text);
+    };
+    return (<react_native_1.TouchableWithoutFeedback>
+      <AppTextInput_1.default {...props} value={searchtext} icon={searchIcon} style={styles.input} onChangeText={onChange} placeholder={placeholder} textStyle={styles.inputContainer} placeholderTextColor={placeholderTextColor}/>
+    </react_native_1.TouchableWithoutFeedback>);
+};
+exports.default = TextInputComponent;

package/dist/components/dropdown/components/input/TextInputStyle.d.ts

@@ -0,0 +1,32 @@
+export declare const useTextStyle: () => {
+    styles: {
+        input: {
+            height: number;
+            width: "95%";
+            fontSize: number;
+            borderWidth: number;
+            borderRadius: number;
+            marginVertical: number;
+            marginHorizontal: number;
+            borderColor: string;
+        };
+        inputContainer: {
+            width: "90%";
+            fontSize: number;
+            color: string;
+        };
+    };
+    colors: {
+        blue: string;
+        gray: string;
+        error: string;
+        green: string;
+        white: string;
+        black: string;
+        primary: string;
+        lightGray: string;
+        grayishBlue: string;
+        red: string;
+        border: string;
+    };
+};

package/dist/components/dropdown/components/input/TextInputStyle.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTextStyle = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const style_1 = require("../../../../style");
+const useTextStyle = () => {
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            input: {
+                height: 40,
+                width: '95%',
+                fontSize: 16,
+                borderWidth: 1,
+                borderRadius: 3,
+                marginVertical: 10,
+                marginHorizontal: 8,
+                borderColor: colors.border,
+            },
+            inputContainer: {
+                width: '90%',
+                fontSize: 14,
+                color: colors.gray,
+            },
+        });
+    }, [colors]);
+    return {
+        styles,
+        colors,
+    };
+};
+exports.useTextStyle = useTextStyle;

package/dist/components/dropdown/hooks/useDetectDevice.d.ts

@@ -0,0 +1,3 @@
+import type { IUseDetectDevice } from '../interface/DropdownInterface';
+declare const useDetectDevice: IUseDetectDevice;
+export { useDetectDevice };

package/dist/components/dropdown/hooks/useDetectDevice.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDetectDevice = void 0;
+const react_native_1 = require("react-native");
+const { width, height } = react_native_1.Dimensions.get('window');
+const isTablet = () => {
+    let pixelDensity = react_native_1.PixelRatio.get();
+    const adjustedWidth = width * pixelDensity;
+    const adjustedHeight = height * pixelDensity;
+    if (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) {
+        return true;
+    }
+    else {
+        return (pixelDensity === 2 && (adjustedWidth >= 1824 || adjustedHeight >= 1824));
+    }
+};
+const useDetectDevice = {
+    isAndroid: react_native_1.Platform.OS === 'android',
+    isIOS: react_native_1.Platform.OS === 'ios',
+    isTablet: isTablet(),
+};
+exports.useDetectDevice = useDetectDevice;

package/dist/components/dropdown/hooks/useDropdown.d.ts

@@ -0,0 +1,26 @@
+import { View, FlatList } from 'react-native';
+import { DropdownProps } from '../interface/DropdownInterface';
+declare const useDropdown: <T, Mode extends "single" | "multi">(props: DropdownProps<T, Mode>) => {
+    ref: import("react").RefObject<View | null>;
+    font: () => {
+        fontFamily: string;
+    } | {
+        fontFamily?: undefined;
+    };
+    refList: import("react").RefObject<FlatList<any> | null>;
+    visible: boolean;
+    position: any;
+    onSelect: (item: any) => void;
+    onSearch: (text: string) => void;
+    listData: any[];
+    onMeasure: () => void;
+    searchText: string;
+    showOrClose: () => void;
+    scrollIndex: () => void;
+    currentValue: any;
+    onCheckPress: (item: any) => void;
+    onClearPress: (item: T) => void;
+    setSearchText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    keyboardHeight: number;
+};
+export default useDropdown;

package/dist/components/dropdown/hooks/useDropdown.js

@@ -0,0 +1,263 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable react-hooks/exhaustive-deps */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const lodash_1 = __importDefault(require("lodash"));
+const useDetectDevice_1 = require("./useDetectDevice");
+const useOrientation_1 = require("./useOrientation");
+const style_1 = require("../../../style");
+const useDropdown = (props) => {
+    const { value, onBlur, onFocus, onChange, data = [], labelField, valueField, fontFamily, searchQuery, searchField, onChangeText, disable = false, ref: currentRef, mode = 'default', autoScroll = true, confirmSelectItem, onConfirmSelectItem, selectionType = 'single', } = props;
+    const ref = (0, react_1.useRef)(null);
+    const { isTablet } = useDetectDevice_1.useDetectDevice;
+    const refList = (0, react_1.useRef)(null);
+    const orientation = (0, useOrientation_1.useDeviceOrientation)();
+    const [position, setPosition] = (0, react_1.useState)();
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [listData, setListData] = (0, react_1.useState)(data);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(null);
+    const statusBarHeight = react_native_1.StatusBar.currentHeight || 0;
+    const [keyboardHeight, setKeyboardHeight] = (0, react_1.useState)(0);
+    (0, react_1.useImperativeHandle)(currentRef, () => {
+        return { open: eventOpen, close: eventClose };
+    });
+    (0, react_1.useEffect)(() => eventClose, []);
+    (0, react_1.useEffect)(() => {
+        setListData([...data]);
+        if (searchText) {
+            onSearch(searchText);
+        }
+    }, [data, searchText]);
+    const eventOpen = () => {
+        if (!disable) {
+            setVisible(true);
+            if (onFocus) {
+                onFocus();
+            }
+            if (searchText.length > 0) {
+                onSearch(searchText);
+            }
+            scrollIndex();
+        }
+    };
+    const eventClose = (0, react_1.useCallback)(() => {
+        if (!disable) {
+            setVisible(false);
+            if (onBlur) {
+                onBlur();
+            }
+        }
+    }, [disable, onBlur]);
+    const font = (0, react_1.useCallback)(() => {
+        if (fontFamily) {
+            return {
+                fontFamily: fontFamily,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [fontFamily]);
+    const onMeasure = (0, react_1.useCallback)(() => {
+        if (ref && ref?.current) {
+            ref.current.measureInWindow((pageX, pageY, width, height) => {
+                let isFull = isTablet
+                    ? false
+                    : mode === 'modal' || orientation === 'LANDSCAPE';
+                if (mode === 'auto') {
+                    isFull = false;
+                }
+                const top = isFull ? 20 : height + pageY + 2;
+                const bottom = style_1.SCREEN_HEIGHT - top + height;
+                const left = react_native_1.I18nManager.isRTL ? style_1.SCREEN_WIDTH - width - pageX : pageX;
+                setPosition({
+                    isFull,
+                    left: Math.floor(left),
+                    width: Math.floor(width),
+                    height: Math.floor(height),
+                    top: Math.floor(top + statusBarHeight),
+                    bottom: Math.floor(bottom - statusBarHeight),
+                });
+            });
+        }
+    }, [isTablet, mode, orientation, statusBarHeight]);
+    const onKeyboardDidShow = (0, react_1.useCallback)((e) => {
+        onMeasure();
+        setKeyboardHeight(e.endCoordinates.height);
+    }, [onMeasure]);
+    const onKeyboardDidHide = (0, react_1.useCallback)(() => {
+        setKeyboardHeight(0);
+        onMeasure();
+    }, [onMeasure]);
+    (0, react_1.useEffect)(() => {
+        const susbcriptionKeyboardDidShow = react_native_1.Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
+        const susbcriptionKeyboardDidHide = react_native_1.Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
+        return () => {
+            if (typeof susbcriptionKeyboardDidShow?.remove === 'function') {
+                susbcriptionKeyboardDidShow.remove();
+            }
+            if (typeof susbcriptionKeyboardDidHide?.remove === 'function') {
+                susbcriptionKeyboardDidHide.remove();
+            }
+        };
+    }, [onKeyboardDidHide, onKeyboardDidShow]);
+    const getValue = (0, react_1.useCallback)(() => {
+        if (selectionType === 'multi') {
+            if (!valueField)
+                return;
+            const v = data?.filter(i => value?.includes(i[valueField]));
+            setCurrentValue(v);
+            return;
+        }
+        else {
+            const defaultValue = typeof value === 'object' ? lodash_1.default.get(value, valueField) : value;
+            const getItem = data.filter(e => lodash_1.default.isEqual(defaultValue, lodash_1.default.get(e, valueField)));
+            if (getItem.length > 0) {
+                setCurrentValue(getItem[0]);
+            }
+            else {
+                setCurrentValue(null);
+            }
+        }
+    }, [data, value, valueField, selectionType]);
+    (0, react_1.useEffect)(() => getValue(), [value, data, getValue]);
+    const scrollIndex = (0, react_1.useCallback)(() => {
+        if (autoScroll && data.length > 0 && listData.length === data.length) {
+            setTimeout(() => {
+                if (refList && refList?.current) {
+                    const defaultValue = typeof value === 'object' ? lodash_1.default.get(value, valueField) : value;
+                    const index = lodash_1.default.findIndex(listData, (e) => lodash_1.default.isEqual(defaultValue, lodash_1.default.get(e, valueField)));
+                    if (index > -1 && index <= listData.length - 1) {
+                        refList?.current?.scrollToIndex({
+                            index: index,
+                            animated: false,
+                        });
+                    }
+                }
+            }, 200);
+        }
+    }, [autoScroll, data.length, listData, value, valueField]);
+    const showOrClose = (0, react_1.useCallback)(() => {
+        if (!disable) {
+            if (keyboardHeight > 0 && visible) {
+                return react_native_1.Keyboard.dismiss();
+            }
+            onMeasure();
+            setVisible(!visible);
+            setListData(data);
+            if (!visible) {
+                if (onFocus) {
+                    onFocus();
+                }
+            }
+            else {
+                if (onBlur) {
+                    onBlur();
+                }
+            }
+            if (searchText?.length > 0) {
+                onSearch(searchText);
+            }
+            scrollIndex();
+        }
+    }, [
+        data,
+        onBlur,
+        visible,
+        disable,
+        onFocus,
+        onMeasure,
+        searchText,
+        scrollIndex,
+        keyboardHeight,
+    ]);
+    const onSearch = (0, react_1.useCallback)((text) => {
+        if (text.length > 0) {
+            const defaultFilterFunction = (e) => {
+                const item = lodash_1.default.get(e, searchField || labelField)
+                    ?.toLowerCase()
+                    .replace(' ', '')
+                    .normalize('NFD')
+                    .replace(/[\u0300-\u036f]/g, '');
+                const key = text
+                    .toLowerCase()
+                    .replace(' ', '')
+                    .normalize('NFD')
+                    .replace(/[\u0300-\u036f]/g, '');
+                return item.indexOf(key) >= 0;
+            };
+            const propSearchFunction = (e) => {
+                const labelText = lodash_1.default.get(e, searchField || labelField);
+                return searchQuery?.(text, labelText);
+            };
+            const dataSearch = data.filter(searchQuery ? propSearchFunction : defaultFilterFunction);
+            setListData(dataSearch);
+        }
+        else {
+            setListData(data);
+        }
+    }, [data, searchField, labelField, searchQuery]);
+    const onSelect = (0, react_1.useCallback)((item) => {
+        if (confirmSelectItem && onConfirmSelectItem) {
+            return onConfirmSelectItem(item);
+        }
+        if (onChangeText) {
+            setSearchText('');
+            onChangeText('');
+        }
+        onSearch('');
+        setCurrentValue(item);
+        onChange?.(item[valueField]);
+        eventClose();
+    }, [
+        onChange,
+        onSearch,
+        eventClose,
+        onChangeText,
+        confirmSelectItem,
+        onConfirmSelectItem,
+    ]);
+    const onCheckPress = (0, react_1.useCallback)((item) => {
+        setCurrentValue?.((prev) => {
+            const exists = prev?.some?.((i) => i[valueField] === item[valueField]);
+            const va = exists
+                ? lodash_1.default.filter(prev, i => i?.[valueField] !== item?.[valueField])
+                : [...prev, item];
+            const v = va?.map(i => i[valueField]);
+            onChange?.(item[valueField], selectionType === 'multi' ? v : item[valueField]);
+            return va;
+        });
+    }, [setCurrentValue, valueField, onChange, currentValue]);
+    const onClearPress = (0, react_1.useCallback)((item) => {
+        const clone = lodash_1.default.clone(currentValue);
+        const rem = lodash_1.default.remove(clone, i => i?.[valueField] !== item[valueField]);
+        const val = rem?.map(i => i?.[valueField]);
+        setCurrentValue(rem);
+        onChange?.(item[valueField], val);
+    }, [onChange]);
+    return {
+        ref,
+        font,
+        refList,
+        visible,
+        position,
+        onSelect,
+        onSearch,
+        listData,
+        onMeasure,
+        searchText,
+        showOrClose,
+        scrollIndex,
+        currentValue,
+        onCheckPress,
+        onClearPress,
+        setSearchText,
+        keyboardHeight,
+    };
+};
+exports.default = useDropdown;

package/dist/components/dropdown/hooks/useOrientation.d.ts

@@ -0,0 +1 @@
+export declare function useDeviceOrientation(): "PORTRAIT" | "LANDSCAPE";

package/dist/components/dropdown/hooks/useOrientation.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeviceOrientation = useDeviceOrientation;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const isOrientationPortrait = ({ width, height }) => height >= width;
+const isOrientationLandscape = ({ width, height }) => width >= height;
+function useDeviceOrientation() {
+    const screen = react_native_1.Dimensions.get('screen');
+    const initialState = {
+        portrait: isOrientationPortrait(screen),
+        landscape: isOrientationLandscape(screen),
+    };
+    const [orientation, setOrientation] = (0, react_1.useState)(initialState);
+    (0, react_1.useEffect)(() => {
+        const onChange = ({ screen: screens }) => {
+            setOrientation({
+                portrait: isOrientationPortrait(screens),
+                landscape: isOrientationLandscape(screens),
+            });
+        };
+        const subscription = react_native_1.Dimensions.addEventListener('change', onChange);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, []);
+    return orientation.portrait ? 'PORTRAIT' : 'LANDSCAPE';
+}

package/dist/components/dropdown/interface/ChipInterface.d.ts

@@ -0,0 +1,8 @@
+import { ThemeColors } from '../../../interface/colors.interface';
+export interface ChipInterface {
+    label?: string;
+    onClearPress?: () => void;
+    chipColor?: keyof ThemeColors;
+    textColor?: keyof ThemeColors;
+    clearIcon?: React.JSX.Element;
+}

package/dist/components/dropdown/interface/ChipInterface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });