ikualo-ui-kit-mobile 1.2.8 → 1.3.0

package/package.json

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

package/src/elements/inputs/InputDateTime.tsx

@@ -1,13 +1,13 @@
 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 { Platform, View } from 'react-native';
 import React from 'react';
 import useStore from '../../store';
-import { IInputDate, IInputText } from '../../models';
+import { IInputDate } from '../../models';
 import { ErrorInputIcon } from '../../../assets/icons/svgs';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import RNDateTimePicker from '@react-native-community/datetimepicker';
+import RNDateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { DialogDown } from '../dialogs/DialogDown';
 import { BtnContained } from '../buttons/BtnContained';
 
@@ -59,6 +59,18 @@ export const InputDateTime = (props: IInputDate) => {
       return `${hours}:${minutes}`;
     }
   };
+
+  const showDateTimepicker = () => {
+    DateTimePickerAndroid.open({
+      value: value || new Date(),
+      onChange: (event, selectedDate) => {
+        if (event.type === 'set' && selectedDate) {
+          onChangeText(selectedDate);
+        }
+      },
+      mode: type === 'time' ? type : 'date',
+    });
+  };
   return (
     <View>
       <TextInput
@@ -93,6 +105,7 @@ export const InputDateTime = (props: IInputDate) => {
           <TextInput.Icon
             onPress={() => {
               setDialogDate(true);
+              Platform.OS === 'android' && showDateTimepicker();
             }}
             icon={(_) =>
               type === 'date' || type === 'datetime' ? (
@@ -153,33 +166,35 @@ export const InputDateTime = (props: IInputDate) => {
           )}
         </>
       )}
-      <DialogDown
-        isVisible={showDialogDate}
-        title={label ?? ''}
-        onDismiss={() => {
-          setDialogDate(false);
-          if (!value && required) {
-            setErrorRequired(true);
-            onInvalid && onInvalid();
-          }
-        }}
-      >
-        <RNDateTimePicker
-          display="spinner"
-          mode={type}
-          locale={lang}
-          value={value || new Date()}
-          onChange={(event, date) => {
-            if (date) onChangeText(date);
-          }}
-        />
-        <BtnContained
-          text={textBtnSave}
-          onPress={() => {
+      {Platform.OS === 'ios' && (
+        <DialogDown
+          isVisible={showDialogDate}
+          title={label ?? ''}
+          onDismiss={() => {
             setDialogDate(false);
+            if (!value && required) {
+              setErrorRequired(true);
+              onInvalid && onInvalid();
+            }
           }}
-        />
-      </DialogDown>
+        >
+          <RNDateTimePicker
+            display="spinner"
+            mode={type}
+            locale={lang}
+            value={value || new Date()}
+            onChange={(event, date) => {
+              if (date) onChangeText(date);
+            }}
+          />
+          <BtnContained
+            text={textBtnSave}
+            onPress={() => {
+              setDialogDate(false);
+            }}
+          />
+        </DialogDown>
+      )}
     </View>
   );
 };

package/src/elements/views/Views.tsx

@@ -7,8 +7,6 @@ import { View } from 'react-native';
 import { InputsExamples } from '../inputs/InputsExamples';
 import { DialogExamples } from '../dialogs/DialogExamples';
 import { Others } from './Others';
-import { BtnContained, Navbar } from '../../';
-import { setGlobalTheme } from '../../config/paper.config';
 export const Views = () => {
   const [component, setComponent] = useState('');
   const components = [
@@ -22,24 +20,6 @@ export const Views = () => {
 
   return (
     <>
-      <BtnContained
-        text="light"
-        onPress={() => {
-          setGlobalTheme('light');
-        }}
-      />
-      <BtnContained
-        text="dark"
-        onPress={() => {
-          setGlobalTheme('dark');
-        }}
-      />
-      <BtnContained
-        text="system"
-        onPress={() => {
-          setGlobalTheme('system');
-        }}
-      />
       {components.find((c) => c.value === component)?.component ?? null}
 
       <View style={{ flex: 1, justifyContent: 'flex-end' }}>