Removing Virtuoso which gave more troubles than benefits and starting to use IonCards in the tracks browser (#16).
This commit is contained in:
parent
cb1c38a9fb
commit
0a11ccbdb4
|
@ -54,7 +54,6 @@
|
|||
"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",
|
||||
|
@ -4864,25 +4863,6 @@
|
|||
"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",
|
||||
|
@ -15925,22 +15905,6 @@
|
|||
"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",
|
||||
|
@ -23214,19 +23178,6 @@
|
|||
"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",
|
||||
|
@ -31246,15 +31197,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"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,7 +49,6 @@
|
|||
"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",
|
||||
|
|
|
@ -2,6 +2,7 @@ import {
|
|||
IonButton,
|
||||
IonButtons,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardTitle,
|
||||
IonContent,
|
||||
|
@ -9,12 +10,12 @@ import {
|
|||
IonItem,
|
||||
IonList,
|
||||
IonModal,
|
||||
IonSpinner,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { trash } from 'ionicons/icons';
|
||||
import React, { Fragment, useRef } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
import React, { Fragment, Suspense, useRef } from 'react';
|
||||
import { useFind, useDB } from 'react-pouchdb';
|
||||
import { deleteGps } from '../../db/gpx';
|
||||
import { enterAnimation, leaveAnimation } from '../../lib/animation';
|
||||
|
@ -57,32 +58,32 @@ const TrackBrowser: React.FC<{}> = () => {
|
|||
</IonButtons>
|
||||
</IonToolbar>
|
||||
<IonContent>
|
||||
<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>
|
||||
{gpxes.map((gpx: any) => (
|
||||
<IonCard key={gpx._id}>
|
||||
<IonCardHeader>
|
||||
<IonItem>
|
||||
<IonCardTitle>{gpx.gpx.metadata.name}</IonCardTitle>
|
||||
<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>
|
||||
<IonCardContent>
|
||||
<IonList>
|
||||
<IonItem>{gpx.gpx.metadata.time}</IonItem>
|
||||
<IonItem>{gpx.gpx.metadata.desc}</IonItem>
|
||||
</IonList>
|
||||
</IonCardContent>
|
||||
</IonCardHeader>
|
||||
</IonCard>
|
||||
))}
|
||||
</IonContent>
|
||||
</IonModal>
|
||||
</Fragment>
|
||||
|
|
Loading…
Reference in New Issue