@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.1 → 24.4.1-featurechatcomponentscmem6775.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/CHANGELOG.md +2 -0
- package/dist/cjs/components/Chat/ChatContent.js +2 -55
- package/dist/cjs/components/Chat/ChatContent.js.map +1 -1
- package/dist/cjs/components/Chat/ChatField.js +6 -4
- package/dist/cjs/components/Chat/ChatField.js.map +1 -1
- package/dist/cjs/components/ContentShrinker/ContentShrinker.js +86 -0
- package/dist/cjs/components/ContentShrinker/ContentShrinker.js.map +1 -0
- package/dist/cjs/components/index.js +1 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/Chat/ChatContent.js +3 -33
- package/dist/esm/components/Chat/ChatContent.js.map +1 -1
- package/dist/esm/components/Chat/ChatField.js +6 -4
- package/dist/esm/components/Chat/ChatField.js.map +1 -1
- package/dist/esm/components/ContentShrinker/ContentShrinker.js +67 -0
- package/dist/esm/components/ContentShrinker/ContentShrinker.js.map +1 -0
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/types/components/Chat/ChatField.d.ts +4 -3
- package/dist/types/components/ContentShrinker/ContentShrinker.d.ts +9 -0
- package/dist/types/components/index.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/Chat/ChatContent.tsx +3 -39
- package/src/components/Chat/ChatField.tsx +17 -7
- package/src/components/Chat/stories/ChatField.stories.tsx +1 -1
- package/src/components/ContentShrinker/ContentShrinker.stories.tsx +25 -0
- package/src/components/ContentShrinker/ContentShrinker.tsx +59 -0
- package/src/components/index.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
14
14
|
- let the user input texts, calls `onSubmit` handler on enter key and submit button
|
|
15
15
|
- `<ChatArea />`
|
|
16
16
|
- combine a list of chat contents and user input box
|
|
17
|
+
- `<ContentShrinker />`
|
|
18
|
+
- displays all HTML content as only 1 ellipsed text line
|
|
17
19
|
|
|
18
20
|
## [24.4.1] - 2025-08-25
|
|
19
21
|
|
|
@@ -1,27 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
3
|
var t = {};
|
|
27
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -39,10 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
17
|
exports.ChatContent = void 0;
|
|
41
18
|
const react_1 = __importDefault(require("react"));
|
|
42
|
-
const server_1 = require("react-dom/server");
|
|
43
|
-
const ReactIs = __importStar(require("react-is"));
|
|
44
19
|
const constants_1 = require("../../configuration/constants");
|
|
45
20
|
const Markdown_1 = require("./../../cmem/markdown/Markdown");
|
|
21
|
+
const ContentShrinker_1 = require("./../ContentShrinker/ContentShrinker");
|
|
46
22
|
const FlexibleLayout_1 = require("./../FlexibleLayout");
|
|
47
23
|
const IconButton_1 = require("./../Icon/IconButton");
|
|
48
24
|
const Spacing_1 = require("./../Separation/Spacing");
|
|
@@ -62,34 +38,6 @@ const ChatContent = (_a) => {
|
|
|
62
38
|
}
|
|
63
39
|
};
|
|
64
40
|
const content = markdownProps && typeof children === "string" ? react_1.default.createElement(Markdown_1.Markdown, Object.assign({}, markdownProps), children) : children;
|
|
65
|
-
const onlyText = (children) => {
|
|
66
|
-
if (children instanceof Array) {
|
|
67
|
-
return children
|
|
68
|
-
.map((child) => {
|
|
69
|
-
return onlyText(child);
|
|
70
|
-
})
|
|
71
|
-
.join(" ");
|
|
72
|
-
}
|
|
73
|
-
return react_1.default.Children.toArray(children)
|
|
74
|
-
.map((child) => {
|
|
75
|
-
var _a;
|
|
76
|
-
if (ReactIs.isFragment(child)) {
|
|
77
|
-
return onlyText((_a = child.props) === null || _a === void 0 ? void 0 : _a.children);
|
|
78
|
-
}
|
|
79
|
-
if (typeof child === "string") {
|
|
80
|
-
return child;
|
|
81
|
-
}
|
|
82
|
-
if (typeof child === "number") {
|
|
83
|
-
return child.toString();
|
|
84
|
-
}
|
|
85
|
-
if (ReactIs.isElement(child)) {
|
|
86
|
-
// for some reasons `renderToString` returns empty string if not wrappe in a `span`
|
|
87
|
-
return (0, server_1.renderToString)(react_1.default.createElement("span", null, child));
|
|
88
|
-
}
|
|
89
|
-
return "";
|
|
90
|
-
})
|
|
91
|
-
.join(" ");
|
|
92
|
-
};
|
|
93
41
|
const chatitem = (react_1.default.createElement("div", Object.assign({ className: `${constants_1.CLASSPREFIX}-chat__content` +
|
|
94
42
|
` ${constants_1.CLASSPREFIX}-chat__content--display-${displayType}` +
|
|
95
43
|
` ${constants_1.CLASSPREFIX}-chat__content--align-${alignment}` +
|
|
@@ -98,8 +46,7 @@ const ChatContent = (_a) => {
|
|
|
98
46
|
statusLine && (react_1.default.createElement(Typography_1.HtmlContentBlock, { small: true },
|
|
99
47
|
statusLine,
|
|
100
48
|
react_1.default.createElement(Spacing_1.Spacing, { size: "tiny" }))),
|
|
101
|
-
displayShrinked && autoShrink ?
|
|
102
|
-
react_1.default.createElement(Markdown_1.Markdown, { removeMarkup: true }, onlyText(content)))) : (content)));
|
|
49
|
+
displayShrinked && autoShrink ? react_1.default.createElement(ContentShrinker_1.ContentShrinker, null, content) : content));
|
|
103
50
|
const indentationSizes = {
|
|
104
51
|
small: "8%",
|
|
105
52
|
medium: "21%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,20 +25,22 @@ const TextArea_1 = require("../TextField/TextArea");
|
|
|
25
25
|
*/
|
|
26
26
|
const ChatField = (_a) => {
|
|
27
27
|
var _b;
|
|
28
|
-
var { className,
|
|
28
|
+
var { className, onTextSubmit, rightElement } = _a, otherTextAreaProps = __rest(_a, ["className", "onTextSubmit", "rightElement"]);
|
|
29
29
|
const chatvalue = react_1.default.useRef((_b = otherTextAreaProps.children) !== null && _b !== void 0 ? _b : "");
|
|
30
30
|
const onContentChange = (value) => {
|
|
31
31
|
chatvalue.current = value;
|
|
32
32
|
};
|
|
33
33
|
const onEnter = (e) => {
|
|
34
|
-
if (e.keyCode === 13 && e.shiftKey === false) {
|
|
34
|
+
if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
|
|
35
35
|
e.preventDefault();
|
|
36
|
-
|
|
36
|
+
onTextSubmit(chatvalue.current);
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
return (react_1.default.createElement(TextArea_1.TextArea, Object.assign({ fill: true, autoResize: true, className: `${constants_1.CLASSPREFIX}-chat__inputfield` + (className ? ` ${className}` : ""), onChange: (e) => {
|
|
40
40
|
onContentChange(e.target.value);
|
|
41
|
-
}, onKeyDown: onEnter
|
|
41
|
+
}, onKeyDown: onTextSubmit ? onEnter : undefined, rightElement: (onTextSubmit || rightElement) && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
42
|
+
onTextSubmit && (react_1.default.createElement(IconButton_1.IconButton, { name: "operation-send", onClick: () => onTextSubmit(chatvalue.current) })),
|
|
43
|
+
rightElement)) }, otherTextAreaProps)));
|
|
42
44
|
};
|
|
43
45
|
exports.ChatField = ChatField;
|
|
44
46
|
exports.default = exports.ChatField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatField.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,6DAAsE;AACtE,mDAAgD;AAChD,oDAAgE;
|
|
1
|
+
{"version":3,"file":"ChatField.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,6DAAsE;AACtE,mDAAgD;AAChD,oDAAgE;AAchE;;;GAGG;AACI,MAAM,SAAS,GAAG,CAAC,EAAgF,EAAE,EAAE;;QAApF,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,OAAyC,EAApC,kBAAkB,cAA9D,6CAAgE,CAAF;IACpF,MAAM,SAAS,GAAG,eAAK,CAAC,MAAM,CAAS,MAAA,kBAAkB,CAAC,QAAQ,mCAAI,EAAE,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;QACtC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,CAA2C,EAAE,EAAE;QAC5D,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,KAAK,KAAK,IAAI,YAAY,EAAE,CAAC;YAC3D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,mBAAQ,kBACL,IAAI,QACJ,UAAU,QACV,SAAS,EAAE,GAAG,uBAAM,mBAAmB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC5E,QAAQ,EAAE,CAAC,CAAyC,EAAE,EAAE;YACpD,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,EACD,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC7C,YAAY,EACR,CAAC,YAAY,IAAI,YAAY,CAAC,IAAI,CAC9B;YACK,YAAY,IAAI,CACb,8BAAC,uBAAU,IAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,GAAI,CACzF;YACA,YAAY,CACd,CACN,IAED,kBAAkB,EACxB,CACL,CAAC;AACN,CAAC,CAAC;AApCW,QAAA,SAAS,aAoCpB;AAEF,kBAAe,iBAAS,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
exports.ContentShrinker = void 0;
|
|
41
|
+
const react_1 = __importDefault(require("react"));
|
|
42
|
+
const server_1 = require("react-dom/server");
|
|
43
|
+
const ReactIs = __importStar(require("react-is"));
|
|
44
|
+
const constants_1 = require("../../configuration/constants");
|
|
45
|
+
const Markdown_1 = require("./../../cmem/markdown/Markdown");
|
|
46
|
+
const Typography_1 = require("./../Typography");
|
|
47
|
+
/**
|
|
48
|
+
* Component to shrink HTML markup content to 1 single text line.
|
|
49
|
+
* Display is based on `OverflowText`.
|
|
50
|
+
*/
|
|
51
|
+
const ContentShrinker = (_a) => {
|
|
52
|
+
var { className, children } = _a, otherOverflowProps = __rest(_a, ["className", "children"]);
|
|
53
|
+
const onlyText = (children) => {
|
|
54
|
+
if (children instanceof Array) {
|
|
55
|
+
return children
|
|
56
|
+
.map((child) => {
|
|
57
|
+
return onlyText(child);
|
|
58
|
+
})
|
|
59
|
+
.join(" ");
|
|
60
|
+
}
|
|
61
|
+
return react_1.default.Children.toArray(children)
|
|
62
|
+
.map((child) => {
|
|
63
|
+
var _a;
|
|
64
|
+
if (ReactIs.isFragment(child)) {
|
|
65
|
+
return onlyText((_a = child.props) === null || _a === void 0 ? void 0 : _a.children);
|
|
66
|
+
}
|
|
67
|
+
if (typeof child === "string") {
|
|
68
|
+
return child;
|
|
69
|
+
}
|
|
70
|
+
if (typeof child === "number") {
|
|
71
|
+
return child.toString();
|
|
72
|
+
}
|
|
73
|
+
if (ReactIs.isElement(child)) {
|
|
74
|
+
// for some reasons `renderToString` returns empty string if not wrappe in a `span`
|
|
75
|
+
return (0, server_1.renderToString)(react_1.default.createElement("span", null, child));
|
|
76
|
+
}
|
|
77
|
+
return "";
|
|
78
|
+
})
|
|
79
|
+
.join(" ");
|
|
80
|
+
};
|
|
81
|
+
return (react_1.default.createElement(Typography_1.OverflowText, Object.assign({ className: `${constants_1.CLASSPREFIX}-contentshrinker` + (className ? ` ${className}` : ""), passDown: true }, otherOverflowProps),
|
|
82
|
+
react_1.default.createElement(Markdown_1.Markdown, { removeMarkup: true, inheritBlock: true }, onlyText(children))));
|
|
83
|
+
};
|
|
84
|
+
exports.ContentShrinker = ContentShrinker;
|
|
85
|
+
exports.default = exports.ContentShrinker;
|
|
86
|
+
//# sourceMappingURL=ContentShrinker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContentShrinker.js","sourceRoot":"","sources":["../../../../src/components/ContentShrinker/ContentShrinker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,6CAAkD;AAClD,kDAAoC;AAEpC,6DAAsE;AAEtE,6DAA0D;AAC1D,gDAAkE;AAIlE;;;GAGG;AACI,MAAM,eAAe,GAAG,CAAC,EAAoE,EAAE,EAAE;QAAxE,EAAE,SAAS,EAAE,QAAQ,OAA+C,EAA1C,kBAAkB,cAA5C,yBAA8C,CAAF;IACxE,MAAM,QAAQ,GAAG,CAAC,QAA6C,EAAU,EAAE;QACvE,IAAI,QAAQ,YAAY,KAAK,EAAE,CAAC;YAC5B,OAAO,QAAQ;iBACV,GAAG,CAAC,CAAC,KAAsB,EAAE,EAAE;gBAC5B,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,CAAC;iBACD,IAAI,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;QAED,OAAO,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aAClC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;;YACX,IAAI,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,CAAC,CAAC;YAC3C,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC;YACjB,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC3B,mFAAmF;gBACnF,OAAO,IAAA,uBAAc,EAAC,4CAAO,KAAK,CAAQ,CAAC,CAAC;YAChD,CAAC;YACD,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,yBAAY,kBACT,SAAS,EAAE,GAAG,uBAAM,kBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,QAAQ,UACJ,kBAAkB;QAEtB,8BAAC,mBAAQ,IAAC,YAAY,QAAC,YAAY,UAC9B,QAAQ,CAAC,QAAQ,CAAC,CACZ,CACA,CAClB,CAAC;AACN,CAAC,CAAC;AAzCW,QAAA,eAAe,mBAyC1B;AAEF,kBAAe,uBAAe,CAAC"}
|
|
@@ -26,6 +26,7 @@ __exportStar(require("./Button/Button"), exports);
|
|
|
26
26
|
__exportStar(require("./Card"), exports);
|
|
27
27
|
__exportStar(require("./Chat"), exports);
|
|
28
28
|
__exportStar(require("./Checkbox/Checkbox"), exports);
|
|
29
|
+
__exportStar(require("./ContentShrinker/ContentShrinker"), exports);
|
|
29
30
|
__exportStar(require("./ContextOverlay"), exports);
|
|
30
31
|
__exportStar(require("./Depiction/Depiction"), exports);
|
|
31
32
|
__exportStar(require("./Dialog"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,sDAAoC;AACpC,iDAA+B;AAC/B,mDAAiC;AACjC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,yCAAuB;AACvB,sDAAoC;AACpC,mDAAiC;AACjC,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,4DAA0C;AAC1C,wEAAsD;AACtD,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,8CAA4B;AAC5B,8DAA4C;AAE5C,+CAA6B"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,sDAAoC;AACpC,iDAA+B;AAC/B,mDAAiC;AACjC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,yCAAuB;AACvB,sDAAoC;AACpC,oEAAkD;AAClD,mDAAiC;AACjC,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,4DAA0C;AAC1C,wEAAsD;AACtD,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,8CAA4B;AAC5B,8DAA4C;AAE5C,+CAA6B"}
|
|
@@ -37,14 +37,13 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
37
37
|
return ar;
|
|
38
38
|
};
|
|
39
39
|
import React from "react";
|
|
40
|
-
import { renderToString } from "react-dom/server.js";
|
|
41
|
-
import * as ReactIs from "react-is";
|
|
42
40
|
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
|
|
43
41
|
import { Markdown } from "./../../cmem/markdown/Markdown.js";
|
|
42
|
+
import { ContentShrinker } from "./../ContentShrinker/ContentShrinker.js";
|
|
44
43
|
import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout/index.js";
|
|
45
44
|
import { IconButton } from "./../Icon/IconButton.js";
|
|
46
45
|
import { Spacing } from "./../Separation/Spacing.js";
|
|
47
|
-
import { HtmlContentBlock
|
|
46
|
+
import { HtmlContentBlock } from "./../Typography/index.js";
|
|
48
47
|
/**
|
|
49
48
|
* Component to display singe chat contents, including avatar and status line.
|
|
50
49
|
*/
|
|
@@ -60,34 +59,6 @@ export var ChatContent = function (_a) {
|
|
|
60
59
|
}
|
|
61
60
|
};
|
|
62
61
|
var content = markdownProps && typeof children === "string" ? React.createElement(Markdown, __assign({}, markdownProps), children) : children;
|
|
63
|
-
var onlyText = function (children) {
|
|
64
|
-
if (children instanceof Array) {
|
|
65
|
-
return children
|
|
66
|
-
.map(function (child) {
|
|
67
|
-
return onlyText(child);
|
|
68
|
-
})
|
|
69
|
-
.join(" ");
|
|
70
|
-
}
|
|
71
|
-
return React.Children.toArray(children)
|
|
72
|
-
.map(function (child) {
|
|
73
|
-
var _a;
|
|
74
|
-
if (ReactIs.isFragment(child)) {
|
|
75
|
-
return onlyText((_a = child.props) === null || _a === void 0 ? void 0 : _a.children);
|
|
76
|
-
}
|
|
77
|
-
if (typeof child === "string") {
|
|
78
|
-
return child;
|
|
79
|
-
}
|
|
80
|
-
if (typeof child === "number") {
|
|
81
|
-
return child.toString();
|
|
82
|
-
}
|
|
83
|
-
if (ReactIs.isElement(child)) {
|
|
84
|
-
// for some reasons `renderToString` returns empty string if not wrappe in a `span`
|
|
85
|
-
return renderToString(React.createElement("span", null, child));
|
|
86
|
-
}
|
|
87
|
-
return "";
|
|
88
|
-
})
|
|
89
|
-
.join(" ");
|
|
90
|
-
};
|
|
91
62
|
var chatitem = (React.createElement("div", __assign({ className: "".concat(eccgui, "-chat__content") +
|
|
92
63
|
" ".concat(eccgui, "-chat__content--display-").concat(displayType) +
|
|
93
64
|
" ".concat(eccgui, "-chat__content--align-").concat(alignment) +
|
|
@@ -96,8 +67,7 @@ export var ChatContent = function (_a) {
|
|
|
96
67
|
statusLine && (React.createElement(HtmlContentBlock, { small: true },
|
|
97
68
|
statusLine,
|
|
98
69
|
React.createElement(Spacing, { size: "tiny" }))),
|
|
99
|
-
displayShrinked && autoShrink ?
|
|
100
|
-
React.createElement(Markdown, { removeMarkup: true }, onlyText(content)))) : (content)));
|
|
70
|
+
displayShrinked && autoShrink ? React.createElement(ContentShrinker, null, content) : content));
|
|
101
71
|
var indentationSizes = {
|
|
102
72
|
small: "8%",
|
|
103
73
|
medium: "21%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,20 +30,22 @@ import { TextArea } from "../TextField/TextArea.js";
|
|
|
30
30
|
*/
|
|
31
31
|
export var ChatField = function (_a) {
|
|
32
32
|
var _b;
|
|
33
|
-
var className = _a.className,
|
|
33
|
+
var className = _a.className, onTextSubmit = _a.onTextSubmit, rightElement = _a.rightElement, otherTextAreaProps = __rest(_a, ["className", "onTextSubmit", "rightElement"]);
|
|
34
34
|
var chatvalue = React.useRef((_b = otherTextAreaProps.children) !== null && _b !== void 0 ? _b : "");
|
|
35
35
|
var onContentChange = function (value) {
|
|
36
36
|
chatvalue.current = value;
|
|
37
37
|
};
|
|
38
38
|
var onEnter = function (e) {
|
|
39
|
-
if (e.keyCode === 13 && e.shiftKey === false) {
|
|
39
|
+
if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
|
|
40
40
|
e.preventDefault();
|
|
41
|
-
|
|
41
|
+
onTextSubmit(chatvalue.current);
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
return (React.createElement(TextArea, __assign({ fill: true, autoResize: true, className: "".concat(eccgui, "-chat__inputfield") + (className ? " ".concat(className) : ""), onChange: function (e) {
|
|
45
45
|
onContentChange(e.target.value);
|
|
46
|
-
}, onKeyDown: onEnter
|
|
46
|
+
}, onKeyDown: onTextSubmit ? onEnter : undefined, rightElement: (onTextSubmit || rightElement) && (React.createElement(React.Fragment, null,
|
|
47
|
+
onTextSubmit && (React.createElement(IconButton, { name: "operation-send", onClick: function () { return onTextSubmit(chatvalue.current); } })),
|
|
48
|
+
rightElement)) }, otherTextAreaProps)));
|
|
47
49
|
};
|
|
48
50
|
export default ChatField;
|
|
49
51
|
//# sourceMappingURL=ChatField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatField.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAiB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatField.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAiB,MAAM,uBAAuB,CAAC;AAchE;;;GAGG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAAgF;;IAA9E,IAAA,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAK,kBAAkB,cAA9D,6CAAgE,CAAF;IACpF,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAS,MAAA,kBAAkB,CAAC,QAAQ,mCAAI,EAAE,CAAC,CAAC;IAE1E,IAAM,eAAe,GAAG,UAAC,KAAa;QAClC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,UAAC,CAA2C;QACxD,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,KAAK,KAAK,IAAI,YAAY,EAAE,CAAC;YAC3D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,QAAQ,aACL,IAAI,QACJ,UAAU,QACV,SAAS,EAAE,UAAG,MAAM,sBAAmB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC5E,QAAQ,EAAE,UAAC,CAAyC;YAChD,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,EACD,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC7C,YAAY,EACR,CAAC,YAAY,IAAI,YAAY,CAAC,IAAI,CAC9B;YACK,YAAY,IAAI,CACb,oBAAC,UAAU,IAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,EAA/B,CAA+B,GAAI,CACzF;YACA,YAAY,CACd,CACN,IAED,kBAAkB,EACxB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import React from "react";
|
|
24
|
+
import { renderToString } from "react-dom/server.js";
|
|
25
|
+
import * as ReactIs from "react-is";
|
|
26
|
+
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
|
|
27
|
+
import { Markdown } from "./../../cmem/markdown/Markdown.js";
|
|
28
|
+
import { OverflowText } from "./../Typography/index.js";
|
|
29
|
+
/**
|
|
30
|
+
* Component to shrink HTML markup content to 1 single text line.
|
|
31
|
+
* Display is based on `OverflowText`.
|
|
32
|
+
*/
|
|
33
|
+
export var ContentShrinker = function (_a) {
|
|
34
|
+
var className = _a.className, children = _a.children, otherOverflowProps = __rest(_a, ["className", "children"]);
|
|
35
|
+
var onlyText = function (children) {
|
|
36
|
+
if (children instanceof Array) {
|
|
37
|
+
return children
|
|
38
|
+
.map(function (child) {
|
|
39
|
+
return onlyText(child);
|
|
40
|
+
})
|
|
41
|
+
.join(" ");
|
|
42
|
+
}
|
|
43
|
+
return React.Children.toArray(children)
|
|
44
|
+
.map(function (child) {
|
|
45
|
+
var _a;
|
|
46
|
+
if (ReactIs.isFragment(child)) {
|
|
47
|
+
return onlyText((_a = child.props) === null || _a === void 0 ? void 0 : _a.children);
|
|
48
|
+
}
|
|
49
|
+
if (typeof child === "string") {
|
|
50
|
+
return child;
|
|
51
|
+
}
|
|
52
|
+
if (typeof child === "number") {
|
|
53
|
+
return child.toString();
|
|
54
|
+
}
|
|
55
|
+
if (ReactIs.isElement(child)) {
|
|
56
|
+
// for some reasons `renderToString` returns empty string if not wrappe in a `span`
|
|
57
|
+
return renderToString(React.createElement("span", null, child));
|
|
58
|
+
}
|
|
59
|
+
return "";
|
|
60
|
+
})
|
|
61
|
+
.join(" ");
|
|
62
|
+
};
|
|
63
|
+
return (React.createElement(OverflowText, __assign({ className: "".concat(eccgui, "-contentshrinker") + (className ? " ".concat(className) : ""), passDown: true }, otherOverflowProps),
|
|
64
|
+
React.createElement(Markdown, { removeMarkup: true, inheritBlock: true }, onlyText(children))));
|
|
65
|
+
};
|
|
66
|
+
export default ContentShrinker;
|
|
67
|
+
//# sourceMappingURL=ContentShrinker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContentShrinker.js","sourceRoot":"","sources":["../../../../src/components/ContentShrinker/ContentShrinker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAqB,MAAM,iBAAiB,CAAC;AAIlE;;;GAGG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAAoE;IAAlE,IAAA,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAK,kBAAkB,cAA5C,yBAA8C,CAAF;IACxE,IAAM,QAAQ,GAAG,UAAC,QAA6C;QAC3D,IAAI,QAAQ,YAAY,KAAK,EAAE,CAAC;YAC5B,OAAO,QAAQ;iBACV,GAAG,CAAC,UAAC,KAAsB;gBACxB,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,CAAC;iBACD,IAAI,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;QAED,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aAClC,GAAG,CAAC,UAAC,KAAK;;YACP,IAAI,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,CAAC,CAAC;YAC3C,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC;YACjB,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC3B,mFAAmF;gBACnF,OAAO,cAAc,CAAC,kCAAO,KAAK,CAAQ,CAAC,CAAC;YAChD,CAAC;YACD,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,YAAY,aACT,SAAS,EAAE,UAAG,MAAM,qBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,QAAQ,UACJ,kBAAkB;QAEtB,oBAAC,QAAQ,IAAC,YAAY,QAAC,YAAY,UAC9B,QAAQ,CAAC,QAAQ,CAAC,CACZ,CACA,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -10,6 +10,7 @@ export * from "./Button/Button.js";
|
|
|
10
10
|
export * from "./Card/index.js";
|
|
11
11
|
export * from "./Chat/index.js";
|
|
12
12
|
export * from "./Checkbox/Checkbox.js";
|
|
13
|
+
export * from "./ContentShrinker/ContentShrinker.js";
|
|
13
14
|
export * from "./ContextOverlay/index.js";
|
|
14
15
|
export * from "./Depiction/Depiction.js";
|
|
15
16
|
export * from "./Dialog/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,mCAAmC,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC"}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TestableComponent } from "../../components/interfaces";
|
|
3
3
|
import { TextAreaProps } from "../TextField/TextArea";
|
|
4
|
-
export interface ChatFieldProps extends
|
|
4
|
+
export interface ChatFieldProps extends TextAreaProps, TestableComponent {
|
|
5
5
|
/**
|
|
6
6
|
* Default input to start with.
|
|
7
7
|
*/
|
|
8
8
|
children?: string;
|
|
9
9
|
/**
|
|
10
10
|
* Callback handler to process the input of the field when `Enter` is pressed or the submit button is clicked.
|
|
11
|
+
* If you use it together with your own handlers for `onChange` and `onKeyDown` it won't work properly.
|
|
11
12
|
*/
|
|
12
|
-
|
|
13
|
+
onTextSubmit?: (value: string) => void;
|
|
13
14
|
}
|
|
14
15
|
/**
|
|
15
16
|
* Component to input chat text.
|
|
16
17
|
* Based on `TextArea` component.
|
|
17
18
|
*/
|
|
18
|
-
export declare const ChatField: ({ className,
|
|
19
|
+
export declare const ChatField: ({ className, onTextSubmit, rightElement, ...otherTextAreaProps }: ChatFieldProps) => React.JSX.Element;
|
|
19
20
|
export default ChatField;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { OverflowTextProps } from "./../Typography";
|
|
3
|
+
export type ContentShrinkerProps = Omit<OverflowTextProps, "passDown" | "useHtmlElement">;
|
|
4
|
+
/**
|
|
5
|
+
* Component to shrink HTML markup content to 1 single text line.
|
|
6
|
+
* Display is based on `OverflowText`.
|
|
7
|
+
*/
|
|
8
|
+
export declare const ContentShrinker: ({ className, children, ...otherOverflowProps }: ContentShrinkerProps) => React.JSX.Element;
|
|
9
|
+
export default ContentShrinker;
|
|
@@ -10,6 +10,7 @@ export * from "./Button/Button";
|
|
|
10
10
|
export * from "./Card";
|
|
11
11
|
export * from "./Chat";
|
|
12
12
|
export * from "./Checkbox/Checkbox";
|
|
13
|
+
export * from "./ContentShrinker/ContentShrinker";
|
|
13
14
|
export * from "./ContextOverlay";
|
|
14
15
|
export * from "./Depiction/Depiction";
|
|
15
16
|
export * from "./Dialog";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eccenca/gui-elements",
|
|
3
3
|
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
|
|
4
|
-
"version": "24.4.1-featurechatcomponentscmem6775.
|
|
4
|
+
"version": "24.4.1-featurechatcomponentscmem6775.2",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/eccenca/gui-elements",
|
|
7
7
|
"bugs": "https://github.com/eccenca/gui-elements/issues",
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { renderToString } from "react-dom/server";
|
|
3
|
-
import * as ReactIs from "react-is";
|
|
4
2
|
|
|
5
3
|
import { TestableComponent } from "../../components/interfaces";
|
|
6
4
|
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
|
|
7
5
|
|
|
8
6
|
import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
|
|
7
|
+
import { ContentShrinker } from "./../ContentShrinker/ContentShrinker";
|
|
9
8
|
import { DepictionProps } from "./../Depiction/Depiction";
|
|
10
9
|
import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
|
|
11
10
|
import { IconButton } from "./../Icon/IconButton";
|
|
12
11
|
import { Spacing } from "./../Separation/Spacing";
|
|
13
|
-
import { HtmlContentBlock,
|
|
12
|
+
import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
|
|
14
13
|
|
|
15
14
|
export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
|
|
16
15
|
/**
|
|
@@ -97,35 +96,6 @@ export const ChatContent = ({
|
|
|
97
96
|
const content =
|
|
98
97
|
markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
|
|
99
98
|
|
|
100
|
-
const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
|
|
101
|
-
if (children instanceof Array) {
|
|
102
|
-
return children
|
|
103
|
-
.map((child: React.ReactNode) => {
|
|
104
|
-
return onlyText(child);
|
|
105
|
-
})
|
|
106
|
-
.join(" ");
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
return React.Children.toArray(children)
|
|
110
|
-
.map((child) => {
|
|
111
|
-
if (ReactIs.isFragment(child)) {
|
|
112
|
-
return onlyText(child.props?.children);
|
|
113
|
-
}
|
|
114
|
-
if (typeof child === "string") {
|
|
115
|
-
return child;
|
|
116
|
-
}
|
|
117
|
-
if (typeof child === "number") {
|
|
118
|
-
return child.toString();
|
|
119
|
-
}
|
|
120
|
-
if (ReactIs.isElement(child)) {
|
|
121
|
-
// for some reasons `renderToString` returns empty string if not wrappe in a `span`
|
|
122
|
-
return renderToString(<span>{child}</span>);
|
|
123
|
-
}
|
|
124
|
-
return "";
|
|
125
|
-
})
|
|
126
|
-
.join(" ");
|
|
127
|
-
};
|
|
128
|
-
|
|
129
99
|
const chatitem = (
|
|
130
100
|
<div
|
|
131
101
|
className={
|
|
@@ -143,13 +113,7 @@ export const ChatContent = ({
|
|
|
143
113
|
<Spacing size="tiny" />
|
|
144
114
|
</HtmlContentBlock>
|
|
145
115
|
)}
|
|
146
|
-
{displayShrinked && autoShrink ?
|
|
147
|
-
<OverflowText passDown>
|
|
148
|
-
<Markdown removeMarkup>{onlyText(content)}</Markdown>
|
|
149
|
-
</OverflowText>
|
|
150
|
-
) : (
|
|
151
|
-
content
|
|
152
|
-
)}
|
|
116
|
+
{displayShrinked && autoShrink ? <ContentShrinker>{content}</ContentShrinker> : content}
|
|
153
117
|
</div>
|
|
154
118
|
);
|
|
155
119
|
|
|
@@ -5,22 +5,23 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
|
|
|
5
5
|
import { IconButton } from "../Icon/IconButton";
|
|
6
6
|
import { TextArea, TextAreaProps } from "../TextField/TextArea";
|
|
7
7
|
|
|
8
|
-
export interface ChatFieldProps extends
|
|
8
|
+
export interface ChatFieldProps extends TextAreaProps, TestableComponent {
|
|
9
9
|
/**
|
|
10
10
|
* Default input to start with.
|
|
11
11
|
*/
|
|
12
12
|
children?: string;
|
|
13
13
|
/**
|
|
14
14
|
* Callback handler to process the input of the field when `Enter` is pressed or the submit button is clicked.
|
|
15
|
+
* If you use it together with your own handlers for `onChange` and `onKeyDown` it won't work properly.
|
|
15
16
|
*/
|
|
16
|
-
|
|
17
|
+
onTextSubmit?: (value: string) => void;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
/**
|
|
20
21
|
* Component to input chat text.
|
|
21
22
|
* Based on `TextArea` component.
|
|
22
23
|
*/
|
|
23
|
-
export const ChatField = ({ className,
|
|
24
|
+
export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextAreaProps }: ChatFieldProps) => {
|
|
24
25
|
const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
|
|
25
26
|
|
|
26
27
|
const onContentChange = (value: string) => {
|
|
@@ -28,9 +29,9 @@ export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFi
|
|
|
28
29
|
};
|
|
29
30
|
|
|
30
31
|
const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
31
|
-
if (e.keyCode === 13 && e.shiftKey === false) {
|
|
32
|
+
if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
|
|
32
33
|
e.preventDefault();
|
|
33
|
-
|
|
34
|
+
onTextSubmit(chatvalue.current);
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
37
|
|
|
@@ -42,8 +43,17 @@ export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFi
|
|
|
42
43
|
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
43
44
|
onContentChange(e.target.value);
|
|
44
45
|
}}
|
|
45
|
-
onKeyDown={onEnter}
|
|
46
|
-
rightElement={
|
|
46
|
+
onKeyDown={onTextSubmit ? onEnter : undefined}
|
|
47
|
+
rightElement={
|
|
48
|
+
(onTextSubmit || rightElement) && (
|
|
49
|
+
<>
|
|
50
|
+
{onTextSubmit && (
|
|
51
|
+
<IconButton name={"operation-send"} onClick={() => onTextSubmit(chatvalue.current)} />
|
|
52
|
+
)}
|
|
53
|
+
{rightElement}
|
|
54
|
+
</>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
47
57
|
{...otherTextAreaProps}
|
|
48
58
|
/>
|
|
49
59
|
);
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { LoremIpsum } from "react-lorem-ipsum";
|
|
3
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
4
|
+
|
|
5
|
+
import { ContentShrinker, HtmlContentBlock } from "../../../index";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Components/ContentShrinker",
|
|
9
|
+
component: ContentShrinker,
|
|
10
|
+
argTypes: {},
|
|
11
|
+
} as Meta<typeof ContentShrinker>;
|
|
12
|
+
|
|
13
|
+
const TemplateFull: StoryFn<typeof ContentShrinker> = (args) => <ContentShrinker {...args} />;
|
|
14
|
+
|
|
15
|
+
export const Default = TemplateFull.bind({});
|
|
16
|
+
Default.args = {
|
|
17
|
+
children: (
|
|
18
|
+
<>
|
|
19
|
+
simple text child
|
|
20
|
+
<HtmlContentBlock>
|
|
21
|
+
<LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
|
|
22
|
+
</HtmlContentBlock>
|
|
23
|
+
</>
|
|
24
|
+
),
|
|
25
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { renderToString } from "react-dom/server";
|
|
3
|
+
import * as ReactIs from "react-is";
|
|
4
|
+
|
|
5
|
+
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
|
|
6
|
+
|
|
7
|
+
import { Markdown } from "./../../cmem/markdown/Markdown";
|
|
8
|
+
import { OverflowText, OverflowTextProps } from "./../Typography";
|
|
9
|
+
|
|
10
|
+
export type ContentShrinkerProps = Omit<OverflowTextProps, "passDown" | "useHtmlElement">;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Component to shrink HTML markup content to 1 single text line.
|
|
14
|
+
* Display is based on `OverflowText`.
|
|
15
|
+
*/
|
|
16
|
+
export const ContentShrinker = ({ className, children, ...otherOverflowProps }: ContentShrinkerProps) => {
|
|
17
|
+
const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
|
|
18
|
+
if (children instanceof Array) {
|
|
19
|
+
return children
|
|
20
|
+
.map((child: React.ReactNode) => {
|
|
21
|
+
return onlyText(child);
|
|
22
|
+
})
|
|
23
|
+
.join(" ");
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return React.Children.toArray(children)
|
|
27
|
+
.map((child) => {
|
|
28
|
+
if (ReactIs.isFragment(child)) {
|
|
29
|
+
return onlyText(child.props?.children);
|
|
30
|
+
}
|
|
31
|
+
if (typeof child === "string") {
|
|
32
|
+
return child;
|
|
33
|
+
}
|
|
34
|
+
if (typeof child === "number") {
|
|
35
|
+
return child.toString();
|
|
36
|
+
}
|
|
37
|
+
if (ReactIs.isElement(child)) {
|
|
38
|
+
// for some reasons `renderToString` returns empty string if not wrappe in a `span`
|
|
39
|
+
return renderToString(<span>{child}</span>);
|
|
40
|
+
}
|
|
41
|
+
return "";
|
|
42
|
+
})
|
|
43
|
+
.join(" ");
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<OverflowText
|
|
48
|
+
className={`${eccgui}-contentshrinker` + (className ? ` ${className}` : "")}
|
|
49
|
+
passDown
|
|
50
|
+
{...otherOverflowProps}
|
|
51
|
+
>
|
|
52
|
+
<Markdown removeMarkup inheritBlock>
|
|
53
|
+
{onlyText(children)}
|
|
54
|
+
</Markdown>
|
|
55
|
+
</OverflowText>
|
|
56
|
+
);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export default ContentShrinker;
|
package/src/components/index.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from "./Button/Button";
|
|
|
10
10
|
export * from "./Card";
|
|
11
11
|
export * from "./Chat";
|
|
12
12
|
export * from "./Checkbox/Checkbox";
|
|
13
|
+
export * from "./ContentShrinker/ContentShrinker";
|
|
13
14
|
export * from "./ContextOverlay";
|
|
14
15
|
export * from "./Depiction/Depiction";
|
|
15
16
|
export * from "./Dialog";
|