Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 13:02:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI fixes

Browse Source
This commit is contained in:
estifanos
2026-08-11 12:24:03 +00:00
parent b2f99200e7
commit 4a68bdf169
1 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
libs/ui/src/lib/input/AmharicDatePicker.tsx
View File

@@ -6,7 +6,10 @@ import {
Group,
MantineSize,
Popover,
SegmentedControl,
Select,
Stack,
Text,
TextInput,
} from '@mantine/core';
import { TimeInput } from '@mantine/dates';
@@ -375,15 +378,21 @@ export function AmharicDatePicker({
formatWireValue(mergeDateTime(selected, undefined, { hours: h24, minutes: m }), dateFormat, true),
);
return (
<Group grow mt="sm">
<Select
label={t('common.time')}
<Stack gap={4} mt="sm">
<Text size="sm" fw={500}>
{t('common.time')}
</Text>
{/* Full-width 4-way toggle reads better than a dropdown for 4
short Amharic words, and doesn't get squeezed by the
calendar's fixed (auto) popover width the way three
side-by-side Selects did. */}
<SegmentedControl
fullWidth
size="xs"
disabled={!selected}
value={period}
data={ETH_PERIODS.map((p) => ({ value: p.value, label: p.label }))}
allowDeselect={false}
onChange={(next) => {
if (!next) return;
// Keep the same slot index within the new period so the
// hour never lands outside its 6-hour range.
const slot = Math.max(periodHours.indexOf(hour), 0);
@@ -391,32 +400,39 @@ export function AmharicDatePicker({
setTime(fromEthTime(next as EthPeriod, nextHours[slot]), minute);
}}
/>
<Select
label=" "
disabled={!selected}
value={String(hour)}
data={periodHours.map((h) => ({ value: String(h), label: String(h) }))}
allowDeselect={false}
onChange={(next) => {
if (!next) return;
setTime(fromEthTime(period, Number(next)), minute);
}}
/>
<Select
label=" "
disabled={!selected}
value={String(minute).padStart(2, '0')}
data={Array.from({ length: 60 }, (_, m) => ({
value: String(m).padStart(2, '0'),
label: String(m).padStart(2, '0'),
}))}
allowDeselect={false}
onChange={(next) => {
if (next == null) return;
setTime(fromEthTime(period, hour), Number(next));
}}
/>
</Group>
<Group gap={4} justify="center" wrap="nowrap">
<Select
disabled={!selected}
value={String(hour)}
data={periodHours.map((h) => ({ value: String(h), label: String(h) }))}
allowDeselect={false}
w={72}
comboboxProps={{ withinPortal: true }}
onChange={(next) => {
if (!next) return;
setTime(fromEthTime(period, Number(next)), minute);
}}
/>
<Text size="sm" c="dimmed">
:
</Text>
<Select
disabled={!selected}
value={String(minute).padStart(2, '0')}
data={Array.from({ length: 60 }, (_, m) => ({
value: String(m).padStart(2, '0'),
label: String(m).padStart(2, '0'),
}))}
allowDeselect={false}
w={72}
comboboxProps={{ withinPortal: true }}
onChange={(next) => {
if (next == null) return;
setTime(fromEthTime(period, hour), Number(next));
}}
/>
</Group>
</Stack>
);
})()}