Skip to content

A
AppUms_Lecturer
Commit 27da74cf by tungnq
Options

TODO: Đã hoàn thiện một số phần của giao diện tạo thông báo

parent cdd4522a
Showing with 404 additions and 28 deletions
src/components/DropdownAlert/Dropdown.js 0 → 100644
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList, Image } from 'react-native';
import R from '../../assets/R';
const Dropdown = ({ items, placeholder = "Chọn...", onSelect }) => {
const [isOpen, setIsOpen] = useState(false);
const [selected, setSelected] = useState(null);
const handleSelect = (item) => {
setSelected(item);
setIsOpen(false);
if (onSelect) onSelect(item);
};
return (
<View style={styles.container}>
{/* Nút hiển thị */}
<TouchableOpacity
style={styles.dropdownHeader}
onPress={() => setIsOpen(!isOpen)}
>
<Text style={styles.dropdownHeaderText}>
{selected ? selected.label : placeholder}
</Text>
<Image source={R.images.icDrop} style={styles.imageIcon} />
</TouchableOpacity>
{/* Danh sách xổ xuống */}
{isOpen && (
<View style={[styles.dropdownList, { position: 'absolute', top: 35, left: 0, right: 0, zIndex: 999 }]}>
<FlatList
data={items}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.dropdownItem}
onPress={() => handleSelect(item)}
>
<Text style={styles.dropdownItemText}>{item.label}</Text>
</TouchableOpacity>
)}
/>
</View>
)}
</View>
);
};
export default Dropdown;
const styles = StyleSheet.create({
container: {
width: '100%',
},
dropdownHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
backgroundColor: '#fff',
height:35,
paddingHorizontal:15
},
dropdownHeaderText: {
fontSize: 12,
color: '#333',
},
dropdownList: {
borderWidth: 1,
borderColor: '#ccc',
backgroundColor: '#fff',
},
dropdownItem: {
padding: 5,
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
dropdownItemText: {
fontSize: 12,
color: '#333',
},
imageIcon:{
width:20,
height:20,
resizeMode:'contain',
tintColor:'#333',
}
});
src/components/Input/TextField.js
......@@ -21,6 +21,7 @@ const TextField = props => {
color,
required,
containerMarginVertical,
containerMarginTop,
containerMarginHorizontal,
containerMarginBottom,
containerBackgroundColor,
......@@ -31,7 +32,7 @@ const TextField = props => {
};
return (
<View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor}}>
<View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor, marginTop: containerMarginTop}}>
<Text
style={{
fontSize: fontSizeTitle,
......@@ -45,6 +46,7 @@ const TextField = props => {
<Text style={{color: R.colors.red}}> {required ? "*" : ""}</Text>
</Text>
<TextInput
placeholder={placeholder}
maxLength={maxLength ? maxLength : 256}
placeholderTextColor={R.colors.placeHolder}
......@@ -58,6 +60,8 @@ const TextField = props => {
style={{
height: HEIGHT(35),
color: color,
borderColor:R.colors.grayBorderInputTextHeader,
borderWidth:1,
borderRadius: HEIGHT(6),
fontSize: fontSize,
paddingVertical: 5,
......
src/components/Input/TextMulti.js
......@@ -53,6 +53,8 @@ const TextField = props => {
textAlign: 'left',
color: 'black',
height: 210,
borderColor:R.colors.grayBorderInputTextHeader,
borderWidth:1,
width: '100%',
borderRadius: 7,
fontSize: fontSizePlaceHolder,
......
src/routers/StackNavigation.js
......@@ -5,6 +5,7 @@ import Home from '../screens/home';
import NotificationDetail from '../screens/notification/detail';
import TabNavigator from './TabNavigation';
import * as ScreenName from './ScreenNames';
import NotificationAdd from '../screens/notification/add';
const Stack = createStackNavigator();
......@@ -15,10 +16,11 @@ function MyStack(props) {
headerStatusBarHeight: 0,
}}
headerMode={'none'}
initialRouteName={ScreenName.DETAILNOTIFICATION}>
initialRouteName={ScreenName.ADDNOTIFICATION}>
<Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
<Stack.Screen name={ScreenName.ADDNOTIFICATION} component={NotificationAdd} />
</Stack.Navigator>
);
}
......
src/screens/notification/add/index.js
import React from 'react';
import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import NotificationAddView from './view';
const NotificationAdd = (props) => {
const [selectedValue, setSelectedValue] = useState('1');
const options = [
{label: 'Gửi cá nhân', value: '1'},
{label: 'Gửi tập thể lớp', value: '2'},
];
const onValueChange = value => {
setSelectedValue(value);
};
const items = [
{ id: 1, label: 'Option 1' },
{ id: 2, label: 'Option 2' },
{ id: 3, label: 'Option 3' },
];
return (
<NotificationAddView />
<NotificationAddView
options={options}
selectedValue={selectedValue}
onValueChange={onValueChange}
items={items}
/>
);
};
......
src/screens/notification/add/style.js
import { StyleSheet, Platform } from "react-native";
import R from "../../../assets/R";
const styles = StyleSheet.create({
safeArea:{
flex:1,
backgroundColor:R.colors.white,
},
container:{
marginHorizontal:15,
},
boxInput:{
padding:7,
borderColor:R.colors.grayBorderInputTextHeader,
borderWidth:1,
borderRadius:10,
marginVertical:10,
backgroundColor:R.colors.brown,
},
txtInput:{
color:R.colors.white,
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
},
containerRow:{
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
},
text:{
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.black,
},
//Item
chip: {
flexDirection: 'row',
alignItems: 'center',
// position: 'relative',
paddingLeft: 10,
height: 25,
borderRadius: 10,
marginBottom:10,
marginHorizontal:5,
// top: 10,
// left: 10,
backgroundColor: R.colors.blue2,
alignSelf:'flex-start'
},
imageIcon: {
width: 15,
height: 15,
},
containerIcon: {
marginRight: 2,
},
text: {
fontSize: 12,
fontWeight: '300',
fontFamily:R.fonts.fontRegular,
color:R.colors.blueTextChip,
marginRight:10
},
//FlatList
flatList:{
height:200,
backgroundColor:R.colors.blue1,
paddingHorizontal:10,
borderRadius:10,
paddingVertical:15,
flexDirection:'row',
marginBottom:15,
},
//ContainerBtn
containerBtn:{
flexDirection:'row',
justifyContent:'space-between',
},
containerInput:{
flex:10,
},
txtSubtitle:{
fontSize:R.fontsize.fontSizeSubTitle,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.black,
marginBottom:15,
},
text:{
fontSize:R.fontsize.fontSizeContent,
fontFamily:R.fonts.fontRegular,
fontWeight:'400',
color:R.colors.black,
},
containerDropdown:{
marginBottom:15,
position: 'relative',
zIndex: 1000
},
});
export default styles;
\ No newline at end of file
src/screens/notification/add/view.js
import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
import {Text, View, FlatList, ScrollView} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import TextField from '../../../components/Input/TextField';
import R from '../../../assets/R';
import TextMulti from '../../../components/Input/TextMulti';
import RadioGroup from '../../../components/RadioButton/RadioGroup';
import Button from '../../../components/Button';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
const NotificationDetailView = props => {
const {
showWarning,
title,
onTitleChange,
options,
selectedValue,
onValueChange,
disabled,
size,
color,
direction,
dataList,
items,
} = props;
const renderItem = ({item, onPress}) => {
return (
<View style={styles.chip}>
{/* <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
<Image
resizeMode="cover"
source={R.images.icCancel}
style={styles.imageIcon}
/>
</TouchableOpacity> */}
<Text style={styles.text}> {`${item.id}, ${item.name}`}</Text>
</View>
);
};
const NotificationAddView = (props) => {
const { } = props;
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<TouchableOpacity>
<Text>NotificationAdd</Text>
</TouchableOpacity>
<View style={styles.safeArea}>
<Header isBack title={'Tạo mới thông báo'} />
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{paddingBottom: 20}}>
<View style={styles.container}>
<TextField
containerMarginTop={15}
title="Tiêu đề thông báo"
value={title}
onChangeText={onTitleChange}
placeholder="HS"
backgroundColor={R.colors.white}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
containerMarginBottom={15}
required
/>
<TextField
title="Mã CBGV"
value={title}
onChangeText={onTitleChange}
backgroundColor={R.colors.grayBorderInputTextHeader}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
required
containerMarginBottom={15}
editable={false}
/>
<TextMulti
title="Nội dung thông báo"
fontFamily={R.fonts.fontRegular}
titleFontSize={R.sizes.sm}
value={title}
onChangeText={onTitleChange}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
fontSizePlaceHolder={R.sizes.sm}
required
containerMarginBottom={15}
editable={false}
/>
<RadioGroup
options={options}
selectedValue={selectedValue}
onValueChange={onValueChange}
disabled={false}
size={20}
backgroundBoxColor={R.colors.blue}
borderBoxColor={R.colors.black}
direction={'row'}
marginBtnAndLabel={10}
// justifyContent={'space-between'}
containerMarginRight={39}
containerMarginBottom={15}
editable={true}
/>
<Text style={[styles.text]}>Chọn những sinh viên nhận thông báo <Text style={{color: R.colors.red}}>*</Text></Text>
<View style={styles.containerDropdown}>
<Dropdown
items={items}
placeholder="Chọn tùy chọn"
onSelect={item => console.log('Bạn đã chọn:', item)}
/>
</View>
<Text style={[styles.text]}> Danh sách đã chọn :</Text>
<View>
</View>
<View style={styles.containerBtn}>
<View style={styles.containerInput}>
<TextField
title="Ngày gửi"
value={title}
onChangeText={onTitleChange}
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
containerMarginBottom={15}
editable={false}
/>
</View>
<View style={{flex: 1}}></View>
<View style={styles.containerInput}>
<TextField
title="Thời gian gửi"
value={title}
onChangeText={onTitleChange}
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
containerMarginBottom={15}
editable={false}
/>
</View>
</View>
<Text style={[styles.txtSubtitle]}>Tài liệu đính kèm</Text>
<View>
<Button
title="Thêm tài liệu"
onPress={() => {}}
backgroundColor={R.colors.blue1}
fontSize={R.sizes.sm}
editable={false}
height={25}
width={176}
borderRadius={10}
textColor={R.colors.blue}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
icon={R.images.icDownload}
iconStyle={{
width: 15,
height: 15,
}}
containerStyle={{
alignSelf: 'flex-start',
}}
/>
</View>
</View>
</ScrollView>
</View>
);
};
export default NotificationAddView;
const styles = StyleSheet.create({})
\ No newline at end of file
export default NotificationDetailView;
src/screens/notification/detail/index.js
......@@ -3,14 +3,7 @@ import {Text, View, StyleSheet} from 'react-native';
import NotificationDetailView from './view';
import R from '../../../assets/R';
const NotificationDetail = (props) => {
const [selectedValue, setSelectedValue] = useState('1');
const options = [
{label: 'Gửi cá nhân', value: '1'},
{label: 'Gửi tập thể lớp', value: '2'},
];
const onValueChange = value => {
setSelectedValue(value);
};
const [dataList, setDataList] = useState([
{ id: 1, name: 'Nguyễn Minh Đức' },
{ id: 2, name: 'Trần Văn Hùng' },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment