sprint-asia-custom-component 0.1.63 → 0.1.65
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/index.css +1 -1
- package/dist/index.js +3705 -1069
- package/package.json +1 -1
- package/src/components/alert/index.js +16 -1
- package/src/components/button/outlinebutton/index.js +30 -29
- package/src/components/button/primarybutton/index.js +9 -1
- package/src/components/searchdropdown/index.js +92 -82
- package/src/templates/index.js +3 -0
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { PiInfoFill, PiCheckCircleFill, PiX } from 'react-icons/pi'
|
|
2
|
+
import { PiInfoFill, PiCheckCircleFill, PiX, PiCheck, PiCheckBold, PiXBold } from 'react-icons/pi'
|
|
3
3
|
import OutlineButton from '../button/outlinebutton'
|
|
4
|
+
import PrimaryButton from '../button/primarybutton'
|
|
4
5
|
|
|
5
6
|
const Alert = ({
|
|
6
7
|
title = "Title",
|
|
@@ -8,6 +9,8 @@ const Alert = ({
|
|
|
8
9
|
type = "primary",
|
|
9
10
|
titleLeftButton,
|
|
10
11
|
titleRightButton,
|
|
12
|
+
titleLeftButtonClient,
|
|
13
|
+
titleRightButtonClient,
|
|
11
14
|
onCloseButton,
|
|
12
15
|
onClickLeftButton,
|
|
13
16
|
onClickRightButton,
|
|
@@ -59,6 +62,18 @@ const Alert = ({
|
|
|
59
62
|
<OutlineButton title={titleRightButton} onClick={onClickRightButton} size='small'/>
|
|
60
63
|
</div>
|
|
61
64
|
}
|
|
65
|
+
{
|
|
66
|
+
titleLeftButtonClient &&
|
|
67
|
+
<div className='m-1'>
|
|
68
|
+
<OutlineButton title={titleLeftButtonClient} onClick={onClickLeftButton} size='client approval' icon={<PiXBold />} isIconVisible={true} color="blue" />
|
|
69
|
+
</div>
|
|
70
|
+
}
|
|
71
|
+
{
|
|
72
|
+
titleRightButtonClient &&
|
|
73
|
+
<div className='m-1'>
|
|
74
|
+
<PrimaryButton title={titleRightButtonClient} onClick={onClickRightButton} size='client approval' icon={<PiCheckBold />} isIconVisible={true} color="blue"/>
|
|
75
|
+
</div>
|
|
76
|
+
}
|
|
62
77
|
</div>
|
|
63
78
|
{
|
|
64
79
|
onCloseButton &&
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import { PiDownloadSimpleDuotone } from 'react-icons/pi';
|
|
3
2
|
|
|
4
3
|
const OutlineButton = ({
|
|
5
4
|
title = "Button",
|
|
@@ -7,6 +6,7 @@ const OutlineButton = ({
|
|
|
7
6
|
isActive = true,
|
|
8
7
|
size = "large",
|
|
9
8
|
isIconVisible = false,
|
|
9
|
+
icon = null,
|
|
10
10
|
onClick = () => {}
|
|
11
11
|
}) => {
|
|
12
12
|
const [isPressed, setIsPressed] = useState(false);
|
|
@@ -23,34 +23,35 @@ const OutlineButton = ({
|
|
|
23
23
|
onClick();
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
disabled={!isActive}
|
|
40
|
-
onClick={handleClick}
|
|
41
|
-
onMouseDown={handleButtonPress}
|
|
42
|
-
onMouseUp={handleButtonRelease}
|
|
43
|
-
onTouchStart={handleButtonPress}
|
|
44
|
-
onTouchEnd={handleButtonRelease}
|
|
45
|
-
>
|
|
46
|
-
<div className='flex items-center'>
|
|
47
|
-
{
|
|
48
|
-
isIconVisible && <PiDownloadSimpleDuotone size={16} className='mr-1'/>
|
|
26
|
+
return (
|
|
27
|
+
<button
|
|
28
|
+
className={`
|
|
29
|
+
${(isPressed && isActive) ? 'bg-white text-primary500 border-2 border-primary500' : (isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default')}
|
|
30
|
+
${type === "full" && "w-full"}
|
|
31
|
+
${size === "small" && "text-sm h-7 w-32"}
|
|
32
|
+
${size === "medium" && "text-md h-8"}
|
|
33
|
+
${size === "large" && "text-lg h-10"}
|
|
34
|
+
${size === "very large" && "text-xl h-12"}
|
|
35
|
+
${size === "extra very large" && "text-2xl h-14"}
|
|
36
|
+
${size === "detail division" && "text-sm h-10 w-24"}
|
|
37
|
+
${size === "client approval" && "text-sm h-8"}
|
|
38
|
+
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
|
|
49
39
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
40
|
+
disabled={!isActive}
|
|
41
|
+
onClick={handleClick}
|
|
42
|
+
onMouseDown={handleButtonPress}
|
|
43
|
+
onMouseUp={handleButtonRelease}
|
|
44
|
+
onTouchStart={handleButtonPress}
|
|
45
|
+
onTouchEnd={handleButtonRelease}
|
|
46
|
+
>
|
|
47
|
+
<div className='flex items-center'>
|
|
48
|
+
{
|
|
49
|
+
isIconVisible && icon && <span className='mr-1'>{icon}</span>
|
|
50
|
+
}
|
|
51
|
+
<p>{title}</p>
|
|
52
|
+
</div>
|
|
53
|
+
</button>
|
|
54
|
+
);
|
|
54
55
|
};
|
|
55
56
|
|
|
56
|
-
export default OutlineButton;
|
|
57
|
+
export default OutlineButton;
|
|
@@ -5,6 +5,8 @@ const PrimaryButton = ({
|
|
|
5
5
|
type = "wrap",
|
|
6
6
|
isActive = true,
|
|
7
7
|
size = "large",
|
|
8
|
+
isIconVisible = false,
|
|
9
|
+
icon = null,
|
|
8
10
|
onClick = () => {}
|
|
9
11
|
}) => {
|
|
10
12
|
const [isPressed, setIsPressed] = useState(false);
|
|
@@ -32,6 +34,7 @@ const PrimaryButton = ({
|
|
|
32
34
|
${size === "very large" && "text-xl h-12"}
|
|
33
35
|
${size === "extra very large" && "text-2xl h-14"}
|
|
34
36
|
${size === "detail division" && "text-sm h-10"}
|
|
37
|
+
${size === "client approval" && "text-sm h-8"}
|
|
35
38
|
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
|
|
36
39
|
}
|
|
37
40
|
disabled={!isActive}
|
|
@@ -41,7 +44,12 @@ const PrimaryButton = ({
|
|
|
41
44
|
onTouchStart={handleButtonPress}
|
|
42
45
|
onTouchEnd={handleButtonRelease}
|
|
43
46
|
>
|
|
44
|
-
|
|
47
|
+
<div className='flex items-center'>
|
|
48
|
+
{
|
|
49
|
+
isIconVisible && icon && <span className='mr-1'>{icon}</span>
|
|
50
|
+
}
|
|
51
|
+
<p>{title}</p>
|
|
52
|
+
</div>
|
|
45
53
|
</button>
|
|
46
54
|
);
|
|
47
55
|
};
|
|
@@ -1,95 +1,105 @@
|
|
|
1
|
-
import React, { useState, useRef } from
|
|
2
|
-
import { PiMagnifyingGlass, PiCaretDown, PiCaretUp } from
|
|
1
|
+
import React, { useState, useRef } from "react";
|
|
2
|
+
import { PiMagnifyingGlass, PiCaretDown, PiCaretUp } from "react-icons/pi";
|
|
3
3
|
|
|
4
4
|
const SearchDropdown = ({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
setFilterSearch,
|
|
20
|
-
onEnterPress,
|
|
5
|
+
options = [
|
|
6
|
+
{
|
|
7
|
+
option: "Name 1",
|
|
8
|
+
value: "Value 1",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
option: "Name 2",
|
|
12
|
+
value: "Value 2",
|
|
13
|
+
},
|
|
14
|
+
],
|
|
15
|
+
placeholderSearch = "Search Here",
|
|
16
|
+
filterDropdown = "Filter",
|
|
17
|
+
setFilterDropdown,
|
|
18
|
+
onEnterPress,
|
|
21
19
|
}) => {
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
const [input, setInput] = useState("");
|
|
21
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
22
|
+
const dropdownRef = useRef(null);
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const handleClickOption = (data) => {
|
|
32
|
-
setIsOpen(false)
|
|
33
|
-
setFilterDropdown(data)
|
|
24
|
+
const handleKeyDown = (event) => {
|
|
25
|
+
if (event.key === "Enter") {
|
|
26
|
+
onEnterPress(input);
|
|
34
27
|
}
|
|
28
|
+
};
|
|
35
29
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
options?.length > 0 ?
|
|
57
|
-
options.map((option, index) => (
|
|
58
|
-
<div
|
|
59
|
-
key={index}
|
|
60
|
-
className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer'
|
|
61
|
-
onClick={() => handleClickOption(option)}
|
|
62
|
-
>
|
|
63
|
-
<div className='flex justify-between'>
|
|
64
|
-
<p className='text-sm text-black'>{option.option}</p>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
))
|
|
68
|
-
:
|
|
69
|
-
<div className='text-sm font-normal text-black flex justify-center'>
|
|
70
|
-
<p>Data Not Available</p>
|
|
71
|
-
</div>
|
|
72
|
-
}
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
)}
|
|
30
|
+
const handleClickOption = (data) => {
|
|
31
|
+
setIsOpen(false);
|
|
32
|
+
setFilterDropdown(data);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div className="relative inline-block text-left w-full" ref={dropdownRef}>
|
|
37
|
+
<div className="flex items-center h-full">
|
|
38
|
+
<div
|
|
39
|
+
className={`${
|
|
40
|
+
input ? "border-black" : "border-neutral50"
|
|
41
|
+
} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`}
|
|
42
|
+
onClick={() => setIsOpen(!isOpen)}
|
|
43
|
+
>
|
|
44
|
+
<div className="flex items-center bg-white rounded-tl-md rounded-bl-md">
|
|
45
|
+
<p className="flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300">
|
|
46
|
+
{filterDropdown.option}
|
|
47
|
+
</p>
|
|
48
|
+
{isOpen ? <PiCaretUp /> : <PiCaretDown />}
|
|
49
|
+
<p className={`${input ? "text-black" : "text-neutral50"} ml-3`}>|</p>
|
|
76
50
|
</div>
|
|
77
|
-
|
|
78
|
-
<div
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
51
|
+
{isOpen && (
|
|
52
|
+
<div
|
|
53
|
+
className="z-10 origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden"
|
|
54
|
+
role="menu"
|
|
55
|
+
aria-orientation="vertical"
|
|
56
|
+
aria-labelledby="options-menu"
|
|
57
|
+
>
|
|
58
|
+
<div className="px-1 py-2 max-h-56 overflow-y-auto">
|
|
59
|
+
{options?.length > 0 ? (
|
|
60
|
+
options.map((option, index) => (
|
|
61
|
+
<div
|
|
62
|
+
key={index}
|
|
63
|
+
className="hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer"
|
|
64
|
+
onClick={() => handleClickOption(option)}
|
|
65
|
+
>
|
|
66
|
+
<div className="flex justify-between">
|
|
67
|
+
<p className="text-sm text-black">{option.option}</p>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
))
|
|
71
|
+
) : (
|
|
72
|
+
<div className="text-sm font-normal text-black flex justify-center">
|
|
73
|
+
<p>Data Not Available</p>
|
|
74
|
+
</div>
|
|
75
|
+
)}
|
|
76
|
+
</div>
|
|
88
77
|
</div>
|
|
78
|
+
)}
|
|
79
|
+
</div>
|
|
80
|
+
<div
|
|
81
|
+
className={`${
|
|
82
|
+
input ? "border-black" : "border-neutral50"
|
|
83
|
+
} relative border-t border-b border-r rounded-tr-md rounded-br-md`}
|
|
84
|
+
>
|
|
85
|
+
<div className="flex items-center bg-white rounded-tr-md rounded-br-md focus:outline-none">
|
|
86
|
+
<PiMagnifyingGlass
|
|
87
|
+
className={`${
|
|
88
|
+
input ? "text-black" : "text-neutral50"
|
|
89
|
+
} absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4`}
|
|
90
|
+
/>
|
|
91
|
+
<input
|
|
92
|
+
type="search"
|
|
93
|
+
onChange={(e) => setInput(e.target.value)}
|
|
94
|
+
onKeyDown={(e) => handleKeyDown(e)}
|
|
95
|
+
className="flex items-center w-full py-2.5 text-left pl-8 pr-4 bg-white rounded-md font-normal text-sm text-black focus:outline-none"
|
|
96
|
+
placeholder={placeholderSearch}
|
|
97
|
+
/>
|
|
89
98
|
</div>
|
|
90
99
|
</div>
|
|
91
100
|
</div>
|
|
92
|
-
|
|
101
|
+
</div>
|
|
102
|
+
);
|
|
93
103
|
};
|
|
94
104
|
|
|
95
|
-
export default SearchDropdown;
|
|
105
|
+
export default SearchDropdown;
|
package/src/templates/index.js
CHANGED
|
@@ -863,6 +863,9 @@ const Templates = () => {
|
|
|
863
863
|
<div className='w-full py-3'>
|
|
864
864
|
<Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" titleRightButton="Add Division" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
|
|
865
865
|
</div>
|
|
866
|
+
<div className='w-full py-3'>
|
|
867
|
+
<Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButtonClient="Reject" titleRightButtonClient="Approve" onClickLeftButton={() => console.log("left button clicked")} onClickRightButton={() => console.log("right button clicked")}/>
|
|
868
|
+
</div>
|
|
866
869
|
{
|
|
867
870
|
isOpenAlert &&
|
|
868
871
|
<div className='w-full py-3'>
|