@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.0 → 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.
Files changed (31) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/cjs/components/Chat/ChatContent.js +18 -4
  3. package/dist/cjs/components/Chat/ChatContent.js.map +1 -1
  4. package/dist/cjs/components/Chat/ChatField.js +6 -4
  5. package/dist/cjs/components/Chat/ChatField.js.map +1 -1
  6. package/dist/cjs/components/ContentShrinker/ContentShrinker.js +86 -0
  7. package/dist/cjs/components/ContentShrinker/ContentShrinker.js.map +1 -0
  8. package/dist/cjs/components/index.js +1 -0
  9. package/dist/cjs/components/index.js.map +1 -1
  10. package/dist/esm/components/Chat/ChatContent.js +34 -4
  11. package/dist/esm/components/Chat/ChatContent.js.map +1 -1
  12. package/dist/esm/components/Chat/ChatField.js +6 -4
  13. package/dist/esm/components/Chat/ChatField.js.map +1 -1
  14. package/dist/esm/components/ContentShrinker/ContentShrinker.js +67 -0
  15. package/dist/esm/components/ContentShrinker/ContentShrinker.js.map +1 -0
  16. package/dist/esm/components/index.js +1 -0
  17. package/dist/esm/components/index.js.map +1 -1
  18. package/dist/types/components/Chat/ChatContent.d.ts +20 -2
  19. package/dist/types/components/Chat/ChatField.d.ts +4 -3
  20. package/dist/types/components/ContentShrinker/ContentShrinker.d.ts +9 -0
  21. package/dist/types/components/index.d.ts +1 -0
  22. package/package.json +5 -4
  23. package/src/components/Chat/ChatContent.tsx +55 -8
  24. package/src/components/Chat/ChatField.tsx +17 -7
  25. package/src/components/Chat/_chat.scss +5 -0
  26. package/src/components/Chat/stories/ChatArea.stories.tsx +4 -1
  27. package/src/components/Chat/stories/ChatContent.stories.tsx +3 -1
  28. package/src/components/Chat/stories/ChatField.stories.tsx +1 -1
  29. package/src/components/ContentShrinker/ContentShrinker.stories.tsx +25 -0
  30. package/src/components/ContentShrinker/ContentShrinker.tsx +59 -0
  31. 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
 
package/dist/cjs/components/Chat/ChatContent.js CHANGED
@@ -18,15 +18,27 @@ exports.ChatContent = void 0;
18
18
  const react_1 = __importDefault(require("react"));
19
19
  const constants_1 = require("../../configuration/constants");
20
20
  const Markdown_1 = require("./../../cmem/markdown/Markdown");
21
+ const ContentShrinker_1 = require("./../ContentShrinker/ContentShrinker");
21
22
  const FlexibleLayout_1 = require("./../FlexibleLayout");
23
+ const IconButton_1 = require("./../Icon/IconButton");
22
24
  const Spacing_1 = require("./../Separation/Spacing");
23
25
  const Typography_1 = require("./../Typography");
24
26
  /**
25
27
  * Component to display singe chat contents, including avatar and status line.
26
28
  */
