@elliemae/ds-chat 2.0.0-rc.11 → 2.0.0-rc.12

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.
Files changed (7) hide show
  1. package/cjs/parts/chat-composer/styled.js +1 -1
  2. package/cjs/parts/chat-container/ChatContainer.js +11 -6
  3. package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +15 -4
  4. package/esm/parts/chat-composer/styled.js +1 -1
  5. package/esm/parts/chat-container/ChatContainer.js +11 -6
  6. package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +15 -4
  7. package/package.json +10 -10
package/cjs/parts/chat-composer/styled.js CHANGED
@@ -16,7 +16,7 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default
16
16
  })(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
17
17
  const StyledComposerInput = /*#__PURE__*/styled__default["default"].textarea.withConfig({
18
18
  componentId: "sc-1ahwpce-1"
19
- })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
19
+ })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.05s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
20
20
  const StyledComposerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButton).withConfig({
21
21
  componentId: "sc-1ahwpce-2"
22
22
  })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
package/cjs/parts/chat-container/ChatContainer.js CHANGED
@@ -51,7 +51,6 @@ const ChatContainer = props$1 => {
51
51
  onKeyDown: onComposerKeyDown
52
52
  },
53
53
  actionRef,
54
- autoScroll,
55
54
  device,
56
55
  isLoading,
57
56
  hasMoreItems,
@@ -69,12 +68,18 @@ const ChatContainer = props$1 => {
69
68
  const onResize = React__default["default"].useCallback(height => {
70
69
  if (onComposerResize) onComposerResize(height);
71
70
 
72
- if (autoScroll) {
73
- listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
74
- align: 'end'
75
- });
71
+ if (height > 30) {
72
+ /*
73
+ setTimeout is used to equal the animation duration from the
74
+ composer text area when increase its size
75
+ */
76
+ setTimeout(() => {
77
+ actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
78
+ align: 'start'
79
+ });
80
+ }, 50);
76
81
  }
77
- }, [onComposerResize, messagesListProps.messages, autoScroll]);
82
+ }, [onComposerResize, messagesListProps.messages, actionRef]);
78
83
  const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
79
84
  const handleTabs = React__default["default"].useCallback(e => {
80
85
  if (onComposerKeyDown) onComposerKeyDown(e);else {
package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js CHANGED
@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
- require('core-js/modules/esnext.async-iterator.for-each.js');
7
+ require('core-js/modules/esnext.async-iterator.some.js');
8
8
  require('core-js/modules/esnext.iterator.constructor.js');
9
+ require('core-js/modules/esnext.iterator.some.js');
10
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
11
  require('core-js/modules/esnext.iterator.for-each.js');
10
12
  require('core-js/modules/esnext.async-iterator.map.js');
11
13
  require('core-js/modules/esnext.iterator.map.js');
@@ -37,12 +39,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
37
39
 
38
40
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
39
41
 
40
- const getPadding = hasMoreItems => {
42
+ const getPadding = _ref => {
43
+ let {
44
+ hasMoreItems,
45
+ bannerPosition,
46
+ isLoading
47
+ } = _ref;
41
48
  const padding = {
42
49
  paddingStart: 0,
43
50
  paddingEnd: -5
44
51
  };
45
- if (hasMoreItems === 'top') padding.paddingStart = 42;else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;
52
+ if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'top')) padding.paddingStart = 42;else if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'bottom')) padding.paddingEnd = 42;
46
53
  return padding;
47
54
  };
48
55
 
@@ -72,7 +79,11 @@ const ChatContainerMessagesList = props$2 => {
72
79
  size: messages.length,
73
80
  parentRef: virtualListRef,
74
81
  overscan: 15
75
- }, getPadding(hasMoreItems)), {}, {
82
+ }, getPadding({
83
+ hasMoreItems,
84
+ bannerPosition,
85
+ isLoading
86
+ })), {}, {
76
87
  estimateSize: React__default["default"].useCallback(() => 80, [])
77
88
  }));
78
89
  const onScrollStop = React__default["default"].useCallback(() => {
package/esm/parts/chat-composer/styled.js CHANGED
@@ -8,7 +8,7 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig(
8
8
  })(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
9
9
  const StyledComposerInput = /*#__PURE__*/styled.textarea.withConfig({
10
10
  componentId: "sc-1ahwpce-1"
11
- })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
11
+ })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.05s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
12
12
  const StyledComposerButton = /*#__PURE__*/styled(DSButton).withConfig({
13
13
  componentId: "sc-1ahwpce-2"
14
14
  })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
