sprint-asia-custom-component 0.1.52 → 0.1.53
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.js +504 -521
- package/package.json +1 -1
- package/src/components/dropdown/dropdownText/index.js +23 -2
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState, useEffect, useRef } from 'react';
|
|
2
|
-
import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
|
|
2
|
+
import { PiCaretDown, PiCaretUp, PiInfo } from 'react-icons/pi';
|
|
3
3
|
|
|
4
4
|
const DropdownText = ({
|
|
5
5
|
options = [
|
|
@@ -13,6 +13,8 @@ const DropdownText = ({
|
|
|
13
13
|
placeholder = "Placeholder",
|
|
14
14
|
isRequired = true,
|
|
15
15
|
isEdited = true,
|
|
16
|
+
mode = "default",
|
|
17
|
+
footer = null,
|
|
16
18
|
currentOption = {option : "Name 1", value:"Value 1"},
|
|
17
19
|
}) => {
|
|
18
20
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -61,7 +63,11 @@ const DropdownText = ({
|
|
|
61
63
|
<span className='rounded-md shadow-sm'>
|
|
62
64
|
<button
|
|
63
65
|
type='button'
|
|
64
|
-
className={
|
|
66
|
+
className={`
|
|
67
|
+
${isEdited == false && "bg-neutral30 cursor-not-allowed"}
|
|
68
|
+
${mode == "default" && "border-neutral50 bg-neutral20 cursor-pointer"}
|
|
69
|
+
${mode == "danger" && "border-danger500 bg-danger50 cursor-pointer"}
|
|
70
|
+
flex items-center w-full py-2.5 text-left px-4 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`}
|
|
65
71
|
onClick={() => isEdited && handleToggleDropdownText()}
|
|
66
72
|
>
|
|
67
73
|
<span className='flex-grow overflow-hidden'>{selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder}</span>
|
|
@@ -96,6 +102,21 @@ const DropdownText = ({
|
|
|
96
102
|
</div>
|
|
97
103
|
</div>
|
|
98
104
|
)}
|
|
105
|
+
|
|
106
|
+
{footer && (
|
|
107
|
+
<div className='mt-1'>
|
|
108
|
+
{mode === "danger" ? (
|
|
109
|
+
<div className='flex'>
|
|
110
|
+
<div>
|
|
111
|
+
<PiInfo size={16} className='text-danger500' />
|
|
112
|
+
</div>
|
|
113
|
+
<p className="text-danger500 text-xs ml-1">{footer}</p>
|
|
114
|
+
</div>
|
|
115
|
+
) : (
|
|
116
|
+
<p className="text-black text-xs">{footer}</p>
|
|
117
|
+
)}
|
|
118
|
+
</div>
|
|
119
|
+
)}
|
|
99
120
|
</div>
|
|
100
121
|
);
|
|
101
122
|
};
|