27
29
  const ChatContent = (_a) => {
28
- var { className, children, statusLine, avatar, displayType = "bubble", indentationSize, alignment = "left", limitHeight, markdownProps } = _a, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps"]);
29
- const content = (react_1.default.createElement("div", Object.assign({ className: `${constants_1.CLASSPREFIX}-chat__content` +
30
+ var { className, children, statusLine, avatar, displayType = "bubble", indentationSize, alignment = "left", limitHeight, markdownProps, shrinked, autoShrink, onToggleSize } = _a, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps", "shrinked", "autoShrink", "onToggleSize"]);
31
+ const [displayShrinked, setDispayShrinked] = react_1.default.useState(shrinked === true || (autoShrink === true && typeof shrinked === "undefined"));
32
+ const toggleSize = () => {
33
+ if (onToggleSize) {
34
+ onToggleSize();
35
+ }
36
+ else {
37
+ setDispayShrinked(!displayShrinked);
38
+ }
39
+ };
40
+ const content = markdownProps && typeof children === "string" ? react_1.default.createElement(Markdown_1.Markdown, Object.assign({}, markdownProps), children) : children;
41
+ const chatitem = (react_1.default.createElement("div", Object.assign({ className: `${constants_1.CLASSPREFIX}-chat__content` +
30
42
  ` ${constants_1.CLASSPREFIX}-chat__content--display-${displayType}` +
31
43
  ` ${constants_1.CLASSPREFIX}-chat__content--align-${alignment}` +
32
44
  (limitHeight ? ` ${constants_1.CLASSPREFIX}-chat__content--limitheight` : "") +
@@ -34,7 +46,7 @@ const ChatContent = (_a) => {
34
46
  statusLine && (react_1.default.createElement(Typography_1.HtmlContentBlock, { small: true },
35
47
  statusLine,
36
48
  react_1.default.createElement(Spacing_1.Spacing, { size: "tiny" }))),
37
- markdownProps && typeof children === "string" ? (react_1.default.createElement(Markdown_1.Markdown, Object.assign({}, markdownProps), children)) : (children)));
49
+ displayShrinked && autoShrink ? react_1.default.createElement(ContentShrinker_1.ContentShrinker, null, content) : content));
38
50
  const indentationSizes = {
39
51
  small: "8%",
40
52
  medium: "21%",
@@ -46,7 +58,9 @@ const ChatContent = (_a) => {
46
58
  } },
47
59
  react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutContainer, { noEqualItemSpace: true, gapSize: "tiny" },
48
60
  avatar && (react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-avatar`, growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: 1 } : undefined }, react_1.default.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" }))),
49
- react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-wrapper` }, content))));
61
+ react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-wrapper` }, chatitem),
62
+ (displayShrinked || onToggleSize || autoShrink) && (react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-sizetoggle`, growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: -1 } : undefined },
63
+ react_1.default.createElement(IconButton_1.IconButton, { name: displayShrinked ? "toggler-showmore" : "toggler-showless", onClick: () => toggleSize() }))))));
50
64
  };
51
65
  exports.ChatContent = ChatContent;
52
66
  exports.default = exports.ChatContent;
