oa-componentbook 0.18.276 → 0.18.277
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/build/index.js
CHANGED
|
@@ -269,6 +269,12 @@ Object.defineProperty(exports, "DateDropDown", {
|
|
|
269
269
|
return _DateDropDown.default;
|
|
270
270
|
}
|
|
271
271
|
});
|
|
272
|
+
Object.defineProperty(exports, "DocUploadCardWidget", {
|
|
273
|
+
enumerable: true,
|
|
274
|
+
get: function get() {
|
|
275
|
+
return _DocUploadCardWidget.default;
|
|
276
|
+
}
|
|
277
|
+
});
|
|
272
278
|
Object.defineProperty(exports, "DocUploadWidget", {
|
|
273
279
|
enumerable: true,
|
|
274
280
|
get: function get() {
|
|
@@ -488,6 +494,7 @@ Object.defineProperty(exports, "typographyOptions", {
|
|
|
488
494
|
var _Accordion = _interopRequireDefault(require("./components/oa-component-accordion/Accordion"));
|
|
489
495
|
var _CustomDetails = _interopRequireDefault(require("./widgets/oa-widget-custom-details/CustomDetails"));
|
|
490
496
|
var _DocUploadWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload/DocUploadWidget"));
|
|
497
|
+
var _DocUploadCardWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload-card/DocUploadCardWidget"));
|
|
491
498
|
var _BarChart = _interopRequireDefault(require("./components/oa-component-bar-chart/BarChart"));
|
|
492
499
|
var _BorderRadiusDemo = _interopRequireDefault(require("./components/oa-component-demo-border-radius/BorderRadiusDemo"));
|
|
493
500
|
var _ColorVariablesDemo = _interopRequireDefault(require("./components/oa-component-demo-color-variables/ColorVariablesDemo"));
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.weak-map.js");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
require("core-js/modules/es.promise.js");
|
|
9
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _icons = require("@ant-design/icons");
|
|
13
|
+
var _antd = require("antd");
|
|
14
|
+
var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
|
|
15
|
+
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
16
|
+
var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
|
|
17
|
+
var _styles = require("./styles");
|
|
18
|
+
var _PdfSampleImage = _interopRequireDefault(require("../../images/PdfSampleImage.png"));
|
|
19
|
+
var _upload = _interopRequireDefault(require("../../images/upload.svg"));
|
|
20
|
+
var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
|
|
21
|
+
var _CustomUpload = _interopRequireDefault(require("../../components/oa-component-upload/CustomUpload"));
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
24
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
|
+
const getBase64 = file => new Promise((resolve, reject) => {
|
|
26
|
+
const reader = new FileReader();
|
|
27
|
+
reader.readAsDataURL(file);
|
|
28
|
+
reader.onload = () => resolve(reader.result);
|
|
29
|
+
reader.onerror = error => reject(error);
|
|
30
|
+
});
|
|
31
|
+
const downloadFile = (base64String, fileName) => {
|
|
32
|
+
const link = document.createElement('a');
|
|
33
|
+
link.href = base64String;
|
|
34
|
+
link.download = fileName || 'download';
|
|
35
|
+
link.click();
|
|
36
|
+
};
|
|
37
|
+
function DocumentUploadCard(props) {
|
|
38
|
+
const {
|
|
39
|
+
uploadedDocuments = [],
|
|
40
|
+
onChange,
|
|
41
|
+
multipleDoc,
|
|
42
|
+
showDelete,
|
|
43
|
+
subText,
|
|
44
|
+
heading,
|
|
45
|
+
formName,
|
|
46
|
+
getPreview,
|
|
47
|
+
infoText,
|
|
48
|
+
isMandatory
|
|
49
|
+
} = props;
|
|
50
|
+
const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
|
|
51
|
+
const [previewImage, setPreviewImage] = (0, _react.useState)(null);
|
|
52
|
+
const [previewTitle, setPreviewTitle] = (0, _react.useState)('');
|
|
53
|
+
const [loading, setLoading] = (0, _react.useState)(false);
|
|
54
|
+
const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
|
|
55
|
+
const handleCancel = () => setPreviewOpen(false);
|
|
56
|
+
function isImageFile(fileName) {
|
|
57
|
+
var _fileName$split;
|
|
58
|
+
// Extract the file extension from the file name
|
|
59
|
+
const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split('.')) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
|
|
60
|
+
|
|
61
|
+
// Define an array of image file extensions
|
|
62
|
+
const imageFileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
|
|
63
|
+
|
|
64
|
+
// Check if the file extension is in the array of image file extensions
|
|
65
|
+
if (imageFileExtensions.indexOf(fileExtension) !== -1) {
|
|
66
|
+
return true;
|
|
67
|
+
}
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
70
|
+
(0, _react.useEffect)(() => {
|
|
71
|
+
setFileList(uploadedDocuments);
|
|
72
|
+
}, [uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length]);
|
|
73
|
+
const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
|
|
74
|
+
style: {
|
|
75
|
+
border: 0,
|
|
76
|
+
background: 'none'
|
|
77
|
+
},
|
|
78
|
+
type: "button"
|
|
79
|
+
}, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
|
|
80
|
+
className: "UploadImg",
|
|
81
|
+
alt: "phone img",
|
|
82
|
+
src: _upload.default
|
|
83
|
+
}), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
|
|
84
|
+
return /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, (heading || subText) && /*#__PURE__*/_react.default.createElement("div", {
|
|
85
|
+
className: "uploadSecPad"
|
|
86
|
+
}, heading && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
87
|
+
color: "primary-content",
|
|
88
|
+
className: "type-t2-700"
|
|
89
|
+
}, heading, isMandatory && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
90
|
+
color: "negative"
|
|
91
|
+
}, " *"))), subText && /*#__PURE__*/_react.default.createElement("div", {
|
|
92
|
+
style: {
|
|
93
|
+
whiteSpace: 'pre-line'
|
|
94
|
+
}
|
|
95
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
96
|
+
color: "secondary-content",
|
|
97
|
+
className: "type-b2-400"
|
|
98
|
+
}, subText)), infoText && /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
|
|
99
|
+
color: "background-warning",
|
|
100
|
+
description: infoText
|
|
101
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
102
|
+
className: "uploadDiv "
|
|
103
|
+
}, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
|
|
104
|
+
theme: {
|
|
105
|
+
token: {
|
|
106
|
+
colorBorder: _ColorVariablesMap.default['--color-primary'],
|
|
107
|
+
borderRadiusLG: 4,
|
|
108
|
+
colorPrimaryBorder: _ColorVariablesMap.default['--color-divider'],
|
|
109
|
+
colorFillAlter: _ColorVariablesMap.default['--color-secondary-background'],
|
|
110
|
+
colorError: _ColorVariablesMap.default['--color-negative'],
|
|
111
|
+
colorText: _ColorVariablesMap.default['--color-primary']
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomUpload.default, props)))));
|
|
115
|
+
}
|
|
116
|
+
DocumentUploadCard.propTypes = {
|
|
117
|
+
uploadedDocuments: _propTypes.default.array,
|
|
118
|
+
onChange: _propTypes.default.func,
|
|
119
|
+
subText: _propTypes.default.string,
|
|
120
|
+
heading: _propTypes.default.string,
|
|
121
|
+
formName: _propTypes.default.string,
|
|
122
|
+
infoText: _propTypes.default.string,
|
|
123
|
+
showDelete: _propTypes.default.bool,
|
|
124
|
+
multipleDoc: _propTypes.default.number,
|
|
125
|
+
getPreview: _propTypes.default.func,
|
|
126
|
+
// Define the getPreview prop type
|
|
127
|
+
isMandatory: _propTypes.default.bool
|
|
128
|
+
};
|
|
129
|
+
DocumentUploadCard.defaultProps = {
|
|
130
|
+
uploadedDocuments: [],
|
|
131
|
+
onChange: () => {},
|
|
132
|
+
subText: '',
|
|
133
|
+
heading: '',
|
|
134
|
+
formName: '',
|
|
135
|
+
infoText: '',
|
|
136
|
+
multipleDoc: 0,
|
|
137
|
+
showDelete: true,
|
|
138
|
+
getPreview: () => {},
|
|
139
|
+
isMandatory: true
|
|
140
|
+
};
|
|
141
|
+
var _default = exports.default = DocumentUploadCard;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledSection = exports.MainStyleSec = void 0;
|
|
7
|
+
var _antd = require("antd");
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _templateObject, _templateObject2;
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
|
+
const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-form-item{\n margin-bottom: 0;\n}\n.ant-upload button{\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n} \n.uploadDiv{\n width: 96px;\n position: relative;\n}\n.uploadDiv em{\n position: absolute;\n right: -9px;\n top: -9px;\n font-style: normal;\n width: 20px;\n height: 20px;\n background: var(--color-warning);\n z-index: 9;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n color: #fff;\n font-size: 12px;\n line-height: 0;\n}\n.UploadImg img{\n height: 24px;\n width: 24px;\n\n}\n.UploadImg{\n justify-content: center;\n cursor: pointer;\n}\n.uploadSecPad div{\n padding: 0 0 8px;\n}\n.anticon-upload{\n font-size: 24px;\n}\n.uploadSecPad{\n width: 100%;\n}\n.uploadSecPad div:last-child{\n padding: 0;\n}\n display: flex;\n flex-direction: column;\n gap: 24px;\n .ant-upload-list-item-done,.ant-upload-list-item-A{\n border: 1px solid var(--color-divider) !important;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before{\n opacity: 1 !important;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before ant-upload-list-item-actions > a\n {\n background: red !important;\n }\n .ant-upload-list-item-actions{\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before{\n background: transparent;\n opacity: 1;\n }\n.ant-upload-list-item-actions button{\n background: #212121;\n border-radius: 50px;\n height: 24px !important;\n display: flex;\n align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n background: #212121;\n}\n .ant-upload-list-item-actions a{\n background: #212121;\n border-radius: 50px;\n height: 24px;\n display: flex;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n opacity: 1;\n }\n .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n opacity: 1 !important;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n color: #fff;\n }\n @media only screen and (max-width: 600px) {\n .uploadDiv {\n width: 64px;\n }\n .uploadDiv em{\n width: 16px;\n height: 16px;\n }\n }\n"])));
|
|
13
|
+
const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n gap: 16px;\n justify-content: space-between;\n h2{\n margin: 0;\n }\n .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n width: 96px;\n height: 96px;\n margin: 0;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n width: 96px !important;\n height: 96px !important;\n margin: 0;\n }\n @media only screen and (max-width: 600px) {\n .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n width: 64px;\n height: 64px;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n width: 64px !important;\n height: 64px !important;\n }\n .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n font-size:12px;\n margin: 0 !important;\n padding: 0 !important;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .ant-upload-list-item-actions button {\n height: 16px!important;\n width: 16px !important;\n justify-content: center;\n }\n .ant-upload-list-item-actions a {\n height: 16px;\n width: 16px !important;\n align-items: center;\n justify-content: center;\n}\n .ant-upload-list-item-actions {\n gap: 8px;\n }\n .ant-upload button span + div{\n display: none;\n }\n }\n"])));
|
|
@@ -18,7 +18,8 @@ function ReimbursementBreakupWidget(props) {
|
|
|
18
18
|
cardData,
|
|
19
19
|
closeBreakUpModal,
|
|
20
20
|
'data-test': dataTest,
|
|
21
|
-
visible
|
|
21
|
+
visible,
|
|
22
|
+
heading
|
|
22
23
|
} = props;
|
|
23
24
|
const btnConfig = [{
|
|
24
25
|
label: 'Okay',
|
|
@@ -36,7 +37,7 @@ function ReimbursementBreakupWidget(props) {
|
|
|
36
37
|
};
|
|
37
38
|
return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
|
|
38
39
|
open: visible,
|
|
39
|
-
title:
|
|
40
|
+
title: heading,
|
|
40
41
|
onClose: closeBreakUpModal
|
|
41
42
|
}, /*#__PURE__*/_react.default.createElement(_styles.WidgetContainer, null, cardData === null || cardData === void 0 ? void 0 : cardData.map(item => {
|
|
42
43
|
var _item$tableRows, _item$tableRows2;
|
|
@@ -100,11 +101,13 @@ ReimbursementBreakupWidget.propTypes = {
|
|
|
100
101
|
})),
|
|
101
102
|
closeBreakUpModal: _propTypes.default.func,
|
|
102
103
|
'data-test': _propTypes.default.string,
|
|
103
|
-
visible: _propTypes.default.bool
|
|
104
|
+
visible: _propTypes.default.bool,
|
|
105
|
+
heading: _propTypes.default.string
|
|
104
106
|
};
|
|
105
107
|
ReimbursementBreakupWidget.defaultProps = {
|
|
106
108
|
cardData: null,
|
|
107
109
|
closeBreakUpModal: () => {},
|
|
108
110
|
'data-test': null,
|
|
109
|
-
visible: true
|
|
111
|
+
visible: true,
|
|
112
|
+
heading: 'Reimbursement Amount breakup'
|
|
110
113
|
};
|