mirror of
https://github.com/bulwarkmail/native.git
synced 2026-11-01 00:07:01 +00:00
fix: lay the global search sheet out from the top
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
// The global search sheet put its type chips mid-screen, with empty bands
|
||||
// above and below, and started the results at about 60% of the height: the
|
||||
// chips' horizontal ScrollView grew like flex: 1 in the sheet's column.
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
|
||||
const src = fs.readFileSync(path.resolve(__dirname, '../search/GlobalSearchSheet.tsx'), 'utf8');
|
||||
|
||||
function styleBody(name: string): string {
|
||||
const m = new RegExp(`\\n\\s+${name}: \\{([^}]*)\\}`).exec(src);
|
||||
expect(m, `style ${name}`).not.toBeNull();
|
||||
return m![1];
|
||||
}
|
||||
|
||||
describe('global search sheet layout', () => {
|
||||
it('keeps the chip row to its own height', () => {
|
||||
const scroll = /<ScrollView\s+horizontal([\s\S]*?)>/.exec(src);
|
||||
expect(scroll).not.toBeNull();
|
||||
const style = /\sstyle=\{styles\.(\w+)\}/.exec(scroll![1]);
|
||||
expect(style, 'the horizontal ScrollView needs its own style').not.toBeNull();
|
||||
const body = styleBody(style![1]);
|
||||
expect(body).toMatch(/flexGrow: 0/);
|
||||
expect(body).toMatch(/flexShrink: 0/);
|
||||
});
|
||||
|
||||
it('gives the rest of the sheet to the results', () => {
|
||||
expect(styleBody('results')).toMatch(/flex: 1/);
|
||||
});
|
||||
});
|
||||
@@ -245,7 +245,16 @@ export function GlobalSearchSheet({ visible, initialQuery = '', onClose, navigat
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.chips} keyboardShouldPersistTaps="handled">
|
||||
{/* Its own height only: a horizontal ScrollView grows like flex: 1
|
||||
in a column, which put the chips mid-screen with empty bands
|
||||
above and below and pushed the results down. */}
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.chipsScroll}
|
||||
contentContainerStyle={styles.chips}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{scopes.map((s) => chip(s.key, s.label, scope === s.key, () => setScope(s.key)))}
|
||||
{accounts.length > 1 ? (
|
||||
<>
|
||||
@@ -309,6 +318,7 @@ function makeStyles(c: ThemePalette) {
|
||||
borderWidth: 1, borderColor: c.border,
|
||||
},
|
||||
input: { flex: 1, ...typography.body, color: c.text, paddingVertical: spacing.sm },
|
||||
chipsScroll: { flexGrow: 0, flexShrink: 0 },
|
||||
chips: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs, paddingHorizontal: spacing.md, paddingVertical: spacing.sm },
|
||||
chip: {
|
||||
paddingHorizontal: spacing.md, paddingVertical: 6, borderRadius: radius.full,
|
||||
|
||||
Reference in New Issue
Block a user