diff --git a/src/registry/map/edit.tsx b/src/registry/map/edit.tsx index 4ce73b1..11fab45 100644 --- a/src/registry/map/edit.tsx +++ b/src/registry/map/edit.tsx @@ -23,6 +23,7 @@ import { import {LABELS} from '@/components/builder/messages'; import {Checkbox, Select, TabList, TabPanel, Tabs} from '@/components/formio'; import {BuilderContext} from '@/context'; +import InteractionConfiguration from '@/registry/map/interaction-configuration'; import {useErrorChecker} from '@/utils/errors'; import {EditFormDefinition} from '../types'; @@ -65,7 +66,8 @@ const EditForm: EditFormDefinition = () => { 'useConfigDefaultMapSettings', 'defaultZoom', 'initialCenter', - 'tileLayerIdentifier' + 'tileLayerIdentifier', + 'interactions' )} /> @@ -87,6 +89,7 @@ const EditForm: EditFormDefinition = () => { {!values.useConfigDefaultMapSettings && } + {/* Advanced tab */} @@ -139,6 +142,12 @@ EditForm.defaultValues = { lng: undefined, }, tileLayerIdentifier: undefined, + interactions: { + circle: false, + polygon: false, + polyline: false, + marker: true, + }, defaultValue: null, // Advanced tab conditional: { diff --git a/src/registry/map/interaction-configuration.tsx b/src/registry/map/interaction-configuration.tsx new file mode 100644 index 0000000..90abb9e --- /dev/null +++ b/src/registry/map/interaction-configuration.tsx @@ -0,0 +1,101 @@ +import {FormattedMessage, useIntl} from 'react-intl'; + +import {Checkbox, Panel} from '@/components/formio'; + +const CircleInteraction: React.FC = () => { + const intl = useIntl(); + const tooltip = intl.formatMessage({ + description: "Tooltip for 'interactions.circle' builder field", + defaultMessage: 'Allowing users to draw a circle when using the map component', + }); + return ( + + } + tooltip={tooltip} + /> + ); +}; + +const PolygonInteraction: React.FC = () => { + const intl = useIntl(); + const tooltip = intl.formatMessage({ + description: "Tooltip for 'interactions.polygon' builder field", + defaultMessage: 'Allowing users to draw a polygon when using the map component', + }); + return ( + + } + tooltip={tooltip} + /> + ); +}; + +const PolylineInteraction: React.FC = () => { + const intl = useIntl(); + const tooltip = intl.formatMessage({ + description: "Tooltip for 'interactions.polyline' builder field", + defaultMessage: 'Allowing users to draw a line when using the map component', + }); + return ( + + } + tooltip={tooltip} + /> + ); +}; + +const MarkerInteraction: React.FC = () => { + const intl = useIntl(); + const tooltip = intl.formatMessage({ + description: "Tooltip for 'interactions.marker' builder field", + defaultMessage: 'Allowing users to set a marker when using the map component', + }); + return ( + + } + tooltip={tooltip} + /> + ); +}; + +const InteractionConfiguration: React.FC = () => ( + + } + > + + + + + +); + +export default InteractionConfiguration;