Philip Cesar Garay
180 lines
5.6 KiB
JavaScript
180 lines
5.6 KiB
JavaScript
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;
|