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
- overflow: 'auto'
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: 12px;\n margin: 0 4px 0 0;\n }\n"])));
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)(false);
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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.21",
3
+ "version": "0.18.23",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",