TODO: Đã hoàn thiện giao diện màn chi tiết thông báo thiếu chức năng download

src/assets/colors.js

@@ -12,6 +12,8 @@ const colors = {
 
   blue: 'rgba(47, 107, 255, 1)',
   blue1: 'rgba(47, 107, 255, 0.1)',
+  blue2: 'rgba(158, 187, 255, 1)',
+  blueTextChip: 'rgba(47, 107, 255, 1)',
 
   orange: 'rgba(243, 154, 43, 1)',
 

src/assets/images.js

@@ -50,6 +50,7 @@ const images = {
   //Icon other
   icBack: require('./icon/icon_png/back.png'),
   icNext: require('./icon/icon_png/arrow_next.png'),
+  icCancel: require('./images/iconCancel.png'),
   icMale: require('./icon/icon_png/male.png'),
   icFemale: require('./icon/icon_png/female.png'),
   icDownload: require('./icon/icon_png/download.png'),

src/components/Button.js

-import React, {Component} from 'react';
+import React from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
+  Platform,
   View,
   Text,
-  ImageBackground,
+  Image,
 } from 'react-native';
 import R from '../assets/R';
-import {colors, sizes} from '../assets/theme';
-import {
-  getFontSize,
-  getFontXD,
-  getWidth,
-  HEIGHT,
-  WIDTH,
-} from '../config/Functions';
+
 
 const Button = props => {
-  const {title, onPress, containerStyle, txtStyle, backgroundColor} = props;
+  const {
+    title, 
+    onPress, 
+    containerStyle, 
+    txtStyle, 
+    backgroundColor,
+    height,
+    borderRadius,
+    fontSize,
+    textColor,
+    fontWeight,
+    fontFamily,
+    disabled,
+    width,
+    marginHorizontalText,
+    marginVerticalText,
+    icon,
+    iconStyle,
+  } = props;
 
   return (
     <TouchableOpacity
       style={[
         {
-          height: HEIGHT(40),
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: '#F2B60D',
-          marginHorizontal: WIDTH(15),
-          borderRadius: HEIGHT(6),
-          marginTop: HEIGHT(30),
-          shadowColor: '#000',
-          shadowOffset: {
-            width: 0,
-            height: 1,
-          },
-          shadowOpacity: 0.22,
-          shadowRadius: 2.22,
-          elevation: 3,
+          width: width,
+          height: height,
+          
+          backgroundColor: backgroundColor,
+          borderRadius: borderRadius,
         },
         {...containerStyle},
       ]}
-      disabled={props.disabled}
+      disabled={disabled}
       onPress={onPress}>
       <View
         style={{
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
+          flex:1,
+          justifyContent:'space-around',
+          flexDirection:'row',
+          alignItems:'center',
+          
+
         }}>
         <Text
           style={[
             {
-              fontSize: getFontSize(18),
-              color: R.colors.white,
-              fontWeight: 'bold',
+              fontSize: fontSize,
+              color: textColor,
+              fontWeight: fontWeight,
+              fontFamily: fontFamily,
+              marginHorizontal: marginHorizontalText,
+              marginVertical: marginVerticalText,
             },
             {...txtStyle},
           ]}>
           {title}
         </Text>
+          {icon&& <Image source={icon} style={iconStyle} />}
       </View>
     </TouchableOpacity>
   );

src/components/Card/CardChip.js

-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import React from 'react'
-import R from '../../assets/R'
-
-const CardChip = ({
-    title,
-
-    marginBottomTitle,
-
-    containerMarginBottom,
-    containerMarginHorizontal,
-    containerMarginVertical,
-    containerMarginRight,
-    containerMarginTop,
-    containerMarginLeft,
-
-    cardMarginBottom,
-    cardMarginHorizontal,
-    cardMarginVertical,
-    cardMarginRight,
-    cardMarginTop,
-    cardMarginLeft,
-    cardBackgroundColor,
-    cardBorderRadius,
-
-    chipMarginBottom,
-    chipMarginHorizontal,
-    chipMarginVertical,
-    chipMarginRight,
-    chipMarginTop,
-    chipMarginLeft,
-    chipBackgroundColor,
-    chipBorderRadius,
-    chipText,
-    chipTextColor,
-    chipIcon,
-
-    widthCard,
-    heightCard,
-
-
-
-    
-}) => {
-  return (
-    <View style={[
-        {
-            marginHorizontal: containerMarginHorizontal,
-            marginVertical: containerMarginVertical,
-            marginBottom: containerMarginBottom,
-            marginRight: containerMarginRight,
-            marginTop: containerMarginTop,
-            marginLeft: containerMarginLeft,
-        }
-    ]} >
-      <Text style={{marginBottom: marginBottomTitle}}>{title}</Text>
-      <View style={[
-        {
-            marginHorizontal: cardMarginHorizontal,
-            marginVertical: cardMarginVertical,
-            marginBottom: cardMarginBottom,
-            marginRight: cardMarginRight,
-            marginTop: cardMarginTop,
-            marginLeft: cardMarginLeft,
-            backgroundColor: cardBackgroundColor,
-            borderRadius: cardBorderRadius,
-            width: widthCard,
-            height: heightCard,
-        }
-    ]}>
-        <TouchableOpacity style={[
-            {
-                marginHorizontal: chipMarginHorizontal,
-                marginVertical: chipMarginVertical,
-                marginBottom: chipMarginBottom,
-                marginRight: chipMarginRight,
-                marginTop: chipMarginTop,
-                marginLeft: chipMarginLeft,
-                backgroundColor: chipBackgroundColor,
-                borderRadius: chipBorderRadius,
-                
-            },
-            styles.chip
-        ]}>
-            <View style={styles.imageIcon}>
-            <Image backgroundColor={R.colors.white} resizeMode='cover' source={chipIcon} style={{width: 20, height: 20}}/>
-            </View>
-            
-            <Text style={[{color: chipTextColor}, styles.text]}>{chipText}</Text>
-            
-        </TouchableOpacity>
-    </View>
-
-    </View>
-  )
-}
-
-export default CardChip
-
-const styles = StyleSheet.create({
-    chip: {
-        flexDirection:'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position:'relative',
-        width:250,
-        height:40,
-        borderRadius: 100,
-        top:2,
-        left:10
-    },
-    imageIcon: {
-        marginRight:10
-    },
-    text: {
-        fontSize: 12,
-        fontFamily:R.fonts.fontRegular
-    }
-})
\ No newline at end of file

src/components/Header/Header.js

@@ -19,7 +19,6 @@ import {
   getFontSize,
   WIDTH,
 } from '../../config/Functions';
-import Icon from 'react-native-vector-icons/AntDesign';
 import {useNavigation} from '@react-navigation/native';
 const Header = props => {
   const {title, isBack} = props;

src/components/Input/TextField.js

@@ -35,8 +35,11 @@ const TextField = props => {
       <Text
         style={{
           fontSize: fontSizeTitle,
-          color: R.colors.color777,
+          color: R.colors.black,
           marginBottom: 5,
+          fontFamily:R.fonts.fontRegular,
+          fontWeight:'400',
+
         }}>
         {title ? title : ''}
         <Text style={{color: R.colors.red}}> {required ? "*" : ""}</Text>

src/components/Input/TextMulti.js

@@ -4,14 +4,33 @@ import {HEIGHTXD, WIDTHXD, getFontXD} from '../../config/Functions';
 import R from '../../assets/R';
 
 const TextField = props => {
-  const {title,titleFontSize,required, onChangeText, maxLength,backgroundColor, value, editable,placeholder,fontSizePlaceHolder,containerMarginVertical,containerMarginHorizontal,containerMarginBottom,containerBackgroundColor,onFocus} = props;
+  const {
+    title,
+    titleFontSize,
+    required, 
+    onChangeText, 
+    maxLength,
+    backgroundColor, 
+    value, 
+    editable,
+    placeholder,
+    fontSizePlaceHolder,
+    containerMarginVertical,
+    containerMarginHorizontal,
+    containerMarginBottom,
+    containerBackgroundColor,
+    onFocus,
+    fontFamily,
+  } = props;
 
   return (
     <View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor}}>
       <Text
         style={{
           fontSize: titleFontSize,
-          color: R.colors.color777,
+          color: 'black',
+          fontFamily:fontFamily,
+          fontWeight:'400',
           marginBottom: 5,
         }}>
         {title ? title : ''}

src/screens/notification/detail/index.js

@@ -11,14 +11,35 @@ const NotificationDetail = (props) => {
     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' },
+      { id: 3, name: 'Lê Thị Mai' },
+      { id: 4, name: 'Phạm Quốc Khánh' },
+      { id: 5, name: 'Hoàng Anh Tuấn' },
+      { id: 6, name: 'Vũ Thị Hằng' },
+      { id: 7, name: 'Ngô Văn Nam' },
+      { id: 8, name: 'Đinh Thị Lan' },
+      { id: 9, name: 'Bùi Văn Phúc' },
+      { id: 10, name: 'Lý Thị Hoa' },
+      { id: 11, name: 'Phan Minh Hoàng' },
+      { id: 12, name: 'Tạ Thị Hương' },
+      { id: 13, name: 'Đoàn Văn Dũng' },
+      { id: 14, name: 'Nguyễn Thị Vân' },
+      { id: 15, name: 'Trương Văn Long' },
+      { id: 16, name: 'Mai Thị Ngọc' },
+      { id: 17, name: 'Huỳnh Quốc Việt' },
+      { id: 18, name: 'Lâm Thị Thu' },
+      { id: 19, name: 'Nguyễn Hữu Tài' },
+      { id: 20, name: 'Phạm Thị Kim' }
+    ]);
 
   return (
     <NotificationDetailView 
     options={options}
     selectedValue={selectedValue}
     onValueChange={onValueChange}
- 
+    dataList={dataList}
     />
   );
 };

src/screens/notification/detail/style.js

@@ -34,6 +34,60 @@ const styles = StyleSheet.create({
         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,
+      },
 });
 export default styles;
\ No newline at end of file

src/screens/notification/detail/view.js

 import React from 'react';
-import {
-  Text,
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  TextInput,
-} 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 RadioButton from '../../../components/RadioButton/RadioButton';
-import CardChip from '../../../components/Card/CardChip';
+import Button from '../../../components/Button';
 const NotificationDetailView = props => {
   const {
     showWarning,
@@ -26,102 +19,171 @@ const NotificationDetailView = props => {
     size,
     color,
     direction,
+    dataList,
   } = 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
-          editable={false}
-        />
-
-        <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}
-          editable={false}
-        />
-        <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}
-          editable={false}
+  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>
+    );
+  };
 
