@vendorflow/components 2.0.43 → 2.0.47

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 (8) hide show
  1. package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts +4 -0
  2. package/lib/components/material-ui/ChatInterface/ActionsMenu.js +42 -0
  3. package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +2 -0
  4. package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +23 -3
  5. package/lib/components/material-ui/ChatInterface/MessageInput.js +7 -3
  6. package/lib/components/material-ui/ChatInterface/MessageItem.js +4 -4
  7. package/lib/components/material-ui/ChatInterface/MessageThread.js +22 -10
  8. package/package.json +4 -2
package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /** @jsxRuntime classic */
2
+ /** @jsx jsx */
3
+ import { jsx } from '@emotion/react';
4
+ export default function ActionsMenu(): jsx.JSX.Element;
package/lib/components/material-ui/ChatInterface/ActionsMenu.js ADDED
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ /** @jsxRuntime classic */
22
+ /** @jsx jsx */
23
+ var react_1 = require("@emotion/react");
24
+ var short_uuid_1 = __importDefault(require("short-uuid"));
25
+ var hooks_1 = require("material-ui-popup-state/hooks");
26
+ var material_1 = require("@mui/material");
27
+ var icons_material_1 = require("@mui/icons-material");
28
+ var react_2 = require("react");
29
+ function ActionsMenu() {
30
+ var popupId = (0, react_2.useRef)(short_uuid_1.default.generate());
31
+ var popupState = (0, hooks_1.usePopupState)({ variant: 'popover', popupId: popupId.current });
32
+ return ((0, react_1.jsx)("div", null,
33
+ (0, react_1.jsx)(material_1.Tooltip, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 0.875rem;\n background-color: #555;\n "], ["\n font-size: 0.875rem;\n background-color: #555;\n "]))), placement: "top", title: "Actions" },
34
+ (0, react_1.jsx)(material_1.IconButton, __assign({}, (0, hooks_1.bindTrigger)(popupState)),
35
+ (0, react_1.jsx)(icons_material_1.MapsUgc, null))),
36
+ (0, react_1.jsx)(material_1.Menu, __assign({}, (0, hooks_1.bindMenu)(popupState), { anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'bottom', horizontal: 'right' } }),
37
+ (0, react_1.jsx)(material_1.MenuItem, null, "Template 1"),
38
+ (0, react_1.jsx)(material_1.MenuItem, null, "Template 2"),
39
+ (0, react_1.jsx)(material_1.MenuItem, null, "Template 3"))));
40
+ }
41
+ exports.default = ActionsMenu;
42
+ var templateObject_1;
package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts CHANGED
@@ -3,6 +3,8 @@ export interface Message {
3
3
  id: string;
4
4
  userId: string;
5
5
  username: string;
6
+ /** use for building chat icon */
7
+ initials: string;
6
8
  timestamp: string;
7
9
  content: string;
8
10
  }
package/lib/components/material-ui/ChatInterface/ChatInterface.story.js CHANGED
@@ -40,6 +40,7 @@ var react_2 = require("react");
40
40
  var faker_1 = __importDefault(require("faker"));
41
41
  var short_uuid_1 = __importDefault(require("short-uuid"));
42
42
  var ChatInterface_1 = __importDefault(require("./ChatInterface"));
43
+ var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
43
44
  // tslint:disable-next-line:no-console
