From a938839b3514bd9f96236f0b67f1c9394a6746dd Mon Sep 17 00:00:00 2001
From: jinphicjfli <jinphicjfli@tencent.com>
Date: Fri, 26 May 2023 16:17:46 +0800
Subject: [PATCH] feat: add copy

---
 docs/demo/allow-copy.md      |  8 ++++++
 docs/examples/allow-copy.tsx | 15 +++++++++++
 src/BaseInput.tsx            | 52 ++++++++++++++++++++++++++++++++++--
 src/DefaultCopyIcon.tsx      | 22 +++++++++++++++
 src/interface.ts             |  5 ++++
 5 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 docs/demo/allow-copy.md
 create mode 100644 docs/examples/allow-copy.tsx
 create mode 100644 src/DefaultCopyIcon.tsx

diff --git a/docs/demo/allow-copy.md b/docs/demo/allow-copy.md
new file mode 100644
index 0000000..7d45f60
--- /dev/null
+++ b/docs/demo/allow-copy.md
@@ -0,0 +1,8 @@
+---
+title: allow-copy
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/allow-copy.tsx"></code>
diff --git a/docs/examples/allow-copy.tsx b/docs/examples/allow-copy.tsx
new file mode 100644
index 0000000..141b835
--- /dev/null
+++ b/docs/examples/allow-copy.tsx
@@ -0,0 +1,15 @@
+import Input from 'rc-input';
+import type { FC } from 'react';
+import React from 'react';
+import '../../assets/index.less';
+
+const Demo: FC = () => (
+  <>
+    <Input prefixCls="rc-input" style={{ marginLeft: 200 }} allowCopy />
+    <br />
+    <br />
+    <Input prefixCls="rc-input" addonAfter="MB" allowCopy />
+  </>
+);
+
+export default Demo;
diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index 21788f3..66688d7 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -1,9 +1,25 @@
 import clsx from 'classnames';
 import type { FC, ReactElement } from 'react';
 import React, { cloneElement, useRef } from 'react';
+import DefaultCopyIcon from './DefaultCopyIcon';
 import type { BaseInputProps } from './interface';
 import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
 
+const copyText = (text?: string): void => {
+  if (!text) {
+    return;
+  }
+  const textarea = document.createElement('textarea');
+  textarea.setAttribute('readonly', 'readonly');
+  textarea.innerHTML = text;
+  document.body.appendChild(textarea);
+  textarea.select();
+  if (document.execCommand('copy')) {
+    document.execCommand('copy');
+  }
+  document.body.removeChild(textarea);
+};
+
 const BaseInput: FC<BaseInputProps> = (props) => {
   const {
     inputElement,
@@ -26,6 +42,8 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     classNames,
     dataAttrs,
     styles,
+    allowCopy,
+    copyCallback,
   } = props;
 
   const containerRef = useRef<HTMLSpanElement>(null);
@@ -76,7 +94,9 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       ) || null,
     style: {
       ...inputElement.props?.style,
-      ...(!hasPrefixSuffix(props) && !hasAddon(props) ? style : {}),
+      ...(!hasPrefixSuffix(props) && !hasAddon(props) && !allowCopy
+        ? style
+        : {}),
     },
   });
 
@@ -132,6 +152,20 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     );
   }
 
+  const CopyIcon = React.createElement(
+    'span',
+    {
+      onClick: () => {
+        if (typeof copyCallback === 'function') {
+          copyCallback(value, inputElement);
+        } else {
+          copyText(value?.toString());
+        }
+      },
+    },
+    DefaultCopyIcon,
+  );
+
   // ================== Addon ================== //
   if (hasAddon(props)) {
     const wrapperCls = `${prefixCls}-group`;
@@ -159,11 +193,25 @@ const BaseInput: FC<BaseInputProps> = (props) => {
             hidden: null,
           })}
           {addonAfter && <span className={addonCls}>{addonAfter}</span>}
+          {allowCopy ? CopyIcon : null}
         </span>
       </span>
     );
   }
-  return element;
+  return (
+    <>
+      {CopyIcon ? (
+        <div
+          style={{ display: 'flex', alignItems: 'center', ...(style || {}) }}
+        >
+          {element}
+          {allowCopy ? CopyIcon : null}
+        </div>
+      ) : (
+        element
+      )}
+    </>
+  );
 };
 
 export default BaseInput;
diff --git a/src/DefaultCopyIcon.tsx b/src/DefaultCopyIcon.tsx
new file mode 100644
index 0000000..e515acf
--- /dev/null
+++ b/src/DefaultCopyIcon.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+const DefaultCopyIcon: ReactNode = (
+  <span
+    style={{ margin: '8px', color: 'rgba(0, 0, 0, 0.65)', cursor: 'pointer' }}
+  >
+    <svg
+      viewBox="64 64 896 896"
+      width="16"
+      height="16"
+      focusable="false"
+      data-icon="copy"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
+    </svg>
+  </span>
+);
+
+export default DefaultCopyIcon;
diff --git a/src/interface.ts b/src/interface.ts
index 3727420..b71e50e 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -10,6 +10,11 @@ import type { InputFocusOptions } from './utils/commonUtils';
 import type { LiteralUnion } from './utils/types';
 
 export interface CommonInputProps {
+  allowCopy?: ReactNode | boolean;
+  copyCallback?: (
+    v: InputHTMLAttributes<HTMLInputElement>['value'],
+    ele: ReactElement<any, string | React.JSXElementConstructor<any>>,
+  ) => void;
   prefix?: ReactNode;
   suffix?: ReactNode;
   addonBefore?: ReactNode;