refactor: embeddding input list

src/components/seal-form/row-textarea.tsx

@@ -1,4 +1,7 @@
-import { CloseOutlined } from '@ant-design/icons';
+import SmallCloseButton from '@/pages/_components/small-close-button';
+import ThumbImg from '@/pages/playground/components/thumb-img';
+import useAddImage from '@/pages/playground/hooks/use-add-image';
+import { DeleteOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Tooltip } from 'antd';
 import classNames from 'classnames';
@@ -7,12 +10,20 @@ import './styles/row-textarea.less';
 
 interface SystemMessageProps {
   style?: React.CSSProperties;
-  value: string;
+  data: {
+    text: string;
+    uid: number | string;
+    name: string;
+    dataUrl?: string;
+  };
   placeholder?: string;
   label?: React.ReactNode;
   height?: number;
+  onUploadImage?: (list: { uid: number | string; dataUrl: string }[]) => void;
+  onDeleteImage?: () => void;
   onChange: (e: any) => void;
   onPaste?: (e: any) => void;
+  onDelete?: () => void;
   onSelect?: (data: {
     start: number;
     end: number;
@@ -23,9 +34,12 @@ interface SystemMessageProps {
 
 const RowTextarea: React.FC<SystemMessageProps> = (props) => {
   const {
-    value,
+    data,
+    onDeleteImage,
+    onUploadImage,
     onChange,
     onSelect,
+    onDelete,
     style,
     label,
     placeholder,
@@ -76,8 +90,8 @@ const RowTextarea: React.FC<SystemMessageProps> = (props) => {
     const start = e.target.selectionStart;
     const end = e.target.selectionEnd;
 
-    const beforeText = value.substring(0, start);
-    const afterText = value.substring(end, value.length);
+    const beforeText = data.text.substring(0, start);
+    const afterText = data.text.substring(end, data.text.length);
     onSelect?.({
       start,
       end,
@@ -86,64 +100,130 @@ const RowTextarea: React.FC<SystemMessageProps> = (props) => {
     });
   };
 
+  const handleUploadImage = (
+    list: { uid: number | string; dataUrl: string }[]
+  ) => {
+    onUploadImage?.(list);
+  };
+
+  const { ImageURLInput, UploadImageButton, isFromUrl, dropDownOpen } =
+    useAddImage({
+      size: 'small',
+      inputProps: {
+        variant: 'filled'
+      },
+      handleUpdateImgList: handleUploadImage,
+      updateUidCount: () => `img-${Date.now()}`
+    });
+
+  const expanded = autoSize.focus || !!data.dataUrl || isFromUrl;
+  // const expanded = true;
+
+  console.log('expanded===========', expanded);
+
   return (
     <div
-      className={classNames('row-textarea', {
-        focus: autoSize.focus
+      className={classNames('row-textarea-wrapper', {
+        dropDownOpen: dropDownOpen,
+        expanded: expanded
       })}
-      style={{ ...style }}
     >
-      {
+      <div
+        className={classNames('row-textarea', {
+          expanded: expanded
+        })}
+        style={{ ...style }}
+      >
         <div
-          style={{ display: autoSize.focus ? 'block' : 'none' }}
+          style={{
+            display: expanded ? 'block' : 'none'
+          }}
           className="textarea-wrapper"
         >
           {label && <span className="textarea-label">{label}</span>}
+          {data.dataUrl && (
+            <div style={{ padding: 8 }}>
+              <ThumbImg
+                editable
+                dataList={
+                  data.dataUrl ? [{ uid: data.uid, dataUrl: data.dataUrl }] : []
+                }
+                onDelete={onDeleteImage}
+              />
+            </div>
+          )}
+
           <Input.TextArea
             className="custome-scrollbar"
+            allowClear
             ref={rowTextAreaRef}
             placeholder={placeholder}
             style={{
               borderRadius: '0',
-              border: 'none'
-            }}
-            value={value}
-            autoSize={{
-              minRows: autoSize.minRows,
-              maxRows: autoSize.maxRows
+              border: 'none',
+              width: '100%',
+              boxShadow: 'none'
             }}
+            value={data.text}
+            autoSize={
+              expanded
+                ? {
+                    minRows: 5,
+                    maxRows: 5
+                  }
+                : { minRows: autoSize.minRows, maxRows: autoSize.maxRows }
+            }
             onFocus={handleFocus}
             onBlur={handleBlur}
-            allowClear={false}
             onChange={handleOnChange}
             onSelect={handleOnSelect}
             onPaste={handleOnPaste}
+            onClear={handleClear}
           ></Input.TextArea>
         </div>
-      }
-      {!autoSize.focus && (
-        <div className="content-wrap" onClick={handleFocus}>
-          <div className="content" style={{ height: height }}>
-            {label && <span className="title">{label}</span>}
-            {value || (
-              <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                {placeholder}
-              </span>
-            )}
+
+        {!expanded && (
+          <div
+            className={classNames('content-wrap', {
+              dropDownOpen: dropDownOpen
+            })}
+            onClick={handleFocus}
+          >
+            {
+              <div className="content" style={{ height: height }}>
+                {label && <span className="title">{label}</span>}
+                {data.text || (
+                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                    {placeholder}
+                  </span>
+                )}
+              </div>
+            }
           </div>
-          {value && (
-            <Tooltip title={intl.formatMessage({ id: 'common.button.clear' })}>
+        )}
+        <div
+          className={classNames('actions-wrapper', {
+            show: expanded
+          })}
+        >
+          {ImageURLInput}
+          <div className={'actions'}>
+            {!expanded && data.text && (
+              <SmallCloseButton onClick={handleClear}></SmallCloseButton>
+            )}
+            {UploadImageButton}
+            <Tooltip title={intl.formatMessage({ id: 'common.button.delete' })}>
               <Button
-                className="clear-btn"
-                type="text"
-                icon={<CloseOutlined />}
+                danger
                 size="small"
-                onClick={handleClear}
+                type="text"
+                icon={<DeleteOutlined></DeleteOutlined>}
+                onClick={onDelete}
               ></Button>
             </Tooltip>
-          )}
+          </div>
         </div>
-      )}
+      </div>
     </div>
   );
 };