package/esm/parts/chat-container/ChatContainer.js CHANGED
@@ -39,7 +39,6 @@ const ChatContainer = props => {
39
39
  onKeyDown: onComposerKeyDown
40
40
  },
41
41
  actionRef,
42
- autoScroll,
43
42
  device,
44
43
  isLoading,
45
44
  hasMoreItems,
@@ -57,12 +56,18 @@ const ChatContainer = props => {
57
56
  const onResize = React.useCallback(height => {
58
57
  if (onComposerResize) onComposerResize(height);
59
58
 
60
- if (autoScroll) {
61
- listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
62
- align: 'end'
63
- });
59
+ if (height > 30) {
60
+ /*
61
+ setTimeout is used to equal the animation duration from the
62
+ composer text area when increase its size
63
+ */
64
+ setTimeout(() => {
65
+ actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
66
+ align: 'start'
67
+ });
68
+ }, 50);
64
69
  }
65
- }, [onComposerResize, messagesListProps.messages, autoScroll]);
70
+ }, [onComposerResize, messagesListProps.messages, actionRef]);
66
71
  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
67
72
  const handleTabs = React.useCallback(e => {
68
73
  if (onComposerKeyDown) onComposerKeyDown(e);else {
package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js CHANGED
@@ -2,8 +2,10 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
2
2
  import 'core-js/modules/esnext.iterator.filter.js';
3
3
  import _jsx from '@babel/runtime/helpers/esm/jsx';
4
4
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
5
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.async-iterator.some.js';
6
6
  import 'core-js/modules/esnext.iterator.constructor.js';
7
+ import 'core-js/modules/esnext.iterator.some.js';
8
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
7
9
  import 'core-js/modules/esnext.iterator.for-each.js';
8
10
  import 'core-js/modules/esnext.async-iterator.map.js';
9
11
  import 'core-js/modules/esnext.iterator.map.js';
@@ -26,12 +28,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
26
28
 
27
29
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
28
30
 
29
- const getPadding = hasMoreItems => {
31
+ const getPadding = _ref => {
32
+ let {
33
+ hasMoreItems,
34
+ bannerPosition,
35
+ isLoading
36
+ } = _ref;
30
37
  const padding = {
31
38
  paddingStart: 0,
32
39
  paddingEnd: -5
33
40
  };
34
- if (hasMoreItems === 'top') padding.paddingStart = 42;else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;
41
+ if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'top')) padding.paddingStart = 42;else if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'bottom')) padding.paddingEnd = 42;
35
42
  return padding;
36
43
  };
37
44
 
@@ -61,7 +68,11 @@ const ChatContainerMessagesList = props => {
61
68
  size: messages.length,
62
69
  parentRef: virtualListRef,
63
70
  overscan: 15
64
- }, getPadding(hasMoreItems)), {}, {
71
+ }, getPadding({
72
+ hasMoreItems,
73
+ bannerPosition,
74
+ isLoading
75
+ })), {}, {
65
76
  estimateSize: React.useCallback(() => 80, [])
66
77
  }));
67
78
  const onScrollStop = React.useCallback(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chat",
3
- "version": "2.0.0-rc.11",
3
+ "version": "2.0.0-rc.12",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat",
6
6
  "module": "./esm/index.js",
@@ -305,15 +305,15 @@
305
305
  "generateSubmodules": true
306
306
  },
307
307
  "dependencies": {
308
- "@elliemae/ds-banner": "2.0.0-rc.11",
309
- "@elliemae/ds-button": "2.0.0-rc.11",
310
- "@elliemae/ds-grid": "2.0.0-rc.11",
311
- "@elliemae/ds-icons": "2.0.0-rc.11",
312
- "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.11",
313
- "@elliemae/ds-props-helpers": "2.0.0-rc.11",
314
- "@elliemae/ds-system": "2.0.0-rc.11",
315
- "@elliemae/ds-tooltip": "2.0.0-rc.11",
316
- "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.11",
308
+ "@elliemae/ds-banner": "2.0.0-rc.12",
309
+ "@elliemae/ds-button": "2.0.0-rc.12",
310
+ "@elliemae/ds-grid": "2.0.0-rc.12",
311
+ "@elliemae/ds-icons": "2.0.0-rc.12",
312
+ "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.12",
313
+ "@elliemae/ds-props-helpers": "2.0.0-rc.12",
314
+ "@elliemae/ds-system": "2.0.0-rc.12",
315
+ "@elliemae/ds-tooltip": "2.0.0-rc.12",
316
+ "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.12",
317
317
  "prop-types": "~15.7.2",
318
318
  "react-desc": "~4.1.2",
319
319
  "react-virtual": "~2.3.2"