muffin-admin 8.3.0 → 8.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "8.3.0",
+  "version": "8.4.1",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",

package/src/buildRA.tsx

@@ -35,7 +35,7 @@ import {
   UrlField,
 } from "react-admin"
 
-import { AvatarField, EditableBooleanField, FKField, JsonField } from "./fields"
+import { AvatarField, CopyField, EditableBooleanField, FKField, JsonField } from "./fields"
 import { FilterInput, FKInput, JsonInput, TimestampInput } from "./inputs"
 
 const UI: Record<string, JSX.ElementType> = {
@@ -59,6 +59,7 @@ const UI: Record<string, JSX.ElementType> = {
   EditableBooleanField,
   FKField,
   JsonField,
+  CopyField,
 
   // Inputs
   ArrayInput,

package/src/buttons/CopyButton.tsx

@@ -0,0 +1,24 @@
+import CopyIcon from "@mui/icons-material/FileCopy"
+
+import { Snackbar } from "@mui/material"
+import { useState } from "react"
+
+export function CopyButton({ value }) {
+  const [open, setOpen] = useState(false)
+  const handleClick = (e: any) => {
+    setOpen(true)
+    navigator.clipboard.writeText(value)
+    e.stopPropagation()
+  }
+  return (
+    <span title="Copy to clipboard">
+      <CopyIcon color="info" fontSize="small" onClick={handleClick} style={{ cursor: "pointer" }} />
+      <Snackbar
+        open={open}
+        autoHideDuration={2000}
+        onClose={() => setOpen(false)}
+        message={`Copied to clipboard: ${value}`}
+      />
+    </span>
+  )
+}

package/src/buttons/index.ts

@@ -1,2 +1,3 @@
 export * from "./ActionButton"
+export * from "./CopyButton"
 export * from "./LinkButton"

package/src/fields/CopyField.tsx

@@ -0,0 +1,17 @@
+import get from "lodash/get"
+
+import { useRecordContext } from "react-admin"
+import { CopyButton } from "../buttons"
+
+export function CopyField({ source, ...props }) {
+  const record = useRecordContext(props)
+  const value = get(record, source)
+
+  if (!value) return null
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+      <span>{value}</span>
+      <CopyButton value={value} />
+    </div>
+  )
+}

package/src/fields/index.ts

@@ -1,4 +1,5 @@
 export * from "./AvatarField"
+export * from "./CopyField"
 export * from "./EditableBooleanField"
 export * from "./FKField"
 export * from "./JsonField"

package/src/index.tsx

@@ -36,4 +36,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "8.3.0"
+export const VERSION = "8.4.1"