refactor: embeddding input list
This commit is contained in:
jialin
@@ -46,4 +46,4 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(AlertInfo);
|
||||
export default AlertInfo;
|
||||
|
||||
@@ -15,10 +15,10 @@ interface SingleImageProps {
|
||||
maxWidth?: number;
|
||||
dataUrl: string;
|
||||
label?: React.ReactNode;
|
||||
uid: number;
|
||||
uid: number | string;
|
||||
preview?: boolean;
|
||||
autoSize?: boolean;
|
||||
onDelete: (uid: number) => void;
|
||||
onDelete: (uid: number | string) => void;
|
||||
onClick?: (item: any) => void;
|
||||
autoBgColor?: boolean;
|
||||
editable?: boolean;
|
||||
@@ -94,7 +94,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
|
||||
|
||||
const handleOnLoad = React.useCallback(async () => {}, []);
|
||||
|
||||
const handleOnDelete = (uid: number, e: any) => {
|
||||
const handleOnDelete = (uid: number | string, e: any) => {
|
||||
e.stopPropagation();
|
||||
onDelete(uid);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,8 +1,89 @@
|
||||
.row-textarea {
|
||||
.row-textarea-wrapper {
|
||||
position: relative;
|
||||
|
||||
&.focus {
|
||||
// padding-top: 9px;
|
||||
.actions-wrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
border-radius: var(--ant-border-radius);
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
bottom: 8px;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.actions-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropDownOpen {
|
||||
.actions-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
.actions-wrapper {
|
||||
display: flex;
|
||||
bottom: 8px;
|
||||
transform: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-textarea {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: var(--border-radius-base);
|
||||
border: 1px solid var(--ant-color-border);
|
||||
|
||||
.textarea-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
content: '';
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: var(--ant-color-fill-tertiary);
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
@@ -10,13 +91,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 20px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
.content {
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,14 +105,6 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.textarea-label {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
@@ -45,7 +117,6 @@
|
||||
height: 46px;
|
||||
line-height: 30px;
|
||||
padding: 8px 14px;
|
||||
padding-right: 4px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
Reference in New Issue
Block a user