ikualo-ui-kit-mobile 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -11,7 +11,6 @@
   "dependencies": {
     "@expo/metro-runtime": "^4.0.0",
     "@expo/vector-icons": "^14.0.2",
-    "@react-native-community/datetimepicker": "8.2.0",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
@@ -24,7 +23,6 @@
     "react-native": "0.76.5",
     "react-native-asset": "^2.1.1",
     "react-native-gesture-handler": "~2.20.2",
-    "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-paper": "^5.12.3",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",

package/src/elements/inputs/InputsExamples.tsx

@@ -1,5 +1,5 @@
 import { ScrollView, View } from 'react-native';
-import { InputCheckbox, Input, InputEmail, InputPassword, Text, InputDateTime } from '../..';
+import { InputCheckbox, Input, InputEmail, InputPassword, Text } from '../..';
 import { useState } from 'react';
 import useStore from '../../store';
 
@@ -23,22 +23,6 @@ export const InputsExamples = () => {
         <Text fontWeight="MontserratSemiBold600" fontSize={18} color={theme.colors.text_h}>
           Campos de entrada
         </Text>
-        <InputDateTime
-          lang="es-ES"
-          textBtnSave="Guardar"
-          label="Fecha"
-          onChange={(e) => {
-            setValueDate(e);
-          }}
-          type="date"
-          value={valueDate}
-          isValid={true}
-          onInvalid={() => {}}
-          msgHelper="Fecha de prueba"
-          msgError="Error"
-          required={true}
-          msgErrorRequired="Campo requerido"
-        />
         <Input
           label="Prueba"
           onChange={(e) => {

package/src/index.ts

@@ -11,7 +11,6 @@ export * from './elements/buttons/BtnCircle';
 export * from './elements/inputs/InputPassword';
 export * from './elements/inputs/Input';
 export * from './elements/inputs/InputEmail';
-export * from './elements/inputs/InputDateTime';
 
 export * from './elements/timer/Timer';
 

package/src/elements/inputs/InputDateTime.tsx

@@ -1,174 +0,0 @@
-import { HelperText, TextInput, Text } from 'react-native-paper';
-import { getStyleInput } from '../../../assets/styles/elements/inputs';
-import { useState } from 'react';
-import { View } from 'react-native';
-import React from 'react';
-import useStore from '../../store';
-import { IInputDate } from '../../models';
-import { ErrorInputIcon } from '../../../assets/icons/svgs';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
-
-export const InputDateTime = (props: IInputDate) => {
-  const theme = useStore().theme;
-  const styleInput = getStyleInput(theme);
-  const [isFocus, setIsFocus] = useState<boolean>(false);
-  const [errorRequired, setErrorRequired] = useState<boolean>(false);
-  const [showDialogDate, setDialogDate] = useState<boolean>(false);
-  const {
-    label,
-    lang,
-    isDisabled,
-    onChange,
-    error,
-    style,
-    value,
-    isValid,
-    onFocus,
-    onBlur,
-    type,
-    onInvalid,
-    msgHelper,
-    msgError,
-    placeholder = lang === 'es-ES' ? 'DD-MM-YYYY' : 'DD-MM-YYYY',
-    required,
-    msgErrorRequired,
-    readonly = true,
-    textBtnSave,
-  } = props;
-  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
-
-  const showDatePicker = () => {
-    setDatePickerVisibility(true);
-  };
-
-  const hideDatePicker = () => {
-    setDatePickerVisibility(false);
-  };
-
-  const handleConfirm = (date: any) => {
-    hideDatePicker();
-    onChange(date);
-    setErrorRequired(false);
-  };
-
-  const formatDate = (date: Date) => {
-    const day = date.getDate().toString().padStart(2, '0');
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const year = date.getFullYear();
-    if (type === 'date') {
-      return `${day}-${month}-${year}`;
-    } else if (type === 'datetime') {
-      const hours = date.getHours().toString().padStart(2, '0');
-      const minutes = date.getMinutes().toString().padStart(2, '0');
-      return `${day}-${month}-${year} ${hours}:${minutes}`;
-    } else if (type === 'time') {
-      const hours = date.getHours().toString().padStart(2, '0');
-      const minutes = date.getMinutes().toString().padStart(2, '0');
-      return `${hours}:${minutes}`;
-    }
-  };
-
-  return (
-    <View>
-      <DateTimePickerModal
-        isVisible={isDatePickerVisible}
-        mode="date"
-        onConfirm={handleConfirm}
-        onCancel={hideDatePicker}
-      />
-      <TextInput
-        label={label}
-        mode={'flat'}
-        value={value ? formatDate(value) : placeholder}
-        selectionColor={
-          !errorRequired
-            ? styleInput['input'].borderBottomColor
-            : styleInput['input-txt-error'].borderBottomColor
-        }
-        theme={{
-          colors: {
-            primary: theme.colors.border_dark,
-            onSurfaceVariant: theme.colors.text_p,
-          },
-        }}
-        onFocus={() => {
-          setIsFocus(true);
-          onFocus && onFocus();
-        }}
-        onBlur={() => {
-          setIsFocus(false);
-          onBlur && onBlur();
-          if (!value && required) {
-            setErrorRequired(true);
-            onInvalid && onInvalid();
-          }
-        }}
-        error={error || errorRequired}
-        right={
-          <TextInput.Icon
-            onPress={() => {
-              showDatePicker();
-            }}
-            icon={(_) =>
-              type === 'date' || type === 'datetime' ? (
-                <MaterialCommunityIcons
-                  name="calendar-blank"
-                  size={24}
-                  color={isValid && !errorRequired ? theme.colors.icon : theme.colors.error}
-                />
-              ) : (
-                <MaterialCommunityIcons
-                  name="clock-outline"
-                  size={24}
-                  color={isValid && !errorRequired ? theme.colors.icon : theme.colors.error}
-                />
-              )
-            }
-          />
-        }
-        style={[
-          styleInput['input-label'],
-          ((!isValid && value) || errorRequired) && styleInput['input-error-focused'],
-          isFocus && isValid && !errorRequired && styleInput['input-text--focused'],
-          style ?? [],
-        ]}
-        contentStyle={[styleInput['input-txt']]}
-        underlineColor={
-          isValid && !errorRequired
-            ? styleInput['input-text-underline'].color
-            : styleInput['input-txt-error'].borderBottomColor
-        }
-        activeUnderlineColor={
-          !isValid && value
-            ? styleInput['input-text--activeUnderline'].color
-            : errorRequired
-            ? styleInput['input-txt-error'].color
-            : ''
-        }
-        readOnly={isDisabled || readonly}
-      />
-      {!isDisabled && (
-        <>
-          {isValid && !errorRequired && (
-            <HelperText type="info" style={styleInput['input-password-helper']} visible={true}>
-              {msgHelper}
-            </HelperText>
-          )}
-          {!isValid && msgError !== undefined && value && !errorRequired && (
-            <View style={styleInput['input-helper--error-text']}>
-              <ErrorInputIcon />
-              <Text style={styleInput['input-password-helper--error-text']}>{msgError}</Text>
-            </View>
-          )}
-          {errorRequired && (
-            <View style={styleInput['input-helper--error-text']}>
-              <ErrorInputIcon />
-              <Text style={styleInput['input-password-helper--error-text']}>{msgErrorRequired}</Text>
-            </View>
-          )}
-        </>
-      )}
-    </View>
-  );
-};