Skip to content

Commit

Permalink
Update example app
Browse files Browse the repository at this point in the history
  • Loading branch information
@Temzasse
Temzasse committed Dec 26, 2024
1 parent 3031ff4 commit 2e5d366
Show file tree
Hide file tree
Showing 18 changed files with 650 additions and 444 deletions.
191 changes: 98 additions & 93 deletions example/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
AiOutlineControl as SnapIcon,
} from 'react-icons/ai';

import { Screen, DarkMode } from './common';
import { Screen, DarkMode, ScrollView } from './common';
import { SnapPoints } from './SnapPoints';
import { Scrollable } from './Scrollable';
import { AppleMusic } from './apple-music';
Expand All @@ -28,90 +28,92 @@ import { AvoidKeyboard } from './AvoidKeyboard';

export function App() {
return (
<Routes>
<Route
path="/"
element={
<Screen bg="light">
<ExampleSelector />
</Screen>
}
/>
<Route
path="snap-points/*"
element={
<Screen bg="light">
<SnapPoints />
</Screen>
}
/>
<Route
path="scrollable-snap-points/*"
element={
<Screen bg="light">
<ScrollableSnapPoints />
</Screen>
}
/>
<Route
path="scrollable/*"
element={
<Screen bg="light">
<Scrollable />
</Screen>
}
/>
<Route
path="avoid-keyboard/*"
element={
<Screen bg="light">
<AvoidKeyboard />
</Screen>
}
/>
<Route
path="content-height/*"
element={
<Screen bg="light">
<ContentHeight />
</Screen>
}
/>
<Route
path="apple-music/*"
element={
<Screen bg="light">
<AppleMusic />
<DarkMode />
</Screen>
}
/>
<Route
path="slack-message/*"
element={
<Screen bg="light">
<SlackMessage />
<DarkMode />
</Screen>
}
/>
<Route
path="a11y/*"
element={
<Screen bg="light">
<A11y />
</Screen>
}
/>
<Route
path="disable-drag/*"
element={
<Screen bg="light">
<DisableDrag />
</Screen>
}
/>
</Routes>
<ScrollView>
<Routes>
<Route
path="/"
element={
<Screen bg="light">
<ExampleSelector />
</Screen>
}
/>
<Route
path="snap-points/*"
element={
<Screen bg="light">
<SnapPoints />
</Screen>
}
/>
<Route
path="scrollable-snap-points/*"
element={
<Screen bg="light">
<ScrollableSnapPoints />
</Screen>
}
/>
<Route
path="scrollable/*"
element={
<Screen bg="light">
<Scrollable />
</Screen>
}
/>
<Route
path="avoid-keyboard/*"
element={
<Screen bg="light">
<AvoidKeyboard />
</Screen>
}
/>
<Route
path="content-height/*"
element={
<Screen bg="light">
<ContentHeight />
</Screen>
}
/>
<Route
path="apple-music/*"
element={
<Screen bg="light">
<AppleMusic />
<DarkMode />
</Screen>
}
/>
<Route
path="slack-message/*"
element={
<Screen bg="light">
<SlackMessage />
<DarkMode />
</Screen>
}
/>
<Route
path="a11y/*"
element={
<Screen bg="light">
<A11y />
</Screen>
}
/>
<Route
path="disable-drag/*"
element={
<Screen bg="light">
<DisableDrag />
</Screen>
}
/>
</Routes>
</ScrollView>
);
}

Expand Down Expand Up @@ -191,6 +193,7 @@ const ExampleLinks = styled.ul`
grid-template-rows: auto;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 16px;
`;

Expand All @@ -199,19 +202,21 @@ const ExampleLink = styled(Link)`
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 32px 48px;
text-align: center;
background-color: aliceblue;
color: mediumslateblue;
border: 1px solid mediumslateblue;
border-radius: 12px;
background-color: #f5f5f5;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
transition: background-color 0.2s;
&:hover {
background-color: #eee;
}
span {
font-weight: 500;
font-size: 18px;
}
& > * + * {
margin-top: 16px;
}
`;
81 changes: 33 additions & 48 deletions example/components/AvoidKeyboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,52 @@
import { styled } from 'styled-components';
import { useState, useRef } from 'react';
import { useRef } from 'react';
import { Sheet, type SheetRef } from 'react-modal-sheet';

import { Button } from './common';
import { useAnimatedVirtualKeyboard } from './hooks';
import { ExampleLayout } from './ExampleLayout';

export function AvoidKeyboard() {
const [isOpen, setOpen] = useState(false);
const sheetRef = useRef<SheetRef>();
const inputRef = useRef<HTMLInputElement>(null);

const { keyboardHeight, isKeyboardOpen } = useAnimatedVirtualKeyboard();

const open = () => setOpen(true);
const close = () => setOpen(false);

return (
<>
<Button onClick={open}>Avoid Keyboard</Button>

<NoteText>
Note that keyboard avoidance only works on mobile devices!
</NoteText>

<Sheet
ref={sheetRef}
isOpen={isOpen}
onClose={close}
detent="content-height"
>
<Sheet.Container>
<Sheet.Header />

<Sheet.Content style={{ paddingBottom: keyboardHeight }}>
<Sheet.Scroller>
<Content>
<p>Focus input to show virtual keyboard</p>
<ExampleLayout
title="Avoid keyboard"
description="Note that keyboard avoidance only works on mobile devices!"
>
{({ isOpen, close }) => (
<Sheet
ref={sheetRef}
isOpen={isOpen}
onClose={close}
detent="content-height"
>
<Sheet.Container>
<Sheet.Header />
<Sheet.Content style={{ paddingBottom: keyboardHeight }}>
<Sheet.Scroller>
<Content>
<p>Focus input to show virtual keyboard</p>

<Input ref={inputRef} />
<Input ref={inputRef} />

{isKeyboardOpen ? (
<strong>Virtual keyboard is open!</strong>
) : (
<Button onClick={close}>Close</Button>
)}
</Content>
</Sheet.Scroller>
</Sheet.Content>
</Sheet.Container>

<Sheet.Backdrop />
</Sheet>
</>
{isKeyboardOpen ? (
<strong>Virtual keyboard is open!</strong>
) : (
<Button onPress={close}>Close</Button>
)}
</Content>
</Sheet.Scroller>
</Sheet.Content>
</Sheet.Container>
<Sheet.Backdrop />
</Sheet>
)}
</ExampleLayout>
);
}

const NoteText = styled.strong`
text-align: center;
padding: 32px;
line-height: 1.5;
font-size: 14px;
`;

const Content = styled.div`
display: flex;
flex-direction: column;
Expand Down
Loading

0 comments on commit 2e5d366

Please sign in to comment.