upd: inputdate

Deskripsi:
- custom tampilan input datetime picker pada ios

No Issues

components/inputDate.tsx

@@ -1,11 +1,11 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
-import { stringToDate } from "@/lib/fun_stringToDate";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
 import { useState } from "react";
-import { Pressable, View } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import Text from "./Text";
+import ModalFloat from "./modalFloat";
 
 type Props = {
    label?: string;
@@ -58,14 +58,34 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
             {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
          </View>
          {
-            modal && (
+            Platform.OS === 'ios' ? (
-               <DateTimePicker
+               modal && (
-                  value={new Date()}
+                  <ModalFloat
-                  mode={mode}
+                     isVisible={modal}
-                  display="default"
+                     setVisible={setModal}
-                  onChange={(event, date) => { onChangeDate(event.type, date) }}
+                     onSubmit={() => { }}
-                  onTouchCancel={() => setModal(false)}
+                     buttonHide
-               />
+                     disableSubmit
+                     title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
+                     <DateTimePicker
+                        value={new Date()}
+                        mode={mode}
+                        display="spinner"
+                        onChange={(event, date) => { onChangeDate(event.type, date) }}
+                        onTouchCancel={() => setModal(false)}
+                     />
+                  </ModalFloat>
+               )
+            ) : (
+               modal && (
+                  <DateTimePicker
+                     value={new Date()}
+                     mode={mode}
+                     display="inline"
+                     onChange={(event, date) => { onChangeDate(event.type, date) }}
+                     onTouchCancel={() => setModal(false)}
+                  />
+               )
             )
          }
       </>

components/modalFloat.tsx

@@ -1,7 +1,7 @@
 import Styles from '@/constants/Styles';
 import { Pressable, View } from 'react-native';
-import Text from './Text';
 import Modal from 'react-native-modal';
+import Text from './Text';
 
 type Props = {
    isVisible: boolean
@@ -10,9 +10,10 @@ type Props = {
    children: React.ReactNode
    onSubmit: () => void
    disableSubmit?: boolean
+   buttonHide?: boolean
 }
 
-export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit }: Props) {
+export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit, buttonHide }: Props) {
    return (
       <Modal
          animationIn={"fadeIn"}
@@ -28,14 +29,18 @@ export default function ModalFloat({ isVisible, setVisible, title, children, onS
             <View style={[Styles.mb10]}>
                {children}
             </View>
-            <View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
+            {
-               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
+               !buttonHide && (
-                  <Text style={[Styles.textDefault]}>Batal</Text>
+                  <View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
-               </Pressable>
+                     <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
-               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
+                        <Text style={[Styles.textDefault]}>Batal</Text>
-                  <Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
+                     </Pressable>
-               </Pressable>
+                     <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
-            </View>
+                        <Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
+                     </Pressable>
+                  </View>
+               )
+            }
          </View>
       </Modal>
    )