feat: Add action to share on mobile device

cozy · Dec 20, 2024 · 05cf7bf · 05cf7bf
1 parent e4bbff7
commit 05cf7bf
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 36 deletions.
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
@@ -125,7 +125,7 @@ declare module 'cozy-ui/transpiled/react/ActionsMenu/Actions' {
   export function divider(): Action
 
   export function makeActions(
-    arg1: ((props?: T) => Action)[],
+    arg1: (((props?: T) => Action) | boolean)[],
     T
   ): Record<string, Action>[]
 }
@@ -135,6 +135,15 @@ declare module 'cozy-sharing' {
     allLoaded: boolean
     refresh: () => void
   }
+
+  export const useNativeFileSharing: () => {
+    isNativeFileSharingAvailable: boolean
+    shareFilesNative: (
+      files: import('cozy-client/types/CozyClient').CozyClient[]
+    ) => void
+  }
+
+  export const shareNative: (props?: T) => Action
 }
 
 declare module 'cozy-ui/transpiled/react/Nav' {

diff --git a/src/lib/DriveProvider.jsx b/src/lib/DriveProvider.jsx
@@ -7,7 +7,7 @@ import {
   VaultProvider,
   VaultUnlockPlaceholder
 } from 'cozy-keys-lib'
-import SharingProvider from 'cozy-sharing'
+import SharingProvider, { NativeFileSharingProvider } from 'cozy-sharing'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
@@ -25,14 +25,16 @@ const DriveProvider = ({ client, lang, polyglot, dictRequire, children }) => {
         <VaultProvider cozyClient={client}>
           <VaultUnlockProvider>
             <SharingProvider doctype="io.cozy.files" documentType="Files">
-              <CozyTheme ignoreCozySettings={isPublic} className="u-w-100">
-                <BreakpointsProvider>
-                  <AlertProvider>
-                    <VaultUnlockPlaceholder />
-                    <FabProvider>{children}</FabProvider>
-                  </AlertProvider>
-                </BreakpointsProvider>
-              </CozyTheme>
+              <NativeFileSharingProvider>
+                <CozyTheme ignoreCozySettings={isPublic} className="u-w-100">
+                  <BreakpointsProvider>
+                    <AlertProvider>
+                      <VaultUnlockPlaceholder />
+                      <FabProvider>{children}</FabProvider>
+                    </AlertProvider>
+                  </BreakpointsProvider>
+                </CozyTheme>
+              </NativeFileSharingProvider>
             </SharingProvider>
           </VaultUnlockProvider>
         </VaultProvider>

diff --git a/src/modules/views/Drive/DriveFolderView.jsx b/src/modules/views/Drive/DriveFolderView.jsx
@@ -6,7 +6,11 @@ import { useNavigate, Outlet, useLocation, useParams } from 'react-router-dom'
 import { useQuery, useClient } from 'cozy-client'
 import flag from 'cozy-flags'
 import { useVaultClient } from 'cozy-keys-lib'
-import { useSharingContext } from 'cozy-sharing'
+import {
+  useSharingContext,
+  useNativeFileSharing,
+  shareNative
+} from 'cozy-sharing'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -65,6 +69,8 @@ const DriveFolderView = () => {
   const { isFabDisplayed, setIsFabDisplayed } = useContext(FabContext)
   const { allLoaded, hasWriteAccess, refresh, isOwner, byDocId } =
     useSharingContext()
+  const { isNativeFileSharingAvailable, shareFilesNative } =
+    useNativeFileSharing()
   const client = useClient()
   const vaultClient = useVaultClient()
   const { pushModal, popModal } = useModalContext()
@@ -159,11 +165,14 @@ const DriveFolderView = () => {
     allLoaded,
     showAlert,
     isOwner,
-    byDocId
+    byDocId,
+    isNativeFileSharingAvailable,
+    shareFilesNative
   }
   const actions = makeActions(
     [
       share,
+      shareNative,
       download,
       hr,
       rename,

diff --git a/src/modules/views/Favorites/FavoritesView.tsx b/src/modules/views/Favorites/FavoritesView.tsx
@@ -4,7 +4,11 @@ import { Outlet, useNavigate, useLocation } from 'react-router-dom'
 
 import { useClient, useQuery } from 'cozy-client'
 import { IOCozyFile } from 'cozy-client/types/types'
-import { useSharingContext } from 'cozy-sharing'
+import {
+  useSharingContext,
+  useNativeFileSharing,
+  shareNative
+} from 'cozy-sharing'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -51,6 +55,8 @@ const FavoritesView: FC = () => {
   const client = useClient()
   const { pushModal, popModal } = useModalContext()
   const { allLoaded, refresh } = useSharingContext()
+  const { isNativeFileSharingAvailable, shareFilesNative } =
+    useNativeFileSharing()
   const dispatch = useDispatch()
   const { showAlert } = useAlert()
   const [sortOrder] = useFolderSort('favorites')
@@ -95,13 +101,16 @@ const FavoritesView: FC = () => {
     canMove: true,
     isPublic: false,
     allLoaded,
-    showAlert
+    showAlert,
+    isNativeFileSharingAvailable,
+    shareFilesNative
   }
 
   const actions = makeActions(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     [
       share,
+      shareNative,
       download,
       hr,
       rename,

diff --git a/src/modules/views/Recent/index.jsx b/src/modules/views/Recent/index.jsx
@@ -3,7 +3,11 @@ import { useDispatch } from 'react-redux'
 import { useNavigate, Outlet, useLocation } from 'react-router-dom'
 
 import { useClient } from 'cozy-client'
-import { useSharingContext } from 'cozy-sharing'
+import {
+  useSharingContext,
+  useNativeFileSharing,
+  shareNative
+} from 'cozy-sharing'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -47,6 +51,8 @@ export const RecentView = () => {
   const client = useClient()
   const { pushModal, popModal } = useModalContext()
   const { allLoaded, refresh, isOwner, byDocId } = useSharingContext()
+  const { isNativeFileSharingAvailable, shareFilesNative } =
+    useNativeFileSharing()
   const dispatch = useDispatch()
   useHead()
   const { showAlert } = useAlert()
@@ -81,12 +87,15 @@ export const RecentView = () => {
     allLoaded,
     showAlert,
     isOwner,
-    byDocId
+    byDocId,
+    isNativeFileSharingAvailable,
+    shareFilesNative
   }
 
   const actions = makeActions(
     [
       share,
+      shareNative,
       download,
       hr,
       rename,

diff --git a/src/modules/views/Sharings/index.jsx b/src/modules/views/Sharings/index.jsx
@@ -3,7 +3,11 @@ import { useDispatch } from 'react-redux'
 import { useNavigate, useLocation, Outlet } from 'react-router-dom'
 
 import { useClient, hasQueryBeenLoaded } from 'cozy-client'
-import { useSharingContext } from 'cozy-sharing'
+import {
+  useSharingContext,
+  useNativeFileSharing,
+  shareNative
+} from 'cozy-sharing'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -41,6 +45,8 @@ export const SharingsView = ({ sharedDocumentIds = [] }) => {
   const client = useClient()
   const { pushModal, popModal } = useModalContext()
   const { allLoaded, refresh } = useSharingContext()
+  const { isNativeFileSharingAvailable, shareFilesNative } =
+    useNativeFileSharing()
   const dispatch = useDispatch()
   useHead()
   const { showAlert } = useAlert()
@@ -77,12 +83,15 @@ export const SharingsView = ({ sharedDocumentIds = [] }) => {
     canMove: true,
     isPublic: false,
     allLoaded,
-    showAlert
+    showAlert,
+    isNativeFileSharingAvailable,
+    shareFilesNative
   }
 
   const actions = makeActions(
     [
       share,
+      shareNative,
       download,
       hr,
       rename,

diff --git a/test/components/AppLike.jsx b/test/components/AppLike.jsx
@@ -4,7 +4,7 @@ import { HashRouter } from 'react-router-dom'
 import { createStore } from 'redux'
 
 import { CozyProvider } from 'cozy-client'
-import { SharingContext } from 'cozy-sharing'
+import { SharingContext, NativeFileSharingProvider } from 'cozy-sharing'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
@@ -62,23 +62,25 @@ const AppLike = ({
             value={sharingContextValue || mockSharingContextValue}
           >
             <AcceptingSharingProvider>
-              <HashRouter>
-                <SelectionProvider>
-                  <ThumbnailSizeContextProvider>
-                    <BreakpointsProvider>
-                      <AlertProvider>
-                        <PushBannerProvider>
-                          <ModalContext.Provider
-                            value={modalContextValue || mockModalContextValue}
-                          >
-                            <FabProvider>{children}</FabProvider>
-                          </ModalContext.Provider>
-                        </PushBannerProvider>
-                      </AlertProvider>
-                    </BreakpointsProvider>
-                  </ThumbnailSizeContextProvider>
-                </SelectionProvider>
-              </HashRouter>
+              <NativeFileSharingProvider>
+                <HashRouter>
+                  <SelectionProvider>
+                    <ThumbnailSizeContextProvider>
+                      <BreakpointsProvider>
+                        <AlertProvider>
+                          <PushBannerProvider>
+                            <ModalContext.Provider
+                              value={modalContextValue || mockModalContextValue}
+                            >
+                              <FabProvider>{children}</FabProvider>
+                            </ModalContext.Provider>
+                          </PushBannerProvider>
+                        </AlertProvider>
+                      </BreakpointsProvider>
+                    </ThumbnailSizeContextProvider>
+                  </SelectionProvider>
+                </HashRouter>
+              </NativeFileSharingProvider>
             </AcceptingSharingProvider>
           </SharingContext.Provider>
         </TestI18n>