updates after custom actions

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/Composed.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { Button, Flex, Text } from '@aws-amplify/ui-react';
+import { IconChevronRight } from '@aws-amplify/ui-react/internal';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+import { ComposedCopyView } from './ComposedCopyView';
+import { ComposedCreateFolderView } from './ComposedCreateFolderView';
+import { ComposedDeleteView } from './ComposedDeleteView';
+import { ComposedUploadView } from './ComposedUploadView';
+
+function LocationsView() {
+  const state = useView('Locations');
+
+  return (
+    <Flex direction="column" padding="medium">
+      <Text fontWeight="bold">Locations</Text>
+      {state.pageItems.map((location) => {
+        return (
+          <Button
+            key={location.id}
+            justifyContent="flex-start"
+            onClick={() => {
+              state.onNavigate(location);
+            }}
+          >
+            <Text flex="1">
+              s3://{location.bucket}/{location.prefix}
+            </Text>
+            <Text as="span" color="font.tertiary" fontWeight="normal">
+              {location.permissions.includes('list') ? 'Read' : null}{' '}
+              {location.permissions.includes('write') ? 'Write' : null}
+            </Text>
+            <IconChevronRight color="font.tertiary" />
+          </Button>
+        );
+      })}
+    </Flex>
+  );
+}
+
+const { LocationActionView } = StorageBrowser;
+
+function MyLocationActionView({
+  type,
+  onExit,
+}: {
+  type?: string;
+  onExit: () => void;
+}) {
+  let DialogContent = null;
+  if (!type) return DialogContent;
+
+  switch (type) {
+    case 'copy':
+      return <ComposedCopyView onExit={onExit} />;
+    case 'createFolder':
+      return <ComposedCreateFolderView onExit={onExit} />;
+    case 'delete':
+      return <ComposedDeleteView onExit={onExit} />;
+    case 'upload':
+      return <ComposedUploadView onExit={onExit} />;
+    default:
+      return <LocationActionView onExit={onExit} />;
+  }
+}
+
+function MyStorageBrowser() {
+  const state = useView('LocationDetail');
+  const [currentAction, setCurrentAction] = React.useState<string>();
+  const ref = React.useRef<HTMLDialogElement>(null);
+
+  if (!state.location.current) {
+    return <LocationsView />;
+  }
+
+  return (
+    <>
+      <StorageBrowser.LocationDetailView
+        key={currentAction}
+        onActionSelect={(action) => {
+          setCurrentAction(action);
+          ref.current?.showModal();
+        }}
+      />
+      <dialog ref={ref}>
+        <MyLocationActionView
+          type={currentAction}
+          onExit={() => {
+            setCurrentAction(undefined);
+            ref.current?.close();
+          }}
+        />
+      </dialog>
+    </>
+  );
+}
+
+export default function Example() {
+  return (
+    <StorageBrowser.Provider>
+      <MyStorageBrowser />
+    </StorageBrowser.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedCopyView.tsx

@@ -1,17 +1,11 @@
 import * as React from 'react';
-import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
-import { mockConfig } from './mockConfig'; // IGNORE
+import { StorageBrowser, useView } from './MockStorageBrowser';
 
-const { StorageBrowser, useView } = createStorageBrowser({
-  //...
-  config: mockConfig, // IGNORE
-});
-
-function CopyView() {
+export function ComposedCopyView({ onExit }: { onExit: () => void }) {
   const state = useView('Copy');
 
   return (
-    <StorageBrowser.CopyView.Provider {...state}>
+    <StorageBrowser.CopyView.Provider {...state} onActionExit={onExit}>
       <StorageBrowser.CopyView.Exit />
       <StorageBrowser.CopyView.TasksTable />
       <StorageBrowser.CopyView.Destination />
@@ -22,19 +16,3 @@ function CopyView() {
     </StorageBrowser.CopyView.Provider>
   );
 }
-
-export default function Example() {
-  return (
-    <StorageBrowser.Provider
-      location={{
-        bucket: 'test',
-        prefix: '/foo',
-        id: '1234',
-        type: 'PREFIX',
-        permissions: ['write', 'list', 'get', 'delete'],
-      }}
-    >
-      <CopyView />
-    </StorageBrowser.Provider>
-  );
-}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedCreateFolderView.tsx

@@ -1,29 +1,15 @@
 import * as React from 'react';
-import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
-import { mockConfig } from './mockConfig'; // IGNORE
+import { StorageBrowser, useView } from './MockStorageBrowser';
 
-const { StorageBrowser, useView } = createStorageBrowser({
-  //...
-  config: mockConfig, // IGNORE
-});
-
-function CreateFolderView() {
+export function ComposedCreateFolderView({ onExit }: { onExit: () => void }) {
   const state = useView('CreateFolder');
 
   return (
-    <StorageBrowser.CreateFolderView.Provider {...state}>
+    <StorageBrowser.CreateFolderView.Provider {...state} onActionExit={onExit}>
       <StorageBrowser.CreateFolderView.Exit />
       <StorageBrowser.CreateFolderView.NameField />
       <StorageBrowser.CreateFolderView.Start />
       <StorageBrowser.CreateFolderView.Message />
     </StorageBrowser.CreateFolderView.Provider>
   );
 }
-
-export default function Example() {
-  return (
-    <StorageBrowser.Provider>
-      <CreateFolderView />
-    </StorageBrowser.Provider>
-  );
-}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedDeleteView.tsx

@@ -1,29 +1,15 @@
 import * as React from 'react';
-import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
-import { mockConfig } from './mockConfig'; // IGNORE
+import { StorageBrowser, useView } from './MockStorageBrowser';
 
-const { StorageBrowser, useView } = createStorageBrowser({
-  //...
-  config: mockConfig, // IGNORE
-});
-
-function DeleteView() {
+export function ComposedDeleteView({ onExit }: { onExit: () => void }) {
   const state = useView('Delete');
 
   return (
-    <StorageBrowser.DeleteView.Provider {...state}>
+    <StorageBrowser.DeleteView.Provider {...state} onActionExit={onExit}>
       <StorageBrowser.DeleteView.Exit />
       <StorageBrowser.DeleteView.TasksTable />
       <StorageBrowser.DeleteView.Start />
       <StorageBrowser.DeleteView.Message />
     </StorageBrowser.DeleteView.Provider>
   );
 }
-
-export default function Example() {
-  return (
-    <StorageBrowser.Provider>
-      <DeleteView />
-    </StorageBrowser.Provider>
-  );
-}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedLocationDetailView.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
-import { Button, Flex } from '@aws-amplify/ui-react';
-import { mockConfig } from './mockConfig';
-
-const { StorageBrowser, useView } = createStorageBrowser({
-  config: mockConfig,
-});
+import { Flex } from '@aws-amplify/ui-react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
 
 function LocationDetailView() {
   const state = useView('LocationDetail');

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedLocationsView.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
-import { Button, Flex } from '@aws-amplify/ui-react';
-import { mockConfig } from './mockConfig';
-
-const { StorageBrowser, useView } = createStorageBrowser({
-  config: mockConfig,
-});
+import { Flex } from '@aws-amplify/ui-react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
 
 function LocationsView() {
   const state = useView('Locations');

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedUploadView.tsx

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
-import { Button, Flex, View } from '@aws-amplify/ui-react';
-import { mockConfig } from './mockConfig';
+import { Flex } from '@aws-amplify/ui-react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
 
-const { StorageBrowser, useView } = createStorageBrowser({
-  config: mockConfig,
-});
-
-function UploadView() {
+export function ComposedUploadView({ onExit }: { onExit: () => void }) {
   const state = useView('Upload');
 
   return (
-    <StorageBrowser.UploadView.Provider {...state}>
+    <StorageBrowser.UploadView.Provider {...state} onActionExit={onExit}>
       <StorageBrowser.UploadView.Exit />
       <StorageBrowser.UploadView.TasksTable />
       <Flex direction="row" width="100%">
@@ -23,11 +18,3 @@ function UploadView() {
     </StorageBrowser.UploadView.Provider>
   );
 }
-
-export default function Example() {
-  return (
-    <StorageBrowser.Provider>
-      <UploadView />
-    </StorageBrowser.Provider>
-  );
-}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/Custom.tsx

@@ -1,70 +1,61 @@
 import * as React from 'react';
-import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
-import { Button, Flex, Text } from '@aws-amplify/ui-react';
-import { mockConfig } from './mockConfig';
-import { IconChevronRight } from '@aws-amplify/ui-react/internal';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+import { CustomDeleteView } from './CustomDeleteView';
+import { CustomCopyView } from './CustomCopyView';
+import { CustomCreateFolderView } from './CustomCreateFolderView';
+import { CustomUploadView } from './CustomUploadView';
+import { CustomLocationsView } from './CustomLocationsView';
 
-const { StorageBrowser, useView } = createStorageBrowser({
-  config: mockConfig,
-});
+function MyLocationActionView({
+  type,
+  onExit,
+}: {
+  type?: string;
+  onExit: () => void;
+}) {
+  let DialogContent = null;
+  if (!type) return DialogContent;
 
-function LocationsView() {
-  const state = useView('Locations');
-
-  return (
-    <Flex direction="column" padding="medium">
-      <Text fontWeight="bold">Locations</Text>
-      {state.pageItems.map((location) => {
-        return (
-          <Button
-            key={location.id}
-            justifyContent="flex-start"
-            onClick={() => {
-              state.onNavigate(location);
-            }}
-          >
-            <Text flex="1">
-              s3://{location.bucket}/{location.prefix}
-            </Text>
-            <Text as="span" color="font.tertiary" fontWeight="normal">
-              {location.permissions.includes('list') ? 'Read' : null}{' '}
-              {location.permissions.includes('write') ? 'Write' : null}
-            </Text>
-            <IconChevronRight color="font.tertiary" />
-          </Button>
-        );
-      })}
-    </Flex>
-  );
+  switch (type) {
+    case 'copy':
+      return <CustomCopyView onExit={onExit} />;
+    case 'createFolder':
+      return <CustomCreateFolderView onExit={onExit} />;
+    case 'delete':
+      return <CustomDeleteView onExit={onExit} />;
+    case 'upload':
+      return <CustomUploadView onExit={onExit} />;
+    default:
+      return null;
+  }
 }
 
 function MyStorageBrowser() {
   const state = useView('LocationDetail');
   const [currentAction, setCurrentAction] = React.useState<string>();
-  const ref = React.useRef<HTMLDialogElement>(null);
 
   if (!state.location.current) {
-    return <LocationsView />;
+    return <CustomLocationsView />;
   }
 
-  return (
-    <>
-      <StorageBrowser.LocationDetailView
-        key={currentAction}
-        onActionSelect={(action) => {
-          setCurrentAction(action);
-          ref.current?.showModal();
+  if (currentAction) {
+    return (
+      <MyLocationActionView
+        type={currentAction}
+        onExit={() => {
+          setCurrentAction(undefined);
         }}
       />
-      <dialog ref={ref}>
-        <StorageBrowser.LocationActionView
-          onExit={() => {
-            setCurrentAction(undefined);
-            ref.current?.close();
-          }}
-        />
-      </dialog>
-    </>
+    );
+  }
+
+  return (
+    <StorageBrowser.LocationDetailView
+      key={currentAction}
+      onActionSelect={(action) => {
+        setCurrentAction(action);
+      }}
+    />
   );
 }