-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(images): add zoomable imager viewer
- replace images in sections with thumbnails
- Loading branch information
1 parent
405e1db
commit fe663c4
Showing
5 changed files
with
229 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { | ||
| IonButton, | ||
| IonButtons, | ||
| IonContent, | ||
| IonHeader, | ||
| IonIcon, | ||
| IonModal, | ||
| IonSlide, | ||
| IonSlides, | ||
| IonToolbar, | ||
| } from '@ionic/react'; | ||
| import { close } from 'ionicons/icons'; | ||
| import React, { | ||
| cloneElement, | ||
| ReactElement, | ||
| SyntheticEvent, | ||
| useState, | ||
| } from 'react'; | ||
| import './imageViewer.css'; | ||
|
|
||
| type ContainerProps = { | ||
| alt: string; | ||
| class?: string; | ||
| children?: ReactElement; | ||
| className?: string; | ||
| onError?: | ||
| | ((event: SyntheticEvent<HTMLImageElement, Event>) => void) | ||
| | undefined; | ||
| src: string; | ||
| open?: boolean; | ||
| }; | ||
|
|
||
| export const ImageViewer: React.FC<ContainerProps> = (props) => { | ||
| const { alt, children, onError = () => {}, open = false, src } = props; | ||
|
|
||
| const [isOpen, setIsOpen] = useState(open); | ||
|
|
||
| const slideOpts = { | ||
| passiveListeners: false, | ||
| zoom: { | ||
| maxRatio: 5, | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <IonModal | ||
| cssClass="image-viewer" | ||
| isOpen={isOpen} | ||
| onDidDismiss={() => setIsOpen(false)} | ||
| swipeToClose | ||
| > | ||
| <IonHeader translucent> | ||
| <IonToolbar> | ||
| <IonButtons slot="end"> | ||
| <IonButton onClick={() => setIsOpen(false)}> | ||
| <IonIcon icon={close}></IonIcon> | ||
| </IonButton> | ||
| </IonButtons> | ||
| </IonToolbar> | ||
| </IonHeader> | ||
| <IonContent fullscreen> | ||
| <IonSlides | ||
| options={slideOpts} | ||
| // Current workaround for strangely behavior of slides | ||
| // see: https://github.com/ionic-team/ionic-framework/issues/19638#issuecomment-593412711 | ||
| onIonSlidesDidLoad={function (this: any) { | ||
| this.update(); | ||
| }} | ||
| > | ||
| <IonSlide> | ||
| <img alt={alt} onError={onError} src={src} /> | ||
| </IonSlide> | ||
| </IonSlides> | ||
| </IonContent> | ||
| </IonModal> | ||
| {cloneElement(children as ReactElement, { | ||
| onClick: () => setIsOpen(true), | ||
| })} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| .image-viewer { | ||
| --border-radius: 0; | ||
| --background: transparent; | ||
| } | ||
|
|
||
| .image-viewer ion-slides { | ||
| height: 100vh; | ||
| } | ||
|
|
||
| .image-viewer ion-slides img { | ||
| height: 100vh; | ||
| } | ||
|
|
||
| .image-viewer ion-toolbar { | ||
| --background: transparent; | ||
| --border-width: 0 !important; | ||
| position: absolute; | ||
| } | ||
|
|
||
| .image-viewer ion-toolbar::after { | ||
| display: none; | ||
| } | ||
|
|
||
| .image-viewer .modal-wrapper { | ||
| display: block; | ||
| height: 100%; | ||
| left: 0; | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { ImageViewer } from './ImageViewer'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.