@selfcommunity/react-ui/lib/esm/components/Composer/Layer/LocationLayer/LocationLayer.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Box, Button, DialogTitle, IconButton, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import Icon from '@mui/material/Icon';
import LocationAutocomplete from '../../../LocationAutocomplete';
import DialogContent from '@mui/material/DialogContent';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
const classes = {
    root: `${PREFIX}-layer-location-root`,
    title: `${PREFIX}-layer-title`,
    content: `${PREFIX}-layer-content`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'LayerLocationRoot'
})(() => ({}));
const LocationLayer = React.forwardRef((props, ref) => {
    // Props
    const { className, onClose, onSave, defaultValue = null } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
    // STATE
    const [value, setValue] = useState(defaultValue);
    // HANDLERS
    const handleSave = useCallback(() => onSave(value), [value, onSave]);
    const handleChange = useCallback((location) => setValue(location), []);
    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsx(DialogContent, Object.assign({ className: classes.content }, { children: _jsx(LocationAutocomplete, { onChange: handleChange, defaultValue: value ? value : '' }) }))] }));
});
export default LocationLayer;