@soul-refiner/design-system 2.8.24 → 2.8.25
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.
- package/dist/components/input/responsive-text_area/responsive_text_area.js +73 -0
- package/dist/components/surfaces/comment/comment.js +21 -4
- package/dist/src/components/input/responsive-text_area/index.d.ts +2 -0
- package/dist/src/components/input/responsive-text_area/responsive_text_area.d.ts +16 -0
- package/package.json +1 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";var box=require("../../atoms/box/box.js"),React=require("react"),styled=(require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/paragraph.js"),require("../../atoms/typography/typography.js"),require("styled-components"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const ResponsiveTextArea=React.forwardRef(function({bg:e="var(--color-blue-10)",minWidth:t="400px",value:r,onChange:a,maxCharacters:o=5e3,placeholder:i="Write a comment...",isSuccessful:l,actionComponent:n,icon:p,hasWarning:d,wrapperStyles:s,inputStyles:u,onLimitExceeded:c,limitExceededModal:x,...g},h){return React__default.default.createElement(InputWrapper,{$minWidth:t,$bg:e,$sx:s,$warning:d},React__default.default.createElement(TextAreaWrapper,null,React__default.default.createElement(StyledTextArea,{...g,ref:h,placeholder:i,value:r?.slice(0,o),onChange:e=>{e.target.value.length>=o?c?.():a?.(e)},onInput:e=>{e=e.target;e.style.height="50px",e.style.height=Math.max(e.scrollHeight,e.offsetHeight)+"px"},$inputSx:u,$successful:l,$warning:d}),React__default.default.createElement(ActionWrapper,null,React__default.default.createElement(box.Box,{$align:"center",$justify:"center",sx:"height: 100%; "},n))),x)}),ActionWrapper=styled__default.default.div`
|
|
2
|
+
position: absolute;
|
|
3
|
+
bottom: 0%;
|
|
4
|
+
right: 16px;
|
|
5
|
+
background: transparent;
|
|
6
|
+
z-index: 2;
|
|
7
|
+
height: 100%;
|
|
8
|
+
`,InputWrapper=styled__default.default.div`
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
min-width: ${({$minWidth:e})=>e};
|
|
12
|
+
position: relative;
|
|
13
|
+
gap: 8px;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
align-items: flex-end;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
border-radius: 16px;
|
|
18
|
+
border: 1px solid var(--color-grey-8);
|
|
19
|
+
padding: 0 11px 0 16px;
|
|
20
|
+
background-color: ${({$bg:e})=>e};
|
|
21
|
+
&:hover {
|
|
22
|
+
border-color: var(--color-grey-8);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:focus-within {
|
|
26
|
+
border-color: var(--color-primary-blue-2);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
${({$sx:e})=>e||""}
|
|
30
|
+
${({$warning:e})=>e?"border-color: var(--color-red-4) !important;":""}
|
|
31
|
+
`,TextAreaWrapper=styled__default.default.div`
|
|
32
|
+
width: 100%;
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
align-items: flex-end;
|
|
36
|
+
`,StyledTextArea=styled__default.default.textarea`
|
|
37
|
+
width: 100%;
|
|
38
|
+
padding: 12px 40px 12px 0px;
|
|
39
|
+
font-family: var(--font-inter);
|
|
40
|
+
background: transparent;
|
|
41
|
+
font-size: 16px;
|
|
42
|
+
line-height: 24px;
|
|
43
|
+
color: var(--color-grey-3);
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
outline: none;
|
|
46
|
+
border: none;
|
|
47
|
+
resize: none;
|
|
48
|
+
height: 48px;
|
|
49
|
+
${({$inputSx:e})=>e||"max-height: 150px"}
|
|
50
|
+
overflow-y: auto;
|
|
51
|
+
|
|
52
|
+
&::placeholder {
|
|
53
|
+
color: var(--color-grey-6);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&::-webkit-scrollbar {
|
|
57
|
+
width: 4px;
|
|
58
|
+
right: 45px;
|
|
59
|
+
background: transparent;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&::-webkit-scrollbar-track {
|
|
63
|
+
margin-top: 5px;
|
|
64
|
+
margin-bottom: 45px;
|
|
65
|
+
background: transparent;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&::-webkit-scrollbar-thumb {
|
|
69
|
+
background-color: var(--color-grey-7);
|
|
70
|
+
border-radius: 3px;
|
|
71
|
+
margin-right: 45px;
|
|
72
|
+
}
|
|
73
|
+
`;exports.ResponsiveTextArea=ResponsiveTextArea;
|
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:d,dropdown:u,reactionModal:p,reactions:c,replies:s,userImageUri:f,userName:_,userReactions:m,visibilityIcon:x,customPlaceHolder:g,userProfileUri:h,sx:R})=>{const[y,b]=React__default.default.useState(!1),[$,v]=React__default.default.useState({x:0,y:0}),[E,k]=React__default.default.useState("up"),[C,w]=React__default.default.useState(!1),[j,S]=React__default.default.useState(!1),[q,P]=React__default.default.useState(""),W=React__default.default.Children.toArray(s);var s=()=>{d&&d(),S(!0)},r=helpers.abbrTimeBeforeDate(r),c=c&&Object.entries(c).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>i(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:m?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),L=!!W?.length&&0<W.length,B=L&&W.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==W.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{$sx:R,id:"comment-"+o},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:L||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{as:h?Link__default.default:"span",href:h,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},_),u),React__default.default.createElement(paragraph.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;"},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:a}))),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:e=>{e.stopPropagation(),b(e=>!e),v({y:e.clientY,x:e.clientX}),k(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>w(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},c,p),y&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:E,$top:$.y,$left:$.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{i(e),b(!1)},onClickOutside:()=>b(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),L&&j&&React__default.default.createElement(RepliesWrapper,null,B),!j&&!l&&L&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),C&&React__default.default.createElement(CommentWrapper,null,React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:q,onChange:e=>{P(e.target.value)},placeholder:g||"Write a reply",maxCharacters:1e3,wrapperStyles:"margin: 16px 0; width: 100%;",actionComponent:React__default.default.createElement(box.Box,{sx:"margin: auto 0 5px 0px;",$align:"center",$justify:"center",$gap:8},x,React__default.default.createElement(button.Button,{disabled:!q.length,icon:React__default.default.createElement(send_text.SendText,null),onClick:e=>{e.stopPropagation(),e.preventDefault(),n(q),P("")},sx:`
|
|
3
|
+
justify-content: center;
|
|
4
|
+
background-color: var(--color-primary-blue-2);
|
|
5
|
+
align-items: center;
|
|
6
|
+
height: 40px;
|
|
7
|
+
width: 40px;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
border: none;
|
|
10
|
+
box-shadow: none;
|
|
11
|
+
svg {
|
|
12
|
+
fill: white;
|
|
13
|
+
}
|
|
14
|
+
&:disabled {
|
|
15
|
+
svg {
|
|
16
|
+
fill: var(--color-grey-7);
|
|
17
|
+
}
|
|
18
|
+
border: none !important;
|
|
19
|
+
background-color: var(--color-grey-1);
|
|
20
|
+
}
|
|
21
|
+
`,type:"secondary"})),inputStyles:"font-size: 14px;"}))))},Wrapper=styled__default.default.div`
|
|
3
22
|
max-width: 700px;
|
|
4
23
|
display: flex;
|
|
5
24
|
flex-direction: row;
|
|
@@ -70,10 +89,8 @@
|
|
|
70
89
|
border-top: none;
|
|
71
90
|
border-right: none;
|
|
72
91
|
`,CommentWrapper=styled__default.default.form`
|
|
73
|
-
|
|
92
|
+
> div {
|
|
74
93
|
margin-bottom: 16px;
|
|
75
|
-
}
|
|
76
|
-
label > div {
|
|
77
94
|
box-shadow: var(--elevation-6);
|
|
78
95
|
border-radius: 16px;
|
|
79
96
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ResponsiveTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3
|
+
value?: string;
|
|
4
|
+
maxCharacters?: number;
|
|
5
|
+
wrapperStyles?: string;
|
|
6
|
+
inputStyles?: string;
|
|
7
|
+
bg?: string;
|
|
8
|
+
actionComponent?: React.ReactNode;
|
|
9
|
+
isSuccessful?: boolean;
|
|
10
|
+
hasWarning?: boolean;
|
|
11
|
+
minWidth?: string;
|
|
12
|
+
onLimitExceeded?: () => void;
|
|
13
|
+
limitExceededModal?: React.ReactNode;
|
|
14
|
+
icon?: React.ReactElement;
|
|
15
|
+
}
|
|
16
|
+
export declare const ResponsiveTextArea: React.ForwardRefExoticComponent<ResponsiveTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|