feat(custom-request): improve x button of variable (#2829)

* fix: revert the modal style

* feat: improve x button of variable

packages/core/client/src/schema-component/antd/variable/Input.tsx

@@ -333,7 +333,16 @@ export function Input(props) {
           changeOnSelect={changeOnSelect}
           fieldNames={fieldNames}
         >
-          {button ?? <XButton type={variable ? 'primary' : 'default'} />}
+          {button ?? (
+            <XButton
+              className={css(`
+                &:not(:hover) {
+                  border-left-color: transparent;
+                }
+              `)}
+              type={variable ? 'primary' : 'default'}
+            />
+          )}
         </Cascader>
       ) : null}
     </Space.Compact>,

packages/core/client/src/schema-component/antd/variable/JSONInput.tsx

@@ -2,7 +2,23 @@ import React from 'react';
 
 import { Input } from '../input';
 import { RawTextArea } from './RawTextArea';
+import { css } from '@emotion/css';
 
 export function JSONInput(props) {
-  return <RawTextArea {...props} component={Input.JSON} />;
+  return (
+    <div>
+      <RawTextArea
+        buttonClass={css`
+          &:not(:hover) {
+            border-right-color: transparent;
+            border-top-color: transparent;
+          }
+          background-color: transparent;
+        `}
+        {...props}
+        component={Input.JSON}
+      />
+      ;
+    </div>
+  );
 }

packages/core/client/src/schema-component/antd/variable/RawTextArea.tsx

@@ -17,6 +17,7 @@ function setNativeInputValue(input, value) {
 }
 
 export function RawTextArea(props): JSX.Element {
+  console.log('🚀 ~ file: RawTextArea.tsx:20 ~ RawTextArea ~ props:', props);
   const inputRef = useRef<any>(null);
   const { changeOnSelect, component: Component = Input.TextArea, ...others } = props;
   const scope = typeof props.scope === 'function' ? props.scope() : props.scope;
@@ -58,6 +59,17 @@ export function RawTextArea(props): JSX.Element {
         `}
       >
         <VariableSelect
+          className={
+            props.buttonClass ??
+            css`
+              &:not(:hover) {
+                border-right-color: transparent;
+                border-top-color: transparent;
+                border-bottom-color: transparent;
+              }
+              background-color: transparent;
+            `
+          }
           fieldNames={props.fieldNames}
           options={options}
           setOptions={setOptions}

packages/core/client/src/schema-component/antd/variable/TextArea.tsx

@@ -391,7 +391,20 @@ export function TextArea(props) {
         dangerouslySetInnerHTML={{ __html: html }}
       />
       {!disabled ? (
-        <VariableSelect options={options} setOptions={setOptions} onInsert={onInsert} changeOnSelect={changeOnSelect} />
+        <VariableSelect
+          className={css`
+            &:not(:hover) {
+              border-right-color: transparent;
+              border-top-color: transparent;
+              // border-bottom-color: transparent;
+            }
+            background-color: transparent;
+          `}
+          options={options}
+          setOptions={setOptions}
+          onInsert={onInsert}
+          changeOnSelect={changeOnSelect}
+        />
       ) : null}
     </Input.Group>,
   );

packages/core/client/src/schema-component/antd/variable/VariableSelect.tsx

@@ -1,9 +1,10 @@
 import { cx } from '@emotion/css';
-import { Button, Cascader } from 'antd';
+import { Cascader } from 'antd';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useToken } from '../__builtins__';
 import useStyles from './VariableSelect.style';
+import { XButton } from './XButton';
 
 export function VariableSelect({
   options,
@@ -11,6 +12,7 @@ export function VariableSelect({
   onInsert,
   changeOnSelect = false,
   fieldNames = {},
+  className,
 }): JSX.Element {
   const { t } = useTranslation();
   const [selectedVar, setSelectedVar] = useState<string[]>([]);
@@ -26,8 +28,7 @@ export function VariableSelect({
   }
 
   return wrapSSR(
-    <Button className={cx('x-button', componentCls, hashId)}>
+    <XButton className={cx('x-button', componentCls, hashId, className)}>
-      <span className={'variable-btn'}>x</span>
       <Cascader
         placeholder={t('Select a variable')}
         value={[]}
@@ -75,6 +76,6 @@ export function VariableSelect({
             : null
         }
       />
-    </Button>,
+    </XButton>,
   );
 }

packages/core/client/src/schema-component/antd/variable/XButton.tsx

@@ -1,4 +1,6 @@
+import { css } from '@emotion/css';
 import { Button, ButtonProps } from 'antd';
+import { cx } from 'antd-style';
 import React, { forwardRef, useMemo } from 'react';
 
 export const XButton = forwardRef((props: ButtonProps, ref: any) => {
@@ -11,7 +13,7 @@ export const XButton = forwardRef((props: ButtonProps, ref: any) => {
 
   return (
     <Button ref={ref} style={style} {...props}>
-      x
+      x{props.children}
     </Button>
   );
 });

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -895,10 +895,6 @@ SchemaSettings.ActionModalItem = React.memo((props: any) => {
         <Modal
           width={'50%'}
           title={compile(title)}
-          bodyStyle={{
-            maxHeight: '70vh',
-            overflowY: 'scroll',
-          }}
           {...others}
           destroyOnClose
           open={visible}