MuDBase/client/src/components/querybuilder/QBQueryPlaceholder.tsx

import React from 'react';
import { Chip } from '@material-ui/core';
import { QBQueryElemMenu } from './QBQueryElemMenu';
import { QueryElem } from '../../lib/query/Query';

export interface IProps {
    onReplace: (q: QueryElem) => void,
}

export function QBQueryPlaceholder(props: IProps) {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

    const onOpen = (event: any) => {
        setAnchorEl(event.currentTarget);
    };
    const onClose = () => {
        setAnchorEl(null);
    };
    const onCreate = (q: QueryElem) => {
        props.onReplace(q);
    };

    return <>
        <Chip
            variant="outlined"
            label=""
            style={{ width: "50px" }}
            clickable={true}
            onClick={onOpen}
            component="div"
        />
        <QBQueryElemMenu
            anchorEl={anchorEl}
            onClose={onClose}
            onCreateQuery={onCreate}
        />
    </>
}