update

2025-07-31 21:25:33 +08:00
parent 5cfbc81e3a
commit 84fc719a10
307 changed files with 46470 additions and 0 deletions
@@ -0,0 +1,179 @@
+import { View, Text, ScrollView, Pressable } from "react-native";
+
+import { Style, Fonts, gutters, Palette } from "../styles";
+import { Input } from "./Input";
+import { mainBorderRadius } from "../styles/Style";
+
+const Tableau = ({
+  headings = [],
+  data = [],
+
+  isEdit = false,
+
+  onUpdate = () => {},
+  onPressRow = null,
+
+  mainColor = Palette.primary,
+  transparentColor = Palette.transparentPrimary,
+}) => {
+  const filteredHeadings = headings.filter(({ condition = true }) => condition);
+
+  return (
+    <>
+      <View
+        style={{
+          ...Style.containerSpaceBetween,
+          ...Style.containerItem,
+          backgroundColor: "transparent",
+          padding: gutters / 2,
+          paddingVertical: gutters / 4,
+        }}
+      >
+        {filteredHeadings.map(({ title = "", flex }, index) => (
+          <View style={{ flex, paddingRight: 10 }}>
+            <Text
+              key={index}
+              style={Fonts({
+                type: "default",
+                style: {
+                  textAlign: !index
+                    ? "left"
+                    : index === filteredHeadings?.length - 1
+                    ? "right"
+                    : "center",
+                  color: mainColor,
+                  borderRightWidth:
+                    index !== filteredHeadings?.length - 1 ? 1 : 0,
+                  borderRightColor: transparentColor,
+                },
+              })}
+            >
+              {title}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {data?.length > 0 ? (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{
+            flex: 1,
+            paddingTop: gutters,
+            paddingBottom: 300,
+          }}
+        >
+          {data.map((item, indexItemList) => {
+            return (
+              <>
+                <Pressable
+                  key={indexItemList}
+                  onPress={() => onPressRow?.({ item })}
+                  style={{
+                    ...Style.containerSpaceBetween,
+                    alignItems: "flex-start",
+                    paddingHorizontal: gutters / 2,
+                  }}
+                >
+                  {filteredHeadings.map(
+                    (
+                      { key, type = "DEFAULT", textStyle = () => {} },
+                      indexColumn
+                    ) => {
+                      const { flex, isEditable, renderCell } =
+                        filteredHeadings[indexColumn];
+
+                      const content = renderCell({
+                        item,
+                        key,
+                        indexItemList,
+                      });
+
+                      return (
+                        <View style={{ flex, paddingRight: 10 }}>
+                          {type === "CUSTOM" ? (
+                            content
+                          ) : isEdit && isEditable ? (
+                            <Input
+                              key={indexColumn}
+                              placeholder={""}
+                              value={item?.[key] || ""}
+                              setValue={(value) =>
+                                onUpdate({
+                                  index: indexItemList,
+                                  key,
+                                  value,
+                                })
+                              }
+                              type={!indexColumn ? "textarea" : "default"}
+                              borderType="dashed"
+                              containerStyle={{
+                                borderRadius: mainBorderRadius / 2,
+                                width: "100%",
+                                backgroundColor: "transparent", // 'white
+                              }}
+                              textInputStyle={{
+                                textAlign: !indexColumn
+                                  ? "left"
+                                  : indexColumn === filteredHeadings?.length - 1
+                                  ? "right"
+                                  : "center",
+                              }}
+                            />
+                          ) : (
+                            <Text
+                              key={indexColumn}
+                              style={Fonts({
+                                type: "default",
+                                style: {
+                                  textAlign: !indexColumn ? "left" : "center",
+                                  ...textStyle({ item }),
+                                },
+                              })}
+                            >
+                              {content}
+                            </Text>
+                          )}
+                        </View>
+                      );
+                    }
+                  )}
+                </Pressable>
+
+                <View
+                  style={{
+                    width: "100%",
+                    backgroundColor: transparentColor,
+                    height: 1,
+                    marginVertical: gutters / 2,
+                  }}
+                />
+              </>
+            );
+          })}
+        </ScrollView>
+      ) : (
+        <View
+          style={{
+            ...Style.containerCenter,
+            flex: 1,
+          }}
+        >
+          <Text
+            style={Fonts({
+              type: "default",
+              style: {
+                textAlign: "center",
+                color: mainColor,
+              },
+            })}
+          >
+            Il n'y a pas encore de données
+          </Text>
+        </View>
+      )}
+    </>
+  );
+};
+
+export default Tableau;