@vitrosoftware/common-ui-ts 1.1.41 → 1.1.42

package/dist/controls/ImagePicker/ImagePicker.d.ts

@@ -1,8 +1,8 @@
-import { MutableRefObject } from 'react';
+/// <reference types="react" />
 import { DropdownItem } from '../DropdownButton/DropdownItem';
 interface ImagePickerProps {
-    inputFileRef: MutableRefObject<HTMLInputElement | null>;
     label: string;
+    name?: string;
     itemList?: DropdownItem[];
     defaultUrl?: string;
     classNameRoot?: string;
@@ -10,7 +10,7 @@ interface ImagePickerProps {
     classNameDefaultIcon?: string;
     imgUrlUpload?: string;
     imgUrlDelete?: string;
-    onDelete: () => void;
+    onChange: (file: File | null, name?: string) => void;
 }
 export declare const ImagePicker: (props: ImagePickerProps) => JSX.Element;
 export {};

package/dist/index.js

@@ -64220,7 +64220,8 @@ var LOCALE$7;
 
 var ImagePicker = function ImagePicker(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var renderPrevie = function renderPrevie() {
+  var inputFileRef = React.useRef(null);
+  var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
         className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$J['vitro-image-picker-icon-wrapper']
@@ -64236,12 +64237,16 @@ var ImagePicker = function ImagePicker(props) {
       }));
     }
   };
+  var onChange = function onChange(e) {
+    var _e$target$files$, _e$target$files;
+    props.onChange((_e$target$files$ = e === null || e === void 0 ? void 0 : (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]) != null ? _e$target$files$ : null, props.name);
+  };
   var defaultItemList = React.useMemo(function () {
     var _props$itemList;
     var result = [{
       onClick: function onClick() {
-        var _props$inputFileRef, _props$inputFileRef$c;
-        return (_props$inputFileRef = props.inputFileRef) === null || _props$inputFileRef === void 0 ? void 0 : (_props$inputFileRef$c = _props$inputFileRef.current) === null || _props$inputFileRef$c === void 0 ? void 0 : _props$inputFileRef$c.click();
+        var _inputFileRef$current;
+        return inputFileRef === null || inputFileRef === void 0 ? void 0 : (_inputFileRef$current = inputFileRef.current) === null || _inputFileRef$current === void 0 ? void 0 : _inputFileRef$current.click();
       },
       text: localeService.create(LOCALE$7.ACTION_UPLOAD),
       value: ACTION$1.UPLOAD,
@@ -64253,7 +64258,9 @@ var ImagePicker = function ImagePicker(props) {
     }];
     if (props.defaultUrl) {
       result.push({
-        onClick: props.onDelete,
+        onClick: function onClick() {
+          return onChange(null);
+        },
         text: localeService.create(LOCALE$7.ACTION_DELETE),
         value: ACTION$1.DELETE,
         key: ACTION$1.DELETE,
@@ -64277,9 +64284,10 @@ var ImagePicker = function ImagePicker(props) {
   }), React__default.createElement("input", {
     type: 'file',
     className: styles$J['vitro-image-picker-input'],
-    ref: props.inputFileRef,
+    ref: inputFileRef,
+    onChange: onChange,
     accept: "image/*"
-  }), renderPrevie()));
+  }), renderPreview()));
 };
 
 var styles$K = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};