-        <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={false}
-        />
+  return (
+    <View style={styles.safeArea}>
+      <Header isBack title={'Chi tiết thông báo'} />
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{paddingBottom: 20}}
+      >
+        <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>
+          )}
 
-        <CardChip
-          title="Chọn những sinh viên nhận thông báo"
-          marginBottomTitle={5}
-          containerMarginBottom={15}
-          heightCard={200}
-          cardBackgroundColor={R.colors.blue1}
-          cardBorderRadius={10}
+          <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
+            editable={false}
+          />
 
-          chipBackgroundColor={R.colors.gray1}
-          chipBorderRadius={10}
-          chipWidth={100}
-          chipHeight={50}
-          chipMarginVertical={10}
-          chipText="859256, Nguyễn Minh Đức"
-          chipTextColor={R.colors.blue}
-        />
+          <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}
+            editable={false}
+          />
+          <TextMulti
+            title="Nội dung thông báo"
+            fontFamily={R.fonts.fontRegular}
+            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}
+            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={false}
+          />
 
+          <View style={styles.flatList}>
+            <FlatList
+              nestedScrollEnabled
+              data={dataList}
+              renderItem={renderItem}
+              keyExtractor={item => item.id}
+              numColumns={1}
+              contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}
+            />
+          </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>
   );
 };