Client configuration

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {

src/api/post.js

@@ -12,7 +12,7 @@ import {
     API_ACTIONS, TIMEOUT, HEADERS, APIReducer, getErrorMessage,
 } from "./utils";
 
-export function useAPIPost(url) {
+export function useAPIPost(url, contentType) {
     const [state, dispatch] = useReducer(APIReducer, {
         isSending: false,
         isError: false,
@@ -20,12 +20,17 @@ export function useAPIPost(url) {
         data: null,
     });
 
+    const headers = { ...HEADERS };
+    if (contentType) {
+        headers["Content-Type"] = contentType;
+    }
+
     const post = async (data) => {
         dispatch({ type: API_ACTIONS.INIT });
         try {
             const result = await axios.post(url, data, {
                 timeout: TIMEOUT,
-                headers: HEADERS,
+                headers,
             });
             dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
         } catch (error) {

src/bootstrap/CheckBox.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 
 import { formFieldsSize } from "./constants";
 

src/bootstrap/FileInput.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+
+import PropTypes from "prop-types";
+import { Input } from "./Input";
+
+FileInput.propTypes = {
+    /** Field label. */
+    label: PropTypes.string.isRequired,
+    /** Error message. */
+    error: PropTypes.string,
+    /** Help text message. */
+    helpText: PropTypes.string,
+    /** Email value. */
+    value: PropTypes.string,
+};
+
+export function FileInput({ ...props }) {
+    return (
+        <Input
+            type="file"
+            className="custom-file-input"
+            labelClassName="custom-file-label"
+            groupClassName="custom-file"
+            {...props}
+        />
+    );
+}

src/bootstrap/FileInput.md

@@ -0,0 +1,15 @@
+Bootstrap component for file input. Includes label and has predefined sizes and structure for using in foris forms. 
+
+All additional `props` are passed to the `<input type="file">` HTML component.
+
+```js
+import {useState} from 'react';
+const [files, setFiles] = useState([]);
+
+<FileInput
+    files={files}
+    label="Some file"
+    helpText="Will be uploaded"
+    onChange={event =>setFiles(event.target.files)}
+/>
+```

src/bootstrap/Input.js

@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 import PropTypes from "prop-types";
 
 import { formFieldsSize } from "./constants";
@@ -21,31 +21,31 @@ Input.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
+    labelClassName: PropTypes.string,
+    groupClassName: PropTypes.string,
 };
 
 /** Base bootstrap input component. */
 export function Input({
-    type, label, helpText, error, className, children, ...props
+    type, label, helpText, error, className, children, labelClassName, groupClassName, ...props
 }) {
     const uid = useUID();
     const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
     return (
-        <div className={formFieldsSize}>
+        <div className={`form-group ${formFieldsSize}`}>
-            <div className="form-group">
+            <label className={labelClassName} htmlFor={uid}>{label}</label>
-                <label htmlFor={uid}>{label}</label>
+            <div className={`input-group ${groupClassName || ""}`.trim()}>
-                <div className="input-group">
+                <input
-                    <input
+                    className={inputClassName}
-                        className={inputClassName}
+                    type={type}
-                        type={type}
+                    id={uid}
-                        id={uid}
 
-                        {...props}
+                    {...props}
-                    />
+                />
-                    {children}
+                {children}
-                </div>
-                {error ? <div className="invalid-feedback">{error}</div> : null}
-                {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
             </div>
+            {error ? <div className="invalid-feedback">{error}</div> : null}
+            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </div>
     );
 }

src/bootstrap/RadioSet.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 
 import { formFieldsSize } from "./constants";
 

src/bootstrap/Select.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 
 
 Select.propTypes = {

src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -2,53 +2,49 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <div
+  <label
-    class="form-group"
+    for="1"
   >
-    <label
+    Test label
-      for="1"
+  </label>
-    >
+  <div
-      Test label
+    class="input-group"
-    </label>
+  >
+    <input
+      class="form-control"
+      id="1"
+      type="number"
+      value="1"
+    />
     <div
-      class="input-group"
+      class="input-group-append"
     >
-      <input
+      <button
-        class="form-control"
+        aria-label="Increase"
-        id="1"
+        class="btn btn-outline-secondary"
-        type="number"
+        type="button"
-        value="1"
-      />
-      <div
-        class="input-group-append"
       >
-        <button
+        <i
-          aria-label="Increase"
+          class="fas fa-plus"
-          class="btn btn-outline-secondary"
+        />
-          type="button"
+      </button>
-        >
+      <button
-          <i
+        aria-label="Decrease"
-            class="fas fa-plus"
+        class="btn btn-outline-secondary"
-          />
+        type="button"
-        </button>
+      >
-        <button
+        <i
-          aria-label="Decrease"
+          class="fas fa-minus"
-          class="btn btn-outline-secondary"
+        />
-          type="button"
+      </button>
-        >
-          <i
-            class="fas fa-minus"
-          />
-        </button>
-      </div>
     </div>
-    <small
-      class="form-text text-muted"
-    >
-      Some help text
-    </small>
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap

@@ -2,32 +2,28 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <div
+  <label
-    class="form-group"
+    for="1"
   >
-    <label
+    Test label
-      for="1"
+  </label>
-    >
+  <div
-      Test label
+    class="input-group"
-    </label>
+  >
-    <div
+    <input
-      class="input-group"
+      autocomplete="new-password"
-    >
+      class="form-control"
-      <input
+      id="1"
-        autocomplete="new-password"
+      type="password"
-        class="form-control"
+      value="Some password"
-        id="1"
+    />
-        type="password"
-        value="Some password"
-      />
-    </div>
-    <small
-      class="form-text text-muted"
-    >
-      Some help text
-    </small>
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap

@@ -2,31 +2,27 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <div
+  <label
-    class="form-group"
+    for="1"
   >
-    <label
+    Test label
-      for="1"
+  </label>
-    >
+  <div
-      Test label
+    class="input-group"
-    </label>
+  >
-    <div
+    <input
-      class="input-group"
+      class="form-control"
-    >
+      id="1"
-      <input
+      type="text"
-        class="form-control"
+      value="Some text"
-        id="1"
+    />
-        type="text"
-        value="Some text"
-      />
-    </div>
-    <small
-      class="form-text text-muted"
-    >
-      Some help text
-    </small>
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;

src/form/hooks.js

@@ -17,7 +17,7 @@ const FORM_ACTIONS = {
     resetData: 2,
 };
 
-export function useForm(validator, prepData) {
+export function useForm(validator, dataPreprocessor) {
     const [state, dispatch] = useReducer(formReducer, {
         data: null,
         initialData: null,
@@ -28,10 +28,10 @@ export function useForm(validator, prepData) {
         dispatch({
             type: FORM_ACTIONS.resetData,
             data,
-            prepData,
+            dataPreprocessor,
             validator,
         });
-    }, [prepData, validator]);
+    }, [dataPreprocessor, validator]);
 
     const onFormChangeHandler = useCallback((updateRule) => (event) => {
         dispatch({
@@ -41,6 +41,7 @@ export function useForm(validator, prepData) {
             validator,
         });
     }, [validator]);
+
     return [
         state,
         onFormChangeHandler,
@@ -61,12 +62,15 @@ function formReducer(state, action) {
         };
     }
     case FORM_ACTIONS.resetData: {
-        if (!action.data) return { ...state, initialData: state.data };
+        if (!action.data) {
-        const prepData = action.prepData ? action.prepData(action.data) : action.data;
+            return { ...state, initialData: state.data };
+        }
+
+        const data = action.dataPreprocessor ? action.dataPreprocessor(action.data) : action.data;
         return {
-            data: prepData,
+            data,
-            initialData: prepData,
+            initialData: data,
-            errors: action.data ? action.validator(prepData) : undefined,
+            errors: action.data ? action.validator(data) : undefined,
         };
     }
     default: {
@@ -82,6 +86,9 @@ function getChangedValue(target) {
     } else if (target.type === "number") {
         const parsedValue = parseInt(value);
         value = Number.isNaN(parsedValue) ? value : parsedValue;
+    } else if (target.type === "file") {
+        // Return first file (we don't need multiple yet)
+        [value] = target.files;
     }
     return value;
 }

src/index.js

@@ -15,15 +15,16 @@ export { useAPIPatch } from "api/patch";
 export { Alert } from "bootstrap/Alert";
 export { Button } from "bootstrap/Button";
 export { CheckBox } from "bootstrap/CheckBox";
-export { formFieldsSize } from "bootstrap/constants";
 export { DataTimeInput } from "bootstrap/DataTimeInput";
 export { EmailInput } from "bootstrap/EmailInput";
+export { FileInput } from "bootstrap/FileInput";
 export { Input } from "bootstrap/Input";
 export { NumberInput } from "bootstrap/NumberInput";
 export { PasswordInput } from "bootstrap/PasswordInput";
 export { RadioSet } from "bootstrap/RadioSet";
 export { Select } from "bootstrap/Select";
 export { TextInput } from "bootstrap/TextInput";
+export { formFieldsSize } from "bootstrap/constants";
 
 export {
     Spinner,