feat: Implement new actions ExportToText and new icons ✨

Author: lethemanh

assets/icons/ui/expand.svg

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react'
+
+import logger from 'cozy-logger'
+
+import { downloadBlob } from './helpers'
+import { getActionsI18n } from './locales/withActionsLocales'
+import { makePdfBlobFromText } from './pdfHelpers'
+import Icon from '../../Icon'
+import ExportIcon from '../../Icons/Export'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'exportToText'
+
+  return Component
+}
+
+export const exportToText = ({ exportedText, file }) => {
+  const { t } = getActionsI18n()
+  const icon = ExportIcon
+  const label = t('exportToText')
+
+  return {
+    name: 'exportToText',
+    icon,
+    label,
+    displayCondition: () => !!exportedText,
+    Component: makeComponent(label, icon),
+    action: async () => {
+      try {
+        const blob = await makePdfBlobFromText(exportedText)
+        const baseName = file?.name
+          ? `${file.name.replace(/\.[^/.]+$/, '')}_export`
+          : 'export'
+        downloadBlob(blob, `${baseName}.pdf`)
+      } catch (error) {
+        logger.error(error)
+      }
+    }
+  }
+}

assets/icons/ui/export.svg

@@ -238,3 +238,23 @@ export const makePdfBlob = async ({ client, docs, fetchBlobFileById }) => {
 
   return blob
 }
+
+/**
+ * Trigger a browser download for a given blob.
+ *
+ * @param {Blob} blob - File content
+ * @param {string} filename - Desired filename
+ * @returns {void}
+ */
+export const downloadBlob = (blob, filename) => {
+  if (!blob || !filename) return
+
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.style.display = 'none'
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}

assets/icons/ui/narrow.svg

@@ -13,3 +13,4 @@ export { viewInDrive } from './viewInDrive'
 export { copyToClipboard } from './copyToClipboard'
 export { editAttribute } from './editAttribute'
 export { others } from './others'
+export { exportToText } from './exportToText'

react/ActionsMenu/Actions/exportToText.js

@@ -25,5 +25,6 @@
     "success": "Copied to clipboard",
     "error": "Cannot copy to clipboard"
   },
-  "call": "Call"
+  "call": "Call",
+  "exportToText": "Export as text"
 }

react/ActionsMenu/Actions/helpers.js

@@ -25,5 +25,6 @@
     "success": "Copié dans le presse-papier",
     "error": "Impossible de copier dans le presse-papier"
   },
-  "call": "Appeler"
+  "call": "Appeler",
+  "exportToText": "Exporter en texte"
 }

react/ActionsMenu/Actions/index.js

@@ -25,5 +25,6 @@
     "success": "Скопировано в буфер обмена",
     "error": "Не удается скопировать в буфер обмена"
   },
-  "call": "Звонить"
-}
+  "call": "Звонить",
+  "exportToText": "Экспортировать как текст"
+}

react/ActionsMenu/Actions/locales/en.json

@@ -25,5 +25,6 @@
     "success": "Đã sao chép vào clipboard",
     "error": "Không thể sao chép vào clipboard"
   },
-  "call": "Gọi"
-}
+  "call": "Gọi",
+  "exportToText": "Xuất dưới dạng văn bản"
+}