@vendorflow/components 2.0.37 → 2.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/components/InfiniteScroll/InfiniteScroll.js +5 -2
  2. package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +3 -2
  3. package/lib/components/material-ui/ChatInterface/ChatInterface.js +2 -2
  4. package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +25 -74
  5. package/lib/components/material-ui/ChatInterface/MessageInput.d.ts +2 -3
  6. package/lib/components/material-ui/ChatInterface/MessageInput.js +2 -2
  7. package/package.json +1 -1
package/lib/components/InfiniteScroll/InfiniteScroll.js CHANGED
@@ -81,6 +81,7 @@ function useInfiniteScroll(_a) {
81
81
  var scrollParent = _a.scrollParent, scrollBody = _a.scrollBody, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage;
82
82
  var prevPosition = (0, react_2.useRef)();
83
83
  var observer = (0, react_2.useRef)();
84
+ var _d = __read((0, react_2.useState)(false), 2), isScrollInit = _d[0], setScrollInit = _d[1];
84
85
  var hasScrollbar = (0, react_2.useMemo)(function () {
85
86
  if (scrollParent.current && scrollBody.current) {
86
87
  return scrollBody.current.clientHeight > scrollParent.current.clientHeight;
@@ -89,6 +90,7 @@ function useInfiniteScroll(_a) {
89
90
  }, [(_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.clientHeight, (_c = scrollBody.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
90
91
  (0, react_2.useEffect)(function () {
91
92
  if (!isLoading && hasScrollbar) {
93
+ prevPosition.current = null;
92
94
  scrollToStart();
93
95
  }
94
96
  }, [isLoading, hasScrollbar]);
@@ -97,6 +99,7 @@ function useInfiniteScroll(_a) {
97
99
  var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
98
100
  var scrollToValue = isReverse ? scrollHeight : 0;
99
101
  (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, scrollToValue);
102
+ setScrollInit(true);
100
103
  }
101
104
  // this callback is used and fired based on the state of the element it is attached to
102
105
  return (0, react_2.useCallback)(function (node) {
@@ -108,7 +111,7 @@ function useInfiniteScroll(_a) {
108
111
  }
109
112
  observer.current = new IntersectionObserver(function (entries) {
110
113
  if (entries[0].isIntersecting && hasNextPage && fetchNextPage) {
111
- if (scrollBody.current && isReverse) {
114
+ if (scrollBody.current && isReverse && isScrollInit) {
112
115
  // save the last element, so that we can scroll to it after the new data loads in
113
116
  prevPosition.current = scrollBody.current.clientHeight;
114
117
  }
@@ -127,6 +130,6 @@ function useInfiniteScroll(_a) {
127
130
  }
128
131
  observer.current.observe(node);
129
132
  }
130
- }, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody]);
133
+ }, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, isScrollInit]);
131
134
  }
132
135
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts CHANGED
@@ -12,7 +12,6 @@ export interface ChatInterfaceProps {
12
12
  handleSend: (message: string) => Promise<boolean>;
13
13
  className?: string;
14
14
  style?: any;
15
- submitting: boolean;
16
15
  placeholder?: string;
17
16
  hasNextPage?: boolean;
18
17
  fetchNextPage?: () => Promise<any> | any;
@@ -20,6 +19,8 @@ export interface ChatInterfaceProps {
20
19
  isLoading: boolean;
21
20
  /** Determines if a data fetch is happening */
22
21
  isFetching: boolean;
22
+ /** Determines if a message submission is happening */
23
+ isSubmitting: boolean;
23
24
  colors?: {
24
25
  user: string;
25
26
  others: string;
@@ -27,4 +28,4 @@ export interface ChatInterfaceProps {
27
28
  /** Needs to take a ref that is used to determine the height of the input component */
28
29
  renderInputComponent?: (ref: Ref<HTMLDivElement>) => ReactNode;
29
30
  }
30
- export default function ChatInterface({ userId, messages, fetchNextPage, handleSend, hasNextPage, className, style, submitting, placeholder, isLoading, isFetching, colors, renderInputComponent, }: ChatInterfaceProps): JSX.Element;
31
+ export default function ChatInterface({ userId, messages, fetchNextPage, handleSend, hasNextPage, className, style, isSubmitting, placeholder, isLoading, isFetching, colors, renderInputComponent, }: ChatInterfaceProps): JSX.Element;
package/lib/components/material-ui/ChatInterface/ChatInterface.js CHANGED
@@ -67,7 +67,7 @@ var react_measure_1 = __importDefault(require("react-measure"));
67
67
  var MessageInput_1 = __importDefault(require("./MessageInput"));
68
68
  var MessageThread_1 = __importDefault(require("./MessageThread"));
69
69
  function ChatInterface(_a) {
70
- var userId = _a.userId, messages = _a.messages, fetchNextPage = _a.fetchNextPage, handleSend = _a.handleSend, hasNextPage = _a.hasNextPage, className = _a.className, style = _a.style, submitting = _a.submitting, placeholder = _a.placeholder, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors, renderInputComponent = _a.renderInputComponent;
70
+ var userId = _a.userId, messages = _a.messages, fetchNextPage = _a.fetchNextPage, handleSend = _a.handleSend, hasNextPage = _a.hasNextPage, className = _a.className, style = _a.style, isSubmitting = _a.isSubmitting, placeholder = _a.placeholder, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors, renderInputComponent = _a.renderInputComponent;
71
71
  var _b = __read((0, react_2.useState)(''), 2), message = _b[0], setMessage = _b[1];
72
72
  var _c = __read((0, react_2.useState)(-1), 2), inputHeight = _c[0], setInputHeight = _c[1];
73
73
  function handleClickSend() {
@@ -102,7 +102,7 @@ function ChatInterface(_a) {
102
102
  var measureRef = _a.measureRef;
103
103
  return ((0, react_1.jsx)(react_2.Fragment, null,
104
104
  (0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isLoading: isLoading, isFetching: isFetching, colors: colors }),
105
- renderInputComponent ? (renderInputComponent(measureRef)) : ((0, react_1.jsx)(MessageInput_1.default, { ref: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, submitting: submitting, placeholder: placeholder }))));
105
+ renderInputComponent ? (renderInputComponent(measureRef)) : ((0, react_1.jsx)(MessageInput_1.default, { ref: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, isSubmitting: isSubmitting, placeholder: placeholder }))));
106
106
  })));
107
107
  }
108
108
  exports.default = ChatInterface;
package/lib/components/material-ui/ChatInterface/ChatInterface.story.js CHANGED
@@ -44,61 +44,11 @@ var ChatInterface_1 = __importDefault(require("./ChatInterface"));
44
44
  function ChatInterface() {
45
45
  var _a = __read((0, react_2.useState)(true), 2), isLoading = _a[0], setLoading = _a[1];
46
46
  var _b = __read((0, react_2.useState)(true), 2), isFetching = _b[0], setFetching = _b[1];
47
- var _c = __read((0, react_2.useState)(false), 2), submitting = _c[0], setSubmitting = _c[1];
47
+ var _c = __read((0, react_2.useState)(false), 2), isSubmitting = _c[0], setSubmitting = _c[1];
48
48
  var _d = __read((0, react_2.useState)([]), 2), messages = _d[0], setMessages = _d[1];
49
49
  var _e = __read((0, react_2.useState)(true), 2), hasMore = _e[0], setHasMore = _e[1];
50
50
  (0, react_2.useEffect)(function () {
51
- setMessages([
52
- {
53
- id: generateId(),
54
- userId: 'user1',
55
- username: 'Socorro Aguilar',
56
- timestamp: generateTimestamp(),
57
- content: 'Thanks!',
58
- },
59
- {
60
- id: generateId(),
61
- userId: 'user1',
62
- username: 'Socorro Aguilar',
63
- timestamp: generateTimestamp(),
64
- content: 'Yeah, that date works perfectly!',
65
- },
66
- {
67
- id: generateId(),
68
- userId: 'user2',
69
- username: 'Greg Bujak',
70
- timestamp: generateTimestamp(),
71
- content: "If that doesn't work, then just let me know which days you need loads for.",
72
- },
73
- {
74
- id: generateId(),
75
- userId: 'user2',
76
- username: 'Greg Bujak',
77
- timestamp: generateTimestamp(),
78
- content: 'Friday the 13th.',
79
- },
80
- {
81
- id: generateId(),
82
- userId: 'user1',
83
- username: 'Socorro Aguilar',
84
- timestamp: generateTimestamp(),
85
- content: 'Possibly, what day?',
86
- },
87
- {
88
- id: generateId(),
89
- userId: 'user2',
90
- username: 'Greg Bujak',
91
- timestamp: generateTimestamp(),
92
- content: 'Yeah, are you interested in a load going from Long Beach, CA to Modesto, CA?',
93
- },
94
- {
95
- id: generateId(),
96
- userId: 'user1',
97
- username: 'Socorro Aguilar',
98
- timestamp: generateTimestamp(),
99
- content: 'Do you have a load for me?',
100
- },
101
- ]);
51
+ setMessages(new Array(5).fill(null).map(generateMessage));
102
52
  setLoading(false);
103
53
  setFetching(false);
104
54
  }, []);
@@ -108,33 +58,34 @@ function ChatInterface() {
108
58
  function generateId() {
109
59
  return short_uuid_1.default.generate();
110
60
  }
61
+ function generateMessage() {
62
+ var user = faker_1.default.random.arrayElement([
63
+ {
64
+ id: 'user1',
65
+ name: 'Socorro Aguilar',
66
+ },
67
+ {
68
+ id: 'user2',
69
+ name: 'Greg Bujak',
70
+ },
71
+ ]);
72
+ return {
73
+ id: generateId(),
74
+ userId: user.id,
75
+ username: user.name,
76
+ timestamp: generateTimestamp(),
77
+ content: faker_1.default.lorem.sentence(5, 2),
78
+ };
79
+ }
111
80
  function generateMessagePage() {
112
- return new Array(10).fill(null).map(function () {
113
- var user = faker_1.default.random.arrayElement([
114
- {
115
- id: 'user1',
116
- name: 'Socorro Aguilar',
117
- },
118
- {
119
- id: 'user2',
120
- name: 'Greg Bujak',
121
- },
122
- ]);
123
- return {
124
- id: generateId(),
125
- userId: user.id,
126
- username: user.name,
127
- timestamp: generateTimestamp(),
128
- content: faker_1.default.lorem.sentence(5, 2),
129
- };
130
- });
81
+ return new Array(10).fill(null).map(generateMessage);
131
82
  }
132
83
  function loadMore() {
133
84
  setFetching(true);
134
85
  setTimeout(function () {
135
86
  setMessages(__spreadArray(__spreadArray([], __read(messages), false), __read(generateMessagePage()), false));
136
87
  setFetching(false);
137
- }, 1000);
88
+ }, 100);
138
89
  }
139
90
  function handleSend(message) {
140
91
  setSubmitting(true);
@@ -154,8 +105,8 @@ function ChatInterface() {
154
105
  }, 500);
155
106
  });
156
107
  }
