fix(plugin-workflow): fix request body variable component (#1703)
* fix(plugin-workflow): fix request body variable component * fix(client): add missed file
This commit is contained in:
Junyi
GitHub
parent
d0171b179f
commit
0450789d63
@ -1,10 +1,10 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Button, Cascader, Popover, Input as AntInput } from 'antd';
|
||||
import React, { useRef } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { css } from "@emotion/css";
|
||||
|
||||
import { Input } from "../input";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { XButton } from './XButton';
|
||||
import { VariableSelect } from './VariableSelect';
|
||||
|
||||
|
||||
|
||||
@ -21,7 +21,6 @@ export function JSONInput(props) {
|
||||
const inputRef = useRef<any>(null);
|
||||
const { value, space = 2, scope } = props;
|
||||
const { t } = useTranslation();
|
||||
const [selectedVar, setSelectedVar] = useState<string[]>([]);
|
||||
const options = typeof scope === 'function' ? scope() : (scope ?? []);
|
||||
|
||||
function onFormat() {
|
||||
@ -72,24 +71,7 @@ export function JSONInput(props) {
|
||||
`}
|
||||
>
|
||||
<Button onClick={onFormat}>{t('Prettify')}</Button>
|
||||
<Popover
|
||||
content={(
|
||||
<AntInput.Group compact>
|
||||
<Cascader
|
||||
placeholder={t('Select a variable')}
|
||||
value={selectedVar}
|
||||
options={options}
|
||||
onChange={(keyPaths) => setSelectedVar(keyPaths as string[])}
|
||||
changeOnSelect
|
||||
/>
|
||||
<Button onClick={onInsert}>{t('Insert')}</Button>
|
||||
</AntInput.Group>
|
||||
)}
|
||||
trigger="click"
|
||||
placement="topRight"
|
||||
>
|
||||
<XButton />
|
||||
</Popover>
|
||||
<VariableSelect options={options} onInsert={onInsert} />
|
||||
</Button.Group>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { Input, Cascader, Button, Tag } from 'antd';
|
||||
import { Input } from 'antd';
|
||||
import { useForm } from '@formily/react';
|
||||
import { cx, css } from '@emotion/css';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import * as sanitizeHTML from 'sanitize-html';
|
||||
|
||||
import { EllipsisWithTooltip, useCompile } from '../..';
|
||||
import { useRecord } from '../../../record-provider';
|
||||
import { VariableSelect } from './VariableSelect';
|
||||
|
||||
type RangeIndexes = [number, number, number, number];
|
||||
|
||||
@ -341,19 +341,6 @@ export function TextArea(props) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.x-button{
|
||||
.ant-select.ant-cascader{
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
min-width: auto;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
@ -382,63 +369,7 @@ export function TextArea(props) {
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
{!disabled
|
||||
? (
|
||||
<Button className={cx('x-button', css`
|
||||
position: relative;
|
||||
`)}>
|
||||
<span
|
||||
className={css`
|
||||
font-style: italic;
|
||||
font-family: "New York", "Times New Roman", Times, serif;
|
||||
`}
|
||||
>x</span>
|
||||
<Cascader
|
||||
placeholder={t('Select a variable')}
|
||||
value={[]}
|
||||
options={options}
|
||||
onChange={(keyPaths = [], selectedOptions = []) => {
|
||||
setSelectedVar(keyPaths as string[]);
|
||||
if (!keyPaths.length) {
|
||||
return;
|
||||
}
|
||||
const option = selectedOptions[selectedOptions.length - 1];
|
||||
if (!option?.children?.length) {
|
||||
onInsert(keyPaths);
|
||||
}
|
||||
}}
|
||||
changeOnSelect
|
||||
onClick={(e: any) => {
|
||||
if (e.detail !== 2) {
|
||||
return;
|
||||
}
|
||||
for (let n = e.target; n && n !== e.currentTarget; n = n.parentNode) {
|
||||
if (Array.from(n.classList ?? []).includes('ant-cascader-menu-item')) {
|
||||
onInsert(selectedVar);
|
||||
}
|
||||
}
|
||||
}}
|
||||
dropdownClassName={css`
|
||||
.ant-cascader-menu{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
dropdownRender={(menu) => (
|
||||
<>
|
||||
{menu}
|
||||
<div
|
||||
className={css`
|
||||
padding: .5em;
|
||||
border-top: 1px solid rgba(0, 0, 0, .06);
|
||||
color: rgba(0, 0, 0, .45);
|
||||
`}
|
||||
>
|
||||
{t('Double click to choose entire object')}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
)
|
||||
? <VariableSelect options={options} onInsert={onInsert} />
|
||||
: null
|
||||
}
|
||||
</Input.Group>
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
import { css, cx } from "@emotion/css";
|
||||
import { Button, Cascader } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export function VariableSelect(props) {
|
||||
const { options, onInsert } = props;
|
||||
const { t } = useTranslation();
|
||||
const [selectedVar, setSelectedVar] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedVar([]);
|
||||
}, [options]);
|
||||
|
||||
return (
|
||||
<Button className={cx('x-button', css`
|
||||
position: relative;
|
||||
|
||||
.ant-select.ant-cascader{
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
min-width: auto;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
`)}>
|
||||
<span
|
||||
className={css`
|
||||
font-style: italic;
|
||||
font-family: "New York", "Times New Roman", Times, serif;
|
||||
`}
|
||||
>x</span>
|
||||
<Cascader
|
||||
placeholder={t('Select a variable')}
|
||||
value={[]}
|
||||
options={options}
|
||||
onChange={(keyPaths = [], selectedOptions = []) => {
|
||||
setSelectedVar(keyPaths as string[]);
|
||||
if (!keyPaths.length) {
|
||||
return;
|
||||
}
|
||||
const option = selectedOptions[selectedOptions.length - 1];
|
||||
if (!option?.children?.length) {
|
||||
onInsert(keyPaths);
|
||||
}
|
||||
}}
|
||||
changeOnSelect
|
||||
onClick={(e: any) => {
|
||||
if (e.detail !== 2) {
|
||||
return;
|
||||
}
|
||||
for (let n = e.target; n && n !== e.currentTarget; n = n.parentNode) {
|
||||
if (Array.from(n.classList ?? []).includes('ant-cascader-menu-item')) {
|
||||
onInsert(selectedVar);
|
||||
}
|
||||
}
|
||||
}}
|
||||
dropdownClassName={css`
|
||||
.ant-cascader-menu{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
dropdownRender={(menu) => (
|
||||
<>
|
||||
{menu}
|
||||
<div
|
||||
className={css`
|
||||
padding: .5em;
|
||||
border-top: 1px solid rgba(0, 0, 0, .06);
|
||||
color: rgba(0, 0, 0, .45);
|
||||
`}
|
||||
>
|
||||
{t('Double click to choose entire object')}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@ -19,15 +19,13 @@ export default {
|
||||
type: 'number',
|
||||
title: `{{t("End Status", { ns: "${NAMESPACE}" })}}`,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
placeholder: `{{t("Select status", { ns: "${NAMESPACE}" })}}`,
|
||||
},
|
||||
'x-component': 'Radio.Group',
|
||||
enum: [
|
||||
{ label: `{{t("Succeed and continue", { ns: "${NAMESPACE}" })}}`, value: JOB_STATUS.RESOLVED },
|
||||
{ label: `{{t("Fail and exit", { ns: "${NAMESPACE}" })}}`, value: JOB_STATUS.FAILED },
|
||||
],
|
||||
required: true
|
||||
required: true,
|
||||
default: JOB_STATUS.RESOLVED
|
||||
}
|
||||
},
|
||||
view: {
|
||||
|
||||
@ -423,7 +423,6 @@ export function NodeDefaultView(props) {
|
||||
'x-component': 'fieldset',
|
||||
'x-component-props': {
|
||||
className: css`
|
||||
.ant-input,
|
||||
.ant-select,
|
||||
.ant-cascader-picker,
|
||||
.ant-picker,
|
||||
@ -434,6 +433,15 @@ export function NodeDefaultView(props) {
|
||||
min-width: 6em;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper{
|
||||
&:not(.full-width){
|
||||
.ant-input{
|
||||
width: auto;
|
||||
min-width: 6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
properties: instruction.fieldset
|
||||
|
||||
Loading…
Reference in New Issue
Block a user