@selfcommunity/react-ui/lib/esm/shared/Media/Link/LayerComponent.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 DialogContent from '@mui/material/DialogContent';
import classNames from 'classnames';
import { PREFIX } from './constants';
import PreviewComponent from './PreviewComponent';
import UrlTextField from './UrlTextField';
const classes = {
    layerRoot: `${PREFIX}-layer-root`,
    title: `${PREFIX}-layer-title`,
    content: `${PREFIX}-layer-content`,
    media: `${PREFIX}-media`,
    delete: `${PREFIX}-delete`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'LayerRoot'
})(() => ({}));
const LayerComponent = React.forwardRef((props, ref) => {
    // PROPS
    const { className, onClose, onSave, defaultValue = [] } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
    // STATE
    const [value, setValue] = useState(defaultValue);
    // HANDLERS
    const handleSave = useCallback(() => onSave(value), [value]);
    const handleAdd = useCallback((media) => setValue([...value, media]), [value]);
    const handleChange = useCallback((medias) => setValue(medias), []);
    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, 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.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.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" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(UrlTextField, { id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), _jsx(PreviewComponent, { onChange: handleChange, value: value })] }))] }));
});
export default LayerComponent;