package/dist/cjs/components/Chat/ChatContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,6DAAsE;AAEtE,6DAAyE;AAEzE,wDAAkF;AAClF,qDAAkD;AAClD,gDAAsE;AAoCtE;;GAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAWT,EAAE,EAAE;QAXK,EACxB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,WAAW,GAAG,QAAQ,EACtB,eAAe,EACf,SAAS,GAAG,MAAM,EAClB,WAAW,EACX,aAAa,OAEE,EADZ,aAAa,cAVQ,gIAW3B,CADmB;IAEhB,MAAM,OAAO,GAAG,CACZ,qDACI,SAAS,EACL,GAAG,uBAAM,gBAAgB;YACzB,IAAI,uBAAM,2BAA2B,WAAW,EAAE;YAClD,IAAI,uBAAM,yBAAyB,SAAS,EAAE;YAC9C,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,uBAAM,6BAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAElC,aAAa;QAEhB,UAAU,IAAI,CACX,8BAAC,6BAAgB,IAAC,KAAK;YAClB,UAAU;YACX,8BAAC,iBAAO,IAAC,IAAI,EAAC,MAAM,GAAG,CACR,CACtB;QACA,aAAa,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7C,8BAAC,mBAAQ,oBAAK,aAAa,GAAG,QAAQ,CAAY,CACrD,CAAC,CAAC,CAAC,CACA,QAAQ,CACX,CACC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG;QACrB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,KAAK;KACf,CAAC;IAEF,OAAO,CACH,uCACI,KAAK,EAAE;YACH,UAAU,EAAE,SAAS,KAAK,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;YACpG,WAAW,EAAE,SAAS,KAAK,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;SACvG;QAED,8BAAC,wCAAuB,IAAC,gBAAgB,QAAC,OAAO,EAAC,MAAM;YACnD,MAAM,IAAI,CACP,8BAAC,mCAAkB,IACf,SAAS,EAAE,GAAG,uBAAM,uBAAuB,EAC3C,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAEtD,eAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAC7E,CACxB;YACD,8BAAC,mCAAkB,IAAC,SAAS,EAAE,GAAG,uBAAM,wBAAwB,IAAG,OAAO,CAAsB,CAC1E,CACxB,CACT,CAAC;AACN,CAAC,CAAC;AAjEW,QAAA,WAAW,eAiEtB;AAEF,kBAAe,mBAAW,CAAC"}
1
+ {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":"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"}
package/dist/cjs/components/Chat/ChatField.js CHANGED
@@ -25,20 +25,22 @@ const TextArea_1 = require("../TextField/TextArea");
25
25
  */
26
26
  const ChatField = (_a) => {
27
27
  var _b;
28
- var { className, onSubmit } = _a, otherTextAreaProps = __rest(_a, ["className", "onSubmit"]);
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
- onSubmit(chatvalue.current);
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, rightElement: react_1.default.createElement(IconButton_1.IconButton, { name: "operation-send", onClick: () => onSubmit(chatvalue.current) }) }, otherTextAreaProps)));
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;
package/dist/cjs/components/Chat/ChatField.js.map CHANGED
@@ -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;AAahE;;;GAGG;AACI,MAAM,SAAS,GAAG,CAAC,EAA8D,EAAE,EAAE;;QAAlE,EAAE,SAAS,EAAE,QAAQ,OAAyC,EAApC,kBAAkB,cAA5C,yBAA8C,CAAF;IAClE,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,EAAE,CAAC;YAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAChC,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,OAAO,EAClB,YAAY,EAAE,8BAAC,uBAAU,IAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,GAAI,IAC5F,kBAAkB,EACxB,CACL,CAAC;AACN,CAAC,CAAC;AA3BW,QAAA,SAAS,aA2BpB;AAEF,kBAAe,iBAAS,CAAC"}
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"}
package/dist/cjs/components/ContentShrinker/ContentShrinker.js ADDED
@@ -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
package/dist/cjs/components/ContentShrinker/ContentShrinker.js.map ADDED
@@ -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"}
package/dist/cjs/components/index.js CHANGED
@@ -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);
package/dist/cjs/components/index.js.map CHANGED
@@ -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"}
package/dist/esm/components/Chat/ChatContent.js CHANGED
@@ -20,18 +20,46 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
+ var __read = (this && this.__read) || function (o, n) {
24
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
25
+ if (!m) return o;
26
+ var i = m.call(o), r, ar = [], e;
27
+ try {
28
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
29
+ }
30
+ catch (error) { e = { error: error }; }
31
+ finally {
32
+ try {
33
+ if (r && !r.done && (m = i["return"])) m.call(i);
34
+ }
35
+ finally { if (e) throw e.error; }
36
+ }
37
+ return ar;
38
+ };
23
39
  import React from "react";
24
40
  import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
25
41
  import { Markdown } from "./../../cmem/markdown/Markdown.js";
42
+ import { ContentShrinker } from "./../ContentShrinker/ContentShrinker.js";
26
43
  import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout/index.js";
44
+ import { IconButton } from "./../Icon/IconButton.js";
27
45
  import { Spacing } from "./../Separation/Spacing.js";
28
46
  import { HtmlContentBlock } from "./../Typography/index.js";
29
47
  /**
30
48
  * Component to display singe chat contents, including avatar and status line.
31
49
  */
