This commit is contained in:
2022-12-31 14:08:39 -08:00
parent c24e001d52
commit fb4d7f3d21
2 changed files with 23 additions and 21 deletions

View File

@@ -12,12 +12,12 @@ export interface Props {
} }
interface TouchStart { interface TouchStart {
x: number; x: number;
y: number; y: number;
} }
export interface State { export interface State {
touchStart?: TouchStart | null; touchStart?: TouchStart | null;
} }
export class BigPicture extends React.PureComponent<Props, State> { export class BigPicture extends React.PureComponent<Props, State> {
@@ -85,24 +85,24 @@ export class BigPicture extends React.PureComponent<Props, State> {
}; };
private _onTouchStart = (e: React.TouchEvent) => { private _onTouchStart = (e: React.TouchEvent) => {
const touch = e.touches[0]; const touch = e.touches[0];
this.setState({ touchStart: { x: touch.screenX, y: touch.screenY }}); this.setState({ touchStart: { x: touch.screenX, y: touch.screenY } });
} };
private _onTouchEnd = (e: React.TouchEvent) => { private _onTouchEnd = (e: React.TouchEvent) => {
const touch = e.changedTouches[0]; const touch = e.changedTouches[0];
const touchStart = this.state.touchStart as TouchStart; const touchStart = this.state.touchStart as TouchStart;
const dx = touch.screenX - touchStart.x; const dx = touch.screenX - touchStart.x;
if (Math.abs(dx) / window.innerWidth > 0.05) { if (Math.abs(dx) / window.innerWidth > 0.05) {
if (dx < 0) { if (dx < 0) {
this.props.showNext(); this.props.showNext();
} else { } else {
this.props.showPrevious(); this.props.showPrevious();
}
} }
}
this.setState({ touchStart: null }); this.setState({ touchStart: null });
} };
} }

View File

@@ -192,18 +192,20 @@ export class Root extends React.PureComponent<Props, State> {
}; };
private _showNextBigPicture = () => { private _showNextBigPicture = () => {
const images: Model.Image[] = this.state.selectedSet?.images as Model.Image[]; const images: Model.Image[] = this.state.selectedSet
?.images as Model.Image[];
const current = images.indexOf(this.state.selectedImage as Model.Image); const current = images.indexOf(this.state.selectedImage as Model.Image);
const next = current + 1 >= images.length ? 0 : current + 1; const next = current + 1 >= images.length ? 0 : current + 1;
this._onImageSelected(images[next]); this._onImageSelected(images[next]);
} };
private _showPreviousBigPicture = () => { private _showPreviousBigPicture = () => {
const images: Model.Image[] = this.state.selectedSet?.images as Model.Image[]; const images: Model.Image[] = this.state.selectedSet
?.images as Model.Image[];
const current = images.indexOf(this.state.selectedImage as Model.Image); const current = images.indexOf(this.state.selectedImage as Model.Image);
const previous = current - 1 < 0 ? images.length - 1 : current - 1; const previous = current - 1 < 0 ? images.length - 1 : current - 1;
this._onImageSelected(images[previous]); this._onImageSelected(images[previous]);
} };
private _setGridHeight = (grid: number) => (height: number) => { private _setGridHeight = (grid: number) => (height: number) => {
if (this.state.gridHeights[grid] === height) { if (this.state.gridHeights[grid] === height) {