@rn-components-dropdown/dropdown 1.0.0

package/dist/components/textInput/AppTextInputStyle.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppTextInputStyle = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const style_1 = require("../../style");
+const useAppTextInputStyle = ({ type, leftIcon, editable = true, }) => {
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            container: {
+                width: '100%',
+                ...style_1.SHADOW.shadow1,
+                flexDirection: 'row',
+                alignItems: 'center',
+                opacity: !editable ? 0.5 : 1,
+                backgroundColor: style_1.DEFAULT_COLORS.white,
+            },
+            margin: {
+                marginBottom: style_1.SPACING.s10,
+            },
+            rightIcon: {
+                position: 'absolute',
+                right: style_1.SPACING.s20,
+            },
+            error: {
+                textAlign: 'left',
+                paddingTop: style_1.SPACING.s4,
+                alignSelf: 'flex-start',
+                color: colors.red,
+            },
+            label: {
+                color: colors.primary,
+                marginBottom: style_1.SPACING.s12,
+                alignSelf: 'flex-start',
+                marginTop: style_1.SPACING.s10,
+            },
+            required: {
+                color: colors.red,
+            },
+            errorWrapper: {
+                borderWidth: 0.8,
+                borderColor: colors.red,
+            },
+            textInputStyles: {
+                padding: 0,
+                height: 48,
+                width: '100%',
+                color: colors.primary,
+                paddingLeft: leftIcon ? style_1.SPACING.s45 : 16,
+                paddingRight: type === 'password' ? 50 : 16,
+            },
+            leftIcon: {
+                position: 'absolute',
+                left: style_1.SPACING.s14,
+            },
+        });
+    }, [editable, colors, leftIcon, type]);
+    return { styles, colors };
+};
+exports.useAppTextInputStyle = useAppTextInputStyle;

package/dist/controller/dropDownController/DropdownController.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DropdownProps, SelectionType } from '../../components/dropdown/interface/DropdownInterface';
+import { Control, FieldValues, Path } from 'react-hook-form';
+type DropControllerProps<S, T extends SelectionType, U extends FieldValues> = {
+    control: Control<U>;
+    controller: Path<U>;
+    dropProps: DropdownProps<S, T>;
+};
+declare const AppDropdownController: <S, T extends SelectionType, U extends FieldValues>(props: DropControllerProps<S, T, U>) => React.JSX.Element;
+export default AppDropdownController;

package/dist/controller/dropDownController/DropdownController.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const AppText_1 = __importDefault(require("../../components/text/AppText"));
+const Dropdown_1 = __importDefault(require("../../components/dropdown/Dropdown"));
+const DropdownControllerStyle_1 = require("./DropdownControllerStyle");
+const react_hook_form_1 = require("react-hook-form");
+const AppDropdownController = (props) => {
+    const { control, controller, dropProps: { data, label, labelField, valueField, placeholder, selectionType, containerStyle, ...rest }, } = props;
+    const { styles } = (0, DropdownControllerStyle_1.useDropdownControllerStyle)();
+    return (<react_hook_form_1.Controller control={control} name={controller} render={({ fieldState: { error }, field: { onBlur, onChange, value }, }) => (<react_native_1.View style={styles.mainContainer}>
+          <Dropdown_1.default data={data} value={value} label={label} onBlur={onBlur} onChange={(selectValue, selectedItem) => {
+                if (selectionType === 'single') {
+                    return onChange(selectValue);
+                }
+                return onChange(selectedItem);
+            }} labelField={labelField} valueField={valueField} placeholder={placeholder} selectionType={selectionType} containerStyle={containerStyle} labelTextStyle={styles.labelText} itemTextStyle={styles.dropdownText} placeholderStyle={styles.itemContainer} selectedTextStyle={styles.selectionText} style={[styles.dropdownContainer, error && styles.errorWrapper]} {...rest}/>
+          {error && <AppText_1.default style={styles.error}>{error?.message}</AppText_1.default>}
+        </react_native_1.View>)}/>);
+};
+exports.default = AppDropdownController;

package/dist/controller/dropDownController/DropdownControllerStyle.d.ts