32
50
  export var ChatContent = function (_a) {
33
- var className = _a.className, children = _a.children, statusLine = _a.statusLine, avatar = _a.avatar, _b = _a.displayType, displayType = _b === void 0 ? "bubble" : _b, indentationSize = _a.indentationSize, _c = _a.alignment, alignment = _c === void 0 ? "left" : _c, limitHeight = _a.limitHeight, markdownProps = _a.markdownProps, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps"]);
34
- var content = (React.createElement("div", __assign({ className: "".concat(eccgui, "-chat__content") +
51
+ var className = _a.className, children = _a.children, statusLine = _a.statusLine, avatar = _a.avatar, _b = _a.displayType, displayType = _b === void 0 ? "bubble" : _b, indentationSize = _a.indentationSize, _c = _a.alignment, alignment = _c === void 0 ? "left" : _c, limitHeight = _a.limitHeight, markdownProps = _a.markdownProps, shrinked = _a.shrinked, autoShrink = _a.autoShrink, onToggleSize = _a.onToggleSize, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps", "shrinked", "autoShrink", "onToggleSize"]);
52
+ var _d = __read(React.useState(shrinked === true || (autoShrink === true && typeof shrinked === "undefined")), 2), displayShrinked = _d[0], setDispayShrinked = _d[1];
53
+ var toggleSize = function () {
54
+ if (onToggleSize) {
55
+ onToggleSize();
56
+ }
57
+ else {
58
+ setDispayShrinked(!displayShrinked);
59
+ }
60
+ };
61
+ var content = markdownProps && typeof children === "string" ? React.createElement(Markdown, __assign({}, markdownProps), children) : children;
62
+ var chatitem = (React.createElement("div", __assign({ className: "".concat(eccgui, "-chat__content") +
35
63
  " ".concat(eccgui, "-chat__content--display-").concat(displayType) +
36
64
  " ".concat(eccgui, "-chat__content--align-").concat(alignment) +
37
65
  (limitHeight ? " ".concat(eccgui, "-chat__content--limitheight") : "") +
@@ -39,7 +67,7 @@ export var ChatContent = function (_a) {
39
67
  statusLine && (React.createElement(HtmlContentBlock, { small: true },
40
68
  statusLine,
41
69
  React.createElement(Spacing, { size: "tiny" }))),
42
- markdownProps && typeof children === "string" ? (React.createElement(Markdown, __assign({}, markdownProps), children)) : (children)));
70
+ displayShrinked && autoShrink ? React.createElement(ContentShrinker, null, content) : content));
43
71
  var indentationSizes = {
44
72
  small: "8%",
45
73
  medium: "21%",
@@ -51,7 +79,9 @@ export var ChatContent = function (_a) {
51
79
  } },
52
80
  React.createElement(FlexibleLayoutContainer, { noEqualItemSpace: true, gapSize: "tiny" },
53
81
  avatar && (React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-avatar"), growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: 1 } : undefined }, React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" }))),
54
- React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-wrapper") }, content))));
82
+ React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-wrapper") }, chatitem),
83
+ (displayShrinked || onToggleSize || autoShrink) && (React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-sizetoggle"), growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: -1 } : undefined },
84
+ React.createElement(IconButton, { name: displayShrinked ? "toggler-showmore" : "toggler-showless", onClick: function () { return toggleSize(); } }))))));
55
85
  };
56
86
  export default ChatContent;
57
87
  //# sourceMappingURL=ChatContent.js.map
