@heliux-org/design-system-core 0.0.336 → 0.0.337
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Comments/Comments.js +5 -4
- package/dist/components/Comments/Comments.js.map +1 -1
- package/dist/esm/components/Comments/Comments.d.ts +3 -2
- package/dist/esm/components/Comments/Comments.d.ts.map +1 -1
- package/dist/esm/src/components/Comments/Comments.js +1 -1
- package/dist/esm/src/components/Comments/Comments.js.map +1 -1
- package/dist/main.js +1 -1
- package/dist/main.js.map +1 -1
- package/dist/mocked_classnames_esm/components/Comments/Comments.d.ts +3 -2
- package/dist/mocked_classnames_esm/components/Comments/Comments.d.ts.map +1 -1
- package/dist/mocked_classnames_esm/src/components/Comments/Comments.js +1 -1
- package/dist/mocked_classnames_esm/src/components/Comments/Comments.js.map +1 -1
- package/dist/types/components/Comments/Comments.d.ts +3 -2
- package/dist/types/components/Comments/Comments.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/Comments/Comments.tsx +24 -21
|
@@ -26,7 +26,7 @@ const Flex_2 = require("../Flex");
|
|
|
26
26
|
const Info_1 = __importDefault(require("../Icon/Icons/components/Info"));
|
|
27
27
|
const Text_1 = __importDefault(require("../Text/Text"));
|
|
28
28
|
const Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
29
|
-
function Comments({ comments, currentUser, onCommentSubmitted, isLabel = false, label }) {
|
|
29
|
+
function Comments({ comments, currentUser, onCommentSubmitted, isEditable = false, isLabel = false, label }) {
|
|
30
30
|
const messageContainerRef = (0, react_2.useRef)(null);
|
|
31
31
|
(0, react_2.useEffect)(() => {
|
|
32
32
|
if (messageContainerRef.current) {
|
|
@@ -35,10 +35,10 @@ function Comments({ comments, currentUser, onCommentSubmitted, isLabel = false,
|
|
|
35
35
|
}, [comments]);
|
|
36
36
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'comments' }, { children: [comments.length > 0
|
|
37
37
|
? ((0, jsx_runtime_1.jsx)(Flex_1.default, Object.assign({ ref: messageContainerRef, className: 'message-container', direction: Flex_2.FlexDirection.COLUMN, gap: Flex_2.FlexGap.MEDIUM, align: Flex_2.FlexAlign.START }, { children: comments.map((comment, i) => (0, react_1.createElement)(Comment, Object.assign({}, comment, { currentUser: currentUser, key: i }))) })))
|
|
38
|
-
: ((0, jsx_runtime_1.jsx)(Flex_1.default, Object.assign({ className: 'message-container', direction: Flex_2.FlexDirection.COLUMN, gap: Flex_2.FlexGap.MEDIUM, align: Flex_2.FlexAlign.STRETCH, justify: Flex_1.default.justify.CENTER }, { children: (0, jsx_runtime_1.jsx)(Text_1.default, Object.assign({ align: Text_1.default.align.CENTER }, { children: "No Comments Yet." })) }))), (0, jsx_runtime_1.jsx)(CommentForm, { onCommentSubmitted: onCommentSubmitted, currentUser: currentUser, isLabel: isLabel, label: label })] })));
|
|
38
|
+
: ((0, jsx_runtime_1.jsx)(Flex_1.default, Object.assign({ className: 'message-container', direction: Flex_2.FlexDirection.COLUMN, gap: Flex_2.FlexGap.MEDIUM, align: Flex_2.FlexAlign.STRETCH, justify: Flex_1.default.justify.CENTER }, { children: (0, jsx_runtime_1.jsx)(Text_1.default, Object.assign({ align: Text_1.default.align.CENTER }, { children: "No Comments Yet." })) }))), (0, jsx_runtime_1.jsx)(CommentForm, { onCommentSubmitted: onCommentSubmitted, currentUser: currentUser, isLabel: isLabel, isEditable: isEditable, label: label })] })));
|
|
39
39
|
}
|
|
40
40
|
exports.Comments = Comments;
|
|
41
|
-
function CommentForm({ onCommentSubmitted, currentUser, isLabel = false, label }) {
|
|
41
|
+
function CommentForm({ onCommentSubmitted, currentUser, isEditable = false, isLabel = false, label }) {
|
|
42
42
|
const [isWaiting, setIsWaiting] = (0, react_2.useState)(false);
|
|
43
43
|
const [text, setText] = (0, react_2.useState)('');
|
|
44
44
|
const onSubmit = (0, react_2.useCallback)((text) => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -49,7 +49,8 @@ function CommentForm({ onCommentSubmitted, currentUser, isLabel = false, label }
|
|
|
49
49
|
setText('');
|
|
50
50
|
}
|
|
51
51
|
}), [onCommentSubmitted]);
|
|
52
|
-
return ((0, jsx_runtime_1.jsxs)(Flex_1.default, Object.assign({ className: 'comments-top', direction: Flex_1.default.directions.COLUMN, justify: Flex_1.default.justify.END, align: Flex_1.default.align.STRETCH }, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.default, Object.assign({ gap: Flex_1.default.gaps.SMALL }, { children: [isLabel && label.status === "internal" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconType: Icon_1.default.type.SVG, style: { color: "#757575" }, icon: Info_1.default, iconSize: 20, clickable: false }), (0, jsx_runtime_1.jsx)(Text_1.default, Object.assign({ type: Text_1.default.types.TEXT1, color: Text_1.default.colors.SECONDARY }, { children: "This is an internal conversation" }))] })), isLabel && label.status === "external" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconType: Icon_1.default.type.SVG, style: { color: "#FF0020" }, icon: Info_1.default, iconSize: 20, clickable: false }), (0, jsx_runtime_1.jsx)(Text_1.default, Object.assign({ type: Text_1.default.types.TEXT1, style: { color: "#BB0018" } }, { children: "This is an external conversation" }))] }))] })),
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(Flex_1.default, Object.assign({ className: 'comments-top', direction: Flex_1.default.directions.COLUMN, justify: Flex_1.default.justify.END, align: Flex_1.default.align.STRETCH }, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.default, Object.assign({ gap: Flex_1.default.gaps.SMALL }, { children: [isLabel && label.status === "internal" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconType: Icon_1.default.type.SVG, style: { color: "#757575" }, icon: Info_1.default, iconSize: 20, clickable: false }), (0, jsx_runtime_1.jsx)(Text_1.default, Object.assign({ type: Text_1.default.types.TEXT1, color: Text_1.default.colors.SECONDARY }, { children: "This is an internal conversation" }))] })), isLabel && label.status === "external" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconType: Icon_1.default.type.SVG, style: { color: "#FF0020" }, icon: Info_1.default, iconSize: 20, clickable: false }), (0, jsx_runtime_1.jsx)(Text_1.default, Object.assign({ type: Text_1.default.types.TEXT1, style: { color: "#BB0018" } }, { children: "This is an external conversation" }))] }))] })), isEditable &&
|
|
53
|
+
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'comments-buttons' }, { children: [(0, jsx_runtime_1.jsx)(TextAreaField_1.default, { disabled: isWaiting, onChange: setText, placeholder: 'What’s on your mind...', rows: 3, value: text, isResizeable: false }), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ disabled: !text || isWaiting, onClick: () => onSubmit(text), size: Button_1.default.sizes.SMALL, style: { width: "100%" } }, { children: "Send" }))] }))] })));
|
|
53
54
|
}
|
|
54
55
|
exports.CommentForm = CommentForm;
|
|
55
56
|
function Comment({ author, commentedAt, label, text, currentUser }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Comments.js","sourceRoot":"","sources":["../../../src/components/Comments/Comments.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,iCAAwE;AAExE,2BAAyB;AACzB,8DAAsC;AACtC,mFAA2D;AAC3D,wDAAgC;AAChC,sCAAuC;AACvC,8DAAsC;AACtC,kCAA4D;AAC5D,yEAAiD;AACjD,wDAAgC;AAChC,wDAAgC;
|
|
1
|
+
{"version":3,"file":"Comments.js","sourceRoot":"","sources":["../../../src/components/Comments/Comments.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,12 +17,13 @@ export interface CommentFormProps {
|
|
|
17
17
|
label?: {
|
|
18
18
|
status: "external" | "internal";
|
|
19
19
|
};
|
|
20
|
+
isEditable?: boolean;
|
|
20
21
|
}
|
|
21
22
|
export interface CommentsProps extends CommentFormProps {
|
|
22
23
|
comments: CommentProps[];
|
|
23
24
|
}
|
|
24
|
-
export declare function Comments({ comments, currentUser, onCommentSubmitted, isLabel, label }: CommentsProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
25
|
-
export declare function CommentForm({ onCommentSubmitted, currentUser, isLabel, label }: CommentFormProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare function Comments({ comments, currentUser, onCommentSubmitted, isEditable, isLabel, label }: CommentsProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function CommentForm({ onCommentSubmitted, currentUser, isEditable, isLabel, label }: CommentFormProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
26
27
|
export declare function Comment({ author, commentedAt, label, text, currentUser }: {
|
|
27
28
|
currentUser: User;
|
|
28
29
|
} & CommentProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Comments.d.ts","sourceRoot":"","sources":["../../../../src/components/Comments/Comments.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAYzB,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,WAAW,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,IAAI;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,EAAE,IAAI,CAAC;IAClB,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,UAAU,GAAG,UAAU,CAAA;KAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Comments.d.ts","sourceRoot":"","sources":["../../../../src/components/Comments/Comments.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAYzB,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,WAAW,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,IAAI;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,EAAE,IAAI,CAAC;IAClB,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,UAAU,GAAG,UAAU,CAAA;KAAE,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;CAExB;AAED,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC5B;AAGD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,UAAkB,EAAE,OAAe,EAAE,KAAK,EAAE,EAAE,aAAa,oDA2BhI;AAED,wBAAgB,WAAW,CAAC,EAAE,kBAAkB,EAAE,WAAW,EAAE,UAAkB,EAAE,OAAe,EAAE,KAAK,EAAE,EAAE,gBAAgB,oDA4E5H;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,GAAG,YAAY,oDAe9G;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,oDAchD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e,regeneratorRuntime as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__awaiter as n}from"../../../_virtual/_tslib.js";import{jsxs as s,jsx as r,Fragment as i}from"@emotion/react/jsx-runtime";import{createElement as a}from"@emotion/react";import{useRef as o,useEffect as c,useState as l,useCallback as m}from"react";import"./comments.scss.js";import d from"../Avatar/Avatar.js";import u from"../TextAreaField/TextAreaField.js";import p from"../Flex/Flex.js";import"../Avatar/AvatarContent.js";import{AvatarType as g}from"../Avatar/AvatarConstants.js";import"../Avatar/AvatarBadge.js";import b from"../Button/Button.js";import{FlexDirection as h,FlexGap as j,FlexAlign as T}from"../Flex/FlexConstants.js";import f from"../Icon/Icons/components/Info.js";import v from"../Text/Text.js";import y from"../Icon/Icon.js";function O(e){var t=e.comments,n=e.currentUser,i=e.onCommentSubmitted,l=e.
|
|
1
|
+
import{slicedToArray as e,regeneratorRuntime as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__awaiter as n}from"../../../_virtual/_tslib.js";import{jsxs as s,jsx as r,Fragment as i}from"@emotion/react/jsx-runtime";import{createElement as a}from"@emotion/react";import{useRef as o,useEffect as c,useState as l,useCallback as m}from"react";import"./comments.scss.js";import d from"../Avatar/Avatar.js";import u from"../TextAreaField/TextAreaField.js";import p from"../Flex/Flex.js";import"../Avatar/AvatarContent.js";import{AvatarType as g}from"../Avatar/AvatarConstants.js";import"../Avatar/AvatarBadge.js";import b from"../Button/Button.js";import{FlexDirection as h,FlexGap as j,FlexAlign as T}from"../Flex/FlexConstants.js";import f from"../Icon/Icons/components/Info.js";import v from"../Text/Text.js";import y from"../Icon/Icon.js";function O(e){var t=e.comments,n=e.currentUser,i=e.onCommentSubmitted,l=e.isEditable,m=void 0!==l&&l,d=e.isLabel,u=void 0!==d&&d,g=e.label,b=o(null);return c((function(){b.current&&(b.current.scrollTop=b.current.scrollHeight)}),[t]),s("div",Object.assign({className:"comments"},{children:[r(p,t.length>0?Object.assign({ref:b,className:"message-container",direction:h.COLUMN,gap:j.MEDIUM,align:T.START},{children:t.map((function(e,t){return a(C,Object.assign({},e,{currentUser:n,key:t}))}))}):Object.assign({className:"message-container",direction:h.COLUMN,gap:j.MEDIUM,align:T.STRETCH,justify:p.justify.CENTER},{children:r(v,Object.assign({align:v.align.CENTER},{children:"No Comments Yet."}))})),r(E,{onCommentSubmitted:i,currentUser:n,isLabel:u,isEditable:m,label:g})]}))}function E(a){var o=this,c=a.onCommentSubmitted,d=a.isEditable,g=void 0!==d&&d,h=a.isLabel,j=void 0!==h&&h,T=a.label,O=l(!1),E=e(O,2),C=E[0],A=E[1],N=l(""),S=e(N,2),x=S[0],L=S[1],U=m((function(e){return n(o,void 0,void 0,t().mark((function n(){var s;return t().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return A(!0),t.next=3,c(e);case 3:s=t.sent,A(!1),s&&L("");case 6:case"end":return t.stop()}}),n)})))}),[c]);return s(p,Object.assign({className:"comments-top",direction:p.directions.COLUMN,justify:p.justify.END,align:p.align.STRETCH},{children:[s(p,Object.assign({gap:p.gaps.SMALL},{children:[j&&"internal"===T.status&&s(i,{children:[r(y,{iconType:y.type.SVG,style:{color:"#757575"},icon:f,iconSize:20,clickable:!1}),r(v,Object.assign({type:v.types.TEXT1,color:v.colors.SECONDARY},{children:"This is an internal conversation"}))]}),j&&"external"===T.status&&s(i,{children:[r(y,{iconType:y.type.SVG,style:{color:"#FF0020"},icon:f,iconSize:20,clickable:!1}),r(v,Object.assign({type:v.types.TEXT1,style:{color:"#BB0018"}},{children:"This is an external conversation"}))]})]})),g&&s("div",Object.assign({className:"comments-buttons"},{children:[r(u,{disabled:C,onChange:L,placeholder:"What’s on your mind...",rows:3,value:x,isResizeable:!1}),r(b,Object.assign({disabled:!x||C,onClick:function(){return U(x)},size:b.sizes.SMALL,style:{width:"100%"}},{children:"Send"}))]}))]}))}function C(e){var t=e.author,n=e.commentedAt,i=e.label,a=e.text,o=e.currentUser;return s(p,Object.assign({direction:h.COLUMN,align:T.STRETCH,className:"comment"},{children:[s(p,Object.assign({direction:h.ROW,gap:j.SMALL,className:"comment-data"},{children:[!!i&&r(v,Object.assign({className:"comment-label",type:v.types.TEXT2},{children:i})),r("div",Object.assign({className:"comment-user"},{children:t&&r(A,{user:t})})),r(v,Object.assign({className:"comment-date",color:v.colors.SECONDARY,type:v.types.TEXT2},{children:n.toLocaleString()}))]})),r(v,Object.assign({className:"comment-text ".concat(o.id===t.id&&"comment-currentUser"),type:v.types.TEXT1},{children:a}))]}))}function A(e){var t=e.user;return s(p,Object.assign({gap:j.XS},{children:[r(d,{size:d.sizes.MEDIUM,type:g.TEXT,backgroundColor:d.colors.STEEL_DARK,text:N(t.name)}),r("div",Object.assign({className:"comment-user-name"},{children:r(v,Object.assign({type:v.types.TEXT2,weight:v.weights.BOLD},{children:t.name}))}))]}))}function N(e){var t=e.split(" ");return 1===t.length?t[0].charAt(0).toUpperCase():"".concat(t[0].charAt(0)).concat(t[t.length-1].charAt(0)).toUpperCase()}export{C as Comment,E as CommentForm,O as Comments,A as UserCard};
|
|
2
2
|
//# sourceMappingURL=Comments.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Comments.js","sources":["../../../../../src/components/Comments/Comments.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport './comments.scss';\nimport Avatar from '../Avatar/Avatar';\nimport TextAreaField from '../TextAreaField/TextAreaField';\nimport Flex from '../Flex/Flex';\nimport { AvatarType } from '../Avatar';\nimport Button from '../Button/Button';\nimport { FlexAlign, FlexDirection, FlexGap } from '../Flex';\nimport Info from '../Icon/Icons/components/Info';\nimport Text from '../Text/Text';\nimport Icon from '../Icon/Icon';\n// import Attach from '../Icon/Icons/components/Attach';\n\nexport interface CommentProps {\n text: string;\n label?: string;\n author: User;\n commentedAt: Date;\n}\n\nexport interface User {\n id: string;\n email: string;\n name: string;\n}\n\nexport interface CommentFormProps {\n currentUser: User;\n onCommentSubmitted: (text: string) => Promise<boolean>;\n isLabel?: boolean;\n label?: { status: \"external\" | \"internal\" };\n // onClickAttachment?: () => void;\n}\n\nexport interface CommentsProps extends CommentFormProps {\n comments: CommentProps[];\n}\n\n\nexport function Comments({ comments, currentUser, onCommentSubmitted, isLabel = false, label }: CommentsProps) {\n const messageContainerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (messageContainerRef.current) {\n messageContainerRef.current.scrollTop = messageContainerRef.current.scrollHeight;\n }\n }, [comments]);\n return (\n <div className={'comments'}>\n {comments.length > 0\n ? (\n <Flex ref={messageContainerRef} className='message-container' direction={FlexDirection.COLUMN} gap={FlexGap.MEDIUM} align={FlexAlign.START}>\n {comments.map((comment, i) => <Comment {...comment} currentUser={currentUser} key={i} />)}\n </Flex>\n )\n : (\n <Flex className='message-container' direction={FlexDirection.COLUMN} gap={FlexGap.MEDIUM} align={FlexAlign.STRETCH} justify={Flex.justify.CENTER}>\n <Text align={Text.align.CENTER}>\n No Comments Yet.\n </Text>\n </Flex>\n )\n }\n <CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} isLabel={isLabel} label={label} />\n </div>\n );\n}\n\nexport function CommentForm({ onCommentSubmitted, currentUser, isLabel = false, label }: CommentFormProps) {\n const [isWaiting, setIsWaiting] = useState<boolean>(false);\n const [text, setText] = useState<string>('');\n\n const onSubmit = useCallback(async (text: string) => {\n setIsWaiting(true);\n const succeeded = await onCommentSubmitted(text);\n setIsWaiting(false);\n\n if (succeeded) {\n setText('');\n }\n }, [onCommentSubmitted]);\n return (\n <Flex className={'comments-top'} direction={Flex.directions.COLUMN} justify={Flex.justify.END} align={Flex.align.STRETCH}>\n <Flex gap={Flex.gaps.SMALL}>\n {isLabel && label.status === \"internal\" && (\n <>\n <Icon\n iconType={Icon.type.SVG}\n style={{ color: \"#757575\" }}\n icon={Info}\n iconSize={20}\n clickable={false}\n />\n <Text type={Text.types.TEXT1} color={Text.colors.SECONDARY}>\n This is an internal conversation\n </Text>\n </>\n )}\n {isLabel && label.status === \"external\" && (\n <>\n <Icon\n iconType={Icon.type.SVG}\n style={{ color: \"#FF0020\" }}\n icon={Info}\n iconSize={20}\n clickable={false}\n />\n <Text type={Text.types.TEXT1} style={{ color: \"#BB0018\" }}>\n This is an external conversation\n </Text>\n </>\n )}\n </Flex>\n <div className={'comments-buttons'}>\n <TextAreaField\n disabled={isWaiting}\n onChange={setText}\n placeholder={'What’s on your mind...'}\n rows={3}\n value={text}\n isResizeable={false}\n />\n <Button\n disabled={!text || isWaiting}\n onClick={() => onSubmit(text)}\n size={Button.sizes.SMALL}\n style={{ width: \"100%\" }}\n >\n Send\n </Button>\n </div>\n {/* <Button\n onClick={onClickAttachment}\n size={Button.sizes.SMALL}\n kind={Button.kinds.TERTIARY}\n style={{ marginTop: \"var(--spacing-small)\" }}\n >\n <Icon iconType={Icon.type.SVG} style={{ color: \"#375D81\", transform: \"rotate(30deg)\" }} icon={Attach} iconSize={17} clickable={false} />\n <Text type={Text.types.TEXT2} style={{ color: \"#375D81\", marginTop: \"2px\" }}>Attachment</Text>\n </Button> */}\n </Flex>\n );\n}\n\nexport function Comment({ author, commentedAt, label, text, currentUser }: { currentUser: User } & CommentProps) {\n return (\n <Flex direction={FlexDirection.COLUMN} align={FlexAlign.STRETCH} className={'comment'}>\n <Flex direction={FlexDirection.ROW} gap={FlexGap.SMALL} className={'comment-data'}>\n {!!label && (\n <Text className={'comment-label'} type={Text.types.TEXT2}>{label}</Text>\n )}\n <div className={'comment-user'}>\n {author && <UserCard user={author} />}\n </div>\n <Text className={'comment-date'} color={Text.colors.SECONDARY} type={Text.types.TEXT2}>{commentedAt.toLocaleString()}</Text>\n </Flex>\n <Text className={`comment-text ${currentUser.id === author.id && \"comment-currentUser\"}`} type={Text.types.TEXT1}>{text}</Text>\n </Flex>\n );\n}\n\nexport function UserCard({ user }: { user: User }) {\n return (\n <Flex gap={FlexGap.XS}>\n <Avatar\n size={Avatar.sizes.MEDIUM}\n type={AvatarType.TEXT}\n backgroundColor={Avatar.colors.STEEL_DARK}\n text={toInitials(user.name)}\n />\n <div className={'comment-user-name'}>\n <Text type={Text.types.TEXT2} weight={Text.weights.BOLD}>{user.name}</Text>\n </div>\n </Flex>\n );\n}\n\nfunction toInitials(fullName: string) {\n const names = fullName.split(' ');\n\n if (names.length === 1) {\n return names[0].charAt(0).toUpperCase();\n }\n\n return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();\n}\n\n"],"names":["Comments","_ref","comments","currentUser","onCommentSubmitted","_ref$isLabel","isLabel","label","messageContainerRef","useRef","useEffect","current","scrollTop","scrollHeight","_jsxs","Object","assign","className","_jsx","Flex","length","ref","direction","FlexDirection","COLUMN","gap","FlexGap","MEDIUM","align","FlexAlign","START","children","map","comment","i","_createElement","Comment","key","STRETCH","justify","CENTER","Text","CommentForm","_ref2","_this","this","_ref2$isLabel","_useState","useState","_useState2","_slicedToArray","isWaiting","setIsWaiting","_useState3","_useState4","text","setText","onSubmit","useCallback","__awaiter","_regeneratorRuntime","mark","_callee","succeeded","wrap","_context","prev","next","sent","stop","directions","END","gaps","SMALL","status","_Fragment","Icon","iconType","type","SVG","style","color","icon","Info","iconSize","clickable","types","TEXT1","colors","SECONDARY","TextAreaField","disabled","onChange","placeholder","rows","value","isResizeable","Button","onClick","size","sizes","width","_ref3","author","commentedAt","ROW","TEXT2","UserCard","user","toLocaleString","concat","id","_ref4","XS","Avatar","AvatarType","TEXT","backgroundColor","STEEL_DARK","toInitials","name","weight","weights","BOLD","fullName","names","split","charAt","toUpperCase"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Comments.js","sources":["../../../../../src/components/Comments/Comments.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport './comments.scss';\nimport Avatar from '../Avatar/Avatar';\nimport TextAreaField from '../TextAreaField/TextAreaField';\nimport Flex from '../Flex/Flex';\nimport { AvatarType } from '../Avatar';\nimport Button from '../Button/Button';\nimport { FlexAlign, FlexDirection, FlexGap } from '../Flex';\nimport Info from '../Icon/Icons/components/Info';\nimport Text from '../Text/Text';\nimport Icon from '../Icon/Icon';\n// import Attach from '../Icon/Icons/components/Attach';\n\nexport interface CommentProps {\n text: string;\n label?: string;\n author: User;\n commentedAt: Date;\n}\n\nexport interface User {\n id: string;\n email: string;\n name: string;\n}\n\nexport interface CommentFormProps {\n currentUser: User;\n onCommentSubmitted: (text: string) => Promise<boolean>;\n isLabel?: boolean;\n label?: { status: \"external\" | \"internal\" };\n isEditable?: boolean;\n // onClickAttachment?: () => void;\n}\n\nexport interface CommentsProps extends CommentFormProps {\n comments: CommentProps[];\n}\n\n\nexport function Comments({ comments, currentUser, onCommentSubmitted, isEditable = false, isLabel = false, label }: CommentsProps) {\n const messageContainerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (messageContainerRef.current) {\n messageContainerRef.current.scrollTop = messageContainerRef.current.scrollHeight;\n }\n }, [comments]);\n return (\n <div className={'comments'}>\n {comments.length > 0\n ? (\n <Flex ref={messageContainerRef} className='message-container' direction={FlexDirection.COLUMN} gap={FlexGap.MEDIUM} align={FlexAlign.START}>\n {comments.map((comment, i) => <Comment {...comment} currentUser={currentUser} key={i} />)}\n </Flex>\n )\n : (\n <Flex className='message-container' direction={FlexDirection.COLUMN} gap={FlexGap.MEDIUM} align={FlexAlign.STRETCH} justify={Flex.justify.CENTER}>\n <Text align={Text.align.CENTER}>\n No Comments Yet.\n </Text>\n </Flex>\n )\n }\n <CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} isLabel={isLabel} isEditable={isEditable} label={label} />\n </div>\n );\n}\n\nexport function CommentForm({ onCommentSubmitted, currentUser, isEditable = false, isLabel = false, label }: CommentFormProps) {\n const [isWaiting, setIsWaiting] = useState<boolean>(false);\n const [text, setText] = useState<string>('');\n\n const onSubmit = useCallback(async (text: string) => {\n setIsWaiting(true);\n const succeeded = await onCommentSubmitted(text);\n setIsWaiting(false);\n\n if (succeeded) {\n setText('');\n }\n }, [onCommentSubmitted]);\n return (\n <Flex className={'comments-top'} direction={Flex.directions.COLUMN} justify={Flex.justify.END} align={Flex.align.STRETCH}>\n <Flex gap={Flex.gaps.SMALL}>\n {isLabel && label.status === \"internal\" && (\n <>\n <Icon\n iconType={Icon.type.SVG}\n style={{ color: \"#757575\" }}\n icon={Info}\n iconSize={20}\n clickable={false}\n />\n <Text type={Text.types.TEXT1} color={Text.colors.SECONDARY}>\n This is an internal conversation\n </Text>\n </>\n )}\n {isLabel && label.status === \"external\" && (\n <>\n <Icon\n iconType={Icon.type.SVG}\n style={{ color: \"#FF0020\" }}\n icon={Info}\n iconSize={20}\n clickable={false}\n />\n <Text type={Text.types.TEXT1} style={{ color: \"#BB0018\" }}>\n This is an external conversation\n </Text>\n </>\n )}\n </Flex>\n {isEditable &&\n <div className={'comments-buttons'}>\n <TextAreaField\n disabled={isWaiting}\n onChange={setText}\n placeholder={'What’s on your mind...'}\n rows={3}\n value={text}\n isResizeable={false}\n />\n <Button\n disabled={!text || isWaiting}\n onClick={() => onSubmit(text)}\n size={Button.sizes.SMALL}\n style={{ width: \"100%\" }}\n >\n Send\n </Button>\n </div>\n }\n {/* <Button\n onClick={onClickAttachment}\n size={Button.sizes.SMALL}\n kind={Button.kinds.TERTIARY}\n style={{ marginTop: \"var(--spacing-small)\" }}\n >\n <Icon iconType={Icon.type.SVG} style={{ color: \"#375D81\", transform: \"rotate(30deg)\" }} icon={Attach} iconSize={17} clickable={false} />\n <Text type={Text.types.TEXT2} style={{ color: \"#375D81\", marginTop: \"2px\" }}>Attachment</Text>\n </Button> */}\n </Flex>\n );\n}\n\nexport function Comment({ author, commentedAt, label, text, currentUser }: { currentUser: User } & CommentProps) {\n return (\n <Flex direction={FlexDirection.COLUMN} align={FlexAlign.STRETCH} className={'comment'}>\n <Flex direction={FlexDirection.ROW} gap={FlexGap.SMALL} className={'comment-data'}>\n {!!label && (\n <Text className={'comment-label'} type={Text.types.TEXT2}>{label}</Text>\n )}\n <div className={'comment-user'}>\n {author && <UserCard user={author} />}\n </div>\n <Text className={'comment-date'} color={Text.colors.SECONDARY} type={Text.types.TEXT2}>{commentedAt.toLocaleString()}</Text>\n </Flex>\n <Text className={`comment-text ${currentUser.id === author.id && \"comment-currentUser\"}`} type={Text.types.TEXT1}>{text}</Text>\n </Flex>\n );\n}\n\nexport function UserCard({ user }: { user: User }) {\n return (\n <Flex gap={FlexGap.XS}>\n <Avatar\n size={Avatar.sizes.MEDIUM}\n type={AvatarType.TEXT}\n backgroundColor={Avatar.colors.STEEL_DARK}\n text={toInitials(user.name)}\n />\n <div className={'comment-user-name'}>\n <Text type={Text.types.TEXT2} weight={Text.weights.BOLD}>{user.name}</Text>\n </div>\n </Flex>\n );\n}\n\nfunction toInitials(fullName: string) {\n const names = fullName.split(' ');\n\n if (names.length === 1) {\n return names[0].charAt(0).toUpperCase();\n }\n\n return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();\n}\n\n"],"names":["Comments","_ref","comments","currentUser","onCommentSubmitted","_ref$isEditable","isEditable","_ref$isLabel","isLabel","label","messageContainerRef","useRef","useEffect","current","scrollTop","scrollHeight","_jsxs","Object","assign","className","_jsx","Flex","length","ref","direction","FlexDirection","COLUMN","gap","FlexGap","MEDIUM","align","FlexAlign","START","children","map","comment","i","_createElement","Comment","key","STRETCH","justify","CENTER","Text","CommentForm","_ref2","_this","this","_ref2$isEditable","_ref2$isLabel","_useState","useState","_useState2","_slicedToArray","isWaiting","setIsWaiting","_useState3","_useState4","text","setText","onSubmit","useCallback","__awaiter","_regeneratorRuntime","mark","_callee","succeeded","wrap","_context","prev","next","sent","stop","directions","END","gaps","SMALL","status","_Fragment","Icon","iconType","type","SVG","style","color","icon","Info","iconSize","clickable","types","TEXT1","colors","SECONDARY","TextAreaField","disabled","onChange","placeholder","rows","value","isResizeable","Button","onClick","size","sizes","width","_ref3","author","commentedAt","ROW","TEXT2","UserCard","user","toLocaleString","concat","id","_ref4","XS","Avatar","AvatarType","TEXT","backgroundColor","STEEL_DARK","toInitials","name","weight","weights","BOLD","fullName","names","split","charAt","toUpperCase"],"mappings":"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"}
|