121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
import Button from "@material-ui/core/Button";
|
|
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
|
|
import Grow from "@material-ui/core/Grow";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import Paper from "@material-ui/core/Paper";
|
|
import Popper from "@material-ui/core/Popper";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import DeleteIcon from "@material-ui/icons/Delete";
|
|
import { buttonMessages } from "@saleor/intl";
|
|
import { ContentState } from "draft-js";
|
|
import React from "react";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
import Link from "../Link";
|
|
|
|
interface LinkEntityProps {
|
|
children: React.ReactNode;
|
|
contentState: ContentState;
|
|
entityKey: string;
|
|
onEdit: (entityKey: string) => void;
|
|
onRemove: (entityKey: string) => void;
|
|
}
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
anchor: {
|
|
display: "inline-block"
|
|
},
|
|
container: {
|
|
alignItems: "center",
|
|
display: "flex"
|
|
},
|
|
inline: {
|
|
display: "inline-block"
|
|
},
|
|
popover: {
|
|
zIndex: 1
|
|
},
|
|
root: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
minHeight: 72,
|
|
padding: theme.spacing(1.5, 1.5, 1.5, 3)
|
|
},
|
|
separator: {
|
|
backgroundColor: theme.palette.grey[300],
|
|
display: "inline-block",
|
|
height: 30,
|
|
marginLeft: theme.spacing(2),
|
|
marginRight: theme.spacing(),
|
|
width: 1
|
|
}
|
|
}),
|
|
{ name: "LinkEntity" }
|
|
);
|
|
|
|
const LinkEntity: React.FC<LinkEntityProps> = props => {
|
|
const { children, contentState, entityKey, onEdit, onRemove } = props;
|
|
const classes = useStyles(props);
|
|
|
|
const [isOpened, setOpenStatus] = React.useState(false);
|
|
const anchor = React.useRef<HTMLDivElement>();
|
|
|
|
const disable = () => setOpenStatus(false);
|
|
const toggle = () => setOpenStatus(!isOpened);
|
|
|
|
return (
|
|
<>
|
|
<div className={classes.anchor} ref={anchor}>
|
|
<Popper
|
|
className={classes.popover}
|
|
open={isOpened}
|
|
anchorEl={anchor.current}
|
|
transition
|
|
disablePortal
|
|
placement="bottom"
|
|
>
|
|
{({ TransitionProps, placement }) => (
|
|
<Grow
|
|
{...TransitionProps}
|
|
style={{
|
|
transformOrigin: placement
|
|
}}
|
|
>
|
|
<Paper className={classes.root}>
|
|
<ClickAwayListener onClickAway={disable} mouseEvent="onClick">
|
|
<div className={classes.container}>
|
|
<Typography className={classes.inline} variant="body1">
|
|
{contentState.getEntity(entityKey).getData().url}
|
|
</Typography>
|
|
<span className={classes.separator} />
|
|
<Button
|
|
onClick={() => {
|
|
disable();
|
|
onEdit(entityKey);
|
|
}}
|
|
color="primary"
|
|
>
|
|
<FormattedMessage {...buttonMessages.edit} />
|
|
</Button>
|
|
<IconButton onClick={() => onRemove(entityKey)}>
|
|
<DeleteIcon color="primary" />
|
|
</IconButton>
|
|
</div>
|
|
</ClickAwayListener>
|
|
</Paper>
|
|
</Grow>
|
|
)}
|
|
</Popper>
|
|
</div>
|
|
<Link
|
|
href={contentState.getEntity(entityKey).getData().url}
|
|
onClick={toggle}
|
|
>
|
|
{children}
|
|
</Link>
|
|
</>
|
|
);
|
|
};
|
|
export default LinkEntity;
|