ikualo-ui-kit-mobile 0.1.2 → 0.1.4

package/.env

@@ -0,0 +1 @@
+EXPO_API_DEV_URL=https://api-gw-dev.ikualo.com/api/v1/

package/assets/styles/elements/pages.ts

@@ -5,9 +5,9 @@ const stylePages = StyleSheet.create({
   'page-basic': { flex: 1, backgroundColor: theme.colors.background },
   'page-basic-view': {
     flex: 1,
-    paddingVertical: 16,
+    paddingBottom: 16,
     paddingHorizontal: 16,
   },
 });
 
-export { stylePages };
+export { stylePages };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/alerts/Alert.tsx

@@ -16,7 +16,7 @@ export const Alert = (props: IFAlertInfo) => {
   useEffect(() => {
     setTimeout(() => {
       onClose();
-    }, miliSeconds ?? 3000);
+    }, miliSeconds ?? 6000);
   }, []);
   return (
     <Portal>
@@ -31,3 +31,4 @@ export const Alert = (props: IFAlertInfo) => {
     </Portal>
   );
 }
+

package/src/elements/buttons/BtnContained.tsx

@@ -40,7 +40,7 @@ export const BtnContained = (props: IfBtnContained) => {
         ]}
         style={[stylesButtonContained['btn-contained'], style ?? '']}
         mode="contained"
-        onPress={onPress}
+        onPress={() => !isLoading && onPress()}
       >
         {icon && <Image source={icon} />}
         {text}

package/src/elements/cards/CardList.tsx

