wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: tampilan

Browse Source 
Deskripsi:
- tampilan form tambah banner
- button save header tambah banner
- tampilan form edit banner
- button save header edit banner
- padding form input with icon left or right

No Issues
This commit is contained in:
amel
2025-03-13 11:31:30 +08:00
parent 5bd65b4d3d
commit 4111392f17
8 changed files with 64 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/(application)/banner/[id].tsx
View File

@@ -1,13 +1,12 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import ButtonSaveHeader from "@/components/buttonSaveHeader"
import { InputForm } from "@/components/inputForm"
import Styles from "@/constants/Styles"
import { Entypo } from "@expo/vector-icons"
import * as ImagePicker from 'expo-image-picker'
import { router, Stack } from "expo-router"
import { useState } from "react"
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
export default function EditBanner() {
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
@@ -33,6 +32,7 @@ export default function EditBanner() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Banner',
headerTitleAlign: 'center',
headerRight: () => <ButtonSaveHeader category="update" />
}}
/>
<ScrollView>
@@ -53,8 +53,8 @@ export default function EditBanner() {
)
}
</View>
<InputForm label="Judul" type="numeric" placeholder="Judul" required />
<ButtonForm
<InputForm label="Judul" type="numeric" placeholder="Judul" required bg="white" />
{/* <ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
@@ -65,7 +65,7 @@ export default function EditBanner() {
router.push('/banner')
}
})
}} />
}} /> */}
</View>
</ScrollView>
</SafeAreaView>

16
app/(application)/banner/create.tsx
View File

@@ -1,13 +1,12 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import ButtonSaveHeader from "@/components/buttonSaveHeader";
import { InputForm } from "@/components/inputForm";
import Styles from "@/constants/Styles";
import { Entypo } from "@expo/vector-icons";
import * as ImagePicker from 'expo-image-picker';
import { router, Stack } from "expo-router";
import { useState } from "react";
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
export default function CreateBanner() {
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
@@ -33,6 +32,7 @@ export default function CreateBanner() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Banner',
headerTitleAlign: 'center',
headerRight: () => <ButtonSaveHeader category="create" />
}}
/>
<ScrollView>
@@ -41,11 +41,11 @@ export default function CreateBanner() {
{
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height:100 }} />
<Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height: 100 }} />
</Pressable>
) : (
<Pressable onPress={pickImageAsync} style={[Styles.wrapPaper, Styles.contentItemCenter]}>
<View style={{justifyContent:'center', alignItems:'center'}}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Entypo name="image" size={50} color={'#aeaeae'} />
<Text style={[Styles.textInformation, Styles.mt05]}>Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk memastikan</Text>
</View>
@@ -53,8 +53,8 @@ export default function CreateBanner() {
)
}
</View>
<InputForm label="Judul" type="numeric" placeholder="Judul" required />
<ButtonForm
<InputForm label="Judul" type="numeric" placeholder="Judul" required bg="white" />
{/* <ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
@@ -65,7 +65,7 @@ export default function CreateBanner() {
router.push('/banner')
}
})
}} />
}} /> */}
</View>
</ScrollView>
</SafeAreaView>

1
app/(application)/discussion/[id].tsx
View File

@@ -142,6 +142,7 @@ export default function DetailDiscussionGeneral() {
type="default"
round
placeholder="Kirim Komentar"
bg="white"
itemRight={
<MaterialIcons name="send" size={25} color={'#384288'} />
}

11
app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
View File

@@ -29,11 +29,12 @@ export default function DiscussionDetail() {
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
<Image
source={require("../../../../../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Danantara"
title="Amalia Dwi"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
@@ -137,7 +138,7 @@ export default function DiscussionDetail() {
</View>
</ScrollView>
</View>
<View style={[Styles.p15, { flex: 0.4 }]}>
<View style={[Styles.p10, { flex: 0.5 }]}>
<InputForm
bg="white"
type="default"

18
app/(application)/notification.tsx
View File

@@ -21,7 +21,7 @@ export default function Notification() {
<View style={[Styles.wrapPaper, Styles.mb100]}>
<View style={[Styles.mb05]}>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -32,7 +32,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -43,7 +43,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -54,7 +54,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -65,7 +65,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -76,7 +76,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -87,7 +87,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -98,7 +98,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -109,7 +109,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />

2
components/buttonBackHeader.tsx
View File

@@ -10,7 +10,7 @@ export default function ButtonBackHeader({ onPress }: Props) {
<>
<ButtonHeader
item={<Feather name="chevron-left" size={20} color="white" />}
onPress={onPress}
onPress={() => { onPress && onPress() }}
/>
</>
)

30
components/buttonSaveHeader.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { Feather } from "@expo/vector-icons"
import { ButtonHeader } from "./buttonHeader"
import AlertKonfirmasi from "./alertKonfirmasi"
type Props = {
category: 'create' | 'update'
onPress?: () => void
disable?: boolean
}
export default function ButtonSaveHeader({ category, onPress, disable }: Props) {
return (
<>
<ButtonHeader
item={<Feather name="check" size={20} color={disable == false ? "grey" : "white"} />}
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: category == 'create' ? 'Apakah anda yakin ingin menambahkan data?' : 'Apakah anda yakin mengubah data?',
onPress: () => {
onPress && onPress()
}
})
}
}
/>
</>
)
}

6
components/inputForm.tsx
View File

@@ -32,13 +32,13 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
</Text>
)
}
<View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}>
<View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, Styles.pv10]}>
{itemRight != undefined ? itemRight : itemLeft}
<TextInput
placeholder={placeholder}
keyboardType={type}
onChangeText={onChange}
style={{ width: width && lebar * width / 100}}
style={[Styles.mh05, { width: width ? lebar * width / 100: lebar*0.78 }]}
/>
</View>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
@@ -66,7 +66,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
onChangeText={onChange}
/>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05 , Styles.cGray]}>{info}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
</View>
)
}