l-min-components 1.0.351 → 1.0.357
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/package.json +2 -1
- package/src/components/dropdown component/index.jsx +17 -4
- package/src/components/dropdown component/test.jsx +108 -0
- package/src/components/messageAddon/messages/assets/close.jsx +11 -0
- package/src/components/messageAddon/messages/assets/down.jsx +10 -0
- package/src/components/messageAddon/messages/assets/more.jsx +12 -0
- package/src/components/messageAddon/messages/chatheader/index.jsx +7 -2
- package/src/components/messageAddon/messages/index.styled.js +42 -11
- package/src/components/messageAddon/messages/messages.jsx +8 -3
- package/src/components/searchBar/styles/index.jsx +1 -0
- package/src/components/textEditor/colorModal/index.jsx +15 -0
- package/src/components/textEditor/colorModal/style.jsx +43 -0
- package/src/components/textEditor/index.jsx +23 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "l-min-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.357",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"src/assets",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"rc-tooltip": "^6.0.1",
|
|
27
27
|
"react": "^18.2.0",
|
|
28
28
|
"react-chartjs-2": "^5.2.0",
|
|
29
|
+
"react-color": "^2.19.3",
|
|
29
30
|
"react-cookie": "^4.1.1",
|
|
30
31
|
"react-datepicker": "^4.10.0",
|
|
31
32
|
"react-dom": "^18.2.0",
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
* onSelect: Function,
|
|
17
17
|
* inputPlaceHolder: string,
|
|
18
18
|
* default: {name: string | number, [key: string]: string | number}
|
|
19
|
+
* toggleOnHover: boolean
|
|
19
20
|
* }} props - properties of the dropdown component
|
|
20
21
|
*/
|
|
21
22
|
// dropdownData - Array of objects with property values of name and value
|
|
@@ -57,8 +58,17 @@ const DropDownComponent = (props) => {
|
|
|
57
58
|
props?.onSelect && props?.onSelect(selected);
|
|
58
59
|
}, [selected]);
|
|
59
60
|
|
|
61
|
+
const handleDropdownToggle = () => {
|
|
62
|
+
setDropdown(prevDropdown => !prevDropdown);
|
|
63
|
+
};
|
|
64
|
+
|
|
60
65
|
return (
|
|
61
|
-
<DropDownContainer
|
|
66
|
+
<DropDownContainer
|
|
67
|
+
className={props?.className}
|
|
68
|
+
ref={dropdownRef}
|
|
69
|
+
onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
|
|
70
|
+
onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
|
|
71
|
+
>
|
|
62
72
|
<DropDownHeader>{props?.header}</DropDownHeader>
|
|
63
73
|
<DropDownControls>
|
|
64
74
|
{props?.searchable ? (
|
|
@@ -69,14 +79,17 @@ const DropDownComponent = (props) => {
|
|
|
69
79
|
onChange={(e) => {
|
|
70
80
|
setSearchParam(e.target.value);
|
|
71
81
|
}}
|
|
72
|
-
onClick={() => setDropdown(true)}
|
|
82
|
+
// onClick={() => setDropdown(true)}
|
|
83
|
+
onClick={handleDropdownToggle}
|
|
73
84
|
/>
|
|
74
85
|
) : (
|
|
75
|
-
<p onClick={() => setDropdown(!dropdown)}>
|
|
86
|
+
// <p onClick={() => setDropdown(!dropdown)}>
|
|
87
|
+
<p onClick={handleDropdownToggle}>
|
|
76
88
|
{selected?.name || props?.inputPlaceHolder}
|
|
77
89
|
</p>
|
|
78
90
|
)}
|
|
79
|
-
<DownIcon onClick={() => setDropdown(!dropdown)} />
|
|
91
|
+
{/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
|
|
92
|
+
<DownIcon onClick={handleDropdownToggle} />
|
|
80
93
|
{searchParam && dropdown && (
|
|
81
94
|
<DropDownContent>
|
|
82
95
|
{props?.dropdownData?.map((dropdownItem, idx) => {
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import React, { useState, useRef, useEffect } from "react";
|
|
2
|
+
import {
|
|
3
|
+
ControlInput,
|
|
4
|
+
DropDownContainer,
|
|
5
|
+
DropDownContent,
|
|
6
|
+
DropDownControls,
|
|
7
|
+
DropDownHeader,
|
|
8
|
+
DropDownItem,
|
|
9
|
+
} from "./styles";
|
|
10
|
+
|
|
11
|
+
const DropDownComponent = (props) => {
|
|
12
|
+
const [selected, setSelected] = useState(props.default);
|
|
13
|
+
const [dropdown, setDropdown] = useState(false);
|
|
14
|
+
const [searchParam, setSearchParam] = useState();
|
|
15
|
+
|
|
16
|
+
const dropdownRef = useRef(null);
|
|
17
|
+
|
|
18
|
+
const handleClickOutside = (event) => {
|
|
19
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
20
|
+
setDropdown(false);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
document.addEventListener('click', handleClickOutside);
|
|
26
|
+
return () => {
|
|
27
|
+
document.removeEventListener('click', handleClickOutside);
|
|
28
|
+
};
|
|
29
|
+
}, []);
|
|
30
|
+
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
props?.onSelect && props?.onSelect(selected);
|
|
33
|
+
}, [selected]);
|
|
34
|
+
|
|
35
|
+
const handleDropdownToggle = () => {
|
|
36
|
+
setDropdown(prevDropdown => !prevDropdown);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<DropDownContainer
|
|
41
|
+
className={props?.className}
|
|
42
|
+
ref={dropdownRef}
|
|
43
|
+
onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
|
|
44
|
+
onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
|
|
45
|
+
>
|
|
46
|
+
<DropDownHeader>{props?.header}</DropDownHeader>
|
|
47
|
+
<DropDownControls>
|
|
48
|
+
{props?.searchable ? (
|
|
49
|
+
<ControlInput
|
|
50
|
+
placeholder={props?.inputPlaceHolder || "Select Dropdown"}
|
|
51
|
+
type="text"
|
|
52
|
+
value={selected?.name}
|
|
53
|
+
onChange={(e) => setSearchParam(e.target.value)}
|
|
54
|
+
onClick={handleDropdownToggle}
|
|
55
|
+
/>
|
|
56
|
+
) : (
|
|
57
|
+
<p onClick={handleDropdownToggle}>
|
|
58
|
+
{selected?.name || props?.inputPlaceHolder}
|
|
59
|
+
</p>
|
|
60
|
+
)}
|
|
61
|
+
<DownIcon onClick={handleDropdownToggle} />
|
|
62
|
+
{searchParam && dropdown && (
|
|
63
|
+
<DropDownContent>
|
|
64
|
+
{props?.dropdownData?.map((dropdownItem, idx) => {
|
|
65
|
+
if (
|
|
66
|
+
props?.dropdownData[idx]?.name
|
|
67
|
+
?.toLowerCase()
|
|
68
|
+
.includes(searchParam?.toLowerCase())
|
|
69
|
+
)
|
|
70
|
+
return (
|
|
71
|
+
<DropDownItem
|
|
72
|
+
key={idx}
|
|
73
|
+
onClick={() => {
|
|
74
|
+
setSelected(dropdownItem);
|
|
75
|
+
setDropdown(false);
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
<span>{dropdownItem?.name}</span>
|
|
79
|
+
{selected === dropdownItem && <Tick />}
|
|
80
|
+
</DropDownItem>
|
|
81
|
+
);
|
|
82
|
+
})}
|
|
83
|
+
</DropDownContent>
|
|
84
|
+
)}
|
|
85
|
+
{!searchParam && dropdown && (
|
|
86
|
+
<DropDownContent>
|
|
87
|
+
{props?.dropdownData?.map((dropdownItem, idx) => {
|
|
88
|
+
return (
|
|
89
|
+
<DropDownItem
|
|
90
|
+
key={idx}
|
|
91
|
+
onClick={() => {
|
|
92
|
+
setSelected(dropdownItem);
|
|
93
|
+
setDropdown(false);
|
|
94
|
+
}}
|
|
95
|
+
>
|
|
96
|
+
<span>{dropdownItem?.name}</span>
|
|
97
|
+
{selected === dropdownItem && <Tick />}
|
|
98
|
+
</DropDownItem>
|
|
99
|
+
);
|
|
100
|
+
})}
|
|
101
|
+
</DropDownContent>
|
|
102
|
+
)}
|
|
103
|
+
</DropDownControls>
|
|
104
|
+
</DropDownContainer>
|
|
105
|
+
);
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
export default DropDownComponent;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
|
|
2
|
+
const CloseSvg = () => {
|
|
3
|
+
return(
|
|
4
|
+
<svg width="34" height="35" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M12.7891 13.3555L21.2743 21.8407" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M12.7882 21.8407L21.2734 13.3555" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
</svg>
|
|
8
|
+
)
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default CloseSvg
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
|
|
2
|
+
const DownSvg = () => {
|
|
3
|
+
return(
|
|
4
|
+
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M19.9806 9.54688L13.4606 16.0669C12.6906 16.8369 11.4306 16.8369 10.6606 16.0669L4.14062 9.54688" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</svg>
|
|
7
|
+
)
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default DownSvg
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const MoreSvg = () => {
|
|
2
|
+
|
|
3
|
+
return(
|
|
4
|
+
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M14 5.07031C14 3.97031 13.1 3.07031 12 3.07031C10.9 3.07031 10 3.97031 10 5.07031C10 6.17031 10.9 7.07031 12 7.07031C13.1 7.07031 14 6.17031 14 5.07031Z" fill="#636666"/>
|
|
6
|
+
<path d="M14 19.0703C14 17.9703 13.1 17.0703 12 17.0703C10.9 17.0703 10 17.9703 10 19.0703C10 20.1703 10.9 21.0703 12 21.0703C13.1 21.0703 14 20.1703 14 19.0703Z" fill="#636666"/>
|
|
7
|
+
<path d="M14 12.0703C14 10.9703 13.1 10.0703 12 10.0703C10.9 10.0703 10 10.9703 10 12.0703C10 13.1703 10.9 14.0703 12 14.0703C13.1 14.0703 14 13.1703 14 12.0703Z" fill="#636666"/>
|
|
8
|
+
</svg>
|
|
9
|
+
)
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export default MoreSvg;
|
|
@@ -4,6 +4,7 @@ import useRooms from "../../hooks/useRooms";
|
|
|
4
4
|
import Avatar from "../../assets/images/avatar.jpg";
|
|
5
5
|
import { HiUser, HiOfficeBuilding } from "react-icons/hi";
|
|
6
6
|
import { FiMoreVertical } from "react-icons/fi";
|
|
7
|
+
import MoreSvg from "../assets/more";
|
|
7
8
|
|
|
8
9
|
/** The top green header of an open chat
|
|
9
10
|
*
|
|
@@ -54,11 +55,15 @@ const ChatHeader = ({
|
|
|
54
55
|
</div>
|
|
55
56
|
<div className="user-details">
|
|
56
57
|
<h5>
|
|
57
|
-
{chatRecipient?.first_name} {chatRecipient?.last_name}
|
|
58
|
+
{chatRecipient?.first_name || "French For Geginners"} {chatRecipient?.last_name}
|
|
58
59
|
</h5>
|
|
60
|
+
<div className="friend_cont">
|
|
59
61
|
<div className="friend-tag">
|
|
60
62
|
<HiUser /> Friend
|
|
61
63
|
</div>
|
|
64
|
+
<p>Julius Rippin</p>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
62
67
|
{/* <div className="instructor-tag">
|
|
63
68
|
<HiUser /> Instructor
|
|
64
69
|
</div> */}
|
|
@@ -70,7 +75,7 @@ const ChatHeader = ({
|
|
|
70
75
|
</div>
|
|
71
76
|
|
|
72
77
|
<span onClick={() => setChatOptions(!chatOptions)}>
|
|
73
|
-
<
|
|
78
|
+
<MoreSvg style={{ color: "#636666" }} />
|
|
74
79
|
</span>
|
|
75
80
|
|
|
76
81
|
{chatOptions && (
|
|
@@ -2,8 +2,9 @@ import styled from "styled-components";
|
|
|
2
2
|
|
|
3
3
|
export const MessagesWrapper = styled.div`
|
|
4
4
|
position: absolute;
|
|
5
|
-
width:
|
|
5
|
+
width: 570px;
|
|
6
6
|
/* height: 300px; */
|
|
7
|
+
/* height: 40vh; */
|
|
7
8
|
bottom: 0;
|
|
8
9
|
right: 0;
|
|
9
10
|
border-radius: 30px;
|
|
@@ -16,20 +17,25 @@ export const MessagesWrapper = styled.div`
|
|
|
16
17
|
align-items: center;
|
|
17
18
|
background-color: rgba(0, 194, 194, 1);
|
|
18
19
|
justify-content: space-between;
|
|
19
|
-
padding:
|
|
20
|
+
padding: 16px 20px;
|
|
20
21
|
color: #ffffff;
|
|
21
22
|
|
|
22
23
|
p {
|
|
23
|
-
color: #
|
|
24
|
-
font-
|
|
25
|
-
font-
|
|
24
|
+
color: var(--white, #FFF);
|
|
25
|
+
font-family: Nunito;
|
|
26
|
+
font-size: 20px;
|
|
27
|
+
font-style: normal;
|
|
28
|
+
font-weight: 700;
|
|
29
|
+
line-height: 28px; /* 140% */
|
|
30
|
+
letter-spacing: 0.4px;
|
|
26
31
|
}
|
|
27
32
|
|
|
28
33
|
.icon-box {
|
|
29
34
|
display: flex;
|
|
30
35
|
align-items: center;
|
|
36
|
+
cursor: pointer;
|
|
31
37
|
span {
|
|
32
|
-
margin-right:
|
|
38
|
+
margin-right: 15px;
|
|
33
39
|
}
|
|
34
40
|
}
|
|
35
41
|
}
|
|
@@ -52,6 +58,7 @@ export const MessagesContainer = styled.div`
|
|
|
52
58
|
background-color: #ffffff;
|
|
53
59
|
border-radius: 30px;
|
|
54
60
|
height: ${({ isFullHeight }) => (isFullHeight ? "" : "0px")};
|
|
61
|
+
|
|
55
62
|
|
|
56
63
|
h1 {
|
|
57
64
|
margin-top: 0px;
|
|
@@ -432,13 +439,18 @@ export const FriendsCardContainer = styled.div`
|
|
|
432
439
|
export const CardContainer = styled.div`
|
|
433
440
|
background-color: #ffffff;
|
|
434
441
|
border-radius: 30px;
|
|
435
|
-
padding:
|
|
442
|
+
padding: 20px;
|
|
436
443
|
overflow-y: hidden;
|
|
437
444
|
display: flex;
|
|
438
445
|
flex-direction: column;
|
|
446
|
+
height: 65vh;
|
|
447
|
+
|
|
448
|
+
.input{
|
|
449
|
+
border-top: 1px solid var(--Neutral-20, #DFE5E5);
|
|
450
|
+
}
|
|
439
451
|
|
|
440
452
|
.friend-header-section {
|
|
441
|
-
background
|
|
453
|
+
background: #E5F9F9;
|
|
442
454
|
border-radius: 20px;
|
|
443
455
|
padding: 10px;
|
|
444
456
|
display: flex;
|
|
@@ -446,8 +458,10 @@ export const CardContainer = styled.div`
|
|
|
446
458
|
align-items: center;
|
|
447
459
|
position: relative;
|
|
448
460
|
margin-bottom: 10px;
|
|
461
|
+
width: 530px;
|
|
449
462
|
|
|
450
463
|
span {
|
|
464
|
+
cursor: pointer;
|
|
451
465
|
svg {
|
|
452
466
|
color: #636666;
|
|
453
467
|
fill: #636666;
|
|
@@ -518,16 +532,21 @@ export const CardContainer = styled.div`
|
|
|
518
532
|
font-weight: 600;
|
|
519
533
|
color: #636666;
|
|
520
534
|
margin-bottom: 4px;
|
|
535
|
+
width: 100%;
|
|
521
536
|
}
|
|
537
|
+
.friend_cont{
|
|
538
|
+
display: flex;
|
|
539
|
+
/* justify-content: space-between; */
|
|
522
540
|
|
|
523
541
|
.friend-tag {
|
|
524
|
-
background-color: rgba(0, 194, 194, 0.1);
|
|
525
542
|
border-radius: 6px;
|
|
543
|
+
background: rgba(212, 48, 206, 0.12);
|
|
526
544
|
color: #636666;
|
|
527
545
|
font-size: 12px;
|
|
528
546
|
align-items: center;
|
|
529
|
-
padding:
|
|
547
|
+
padding: 0px 5px;
|
|
530
548
|
display: flex;
|
|
549
|
+
justify-content: center;
|
|
531
550
|
margin-top: auto;
|
|
532
551
|
font-weight: 400;
|
|
533
552
|
|
|
@@ -536,6 +555,18 @@ export const CardContainer = styled.div`
|
|
|
536
555
|
}
|
|
537
556
|
}
|
|
538
557
|
|
|
558
|
+
p{
|
|
559
|
+
color: var(--Neutral-70, #636666);
|
|
560
|
+
font-family: Nunito;
|
|
561
|
+
font-size: 14px;
|
|
562
|
+
font-style: normal;
|
|
563
|
+
font-weight: 500;
|
|
564
|
+
line-height: normal;
|
|
565
|
+
letter-spacing: 0.28px;
|
|
566
|
+
margin-left: 10px;
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
|
|
539
570
|
.instructor-tag {
|
|
540
571
|
background: rgba(212, 48, 206, 0.12);
|
|
541
572
|
border-radius: 6px;
|
|
@@ -874,7 +905,7 @@ export const TextMessagePanel = styled.div`
|
|
|
874
905
|
}
|
|
875
906
|
|
|
876
907
|
.icon-box > svg {
|
|
877
|
-
margin-right:
|
|
908
|
+
margin-right: 15px;
|
|
878
909
|
}
|
|
879
910
|
.emoji-icon {
|
|
880
911
|
/* padding: 16px 0%; */
|
|
@@ -31,6 +31,8 @@ import { ButtonComponent } from "l-min-components/src/components";
|
|
|
31
31
|
import { BsFunnel } from "react-icons/bs";
|
|
32
32
|
import { BsChevronDown } from "react-icons/bs";
|
|
33
33
|
import { MdOutlineClose } from "react-icons/md";
|
|
34
|
+
import DownSvg from "./assets/down";
|
|
35
|
+
import CloseSvg from "./assets/close";
|
|
34
36
|
|
|
35
37
|
const Messages = ({ close }) => {
|
|
36
38
|
const [showEmoji, setShowEmoji] = useState(false);
|
|
@@ -246,14 +248,14 @@ const Messages = ({ close }) => {
|
|
|
246
248
|
<>
|
|
247
249
|
<MessagesWrapper>
|
|
248
250
|
<div className="message_by_wrapper">
|
|
249
|
-
<p className="mbw_name"> Message
|
|
251
|
+
<p className="mbw_name"> Message Julius Rippin </p>
|
|
250
252
|
|
|
251
253
|
<div className="icon-box">
|
|
252
254
|
<span onClick={() => setIsFullHeight(!isFullHeight)}>
|
|
253
|
-
<
|
|
255
|
+
<DownSvg />
|
|
254
256
|
</span>
|
|
255
257
|
<span onClick={close}>
|
|
256
|
-
<
|
|
258
|
+
<CloseSvg />
|
|
257
259
|
</span>
|
|
258
260
|
</div>
|
|
259
261
|
</div>
|
|
@@ -333,6 +335,7 @@ const Messages = ({ close }) => {
|
|
|
333
335
|
</>
|
|
334
336
|
)}
|
|
335
337
|
</MessageBody>
|
|
338
|
+
<div className="input">
|
|
336
339
|
<InputSection
|
|
337
340
|
setShowEmoji={setShowEmoji}
|
|
338
341
|
userID={userID}
|
|
@@ -349,6 +352,8 @@ const Messages = ({ close }) => {
|
|
|
349
352
|
handleRoomMessage={handleRoomMessage}
|
|
350
353
|
roomID={roomID}
|
|
351
354
|
/>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
352
357
|
</>
|
|
353
358
|
</CardContainer>
|
|
354
359
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { ModalWrapper, ModalContent, CloseButton } from './style';
|
|
3
|
+
|
|
4
|
+
const Modal = ({ isOpen, onClose, children, width, height, display, top, left, marginTop, marginLeft }) => {
|
|
5
|
+
return (
|
|
6
|
+
<ModalWrapper isOpen={isOpen} width={width} height={height} top={top} left={left}>
|
|
7
|
+
<ModalContent width={width} height={height} marginTop={marginTop} marginLeft={marginLeft}>
|
|
8
|
+
<CloseButton onClick={onClose} display={display}>×</CloseButton>
|
|
9
|
+
{children}
|
|
10
|
+
</ModalContent>
|
|
11
|
+
</ModalWrapper>
|
|
12
|
+
);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default Modal;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
export const ModalWrapper = styled.div`
|
|
4
|
+
position: fixed;
|
|
5
|
+
margin-top: ${({ top }) => (top ? top : '5%')};
|
|
6
|
+
margin-left: ${({ left }) => (left ? left : '22%')};
|
|
7
|
+
// bottom: 0;
|
|
8
|
+
// right: 0;
|
|
9
|
+
display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
// background-color: rgba(0, 0, 0, 0.6);
|
|
13
|
+
z-index: 1;
|
|
14
|
+
/* background-color: transparent; */
|
|
15
|
+
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
export const ModalContent = styled.div`
|
|
19
|
+
position: relative;
|
|
20
|
+
width: ${({width}) => (width ? width : "70%")};
|
|
21
|
+
// max-width: 70%;
|
|
22
|
+
height: ${({ height }) => (height ? height : '70%')};
|
|
23
|
+
background-color: transparent !important;
|
|
24
|
+
/* overflow: hidden; */
|
|
25
|
+
border-radius: 30px;
|
|
26
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
27
|
+
margin-top: ${({ marginTop }) => (marginTop ? marginTop : '')};
|
|
28
|
+
margin-left: ${({ marginLeft }) => (marginLeft ? marginLeft : '')};
|
|
29
|
+
`;
|
|
30
|
+
|
|
31
|
+
export const CloseButton = styled.button`
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: -50px;
|
|
34
|
+
right: 15px;
|
|
35
|
+
width: 40px;
|
|
36
|
+
height: 40px;
|
|
37
|
+
border-radius: 30px;
|
|
38
|
+
background-color: white;
|
|
39
|
+
border: none;
|
|
40
|
+
font-size: 20px;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
display: ${({display}) => (display ? display : "block")};
|
|
43
|
+
`;
|
|
@@ -8,6 +8,8 @@ import { DropDownComponent,ButtonComponent, } from "l-min-components/src/compone
|
|
|
8
8
|
// import { fontList } from "../../pages/createLectures/defaults";
|
|
9
9
|
import EmojiPicker from "emoji-picker-react";
|
|
10
10
|
import Grammerly from "./assets/grammerly";
|
|
11
|
+
import { CompactPicker } from 'react-color'
|
|
12
|
+
import ColorModal from "./colorModal";
|
|
11
13
|
|
|
12
14
|
/**
|
|
13
15
|
* @param {{
|
|
@@ -29,15 +31,16 @@ const TextEditor = ({
|
|
|
29
31
|
const [value, setValue] = useState(valueData);
|
|
30
32
|
const editor = useMemo(() => withReact(createEditor()), []);
|
|
31
33
|
const [fontColor, setFontColor] = useState("#000");
|
|
32
|
-
const [active, setActive] = useState(false)
|
|
33
|
-
const [boldActive, setBoldActive] = useState(false)
|
|
34
|
-
const [italicActive, setItalicActive] = useState(false)
|
|
35
|
-
const [underlinective, setUnderlineActive] = useState(false)
|
|
36
|
-
const [listActive, setListActive] = useState(false)
|
|
37
|
-
const [leftActive, setLeftActive] = useState(false)
|
|
38
|
-
const [rightActive, setRightActive] = useState(false)
|
|
39
|
-
const [centerActive, setCenterActive] = useState(false)
|
|
34
|
+
const [active, setActive] = useState(false);
|
|
35
|
+
const [boldActive, setBoldActive] = useState(false);
|
|
36
|
+
const [italicActive, setItalicActive] = useState(false);
|
|
37
|
+
const [underlinective, setUnderlineActive] = useState(false);
|
|
38
|
+
const [listActive, setListActive] = useState(false);
|
|
39
|
+
const [leftActive, setLeftActive] = useState(false);
|
|
40
|
+
const [rightActive, setRightActive] = useState(false);
|
|
41
|
+
const [centerActive, setCenterActive] = useState(false);
|
|
40
42
|
const [showEmoji, setShowEmoji] = useState();
|
|
43
|
+
const [showColor, setShowColor] = useState();
|
|
41
44
|
|
|
42
45
|
// const [showEmoji, setShowEmoji] = useState();
|
|
43
46
|
const dropdownRef = useRef(null);
|
|
@@ -125,6 +128,17 @@ const TextEditor = ({
|
|
|
125
128
|
/>
|
|
126
129
|
</div>
|
|
127
130
|
)}
|
|
131
|
+
<ColorModal isOpen={showColor} onClose={() => setShowColor(false)} display={"none"} marginLeft={"0%"} top={"6%"} >
|
|
132
|
+
<div className="color_picker">
|
|
133
|
+
<CompactPicker
|
|
134
|
+
color={fontColor}
|
|
135
|
+
onChangeComplete={(color) => {
|
|
136
|
+
setFontColor(color.hex);
|
|
137
|
+
toggleMark(editor, "color", color.hex);
|
|
138
|
+
}}
|
|
139
|
+
/>
|
|
140
|
+
</div>
|
|
141
|
+
</ColorModal>
|
|
128
142
|
<div className="editor_area">
|
|
129
143
|
{announce && (
|
|
130
144
|
<input
|
|
@@ -172,6 +186,7 @@ const TextEditor = ({
|
|
|
172
186
|
onMouseDown={(e) => {
|
|
173
187
|
e.preventDefault();
|
|
174
188
|
colorInput.current.click();
|
|
189
|
+
setShowColor((state) => !state);
|
|
175
190
|
}}>
|
|
176
191
|
<div className="wrap">
|
|
177
192
|
<input
|