hrm_ui_lib 4.0.5 → 4.0.7
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.
- package/components/FileUpload/FileUpload.js +2 -2
- package/components/FileUpload/types.d.ts +3 -0
- package/components/SVGIcons/IconBedDouble.d.ts +4 -0
- package/components/SVGIcons/IconBedDouble.js +8 -0
- package/components/SVGIcons/IconCalendarDays.d.ts +4 -0
- package/components/SVGIcons/IconCalendarDays.js +8 -0
- package/components/SVGIcons/IconCar.d.ts +4 -0
- package/components/SVGIcons/IconCar.js +8 -0
- package/components/SVGIcons/IconCode.js +1 -1
- package/components/SVGIcons/IconCoins.js +1 -1
- package/components/SVGIcons/IconDownload.d.ts +4 -0
- package/components/SVGIcons/IconDownload.js +8 -0
- package/components/SVGIcons/IconPlane.d.ts +4 -0
- package/components/SVGIcons/IconPlane.js +8 -0
- package/components/SVGIcons/IconUpload2.d.ts +4 -0
- package/components/SVGIcons/IconUpload2.js +8 -0
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ import IconEditFilled from '../SVGIcons/IconEditFilled';
|
|
|
10
10
|
import IconEdit from '../SVGIcons/IconEdit';
|
|
11
11
|
import IconAttach from '../SVGIcons/IconAttach';
|
|
12
12
|
export const FileUpload = (props) => {
|
|
13
|
-
const { allowedTypes = 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd', label, getFiles, removeFiles, handleFileClick, name, setFieldValue, toBase64, required, disabled, buttonText, withFilePreview = true, multiple = true, uploadedFiles, value, labelAddons, onError, fileAllowedSize, mode = FileUploadMode.attach, dataTestId = '' } = props;
|
|
13
|
+
const { allowedTypes = 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd', label, getFiles, removeFiles, handleFileClick, name, setFieldValue, toBase64, required, disabled, buttonText, withFilePreview = true, multiple = true, uploadedFiles, value, labelAddons, onError, fileAllowedSize, mode = FileUploadMode.attach, size = 'medium', iconProps = { Component: IconAttach }, dataTestId = '' } = props;
|
|
14
14
|
const files = value || uploadedFiles || [];
|
|
15
15
|
const fileInputRef = useRef(null);
|
|
16
16
|
const [isHovered, setHoverState] = useState(false);
|
|
@@ -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:
|
|
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, dataTestId: dataTestId ? `${dataTestId}-action` : '' })), _jsx(UploadItems, { handleFileClick: handleFileClick, onRemove: handleFileRemove, files: files, withFilePreview: withFilePreview, dataTestId: dataTestId })] })] }));
|
|
70
70
|
};
|
|
@@ -2,6 +2,7 @@ import { FILE_UPLOAD_ERRORS } from '../../consts';
|
|
|
2
2
|
import { FileTypeEnum, IBaseProps, IFormCompProps } from '../../type';
|
|
3
3
|
import { Dispatch, SetStateAction } from 'react';
|
|
4
4
|
import { Accept, DropzoneOptions } from 'react-dropzone';
|
|
5
|
+
import { TButtonPropTypes } from '../Button/types';
|
|
5
6
|
export interface TFileUploadProps extends IFormCompProps {
|
|
6
7
|
allowedTypes?: string;
|
|
7
8
|
label?: string | React.ReactElement;
|
|
@@ -20,6 +21,8 @@ export interface TFileUploadProps extends IFormCompProps {
|
|
|
20
21
|
labelAddons?: React.ReactElement;
|
|
21
22
|
onError?: (errorType: FILE_UPLOAD_ERRORS) => void;
|
|
22
23
|
fileAllowedSize?: number;
|
|
24
|
+
size?: TButtonPropTypes['size'];
|
|
25
|
+
iconProps?: TButtonPropTypes['iconProps'];
|
|
23
26
|
}
|
|
24
27
|
export declare enum FileUploadMode {
|
|
25
28
|
edit = "edit",
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const IconBedDouble = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
|
|
4
|
+
[`svg-icon__size-${size}`]: size,
|
|
5
|
+
[`svg-icon__type-${type}`]: type,
|
|
6
|
+
[className]: className
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8", fill: "none" }), _jsx("path", { d: "M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4", fill: "none" }), _jsx("path", { d: "M12 4v6", fill: "none" }), _jsx("path", { d: "M2 18h20", fill: "none" })] }));
|
|
8
|
+
export default IconBedDouble;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const IconCalendarDays = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
|
|
4
|
+
[`svg-icon__size-${size}`]: size,
|
|
5
|
+
[`svg-icon__type-${type}`]: type,
|
|
6
|
+
[className]: className
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M8 2v4", fill: "none" }), _jsx("path", { d: "M16 2v4", fill: "none" }), _jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", fill: "none" }), _jsx("path", { d: "M3 10h18", fill: "none" }), _jsx("path", { d: "M8 14h.01", fill: "none" }), _jsx("path", { d: "M12 14h.01", fill: "none" }), _jsx("path", { d: "M16 14h.01", fill: "none" }), _jsx("path", { d: "M8 18h.01", fill: "none" }), _jsx("path", { d: "M12 18h.01", fill: "none" }), _jsx("path", { d: "M16 18h.01", fill: "none" })] }));
|
|
8
|
+
export default IconCalendarDays;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const IconCar = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
|
|
4
|
+
[`svg-icon__size-${size}`]: size,
|
|
5
|
+
[`svg-icon__type-${type}`]: type,
|
|
6
|
+
[className]: className
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2", fill: "none" }), _jsx("circle", { cx: "7", cy: "17", r: "2", fill: "none" }), _jsx("path", { d: "M9 17h6", fill: "none" }), _jsx("circle", { cx: "17", cy: "17", r: "2", fill: "none" })] }));
|
|
8
|
+
export default IconCar;
|
|
@@ -4,5 +4,5 @@ const IconCode = ({ size, type, className = '', onClick, refHandler, id, dataTes
|
|
|
4
4
|
[`svg-icon__size-${size}`]: size,
|
|
5
5
|
[`svg-icon__type-${type}`]: type,
|
|
6
6
|
[className]: className
|
|
7
|
-
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("polyline", { points: "18,16 22,12 18,8", fill: "none" }), _jsx("polyline", { points: "6,8 2,12 6,16", fill: "none" }), _jsx("line", { x1: "14.5", y1: "4", x2: "9.5", y2: "20", fill: "none" })] }));
|
|
8
8
|
export default IconCode;
|
|
@@ -4,5 +4,5 @@ const IconCoins = ({ size, type, className = '', onClick, refHandler, id, dataTe
|
|
|
4
4
|
[`svg-icon__size-${size}`]: size,
|
|
5
5
|
[`svg-icon__type-${type}`]: type,
|
|
6
6
|
[className]: className
|
|
7
|
-
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", {
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", fill: "none" }), _jsx("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18", fill: "none" }), _jsx("path", { d: "M7 6h1v4", fill: "none" }), _jsx("path", { d: "m16.71 13.88.7.71-2.82 2.82", fill: "none" })] }));
|
|
8
8
|
export default IconCoins;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const IconDownload = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
|
|
4
|
+
[`svg-icon__size-${size}`]: size,
|
|
5
|
+
[`svg-icon__type-${type}`]: type,
|
|
6
|
+
[className]: className
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 15V3", fill: "none" }), _jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", fill: "none" }), _jsx("path", { d: "m7 10 5 5 5-5", fill: "none" })] }));
|
|
8
|
+
export default IconDownload;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const IconPlane = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
|
|
4
|
+
[`svg-icon__size-${size}`]: size,
|
|
5
|
+
[`svg-icon__type-${type}`]: type,
|
|
6
|
+
[className]: className
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z", fill: "none" }) }));
|
|
8
|
+
export default IconPlane;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const IconUpload2 = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
|
|
4
|
+
[`svg-icon__size-${size}`]: size,
|
|
5
|
+
[`svg-icon__type-${type}`]: type,
|
|
6
|
+
[className]: className
|
|
7
|
+
}), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 3v12", fill: "none" }), _jsx("path", { d: "m17 8-5-5-5 5", fill: "none" }), _jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", fill: "none" })] }));
|
|
8
|
+
export default IconUpload2;
|