hrm_ui_lib 4.0.17 → 4.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,7 +18,7 @@ export const Avatar = ({ dataTestId, id, color = 'default', size = 'medium', typ
|
|
|
18
18
|
}, [imagePath]);
|
|
19
19
|
return (_jsxs("div", { id: id, "data-test-id": dataTestId, className: classNames(`avatar avatar--${color} avatar--${type} avatar--${size}`, className, {
|
|
20
20
|
'avatar--edit': isEditable
|
|
21
|
-
}), children: [_jsx("div", { className: classNames({
|
|
21
|
+
}), onClick: onAvatarClick, children: [_jsx("div", { className: classNames({
|
|
22
22
|
'avatar--image': image
|
|
23
|
-
}),
|
|
23
|
+
}), style: style }), !image ? initials : null, isEditable && (_jsx(FileUpload, { onError: onError, fileAllowedSize: fileAllowedSize, multiple: false, withFilePreview: false, getFiles: getFiles, allowedTypes: allowedTypes, mode: FileUploadMode.edit }))] }));
|
|
24
24
|
};
|
|
@@ -16,6 +16,6 @@ export const AvatarGroup = ({ avatarGroup = [], onAddUser, size = 'medium', maxC
|
|
|
16
16
|
const visibleAvatars = avatarGroup.slice(0, visibleAvatarsAmount);
|
|
17
17
|
const invisibleAvatarsAmount = avatarGroup.length - visibleAvatarsAmount > 0 ? avatarGroup.length - visibleAvatarsAmount : 0;
|
|
18
18
|
return (_jsxs("div", { className: classNames(`avatar-group avatar-group--${size}`), children: [visibleAvatars.map((avatar, index) => {
|
|
19
|
-
return (_jsxs("div", { className: 'avatar-group__item', children: [avatar.tooltipContent ? (_jsx(Tooltip, { text: avatar.tooltipContent, id: `${index}`, position: Positions.TOP_CENTER })) : null, _jsx(Avatar, { dataTestId: dataTestId, id: `${index}`, size: size
|
|
19
|
+
return (_jsxs("div", { className: 'avatar-group__item', children: [avatar.tooltipContent ? (_jsx(Tooltip, { text: avatar.tooltipContent, id: `${index}`, position: Positions.TOP_CENTER })) : null, _jsx(Avatar, Object.assign({}, avatar, { dataTestId: dataTestId, id: `${index}`, size: size }))] }, index));
|
|
20
20
|
}), invisibleAvatarsAmount ? (_jsxs("div", { className: "avatar-group__item", children: [_jsx(Tooltip, { text: 'Name Surname', id: 'amountTooltip', position: Positions.TOP_CENTER }), _jsx(Avatar, { type: 'count', size: size, id: 'amountTooltip', initials: `+${invisibleAvatarsAmount}` })] })) : null, onAddUser ? (_jsx("div", { className: classNames(`avatar avatar-group__add avatar--${size}`), onClick: onAddUser, children: _jsx(IconAdd, { type: "disabled", size: size }) })) : null] }));
|
|
21
21
|
};
|
|
@@ -15,7 +15,7 @@ export interface TAvatarProps extends IFormCompProps {
|
|
|
15
15
|
tooltipContent?: string | ReactElement;
|
|
16
16
|
onError?: (type: FILE_UPLOAD_ERRORS) => void;
|
|
17
17
|
fileAllowedSize?: number;
|
|
18
|
-
onAvatarClick?: () => void;
|
|
18
|
+
onAvatarClick?: (event: React.MouseEvent<any>) => void;
|
|
19
19
|
}
|
|
20
20
|
export interface TAvatarGroupProps extends IBaseProps {
|
|
21
21
|
avatarGroup: TAvatarProps[];
|
|
@@ -66,5 +66,5 @@ export const FileUpload = (props) => {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}, [files, removeFiles]);
|
|
69
|
-
return (_jsxs("div", { className: "file-upload", "data-test-id": dataTestId, children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons, dataTestId: dataTestId ? `${dataTestId}-label` : '' }), _jsxs("div", { className: "file-upload__inner", children: [_jsx("input", { name: name, type: "file", multiple: multiple, className: "hide", ref: fileInputRef, accept: allowedTypes, "data-test-id": dataTestId ? `${dataTestId}-input` : '', onChange: handleChange }), mode === FileUploadMode.edit && (_jsx("div", { className: "edit__icon", "data-test-id": dataTestId ? `${dataTestId}-trigger` : '', onMouseEnter: onMouseEnterOrLeave, onMouseLeave: onMouseEnterOrLeave, onClick: onUploadClick, children: isHovered ? (_jsx(IconEditFilled, { size: "xxsmall", type: "secondary" })) : (_jsx(IconEdit, { size: "xxsmall", type: "secondary" })) })), mode === FileUploadMode.attach && (_jsx(Button, { type: "secondary", size: size, disabled: disabled, iconProps: iconProps, onClick: onUploadClick, buttonText: buttonText, isLoading: uploading, dataTestId: dataTestId ? `${dataTestId}-action` : '' })), _jsx(UploadItems, { handleFileClick: handleFileClick, onRemove: handleFileRemove, files: files, withFilePreview: withFilePreview, dataTestId: dataTestId })] })] }));
|
|
69
|
+
return (_jsxs("div", { className: "file-upload", "data-test-id": dataTestId, onClick: (event) => event.stopPropagation(), children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons, dataTestId: dataTestId ? `${dataTestId}-label` : '' }), _jsxs("div", { className: "file-upload__inner", children: [_jsx("input", { name: name, type: "file", multiple: multiple, className: "hide", ref: fileInputRef, accept: allowedTypes, "data-test-id": dataTestId ? `${dataTestId}-input` : '', onChange: handleChange }), mode === FileUploadMode.edit && (_jsx("div", { className: "edit__icon", "data-test-id": dataTestId ? `${dataTestId}-trigger` : '', onMouseEnter: onMouseEnterOrLeave, onMouseLeave: onMouseEnterOrLeave, onClick: onUploadClick, children: isHovered ? (_jsx(IconEditFilled, { size: "xxsmall", type: "secondary" })) : (_jsx(IconEdit, { size: "xxsmall", type: "secondary" })) })), mode === FileUploadMode.attach && (_jsx(Button, { type: "secondary", size: size, disabled: disabled, iconProps: iconProps, onClick: onUploadClick, buttonText: buttonText, isLoading: uploading, dataTestId: dataTestId ? `${dataTestId}-action` : '' })), _jsx(UploadItems, { handleFileClick: handleFileClick, onRemove: handleFileRemove, files: files, withFilePreview: withFilePreview, dataTestId: dataTestId })] })] }));
|
|
70
70
|
};
|