Merge pull request #112 from MacPaw/feat/add-on-copy-event-for-input

add onCopyEvent for input

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "4.9.1",
+  "version": "4.10.0",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",

pages/input.mdx

@@ -294,15 +294,19 @@ const [value, setValue] = useState(10);
 <div style={{ width: 800 }}>
     <FormRow split>
         <Input type="text" name="key" placeholder="Your key" label="Key" clipboard />
-        <Input type="text" name="link" name="Your link" placeholder="Your link" label="Key" clipboard="copy" />
+        <Input type="text" name="link" name="Your link" placeholder="Your link" label="Key" clipboard="copy" onCopyEvent={(value) => {
+            console.log(`Copied with value: ${value}`);
+        }} />
     </FormRow>
 </div>
 
 ```
 <div style={{ width: 800 }}>
     <FormRow split>
         <Input type="text" name="key" placeholder="Your key" label="Key" clipboard />
-        <Input type="text" name="link" name="Your link" placeholder="Your link" label="Key" clipboard="copy" />
+        <Input type="text" name="link" name="Your link" placeholder="Your link" label="Key" clipboard="copy" onCopyEvent={(value) => {
+            console.log(`Copied with value: ${value}`);
+        }} />
     </FormRow>
 </div>
 ```

src/Clipboard/Clipboard.tsx

@@ -1,13 +1,15 @@
 import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { CheckCircleIcon, CopyIcon as CopyIconUi } from '../Icons/jsx';
 import Tooltip from '../Tooltip/Tooltip';
+import { InputValueType } from '../types';
 
 interface ClipboardProps {
   copy?: React.ReactElement | string;
   element: MutableRefObject<HTMLInputElement | undefined>;
+  onCopyEvent?: (value: InputValueType) => void;
 }
 
-const Clipboard: React.FC<ClipboardProps> = ({ copy, element }) => {
+const Clipboard: React.FC<ClipboardProps> = ({ copy, element, onCopyEvent }) => {
   const [canBeCopied, setCanBeCopied] = useState(true);
   const timerRef = useRef<NodeJS.Timeout>();
 
@@ -19,6 +21,7 @@ const Clipboard: React.FC<ClipboardProps> = ({ copy, element }) => {
 
   const iconHandler = () => {
     if (element.current?.value) {
+      onCopyEvent?.(element.current?.value);
       navigator.clipboard.writeText(element.current?.value);
       setCanBeCopied(false);
     }

src/Input/Input.tsx

@@ -27,6 +27,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   formatOnEvent?: 'blur' | 'input';
   format?: (value: InputValueType) => InputValueType;
   onChange?: (value:InputValueType, event?: React.ChangeEvent<HTMLInputElement>) => void;
+  onCopyEvent?: (value: InputValueType) => void;
   onAutofill?: () => void;
   clipboard?: boolean | string | React.ReactElement;
 }
@@ -46,6 +47,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     icon,
     value,
     onChange,
+    onCopyEvent,
     formatOnEvent = '',
     format,
     onAutofill,
@@ -141,7 +143,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         />
         {action && <span className="input-action">{action}</span>}
         {currency && <span className="input-currency">{currency}</span>}
-        {clipboard && <Clipboard element={inputRef} copy={typeof clipboard !== 'boolean' ? clipboard : undefined} />}
+        {clipboard && <Clipboard element={inputRef} copy={typeof clipboard !== 'boolean' ? clipboard : undefined} onCopyEvent={onCopyEvent} />}
       </span>
       {showHintError && <Hint error style={{ marginTop: 6 }}>{error}</Hint>}
     </label>