157
- return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height: 40rem;\n "], ["\n border: 1px solid #ededed;\n height: 40rem;\n "]))) },
158
- (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, submitting: submitting, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching })));
108
+ return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height: 50rem;\n "], ["\n border: 1px solid #ededed;\n height: 50rem;\n "]))) },
109
+ (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
159
110
  }
160
111
  exports.ChatInterface = ChatInterface;
161
112
  var templateObject_1;
package/lib/components/material-ui/ChatInterface/MessageInput.d.ts CHANGED
@@ -1,10 +1,9 @@
1
1
  import { Dispatch, SetStateAction } from 'react';
2
- interface Props {
2
+ import { ChatInterfaceProps } from './ChatInterface';
3
+ interface Props extends Pick<ChatInterfaceProps, 'isSubmitting' | 'placeholder'> {
3
4
  handleClickSend: () => Promise<void>;
4
5
  message: string;
5
- placeholder?: string;
6
6
  setMessage: Dispatch<SetStateAction<string>>;
7
- submitting: boolean;
8
7
  }
9
8
  declare const MessageInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
10
9
  export default MessageInput;
package/lib/components/material-ui/ChatInterface/MessageInput.js CHANGED
@@ -15,7 +15,7 @@ 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
17
  var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
18
- var handleClickSend = _a.handleClickSend, message = _a.message, placeholder = _a.placeholder, setMessage = _a.setMessage, submitting = _a.submitting;
18
+ var handleClickSend = _a.handleClickSend, message = _a.message, placeholder = _a.placeholder, setMessage = _a.setMessage, isSubmitting = _a.isSubmitting;
19
19
  function handleOnChange(_a) {
20
20
  var value = _a.target.value;
21
21
  setMessage(value);
@@ -42,7 +42,7 @@ var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
42
42
  var _a, _b;
43
43
  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
44
  }, 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 "])), submitting ? '0.5rem' : '0.25rem') }, submitting ? ((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: submitting },
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
46
  (0, react_1.jsx)(icons_material_1.Send, null))))));
47
47
  });
48
48
  exports.default = MessageInput;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.37",
3
+ "version": "2.0.41",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",