@dartech/arsenal-ui 1.3.84 → 1.3.86

package/index.js

@@ -709,9 +709,10 @@ const ControlAutocomplete = _a => {
       options = [],
       multiple,
       textFieldProps = {},
-      disableCloseOnSelect
+      disableCloseOnSelect,
+      useStringValue
     } = _a,
-    autocompleteProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "hideErrorMessage", "onChange", "labelKey", "valueKey", "options", "multiple", "textFieldProps", "disableCloseOnSelect"]);
+    autocompleteProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "hideErrorMessage", "onChange", "labelKey", "valueKey", "options", "multiple", "textFieldProps", "disableCloseOnSelect", "useStringValue"]);
   const _b = useController({
       name,
       control,
@@ -724,14 +725,16 @@ const ControlAutocomplete = _a => {
     _c = _b.field,
     {
       ref,
-      onChange
+      onChange,
+      value
     } = _c,
-    fieldProps = __rest(_c, ["ref", "onChange"]),
+    fieldProps = __rest(_c, ["ref", "onChange", "value"]),
     {
       fieldState: {
         error
       }
     } = _b;
+  const [localValue, setLocalValue] = useState();
   const {
     getOptionLabel,
     isOptionEqualToValue,
@@ -741,9 +744,16 @@ const ControlAutocomplete = _a => {
     labelKey
   });
   const handleChange = (_, value) => {
-    onChange(value);
+    onChange(useStringValue ? value[valueKey] : value);
+    setLocalValue(value);
   };
+  useEffect(() => {
+    if (typeof value === 'string' && valueKey && useStringValue && !localValue && options.length && !!options[0] && typeof options[0] === 'object') {
+      setLocalValue(options.find(el => el[valueKey] === value));
+    }
+  }, [localValue, options, useStringValue, value, valueKey]);
   return jsx(Autocomplete, Object.assign({}, fieldProps, {
+    value: useStringValue ? localValue !== null && localValue !== void 0 ? localValue : null : value,
     fullWidth: true,
     disablePortal: true,
     size: "small",
@@ -3735,7 +3745,6 @@ const FileValueWidget = ({
     setValue,
     register
   } = useFormContext();
-  const [fileType, setFileType] = useState(null);
   const fileValue = useWatch({
     control,
     name
@@ -3747,44 +3756,25 @@ const FileValueWidget = ({
     const base64 = yield convertBase64(file);
     setValue(name, base64);
   }), [name, setValue]);
-  useEffect(() => {
-    if (fileValue) {
-      const type = fileValue.substring(fileValue.indexOf(':') + 1, fileValue.indexOf(';base64'));
-      if (type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
-        setFileType('application/xls');
-      } else if (type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-        setFileType('application/docx');
-      } else {
-        setFileType(type);
-      }
+  return jsxs(Button, Object.assign({
+    component: "label",
+    variant: "contained",
+    size: "large",
+    color: "primary",
+    sx: {
+      marginTop: 4
     }
-  }, [fileValue]);
-  return jsxs(Fragment, {
-    children: [fileType && jsx(Box, Object.assign({
-      mb: 2
-    }, {
-      children: jsx(Typography, Object.assign({
-        variant: "subtitle2"
-      }, {
-        children: `Uploaded file type: ${fileType}`
-      }))
-    })), jsxs(Button, Object.assign({
-      component: "label",
-      variant: "contained",
-      size: "large",
-      color: "primary"
-    }, {
-      children: [fileType ? 'Change file' : 'Upload file', jsx("input", Object.assign({
-        type: "hidden"
-      }, register(`${name}`, {
-        required: true
-      }))), jsx("input", {
-        type: "file",
-        hidden: true,
-        onChange: handleFileRead
-      })]
-    }))]
-  });
+  }, {
+    children: [fileValue ? 'Change file' : 'Upload file', jsx("input", Object.assign({
+      type: "hidden"
+    }, register(`${name}`, {
+      required: true
+    }))), jsx("input", {
+      type: "file",
+      hidden: true,
+      onChange: handleFileRead
+    })]
+  }));
 };
 var FileValueWidget$1 = FileValueWidget;
 
@@ -5650,6 +5640,34 @@ const DefinitionFiller = ({
   }));
 };
 
+const FileDefinitionValueView = ({
+  property,
+  data
+}) => {
+  const {
+    name
+  } = property;
+  const downloadFile = useCallback((contentBase64, fileName) => {
+    const linkSource = contentBase64;
+    const downloadLink = document.createElement('a');
+    document.body.appendChild(downloadLink);
+    downloadLink.href = linkSource;
+    downloadLink.target = '_self';
+    downloadLink.download = fileName;
+    downloadLink.click();
+  }, []);
+  return jsx(Button, Object.assign({
+    component: "label",
+    variant: "contained",
+    size: "large",
+    color: "primary",
+    onClick: () => downloadFile(data, name)
+  }, {
+    children: "Download File"
+  }));
+};
+var FileDefinitionValueView$1 = FileDefinitionValueView;
+
 const PropertyValueComponent = ({
   property,
   data,
@@ -5660,7 +5678,10 @@ const PropertyValueComponent = ({
       backgroundColor: '#fff',
       border: '1px solid #ccc',
       borderRadius: '4px',
-      padding: '4px'
+      padding: '4px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     }
   }, {
     children: value === null ? 'null' : value.toString()
@@ -5680,6 +5701,24 @@ const PropertyValueComponent = ({
       return typeof data === 'object' ? jsx(JsonView, {
         value: data
       }) : defaultRender(data);
+    case PropertyType.FILE_REFERENCE:
+      return jsx(Button, Object.assign({
+        component: Link,
+        color: "primary",
+        variant: "contained",
+        target: "_blank",
+        to: data,
+        sx: {
+          marginTop: 4
+        }
+      }, {
+        children: "Download via link"
+      }));
+    case PropertyType.FILE:
+      return jsx(FileDefinitionValueView$1, {
+        data: data,
+        property: property
+      });
     default:
       return defaultRender(data);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.3.84",
+  "version": "1.3.86",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,6 @@
     "classnames": "^2.3.1",
     "@tanstack/react-query": "^4.24.10",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "axios": "1.4.0",
     "qs": "6.11.0"
   },
   "module": "./index.js",

package/src/lib/Definition/DefinitionValueView/FileDefinitionValueView.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FileProperty } from '../../../interfaces';
+type Props = {
+    property: FileProperty;
+    data: string;
+};
+declare const FileDefinitionValueView: ({ property, data }: Props) => JSX.Element;
+export default FileDefinitionValueView;

package/src/lib/Forms/ControlAutocomplete.d.ts

@@ -60,10 +60,11 @@ export type ControlAutocompleteProps = Omit<AutocompleteProps<unknown, boolean,
      */
     options: string[] | unknown[];
     textFieldProps?: TextFieldProps;
+    useStringValue?: boolean;
 };
 /**
  * Material UI `Autocomplete` controlled component. Used with react-hook-form
  * @category Forms
  */
-export declare const ControlAutocomplete: ({ control, validate, name, label, required, defaultValue, disabled, hideErrorMessage, onChange: customOnChange, labelKey, valueKey, options, multiple, textFieldProps, disableCloseOnSelect, ...autocompleteProps }: ControlAutocompleteProps) => JSX.Element;
+export declare const ControlAutocomplete: ({ control, validate, name, label, required, defaultValue, disabled, hideErrorMessage, onChange: customOnChange, labelKey, valueKey, options, multiple, textFieldProps, disableCloseOnSelect, useStringValue, ...autocompleteProps }: ControlAutocompleteProps) => JSX.Element;
 export default ControlAutocomplete;