@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
|
@@ -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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"}
|
|
@@ -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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@heliux-org/design-system-core",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.337",
|
|
4
4
|
"description": "Official Heliux design system resources for application development in React.js",
|
|
5
5
|
"main": "./dist/main.js",
|
|
6
6
|
"types": "./dist/types/index.d.ts",
|
|
@@ -299,5 +299,5 @@
|
|
|
299
299
|
"PR: Icon 💎": "New Icons"
|
|
300
300
|
}
|
|
301
301
|
},
|
|
302
|
-
"gitHead": "
|
|
302
|
+
"gitHead": "57722e1f1c6617a630670fc16e1d44a82dcd336b"
|
|
303
303
|
}
|
|
@@ -30,6 +30,7 @@ export interface CommentFormProps {
|
|
|
30
30
|
onCommentSubmitted: (text: string) => Promise<boolean>;
|
|
31
31
|
isLabel?: boolean;
|
|
32
32
|
label?: { status: "external" | "internal" };
|
|
33
|
+
isEditable?: boolean;
|
|
33
34
|
// onClickAttachment?: () => void;
|
|
34
35
|
}
|
|
35
36
|
|
|
@@ -38,7 +39,7 @@ export interface CommentsProps extends CommentFormProps {
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
|
|
41
|
-
export function Comments({ comments, currentUser, onCommentSubmitted, isLabel = false, label }: CommentsProps) {
|
|
42
|
+
export function Comments({ comments, currentUser, onCommentSubmitted, isEditable = false, isLabel = false, label }: CommentsProps) {
|
|
42
43
|
const messageContainerRef = useRef<HTMLDivElement>(null);
|
|
43
44
|
|
|
44
45
|
useEffect(() => {
|
|
@@ -62,12 +63,12 @@ export function Comments({ comments, currentUser, onCommentSubmitted, isLabel =
|
|
|
62
63
|
</Flex>
|
|
63
64
|
)
|
|
64
65
|
}
|
|
65
|
-
<CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} isLabel={isLabel} label={label} />
|
|
66
|
+
<CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} isLabel={isLabel} isEditable={isEditable} label={label} />
|
|
66
67
|
</div>
|
|
67
68
|
);
|
|
68
69
|
}
|
|
69
70
|
|
|
70
|
-
export function CommentForm({ onCommentSubmitted, currentUser, isLabel = false, label }: CommentFormProps) {
|
|
71
|
+
export function CommentForm({ onCommentSubmitted, currentUser, isEditable = false, isLabel = false, label }: CommentFormProps) {
|
|
71
72
|
const [isWaiting, setIsWaiting] = useState<boolean>(false);
|
|
72
73
|
const [text, setText] = useState<string>('');
|
|
73
74
|
|
|
@@ -112,24 +113,26 @@ export function CommentForm({ onCommentSubmitted, currentUser, isLabel = false,
|
|
|
112
113
|
</>
|
|
113
114
|
)}
|
|
114
115
|
</Flex>
|
|
115
|
-
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
116
|
+
{isEditable &&
|
|
117
|
+
<div className={'comments-buttons'}>
|
|
118
|
+
<TextAreaField
|
|
119
|
+
disabled={isWaiting}
|
|
120
|
+
onChange={setText}
|
|
121
|
+
placeholder={'What’s on your mind...'}
|
|
122
|
+
rows={3}
|
|
123
|
+
value={text}
|
|
124
|
+
isResizeable={false}
|
|
125
|
+
/>
|
|
126
|
+
<Button
|
|
127
|
+
disabled={!text || isWaiting}
|
|
128
|
+
onClick={() => onSubmit(text)}
|
|
129
|
+
size={Button.sizes.SMALL}
|
|
130
|
+
style={{ width: "100%" }}
|
|
131
|
+
>
|
|
132
|
+
Send
|
|
133
|
+
</Button>
|
|
134
|
+
</div>
|
|
135
|
+
}
|
|
133
136
|
{/* <Button
|
|
134
137
|
onClick={onClickAttachment}
|
|
135
138
|
size={Button.sizes.SMALL}
|