@vitrosoftware/common-ui-ts 1.1.40 → 1.1.42

package/css/std/controls/image-picker/image-picker.css

@@ -35,10 +35,18 @@
     background: var(--grey-grey-sh-50, rgba(228, 230, 236, 0.50));
 }
 
-.vitro-image-picker-icon {
-    width: 50%;
-    height: 50%;
-    margin: 0 auto;
+.vitro-image-picker-icon-wrapper {
+    width: 76px;
+    height: 76px;
+    display: inline-block;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.vitro-image-picker-icon-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .vitro-image-picker-input {

package/css/std/controls/lookup-picker/lookup-picker-value-list.css

@@ -12,6 +12,7 @@
 
 .vitro-value-list > :global(.ps) {
     padding-right: 0 !important;
+    max-height: 300px;
 }
 
 .vitro-value-list > :global(.ps) > div:first-child {

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.css

@@ -3084,6 +3084,7 @@
 
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq > .ps {
     padding-right: 0 !important;
+    max-height: 300px;
 }
 
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq > .ps > div:first-child {
@@ -4623,10 +4624,19 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     background: var(--grey-grey-sh-50, rgba(228, 230, 236, 0.50));
 }
 
-._image-picker_vitro-image-picker-icon_1q7KZiW {
-    width: 50%;
-    height: 50%;
-    margin: 0 auto;
+._image-picker_vitro-image-picker-icon-wrapper_3DNyLS0 {
+    width: 76px;
+    height: 76px;
+    display: inline-block;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+._image-picker_vitro-image-picker-icon-wrapper_3DNyLS0 img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
 }
 
 ._image-picker_vitro-image-picker-input_12jFFNU {

package/dist/index.js

@@ -60812,7 +60812,7 @@ var Avatar = function Avatar(props) {
   };
   var getBackground = function getBackground() {
     if (props.image) {
-      return props.image;
+      return "url(\"" + props.image + "\")";
     } else if (props.userName) {
       return getBgColor(props.userName);
     }
@@ -60843,9 +60843,10 @@ var Avatar = function Avatar(props) {
   return React__default.createElement("div", {
     className: className,
     style: {
-      background: getBackground()
+      background: getBackground(),
+      backgroundSize: props.image ? "cover" : undefined
     }
-  }, getInitials());
+  }, props.image ? null : getInitials());
 };
 
 var styles$i = {"vitro-issue-tile-header":"_issue-tile-header_vitro-issue-tile-header_jTcaXBE","vitro-link":"_issue-tile-header_vitro-link_9DQ3Bqk","vitro-user-info":"_issue-tile-header_vitro-user-info_16Yhluy","vitro-avatar":"_issue-tile-header_vitro-avatar_3rf1BME","vitro-dropdown-button":"_issue-tile-header_vitro-dropdown-button_1-7nI-k"};
@@ -64033,6 +64034,7 @@ var UserProfile = function UserProfile(props) {
     className: styles$D['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
+    image: props.image,
     isBigSize: true
   }))), React__default.createElement(DropdownMenu$2, {
     right: true
@@ -64203,7 +64205,7 @@ var MessageInput = function MessageInput(props) {
   }));
 };
 
-var styles$J = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon":"_image-picker_vitro-image-picker-icon_1q7KZiW","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
+var styles$J = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon-wrapper":"_image-picker_vitro-image-picker-icon-wrapper_3DNyLS0","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
 
 var ACTION$1;
 (function (ACTION) {
@@ -64218,12 +64220,33 @@ var LOCALE$7;
 
 var ImagePicker = function ImagePicker(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  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']
+      }, React__default.createElement(Icon, {
+        defaultUrl: props.defaultUrl,
+        className: props.classNameIcon ? props.classNameIcon : styles$J['vitro-image-picker-icon']
+      }));
+    } else {
+      return React__default.createElement("div", {
+        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$J['vitro-image-picker-defaultIcon-wrapper']
+      }, React__default.createElement("div", {
+        className: styles$J['vitro-icon-default']
+      }));
+    }
+  };
+  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,
@@ -64235,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,
@@ -64259,16 +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/*"
-  }), props.defaultUrl ? React__default.createElement(Icon, {
-    defaultUrl: props.defaultUrl,
-    className: props.classNameIcon ? props.classNameIcon : styles$J['vitro-image-picker-icon']
-  }) : React__default.createElement("div", {
-    className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$J['vitro-image-picker-defaultIcon-wrapper']
-  }, React__default.createElement("div", {
-    className: styles$J['vitro-icon-default']
-  }))));
+  }), 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"};