package/dist/esm/components/Chat/ChatContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAiB,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,iBAAiB,CAAC;AAoCtE;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAWT;IAVf,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,mBAAsB,EAAtB,WAAW,mBAAG,QAAQ,KAAA,EACtB,eAAe,qBAAA,EACf,iBAAkB,EAAlB,SAAS,mBAAG,MAAM,KAAA,EAClB,WAAW,iBAAA,EACX,aAAa,mBAAA,EACV,aAAa,cAVQ,gIAW3B,CADmB;IAEhB,IAAM,OAAO,GAAG,CACZ,sCACI,SAAS,EACL,UAAG,MAAM,mBAAgB;YACzB,WAAI,MAAM,qCAA2B,WAAW,CAAE;YAClD,WAAI,MAAM,mCAAyB,SAAS,CAAE;YAC9C,CAAC,WAAW,CAAC,CAAC,CAAC,WAAI,MAAM,gCAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAElC,aAAa;QAEhB,UAAU,IAAI,CACX,oBAAC,gBAAgB,IAAC,KAAK;YAClB,UAAU;YACX,oBAAC,OAAO,IAAC,IAAI,EAAC,MAAM,GAAG,CACR,CACtB;QACA,aAAa,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7C,oBAAC,QAAQ,eAAK,aAAa,GAAG,QAAQ,CAAY,CACrD,CAAC,CAAC,CAAC,CACA,QAAQ,CACX,CACC,CACT,CAAC;IAEF,IAAM,gBAAgB,GAAG;QACrB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,KAAK;KACf,CAAC;IAEF,OAAO,CACH,6BACI,KAAK,EAAE;YACH,UAAU,EAAE,SAAS,KAAK,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;YACpG,WAAW,EAAE,SAAS,KAAK,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;SACvG;QAED,oBAAC,uBAAuB,IAAC,gBAAgB,QAAC,OAAO,EAAC,MAAM;YACnD,MAAM,IAAI,CACP,oBAAC,kBAAkB,IACf,SAAS,EAAE,UAAG,MAAM,0BAAuB,EAC3C,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAEtD,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAC7E,CACxB;YACD,oBAAC,kBAAkB,IAAC,SAAS,EAAE,UAAG,MAAM,2BAAwB,IAAG,OAAO,CAAsB,CAC1E,CACxB,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/Chat/ChatField.js CHANGED
@@ -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, onSubmit = _a.onSubmit, otherTextAreaProps = __rest(_a, ["className", "onSubmit"]);
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
- onSubmit(chatvalue.current);
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, rightElement: React.createElement(IconButton, { name: "operation-send", onClick: function () { return onSubmit(chatvalue.current); } }) }, otherTextAreaProps)));
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
package/dist/esm/components/Chat/ChatField.js.map CHANGED
@@ -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;AAahE;;;GAGG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAA8D;;IAA5D,IAAA,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAK,kBAAkB,cAA5C,yBAA8C,CAAF;IAClE,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,EAAE,CAAC;YAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAChC,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,OAAO,EAClB,YAAY,EAAE,oBAAC,UAAU,IAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,EAA3B,CAA2B,GAAI,IAC5F,kBAAkB,EACxB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,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"}
package/dist/esm/components/ContentShrinker/ContentShrinker.js ADDED
@@ -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
package/dist/esm/components/ContentShrinker/ContentShrinker.js.map ADDED
@@ -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"}
package/dist/esm/components/index.js CHANGED
@@ -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";
package/dist/esm/components/index.js.map CHANGED
@@ -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"}
package/dist/types/components/Chat/ChatContent.d.ts CHANGED
@@ -29,15 +29,33 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
29
29
  * If set then the chat bubble only grows to a height of 50% of the viewport.
30
30
  * In case you need to set other maximum heights then use the `style` property directly.
31
31
  */
32
- limitHeight?: boolean;
32
+ limitHeight?: React.ReactChild;
33
33
  /**
34
34
  * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
35
35
  * `children` need to a `string` then, otherwise it cannot be parsed.
36
36
  */
37
37
  markdownProps?: Omit<MarkdownProps, "children">;
38
+ /**
39
+ * Callback handler if content should be expanded.
40
+ * Button to shrink/expand is displayed, depending on `shrinked` value.
41
+ * If this handler is given then the component never will change the `shrinked` state automatically.
42
+ */
43
+ onToggleSize?: () => void;
44
+ /**
45
+ * Content should dislayed shrinked.
46
+ * Button to expand content is displayed.
47
+ * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
48
+ * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
49
+ */
50
+ shrinked?: boolean;
51
+ /**
52
+ * Children elements are automatically shrinked to one line.
53
+ * If `shrinked` are not given then `shrinked=true` is infered.
54
+ */
55
+ autoShrink?: boolean;
38
56
  }
39
57
  /**
40
58
  * Component to display singe chat contents, including avatar and status line.
41
59
  */
42
- export declare const ChatContent: ({ className, children, statusLine, avatar, displayType, indentationSize, alignment, limitHeight, markdownProps, ...otherDivProps }: ChatContentProps) => React.JSX.Element;
60
+ export declare const ChatContent: ({ className, children, statusLine, avatar, displayType, indentationSize, alignment, limitHeight, markdownProps, shrinked, autoShrink, onToggleSize, ...otherDivProps }: ChatContentProps) => React.JSX.Element;
43
61
  export default ChatContent;
package/dist/types/components/Chat/ChatField.d.ts CHANGED
@@ -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 Pick<TextAreaProps, "className">, TestableComponent {
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
- onSubmit: (value: string) => void;
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, onSubmit, ...otherTextAreaProps }: ChatFieldProps) => React.JSX.Element;
19
+ export declare const ChatField: ({ className, onTextSubmit, rightElement, ...otherTextAreaProps }: ChatFieldProps) => React.JSX.Element;
19
20
  export default ChatField;
