Harmonize FileInput component with styleguide (#1693)

scm-ui/ui-components/src/forms/FileInput.stories.tsx

@@ -0,0 +1,69 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC, useState } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { storiesOf } from "@storybook/react";
+import { Level, SubmitButton } from "../index";
+import FileInput from "./FileInput";
+import styled from "styled-components";
+
+const Decorator = styled.div`
+  padding: 2rem;
+  max-width: 40rem;
+`;
+
+type Settings = {
+  uploadFile: string;
+};
+
+const ReactHookForm: FC = () => {
+  const { register, handleSubmit } = useForm<Settings>();
+  const [stored, setStored] = useState<Settings>();
+
+  const onSubmit = (settings: Settings) => {
+    setStored(settings);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FileInput label="Upload File" helpText="Select your most loved file" {...register("uploadFile")} />
+        <Level right={<SubmitButton>Submit</SubmitButton>} />
+      </form>
+      {stored ? (
+        <div className="mt-5">
+          <pre>
+            <code>{JSON.stringify(stored, null, 2)}</code>
+          </pre>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+storiesOf("Forms|FileInput", module)
+  .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
+  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
+  .add("Default", () => <ReactHookForm />);

scm-ui/ui-components/src/forms/FileInput.tsx

@@ -21,13 +21,16 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent, FC, FocusEvent } from "react";
+import React, { ChangeEvent, FC, FocusEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
 import classNames from "classnames";
-import LabelWithHelpIcon from "./LabelWithHelpIcon";
+import { File } from "@scm-manager/ui-types";
 import { createAttributesForTesting } from "../devBuild";
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 type Props = {
   name?: string;
+  filenamePlaceholder?: string;
   className?: string;
   label?: string;
   placeholder?: string;
@@ -41,6 +44,7 @@ type Props = {
 
 const FileInput: FC<Props> = ({
   name,
+  filenamePlaceholder,
   testId,
   helpText,
   placeholder,
@@ -49,9 +53,16 @@ const FileInput: FC<Props> = ({
   className,
   ref,
   onBlur,
-  onChange
+  onChange,
 }) => {
+  const [t] = useTranslation("commons");
+  const [file, setFile] = useState<File | null>(null);
+
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const uploadedFile = event?.target?.files![0];
+    // @ts-ignore the uploaded file doesn't match our types
+    setFile(uploadedFile);
+
     if (onChange && event.target.files) {
       onChange(event);
     }
@@ -66,18 +77,33 @@ const FileInput: FC<Props> = ({
   return (
     <div className={classNames("field", className)}>
       <LabelWithHelpIcon label={label} helpText={helpText} />
-      <div className="control">
-        <input
-          ref={ref}
-          name={name}
-          className={classNames("input", "p-1", className)}
-          type="file"
-          placeholder={placeholder}
-          disabled={disabled}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          {...createAttributesForTesting(testId)}
-        />
+      <div className="file is-info has-name is-fullwidth">
+        <label className="file-label">
+          <input
+            ref={ref}
+            name={name}
+            className="file-input"
+            type="file"
+            placeholder={placeholder}
+            disabled={disabled}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            {...createAttributesForTesting(testId)}
+          />
+          <span className="file-cta">
+            <span className="file-icon">
+              <i className="fas fa-arrow-circle-up" />
+            </span>
+            <span className="file-label has-text-weight-bold">{t("fileInput.label")}</span>
+          </span>
+          {file?.name ? (
+            <span className="file-name">{file?.name}</span>
+          ) : (
+            <span className="file-name has-text-weight-light has-text-grey-light">
+              {filenamePlaceholder || t("fileInput.noFileChosen")}
+            </span>
+          )}
+        </label>
       </div>
     </div>
   );