Merge pull request #263 from MetroStar/file-input-clearing

Add Custom File Input Hook

Author: jbouder

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@metrostar/comet-uswds",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "React with TypeScript Component Library based on USWDS 3.0.",
   "license": "Apache-2.0",
   "main": "./dist/cjs/index.js",

packages/comet-uswds/package.json

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { FileInput, FileInputProps } from './file-input';
+import { useFileInput } from '../../hooks';
+import Button from '../button';
 
 const meta: Meta<typeof FileInput> = {
   title: 'USWDS/Forms/File Input',
@@ -38,3 +40,58 @@ Multiple.args = {
   helperText: 'Input accepts multiple files',
   disabled: false,
 };
+
+const CustomTemplate: StoryFn<typeof FileInput> = (args: FileInputProps) => {
+  const { clear } = useFileInput();
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log(file);
+  }, [file]);
+  return (
+    <>
+      <div className="padding-bottom-1">
+        <FileInput
+          onChange={(event) => {
+            const target = event.target as HTMLInputElement;
+            const files = target?.files;
+            if (files) {
+              setFile(files[0]);
+            }
+          }}
+          {...args}
+        />
+      </div>
+      <div>
+        <Button
+          id="clear-btn"
+          onClick={() => {
+            clear(args.id);
+            setFile(null);
+          }}
+        >
+          Clear
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export const CustomClear = CustomTemplate.bind({});
+CustomClear.args = {
+  id: 'file-input-1',
+  name: 'file-input-1',
+  multiple: false,
+  required: false,
+  label: 'Select a file',
+  helperText: 'Input accepts a single file',
+  disabled: false,
+};
+CustomClear.parameters = {
+  docs: {
+    source: {
+      type: 'code',
+    },
+  },
+};

packages/comet-uswds/src/components/file-input/file-input.stories.tsx

@@ -1,2 +1,3 @@
+export { default as useFileInput } from './use-file-input';
 export { default as useHeader } from './use-header';
 export { default as useModal } from './use-modal';

packages/comet-uswds/src/hooks/index.ts

@@ -0,0 +1,13 @@
+import { act, renderHook } from '@testing-library/react';
+import useFileInput from './use-file-input';
+
+describe('useFileInput', () => {
+  test('should call clear successfully', async () => {
+    const { result } = renderHook(() => useFileInput());
+
+    await act(async () => {
+      result.current.clear('file-input');
+    });
+    expect(result.current.clear).toBeTruthy();
+  });
+});

packages/comet-uswds/src/hooks/use-file-input.test.tsx

@@ -0,0 +1,46 @@
+const useFileInput = () => {
+  const clear = (elemId: string): void => {
+    const elem = document.getElementById(elemId) as HTMLInputElement;
+    if (elem === null) {
+      return;
+    }
+
+    // Get the Parent element based on USWDS file input HTML structure
+    const parent = elem.parentElement as HTMLFormElement;
+    if (parent === null) {
+      return;
+    }
+
+    // Get Preview Elements and remove them
+    const previewElement = parent.querySelectorAll(
+      '.usa-file-input__preview',
+    ) as NodeListOf<HTMLElement>;
+    previewElement.forEach((element) => element.remove());
+
+    // Get Preview Heading Elements and remove them
+    const previewHeadingElement = parent.querySelectorAll(
+      '.usa-file-input__preview-heading',
+    ) as NodeListOf<HTMLElement>;
+    previewHeadingElement.forEach((element) => element.remove());
+
+    // Get the sr-only Element and reset
+    const srOnlyElement = parent.querySelector('.usa-sr-only') as HTMLElement;
+    if (srOnlyElement) {
+      srOnlyElement.innerHTML = 'No file selected.';
+    }
+
+    // Get the instructions and reset
+    const instructions = parent.querySelector('.usa-file-input__instructions') as HTMLElement;
+    if (instructions) {
+      instructions.removeAttribute('hidden');
+    }
+
+    // Reset input element values
+    elem.setAttribute('aria-label', '');
+    elem.value = '';
+  };
+
+  return { clear };
+};
+
+export default useFileInput;