@@ -0,0 +1,50 @@
+export declare const useDropdownControllerStyle: () => {
+    styles: {
+        mainContainer: {
+            width: "100%";
+            marginBottom: number;
+        };
+        dropdownContainer: {
+            borderWidth: number;
+            borderRadius: number;
+            marginBottom: number;
+            borderColor: string;
+            paddingHorizontal: number;
+        };
+        labelText: {
+            color: string;
+        };
+        errorWrapper: {
+            borderWidth: number;
+            borderColor: string;
+        };
+        dropdownText: {
+            fontSize: number;
+            color: string;
+        };
+        itemContainer: {
+            fontSize: number;
+            color: string;
+        };
+        selectionText: {
+            fontSize: number;
+            color: string;
+        };
+        error: {
+            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/controller/dropDownController/DropdownControllerStyle.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdownControllerStyle = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const style_1 = require("../../style");
+const useDropdownControllerStyle = () => {
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            mainContainer: {
+                width: '100%',
+                marginBottom: style_1.SPACING?.s4,
+            },
+            dropdownContainer: {
+                borderWidth: 1,
+                borderRadius: 6,
+                marginBottom: style_1.SPACING.s10,
+                borderColor: colors.border,
+                paddingHorizontal: style_1.SPACING.s10,
+            },
+            labelText: {
+                color: colors.gray,
+            },
+            errorWrapper: {
+                borderWidth: 0.8,
+                borderColor: colors.red,
+            },
+            dropdownText: {
+                fontSize: 14,
+                color: colors.gray,
+            },
+            itemContainer: {
+                fontSize: 14,
+                color: colors.gray,
+            },
+            selectionText: {
+                fontSize: 14,
+                color: colors.gray,
+            },
+            error: {
+                color: colors.red,
+            },
+        });
+    }, [colors]);
+    return { styles, colors };
+};
+exports.useDropdownControllerStyle = useDropdownControllerStyle;

package/dist/controller/textInputController/AppTextInputController.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AppTextProps } from '../../components/textInput/AppTextInput';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { Control, FieldValues, Path } from 'react-hook-form';
+interface Props<T extends FieldValues> extends AppTextProps {
+    textStyle?: TextStyle;
+    controllerName: Path<T>;
+    containerStyle?: ViewStyle;
+    control: Control<T> | undefined;
+    labelStyle?: StyleProp<TextStyle>;
+}
+declare const AppTextControlInput: <T extends FieldValues>({ control, textStyle, labelStyle, controllerName, containerStyle, ...rest }: Props<T>) => React.JSX.Element;
+export default AppTextControlInput;

package/dist/controller/textInputController/AppTextInputController.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const AppTextInput_1 = __importDefault(require("../../components/textInput/AppTextInput"));
+const InputControllerStyle_1 = require("./InputControllerStyle");
+const react_hook_form_1 = require("react-hook-form");
+const AppTextControlInput = ({ control, textStyle, labelStyle, controllerName, containerStyle, ...rest }) => {
+    const { styles } = (0, InputControllerStyle_1.useInputController)();
+    return (<react_hook_form_1.Controller control={control} name={controllerName} render={({ fieldState: { error }, field: { onChange, value, onBlur }, }) => (<AppTextInput_1.default value={value} onBlur={onBlur} error={error?.message} onChangeText={onChange} textStyle={[styles.inputText, textStyle]} labelStyle={[styles.labelText, labelStyle]} style={[styles.inputControlContainer, containerStyle]} {...rest}/>)}/>);
+};
+exports.default = AppTextControlInput;

package/dist/controller/textInputController/InputControllerStyle.d.ts

@@ -0,0 +1,31 @@
+export declare const useInputController: () => {
+    styles: {
+        labelText: {
+            color: string;
+        };
+        inputControlContainer: {
+            height: number;
+            borderWidth: number;
+            borderRadius: number;
+            alignItems: "center";
+            marginVertical: number;
+            borderColor: string;
+        };
+        inputText: {
+            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/controller/textInputController/InputControllerStyle.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputController = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const style_1 = require("../../style");
+const useInputController = () => {
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            labelText: {
+                color: colors.gray,
+            },
+            inputControlContainer: {
+                height: 48,
+                borderWidth: 1,
+                borderRadius: 6,
+                alignItems: 'center',
+                marginVertical: style_1.SPACING.s2,
+                borderColor: colors.border,
+            },
+            inputText: {
+                color: colors.black,
+            },
+        });
+    }, [colors]);
+    return { styles, colors };
+};
+exports.useInputController = useInputController;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AppText } from './components/text/AppText';
+export { default as Dropdown } from './components/dropdown/Dropdown';
+export { default as TextInput } from './components/textInput/AppTextInput';
+export { default as DropdownController } from './controller/dropDownController/DropdownController';
+export { default as TextInputController } from './controller/textInputController/AppTextInputController';

package/dist/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInputController = exports.DropdownController = exports.TextInput = exports.Dropdown = exports.AppText = void 0;
+var AppText_1 = require("./components/text/AppText");
+Object.defineProperty(exports, "AppText", { enumerable: true, get: function () { return __importDefault(AppText_1).default; } });
+var Dropdown_1 = require("./components/dropdown/Dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
+var AppTextInput_1 = require("./components/textInput/AppTextInput");
+Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return __importDefault(AppTextInput_1).default; } });
+var DropdownController_1 = require("./controller/dropDownController/DropdownController");
+Object.defineProperty(exports, "DropdownController", { enumerable: true, get: function () { return __importDefault(DropdownController_1).default; } });
+var AppTextInputController_1 = require("./controller/textInputController/AppTextInputController");
+Object.defineProperty(exports, "TextInputController", { enumerable: true, get: function () { return __importDefault(AppTextInputController_1).default; } });

