TODOL Điều chỉnh giao diện FAB

src/assets/images.js

@@ -8,6 +8,7 @@ const images = {
   bg_cannot_connect: require('./images/bg_cannot_connect.png'),
   icGallery: require('./images/icGallery.png'),
   icNoData: require('./icon/icon_png/icon_no_data.png'),
+  icMenuEdit: require('./icon/icon_png/menuEdit.png'),
   //HomeScreen
   icLichDay:require('./icon/lich_day.png'),
   icBaoBu: require('./icon/bao_bu.png'),

src/components/FAB/constants.js

+// Vị trí bắt đầu của FAB (Floating Action Button)
 export const FAB_STARTING_POSITION = 0;
-export const FAB_WIDTH = 60;
+
+// Kích thước chiều rộng của nút FAB
+export const FAB_WIDTH = 50;
+
+// Kích thước chiều cao của nút FAB (bằng với chiều rộng để tạo nút tròn)
 export const FAB_HEIGHT = FAB_WIDTH;
-export const FAB_BORDER_RADIUS = FAB_WIDTH/2;
-export const FAB_BACKGROUND_COLOR = '#2EC4B6';
-export const FAB_MARGIN = 30;
 
+// Bán kính bo tròn (FAB tròn hoàn hảo)
+export const FAB_BORDER_RADIUS = FAB_WIDTH / 2;
+
+// Màu nền mặc định của FAB
+export const FAB_BACKGROUND_COLOR = '#2F6BFF';
+
+// Khoảng cách margin của FAB với viền màn hình
+export const FAB_MARGIN = 10;
+
+
+// -------- Trạng thái khi mở FAB --------
+
+// Góc xoay của biểu tượng FAB khi mở (xoay 225 độ, thường là dấu "+" xoay thành "x")
 export const FAB_ROTATION_OPEN = 225;
+
+// Độ mờ của các nút con khi FAB mở (1 = hiện rõ)
 export const FAB_CHILDREN_OPACITY_OPEN = 1;
+
+// Vị trí Y của các nút con khi mở (0 = sát với FAB chính)
 export const FAB_CHILDREN_POSITION_Y_OPEN = 0;
+
+// Độ dịch chuyển Y của dấu "+" khi FAB mở (để canh giữa khi xoay)
 export const FAB_PLUS_TRANSLATE_Y_OPEN = -3;
 
+
+// -------- Trạng thái khi đóng FAB --------
+
+// Độ mờ của các nút con khi FAB đóng (0 = ẩn hoàn toàn)
 export const FAB_CHILDREN_OPACITY_CLOSE = 0;
+
+// Vị trí Y của các nút con khi đóng (cách FAB chính 30px)
 export const FAB_CHILDREN_POSITION_Y_CLOSE = 30;
+
+// Góc xoay của FAB khi đóng (0 độ = trạng thái ban đầu)
 export const FAB_ROTATION_CLOSE = 0;
+
+// Độ dịch chuyển Y của dấu "+" khi FAB đóng
 export const FAB_PLUS_TRANSLATE_Y_CLOSE = -2;
 
+
+// -------- Cấu hình nút con (sub button) --------
+
+// Chiều rộng nút con
 export const SUBBTN_WIDTH = FAB_WIDTH;
+
+// Chiều cao nút con (bằng chiều rộng để tạo hình tròn)
 export const SUBBTN_HEIGHT = SUBBTN_WIDTH;
+
+// Bán kính bo tròn (nút con hình tròn)
 export const SUBBTN_BORDER_RADIUS = SUBBTN_WIDTH / 2;
-export const SUBBTN_BACKGROUND_COLOR = '#1B746B';
 
-export const SUBBTN_TAP_EVENT = 'SUBBTN_TAP_EVENT';
+// Màu nền mặc định của nút con
\ No newline at end of file
+export const SUBBTN_BACKGROUND_COLOR = '#2F6BFF';
+
+// Tên sự kiện khi nhấn vào nút con
+export const SUBBTN_TAP_EVENT = 'SUBBTN_TAP_EVENT';

src/components/FAB/fab.js

-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect} from 'react'; 
 import {
   StyleSheet,
   useWindowDimensions,
@@ -38,23 +38,20 @@ import Animated, {
 } from 'react-native-reanimated';
 
 const FAB = props => {
+  // State: quản lý trạng thái mở/đóng của FAB
   const [opened, setOpened] = useState(false);
 
+  // Lấy kích thước màn hình hiện tại (để xử lý drag sang trái/phải)
   const { width } = useWindowDimensions();
 
-  /**
-   * Destructure the children prop for the SubButton(s)
-   */
+  // Nhận children (SubButton) truyền vào component
   const { children } = props;
 
   /**
-   * (X,Y) position of the FAB. We use these
-   * for keeping track of the button when dragging it.
-   *
-   * We also rotate the button to change the + to a x
-   * when the children view is visible. The plus text is
-   * also offset to accomodate for the anchor point of the
-   * rotation not being in the center of the +
+   * Các biến dùng chung để animate:
+   * - fabPositionX, fabPositionY: vị trí FAB khi kéo (drag)
+   * - fabRotation: góc xoay của FAB (+ thành x)
+   * - fabPlusTranslateY: chỉnh lại vị trí của dấu "+"
    */
   const fabPositionX = useSharedValue(0);
   const fabPositionY = useSharedValue(0);
@@ -62,18 +59,21 @@ const FAB = props => {
   const fabPlusTranslateY = useSharedValue(FAB_PLUS_TRANSLATE_Y_CLOSE);
 
   /**
-   * The opacity and Y position of the children container for the
-   * SubButton(s). We use this to show a sliding fade in/out animation when
-   * the user taps the FAB button
+   * Quản lý animation cho view chứa SubButton(s)
+   * - childrenYPosition: vị trí Y khi show/hide
+   * - childrenOpacity: độ mờ khi show/hide
    */
   const childrenYPosition = useSharedValue(FAB_CHILDREN_POSITION_Y_CLOSE);
   const childrenOpacity = useSharedValue(FAB_CHILDREN_OPACITY_CLOSE);
 
+  // Khi tap vào FAB thì toggle mở/đóng
   const _onTapHandlerStateChange = ({nativeEvent}) => {
     if (nativeEvent.state === State.END) {
         opened ? _close() : _open();
-      }
+    }
   };
+
+  // Hàm mở FAB -> show sub button với animation
   function _open() {
     setOpened(true);
     childrenOpacity.value = withTiming(FAB_CHILDREN_OPACITY_OPEN, {
@@ -86,14 +86,7 @@ const FAB = props => {
     fabPlusTranslateY.value = withSpring(FAB_PLUS_TRANSLATE_Y_OPEN);
   }
 
-  /**
-   * Method called when we want to hide the SubButton(s)
-   *
-   * This is essentially the same function as _open(), but in reverse.
-   * However, we need to delay setting the opened state to false to let
-   * the closing animation play out because as soon as we set that state
-   * to false, the component will unmount.
-   */
+  // Hàm đóng FAB -> ẩn sub button với animation
   function _close() {
     childrenOpacity.value = withTiming(FAB_CHILDREN_OPACITY_CLOSE, {
       duration: 300,
@@ -103,17 +96,16 @@ const FAB = props => {
     });
     fabRotation.value = withSpring(FAB_ROTATION_CLOSE);
     fabPlusTranslateY.value = withSpring(FAB_PLUS_TRANSLATE_Y_CLOSE);
+    // delay để chờ animation chạy xong rồi mới setOpened(false)
     setTimeout(() => {
       setOpened(false);
     }, 300);
   }
 
   /**
-   * A useEffect (componentDidMount) that adds an
-   * event listener to the FAB so when we tap any SubButton we close
-   * the SubButton container.
-   *
-   * The return statement (componentWillUnmount) removes the listener.
+   * useEffect: đăng ký listener SUBBTN_TAP_EVENT
+   * Khi nhấn SubButton -> tự động đóng FAB
+   * cleanup: gỡ listener khi unmount
    */
   useEffect(() => {
     let listener = DeviceEventEmitter.addListener(SUBBTN_TAP_EVENT, () => {
@@ -122,6 +114,12 @@ const FAB = props => {
     return () => listener.remove();
   }, []);
 
+  /**
+   * Xử lý gesture kéo thả FAB
+   * - onStart: lưu vị trí ban đầu
+   * - onActive: update vị trí khi kéo
+   * - onEnd: snap FAB về trái/phải màn hình
+   */
   const _onPanHandlerStateChange = useAnimatedGestureHandler({
     onStart: (_, ctx) => {
         ctx.startX = fabPositionX.value;
@@ -142,6 +140,7 @@ const FAB = props => {
     },
   });
 
+  // Style động cho FAB khi drag
   const animatedRootStyles = useAnimatedStyle(() => {
     return {
       transform: [
@@ -151,11 +150,7 @@ const FAB = props => {
     };
   });
 
-  /**
-   * The animated styles hook that is used in the
-   * style prop for the children view. The opacity of the children
-   * and the y-position update depending on the shared values used.
-   */
+  // Style động cho children (ẩn/hiện + trượt lên/xuống)
   const animatedChildrenStyles = useAnimatedStyle(() => {
     return {
       opacity: childrenOpacity.value,
@@ -163,23 +158,14 @@ const FAB = props => {
     };
   });
 
-  /**
-   * The animated styles hook that is used in the
-   * style prop for the FAB. It updates the rotation value
-   * when the fabRotation shared value is changed.
-   */
+  // Style động cho FAB (xoay dấu +)
   const animatedFABStyles = useAnimatedStyle(() => {
     return {
       transform: [{ rotate: `${fabRotation.value}deg` }],
     };
   });
 
-  /**
-   * The animated styles hook that is used in the
-   * style prop for the plus text in the FAB. It update
-   * the y-position for the text when the fabPlusTranslatey shared value
-   * is changed.
-   */
+  // Style động cho dấu "+" (chỉnh vị trí Y)
   const animatedPlusText = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: fabPlusTranslateY.value }],
@@ -188,34 +174,40 @@ const FAB = props => {
 
   return (
     <PanGestureHandler onHandlerStateChange={_onPanHandlerStateChange}>
-    <Animated.View style={[styles.rootStyles, animatedRootStyles]}>
-      {opened && (
-        <Animated.View
-          style={[styles.childrenStyles, animatedChildrenStyles]}>
-          {children}
-        </Animated.View>
-      )}
-      <TapGestureHandler onHandlerStateChange={_onTapHandlerStateChange}>
-        <Animated.View style={[styles.fabButtonStyles, animatedFABStyles]}>
-          <Animated.Text style={[styles.plus, animatedPlusText]}>
-            +
-          </Animated.Text>
-        </Animated.View>
-      </TapGestureHandler>
-    </Animated.View>
-  </PanGestureHandler>
+      <Animated.View style={[styles.rootStyles, animatedRootStyles]}>
+        {/* Hiện sub button khi opened = true */}
+        {opened && (
+          <Animated.View
+            style={[styles.childrenStyles, animatedChildrenStyles]}>
+            {children}
+          </Animated.View>
+        )}
+
+        {/* FAB chính (nút tròn màu xanh + dấu cộng) */}
+        <TapGestureHandler onHandlerStateChange={_onTapHandlerStateChange}>
+          <Animated.View style={[styles.fabButtonStyles, animatedFABStyles]}>
+            <Animated.Text style={[styles.plus, animatedPlusText]}>
+              +
+            </Animated.Text>
+          </Animated.View>
+        </TapGestureHandler>
+      </Animated.View>
+    </PanGestureHandler>
   );
 };
 
 export default FAB;
 
+// Style cho các phần tử trong FAB
 const styles = StyleSheet.create({
+  // Vị trí gốc của FAB (bottom-right)
   rootStyles: {
     borderRadius: FAB_BORDER_RADIUS,
     position: 'absolute',
     bottom: FAB_MARGIN,
     right: FAB_MARGIN,
   },
+  // Style cho nút FAB chính
   fabButtonStyles: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -224,13 +216,15 @@ const styles = StyleSheet.create({
     height: FAB_HEIGHT,
     borderRadius: FAB_BORDER_RADIUS,
   },
+  // Style cho container của SubButton
   childrenStyles: {
     width: FAB_WIDTH,
     alignItems: 'center',
     marginBottom: 20,
   },
+  // Style cho dấu "+"
   plus: {
-    fontSize: 36,
+    fontSize: 20,
     color: '#EFFBFA',
   },
 });

src/components/FAB/sub_button.js

 import React from 'react';
 
-import { DeviceEventEmitter, StyleSheet, Text } from 'react-native';
+import { DeviceEventEmitter, Image, StyleSheet, Text } from 'react-native';
 import { TapGestureHandler , State} from 'react-native-gesture-handler';
 
 import Animated , {
@@ -15,29 +15,41 @@ import {
   SUBBTN_WIDTH,
   SUBBTN_TAP_EVENT,
 } from './constants';
+import R from '../../assets/R';
 
+// Component SubButton (nút con của FAB)
 const SubButton = props => {
-  const { label, onPress } = props;
+  const { label, onPress , images, backgroundColor } = props;
+
+  // Biến sharedValue để quản lý độ mờ (opacity) khi nhấn giữ
   const buttonOpacity = useSharedValue(1);
-  
+
+  // Style động: cập nhật opacity theo buttonOpacity
   const animatedStyles = useAnimatedStyle(() => {
     return {
       opacity: buttonOpacity.value,
     };
   });
+
+  // Hàm xử lý sự kiện khi người dùng tap SubButton
   function _onTapHandlerStateChange({ nativeEvent }) {
     switch (nativeEvent.state) {
-        case State.BEGAN: {
+        case State.BEGAN: { 
+          // Khi bắt đầu nhấn -> giảm opacity để tạo hiệu ứng feedback
           buttonOpacity.value = 0.5;
           break;
         }
         case State.END: {
+          // Khi nhấn xong -> phát sự kiện đóng FAB
           DeviceEventEmitter.emit(SUBBTN_TAP_EVENT);
+          // Trả opacity về lại bình thường
           buttonOpacity.value = 1.0;
+          // Gọi hàm onPress được truyền từ props
           onPress && onPress();
           break;
         }
         case State.CANCELLED: {
+          // Nếu hủy tap -> trả opacity về 1
           buttonOpacity.value = 1.0;
           break;
         }
@@ -50,32 +62,36 @@ const SubButton = props => {
           break;
         }
       }
-      
   }
 
   return (
+    // Bọc SubButton trong TapGestureHandler để xử lý cử chỉ chạm
     <TapGestureHandler onHandlerStateChange={_onTapHandlerStateChange}>
-    <Animated.View style={[styles.subButton, animatedStyles]}>
-      <Text style={styles.label}>{label}</Text>
-    </Animated.View>
-  </TapGestureHandler>
+      <Animated.View style={[styles.subButton,{backgroundColor:backgroundColor} ,animatedStyles]}>
+        <Text style={styles.label}>{label}</Text>
+        <Image source={images} style={{width: 20, height: 20}} resizeMode="contain" tintColor={R.colors.white}/>
+      </Animated.View>
+    </TapGestureHandler>
   );
 };
 
 export default SubButton;
 
+// Style cho SubButton
 const styles = StyleSheet.create({
   subButton: {
-    width: SUBBTN_WIDTH,
-    height: SUBBTN_HEIGHT,
-    borderRadius: SUBBTN_BORDER_RADIUS,
-    backgroundColor: SUBBTN_BACKGROUND_COLOR,
+    width: 150,                   // Chiều rộng nút con
+    height: 35,                 // Chiều cao nút con
+    borderRadius: SUBBTN_BORDER_RADIUS,    // Bo tròn (tròn hoàn hảo)
+    backgroundColor: SUBBTN_BACKGROUND_COLOR, // Màu nền nút
+    justifyContent: 'center',              // Canh giữa dọc
+    marginTop: 10,                         // Khoảng cách giữa các SubButton4
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 10,
   },
   label: {
-    color: '#EFFBFA',
-    fontSize: 24,
+    marginRight:3,
+    color: '#FFFFFF',                      // Màu chữ (trắng xanh nhạt)
+    fontSize: 12,                          // Kích thước chữ
   },
-});
+});
\ No newline at end of file

src/screens/incoming_document/detail/view.js

@@ -145,11 +145,9 @@ const DetailIncomingDocumentView = props => {
           renderItem={renderItem}
           keyExtractor={(item, index) => index.toString()}
         />
-           <FAB>
-          <SubButton onPress={() => Alert.alert('Pressed 1!')} label="1" />
-          <SubButton onPress={() => Alert.alert('Pressed 2!')} label="2" />
-          <SubButton onPress={() => Alert.alert('Pressed 3!')} label="3" />
-          <SubButton onPress={() => Alert.alert('Pressed 4!')} label="4" />
+        <FAB>
+          <SubButton onPress={() => Alert.alert('Pressed 1!')} label="Thêm bút phê" images={R.images.icEdit} backgroundColor={R.colors.orange}/>
+          <SubButton onPress={() => Alert.alert('Pressed 2!')} label="Tạo công việc" images={R.images.icMenuEdit} backgroundColor={R.colors.blue}/>
         </FAB>
     
       </View>