44
45
  function ChatInterface() {
45
46
  var _a = __read((0, react_2.useState)(true), 2), isLoading = _a[0], setLoading = _a[1];
@@ -48,7 +49,7 @@ function ChatInterface() {
48
49
  var _d = __read((0, react_2.useState)([]), 2), messages = _d[0], setMessages = _d[1];
49
50
  var _e = __read((0, react_2.useState)(true), 2), hasMore = _e[0], setHasMore = _e[1];
50
51
  (0, react_2.useEffect)(function () {
51
- setMessages(new Array(5).fill(null).map(generateMessage));
52
+ setMessages(new Array(5).fill(null).map(generateMessage).concat([generateSystemMessage()]));
52
53
  setLoading(false);
53
54
  setFetching(false);
54
55
  }, []);
@@ -58,21 +59,39 @@ function ChatInterface() {
58
59
  function generateId() {
59
60
  return short_uuid_1.default.generate();
60
61
  }
62
+ function generateSystemMessage() {
63
+ return {
64
+ id: generateId(),
65
+ userId: Workspaces_constants_1.SYSTEM_IDENTITY_ID,
66
+ username: 'System',
67
+ initials: 'S',
68
+ timestamp: generateTimestamp(),
69
+ content: faker_1.default.lorem.sentence(5, 2),
70
+ };
71
+ }
61
72
  function generateMessage() {
62
73
  var user = faker_1.default.random.arrayElement([
63
74
  {
64
75
  id: 'user1',
65
76
  name: 'Socorro Aguilar',
77
+ initials: 'SA',
66
78
  },
67
79
  {
68
80
  id: 'user2',
69
81
  name: 'Greg Bujak',
82
+ initials: 'GB',
83
+ },
84
+ {
85
+ id: 'user3',
86
+ name: 'xinyi@vendorflow.co',
87
+ initials: 'X',
70
88
  },
71
89
  ]);
72
90
  return {
73
91
  id: generateId(),
74
92
  userId: user.id,
75
93
  username: user.name,
94
+ initials: user.initials,
76
95
  timestamp: generateTimestamp(),
77
96
  content: faker_1.default.lorem.sentence(5, 2),
78
97
  };
@@ -92,17 +111,18 @@ function ChatInterface() {
92
111
  setFetching(true);
93
112
  return new Promise(function (resolve) {
94
113
  setTimeout(function () {
95
- setSubmitting(false);
96
- setFetching(false);
97
114
  setMessages(__spreadArray([
98
115
  {
99
116
  id: generateId(),
100
117
  userId: 'user1',
101
118
  username: 'Socorro Aguilar',
119
+ initials: 'SA',
102
120
  timestamp: generateTimestamp(),
103
121
  content: message,
104
122
  }
105
123
  ], __read(messages), false));
124
+ setSubmitting(false);
125
+ setFetching(false);
106
126
  resolve(true);
107
127
  }, 500);
108
128
  });
package/lib/components/material-ui/ChatInterface/MessageInput.js CHANGED
@@ -14,6 +14,7 @@ var react_2 = require("react");
14
14
  var react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
15
15
  var material_1 = require("@mui/material");
16
16
  var icons_material_1 = require("@mui/icons-material");
17
+ var ActionsMenu_1 = __importDefault(require("./ActionsMenu"));
17
18
  var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
18
19
  var handleClickSend = _a.handleClickSend, message = _a.message, placeholder = _a.placeholder, setMessage = _a.setMessage, isSubmitting = _a.isSubmitting;
19
20
  function handleOnChange(_a) {
@@ -42,8 +43,11 @@ var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
42
43
  var _a, _b;
43
44
  return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n resize: none;\n width: calc(100% - 3.5rem);\n outline: 0 none transparent;\n font-size: 16px;\n margin: 0.5rem;\n padding: 0.5rem;\n box-sizing: border-box;\n border-radius: 5px;\n border-color: ", ";\n "], ["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n resize: none;\n width: calc(100% - 3.5rem);\n outline: 0 none transparent;\n font-size: 16px;\n margin: 0.5rem;\n padding: 0.5rem;\n box-sizing: border-box;\n border-radius: 5px;\n border-color: ", ";\n "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(0, 0%, 89%)');
44
45
  }, placeholder: placeholder || 'Type your message here...', value: message, onChange: handleOnChange, onKeyDown: handleOnKeyDown, minRows: 3, maxRows: 8 }),
45
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "], ["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "])), isSubmitting ? '0.5rem' : '0.25rem') }, isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(material_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n "], ["\n height: 100%;\n width: 100%;\n "]))), onClick: handleOnClickSend, disabled: isSubmitting },
46
- (0, react_1.jsx)(icons_material_1.Send, null))))));
46
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n "], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n "]))) },
47
+ (0, react_1.jsx)(ActionsMenu_1.default, null),
48
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "], ["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "])), isSubmitting ? '0.5rem' : '0.25rem') }, isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(material_1.Tooltip, { title: "Send Now", placement: "bottom" },
49
+ (0, react_1.jsx)(material_1.IconButton, { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n "], ["\n height: 100%;\n width: 100%;\n "]))), onClick: handleOnClickSend, disabled: isSubmitting },
50
+ (0, react_1.jsx)(icons_material_1.Send, null))))))));
47
51
  });
48
52
  exports.default = MessageInput;
