oa-componentbook 0.18.90 → 0.18.92
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/components/oa-component-dropdown/CustomDropdown.js +40 -28
- package/build/components/oa-component-dropdown/customClass.css +9 -0
- package/build/global-css/CustomDropDownThemes.js +31 -0
- package/build/images/offer.svg +3 -0
- package/build/index.js +7 -7
- package/build/widgets/oa-widget-card/MembershipCard.js +22 -7
- package/build/widgets/oa-widget-card/styles.js +1 -1
- package/build/widgets/oa-widget-document-upload/{UploadUploadWidget.js → DocUploadWidget.js} +63 -35
- package/package.json +1 -1
|
@@ -6,60 +6,72 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = CustomDropdown;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _icons = require("@ant-design/icons");
|
|
10
9
|
var _antd = require("antd");
|
|
11
10
|
var _KeyboardArrowDownOutlined = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDownOutlined"));
|
|
12
|
-
var
|
|
13
|
-
var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
|
|
11
|
+
var _CustomDropDownThemes = _interopRequireDefault(require("../../global-css/CustomDropDownThemes"));
|
|
14
12
|
var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
|
|
15
13
|
var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
|
|
16
14
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
15
|
+
require("./customClass.css");
|
|
17
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
17
|
function CustomDropdown(_ref) {
|
|
19
18
|
var _displayText$split;
|
|
20
19
|
let {
|
|
21
20
|
displayText,
|
|
22
|
-
items
|
|
21
|
+
items,
|
|
22
|
+
children,
|
|
23
|
+
firstLetterIcon,
|
|
24
|
+
trigger,
|
|
25
|
+
placement,
|
|
26
|
+
type
|
|
27
|
+
// dropDownHeading,
|
|
23
28
|
} = _ref;
|
|
24
|
-
const firstLetter = ((_displayText$split = displayText.split(' ')) === null || _displayText$split === void 0 || (_displayText$split = _displayText$split[1]) === null || _displayText$split === void 0 ? void 0 : _displayText$split.charAt(0).toUpperCase()) || 'H'; // Extract the first letter
|
|
29
|
+
const firstLetter = (displayText === null || displayText === void 0 || (_displayText$split = displayText.split(' ')) === null || _displayText$split === void 0 || (_displayText$split = _displayText$split[1]) === null || _displayText$split === void 0 ? void 0 : _displayText$split.charAt(0).toUpperCase()) || 'H'; // Extract the first letter after Hi.
|
|
25
30
|
|
|
26
31
|
return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
|
|
27
32
|
theme: {
|
|
28
|
-
token:
|
|
29
|
-
colorText: _ColorVariablesMap.default['--color-primary-content'],
|
|
30
|
-
controlPaddingHorizontal: 24,
|
|
31
|
-
controlItemBgHover: _ColorVariablesMap.default['--color-secondary-background'],
|
|
32
|
-
borderRadiusLG: 4,
|
|
33
|
-
colorTextDisabled: _ColorVariablesMap.default['--color-divider'],
|
|
34
|
-
paddingXXS: 0
|
|
35
|
-
},
|
|
33
|
+
token: _CustomDropDownThemes.default[type],
|
|
36
34
|
components: {
|
|
37
35
|
Dropdown: {
|
|
38
|
-
paddingBlock:
|
|
36
|
+
paddingBlock: 1200
|
|
39
37
|
}
|
|
40
38
|
}
|
|
41
39
|
}
|
|
42
|
-
}, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
|
|
40
|
+
}, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetterIcon && firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
|
|
43
41
|
menu: {
|
|
44
42
|
items
|
|
45
43
|
},
|
|
46
|
-
trigger:
|
|
47
|
-
placement:
|
|
48
|
-
|
|
44
|
+
trigger: trigger,
|
|
45
|
+
placement: placement,
|
|
46
|
+
overlayClassName: type === 'primary' ? 'primaryDropdownClass' : undefined
|
|
47
|
+
}, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_antd.Space, null, displayText && displayText.length && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
49
48
|
color: "primary-content",
|
|
50
|
-
typography: "type-
|
|
51
|
-
}, displayText),
|
|
49
|
+
typography: "type-button-500"
|
|
50
|
+
}, displayText), children)))));
|
|
51
|
+
}
|
|
52
|
+
CustomDropdown.propTypes = {
|
|
53
|
+
displayText: _propTypes.default.string,
|
|
54
|
+
items: _propTypes.default.array,
|
|
55
|
+
children: _propTypes.default.node,
|
|
56
|
+
firstLetterIcon: _propTypes.default.bool,
|
|
57
|
+
trigger: _propTypes.default.string,
|
|
58
|
+
placement: _propTypes.default.string,
|
|
59
|
+
type: _propTypes.default.string
|
|
60
|
+
// dropDownHeading: PropTypes.string,
|
|
61
|
+
};
|
|
62
|
+
CustomDropdown.defaultProps = {
|
|
63
|
+
items: [],
|
|
64
|
+
displayText: '',
|
|
65
|
+
children: /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
52
66
|
color: "primary",
|
|
53
67
|
typography: "type-t2-700"
|
|
54
68
|
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
55
69
|
icon: _KeyboardArrowDownOutlined.default,
|
|
56
70
|
size: 20
|
|
57
|
-
}))
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
CustomDropdown.defaultProps = {
|
|
64
|
-
items: []
|
|
71
|
+
})),
|
|
72
|
+
firstLetterIcon: false,
|
|
73
|
+
trigger: ['click'],
|
|
74
|
+
placement: 'bottomRight',
|
|
75
|
+
type: 'default'
|
|
76
|
+
// dropDownHeading: '',
|
|
65
77
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
.primaryDropdownClass .ant-dropdown-menu {
|
|
2
|
+
padding: 8px 0;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
min-width: 186px;
|
|
5
|
+
}
|
|
6
|
+
.primaryDropdownClass .ant-dropdown-menu .ant-dropdown-menu-item {
|
|
7
|
+
padding: 12px;
|
|
8
|
+
}
|
|
9
|
+
.primaryDropdownClass .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled):hover{ background-color:#FBE5DF; color: #DE350B;}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _ColorVariablesMap = _interopRequireDefault(require("./ColorVariablesMap"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const TypographiesMap = {
|
|
10
|
+
default: {
|
|
11
|
+
colorText: _ColorVariablesMap.default['--color-primary-content'],
|
|
12
|
+
controlPaddingHorizontal: 24,
|
|
13
|
+
controlItemBgHover: _ColorVariablesMap.default['--color-secondary-background'],
|
|
14
|
+
borderRadiusLG: 4,
|
|
15
|
+
colorTextDisabled: _ColorVariablesMap.default['--color-divider'],
|
|
16
|
+
paddingXXS: 0
|
|
17
|
+
},
|
|
18
|
+
primary: {
|
|
19
|
+
colorText: _ColorVariablesMap.default['--color-primary'],
|
|
20
|
+
controlPaddingHorizontal: 24,
|
|
21
|
+
controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
|
|
22
|
+
borderRadiusLG: 8,
|
|
23
|
+
colorTextDisabled: _ColorVariablesMap.default['--color-divider'],
|
|
24
|
+
paddingXXS: 0,
|
|
25
|
+
paddingXS: 8,
|
|
26
|
+
boxShadowSecondary: '0px 4px 32px 0px rgba(0, 0, 0, 0.14)',
|
|
27
|
+
borderRadiusSM: 0,
|
|
28
|
+
colorError: _ColorVariablesMap.default['--color-negative']
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
var _default = exports.default = TypographiesMap;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M21.41 11.58L12.41 2.58C12.05 2.22 11.55 2 11 2H4C2.9 2 2 2.9 2 4V11C2 11.55 2.22 12.05 2.59 12.42L11.59 21.42C11.95 21.78 12.45 22 13 22C13.55 22 14.05 21.78 14.41 21.41L21.41 14.41C21.78 14.05 22 13.55 22 13C22 12.45 21.77 11.94 21.41 11.58ZM5.5 7C4.67 7 4 6.33 4 5.5C4 4.67 4.67 4 5.5 4C6.33 4 7 4.67 7 5.5C7 6.33 6.33 7 5.5 7Z" fill="#FF991F"/>
|
|
3
|
+
</svg>
|
package/build/index.js
CHANGED
|
@@ -221,6 +221,12 @@ Object.defineProperty(exports, "CustomTooltip", {
|
|
|
221
221
|
return _CustomTooltip.default;
|
|
222
222
|
}
|
|
223
223
|
});
|
|
224
|
+
Object.defineProperty(exports, "DocUploadWidget", {
|
|
225
|
+
enumerable: true,
|
|
226
|
+
get: function get() {
|
|
227
|
+
return _DocUploadWidget.default;
|
|
228
|
+
}
|
|
229
|
+
});
|
|
224
230
|
Object.defineProperty(exports, "Elevation", {
|
|
225
231
|
enumerable: true,
|
|
226
232
|
get: function get() {
|
|
@@ -359,12 +365,6 @@ Object.defineProperty(exports, "UploadDownloadWidget", {
|
|
|
359
365
|
return _UploadDownloadWidget.default;
|
|
360
366
|
}
|
|
361
367
|
});
|
|
362
|
-
Object.defineProperty(exports, "UploadUploadWidget", {
|
|
363
|
-
enumerable: true,
|
|
364
|
-
get: function get() {
|
|
365
|
-
return _UploadUploadWidget.default;
|
|
366
|
-
}
|
|
367
|
-
});
|
|
368
368
|
Object.defineProperty(exports, "ViewHistoryWidget", {
|
|
369
369
|
enumerable: true,
|
|
370
370
|
get: function get() {
|
|
@@ -403,7 +403,7 @@ Object.defineProperty(exports, "typographyOptions", {
|
|
|
403
403
|
});
|
|
404
404
|
var _Accordion = _interopRequireDefault(require("./components/oa-component-accordion/Accordion"));
|
|
405
405
|
var _CustomDetails = _interopRequireDefault(require("./widgets/oa-widget-custom-details/CustomDetails"));
|
|
406
|
-
var
|
|
406
|
+
var _DocUploadWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload/DocUploadWidget"));
|
|
407
407
|
var _BarChart = _interopRequireDefault(require("./components/oa-component-bar-chart/BarChart"));
|
|
408
408
|
var _BorderRadiusDemo = _interopRequireDefault(require("./components/oa-component-demo-border-radius/BorderRadiusDemo"));
|
|
409
409
|
var _ColorVariablesDemo = _interopRequireDefault(require("./components/oa-component-demo-color-variables/ColorVariablesDemo"));
|
|
@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
12
12
|
var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
|
|
13
13
|
var _CloseOutlined = _interopRequireDefault(require("@material-ui/icons/CloseOutlined"));
|
|
14
14
|
var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
|
|
15
|
+
var _ArrowForwardIosSharp = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosSharp"));
|
|
15
16
|
var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
|
|
16
17
|
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
17
18
|
var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
|
|
@@ -19,13 +20,14 @@ var _CustomModal = _interopRequireDefault(require("../../components/oa-component
|
|
|
19
20
|
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
20
21
|
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
21
22
|
var _iphone = _interopRequireDefault(require("../../images/iphone.svg"));
|
|
23
|
+
var _offer = _interopRequireDefault(require("../../images/offer.svg"));
|
|
22
24
|
var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
|
|
23
25
|
var _styles = require("./styles");
|
|
24
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
27
|
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); }
|
|
26
28
|
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; }
|
|
27
29
|
function MembershipCard(_ref) {
|
|
28
|
-
var _body$itemsList, _body$itemsList2;
|
|
30
|
+
var _body$itemsList, _body$itemsList2, _footer$actions;
|
|
29
31
|
let {
|
|
30
32
|
card
|
|
31
33
|
} = _ref;
|
|
@@ -89,7 +91,13 @@ function MembershipCard(_ref) {
|
|
|
89
91
|
className: "primaryInfo"
|
|
90
92
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
91
93
|
className: "paraWithIcon"
|
|
92
|
-
},
|
|
94
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
|
|
95
|
+
style: {
|
|
96
|
+
width: '24px'
|
|
97
|
+
},
|
|
98
|
+
alt: "phone img",
|
|
99
|
+
src: _offer.default
|
|
100
|
+
}), /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
93
101
|
color: "primary-background",
|
|
94
102
|
className: "type-link-button-500"
|
|
95
103
|
}, primaryPanel.label))), /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -103,9 +111,9 @@ function MembershipCard(_ref) {
|
|
|
103
111
|
color: "primary-background",
|
|
104
112
|
icon: _ArrowForwardIos.default
|
|
105
113
|
}))), alert.length && alert.map((item, i) => {
|
|
106
|
-
var _item$description, _item$description2;
|
|
114
|
+
var _item$description, _item$description2, _item$description3, _item$description4;
|
|
107
115
|
return ((item === null || item === void 0 ? void 0 : item.subHeading) !== '' || (item === null || item === void 0 ? void 0 : item.heading) !== '' || (item === null || item === void 0 || (_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.text) !== undefined) && /*#__PURE__*/_react.default.createElement("div", {
|
|
108
|
-
className: "toolTipInfo ".concat(item.type)
|
|
116
|
+
className: item !== null && item !== void 0 && (_item$description2 = item.description) !== null && _item$description2 !== void 0 && _item$description2.text && (item === null || item === void 0 || (_item$description3 = item.description) === null || _item$description3 === void 0 ? void 0 : _item$description3.text) !== '' ? "toolTipInfo ".concat(item.type) : 'toolTipInfo flexChangeBody'
|
|
109
117
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
110
118
|
className: "toolTip"
|
|
111
119
|
}, item.tooltip && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
|
|
@@ -119,16 +127,23 @@ function MembershipCard(_ref) {
|
|
|
119
127
|
}, item === null || item === void 0 ? void 0 : item.subHeading)), (item === null || item === void 0 ? void 0 : item.heading) && /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
120
128
|
color: "primary-content",
|
|
121
129
|
className: "type-t2-700"
|
|
122
|
-
}, item === null || item === void 0 ? void 0 : item.heading)), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$
|
|
130
|
+
}, item === null || item === void 0 ? void 0 : item.heading)), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description4 = item.description) === null || _item$description4 === void 0 ? void 0 : _item$description4.text) && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
123
131
|
color: "primary-content",
|
|
124
132
|
className: "type-b2-400"
|
|
125
133
|
}, item.description.text)))), item.actions && /*#__PURE__*/_react.default.createElement("div", null, item.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
126
134
|
key: action.label,
|
|
127
135
|
label: action.label,
|
|
128
136
|
type: action.type,
|
|
129
|
-
onClick: action.name
|
|
137
|
+
onClick: action.name,
|
|
138
|
+
iconConfig: {
|
|
139
|
+
icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
140
|
+
icon: _ArrowForwardIosSharp.default,
|
|
141
|
+
size: 16
|
|
142
|
+
}),
|
|
143
|
+
position: 'right'
|
|
144
|
+
}
|
|
130
145
|
}))));
|
|
131
|
-
})), footer && /*#__PURE__*/_react.default.createElement(_styles.CardFooter, null, actions && actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
146
|
+
})), footer && (footer === null || footer === void 0 || (_footer$actions = footer.actions) === null || _footer$actions === void 0 ? void 0 : _footer$actions.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.CardFooter, null, actions && actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
132
147
|
key: action === null || action === void 0 ? void 0 : action.label,
|
|
133
148
|
label: action === null || action === void 0 ? void 0 : action.label,
|
|
134
149
|
type: action === null || action === void 0 ? void 0 : action.type,
|
|
@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\np,h2{\n margin: 0;\n}\n padding: 24px;\n background: var(--color-primary-background);\n border-radius: 12px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 0 24px;\n \n .primaryInfo{\n display: flex;\n padding: 12px 8px;\n justify-content: space-between;\n background: var(--color-primary);\n border-radius: 8px;\n }\n .paraWithIcon{\n display: flex;\n gap: 8px;\n align-items: center;\n }\n .toolTipInfo{\n display: flex;\n gap: 8px;\n background: var(--color-background-positive);\n padding: 12px;\n border-radius: 8px;\n justify-content: space-between;\n }\n .error{\n background: var(--color-background-negative);\n }\n .error svg{\n color: var(--color-negative);\n }\n .warning{\n background: var(--color-background-warning);\n }\n .warning svg{\n color: var(--color-warning);\n }\n .success{\n background: var(--color-background-positive);\n }\n .success svg{\n color: var(--color-positive);\n }\n .toolTip{\n display: flex;\n gap: 8px;\n }\n .cardHead{\n display: flex;\n justify-content: space-between;\n gap: 24px;\n }\n .imgBg{\n border-radius: 8px;\n background: #DEF1FB;\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .ant-modal-footer{\n display: none;\n }\n .toolTip svg{\n margin: 4px 0 0;\n }\n @media only screen and (max-width: 600px) {\n .toolTipInfo {\n flex-direction: column;\n align-items: end;\n }\n }\n"])));
|
|
11
|
+
const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.primaryInfo svg{\n cursor: pointer;\n}\np,h2{\n margin: 0;\n}\n padding: 24px;\n background: var(--color-primary-background);\n border-radius: 12px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 0 24px;\n @media only screen and (max-width: 600px) {\n gap: 16px;\n }\n .primaryInfo{\n display: flex;\n padding: 12px 8px;\n justify-content: space-between;\n background: var(--color-primary);\n border-radius: 8px;\n align-items: center;\n }\n .primaryInfo img{\n width: 24px;\n }\n .toolTipInfo .text-container svg {\n color: var(--color-primary);\n font-size: 16px !important;\n }\n .paraWithIcon{\n display: flex;\n gap: 8px;\n align-items: center;\n }\n .toolTipInfo{\n display: flex;\n gap: 8px;\n background: var(--color-background-positive);\n padding: 12px;\n border-radius: 8px;\n flex-direction: column;\n justify-content: space-between;\n }\n .flexChangeBody{\n flex-direction: row;\n align-items: center;\n }\n\n .toolTipInfo .toolTip + div{\n display: flex;\n justify-content: end;\n }\n .error{\n background: var(--color-background-negative);\n }\n .error svg{\n color: var(--color-negative);\n }\n .warning{\n background: var(--color-background-warning);\n }\n .warning svg{\n color: var(--color-warning);\n }\n .success{\n background: var(--color-background-positive);\n }\n\n .success svg{\n color: var(--color-positive);\n }\n .toolTip{\n display: flex;\n gap: 8px;\n width: 80%;\n }\n .cardHead{\n display: flex;\n justify-content: space-between;\n gap: 24px;\n }\n .imgBg{\n border-radius: 8px;\n background: #DEF1FB;\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .ant-modal-footer{\n display: none;\n }\n .toolTip svg{\n margin: 4px 0 0;\n }\n @media only screen and (max-width: 600px) {\n .toolTipInfo {\n flex-direction: column;\n align-items: end;\n gap: 16px;\n }\n .cardHead h2 > span{\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n }\n"])));
|
|
12
12
|
const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 24px;\n\n"])));
|
|
13
13
|
const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ndisplay: flex;\npadding: 16px 24px;\nalign-items: flex-end;\njustify-content: flex-end;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\n"])));
|
package/build/widgets/oa-widget-document-upload/{UploadUploadWidget.js → DocUploadWidget.js}
RENAMED
|
@@ -1,36 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
require("core-js/modules/es.symbol.description.js");
|
|
4
3
|
require("core-js/modules/es.weak-map.js");
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
8
|
require("core-js/modules/es.promise.js");
|
|
10
|
-
require("core-js/modules/es.string.starts-with.js");
|
|
11
9
|
require("core-js/modules/web.dom-collections.iterator.js");
|
|
12
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
12
|
var _icons = require("@ant-design/icons");
|
|
15
13
|
var _antd = require("antd");
|
|
14
|
+
var _RemoveRedEye = _interopRequireDefault(require("@material-ui/icons/RemoveRedEye"));
|
|
15
|
+
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
16
16
|
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
17
17
|
var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
|
|
18
18
|
var _styles = require("./styles");
|
|
19
|
+
var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
|
|
20
|
+
var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
|
|
19
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
22
|
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); }
|
|
21
23
|
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; }
|
|
22
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
25
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
26
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
27
24
|
const getBase64 = file => new Promise((resolve, reject) => {
|
|
28
25
|
const reader = new FileReader();
|
|
29
26
|
reader.readAsDataURL(file);
|
|
30
27
|
reader.onload = () => resolve(reader.result);
|
|
31
28
|
reader.onerror = error => reject(error);
|
|
32
29
|
});
|
|
33
|
-
const isImageFile = file => file.type.startsWith('image/');
|
|
34
30
|
const downloadFile = (base64String, fileName) => {
|
|
35
31
|
const link = document.createElement('a');
|
|
36
32
|
link.href = base64String;
|
|
@@ -42,30 +38,49 @@ function DocumentUpload(props) {
|
|
|
42
38
|
uploadedDocuments = [],
|
|
43
39
|
onChange,
|
|
44
40
|
subText,
|
|
45
|
-
heading
|
|
41
|
+
heading,
|
|
42
|
+
formName,
|
|
43
|
+
getPreview
|
|
46
44
|
} = props;
|
|
47
45
|
const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
|
|
48
|
-
const [previewImage, setPreviewImage] = (0, _react.useState)(
|
|
46
|
+
const [previewImage, setPreviewImage] = (0, _react.useState)(null);
|
|
49
47
|
const [previewTitle, setPreviewTitle] = (0, _react.useState)('');
|
|
50
48
|
const [loading, setLoading] = (0, _react.useState)(false);
|
|
51
49
|
const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
|
|
52
50
|
const handleCancel = () => setPreviewOpen(false);
|
|
51
|
+
function isImageFile(fileName) {
|
|
52
|
+
var _fileName$split;
|
|
53
|
+
// Extract the file extension from the file name
|
|
54
|
+
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();
|
|
55
|
+
|
|
56
|
+
// Define an array of image file extensions
|
|
57
|
+
const imageFileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
|
|
58
|
+
|
|
59
|
+
// Check if the file extension is in the array of image file extensions
|
|
60
|
+
if (imageFileExtensions.indexOf(fileExtension) !== -1) {
|
|
61
|
+
return true;
|
|
62
|
+
}
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
53
65
|
const handlePreview = async file => {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
downloadFile(file.preview, file.name);
|
|
63
|
-
return;
|
|
66
|
+
if (file !== null && file !== void 0 && file.originFileObj) {
|
|
67
|
+
if (isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
|
|
68
|
+
const base64Preview = await getBase64(file.originFileObj);
|
|
69
|
+
setPreviewImage(base64Preview);
|
|
70
|
+
setPreviewOpen(true);
|
|
71
|
+
} else {
|
|
72
|
+
const base64Preview = await getBase64(file.originFileObj);
|
|
73
|
+
downloadFile(base64Preview, file === null || file === void 0 ? void 0 : file.name);
|
|
64
74
|
}
|
|
75
|
+
} else if (isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
|
|
76
|
+
const url = await getPreview();
|
|
77
|
+
setPreviewOpen(true);
|
|
78
|
+
setPreviewImage(url);
|
|
79
|
+
} else {
|
|
80
|
+
const url = await getPreview();
|
|
81
|
+
downloadFile(url, file === null || file === void 0 ? void 0 : file.name);
|
|
65
82
|
}
|
|
66
|
-
|
|
67
|
-
setPreviewOpen(true);
|
|
68
|
-
setPreviewTitle((_modifiedFile = modifiedFile) === null || _modifiedFile === void 0 ? void 0 : _modifiedFile.name);
|
|
83
|
+
setPreviewTitle(file === null || file === void 0 ? void 0 : file.name);
|
|
69
84
|
};
|
|
70
85
|
const handleChange = async _ref => {
|
|
71
86
|
let {
|
|
@@ -76,21 +91,19 @@ function DocumentUpload(props) {
|
|
|
76
91
|
onChange(null, 'removed');
|
|
77
92
|
}
|
|
78
93
|
const modifiedList = await Promise.all(newFileList.map(async files => {
|
|
79
|
-
|
|
80
|
-
// if (file.status === 'uploading') {
|
|
94
|
+
let modifiedFile = files;
|
|
81
95
|
setLoading(true);
|
|
82
96
|
try {
|
|
83
97
|
await onChange(files);
|
|
84
98
|
modifiedFile.status = 'done';
|
|
85
99
|
} catch (error) {
|
|
86
|
-
|
|
87
|
-
modifiedFile.status = 'error';
|
|
100
|
+
modifiedFile = null;
|
|
88
101
|
}
|
|
89
102
|
setLoading(false);
|
|
90
|
-
// }
|
|
91
103
|
return modifiedFile;
|
|
92
104
|
}));
|
|
93
|
-
|
|
105
|
+
const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
|
|
106
|
+
setFileList(tempList);
|
|
94
107
|
};
|
|
95
108
|
const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
|
|
96
109
|
style: {
|
|
@@ -124,35 +137,50 @@ function DocumentUpload(props) {
|
|
|
124
137
|
colorText: _ColorVariablesMap.default['--color-primary']
|
|
125
138
|
}
|
|
126
139
|
}
|
|
140
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
|
|
141
|
+
name: formName
|
|
127
142
|
}, /*#__PURE__*/_react.default.createElement(_antd.Upload, {
|
|
128
143
|
customRequest: () => {},
|
|
129
144
|
listType: "picture-card",
|
|
130
145
|
fileList: fileList,
|
|
131
146
|
onPreview: handlePreview,
|
|
132
|
-
onChange: handleChange
|
|
133
|
-
|
|
147
|
+
onChange: handleChange,
|
|
148
|
+
showUploadList: {
|
|
149
|
+
showDownloadIcon: false,
|
|
150
|
+
removeIcon: /*#__PURE__*/_react.default.createElement(_icons.DeleteFilled, null),
|
|
151
|
+
previewIcon: /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
|
|
152
|
+
}
|
|
153
|
+
}, fileList.length >= 1 ? null : uploadButton)))))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
|
|
134
154
|
open: previewOpen,
|
|
135
155
|
title: previewTitle,
|
|
136
156
|
footer: null,
|
|
137
157
|
onCancel: handleCancel
|
|
138
|
-
}, /*#__PURE__*/_react.default.createElement("
|
|
158
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
159
|
+
style: {
|
|
160
|
+
textAlign: 'center'
|
|
161
|
+
}
|
|
162
|
+
}, ' ', previewImage ? /*#__PURE__*/_react.default.createElement("img", {
|
|
139
163
|
alt: "example",
|
|
140
164
|
style: {
|
|
141
165
|
width: '100%'
|
|
142
166
|
},
|
|
143
167
|
src: previewImage
|
|
144
|
-
})));
|
|
168
|
+
}) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
|
|
145
169
|
}
|
|
146
170
|
DocumentUpload.propTypes = {
|
|
147
171
|
uploadedDocuments: _propTypes.default.array,
|
|
148
172
|
onChange: _propTypes.default.func,
|
|
149
173
|
subText: _propTypes.default.string,
|
|
150
|
-
heading: _propTypes.default.string
|
|
174
|
+
heading: _propTypes.default.string,
|
|
175
|
+
formName: _propTypes.default.string,
|
|
176
|
+
getPreview: _propTypes.default.func // Define the getPreview prop type
|
|
151
177
|
};
|
|
152
178
|
DocumentUpload.defaultProps = {
|
|
153
179
|
uploadedDocuments: [],
|
|
154
180
|
onChange: () => {},
|
|
155
181
|
subText: '',
|
|
156
|
-
heading: ''
|
|
182
|
+
heading: '',
|
|
183
|
+
formName: '',
|
|
184
|
+
getPreview: () => {}
|
|
157
185
|
};
|
|
158
186
|
var _default = exports.default = DocumentUpload;
|