package/dist/types/components/ContentShrinker/ContentShrinker.d.ts ADDED
@@ -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;
package/dist/types/components/index.d.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";
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.0",
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",
@@ -91,10 +91,11 @@
91
91
  "n3": "^1.25.1",
92
92
  "re-resizable": "^6.10.3",
93
93
  "react": "^16.13.1",
94
- "react-dom": "^16.13.1",
94
+ "react-dom": "^16.14.0",
95
95
  "react-flow-renderer": "9.7.4",
96
96
  "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
97
97
  "react-inlinesvg": "^3.0.3",
98
+ "react-is": "^16.13.1",
98
99
  "react-markdown": "^10.1.0",
99
100
  "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
100
101
  "react-syntax-highlighter": "^15.6.1",
@@ -138,6 +139,7 @@
138
139
  "@types/jshint": "^2.12.4",
139
140
  "@types/lodash": "^4.17.16",
140
141
  "@types/n3": "^1.24.2",
142
+ "@types/react-is": "^19.0.0",
141
143
  "@types/react-syntax-highlighter": "^15.5.13",
142
144
  "@typescript-eslint/eslint-plugin": "^8.30.1",
143
145
  "@typescript-eslint/parser": "^8.30.1",
@@ -174,8 +176,7 @@
174
176
  },
175
177
  "peerDependencies": {
176
178
  "@blueprintjs/core": ">=5",
177
- "react": ">=16",
178
- "react-dom": ">=16"
179
+ "react": ">=16"
179
180
  },
180
181
  "resolutions": {
181
182
  "**/@types/react": "^17.0.85",
package/src/components/Chat/ChatContent.tsx CHANGED
@@ -4,8 +4,10 @@ import { TestableComponent } from "../../components/interfaces";
4
4
  import { CLASSPREFIX as eccgui } from "../../configuration/constants";
5
5
 
6
6
  import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
7
+ import { ContentShrinker } from "./../ContentShrinker/ContentShrinker";
7
8
  import { DepictionProps } from "./../Depiction/Depiction";
8
9
  import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
10
+ import { IconButton } from "./../Icon/IconButton";
9
11
  import { Spacing } from "./../Separation/Spacing";
10
12
  import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
11
13
 
@@ -35,12 +37,30 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
35
37
  * If set then the chat bubble only grows to a height of 50% of the viewport.
36
38
  * In case you need to set other maximum heights then use the `style` property directly.
37
39
  */
38
- limitHeight?: boolean;
40
+ limitHeight?: React.ReactChild;
39
41
  /**
40
42
  * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
41
43
  * `children` need to a `string` then, otherwise it cannot be parsed.
42
44
  */
43
45
  markdownProps?: Omit<MarkdownProps, "children">;
46
+ /**
47
+ * Callback handler if content should be expanded.
48
+ * Button to shrink/expand is displayed, depending on `shrinked` value.
49
+ * If this handler is given then the component never will change the `shrinked` state automatically.
50
+ */
51
+ onToggleSize?: () => void;
52
+ /**
53
+ * Content should dislayed shrinked.
54
+ * Button to expand content is displayed.
55
+ * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
56
+ * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
57
+ */
58
+ shrinked?: boolean;
59
+ /**
60
+ * Children elements are automatically shrinked to one line.
61
+ * If `shrinked` are not given then `shrinked=true` is infered.
62
+ */
63
+ autoShrink?: boolean;
44
64
  }
45
65
 