49
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
53
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/lib/components/material-ui/ChatInterface/MessageItem.js CHANGED
@@ -27,6 +27,7 @@ var date_fns_1 = require("date-fns");
27
27
  var icons_material_1 = require("@mui/icons-material");
28
28
  var material_1 = require("@mui/material");
29
29
  var react_2 = require("react");
30
+ var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
30
31
  function MessageItem(_a) {
31
32
  var userId = _a.userId, message = _a.message, colors = _a.colors;
32
33
  var _b = __read((0, react_2.useState)(getUnixTimestamp()), 2), displayUpdateAt = _b[0], setDisplayUpdateAt = _b[1];
@@ -56,16 +57,15 @@ function MessageItem(_a) {
56
57
  return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background: white;\n margin-top: 0.5rem;\n border-radius: 4px;\n display: flex;\n flex-direction: row;\n "], ["\n width: 100%;\n background: white;\n margin-top: 0.5rem;\n border-radius: 4px;\n display: flex;\n flex-direction: row;\n "]))) },
57
58
  (0, react_1.jsx)(material_1.Avatar, { css: function (theme) {
58
59
  var _a, _b, _c, _d, _e;
59
- return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n && {\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n background-color: ", ";\n }\n "], ["\n && {\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n background-color: ", ";\n }\n "])), userId === message.userId
60
+ return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n && {\n font-size: 1rem;\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n visibility: ", ";\n background-color: ", ";\n }\n "], ["\n && {\n font-size: 1rem;\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n visibility: ", ";\n background-color: ", ";\n }\n "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hidden' : 'visible', userId === message.userId
60
61
  ? (colors === null || colors === void 0 ? void 0 : colors.user) || ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.custom) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.tertiary) === null || _c === void 0 ? void 0 : _c.main) || 'hsl(0, 0%, 89%)'
61
62
  : (colors === null || colors === void 0 ? void 0 : colors.others) || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) || 'hsl(0, 0%, 47%)');
62
- } },
63
- (0, react_1.jsx)(icons_material_1.Person, null)),
63
+ } }, message.initials === '' ? (0, react_1.jsx)(icons_material_1.Person, null) : message.initials),
64
64
  (0, react_1.jsx)("div", null,
65
65
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n "]))) },
66
66
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "], ["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "]))) }, message.username),
67
67
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 0.75rem;\n display: inline-block;\n "], ["\n font-size: 0.75rem;\n display: inline-block;\n "]))) }, timeDisplay)),
68
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 0.875rem;\n white-space: break-spaces;\n "], ["\n font-size: 0.875rem;\n white-space: break-spaces;\n "]))) }, message.content))));
68
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n font-size: 0.875rem;\n white-space: break-spaces;\n "], ["\n color: ", ";\n font-size: 0.875rem;\n white-space: break-spaces;\n "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hsl(0, 0%, 65%)' : 'inherit') }, message.content))));
69
69
  }
70
70
  exports.default = MessageItem;
71
71
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/lib/components/material-ui/ChatInterface/MessageThread.js CHANGED
@@ -19,6 +19,7 @@ function MessageThread(_a) {
19
19
  var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, isSubmitting = _a.isSubmitting, colors = _a.colors;
20
20
  var isInitialized = (0, react_2.useRef)(false);
21
21
  var isScrollLoad = (0, react_2.useRef)(false);
22
+ var hasSubmitted = (0, react_2.useRef)(false);
22
23
  var prevScrollTop = (0, react_2.useRef)(null);
23
24
  var prevScrollHeight = (0, react_2.useRef)(null);
24
25
  var shouldScrollToPrevPosition = (0, react_2.useRef)(false);
@@ -31,9 +32,14 @@ function MessageThread(_a) {
31
32
  fetchNextPage();
32
33
  }
33
34
  }, 300), [hasNextPage, fetchNextPage, isLoading, isFetching]);
35
+ (0, react_2.useEffect)(function () {
36
+ if (isSubmitting) {
37
+ hasSubmitted.current = true;
38
+ }
39
+ }, [isSubmitting]);
34
40
  // This will handle the initial loading of messages, then scroll to bottom
