Add maxDepth prop to LocationPicker and update AddressFormContent to limit cascading levels

This commit is contained in:
estifanos
2026-08-08 09:09:08 +00:00
parent 78e37bb90f
commit 02681fe9be
2 changed files with 8 additions and 5 deletions

View File

@@ -10,9 +10,11 @@ interface LocationPickerProps {
onChange?: (locationId: string | null) => void;
onChainChange?: (chain: Location[]) => void;
required?: boolean;
/** Caps how many cascading levels render (e.g. 3 = City / Sub-city / Woreda only). */
maxDepth?: number;
}
export function LocationPicker({ value, onChange, onChainChange, required }: LocationPickerProps) {
export function LocationPicker({ value, onChange, onChainChange, required, maxDepth }: LocationPickerProps) {
const { t } = useTranslation();
const { data: typesRes, isLoading: typesLoading, isError: typesError, refetch: refetchTypes } = useGetLocationTypesQuery();
const { data: locsRes, isLoading: locsLoading, isError: locsError, refetch: refetchLocs } = useGetLocationsQuery({ take: 10000 });
@@ -187,9 +189,9 @@ export function LocationPicker({ value, onChange, onChainChange, required }: Loc
// name — an unnamed/unmapped type (e.g. a stray Kebele row) would otherwise
// render as a dead-end "Sub-location" picker whose selection is silently
// dropped (AddressFormContent only maps Region/City/SubCity/Woreda).
const totalRenderedLevels = Math.max(
1,
selectedChain.length + (currentLevelChildren.length > 0 && levelLabel ? 1 : 0),
const totalRenderedLevels = Math.min(
maxDepth ?? Infinity,
Math.max(1, selectedChain.length + (currentLevelChildren.length > 0 && levelLabel ? 1 : 0)),
);
const levels = Array.from({ length: totalRenderedLevels }, (_, i) => i);

View File

@@ -164,7 +164,8 @@ export function AddressFormContent({
<Text fw={600} fz="sm" tt="uppercase" c="gray.6" mt="lg" mb="sm">
Address
</Text>
<LocationPicker value={leafId} onChainChange={handleChainChange} />
{/* City / Sub-city / Woreda only — no Kebele level, kebeleId mirrors woredaId. */}
<LocationPicker value={leafId} onChainChange={handleChainChange} maxDepth={3} />
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" mt="md">
<TextInput
label="Street Address"