@@ -8,11 +8,12 @@ interface IfCardList {
   options: { value: string | JSX.Element, id: string }[];
   children?: React.ReactNode;
   onSelectOption: (value: string) => void;
+  value?: string;
 }
 
 export const CardList = (props: IfCardList) => {
-  const { options, onSelectOption } = props;
-  const [selectedOption, setSelectOption] = useState(0);
+  const { options, onSelectOption, value } = props;
+  const [selectedOption, setSelectOption] = useState(value ? options.findIndex((option) => option.id === value) : 0);
 
   return (
     <ScrollView>

package/src/elements/dialogs/DialogGeneral.tsx

@@ -21,11 +21,11 @@ interface IFDialogIcon {
   children?: JSX.Element;
   isDisabled?: boolean;
   styleBtnContainer?: StyleProp<ViewStyle>;
-
+  isLoading?: boolean;
 }
 
 export const DialogGeneral = (props: IFDialogIcon) => {
-  const { isVisible, title, text, textCancel, textOk, icon, onDismiss, onConfirm, textStyle, additionalTextStyle, additionalText, isDisabled, children, styleBtnContainer, showClose } = props;
+  const { isLoading, isVisible, title, text, textCancel, textOk, icon, onDismiss, onConfirm, textStyle, additionalTextStyle, additionalText, isDisabled, children, styleBtnContainer, showClose } = props;
   const icons = {
     error: <MaterialIcons name="delete-forever" size={24} color={theme.colors.darkRed} />,
     warning: <FontAwesome name="warning" size={24} color={theme.colors.darkWarning} />,
@@ -82,6 +82,7 @@ export const DialogGeneral = (props: IFDialogIcon) => {
               <BtnContained
                 color={icon === 'error' ? 'error' : 'primary'}
                 size='sm'
+                isLoading={isLoading}
                 onPress={onConfirm}
                 text={textOk}
                 isDisabled={isDisabled}

package/src/elements/inputs/Input.tsx

@@ -117,6 +117,7 @@ export const Input = (props: IfInputText) => {
         textColor={textColor}
         style={[
           styleInput['input-label'],
+          { backgroundColor: theme.colors.white },
           ((!isValid && value?.trim() !== '') || errorRequired) && styleInput['input-error-focused'],
           isFocus && isValid && !errorRequired && styleInput['input-text--focused'],
           style ?? [],

package/src/elements/inputs/InputEmail.tsx

@@ -69,7 +69,7 @@ export const InputEmail = (props: IfInputText) => {
         onChangeText={handleInputChange}
         theme={{
           colors: {
-            primary:theme.colors.primary,
+            primary: theme.colors.primary,
             onSurfaceVariant: theme.colors.boldBlack,
             error: theme.colors.darkRed,
           },
@@ -84,10 +84,11 @@ export const InputEmail = (props: IfInputText) => {
         }}
         error={error}
         textColor={textColor}
-        style={[styleInput['input-label'], 
-          isFocus && isValid && styleInput['input-text--focused'],
-          !isValid && styleInput['input-error-focused'],
-          style ?? []]}
+        style={[styleInput['input-label'],
+        { backgroundColor: theme.colors.white },
+        isFocus && isValid && styleInput['input-text--focused'],
+        !isValid && styleInput['input-error-focused'],
+        style ?? []]}
         contentStyle={[
           styleInput['input-label'],
           !isValid && !isFocus && value.trim() !== '' && styleInput['input-txt-error'],
@@ -97,15 +98,15 @@ export const InputEmail = (props: IfInputText) => {
           underlineColor
             ? underlineColor
             : isValid
-            ? styleInput['input-text-underline'].color
-            : styleInput['input-txt-error'].borderBottomColor
+              ? styleInput['input-text-underline'].color
+              : styleInput['input-txt-error'].borderBottomColor
         }
         activeUnderlineColor={
           activeUnderlineColor
             ? activeUnderlineColor
             : !isValid && value.trim() !== ''
-            ? styleInput['input-text--activeUnderline'].color
-            : ''
+              ? styleInput['input-text--activeUnderline'].color
+              : ''
         }
       />
       {isValid && (
@@ -121,4 +122,4 @@ export const InputEmail = (props: IfInputText) => {
       )}
     </View>
   );
-};
+};

package/src/elements/inputs/InputPassword.tsx

@@ -3,6 +3,7 @@ import { styleInput } from '../../../assets/styles/elements/inputs';
 import { useState } from 'react';
 import { Image, View } from 'react-native';
 import { icons } from '../../../assets/icons/_icons';
+import { theme } from '../../config/paper.config';
 
 interface IfInputPassword {
   label?: string;
@@ -27,6 +28,7 @@ interface IfInputPassword {
   pattern?: RegExp;
   readonly?: boolean;
   nonValidate?: boolean;
+  maxLength?: number;
 }
 
 export const InputPassword = (props: IfInputPassword) => {
@@ -52,6 +54,7 @@ export const InputPassword = (props: IfInputPassword) => {
     onInvalid,
     readonly,
     nonValidate,
+    maxLength
   } = props;
   const patternPasswordDefault = pattern ?? /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/
 
@@ -93,10 +96,12 @@ export const InputPassword = (props: IfInputPassword) => {
             icon={!showText ? icons.visibilityOff : icons.visibilityOn}
           />
         }
+        maxLength={maxLength ?? 16}
         placeholderTextColor={styleInput['input-txt'].color}
         textColor={textColor}
         style={[
           styleInput['input-label'],
+          { backgroundColor: theme.colors.white },
           isFocus && isValid && styleInput['input-text--focused'],
           !isValid && styleInput['input-error-focused'],
           !isValid && !isFocus && value.trim() !== '' && styleInput['input-txt-error'],

package/src/elements/pages/PageTouchable.tsx

@@ -14,7 +14,7 @@ export const PageTouchable = (props: IFPageTouchable) => {
       <KeyboardAvoidingView style={{ flex: 1 }} behavior="height">
         <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
           <SafeAreaView style={{ flex: 1 }}>
-            <View style={{ flex: 1, padding: 20, backgroundColor: theme.colors.background, ...customStyles }}>
+            <View style={{ flex: 1, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: theme.colors.background, ...customStyles }}>
               {children}
             </View>
           </SafeAreaView>
@@ -23,3 +23,4 @@ export const PageTouchable = (props: IFPageTouchable) => {
     </View>
   );
 };
+