35
41
  (0, react_2.useEffect)(function () {
36
- if (!isInitialized.current && !isLoading && scrollParent.current) {
42
+ if (!isInitialized.current && !isFetching && scrollParent.current) {
37
43
  var _a = scrollParent.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
38
44
  if (clientHeight >= scrollHeight && hasNextPage && fetchNextPage) {
39
45
  fetchNextPage();
@@ -42,7 +48,7 @@ function MessageThread(_a) {
42
48
  isInitialized.current = true;
43
49
  scrollParent.current.scrollTo(0, scrollHeight - clientHeight);
44
50
  }
45
- }, [isLoading, isInitialized.current, hasNextPage, fetchNextPage]);
51
+ }, [isFetching, isInitialized.current, hasNextPage, fetchNextPage]);
46
52
  // Sets up the scroll event listener
47
53
  (0, react_2.useEffect)(function () {
48
54
  if (scrollParent.current) {
@@ -70,8 +76,9 @@ function MessageThread(_a) {
70
76
  }, [isFetching, prevScrollHeight.current]);
71
77
  // Manages scroll position for data changes that are triggered from anything other than the scroll event
72
78
  (0, react_2.useEffect)(function () {
79
+ var _a;
73
80
  if (scrollParent.current && !isScrollLoad.current && isInitialized.current) {
74
- var _a = scrollParent.current, scrollHeight = _a.scrollHeight, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight;
81
+ var _b = scrollParent.current, scrollHeight = _b.scrollHeight, scrollTop = _b.scrollTop, clientHeight = _b.clientHeight;
75
82
  if (isFetching) {
76
83
  // track the current position
77
84
  prevScrollHeight.current = scrollHeight;
@@ -81,18 +88,23 @@ function MessageThread(_a) {
81
88
  shouldScrollToPrevPosition.current = true;
82
89
  }
83
90
  }
84
- else if (!isFetching &&
85
- prevScrollHeight.current !== null &&
86
- prevScrollTop.current !== null &&
87
- scrollHeight > prevScrollHeight.current) {
91
+ else {
88
92
  // init to scroll to bottom delta
89
93
  var delta = scrollHeight - clientHeight;
90
- if (shouldScrollToPrevPosition.current) {
91
- delta = prevScrollTop.current;
94
+ if (hasSubmitted.current) {
95
+ // scroll to bottom if this was triggered by the current user's sent message
96
+ (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, delta);
97
+ }
98
+ else if (!isFetching && prevScrollHeight.current !== null && prevScrollTop.current !== null) {
99
+ if (shouldScrollToPrevPosition.current) {
100
+ delta = prevScrollTop.current;
101
+ }
102
+ scrollParent.current.scrollTo(0, delta);
92
103
  }
93
- scrollParent.current.scrollTo(0, delta);
104
+ // clean up
94
105
  prevScrollHeight.current = null;
95
106
  prevScrollTop.current = null;
107
+ hasSubmitted.current = false;
96
108
  shouldScrollToPrevPosition.current = false;
97
109
  }
98
110
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.43",
3
+ "version": "2.0.47",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -46,7 +46,7 @@
46
46
  "@emotion/babel-plugin": "^11.3.0",
47
47
  "@emotion/react": "^11.4.0",
48
48
  "@emotion/styled": "^11.3.0",
49
- "@mui/icons-material": "^5.0.3",
49
+ "@mui/icons-material": "^5.2.1",
50
50
  "@mui/lab": "^5.0.0-alpha.50",
51
51
  "@mui/material": "^5.0.3",
52
52
  "@mui/styles": "^5.0.1",
@@ -62,6 +62,7 @@
62
62
  "@types/react-table": "^7.7.6",
63
63
  "@typescript-eslint/eslint-plugin": "^4.32.0",
64
64
  "@typescript-eslint/parser": "^4.32.0",
65
+ "@vendorflow/common": "^1.0.36",
65
66
  "babel-eslint": "10.1.0",
66
67
  "babel-jest": "^24.9.0",
67
68
  "babel-loader": "^8.2.2",
@@ -96,6 +97,7 @@
96
97
  "jest-resolve": "24.9.0",
97
98
  "jest-watch-typeahead": "0.4.2",
98
99
  "lodash": "^4.17.15",
100
+ "material-ui-popup-state": "^2.0.0",
99
101
  "mini-css-extract-plugin": "0.9.0",
100
102
  "nanoid": "^3.1.30",
101
103
  "optimize-css-assets-webpack-plugin": "5.0.3",