Skip to content

A
AppUms_Lecturer
Commit 96f0ffae by tungnq
Options

TODO: Test giao diện ios

parent dfac4b31
Showing with 410 additions and 31 deletions
package.json
...@@ -10,8 +10,6 @@ ...@@ -10,8 +10,6 @@
"test": "jest" "test": "jest"
}, },
"dependencies": { "dependencies": {
"react": "18.2.0",
"react-native": "0.74.2",
"@react-native-community/async-storage": "^1.12.1", "@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.11", "@react-native-community/masked-view": "^0.1.11",
"@react-native-community/netinfo": "^7.1.7", "@react-native-community/netinfo": "^7.1.7",
...@@ -27,7 +25,9 @@ ...@@ -27,7 +25,9 @@
"js-sha256": "^0.9.0", "js-sha256": "^0.9.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"moment": "^2.29.1", "moment": "^2.29.1",
"react": "18.2.0",
"react-hook-form": "^7.24.2", "react-hook-form": "^7.24.2",
"react-native": "0.74.2",
"react-native-autocomplete-input": "^5.0.2", "react-native-autocomplete-input": "^5.0.2",
"react-native-calendars": "^1.1260.0", "react-native-calendars": "^1.1260.0",
"react-native-confirmation-code-field": "^7.1.0", "react-native-confirmation-code-field": "^7.1.0",
...@@ -83,10 +83,10 @@ ...@@ -83,10 +83,10 @@
"@types/react": "^18.2.6", "@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0", "@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3", "babel-jest": "^29.6.3",
"react-native-svg-transformer": "^1.5.1",
"eslint": "^8.19.0", "eslint": "^8.19.0",
"jest": "^29.6.3", "jest": "^29.6.3",
"prettier": "2.8.8", "prettier": "2.8.8",
"react-native-svg-transformer": "^1.5.1",
"react-test-renderer": "18.2.0", "react-test-renderer": "18.2.0",
"typescript": "5.0.4" "typescript": "5.0.4"
}, },
......
src/components/Header/Header.js
...@@ -39,7 +39,7 @@ const Header = props => { ...@@ -39,7 +39,7 @@ const Header = props => {
<TouchableOpacity <TouchableOpacity
style={styles.btnBack} style={styles.btnBack}
onPress={() => navigate.goBack()}> onPress={() => navigate.goBack()}>
<Icon color={R.colors.black} name={'arrowleft'} size={22} /> <Image source={R.images.icBack} style={{width: 20, height: 15}} />
</TouchableOpacity> </TouchableOpacity>
)} )}
</View> </View>
......
src/components/Input/TextField.js
...@@ -13,6 +13,17 @@ const TextField = props => { ...@@ -13,6 +13,17 @@ const TextField = props => {
value, value,
editable, editable,
error, error,
placeholder,
backgroundColor,
onFocus,
fontSize,
fontSizeTitle,
color,
required,
containerMarginVertical,
containerMarginHorizontal,
containerMarginBottom,
containerBackgroundColor,
} = props; } = props;
const renderMess = () => { const renderMess = () => {
if (value && value.trim().length > 0) return `${title} không hợp lệ`; if (value && value.trim().length > 0) return `${title} không hợp lệ`;
...@@ -20,35 +31,38 @@ const TextField = props => { ...@@ -20,35 +31,38 @@ const TextField = props => {
}; };
return ( return (
<View style={{marginVertical: 5, marginHorizontal: WIDTH(15)}}> <View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor}}>
<Text <Text
style={{ style={{
fontSize: 16, fontSize: fontSizeTitle,
color: R.colors.color777, color: R.colors.color777,
marginBottom: 5, marginBottom: 5,
}}> }}>
{title ? title : ''} {title ? title : ''}
<Text style={{color: R.colors.red}}> {required ? "*" : ""}</Text>
</Text> </Text>
<TextInput <TextInput
placeholder={placeholder}
maxLength={maxLength ? maxLength : 256} maxLength={maxLength ? maxLength : 256}
placeholderTextColor={R.colors.placeHolder} placeholderTextColor={R.colors.placeHolder}
editable={editable != null ? editable : true} editable={editable != null ? editable : true}
secureTextEntry={isPassword} secureTextEntry={isPassword}
autoCapitalize="none" autoCapitalize="none"
value={value} value={value}
onFocus={onFocus}
keyboardType={isNumber ? 'number-pad' : 'default'} keyboardType={isNumber ? 'number-pad' : 'default'}
onChangeText={val => onChangeText(val)} onChangeText={val => onChangeText(val)}
style={{ style={{
height: HEIGHT(35), height: HEIGHT(35),
color: 'black', color: color,
borderRadius: HEIGHT(6), borderRadius: HEIGHT(6),
fontSize: 16, fontSize: fontSize,
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 10,
backgroundColor: '#EFF3F5', backgroundColor: backgroundColor,
}} }}
/> />
<View {error && <View
style={{ style={{
height: HEIGHT(20), height: HEIGHT(20),
marginTop: 5, marginTop: 5,
...@@ -65,7 +79,7 @@ const TextField = props => { ...@@ -65,7 +79,7 @@ const TextField = props => {
{error.message ? error.message : renderMess()} {error.message ? error.message : renderMess()}
</Text> </Text>
)} )}
</View> </View>}
</View> </View>
); );
}; };
......
src/components/Input/TextMulti.js
...@@ -4,49 +4,43 @@ import {HEIGHTXD, WIDTHXD, getFontXD} from '../../config/Functions'; ...@@ -4,49 +4,43 @@ import {HEIGHTXD, WIDTHXD, getFontXD} from '../../config/Functions';
import R from '../../assets/R'; import R from '../../assets/R';
const TextField = props => { const TextField = props => {
const {title, onChangeText, maxLength, value, editable} = props; const {title,titleFontSize,required, onChangeText, maxLength,backgroundColor, value, editable,placeholder,fontSizePlaceHolder,containerMarginVertical,containerMarginHorizontal,containerMarginBottom,containerBackgroundColor,onFocus} = props;
return ( return (
<View style={{marginVertical: 5}}> <View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor}}>
<Text <Text
style={{ style={{
fontSize: 16, fontSize: titleFontSize,
color: R.colors.color777, color: R.colors.color777,
marginBottom: 5, marginBottom: 5,
}}> }}>
{title ? title : ''} {title ? title : ''}
<Text style={{color: R.colors.red}}> {required ? "*" : ""}</Text>
</Text> </Text>
<TextInput <TextInput
placeholder={placeholder}
maxLength={maxLength} maxLength={maxLength}
textAlign={'left'} textAlign={'left'}
editable={editable != null ? editable : true} editable={editable != null ? editable : true}
value={value} value={value}
onChangeText={val => onChangeText(val)} onChangeText={val => onChangeText(val)}
multiline={true} multiline={true}
numberOfLines={3} numberOfLines={5}
placeholderTextColor={R.colors.placeHolder} onFocus={onFocus}
placeholderTextColor="gray"
autoCapitalize="none" autoCapitalize="none"
style={{ style={{
textAlignVertical: 'top', textAlignVertical: 'top',
textAlign: 'left', textAlign: 'left',
color: 'black', color: 'black',
maxHeight: HEIGHTXD(259), height: 210,
minHeight: HEIGHTXD(169), width: '100%',
borderRadius: 7, borderRadius: 7,
borderWidth: 0.7, fontSize: fontSizePlaceHolder,
borderColor: '#DBDBDB',
fontSize: 16,
paddingVertical: 10, paddingVertical: 10,
paddingHorizontal: 10, paddingHorizontal: 10,
backgroundColor: 'white', backgroundColor: backgroundColor,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
}} }}
/> />
</View> </View>
......
src/components/RadioButton/RadioButton.js 0 → 100644
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React from 'react';
const RadioButton = ({
selected,
onPress,
label,
disable,
size = 15,
backgroundBoxColor,
borderBoxColor,
containerStyle,
textColor = 'black',
marginBtnAndLabel,
containerMarginRight,
}) => {
return (
<TouchableOpacity
onPress={disable ? undefined : onPress}
style={[styles.containerRadioButton, containerStyle,{marginRight: containerMarginRight,}]}
accessible={true} //Nhiệm vụ là báo cho hệ điều hành phần tử này và các phần tử con là một thành phần duy nhất
accessibilityLabel={label || 'RadioButton'} //Nhãn dán
accessibilityRole="button" //Xác định loại của phần tử
accessibilityState={{
selected,
disabled: disable,
}}>
<View
style={[
styles.outerCircle,
{
width: size,
height: size,
borderColor: borderBoxColor,
borderRadius: size / 2,
opacity: disable ? 0.5 : 1,
marginRight:marginBtnAndLabel,
},
]}>
{selected && (
<View
style={[
styles.innerCircle,
{
width: size * 0.95,
height: size * 0.95,
borderRadius: (size * 0.95) / 2,
backgroundColor: backgroundBoxColor,
},
]}
/>
)}
</View>
{label && (
<Text
style={[
styles.textLabel,
{color:textColor}
]}>
{label}
</Text>
)}
</TouchableOpacity>
);
};
export default React.memo(RadioButton);
const styles = StyleSheet.create({
containerRadioButton: {
flexDirection: 'row',
alignItems: 'center',
},
outerCircle: {
width: 20,
height: 20,
borderWidth: 1,
backgroundColor: 'white',
borderRadius: 10,
borderColor: 'black',
alignItems: 'center',
justifyContent: 'center',
},
innerCircle: {
width: 10,
height: 10,
borderRadius: 5,
},
textLabel: {
fontSize: 12,
},
});
src/components/RadioButton/RadioGroup.js 0 → 100644
import {View } from 'react-native'
import React from 'react'
import RadioButton from './RadioButton'
const RadioGroup = ({
options, // Giá trị của radio button
selectedValue, // Giá trị đã chọn
onValueChange, // Hàm callback khi giá trị thay đổi
disabled, // Trạng thái disabled
size, // Kích thước của radio button
color, // Màu của radio button
direction, // Hướng của radio button
textColor,
marginBtnAndLabel,
containerMarginRight,
justifyContent,
containerMarginHorizontal,
containerMarginVertical,
containerMarginBottom,
backgroundBoxColor,
borderBoxColor,
}) => {
return (
<View style={[
{
flexDirection: direction,
justifyContent: justifyContent,
marginHorizontal: containerMarginHorizontal,
marginVertical: containerMarginVertical,
marginBottom: containerMarginBottom,
}
]}>
{options.map((option, index) => (
<RadioButton
key={`${option.value}-${index}`}
label={option.label}
selected={option.value === selectedValue}
onPress={() => onValueChange(option.value)}
disable={disabled}
size={size}
color={color}
textColor={textColor}
marginBtnAndLabel={marginBtnAndLabel}
containerMarginRight={containerMarginRight}
backgroundBoxColor={backgroundBoxColor}
borderBoxColor={borderBoxColor}
/>
))}
</View>
)
}
export default React.memo(RadioGroup)
src/routers/StackNavigation.js
...@@ -2,6 +2,7 @@ import React, {Fragment, useRef, useEffect, useState} from 'react'; ...@@ -2,6 +2,7 @@ import React, {Fragment, useRef, useEffect, useState} from 'react';
import {NavigationContainer} from '@react-navigation/native'; import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack'; import {createStackNavigator} from '@react-navigation/stack';
import Home from '../screens/home'; import Home from '../screens/home';
import NotificationDetail from '../screens/notification/detail';
import TabNavigator from './TabNavigation'; import TabNavigator from './TabNavigation';
import * as ScreenName from './ScreenNames'; import * as ScreenName from './ScreenNames';
...@@ -14,9 +15,10 @@ function MyStack(props) { ...@@ -14,9 +15,10 @@ function MyStack(props) {
headerStatusBarHeight: 0, headerStatusBarHeight: 0,
}} }}
headerMode={'none'} headerMode={'none'}
initialRouteName={ScreenName.TABNAVIGATOR}> initialRouteName={ScreenName.DETAILNOTIFICATION}>
<Stack.Screen name={ScreenName.HOMESCREEN} component={Home} /> <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} /> <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
</Stack.Navigator> </Stack.Navigator>
); );
} }
......
src/routers/TabNavigation.js
...@@ -73,6 +73,7 @@ const TabNavigator = props => { ...@@ -73,6 +73,7 @@ const TabNavigator = props => {
), ),
}} }}
/> />
</Tab.Navigator> </Tab.Navigator>
); );
......
src/screens/notification/add/index.js 0 → 100644
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
import NotificationAddView from './view';
const NotificationAdd = (props) => {
return (
<NotificationAddView />
);
};
export default NotificationAdd;
src/screens/notification/add/view.js 0 → 100644
import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
const NotificationAddView = (props) => {
const { } = props;
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<TouchableOpacity>
<Text>NotificationAdd</Text>
</TouchableOpacity>
</View>
);
};
export default NotificationAddView;
const styles = StyleSheet.create({})
\ No newline at end of file
src/screens/notification/detail/index.js 0 → 100644
import React, {useMemo, useState} from 'react';
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);
};
return (
<NotificationDetailView
options={options}
selectedValue={selectedValue}
onValueChange={onValueChange}
/>
);
};
export default NotificationDetail;
src/screens/notification/detail/style.js 0 → 100644
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:16,
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,
}
});
export default styles;
\ No newline at end of file
src/screens/notification/detail/view.js 0 → 100644
import React from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
TextInput,
} 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 RadioButton from '../../../components/RadioButton/RadioButton';
const NotificationDetailView = props => {
const {
showWarning,
title,
onTitleChange,
options,
selectedValue,
onValueChange,
disabled,
size,
color,
direction,
} = props;
return (
<View style={styles.safeArea}>
<Header isBack title={'Chi tiết thông báo'} />
<View style={styles.container}>
{showWarning && (
<View style={styles.boxInput}>
<Text style={styles.txtInput}>
Bạn không thể chỉnh sửa thông báo khi đã gửi{' '}
</Text>
</View>
)}
<TextField
title="Tiêu đề thông báo"
value={title}
onChangeText={onTitleChange}
placeholder="HS"
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
containerMarginBottom={15}
required
/>
<TextField
title="Mã CBGV"
value={title}
onChangeText={onTitleChange}
placeholder="HS"
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
required
containerMarginBottom={15}
/>
<TextMulti
title="Nội dung thông báo"
titleFontSize={R.sizes.sm}
value={title}
onChangeText={onTitleChange}
placeholder="Thông tin nội dung thông báo sẽ được hiển thị ở đây"
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
fontSizePlaceHolder={R.sizes.sm}
required
containerMarginBottom={15}
/>
<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}
/>
<TextMulti
title="Chọn những sinh viên nhận thông báo"
titleFontSize={R.sizes.sm}
value={title}
onChangeText={onTitleChange}
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
fontSizePlaceHolder={R.sizes.sm}
required
containerMarginBottom={15}
/>
</View>
</View>
);
};
export default NotificationDetailView;
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