|  |  |  | 
|---|
|  |  |  | import * as React from 'react'; | 
|---|
|  |  |  | import  { useState, useRef, useEffect, useMemo, useCallback } from 'react'; | 
|---|
|  |  |  | import { Stack, Chip, Dialog, DialogTitle, DialogContent, IconButton, CircularProgress } from '@mui/material'; | 
|---|
|  |  |  | import { useTranslate, useRecordContext } from 'react-admin'; | 
|---|
|  |  |  | import CloseIcon from '@mui/icons-material/Close'; | 
|---|
|  |  |  | 
|---|
|  |  |  | const CrossZoneAreaField = () => { | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const record = useRecordContext(); | 
|---|
|  |  |  | const [open, setOpen] = React.useState(false); | 
|---|
|  |  |  | const [areaNames, setAreaNames] = React.useState([]); | 
|---|
|  |  |  | const [loading, setLoading] = React.useState(false); | 
|---|
|  |  |  | const [open, setOpen] = useState(false); | 
|---|
|  |  |  | const [areaNames, setAreaNames] = useState([]); | 
|---|
|  |  |  | const [loading, setLoading] = useState(false); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleOpen = () => { | 
|---|
|  |  |  | setOpen(true); | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | React.useEffect(() => { | 
|---|
|  |  |  | if (record?.areaIds && record.areaIds.length > 0) { | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | if (record?.areaIds && record.areaIds.length !== 0  && record.areaIds.length > 0) { | 
|---|
|  |  |  | fetchAreaNames(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, [record]); | 
|---|
|  |  |  | }, [record]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (loading) { | 
|---|
|  |  |  | return <CircularProgress size={20} />; | 
|---|