package/dist/interface/colors.interface.d.ts

@@ -0,0 +1,20 @@
+export type ThemeColors = {
+    red: string;
+    blue: string;
+    gray: string;
+    white: string;
+    error: string;
+    black: string;
+    green: string;
+    border: string;
+    primary: string;
+    lightGray: string;
+    grayishBlue: string;
+};
+export type Theme = {
+    mode: string;
+    colors: ThemeColors;
+};
+export interface ThemeInterface {
+    [index: string]: Theme;
+}

package/dist/interface/colors.interface.js

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

package/dist/style/colors.d.ts

@@ -0,0 +1,33 @@
+import { ThemeInterface } from "../interface/colors.interface";
+export declare const LIGHT_COLORS: {
+    blue: string;
+    gray: string;
+    error: string;
+    green: string;
+    white: string;
+    black: string;
+    primary: string;
+    lightGray: string;
+    grayishBlue: string;
+    red: string;
+    border: string;
+};
+export declare const DARK_COLORS: {
+    blue: string;
+    gray: string;
+    error: string;
+    green: string;
+    white: string;
+    black: string;
+    primary: string;
+    lightGray: string;
+    grayishBlue: string;
+    red: string;
+    border: string;
+};
+export declare const THEMES: ThemeInterface;
+export declare const DEFAULT_COLORS: {
+    blue: string;
+    white: string;
+    blackOpacity: string;
+};

package/dist/style/colors.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_COLORS = exports.THEMES = exports.DARK_COLORS = exports.LIGHT_COLORS = void 0;
+exports.LIGHT_COLORS = {
+    blue: '#0000ff',
+    gray: '#5c5b5b',
+    error: '#dc3545',
+    green: '#2EB85C',
+    white: '#FFFFFF',
+    black: '#000000',
+    primary: '#3683BC',
+    lightGray: '#e0e0e0',
+    grayishBlue: '#C5C6C7',
+    red: 'rgba(205, 46, 49, 1)',
+    border: 'rgba(224, 224, 224, 1)',
+};
+exports.DARK_COLORS = {
+    blue: '#0000ff',
+    gray: '#5c5b5b',
+    error: '#dc3545',
+    green: '#2EB85C',
+    white: '#FFFFFF',
+    black: '#000000',
+    primary: '#3683BC',
+    lightGray: '#e0e0e0',
+    grayishBlue: '#C5C6C7',
+    red: 'rgba(205, 46, 49, 1)',
+    border: 'rgba(224, 224, 224, 1)',
+};
+exports.THEMES = {
+    light: {
+        mode: 'light',
+        colors: exports.LIGHT_COLORS,
+    },
+    dark: {
+        mode: 'dark',
+        colors: exports.DARK_COLORS,
+    },
+};
+exports.DEFAULT_COLORS = {
+    blue: '#3683BC',
+    white: '#FFFFFF',
+    blackOpacity: 'rgba(0, 0, 0, 0.5)',
+};

package/dist/style/index.d.ts

@@ -0,0 +1,7 @@
+export * from './colors';
+export * from './spacing';
+export * from './shadow';
+export declare const addAlphaToHex: (color: string, opacity: number) => string;
+export declare const SCREEN_WIDTH: number;
+export declare const SCREEN_HEIGHT: number;
+export declare const MIN_DEVICE_WIDTH: number;

package/dist/style/index.js

@@ -0,0 +1,29 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MIN_DEVICE_WIDTH = exports.SCREEN_HEIGHT = exports.SCREEN_WIDTH = exports.addAlphaToHex = void 0;
+__exportStar(require("./colors"), exports);
+__exportStar(require("./spacing"), exports);
+__exportStar(require("./shadow"), exports);
+const react_native_1 = require("react-native");
+const addAlphaToHex = (color, opacity) => {
+    const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
+    return color + _opacity.toString(16).toUpperCase();
+};
+exports.addAlphaToHex = addAlphaToHex;
+exports.SCREEN_WIDTH = react_native_1.Dimensions.get('window').width;
+exports.SCREEN_HEIGHT = react_native_1.Dimensions.get('window').height;
+exports.MIN_DEVICE_WIDTH = react_native_1.Platform.OS === 'ios' ? 390 : 360;

package/dist/style/shadow.d.ts

@@ -0,0 +1,161 @@
+export declare const SHADOW: {
+    noShadow: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow0: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow1: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow2: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow3: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow4: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow5: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow6: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow7: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow8: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow9: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow10: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow11: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow12: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    containerShadow: {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow13: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};