Simplify the peek view of exercises from Plan
This commit is contained in:
parent
1b164aaaf1
commit
086e3ea2df
11
SetItem.tsx
11
SetItem.tsx
|
@ -4,7 +4,12 @@ import React, { useCallback, useMemo } from "react";
|
|||
import { Image } from "react-native";
|
||||
import { List, Text, useTheme } from "react-native-paper";
|
||||
import { StackParams } from "./AppStack";
|
||||
import { DARK_RIPPLE, LIGHT_RIPPLE } from "./constants";
|
||||
import {
|
||||
DARK_RIPPLE,
|
||||
DARK_SUBDUED,
|
||||
LIGHT_RIPPLE,
|
||||
LIGHT_SUBDUED,
|
||||
} from "./constants";
|
||||
import GymSet from "./gym-set";
|
||||
import Settings from "./settings";
|
||||
|
||||
|
@ -60,7 +65,7 @@ const SetItem = React.memo(
|
|||
title={item.name}
|
||||
description={
|
||||
settings.showDate ? (
|
||||
<Text style={{ color: dark ? "#909090ff" : "#717171ff" }}>
|
||||
<Text style={{ color: dark ? DARK_SUBDUED : LIGHT_SUBDUED }}>
|
||||
{format(new Date(item.created), settings.date || "P")}
|
||||
</Text>
|
||||
) : null
|
||||
|
@ -72,7 +77,7 @@ const SetItem = React.memo(
|
|||
<Text
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
color: dark ? "#909090ff" : "#717171ff",
|
||||
color: dark ? DARK_SUBDUED : LIGHT_SUBDUED,
|
||||
}}
|
||||
>
|
||||
{`${item.reps} x ${item.weight}${item.unit || "kg"}`}
|
||||
|
|
|
@ -1,15 +1,16 @@
|
|||
import { RouteProp, useRoute } from "@react-navigation/native";
|
||||
import { format } from "date-fns";
|
||||
import { useEffect, useState } from "react";
|
||||
import { FlatList } from "react-native";
|
||||
import { List, useTheme } from "react-native-paper";
|
||||
import { List, Text, useTheme } from "react-native-paper";
|
||||
import { Like } from "typeorm";
|
||||
import { StackParams } from "./AppStack";
|
||||
import { LIMIT } from "./constants";
|
||||
import SetItem from "./SetItem";
|
||||
import StackHeader from "./StackHeader";
|
||||
import { DARK_SUBDUED, LIGHT_SUBDUED, LIMIT } from "./constants";
|
||||
import { setRepo, settingsRepo } from "./db";
|
||||
import GymSet from "./gym-set";
|
||||
import SetItem from "./SetItem";
|
||||
import Settings from "./settings";
|
||||
import StackHeader from "./StackHeader";
|
||||
|
||||
interface ColorSet extends GymSet {
|
||||
color?: string;
|
||||
|
@ -18,7 +19,7 @@ interface ColorSet extends GymSet {
|
|||
export default function ViewSetList() {
|
||||
const [sets, setSets] = useState<ColorSet[]>();
|
||||
const [settings, setSettings] = useState<Settings>();
|
||||
const { colors } = useTheme();
|
||||
const { colors, dark } = useTheme();
|
||||
const { params } = useRoute<RouteProp<StackParams, "ViewSetList">>();
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -52,14 +53,18 @@ export default function ViewSetList() {
|
|||
}, [params.name, colors]);
|
||||
|
||||
const renderItem = ({ item }: { item: ColorSet; index: number }) => (
|
||||
<SetItem
|
||||
settings={settings}
|
||||
item={item}
|
||||
key={item.id}
|
||||
ids={[]}
|
||||
setIds={() => null}
|
||||
disablePress
|
||||
customBg={item.color}
|
||||
<List.Item
|
||||
title={format(new Date(item.created), settings.date || "P")}
|
||||
style={{ backgroundColor: item.color }}
|
||||
right={() => (
|
||||
<Text
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
{`${item.reps} x ${item.weight}${item.unit || "kg"}`}
|
||||
</Text>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { DefaultTheme, MD3DarkTheme } from "react-native-paper";
|
||||
|
||||
export const lightColors = [
|
||||
export const LIGHT_COLORS = [
|
||||
{ hex: MD3DarkTheme.colors.primary, name: "Purple" },
|
||||
{ hex: "#B3E5FC", name: "Blue" },
|
||||
{ hex: "#FA8072", name: "Salmon" },
|
||||
|
@ -11,7 +11,7 @@ export const lightColors = [
|
|||
{ hex: "#00CED1", name: "Dark Turquoise" },
|
||||
];
|
||||
|
||||
export const darkColors = [
|
||||
export const DARK_COLORS = [
|
||||
{ hex: DefaultTheme.colors.primary, name: "Purple" },
|
||||
{ hex: "#0051a9", name: "Blue" },
|
||||
{ hex: "#000000", name: "Black" },
|
||||
|
|
|
@ -3,4 +3,6 @@ export const PADDING = 10;
|
|||
export const ITEM_PADDING = 8;
|
||||
export const DARK_RIPPLE = "#444444";
|
||||
export const LIGHT_RIPPLE = "#c2c2c2";
|
||||
export const DARK_SUBDUED = "#909090ff";
|
||||
export const LIGHT_SUBDUED = "#717171ff";
|
||||
export const LIMIT = 15;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { darkColors, lightColors } from "./colors";
|
||||
import { DARK_COLORS, LIGHT_COLORS } from "./colors";
|
||||
|
||||
export const themeOptions = [
|
||||
{ label: "System", value: "system" },
|
||||
|
@ -6,13 +6,13 @@ export const themeOptions = [
|
|||
{ label: "Light", value: "light" },
|
||||
];
|
||||
|
||||
export const lightOptions = lightColors.map((color) => ({
|
||||
export const lightOptions = LIGHT_COLORS.map((color) => ({
|
||||
label: color.name,
|
||||
value: color.hex,
|
||||
color: color.hex,
|
||||
}));
|
||||
|
||||
export const darkOptions = darkColors.map((color) => ({
|
||||
export const darkOptions = DARK_COLORS.map((color) => ({
|
||||
label: color.name,
|
||||
value: color.hex,
|
||||
color: color.hex,
|
||||
|
|
Loading…
Reference in New Issue