export function ExpressionModalEditor()

in karavan-vscode/webview/expression/ExpressionModalEditor.tsx [39:108]
58 lines of code
3 McCabe index (conditional complexity)

export function ExpressionModalEditor(props: Props) {

    const [customCode, setCustomCode] = useState<string | undefined>();
    const [showVariables, setShowVariables] = useState<boolean>(true);
    const [key, setKey] = useState<string>('');

    useEffect(() => {
        setCustomCode(props.customCode)
    },[]);

    function close(){
        props.onClose();
    }

    function closeAndSave(){
        props.onSave(props.name, customCode);
    }

    const {dark, dslLanguage, title, showEditor} = props;
    const language = dslLanguage?.[0];
    const showVars = ExpressionVariables.findIndex(e => e.name === language) > - 1;
    const showFuncs = ExpressionFunctions.findIndex(e => e.name === language) > - 1;
    const show = showVars || showFuncs;

    return (
        <Modal
            aria-label="Expression"
            className='expression-modal'
            width={"80%"}
            header={<React.Fragment>
                <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
                    {title}
                </Title>
                <p className="pf-v5-u-pt-sm">{dslLanguage?.[2]}</p>
            </React.Fragment>}
            isOpen={showEditor}
            onClose={() => close()}
            actions={[
                <Button key="save" variant="primary" size="sm"
                        onClick={e => closeAndSave()}>Save</Button>,
                <Button key="cancel" variant="secondary" size="sm"
                        onClick={e => close()}>Close</Button>
            ]}
            onEscapePress={e => close()}>
            <div className='container'>
                <div className='panel-top'>
                    <Editor
                        key={key}
                        height={"100%"}
                        width="100%"
                        defaultLanguage={'java'}
                        language={'java'}
                        theme={dark ? 'vs-dark' : 'light'}
                        options={{
                            lineNumbers: "off",
                            folding: false,
                            lineNumbersMinChars: 10,
                            showUnused: false,
                            fontSize: 12,
                            minimap: {enabled: false}
                        }}
                        value={customCode?.toString()}
                        className={'code-editor'}
                        onChange={(value, _) => setCustomCode(value)}
                    />
                </div>
                <Button style={{padding:"0"}} variant="link" icon={showVariables ? <ArrowDown/> : <ArrowUp/>} onClick={e => {
                    setShowVariables(!showVariables);
                    setKey(Math.random().toString());
                    }}