oa-componentbook 0.18.21 → 0.18.23
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.
|
@@ -40,7 +40,7 @@ const stylesObj = {
|
|
|
40
40
|
width: '440px',
|
|
41
41
|
marginTop: '24px',
|
|
42
42
|
marginBottom: '8px',
|
|
43
|
-
|
|
43
|
+
wordBreak: 'anywhere'
|
|
44
44
|
},
|
|
45
45
|
chatContainer: {
|
|
46
46
|
display: 'flex',
|
|
@@ -65,11 +65,19 @@ function ChatWidget(_ref) {
|
|
|
65
65
|
inputMaxLength
|
|
66
66
|
} = _ref;
|
|
67
67
|
const [message, setMessage] = (0, _react.useState)(initialMsg || '');
|
|
68
|
+
const chatContainerRef = (0, _react.useRef)(null);
|
|
68
69
|
const onClearInput = () => clearInput && setMessage('');
|
|
69
70
|
const onMsgSend = () => {
|
|
70
71
|
onMessageInput(message);
|
|
71
72
|
onClearInput();
|
|
72
73
|
};
|
|
74
|
+
const scrollToBottom = () => {
|
|
75
|
+
var _chatContainerRef$cur;
|
|
76
|
+
(_chatContainerRef$cur = chatContainerRef.current) === null || _chatContainerRef$cur === void 0 || _chatContainerRef$cur.scrollIntoView();
|
|
77
|
+
};
|
|
78
|
+
(0, _react.useEffect)(() => {
|
|
79
|
+
scrollToBottom();
|
|
80
|
+
}, [queryMessages, message]);
|
|
73
81
|
return /*#__PURE__*/_react.default.createElement(StyledCustomDrawer, {
|
|
74
82
|
open: show,
|
|
75
83
|
onClose: onClose,
|
|
@@ -187,7 +195,9 @@ function ChatWidget(_ref) {
|
|
|
187
195
|
}, msg.createdAt))) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
|
|
188
196
|
type: "info",
|
|
189
197
|
message: "Send a chat to start your chat history for this ticket."
|
|
190
|
-
}))))
|
|
198
|
+
})))), /*#__PURE__*/_react.default.createElement("diV", {
|
|
199
|
+
ref: chatContainerRef
|
|
200
|
+
}));
|
|
191
201
|
}
|
|
192
202
|
ChatWidget.propTypes = {
|
|
193
203
|
show: _propTypes.default.bool,
|
|
@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueWidgetStyles.js
|
|
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 KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child {\n padding: 0;\n }\n \n .valuestyle {\n display: flex;\n gap: 16px;\n padding: 0 0 8px;\n }\n\n .valuestyle b {\n width: 38.734%;\n font-style: normal;\n color: var(--color-primary-content); \n }\n\n .valuestyle span {\n max-width: 180px;\n font-style: normal;\n color: var(--color-secondary-content);\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .valuestyle span span{\n color: var(--color-primary-content);\n font-size:
|
|
11
|
+
const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child {\n padding: 0;\n }\n \n .valuestyle {\n display: flex;\n gap: 16px;\n padding: 0 0 8px;\n }\n\n .valuestyle b {\n width: 38.734%;\n font-style: normal;\n color: var(--color-primary-content); \n }\n\n .valuestyle span {\n max-width: 180px;\n font-style: normal;\n color: var(--color-secondary-content);\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .valuestyle span + span{\n color: var(--color-primary-content);\n font-size: 14px;\n padding: 0 4px 0 0;\n }\n"])));
|
|
12
12
|
const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n.container-fluid{\n width: 100%;\n padding: 0 16px;\n}\n.row {\n display: flex;\n flex-direction: column;\n}\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n}\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n .col-sm-7 {\n width: 58.33333%;\n }\n .col-sm-8 {\n width: 66.66667%;\n }\n .col-sm-9 {\n width: 75%;\n }\n .col-sm-10 {\n width: 83.33333%;\n }\n .col-sm-11 {\n width: 91.66667%;\n }\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n .col-md-2 {\n width: 16.66667%;\n }\n .col-md-3 {\n width: 25%;\n }\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter{\n padding: 0 24px 0 0;\n }\n .col-lg-1 {\n width: 8.33333%;\n }\n .col-lg-2 {\n width: 16.66667%;\n }\n .col-lg-3 {\n width: 25%;\n float: left;\n }\n .col-lg-4 {\n width: 33.33333%;\n float: left;\n }\n .col-lg-5 {\n width: 41.66667%;\n }\n .col-lg-6 {\n width: 50%;\n }\n .col-lg-7 {\n width: 58.33333%;\n }\n .col-lg-8 {\n width: 66.66667%;\n }\n .col-lg-9 {\n width: 75%;\n }\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .gutter{\n padding: 0 32px 0 0;\n }\n .col-xl-1 {\n width: 8.33333%;\n }\n\n \n}\n@media (max-width: 767px) {\n .gutter{\n padding: 0;\n }\n}\n"])));
|
|
13
13
|
const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--color-primary-content);\n font-weight: 400;\n"])));
|
|
14
14
|
const StyledSpan = exports.StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n /* vertical-align: bottom; */\n color: var(--color-secondary-content);\n font-weight: 400;\n word-break: break-word;\n"])));
|
|
@@ -16,7 +16,7 @@ var _CustomDrawer = _interopRequireDefault(require("../../components/oa-componen
|
|
|
16
16
|
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
17
17
|
var _CustomToggle = _interopRequireDefault(require("../../components/oa-component-toggle/CustomToggle"));
|
|
18
18
|
var _styles = require("./styles");
|
|
19
|
-
const _excluded = ["currentDescription", "data-test", "previousDescriptions", "onClose", "onTranslate", "open"];
|
|
19
|
+
const _excluded = ["currentDescription", "data-test", "previousDescriptions", "onClose", "onTranslate", "open", "translationDefaultValue"];
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
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); }
|
|
22
22
|
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; }
|
|
@@ -31,13 +31,14 @@ function ViewPreviousDescriptionWidget(_ref) {
|
|
|
31
31
|
previousDescriptions,
|
|
32
32
|
onClose,
|
|
33
33
|
onTranslate,
|
|
34
|
-
open
|
|
34
|
+
open,
|
|
35
|
+
translationDefaultValue = false
|
|
35
36
|
} = _ref,
|
|
36
37
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
37
38
|
const copyOfPreviousDescriptions = [...previousDescriptions];
|
|
38
39
|
const sortByDescendingDate = (document1, document2) => new Date(document2.dateSubmitted) - new Date(document1.dateSubmitted);
|
|
39
40
|
copyOfPreviousDescriptions.sort(sortByDescendingDate);
|
|
40
|
-
const [isTranslationOn, setIsTranslationOn] = (0, _react.useState)(
|
|
41
|
+
const [isTranslationOn, setIsTranslationOn] = (0, _react.useState)(translationDefaultValue);
|
|
41
42
|
const [translatedText, setTranslatedText] = (0, _react.useState)([]);
|
|
42
43
|
// Initially setting the translated text as a 0 length array
|
|
43
44
|
|
|
@@ -61,6 +62,11 @@ function ViewPreviousDescriptionWidget(_ref) {
|
|
|
61
62
|
}
|
|
62
63
|
}, [isTranslationOn]);
|
|
63
64
|
|
|
65
|
+
// Set default value of translation
|
|
66
|
+
(0, _react.useEffect)(() => {
|
|
67
|
+
setIsTranslationOn(translationDefaultValue);
|
|
68
|
+
}, [translationDefaultValue]);
|
|
69
|
+
|
|
64
70
|
/*
|
|
65
71
|
This is for when any of the descriptions changes,
|
|
66
72
|
so fresh translations are made to represent the new descriptions.
|