Replace dragging with buttons in edit plan - 2.5 🚀
Every draggable library I tried was buggy.
This commit is contained in:
parent
2f24104d13
commit
15a28a0a81
50
EditPlan.tsx
50
EditPlan.tsx
|
@ -5,11 +5,8 @@ import {
|
|||
useRoute,
|
||||
} from "@react-navigation/native";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Pressable, StyleSheet, View } from "react-native";
|
||||
import { FlatList, Pressable, StyleSheet, View } from "react-native";
|
||||
import { IconButton, Switch as PaperSwitch, Text } from "react-native-paper";
|
||||
import ReorderableList, {
|
||||
ReorderableListRenderItemInfo,
|
||||
} from "react-native-reorderable-list";
|
||||
import AppInput from "./AppInput";
|
||||
import { StackParams } from "./AppStack";
|
||||
import PrimaryButton from "./PrimaryButton";
|
||||
|
@ -98,35 +95,46 @@ export default function EditPlan() {
|
|||
/>
|
||||
);
|
||||
|
||||
const renderExercise = ({
|
||||
item,
|
||||
drag,
|
||||
}: ReorderableListRenderItemInfo<string>) => (
|
||||
const renderExercise = (name: string, index: number) => (
|
||||
<Pressable
|
||||
onPress={() => toggleExercise(!exercises.includes(item), item)}
|
||||
onPress={() => toggleExercise(!exercises.includes(name), name)}
|
||||
style={{ flexDirection: "row", alignItems: "center" }}
|
||||
>
|
||||
<PaperSwitch
|
||||
value={exercises.includes(item)}
|
||||
value={exercises.includes(name)}
|
||||
style={{ marginRight: MARGIN }}
|
||||
onValueChange={(value) => toggleExercise(value, item)}
|
||||
onValueChange={(value) => toggleExercise(value, name)}
|
||||
/>
|
||||
<Text>{item}</Text>
|
||||
<Text>{name}</Text>
|
||||
<IconButton
|
||||
icon="drag-vertical"
|
||||
icon="arrow-up"
|
||||
style={{ marginLeft: "auto" }}
|
||||
onPressIn={drag}
|
||||
onPressIn={() => moveUp(index)}
|
||||
/>
|
||||
<IconButton icon="arrow-down" onPressIn={() => moveDown(index)} />
|
||||
</Pressable>
|
||||
);
|
||||
|
||||
const reorderExercise = (from: number, to: number) => {
|
||||
const moveDown = (from: number) => {
|
||||
if (from === names.length - 1) return;
|
||||
const to = from + 1;
|
||||
const newNames = [...names];
|
||||
const copy = newNames[from];
|
||||
newNames[from] = newNames[to];
|
||||
newNames[to] = copy;
|
||||
const newExercises = newNames.filter((name) => exercises.includes(name));
|
||||
setExercises(newExercises);
|
||||
setNames(newNames);
|
||||
};
|
||||
|
||||
const moveUp = (from: number) => {
|
||||
if (from === 0) return;
|
||||
const to = from - 1;
|
||||
const newNames = [...names];
|
||||
const copy = newNames[from];
|
||||
newNames[from] = newNames[to];
|
||||
newNames[to] = copy;
|
||||
const newExercises = newNames.filter((name) => exercises.includes(name));
|
||||
console.log({ newExercises });
|
||||
setExercises(newExercises);
|
||||
setNames(newNames);
|
||||
};
|
||||
|
@ -167,19 +175,14 @@ export default function EditPlan() {
|
|||
|
||||
<Text style={[styles.title, { marginTop: MARGIN }]}>Exercises</Text>
|
||||
{names !== undefined && (
|
||||
<ReorderableList
|
||||
<FlatList
|
||||
data={names}
|
||||
ListEmptyComponent={<Text>No exercises yet</Text>}
|
||||
onReorder={({ fromIndex, toIndex }) =>
|
||||
reorderExercise(fromIndex, toIndex)
|
||||
}
|
||||
renderItem={renderExercise}
|
||||
renderItem={({ item, index }) => renderExercise(item, index)}
|
||||
keyExtractor={(item) => item}
|
||||
dragScale={1.025}
|
||||
style={{
|
||||
flex: 1,
|
||||
}}
|
||||
containerStyle={{ flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
@ -191,6 +194,7 @@ export default function EditPlan() {
|
|||
await save();
|
||||
drawerNavigate("Plans");
|
||||
}}
|
||||
style={{ margin: MARGIN }}
|
||||
>
|
||||
Save
|
||||
</PrimaryButton>
|
||||
|
|
|
@ -85,8 +85,8 @@ android {
|
|||
applicationId "com.massive"
|
||||
minSdkVersion rootProject.ext.minSdkVersion
|
||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||
versionCode 36219
|
||||
versionName "2.4"
|
||||
versionCode 36220
|
||||
versionName "2.5"
|
||||
}
|
||||
signingConfigs {
|
||||
release {
|
||||
|
|
29
package-lock.json
generated
29
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "massive",
|
||||
"version": "1.171",
|
||||
"version": "2.4",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "massive",
|
||||
"version": "1.171",
|
||||
"version": "2.4",
|
||||
"license": "GPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||
|
@ -39,7 +39,6 @@
|
|||
"react-native-paper": "^5.9.1",
|
||||
"react-native-permissions": "^3.10.1",
|
||||
"react-native-reanimated": "^3.3.0",
|
||||
"react-native-reorderable-list": "^0.4.0",
|
||||
"react-native-safe-area-context": "^4.7.1",
|
||||
"react-native-screens": "^3.22.1",
|
||||
"react-native-share": "^9.2.3",
|
||||
|
@ -3029,11 +3028,6 @@
|
|||
"react-native-screens": ">= 3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@seznam/compose-react-refs": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz",
|
||||
"integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q=="
|
||||
},
|
||||
"node_modules/@sideway/address": {
|
||||
"version": "4.1.4",
|
||||
"license": "BSD-3-Clause",
|
||||
|
@ -6190,11 +6184,6 @@
|
|||
"version": "2.0.6",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-memoize": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
|
||||
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
|
||||
},
|
||||
"node_modules/fast-xml-parser": {
|
||||
"version": "4.2.5",
|
||||
"funding": [
|
||||
|
@ -9936,20 +9925,6 @@
|
|||
"version": "2.0.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-native-reorderable-list": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-reorderable-list/-/react-native-reorderable-list-0.4.0.tgz",
|
||||
"integrity": "sha512-XC0BpYFNZcTgfO6xAHvB2KefdiFZEp1WOFjZRR9Du9YX5NQtZg4DUKjtXWNgwnoB9SCQh04sOWxRf3rnAXpDww==",
|
||||
"dependencies": {
|
||||
"@seznam/compose-react-refs": "^1.0.6",
|
||||
"fast-memoize": "^2.5.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react-native": ">=0.62.0",
|
||||
"react-native-gesture-handler": ">=1.10.0",
|
||||
"react-native-reanimated": ">=2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-safe-area-context": {
|
||||
"version": "4.7.1",
|
||||
"license": "MIT",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "massive",
|
||||
"version": "2.4",
|
||||
"version": "2.5",
|
||||
"private": true,
|
||||
"license": "GPL-3.0-only",
|
||||
"scripts": {
|
||||
|
@ -42,7 +42,6 @@
|
|||
"react-native-paper": "^5.9.1",
|
||||
"react-native-permissions": "^3.10.1",
|
||||
"react-native-reanimated": "^3.3.0",
|
||||
"react-native-reorderable-list": "^0.4.0",
|
||||
"react-native-safe-area-context": "^4.7.1",
|
||||
"react-native-screens": "^3.22.1",
|
||||
"react-native-share": "^9.2.3",
|
||||
|
|
Loading…
Reference in New Issue
Block a user