chore: Arrange test pages

cloudscape-design · Oct 17, 2024 · 7f94b5f · 7f94b5f
1 parent 418089e
commit 7f94b5f
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 72 deletions.
diff --git a/pages/file-upload/deconstructed.page.tsx b/pages/file-upload/deconstructed.page.tsx
@@ -12,7 +12,6 @@ import {
   FormField,
   Header,
   Icon,
-  PromptInput,
 } from '~components';
 import SpaceBetween from '~components/space-between';
 
@@ -23,16 +22,15 @@ import { validateContractFiles } from './validations';
 
 export default function FileUploadScenarioStandalone() {
   const contractsRef = useRef<FileUploadProps.Ref>(null);
-  const [textareaValue, setTextareaValue] = useState('');
 
   const [acceptMultiple, setAcceptMultiple] = useState(true);
   const [verticalAlign, setVerticalAlign] = useState(false);
   const formState = useContractFilesForm();
 
   const isFileBeingDragged = useDropzoneVisible(acceptMultiple);
 
-  // const contractsValidationErrors = validateContractFiles(formState.files);
-  // const contractsErrors = contractsValidationErrors ?? formState.fileErrors;
+  const contractsValidationErrors = validateContractFiles(formState.files);
+  const contractsErrors = contractsValidationErrors ?? formState.fileErrors;
 
   const hasError = formState.status === 'error';
   useEffect(() => {
@@ -56,7 +54,12 @@ export default function FileUploadScenarioStandalone() {
   return (
     <Box margin="xl">
       <SpaceBetween size="xl">
-        <Header variant="h1">File upload: deconstructed</Header>
+        <Header
+          variant="h1"
+          description="This is the same as the file upload - standalone test page, but made with the deconstructed file upload components."
+        >
+          File upload: deconstructed
+        </Header>
 
         <Checkbox checked={acceptMultiple} onChange={(event: any) => setAcceptMultiple(event.detail.checked)}>
           Accept multiple files
@@ -65,82 +68,40 @@ export default function FileUploadScenarioStandalone() {
           Vertical alignment
         </Checkbox>
 
-        <FormField>
-          <PromptInput
-            ariaLabel="Chat input"
-            actionButtonIconName="send"
-            actionButtonAriaLabel="Submit prompt"
-            value={textareaValue}
-            onChange={(event: any) => setTextareaValue(event.detail.value)}
-            onAction={(event: any) => window.alert(`Submitted the following: ${event.detail.value}`)}
-            placeholder="Ask a question"
-            maxRows={4}
-            disableSecondaryActionsPaddings={true}
-            secondaryActions={
-              <Box padding={{ left: 'xxs', top: 'xs' }}>
-                <FileInput
-                  variant="icon"
-                  ref={contractsRef}
-                  multiple={acceptMultiple}
-                  value={formState.files}
-                  onChange={(event: any) => handleFilesChange(event.detail.value)}
-                  i18nStrings={i18nStrings}
-                />
-              </Box>
-            }
-            secondaryContent={
-              isFileBeingDragged ? (
-                <FileDropzone onChange={(event: any) => handleFilesChange(event.detail.value)}>
-                  <SpaceBetween size="xs" alignItems="center">
-                    <Icon name="upload" />
-                    Drop files here
-                  </SpaceBetween>
-                </FileDropzone>
-              ) : formState.files.length > 0 ? (
-                <>
-                  <FileTokenGroup
-                    alignment={verticalAlign ? 'vertical' : 'horizontal'}
-                    items={formState.files.map(file => ({
-                      file,
-                      loading: formState.status === 'uploading',
-                      errorText: file.size > 5000000 ? 'File size cannot exceed 5MB' : undefined,
-                    }))}
-                    showFileLastModified={true}
-                    showFileSize={true}
-                    showFileThumbnail={true}
-                    i18nStrings={i18nStrings}
-                    onDismiss={onDismiss}
-                  />
-                </>
-              ) : undefined
-            }
-          />
-        </FormField>
-
         <FormField
           label={acceptMultiple ? 'Contracts' : 'Contract'}
           description={acceptMultiple ? 'Upload your contract with all amendments' : 'Upload your contract'}
+          constraintText="File size must not exceed 250 KB. Combined file size must not exceed 750 KB"
+          errorText={contractsErrors?.errorText}
         >
-          <FileInput
-            variant="icon"
-            ref={contractsRef}
-            multiple={acceptMultiple}
-            value={formState.files}
-            onChange={(event: any) => handleFilesChange(event.detail.value)}
-            //   accept="application/pdf, image/*"
-            i18nStrings={i18nStrings}
-          />
+          {isFileBeingDragged ? (
+            <FileDropzone onChange={(event: any) => handleFilesChange(event.detail.value)}>
+              <SpaceBetween size="xs" alignItems="center">
+                <Icon name="upload" />
+                Drop files here
+              </SpaceBetween>
+            </FileDropzone>
+          ) : (
+            <FileInput
+              ref={contractsRef}
+              multiple={acceptMultiple}
+              value={formState.files}
+              onChange={(event: any) => handleFilesChange(event.detail.value)}
+              //   accept="application/pdf, image/*"
+              i18nStrings={i18nStrings}
+            />
+          )}
         </FormField>
 
         <FileTokenGroup
           alignment={verticalAlign ? 'vertical' : 'horizontal'}
-          items={formState.files.map(file => ({
+          items={formState.files.map((file, index) => ({
             file,
             loading: formState.status === 'uploading',
-            errorText: file.size > 5000000 ? 'File size cannot exceed 5MB' : undefined,
+            errorText: contractsErrors?.fileErrors?.[index] === null ? undefined : contractsErrors?.fileErrors?.[index],
           }))}
-          // showFileLastModified={true}
-          // showFileSize={true}
+          showFileLastModified={true}
+          showFileSize={true}
           showFileThumbnail={true}
           i18nStrings={i18nStrings}
           onDismiss={onDismiss}

diff --git a/pages/prompt-input/with-file-upload.page.tsx b/pages/prompt-input/with-file-upload.page.tsx
@@ -0,0 +1,93 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import {
+  Box,
+  FileDropzone,
+  FileInput,
+  FileTokenGroup,
+  FormField,
+  Header,
+  Icon,
+  PromptInput,
+  SpaceBetween,
+} from '~components';
+
+import { i18nStrings } from '../file-upload/shared';
+import { useDropzoneVisible } from '../file-upload/use-dropzone-visible';
+
+export default function PromptInputWithFileUpload() {
+  const [textareaValue, setTextareaValue] = useState('');
+  const [files, setFiles] = useState<File[]>([]);
+
+  const isFileBeingDragged = useDropzoneVisible(true);
+
+  const handleFilesChange = (newFiles: File[]) => {
+    const newValue = [...files, ...newFiles];
+    setFiles(newValue);
+  };
+
+  const onDismiss = (event: { detail: { fileIndex: number } }) => {
+    const newItems = [...files];
+    newItems.splice(event.detail.fileIndex, 1);
+    setFiles(newItems);
+  };
+
+  return (
+    <Box margin="xl">
+      <SpaceBetween size="xl">
+        <Header variant="h1">Prompt input with file upload</Header>
+        <FormField>
+          <PromptInput
+            ariaLabel="Chat input"
+            actionButtonIconName="send"
+            actionButtonAriaLabel="Submit prompt"
+            value={textareaValue}
+            onChange={(event: any) => setTextareaValue(event.detail.value)}
+            onAction={(event: any) => window.alert(`Submitted the following: ${event.detail.value}`)}
+            placeholder="Ask a question"
+            maxRows={4}
+            disableSecondaryActionsPaddings={true}
+            secondaryActions={
+              <Box padding={{ left: 'xxs', top: 'xs' }}>
+                <FileInput
+                  variant="icon"
+                  multiple={true}
+                  value={files}
+                  onChange={(event: any) => handleFilesChange(event.detail.value)}
+                  i18nStrings={i18nStrings}
+                />
+              </Box>
+            }
+            secondaryContent={
+              isFileBeingDragged ? (
+                <FileDropzone onChange={(event: any) => handleFilesChange(event.detail.value)}>
+                  <SpaceBetween size="xs" alignItems="center">
+                    <Icon name="upload" />
+                    Drop files here
+                  </SpaceBetween>
+                </FileDropzone>
+              ) : files.length > 0 ? (
+                <>
+                  <FileTokenGroup
+                    alignment="horizontal"
+                    items={files.map(file => ({
+                      file,
+                      errorText: file.size > 5000000 ? 'File size cannot exceed 5MB' : undefined,
+                    }))}
+                    showFileLastModified={true}
+                    showFileSize={true}
+                    showFileThumbnail={true}
+                    i18nStrings={i18nStrings}
+                    onDismiss={onDismiss}
+                  />
+                </>
+              ) : undefined
+            }
+          />
+        </FormField>
+      </SpaceBetween>
+    </Box>
+  );
+}
diff --git a/src/file-token-group/interfaces.ts b/src/file-token-group/interfaces.ts
@@ -94,7 +94,7 @@ export namespace FileTokenGroupProps {
     disabled?: boolean;
     loading?: boolean;
     loadingText?: string;
-    errorText?: string | null;
-    warningText?: string | null;
+    errorText?: null | string;
+    warningText?: null | string;
   }
 }