@ballistix.digital/react-components 0.8.2 → 0.9.0

package/dist/index.d.ts

@@ -146,7 +146,7 @@ declare const DropdownElement: {
 
 type TProps$b = {
     accessor: IconName;
-    type?: 'brands' | 'light' | 'regular' | 'solid';
+    type?: 'brands' | 'light' | 'regular' | 'solid' | 'thin';
     className?: string;
 };
 declare const IconElement: FC<TProps$b>;
@@ -1039,12 +1039,13 @@ type TFileInputGroupFormProps = {
     isDisabled?: boolean;
     isRequired?: boolean;
     isTouched?: boolean;
+    isMulti?: boolean;
     children?: (props: {
         value?: TFileType;
         isDragging: boolean;
     }) => ReactNode;
-    onChange: any;
-    onBlur: any;
+    onChange: (files: TFileType[]) => void;
+    onBlur: FocusEventHandler<HTMLInputElement>;
     styles?: TFileInputGroupFormStyles;
 };
 declare const FileInputGroupForm: FC<TFileInputGroupFormProps>;

package/dist/index.esm.js

@@ -8,6 +8,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 import { fal } from '@fortawesome/pro-light-svg-icons';
 import { far } from '@fortawesome/pro-regular-svg-icons';
 import { fas } from '@fortawesome/pro-solid-svg-icons';
+import { fat } from '@fortawesome/pro-thin-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition, Dialog, Popover, Switch } from '@headlessui/react';
 import { useMask } from '@react-input/mask';
@@ -297,6 +298,12 @@ var IconElement = function (props) {
             }
             component = (jsx(FontAwesomeIcon, { icon: ['fas', accessor], className: className }));
             break;
+        case 'thin':
+            if (!(library === null || library === void 0 ? void 0 : library.definitions.fat)) {
+                library.add(fat);
+            }
+            component = (jsx(FontAwesomeIcon, { icon: ['fat', accessor], className: className }));
+            break;
     }
     return component;
 };
@@ -4717,34 +4724,40 @@ function reducer(state, action) {
 function noop() {}
 
 var FileInputGroupForm = function (props) {
-    var _a = props.name, name = _a === void 0 ? 'multiple-file-input' : _a, label = props.label, description = props.description, required = props.required, value = props.value, max = props.max, error = props.error, isDisabled = props.isDisabled, _b = props.isRequired, isRequired = _b === void 0 ? false : _b, _c = props.isTouched, isTouched = _c === void 0 ? false : _c, children = props.children, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _a = props.name, name = _a === void 0 ? 'multiple-file-input' : _a, label = props.label, description = props.description, required = props.required, value = props.value, max = props.max, error = props.error, isDisabled = props.isDisabled, _b = props.isRequired, isRequired = _b === void 0 ? false : _b, _c = props.isTouched, isTouched = _c === void 0 ? false : _c, _d = props.isMulti, isMulti = _d === void 0 ? false : _d, children = props.children, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
     var isValid = error === undefined;
-    var _d = useState(false), isDragging = _d[0], setIsDragging = _d[1];
-    var handleChangeInput = useCallback(function (file) {
-        var reader = new FileReader();
-        reader === null || reader === void 0 ? void 0 : reader.readAsDataURL(file);
-        reader.onload = function () {
-            var result = {
-                name: file.name,
-                size: file.size,
-                type: file.type,
-                blob: reader === null || reader === void 0 ? void 0 : reader.result,
-                file: file,
+    var _e = useState(false), isDragging = _e[0], setIsDragging = _e[1];
+    var handleChangeInput = useCallback(function (files) {
+        var results = [];
+        forEach(files, function (file, index, files) {
+            var reader = new FileReader();
+            reader === null || reader === void 0 ? void 0 : reader.readAsDataURL(file);
+            reader.onload = function () {
+                var result = {
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    blob: reader === null || reader === void 0 ? void 0 : reader.result,
+                    file: file,
+                };
+                // eg. 10 * 1024 * 1024
+                if (max && max * 1024 * 1024 < result.size) {
+                    return;
+                }
+                results.push(result);
+                if (index === files.length - 1) {
+                    onChange(results);
+                }
             };
-            // eg. 10 * 1024 * 1024
-            if (max && max * 1024 * 1024 < result.size) {
-                return;
-            }
-            onChange(result);
-        };
+        });
     }, [max, onChange]);
     var onDrop = useCallback(function (files) {
         setIsDragging(false);
-        handleChangeInput(files[0]);
+        handleChangeInput(files);
     }, [handleChangeInput]);
-    var _e = useDropzone({
+    var _f = useDropzone({
         onDrop: onDrop,
-        multiple: false,
+        multiple: isMulti,
         onError: function () {
             // console.log('error');
             // setFieldError('file', t('component.form.error.multipleFiles') as string);
@@ -4755,7 +4768,7 @@ var FileInputGroupForm = function (props) {
         onDragLeave: function () {
             setIsDragging(false);
         },
-    }), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
+    }), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$3.base);
         var keys = calculateNestedKeys(styles$3.base);