Using Virtuoso (for scrolling) and IonCards to start improving the track browser (#16)
This commit is contained in:
parent
52b03d8331
commit
cb1c38a9fb
|
|
@ -54,6 +54,7 @@
|
|||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.0",
|
||||
"react-virtuoso": "^2.19.1",
|
||||
"status": "^0.0.13",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"typescript": "^4.8.3",
|
||||
|
|
@ -4863,6 +4864,25 @@
|
|||
"url": "https://opencollective.com/typescript-eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@virtuoso.dev/react-urx": {
|
||||
"version": "0.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
|
||||
"integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
|
||||
"dependencies": {
|
||||
"@virtuoso.dev/urx": "^0.2.13"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@virtuoso.dev/urx": {
|
||||
"version": "0.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
|
||||
"integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
|
||||
},
|
||||
"node_modules/@webassemblyjs/ast": {
|
||||
"version": "1.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
|
||||
|
|
@ -15905,6 +15925,22 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/react-virtuoso": {
|
||||
"version": "2.19.1",
|
||||
"resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.1.tgz",
|
||||
"integrity": "sha512-zF6MAwujNGy2nJWCx/Df92ay/RnV2Kj4glUZfdyadI4suAn0kAZHB1BeI7yPFVp2iSccLzFlszhakWyr+fJ4Dw==",
|
||||
"dependencies": {
|
||||
"@virtuoso.dev/react-urx": "^0.2.12",
|
||||
"@virtuoso.dev/urx": "^0.2.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16 || >=17 || >= 18",
|
||||
"react-dom": ">=16 || >=17 || >= 18"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
@ -23178,6 +23214,19 @@
|
|||
"eslint-visitor-keys": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@virtuoso.dev/react-urx": {
|
||||
"version": "0.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
|
||||
"integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
|
||||
"requires": {
|
||||
"@virtuoso.dev/urx": "^0.2.13"
|
||||
}
|
||||
},
|
||||
"@virtuoso.dev/urx": {
|
||||
"version": "0.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
|
||||
"integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
|
||||
},
|
||||
"@webassemblyjs/ast": {
|
||||
"version": "1.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
|
||||
|
|
@ -31197,6 +31246,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-virtuoso": {
|
||||
"version": "2.19.1",
|
||||
"resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.1.tgz",
|
||||
"integrity": "sha512-zF6MAwujNGy2nJWCx/Df92ay/RnV2Kj4glUZfdyadI4suAn0kAZHB1BeI7yPFVp2iSccLzFlszhakWyr+fJ4Dw==",
|
||||
"requires": {
|
||||
"@virtuoso.dev/react-urx": "^0.2.12",
|
||||
"@virtuoso.dev/urx": "^0.2.12"
|
||||
}
|
||||
},
|
||||
"read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.0",
|
||||
"react-virtuoso": "^2.19.1",
|
||||
"status": "^0.0.13",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"typescript": "^4.8.3",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCard,
|
||||
IonCardHeader,
|
||||
IonCardTitle,
|
||||
IonContent,
|
||||
IonIcon,
|
||||
IonItem,
|
||||
|
|
@ -11,6 +14,7 @@ import {
|
|||
} from '@ionic/react';
|
||||
import { trash } from 'ionicons/icons';
|
||||
import React, { Fragment, useRef } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
import { useFind, useDB } from 'react-pouchdb';
|
||||
import { deleteGps } from '../../db/gpx';
|
||||
import { enterAnimation, leaveAnimation } from '../../lib/animation';
|
||||
|
|
@ -53,26 +57,32 @@ const TrackBrowser: React.FC<{}> = () => {
|
|||
</IonButtons>
|
||||
</IonToolbar>
|
||||
<IonContent>
|
||||
<IonList>
|
||||
{gpxes.map((gpx: any) => {
|
||||
return (
|
||||
<IonItem key={gpx._id}>
|
||||
<span>{gpx.gpx.metadata.time}</span>
|
||||
<IonButtons slot='end'>
|
||||
<GpxExport gpx={gpx} />
|
||||
<IonButton
|
||||
onClick={() => {
|
||||
deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
|
||||
}}
|
||||
color='danger'
|
||||
>
|
||||
<IonIcon slot='icon-only' icon={trash} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonItem>
|
||||
);
|
||||
})}
|
||||
</IonList>
|
||||
<Virtuoso
|
||||
style={{ height: '100%' }}
|
||||
data={gpxes}
|
||||
itemContent={(_, gpx) => (
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>
|
||||
<IonItem>
|
||||
<span>{gpx.gpx.metadata.time}</span>
|
||||
<IonButtons slot='end'>
|
||||
<GpxExport gpx={gpx} />
|
||||
<IonButton
|
||||
onClick={() => {
|
||||
deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
|
||||
}}
|
||||
color='danger'
|
||||
>
|
||||
<IonIcon slot='icon-only' icon={trash} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonItem>
|
||||
</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
</IonCard>
|
||||
)}
|
||||
></Virtuoso>
|
||||
</IonContent>
|
||||
</IonModal>
|
||||
</Fragment>
|
||||
|
|
|
|||
Loading…
Reference in New Issue