refactor(TextInputArea): 复用 CopyButton 组件替换内联复制逻辑
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
||||||
import { Copy, X } from 'lucide-react';
|
import { X } from 'lucide-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
||||||
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
|
|
||||||
export type ValidateRule = {
|
export type ValidateRule = {
|
||||||
validator: (value: string) => boolean;
|
validator: (value: string) => boolean;
|
||||||
@@ -187,16 +188,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
|||||||
onClear?.();
|
onClear?.();
|
||||||
}, [isControlled, onChange, onClear, t]);
|
}, [isControlled, onChange, onClear, t]);
|
||||||
|
|
||||||
const handleCopy = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(value);
|
|
||||||
toast.success(t('messages.copySuccess'));
|
|
||||||
} catch {
|
|
||||||
setError(t('messages.copyError'));
|
|
||||||
toast.error(t('messages.copyError'));
|
|
||||||
}
|
|
||||||
}, [value, t]);
|
|
||||||
|
|
||||||
const handleAction = useCallback(
|
const handleAction = useCallback(
|
||||||
(action: ToolbarAction) => {
|
(action: ToolbarAction) => {
|
||||||
const isDisabled =
|
const isDisabled =
|
||||||
@@ -284,14 +275,12 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
|||||||
{/* 右侧系统按钮组 */}
|
{/* 右侧系统按钮组 */}
|
||||||
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
||||||
{allowCopy && value && (
|
{allowCopy && value && (
|
||||||
<button
|
<CopyButton
|
||||||
type="button"
|
text={value}
|
||||||
onClick={handleCopy}
|
tooltip={t('textInputArea.copyContent')}
|
||||||
aria-label={t('textInputArea.copyContent')}
|
size="sm"
|
||||||
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-background/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
className="h-7 w-7 p-1"
|
||||||
>
|
/>
|
||||||
<Copy className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
)}
|
||||||
{showClear && value && !disabled && !readOnly && (
|
{showClear && value && !disabled && !readOnly && (
|
||||||
<button
|
<button
|
||||||
|
|||||||
Generated
+144
-54
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user