46
66
  /**
@@ -56,9 +76,27 @@ export const ChatContent = ({
56
76
  alignment = "left",
57
77
  limitHeight,
58
78
  markdownProps,
79
+ shrinked,
80
+ autoShrink,
81
+ onToggleSize,
59
82
  ...otherDivProps
60
83
  }: ChatContentProps) => {
61
- const content = (
84
+ const [displayShrinked, setDispayShrinked] = React.useState<boolean>(
85
+ shrinked === true || (autoShrink === true && typeof shrinked === "undefined")
86
+ );
87
+
88
+ const toggleSize = () => {
89
+ if (onToggleSize) {
90
+ onToggleSize();
91
+ } else {
92
+ setDispayShrinked(!displayShrinked);
93
+ }
94
+ };
95
+
96
+ const content =
97
+ markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
98
+
99
+ const chatitem = (
62
100
  <div
63
101
  className={
64
102
  `${eccgui}-chat__content` +
@@ -75,11 +113,7 @@ export const ChatContent = ({
75
113
  <Spacing size="tiny" />
76
114
  </HtmlContentBlock>
77
115
  )}
78
- {markdownProps && typeof children === "string" ? (
79
- <Markdown {...markdownProps}>{children}</Markdown>
80
- ) : (
81
- children
82
- )}
116
+ {displayShrinked && autoShrink ? <ContentShrinker>{content}</ContentShrinker> : content}
83
117
  </div>
84
118
  );
85
119
 
@@ -107,7 +141,20 @@ export const ChatContent = ({
107
141
  {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
108
142
  </FlexibleLayoutItem>
109
143
  )}
110
- <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{content}</FlexibleLayoutItem>
144
+ <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
145
+ {(displayShrinked || onToggleSize || autoShrink) && (
146
+ <FlexibleLayoutItem
147
+ className={`${eccgui}-chat__content-sizetoggle`}
148
+ growFactor={0}
149
+ shrinkFactor={0}
150
+ style={alignment === "right" ? { order: -1 } : undefined}
151
+ >
152
+ <IconButton
153
+ name={displayShrinked ? "toggler-showmore" : "toggler-showless"}
154
+ onClick={() => toggleSize()}
155
+ />
156
+ </FlexibleLayoutItem>
157
+ )}
111
158
  </FlexibleLayoutContainer>
112
159
  </div>
113
160
  );
package/src/components/Chat/ChatField.tsx CHANGED
@@ -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 Pick<TextAreaProps, "className">, TestableComponent {
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
- onSubmit: (value: string) => void;
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, onSubmit, ...otherTextAreaProps }: ChatFieldProps) => {
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
- onSubmit(chatvalue.current);
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={<IconButton name={"operation-send"} onClick={() => onSubmit(chatvalue.current)} />}
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
  );
package/src/components/Chat/_chat.scss CHANGED
@@ -65,6 +65,11 @@
65
65
  resize: none !important;
66
66
  }
67
67
 
68
+ .#{$eccgui}-chat__area {
69
+ padding: 0.25rem;
70
+ background-color: $card-background-color;
71
+ }
72
+
68
73
  .#{$eccgui}-chat__area-contentwidth {
69
74
  width: 100%;
70
75
  margin: 0 auto;
package/src/components/Chat/stories/ChatArea.stories.tsx CHANGED
@@ -26,8 +26,11 @@ Default.args = {
26
26
  <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
27
27
  <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
28
28
  <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
29
- <ChatContent {...LongChatBubble.args} />,
29
+ <ChatContent {...LongChatBubble.args} autoShrink />,
30
30
  <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
31
31
  <ChatContent {...ShortChatBubble.args} />,
32
32
  ],
33
+ autoSpacingSize: "medium",
34
+ autoScrollTo: "last",
35
+ useAbsoluteSpace: true,
33
36
  };
package/src/components/Chat/stories/ChatContent.stories.tsx CHANGED
@@ -29,7 +29,8 @@ export default {
29
29
  },
30
30
  } as Meta<typeof ChatContent>;
31
31
 
32
- const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} />;
32
+ let update = 0;
33
+ const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} key={update++} />;
33
34
 
34
35
  export const Default = TemplateFull.bind({});
35
36
  Default.args = {
@@ -44,6 +45,7 @@ Default.args = {
44
45
  <strong>Username</strong> 25 minutes ago
45
46
  </OverflowText>
46
47
  ),
48
+ onToggleSize: undefined,
47
49
  };
48
50
 
49
51
  export const LongChatBubble = TemplateFull.bind({});
package/src/components/Chat/stories/ChatField.stories.tsx CHANGED
@@ -14,5 +14,5 @@ const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} k
14
14
 
15
15
  export const Default = TemplateFull.bind({});
16
16
  Default.args = {
17
- onSubmit: (value) => alert(value),
17
+ onTextSubmit: (value) => alert(value),
18
18
  };
package/src/components/ContentShrinker/ContentShrinker.stories.tsx ADDED
@@ -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
+ };
package/src/components/ContentShrinker/ContentShrinker.tsx ADDED
@@ -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";