@elliemae/ds-chat 2.2.0-next.4 → 2.3.0-alpha.2
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/cjs/ChatDataTestids.js +54 -26
- package/cjs/ChatDataTestids.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +69 -44
- package/cjs/index.js.map +7 -0
- package/cjs/parts/bubble/ChatBubble.js +74 -64
- package/cjs/parts/bubble/ChatBubble.js.map +7 -0
- package/cjs/parts/bubble/ChatBubbleArrow.js +96 -79
- package/cjs/parts/bubble/ChatBubbleArrow.js.map +7 -0
- package/cjs/parts/bubble/config/useValidateProps.js +47 -24
- package/cjs/parts/bubble/config/useValidateProps.js.map +7 -0
- package/cjs/parts/bubble/index.js +38 -12
- package/cjs/parts/bubble/index.js.map +7 -0
- package/cjs/parts/bubble/props.js +60 -48
- package/cjs/parts/bubble/props.js.map +7 -0
- package/cjs/parts/bubble/styled.js +141 -48
- package/cjs/parts/bubble/styled.js.map +7 -0
- package/cjs/parts/chat-card/ChatCard.js +55 -39
- package/cjs/parts/chat-card/ChatCard.js.map +7 -0
- package/cjs/parts/chat-card/config/useValidateProps.js +36 -9
- package/cjs/parts/chat-card/config/useValidateProps.js.map +7 -0
- package/cjs/parts/chat-card/index.js +36 -10
- package/cjs/parts/chat-card/index.js.map +7 -0
- package/cjs/parts/chat-card/props.js +39 -12
- package/cjs/parts/chat-card/props.js.map +7 -0
- package/cjs/parts/chat-card/styled.js +71 -36
- package/cjs/parts/chat-card/styled.js.map +7 -0
- package/cjs/parts/chat-composer/ChatContainerComposer.js +92 -98
- package/cjs/parts/chat-composer/ChatContainerComposer.js.map +7 -0
- package/cjs/parts/chat-composer/config/useValidateProps.js +36 -9
- package/cjs/parts/chat-composer/config/useValidateProps.js.map +7 -0
- package/cjs/parts/chat-composer/index.js +36 -10
- package/cjs/parts/chat-composer/index.js.map +7 -0
- package/cjs/parts/chat-composer/props.js +73 -36
- package/cjs/parts/chat-composer/props.js.map +7 -0
- package/cjs/parts/chat-composer/styled.js +102 -34
- package/cjs/parts/chat-composer/styled.js.map +7 -0
- package/cjs/parts/chat-container/ChatContainer.js +122 -140
- package/cjs/parts/chat-container/ChatContainer.js.map +7 -0
- package/cjs/parts/chat-container/config/useValidateProps.js +36 -9
- package/cjs/parts/chat-container/config/useValidateProps.js.map +7 -0
- package/cjs/parts/chat-container/index.js +36 -10
- package/cjs/parts/chat-container/index.js.map +7 -0
- package/cjs/parts/chat-container/props.js +85 -42
- package/cjs/parts/chat-container/props.js.map +7 -0
- package/cjs/parts/chat-container/styled.js +104 -23
- package/cjs/parts/chat-container/styled.js.map +7 -0
- package/cjs/parts/chat-container-header/ChatContainerHeader.js +48 -30
- package/cjs/parts/chat-container-header/ChatContainerHeader.js.map +7 -0
- package/cjs/parts/chat-container-header/helpers.js +38 -25
- package/cjs/parts/chat-container-header/helpers.js.map +7 -0
- package/cjs/parts/chat-container-header/styled.js +59 -24
- package/cjs/parts/chat-container-header/styled.js.map +7 -0
- package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +163 -225
- package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +7 -0
- package/cjs/parts/chat-container-messages-list/config/useValidateProps.js +36 -9
- package/cjs/parts/chat-container-messages-list/config/useValidateProps.js.map +7 -0
- package/cjs/parts/chat-container-messages-list/index.js +36 -10
- package/cjs/parts/chat-container-messages-list/index.js.map +7 -0
- package/cjs/parts/chat-container-messages-list/props.js +62 -24
- package/cjs/parts/chat-container-messages-list/props.js.map +7 -0
- package/cjs/parts/chat-container-messages-list/styled.js +100 -38
- package/cjs/parts/chat-container-messages-list/styled.js.map +7 -0
- package/cjs/parts/chat-empty-state/ChatEmptyState.js +58 -42
- package/cjs/parts/chat-empty-state/ChatEmptyState.js.map +7 -0
- package/cjs/parts/chat-empty-state/config/useValidateProps.js +36 -9
- package/cjs/parts/chat-empty-state/config/useValidateProps.js.map +7 -0
- package/cjs/parts/chat-empty-state/props.js +39 -12
- package/cjs/parts/chat-empty-state/props.js.map +7 -0
- package/cjs/parts/chat-empty-state/styled.js +47 -21
- package/cjs/parts/chat-empty-state/styled.js.map +7 -0
- package/cjs/parts/chat-sidebar/SideBarChat.js +82 -81
- package/cjs/parts/chat-sidebar/SideBarChat.js.map +7 -0
- package/cjs/parts/chat-sidebar/config/useValidateProps.js +36 -9
- package/cjs/parts/chat-sidebar/config/useValidateProps.js.map +7 -0
- package/cjs/parts/chat-sidebar/index.js +36 -10
- package/cjs/parts/chat-sidebar/index.js.map +7 -0
- package/cjs/parts/chat-sidebar/props.js +72 -30
- package/cjs/parts/chat-sidebar/props.js.map +7 -0
- package/cjs/parts/chat-sidebar/styled.js +56 -20
- package/cjs/parts/chat-sidebar/styled.js.map +7 -0
- package/cjs/parts/floating-button/FloatingButton.js +47 -34
- package/cjs/parts/floating-button/FloatingButton.js.map +7 -0
- package/cjs/parts/floating-button/index.js +28 -9
- package/cjs/parts/floating-button/index.js.map +7 -0
- package/cjs/parts/floating-button/props.js +42 -15
- package/cjs/parts/floating-button/props.js.map +7 -0
- package/cjs/parts/floating-button/styled.js +63 -17
- package/cjs/parts/floating-button/styled.js.map +7 -0
- package/cjs/parts/floating-container/styled.js +47 -17
- package/cjs/parts/floating-container/styled.js.map +7 -0
- package/cjs/parts/grid-influencer/InfluencerContainer.js +41 -21
- package/cjs/parts/grid-influencer/InfluencerContainer.js.map +7 -0
- package/cjs/parts/grid-influencer/styled.js +56 -21
- package/cjs/parts/grid-influencer/styled.js.map +7 -0
- package/cjs/parts/message-delimiter/MessageDelimiter.js +53 -39
- package/cjs/parts/message-delimiter/MessageDelimiter.js.map +7 -0
- package/cjs/parts/message-delimiter/config/useValidateProps.js +36 -9
- package/cjs/parts/message-delimiter/config/useValidateProps.js.map +7 -0
- package/cjs/parts/message-delimiter/index.js +36 -10
- package/cjs/parts/message-delimiter/index.js.map +7 -0
- package/cjs/parts/message-delimiter/props.js +44 -19
- package/cjs/parts/message-delimiter/props.js.map +7 -0
- package/cjs/parts/message-delimiter/styled.js +53 -24
- package/cjs/parts/message-delimiter/styled.js.map +7 -0
- package/cjs/parts/sidebar-button/SidebarButton.js +52 -53
- package/cjs/parts/sidebar-button/SidebarButton.js.map +7 -0
- package/cjs/parts/sidebar-button/index.js +20 -2
- package/cjs/parts/sidebar-button/index.js.map +7 -0
- package/cjs/parts/sidebar-button/props.js +49 -26
- package/cjs/parts/sidebar-button/props.js.map +7 -0
- package/cjs/parts/sidebar-button/styled.js +68 -24
- package/cjs/parts/sidebar-button/styled.js.map +7 -0
- package/cjs/parts/system-message/SystemMessage.js +55 -40
- package/cjs/parts/system-message/SystemMessage.js.map +7 -0
- package/cjs/parts/system-message/config/useValidateProps.js +36 -9
- package/cjs/parts/system-message/config/useValidateProps.js.map +7 -0
- package/cjs/parts/system-message/index.js +36 -10
- package/cjs/parts/system-message/index.js.map +7 -0
- package/cjs/parts/system-message/props.js +42 -15
- package/cjs/parts/system-message/props.js.map +7 -0
- package/cjs/parts/system-message/style.js +75 -32
- package/cjs/parts/system-message/style.js.map +7 -0
- package/cjs/parts/tile-button/TileButton.js +98 -68
- package/cjs/parts/tile-button/TileButton.js.map +7 -0
- package/cjs/parts/tile-button/config/useValidateProps.js +36 -9
- package/cjs/parts/tile-button/config/useValidateProps.js.map +7 -0
- package/cjs/parts/tile-button/index.js +36 -10
- package/cjs/parts/tile-button/index.js.map +7 -0
- package/cjs/parts/tile-button/props.js +83 -45
- package/cjs/parts/tile-button/props.js.map +7 -0
- package/cjs/parts/tile-button/styled.js +229 -77
- package/cjs/parts/tile-button/styled.js.map +7 -0
- package/cjs/prop-types.js +53 -26
- package/cjs/prop-types.js.map +7 -0
- package/cjs/styled.js +42 -14
- package/cjs/styled.js.map +7 -0
- package/cjs/tests/utils.js +66 -0
- package/cjs/tests/utils.js.map +7 -0
- package/esm/ChatDataTestids.js +25 -22
- package/esm/ChatDataTestids.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +40 -14
- package/esm/index.js.map +7 -0
- package/esm/parts/bubble/ChatBubble.js +51 -51
- package/esm/parts/bubble/ChatBubble.js.map +7 -0
- package/esm/parts/bubble/ChatBubbleArrow.js +67 -71
- package/esm/parts/bubble/ChatBubbleArrow.js.map +7 -0
- package/esm/parts/bubble/config/useValidateProps.js +17 -19
- package/esm/parts/bubble/config/useValidateProps.js.map +7 -0
- package/esm/parts/bubble/index.js +9 -2
- package/esm/parts/bubble/index.js.map +7 -0
- package/esm/parts/bubble/props.js +30 -36
- package/esm/parts/bubble/props.js.map +7 -0
- package/esm/parts/bubble/styled.js +112 -32
- package/esm/parts/bubble/styled.js.map +7 -0
- package/esm/parts/chat-card/ChatCard.js +23 -27
- package/esm/parts/chat-card/ChatCard.js.map +7 -0
- package/esm/parts/chat-card/config/useValidateProps.js +6 -4
- package/esm/parts/chat-card/config/useValidateProps.js.map +7 -0
- package/esm/parts/chat-card/index.js +7 -1
- package/esm/parts/chat-card/index.js.map +7 -0
- package/esm/parts/chat-card/props.js +10 -8
- package/esm/parts/chat-card/props.js.map +7 -0
- package/esm/parts/chat-card/styled.js +42 -23
- package/esm/parts/chat-card/styled.js.map +7 -0
- package/esm/parts/chat-composer/ChatContainerComposer.js +65 -83
- package/esm/parts/chat-composer/ChatContainerComposer.js.map +7 -0
- package/esm/parts/chat-composer/config/useValidateProps.js +6 -4
- package/esm/parts/chat-composer/config/useValidateProps.js.map +7 -0
- package/esm/parts/chat-composer/index.js +7 -1
- package/esm/parts/chat-composer/index.js.map +7 -0
- package/esm/parts/chat-composer/props.js +37 -24
- package/esm/parts/chat-composer/props.js.map +7 -0
- package/esm/parts/chat-composer/styled.js +73 -22
- package/esm/parts/chat-composer/styled.js.map +7 -0
- package/esm/parts/chat-container/ChatContainer.js +88 -122
- package/esm/parts/chat-container/ChatContainer.js.map +7 -0
- package/esm/parts/chat-container/config/useValidateProps.js +6 -4
- package/esm/parts/chat-container/config/useValidateProps.js.map +7 -0
- package/esm/parts/chat-container/index.js +7 -1
- package/esm/parts/chat-container/index.js.map +7 -0
- package/esm/parts/chat-container/props.js +52 -31
- package/esm/parts/chat-container/props.js.map +7 -0
- package/esm/parts/chat-container/styled.js +79 -16
- package/esm/parts/chat-container/styled.js.map +7 -0
- package/esm/parts/chat-container-header/ChatContainerHeader.js +22 -21
- package/esm/parts/chat-container-header/ChatContainerHeader.js.map +7 -0
- package/esm/parts/chat-container-header/helpers.js +9 -17
- package/esm/parts/chat-container-header/helpers.js.map +7 -0
- package/esm/parts/chat-container-header/styled.js +30 -14
- package/esm/parts/chat-container-header/styled.js.map +7 -0
- package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +138 -210
- package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +7 -0
- package/esm/parts/chat-container-messages-list/config/useValidateProps.js +6 -4
- package/esm/parts/chat-container-messages-list/config/useValidateProps.js.map +7 -0
- package/esm/parts/chat-container-messages-list/index.js +10 -1
- package/esm/parts/chat-container-messages-list/index.js.map +7 -0
- package/esm/parts/chat-container-messages-list/props.js +31 -17
- package/esm/parts/chat-container-messages-list/props.js.map +7 -0
- package/esm/parts/chat-container-messages-list/styled.js +71 -25
- package/esm/parts/chat-container-messages-list/styled.js.map +7 -0
- package/esm/parts/chat-empty-state/ChatEmptyState.js +25 -29
- package/esm/parts/chat-empty-state/ChatEmptyState.js.map +7 -0
- package/esm/parts/chat-empty-state/config/useValidateProps.js +6 -4
- package/esm/parts/chat-empty-state/config/useValidateProps.js.map +7 -0
- package/esm/parts/chat-empty-state/props.js +10 -7
- package/esm/parts/chat-empty-state/props.js.map +7 -0
- package/esm/parts/chat-empty-state/styled.js +18 -11
- package/esm/parts/chat-empty-state/styled.js.map +7 -0
- package/esm/parts/chat-sidebar/SideBarChat.js +50 -67
- package/esm/parts/chat-sidebar/SideBarChat.js.map +7 -0
- package/esm/parts/chat-sidebar/config/useValidateProps.js +6 -4
- package/esm/parts/chat-sidebar/config/useValidateProps.js.map +7 -0
- package/esm/parts/chat-sidebar/index.js +7 -1
- package/esm/parts/chat-sidebar/index.js.map +7 -0
- package/esm/parts/chat-sidebar/props.js +39 -21
- package/esm/parts/chat-sidebar/props.js.map +7 -0
- package/esm/parts/chat-sidebar/styled.js +27 -11
- package/esm/parts/chat-sidebar/styled.js.map +7 -0
- package/esm/parts/floating-button/FloatingButton.js +18 -26
- package/esm/parts/floating-button/FloatingButton.js.map +7 -0
- package/esm/parts/floating-button/index.js +3 -1
- package/esm/parts/floating-button/index.js.map +7 -0
- package/esm/parts/floating-button/props.js +11 -8
- package/esm/parts/floating-button/props.js.map +7 -0
- package/esm/parts/floating-button/styled.js +34 -9
- package/esm/parts/floating-button/styled.js.map +7 -0
- package/esm/parts/floating-container/styled.js +18 -9
- package/esm/parts/floating-container/styled.js.map +7 -0
- package/esm/parts/grid-influencer/InfluencerContainer.js +12 -12
- package/esm/parts/grid-influencer/InfluencerContainer.js.map +7 -0
- package/esm/parts/grid-influencer/styled.js +27 -12
- package/esm/parts/grid-influencer/styled.js.map +7 -0
- package/esm/parts/message-delimiter/MessageDelimiter.js +20 -26
- package/esm/parts/message-delimiter/MessageDelimiter.js.map +7 -0
- package/esm/parts/message-delimiter/config/useValidateProps.js +6 -4
- package/esm/parts/message-delimiter/config/useValidateProps.js.map +7 -0
- package/esm/parts/message-delimiter/index.js +10 -1
- package/esm/parts/message-delimiter/index.js.map +7 -0
- package/esm/parts/message-delimiter/props.js +15 -14
- package/esm/parts/message-delimiter/props.js.map +7 -0
- package/esm/parts/message-delimiter/styled.js +24 -14
- package/esm/parts/message-delimiter/styled.js.map +7 -0
- package/esm/parts/sidebar-button/SidebarButton.js +22 -41
- package/esm/parts/sidebar-button/SidebarButton.js.map +7 -0
- package/esm/parts/sidebar-button/index.js +2 -1
- package/esm/parts/sidebar-button/index.js.map +7 -0
- package/esm/parts/sidebar-button/props.js +18 -15
- package/esm/parts/sidebar-button/props.js.map +7 -0
- package/esm/parts/sidebar-button/styled.js +39 -14
- package/esm/parts/sidebar-button/styled.js.map +7 -0
- package/esm/parts/system-message/SystemMessage.js +22 -27
- package/esm/parts/system-message/SystemMessage.js.map +7 -0
- package/esm/parts/system-message/config/useValidateProps.js +6 -4
- package/esm/parts/system-message/config/useValidateProps.js.map +7 -0
- package/esm/parts/system-message/index.js +7 -1
- package/esm/parts/system-message/index.js.map +7 -0
- package/esm/parts/system-message/props.js +13 -10
- package/esm/parts/system-message/props.js.map +7 -0
- package/esm/parts/system-message/style.js +46 -20
- package/esm/parts/system-message/style.js.map +7 -0
- package/esm/parts/tile-button/TileButton.js +75 -54
- package/esm/parts/tile-button/TileButton.js.map +7 -0
- package/esm/parts/tile-button/config/useValidateProps.js +6 -4
- package/esm/parts/tile-button/config/useValidateProps.js.map +7 -0
- package/esm/parts/tile-button/index.js +7 -1
- package/esm/parts/tile-button/index.js.map +7 -0
- package/esm/parts/tile-button/props.js +47 -33
- package/esm/parts/tile-button/props.js.map +7 -0
- package/esm/parts/tile-button/styled.js +200 -60
- package/esm/parts/tile-button/styled.js.map +7 -0
- package/esm/prop-types.js +19 -16
- package/esm/prop-types.js.map +7 -0
- package/esm/styled.js +13 -5
- package/esm/styled.js.map +7 -0
- package/esm/tests/utils.js +37 -0
- package/esm/tests/utils.js.map +7 -0
- package/package.json +10 -10
- package/types/parts/bubble/ChatBubble.d.ts +1 -1
- package/types/parts/chat-card/ChatCard.d.ts +1 -1
- package/types/parts/chat-composer/ChatContainerComposer.d.ts +1 -1
- package/types/parts/chat-container/ChatContainer.d.ts +1 -1
- package/types/parts/chat-container-messages-list/ChatContainerMessagesList.d.ts +1 -1
- package/types/parts/chat-empty-state/ChatEmptyState.d.ts +1 -1
- package/types/parts/chat-sidebar/SideBarChat.d.ts +1 -1
- package/types/parts/message-delimiter/MessageDelimiter.d.ts +1 -1
- package/types/parts/system-message/SystemMessage.d.ts +1 -1
- package/types/parts/tile-button/TileButton.d.ts +1 -1
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useValidatePropTypes } from "@elliemae/ds-props-helpers";
|
|
3
3
|
const useValidateProps = (props, schema) => {
|
|
4
4
|
useValidatePropTypes(props, schema);
|
|
5
5
|
};
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
export {
|
|
7
|
+
useValidateProps
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useValidateProps.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/chat-composer/config/useValidateProps.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatComposerProps } from '../props';\n\nexport const useValidateProps = (props: ChatComposerProps, schema: unknown): void => {\n useValidatePropTypes(props, schema);\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGO,MAAM,mBAAmB,CAAC,OAA0B,WAA0B;AACnF,uBAAqB,OAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ChatComposer, ChatComposerWithSchema } from "./ChatContainerComposer";
|
|
3
|
+
export {
|
|
4
|
+
ChatComposer,
|
|
5
|
+
ChatComposerWithSchema
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { PropTypes } from "react-desc";
|
|
3
|
+
import { noop } from "lodash";
|
|
4
4
|
const defaultComposerPros = {
|
|
5
|
-
placeholder:
|
|
6
|
-
inputValue:
|
|
5
|
+
placeholder: "Type your message",
|
|
6
|
+
inputValue: "",
|
|
7
7
|
onChange: noop,
|
|
8
8
|
onResize: noop,
|
|
9
9
|
onSend: noop,
|
|
@@ -11,27 +11,40 @@ const defaultComposerPros = {
|
|
|
11
11
|
onBlur: noop,
|
|
12
12
|
onKeyDown: noop,
|
|
13
13
|
maxHeight: 0,
|
|
14
|
-
inputMaxLength:
|
|
15
|
-
maxLengthMessage:
|
|
14
|
+
inputMaxLength: void 0,
|
|
15
|
+
maxLengthMessage: void 0,
|
|
16
16
|
buttonDisabled: false,
|
|
17
|
-
dataTestid:
|
|
17
|
+
dataTestid: "ds-chat-composer",
|
|
18
18
|
actionRef: noop
|
|
19
19
|
};
|
|
20
20
|
const composerProps = {
|
|
21
|
-
placeholder: PropTypes.string.description(
|
|
22
|
-
inputValue: PropTypes.string.description(
|
|
23
|
-
maxLengthMessage: PropTypes.string.description(
|
|
24
|
-
onChange: PropTypes.func.description(
|
|
25
|
-
onResize: PropTypes.func.description(
|
|
26
|
-
onSend: PropTypes.func.description(
|
|
27
|
-
onFocus: PropTypes.func.description(
|
|
28
|
-
onBlur: PropTypes.func.description(
|
|
29
|
-
onKeyDown: PropTypes.func.description(
|
|
30
|
-
maxHeight: PropTypes.number.description(
|
|
31
|
-
inputMaxLength: PropTypes.number.description(
|
|
32
|
-
buttonDisabled: PropTypes.bool.description(
|
|
33
|
-
dataTestid: PropTypes.string.description(
|
|
34
|
-
actionRef: PropTypes.object.description(
|
|
21
|
+
placeholder: PropTypes.string.description("Input Placeholder").defaultValue(defaultComposerPros.placeholder),
|
|
22
|
+
inputValue: PropTypes.string.description("Input value").defaultValue(defaultComposerPros.inputValue),
|
|
23
|
+
maxLengthMessage: PropTypes.string.description("Max length message").defaultValue(defaultComposerPros.maxLengthMessage),
|
|
24
|
+
onChange: PropTypes.func.description("Called when the user types").defaultValue(defaultComposerPros.onChange),
|
|
25
|
+
onResize: PropTypes.func.description("Called the input changes his height").defaultValue(defaultComposerPros.onResize),
|
|
26
|
+
onSend: PropTypes.func.description("Called when the click send").defaultValue(defaultComposerPros.onSend),
|
|
27
|
+
onFocus: PropTypes.func.description("Input focus").defaultValue(defaultComposerPros.onFocus),
|
|
28
|
+
onBlur: PropTypes.func.description("Input blur").defaultValue(defaultComposerPros.onBlur),
|
|
29
|
+
onKeyDown: PropTypes.func.description("Input on key down").defaultValue(defaultComposerPros.onKeyDown),
|
|
30
|
+
maxHeight: PropTypes.number.description("Max height of the composer. Use 0 for no limit").defaultValue(defaultComposerPros.onBlur),
|
|
31
|
+
inputMaxLength: PropTypes.number.description("Max length of the composer. `undefined` for no limit").defaultValue(defaultComposerPros.inputMaxLength),
|
|
32
|
+
buttonDisabled: PropTypes.bool.description("Control the disabled for the send button").defaultValue(defaultComposerPros.buttonDisabled),
|
|
33
|
+
dataTestid: PropTypes.string.description("Data testid").defaultValue(defaultComposerPros.placeholder),
|
|
34
|
+
actionRef: PropTypes.object.description(`Reference:
|
|
35
|
+
{
|
|
36
|
+
scrollToIndex: (n: number) => void,
|
|
37
|
+
getMessagesInView: () => number[],
|
|
38
|
+
focusToIndex: (n: number) => void,
|
|
39
|
+
focusToList: () => void,
|
|
40
|
+
focusToComposer: () => void,
|
|
41
|
+
focusToSend: () => void,
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
`).defaultValue(defaultComposerPros.actionRef)
|
|
35
45
|
};
|
|
36
|
-
|
|
37
|
-
|
|
46
|
+
export {
|
|
47
|
+
composerProps,
|
|
48
|
+
defaultComposerPros
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=props.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/props.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultComposerPros: ChatComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: noop,\n};\n\nexport interface ChatComposerProps {\n placeholder?: string;\n inputValue?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (value: string) => void;\n onFocus?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onBlur?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onKeyDown?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n maxHeight?: number;\n inputMaxLength: number | undefined;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef: PropTypes.func;\n}\n\nexport const composerProps = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultComposerPros.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultComposerPros.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultComposerPros.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultComposerPros.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultComposerPros.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultComposerPros.actionRef),\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAOO,MAAM,sBAAyC;AAAA,EACpD,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,WAAW;AAAA;AAoBN,MAAM,gBAAgB;AAAA,EAC3B,aAAa,UAAU,OAAO,YAAY,qBAAqB,aAAa,oBAAoB;AAAA,EAChG,YAAY,UAAU,OAAO,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACzF,kBAAkB,UAAU,OACzB,YAAY,sBACZ,aAAa,oBAAoB;AAAA,EACpC,UAAU,UAAU,KAAK,YAAY,8BAA8B,aAAa,oBAAoB;AAAA,EACpG,UAAU,UAAU,KACjB,YAAY,uCACZ,aAAa,oBAAoB;AAAA,EACpC,QAAQ,UAAU,KAAK,YAAY,8BAA8B,aAAa,oBAAoB;AAAA,EAClG,SAAS,UAAU,KAAK,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACpF,QAAQ,UAAU,KAAK,YAAY,cAAc,aAAa,oBAAoB;AAAA,EAClF,WAAW,UAAU,KAAK,YAAY,qBAAqB,aAAa,oBAAoB;AAAA,EAC5F,WAAW,UAAU,OAClB,YAAY,kDACZ,aAAa,oBAAoB;AAAA,EACpC,gBAAgB,UAAU,OACvB,YAAY,wDACZ,aAAa,oBAAoB;AAAA,EACpC,gBAAgB,UAAU,KACvB,YAAY,4CACZ,aAAa,oBAAoB;AAAA,EACpC,YAAY,UAAU,OAAO,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACzF,WAAW,UAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAYD,aAAa,oBAAoB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,22 +1,73 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
import { DSButton } from "@elliemae/ds-button";
|
|
5
|
+
const StyledChatContainerContentComposer = styled(Grid)`
|
|
6
|
+
width: 100%;
|
|
7
|
+
min-height: 56px;
|
|
8
|
+
background: ${(props) => props.theme.colors.neutral["050"]};
|
|
9
|
+
padding: ${(props) => props.theme.space.xxs};
|
|
10
|
+
padding-bottom: 3px;
|
|
11
|
+
padding-top: 6px;
|
|
12
|
+
padding-left: ${(props) => props.theme.space.xs};
|
|
13
|
+
max-height: ${(props) => props.maxHeight};
|
|
14
|
+
border-top: 1px solid #cbcfd7;
|
|
15
|
+
`;
|
|
16
|
+
const StyledComposerInput = styled.textarea`
|
|
17
|
+
padding: ${(props) => props.theme.space.xxs};
|
|
18
|
+
resize: none;
|
|
19
|
+
min-height: 32px;
|
|
20
|
+
border-radius: 2px;
|
|
21
|
+
border: solid 1px #cbcfd7;
|
|
22
|
+
color: #25292f;
|
|
23
|
+
height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height};
|
|
24
|
+
min-width: 244px;
|
|
25
|
+
overflow-y: auto;
|
|
26
|
+
font-size: 13px;
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
line-height: 1;
|
|
29
|
+
transition: height 0.05s;
|
|
30
|
+
&:focus {
|
|
31
|
+
outline: none;
|
|
32
|
+
border: 1px solid ${(props) => props.theme.colors.brand[600]};
|
|
33
|
+
box-shadow: inset 0 0 0 1px #8cc2ed;
|
|
34
|
+
border-radius: 2px;
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
const StyledComposerButton = styled(DSButton)`
|
|
38
|
+
&:disabled {
|
|
39
|
+
background: none;
|
|
40
|
+
svg {
|
|
41
|
+
fill: #5d6775;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
svg {
|
|
45
|
+
fill: ${(props) => props.theme.colors.brand[600]};
|
|
46
|
+
}
|
|
47
|
+
&:focus {
|
|
48
|
+
background: ${(props) => props.theme.colors.brand[200]};
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
51
|
+
const StyledCounterArea = styled(Grid)`
|
|
52
|
+
text-align: right;
|
|
53
|
+
font-size: 11px;
|
|
54
|
+
height: 15px;
|
|
55
|
+
align-items: center;
|
|
56
|
+
font-style: italic;
|
|
57
|
+
${(props) => props.hasError ? `color:${props.theme.colors.danger[900]};` : ""}
|
|
58
|
+
position:relative;
|
|
59
|
+
`;
|
|
60
|
+
const StyledCounterErrorA11y = styled.span`
|
|
61
|
+
width: 1px;
|
|
62
|
+
height: 1px;
|
|
63
|
+
position: absolute;
|
|
64
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
65
|
+
`;
|
|
66
|
+
export {
|
|
67
|
+
StyledChatContainerContentComposer,
|
|
68
|
+
StyledComposerButton,
|
|
69
|
+
StyledComposerInput,
|
|
70
|
+
StyledCounterArea,
|
|
71
|
+
StyledCounterErrorA11y
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/styled.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\n width: 100%;\n min-height: 56px;\n background: ${(props) => props.theme.colors.neutral['050']};\n padding: ${(props) => props.theme.space.xxs};\n padding-bottom: 3px;\n padding-top: 6px;\n padding-left: ${(props) => props.theme.space.xs};\n max-height: ${(props) => props.maxHeight};\n border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<any>`\n padding: ${(props) => props.theme.space.xxs};\n resize: none;\n min-height: 32px;\n border-radius: 2px;\n border: solid 1px #cbcfd7;\n color: #25292f;\n height: ${(props: TextAreaProps) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n min-width: 244px;\n overflow-y: auto;\n font-size: 13px;\n font-weight: 400;\n line-height: 1;\n transition: height 0.05s;\n &:focus {\n outline: none;\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n box-shadow: inset 0 0 0 1px #8cc2ed;\n border-radius: 2px;\n }\n`;\nexport const StyledComposerButton = styled(DSButton)`\n &:disabled {\n background: none;\n svg {\n fill: #5d6775;\n }\n }\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:focus {\n background: ${(props) => props.theme.colors.brand[200]};\n }\n`;\n\nexport const StyledCounterArea = styled(Grid)`\n text-align: right;\n font-size: 11px;\n height: 15px;\n align-items: center;\n font-style: italic;\n ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n width: 1px;\n height: 1px;\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAIO,MAAM,qCAAqC,OAAO;AAAA;AAAA;AAAA,gBAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,kBAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM;AAAA;AAAA;AAI1B,MAAM,sBAAsB,OAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,CAAC,UAA0B,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS9E,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKrD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,kBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,UAAU;AAAA;AAAA;AAIvE,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,31 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
|
|
13
|
-
import { ChatComposer } from '../chat-composer/ChatContainerComposer.js';
|
|
14
|
-
import { ChatContainerMessagesList } from '../chat-container-messages-list/ChatContainerMessagesList.js';
|
|
15
|
-
import { containerProps, defaultProps } from './props.js';
|
|
16
|
-
import { StyledIndicatorContainer, StyledChatContainerContent, MobileStyledChatContainerContent } from './styled.js';
|
|
17
|
-
import { useValidateProps } from './config/useValidateProps.js';
|
|
18
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
19
|
-
|
|
20
|
-
var _DSIndeterminateProgr;
|
|
21
|
-
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
-
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
|
-
|
|
26
|
-
const ChatContainer = props => {
|
|
27
|
-
var _messagesListProps$me2, _containerRef$current;
|
|
28
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { noop } from "lodash";
|
|
4
|
+
import { describe } from "react-desc";
|
|
5
|
+
import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
|
|
6
|
+
import DSBanner, { BANNER_TYPES } from "@elliemae/ds-banner";
|
|
7
|
+
import { ChatComposer } from "../chat-composer";
|
|
8
|
+
import { ChatContainerMessagesList } from "../chat-container-messages-list";
|
|
9
|
+
import { defaultProps, containerProps } from "./props";
|
|
10
|
+
import { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from "./styled";
|
|
11
|
+
import { useValidateProps } from "./config/useValidateProps";
|
|
12
|
+
const ChatContainer = (props) => {
|
|
29
13
|
useValidateProps(props, containerProps);
|
|
30
14
|
const {
|
|
31
15
|
sendingText,
|
|
@@ -34,10 +18,7 @@ const ChatContainer = props => {
|
|
|
34
18
|
bannerProps,
|
|
35
19
|
messagesListProps,
|
|
36
20
|
composerProps,
|
|
37
|
-
composerProps: {
|
|
38
|
-
onResize: onComposerResize,
|
|
39
|
-
onKeyDown: onComposerKeyDown
|
|
40
|
-
},
|
|
21
|
+
composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },
|
|
41
22
|
actionRef,
|
|
42
23
|
device,
|
|
43
24
|
isLoading,
|
|
@@ -45,118 +26,103 @@ const ChatContainer = props => {
|
|
|
45
26
|
getMoreMessages,
|
|
46
27
|
ariaLabel
|
|
47
28
|
} = props;
|
|
48
|
-
const bannerRef =
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
scrollToIndex: noop
|
|
55
|
-
});
|
|
56
|
-
const onResize = React.useCallback(height => {
|
|
57
|
-
if (onComposerResize) onComposerResize(height);
|
|
58
|
-
/*
|
|
59
|
-
setTimeout is used to equal the animation duration from the
|
|
60
|
-
composer text area when increase its size
|
|
61
|
-
*/
|
|
62
|
-
|
|
29
|
+
const bannerRef = React2.useRef({ focusOnWrapper: noop, focusOnLink: noop });
|
|
30
|
+
const containerRef = React2.useRef();
|
|
31
|
+
const listRef = React2.useRef({ scrollToIndex: noop });
|
|
32
|
+
const onResize = React2.useCallback((height) => {
|
|
33
|
+
if (onComposerResize)
|
|
34
|
+
onComposerResize(height);
|
|
63
35
|
setTimeout(() => {
|
|
64
36
|
actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
|
|
65
|
-
align:
|
|
37
|
+
align: "start"
|
|
66
38
|
});
|
|
67
39
|
}, 50);
|
|
68
40
|
}, [onComposerResize, messagesListProps.messages, actionRef]);
|
|
69
|
-
const Container = device ===
|
|
70
|
-
const handleTabs =
|
|
71
|
-
if (onComposerKeyDown)
|
|
41
|
+
const Container = device === "desktop" ? StyledChatContainerContent : MobileStyledChatContainerContent;
|
|
42
|
+
const handleTabs = React2.useCallback((e) => {
|
|
43
|
+
if (onComposerKeyDown)
|
|
44
|
+
onComposerKeyDown(e);
|
|
45
|
+
else {
|
|
72
46
|
const ref = actionRef || listRef;
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
var _messagesListProps$me;
|
|
76
|
-
|
|
77
|
-
if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
|
|
47
|
+
if (e.shiftKey && e.key === "Tab") {
|
|
48
|
+
if (messagesListProps.messages?.length > 0) {
|
|
78
49
|
e.preventDefault();
|
|
79
|
-
|
|
80
|
-
if (['top', 'bottom'].includes(bannerPosition)) {
|
|
50
|
+
if (["top", "bottom"].includes(bannerPosition)) {
|
|
81
51
|
bannerRef.current.focusOnWrapper();
|
|
82
52
|
} else {
|
|
83
|
-
var _ref$current;
|
|
84
|
-
|
|
85
53
|
const last = ref.current.getMessagesInView().pop();
|
|
86
|
-
|
|
54
|
+
ref.current?.focusToIndexWithoutScroll(last);
|
|
87
55
|
}
|
|
88
56
|
}
|
|
89
57
|
}
|
|
90
58
|
}
|
|
91
|
-
}, [actionRef, onComposerKeyDown, bannerPosition,
|
|
92
|
-
|
|
93
|
-
React.useEffect(() => {
|
|
59
|
+
}, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length]);
|
|
60
|
+
React2.useEffect(() => {
|
|
94
61
|
if (actionRef && actionRef.current) {
|
|
95
62
|
actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
|
|
96
63
|
actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
|
|
97
64
|
}
|
|
98
65
|
}, [actionRef]);
|
|
99
|
-
return
|
|
100
|
-
rows: [
|
|
66
|
+
return /* @__PURE__ */ React2.createElement(Container, {
|
|
67
|
+
rows: ["minmax(0, 1fr)", "auto"],
|
|
101
68
|
ref: containerRef,
|
|
102
69
|
role: "region",
|
|
103
|
-
"aria-label": ariaLabel
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
|
|
153
|
-
actionRef: actionRef || listRef
|
|
154
|
-
}))]
|
|
155
|
-
});
|
|
70
|
+
"aria-label": ariaLabel
|
|
71
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
72
|
+
style: { position: "relative", overflow: "hidden" }
|
|
73
|
+
}, /* @__PURE__ */ React2.createElement(ChatContainerMessagesList, {
|
|
74
|
+
...messagesListProps,
|
|
75
|
+
actionRef: actionRef || listRef,
|
|
76
|
+
isLoading,
|
|
77
|
+
hasMoreItems,
|
|
78
|
+
getMoreMessages,
|
|
79
|
+
sendingMessages,
|
|
80
|
+
sendingText,
|
|
81
|
+
bannerPosition,
|
|
82
|
+
bannerRef
|
|
83
|
+
}), ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
|
|
84
|
+
isLoading,
|
|
85
|
+
"data-testid": "ds-chat-loading-indicator"
|
|
86
|
+
}, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
|
|
87
|
+
processing: true,
|
|
88
|
+
title: "Loading"
|
|
89
|
+
})) : null, /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
|
|
90
|
+
linear: true,
|
|
91
|
+
isLoading: bannerPosition
|
|
92
|
+
}, /* @__PURE__ */ React2.createElement(DSBanner, {
|
|
93
|
+
showCloseButton: true,
|
|
94
|
+
label: bannerProps.label || "Unread messages",
|
|
95
|
+
containerProps: { id: "ds-chat-banner" },
|
|
96
|
+
actionLink: {
|
|
97
|
+
label: bannerProps.viewLabel || "View",
|
|
98
|
+
onClick: bannerProps.onView
|
|
99
|
+
},
|
|
100
|
+
onClose: bannerProps.onClose,
|
|
101
|
+
isOpen: true,
|
|
102
|
+
type: bannerProps.type || BANNER_TYPES.INFO,
|
|
103
|
+
actionRef: bannerRef
|
|
104
|
+
})), sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
|
|
105
|
+
isLoading: "bottom",
|
|
106
|
+
linear: true,
|
|
107
|
+
"data-testid": "ds-chat-loading-indicator"
|
|
108
|
+
}, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
|
|
109
|
+
processing: true,
|
|
110
|
+
title: sendingText,
|
|
111
|
+
lineOnly: true
|
|
112
|
+
})) : null), /* @__PURE__ */ React2.createElement(ChatComposer, {
|
|
113
|
+
...composerProps,
|
|
114
|
+
onKeyDown: handleTabs,
|
|
115
|
+
onResize,
|
|
116
|
+
maxHeight: (containerRef.current?.clientHeight || 0) / 2,
|
|
117
|
+
actionRef: actionRef || listRef
|
|
118
|
+
}));
|
|
156
119
|
};
|
|
157
|
-
|
|
120
|
+
ChatContainer.propTypes = containerProps;
|
|
158
121
|
ChatContainer.defaultProps = defaultProps;
|
|
159
122
|
const ChatContainerWithSchema = describe(ChatContainer);
|
|
160
123
|
ChatContainerWithSchema.propTypes = containerProps;
|
|
161
|
-
|
|
162
|
-
|
|
124
|
+
export {
|
|
125
|
+
ChatContainer,
|
|
126
|
+
ChatContainerWithSchema
|
|
127
|
+
};
|
|
128
|
+
//# sourceMappingURL=ChatContainer.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container/ChatContainer.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { noop } from 'lodash';\nimport { describe } from 'react-desc';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { ChatContainerProps, defaultProps, containerProps } from './props';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst ChatContainer = (props: ChatContainerProps): JSX.Element => {\n useValidateProps(props, containerProps);\n\n const {\n sendingText,\n sendingMessages,\n bannerPosition,\n bannerProps,\n messagesListProps,\n composerProps,\n composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n actionRef,\n device,\n isLoading,\n hasMoreItems,\n getMoreMessages,\n ariaLabel,\n } = props;\n const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n const containerRef = React.useRef<HTMLElement>();\n const listRef = React.useRef({ scrollToIndex: noop });\n\n const onResize = React.useCallback(\n (height: number) => {\n if (onComposerResize) onComposerResize(height);\n /*\n setTimeout is used to equal the animation duration from the \n composer text area when increase its size\n */\n setTimeout(() => {\n actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n align: 'start',\n });\n }, 50);\n },\n [onComposerResize, messagesListProps.messages, actionRef],\n );\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else {\n const ref = actionRef || listRef;\n if (e.shiftKey && e.key === 'Tab') {\n if (messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n } else {\n const last = ref.current.getMessagesInView().pop();\n ref.current?.focusToIndexWithoutScroll(last);\n }\n }\n }\n }\n },\n [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n );\n\n // Map actions\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n }\n }, [actionRef]);\n\n return (\n <Container rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\" aria-label={ariaLabel}>\n <div style={{ position: 'relative', overflow: 'hidden' }}>\n <ChatContainerMessagesList\n {...messagesListProps}\n actionRef={actionRef || listRef}\n isLoading={isLoading}\n hasMoreItems={hasMoreItems}\n getMoreMessages={getMoreMessages}\n sendingMessages={sendingMessages}\n sendingText={sendingText}\n bannerPosition={bannerPosition}\n bannerRef={bannerRef}\n />\n {['top', 'bottom'].includes(isLoading) ? (\n <StyledIndicatorContainer isLoading={isLoading} data-testid=\"ds-chat-loading-indicator\">\n <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n </StyledIndicatorContainer>\n ) : null}\n <StyledIndicatorContainer linear isLoading={bannerPosition}>\n <DSBanner\n showCloseButton\n label={bannerProps.label || 'Unread messages'}\n containerProps={{ id: 'ds-chat-banner' }}\n actionLink={{\n label: bannerProps.viewLabel || 'View',\n onClick: bannerProps.onView,\n }}\n onClose={bannerProps.onClose}\n isOpen\n type={bannerProps.type || BANNER_TYPES.INFO}\n actionRef={bannerRef}\n />\n </StyledIndicatorContainer>\n {sendingMessages && sendingMessages.length > 0 ? (\n <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid=\"ds-chat-loading-indicator\">\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onResize}\n maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n actionRef={actionRef || listRef}\n />\n </Container>\n );\n};\n\nChatContainer.propTypes = containerProps;\nChatContainer.defaultProps = defaultProps;\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = containerProps;\n\nexport { ChatContainer, ChatContainerWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
3
3
|
const useValidateProps = (props, propTypes) => {
|
|
4
4
|
useValidateTypescriptPropTypes(props, propTypes);
|
|
5
5
|
};
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
export {
|
|
7
|
+
useValidateProps
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useValidateProps.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/chat-container/config/useValidateProps.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatContainerProps } from '../props';\n\nexport const useValidateProps = (props: ChatContainerProps, propTypes: unknown): void => {\n useValidateTypescriptPropTypes(props, propTypes);\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGO,MAAM,mBAAmB,CAAC,OAA2B,cAA6B;AACvF,iCAA+B,OAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ChatContainer, ChatContainerWithSchema } from "./ChatContainer";
|
|
3
|
+
export {
|
|
4
|
+
ChatContainer,
|
|
5
|
+
ChatContainerWithSchema
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatContainer, ChatContainerWithSchema } from './ChatContainer';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|