sprint-asia-custom-component 0.1.26 → 0.1.27
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 +49383 -46808
- package/package.json +1 -1
- package/src/components/alert/index.js +4 -4
- package/src/components/searchdropdown/index.js +17 -11
- package/src/components/table/listTable/cellmodelone/index.js +16 -16
- package/src/index.js +64 -64
- package/src/templates/index.js +31 -9
package/package.json
CHANGED
|
@@ -14,8 +14,8 @@ const Alert = ({
|
|
|
14
14
|
return (
|
|
15
15
|
<div className={`
|
|
16
16
|
${type === "primary" && "bg-primary50 border-primary600"}
|
|
17
|
-
${type === "warning" && "bg-warning50 border-
|
|
18
|
-
${type === "danger" && "bg-danger50 border-
|
|
17
|
+
${type === "warning" && "bg-warning50 border-warning800"}
|
|
18
|
+
${type === "danger" && "bg-danger50 border-danger500"} w-full flex justify-between p-3 border rounded-md`}>
|
|
19
19
|
<div className='w-full flex'>
|
|
20
20
|
<div>
|
|
21
21
|
<PiInfoFill
|
|
@@ -23,8 +23,8 @@ const Alert = ({
|
|
|
23
23
|
variant="Bold"
|
|
24
24
|
className={`
|
|
25
25
|
${type === "primary" && "text-primary600"}
|
|
26
|
-
${type === "warning" && "text-
|
|
27
|
-
${type === "danger" && "text-
|
|
26
|
+
${type === "warning" && "text-warning800"}
|
|
27
|
+
${type === "danger" && "text-danger500"} mr-2`}
|
|
28
28
|
/>
|
|
29
29
|
</div>
|
|
30
30
|
<div>
|
|
@@ -2,14 +2,21 @@ import React, { useState, useRef } from 'react';
|
|
|
2
2
|
import { PiMagnifyingGlass, PiCaretDown, PiCaretUp } from 'react-icons/pi';
|
|
3
3
|
|
|
4
4
|
const SearchDropdown = ({
|
|
5
|
-
options = [
|
|
6
|
-
|
|
5
|
+
options = [
|
|
6
|
+
{
|
|
7
|
+
name : "Name 1",
|
|
8
|
+
value : "Value 1"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name : "Name 2",
|
|
12
|
+
value : "Value 2"
|
|
13
|
+
},
|
|
14
|
+
],
|
|
7
15
|
placeholderSearch = "Search Here",
|
|
8
16
|
filterDropdown = "Filter",
|
|
9
17
|
setFilterDropdown,
|
|
10
|
-
setValueFilterDropdown,
|
|
11
18
|
filterSearch,
|
|
12
|
-
|
|
19
|
+
setFilterSearch,
|
|
13
20
|
onEnterPress,
|
|
14
21
|
}) => {
|
|
15
22
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -21,10 +28,9 @@ const SearchDropdown = ({
|
|
|
21
28
|
}
|
|
22
29
|
};
|
|
23
30
|
|
|
24
|
-
const handleClickOption = (data
|
|
31
|
+
const handleClickOption = (data) => {
|
|
25
32
|
setIsOpen(false)
|
|
26
33
|
setFilterDropdown(data)
|
|
27
|
-
setValueFilterDropdown(value)
|
|
28
34
|
}
|
|
29
35
|
|
|
30
36
|
return (
|
|
@@ -32,7 +38,7 @@ const SearchDropdown = ({
|
|
|
32
38
|
<div className='flex items-center h-full'>
|
|
33
39
|
<div className={`${filterSearch ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`} onClick={() => setIsOpen(!isOpen)}>
|
|
34
40
|
<div className='flex items-center bg-white rounded-tl-md rounded-bl-md'>
|
|
35
|
-
<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">{filterDropdown}</p>
|
|
41
|
+
<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">{filterDropdown.name}</p>
|
|
36
42
|
{
|
|
37
43
|
isOpen ? <PiCaretUp /> : <PiCaretDown />
|
|
38
44
|
}
|
|
@@ -52,10 +58,10 @@ const SearchDropdown = ({
|
|
|
52
58
|
<div
|
|
53
59
|
key={index}
|
|
54
60
|
className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer'
|
|
55
|
-
onClick={() => handleClickOption(option
|
|
61
|
+
onClick={() => handleClickOption(option)}
|
|
56
62
|
>
|
|
57
63
|
<div className='flex justify-between'>
|
|
58
|
-
<p className='text-sm text-black'>{option}</p>
|
|
64
|
+
<p className='text-sm text-black'>{option.name}</p>
|
|
59
65
|
</div>
|
|
60
66
|
</div>
|
|
61
67
|
))
|
|
@@ -70,11 +76,11 @@ const SearchDropdown = ({
|
|
|
70
76
|
</div>
|
|
71
77
|
<div className={`${filterSearch ? "border-black" : "border-neutral50"} relative border-t border-b border-r rounded-tr-md rounded-br-md`}>
|
|
72
78
|
<div className='flex items-center bg-white rounded-tr-md rounded-br-md focus:outline-none'>
|
|
73
|
-
<PiMagnifyingGlass className="absolute left-3 top-1/2 transform -translate-y-1/2
|
|
79
|
+
<PiMagnifyingGlass className={`${filterSearch ? "text-black" : "text-neutral50"} absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4`} />
|
|
74
80
|
<input
|
|
75
81
|
type='text'
|
|
76
82
|
value={filterSearch}
|
|
77
|
-
onChange={(e) =>
|
|
83
|
+
onChange={(e) => setFilterSearch(e.target.value)}
|
|
78
84
|
onKeyDown={handleKeyDown}
|
|
79
85
|
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"
|
|
80
86
|
placeholder={placeholderSearch}
|
|
@@ -3,14 +3,14 @@ import Chip from '../../../chip'
|
|
|
3
3
|
import { PiTrash, PiNotePencil } from 'react-icons/pi'
|
|
4
4
|
|
|
5
5
|
const CellModelOne = ({
|
|
6
|
-
Column_One_A
|
|
7
|
-
Column_One_B
|
|
8
|
-
Column_One_C
|
|
9
|
-
Column_One_D
|
|
10
|
-
Column_Two_A
|
|
11
|
-
Column_Two_B
|
|
12
|
-
Column_Three_A
|
|
13
|
-
Column_Four_A
|
|
6
|
+
Column_One_A,
|
|
7
|
+
Column_One_B,
|
|
8
|
+
Column_One_C,
|
|
9
|
+
Column_One_D,
|
|
10
|
+
Column_Two_A,
|
|
11
|
+
Column_Two_B,
|
|
12
|
+
Column_Three_A,
|
|
13
|
+
Column_Four_A,
|
|
14
14
|
Column_Five_A = "Active",
|
|
15
15
|
onClickEdit,
|
|
16
16
|
onClickDelete,
|
|
@@ -47,10 +47,10 @@ const CellModelOne = ({
|
|
|
47
47
|
}
|
|
48
48
|
}>
|
|
49
49
|
<div className= "py-3.5 px-4">
|
|
50
|
-
<p className='font-semibold text-black text-sm'>{Column_One_A}</p>
|
|
51
|
-
<p className='font-normal text-neutral300 text-sm'>{Column_One_B}</p>
|
|
52
|
-
<p className='font-normal text-neutral300 text-sm'>{Column_One_C}</p>
|
|
53
|
-
<p className='font-normal text-neutral300 text-sm'>{Column_One_D}</p>
|
|
50
|
+
<p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
|
|
51
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
|
|
52
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_C ? Column_One_C : "-"}</p>
|
|
53
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_One_D ? Column_One_D : "-"}</p>
|
|
54
54
|
</div>
|
|
55
55
|
</div>
|
|
56
56
|
</td>
|
|
@@ -64,8 +64,8 @@ const CellModelOne = ({
|
|
|
64
64
|
}
|
|
65
65
|
}>
|
|
66
66
|
<div className= "py-3.5 px-4">
|
|
67
|
-
<p className='font-semibold text-black text-sm'>{Column_Two_A}</p>
|
|
68
|
-
<p className='font-normal text-neutral300 text-sm'>{Column_Two_B}</p>
|
|
67
|
+
<p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
|
|
68
|
+
<p className='font-normal text-neutral300 text-sm'>{Column_Two_B ? Column_Two_B : "-"}</p>
|
|
69
69
|
<div className='flex items-center pt-1'>
|
|
70
70
|
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
71
71
|
</div>
|
|
@@ -85,7 +85,7 @@ const CellModelOne = ({
|
|
|
85
85
|
}
|
|
86
86
|
}>
|
|
87
87
|
<div className= "py-3.5 px-4">
|
|
88
|
-
<p className='font-normal text-black text-sm'>{Column_Three_A}</p>
|
|
88
|
+
<p className='font-normal text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
|
|
89
89
|
<div className='flex items-center pt-1'>
|
|
90
90
|
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
91
91
|
</div>
|
|
@@ -108,7 +108,7 @@ const CellModelOne = ({
|
|
|
108
108
|
}
|
|
109
109
|
}>
|
|
110
110
|
<div className= "py-3.5 px-4">
|
|
111
|
-
<p className='font-normal text-black text-sm'>{Column_Four_A}</p>
|
|
111
|
+
<p className='font-normal text-black text-sm'>{Column_Four_A ? Column_Four_A : "-"}</p>
|
|
112
112
|
<div className='flex items-center pt-1'>
|
|
113
113
|
<p className='font-normal text-neutral500 text-sm'> </p>
|
|
114
114
|
</div>
|
package/src/index.js
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
|
|
1
|
+
import './index.css';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
import { BrowserRouter as Router } from 'react-router-dom';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import ReactDOM from 'react-dom/client';
|
|
7
|
+
import App from './App';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
10
|
+
root.render(
|
|
11
|
+
<React.StrictMode>
|
|
12
|
+
<Router> {/* Wrap your App component with Router */}
|
|
13
|
+
<App />
|
|
14
|
+
</Router>
|
|
15
|
+
</React.StrictMode>
|
|
16
|
+
);
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
import './index.css';
|
|
20
|
-
import Alert from './components/alert'
|
|
21
|
-
import DangerButton from './components/button/dangerbutton'
|
|
22
|
-
import OutlineButton from './components/button/outlinebutton'
|
|
23
|
-
import PrimaryButton from './components/button/primarybutton'
|
|
24
|
-
import CardInternalProduct from './components/card';
|
|
25
|
-
import Chip from './components/chip'
|
|
26
|
-
import CustomDatePicker from './components/datepicker';
|
|
27
|
-
import Description from './components/description';
|
|
28
|
-
import DropdownCard from './components/dropdown/dropdownCard';
|
|
29
|
-
import DropdownChip from './components/dropdown/dropdownChip';
|
|
30
|
-
import DropdownText from './components/dropdown/dropdownText';
|
|
31
|
-
import DropzoneUploadFile from './components/dropzone/uploadfile';
|
|
32
|
-
import DropzoneUploadPhoto from './components/dropzone/uploadphoto';
|
|
33
|
-
import EmptyData from './components/emptystate/table/emptydata';
|
|
34
|
-
import NotFound from './components/emptystate/table/notfound';
|
|
35
|
-
import ExportToExcel from './components/export/excel';
|
|
36
|
-
import FilterCheckbox from './components/filter/filterCheckbox';
|
|
37
|
-
import FilterText from './components/filter/filterText';
|
|
38
|
-
import Menu from './components/menu';
|
|
39
|
-
import ModalLoading from './components/modal/modalLoading';
|
|
40
|
-
import ModalResult from './components/modal/modalResult';
|
|
41
|
-
import ModalState from './components/modal/modalState';
|
|
42
|
-
import Notification from './components/notification';
|
|
43
|
-
import SearchInput from './components/searchinput';
|
|
44
|
-
import Stepper from './components/stepper';
|
|
45
|
-
import Switch from './components/switch';
|
|
46
|
-
import ChipBar from './components/tabLayout/chipBar';
|
|
47
|
-
import TabBar from './components/tabLayout/tabBar';
|
|
48
|
-
import BillerList from './components/table/listTable/biller';
|
|
49
|
-
import BillerProductList from './components/table/listTable/product/billerproduct';
|
|
50
|
-
import InternalProductList from './components/table/listTable/product/internalproduct';
|
|
51
|
-
import ReportList from './components/table/listTable/report/businessadmin';
|
|
52
|
-
import ReportListClient from './components/table/listTable/report/clientadmin';
|
|
53
|
-
import Pagination from './components/table/pagination';
|
|
54
|
-
import TextInput from './components/textinput';
|
|
55
|
-
import HeaderTable from './components/table/headerTable';
|
|
56
|
-
import BillingList from './components/table/listTable/billing';
|
|
57
|
-
import ModalBilling from './components/modal/modalBilling';
|
|
58
|
-
import LimitList from './components/table/listTable/limit';
|
|
59
|
-
import ModalLimit from './components/modal/modalLimit';
|
|
60
|
-
import VerticalStepBar from './components/verticalstepbar';
|
|
61
|
-
import DepositList from './components/table/listTable/deposit';
|
|
62
|
-
import ModalDeposit from './components/modal/modalDeposit';
|
|
63
|
-
import CellModelOne from './components/table/listTable/cellmodelone';
|
|
64
|
-
import SearchDropdown from './components/searchdropdown';
|
|
65
|
-
import FilterDropdown from './components/filter/filterDropdown';
|
|
66
|
-
import Footer from './components/footer';
|
|
19
|
+
// import './index.css';
|
|
20
|
+
// import Alert from './components/alert'
|
|
21
|
+
// import DangerButton from './components/button/dangerbutton'
|
|
22
|
+
// import OutlineButton from './components/button/outlinebutton'
|
|
23
|
+
// import PrimaryButton from './components/button/primarybutton'
|
|
24
|
+
// import CardInternalProduct from './components/card';
|
|
25
|
+
// import Chip from './components/chip'
|
|
26
|
+
// import CustomDatePicker from './components/datepicker';
|
|
27
|
+
// import Description from './components/description';
|
|
28
|
+
// import DropdownCard from './components/dropdown/dropdownCard';
|
|
29
|
+
// import DropdownChip from './components/dropdown/dropdownChip';
|
|
30
|
+
// import DropdownText from './components/dropdown/dropdownText';
|
|
31
|
+
// import DropzoneUploadFile from './components/dropzone/uploadfile';
|
|
32
|
+
// import DropzoneUploadPhoto from './components/dropzone/uploadphoto';
|
|
33
|
+
// import EmptyData from './components/emptystate/table/emptydata';
|
|
34
|
+
// import NotFound from './components/emptystate/table/notfound';
|
|
35
|
+
// import ExportToExcel from './components/export/excel';
|
|
36
|
+
// import FilterCheckbox from './components/filter/filterCheckbox';
|
|
37
|
+
// import FilterText from './components/filter/filterText';
|
|
38
|
+
// import Menu from './components/menu';
|
|
39
|
+
// import ModalLoading from './components/modal/modalLoading';
|
|
40
|
+
// import ModalResult from './components/modal/modalResult';
|
|
41
|
+
// import ModalState from './components/modal/modalState';
|
|
42
|
+
// import Notification from './components/notification';
|
|
43
|
+
// import SearchInput from './components/searchinput';
|
|
44
|
+
// import Stepper from './components/stepper';
|
|
45
|
+
// import Switch from './components/switch';
|
|
46
|
+
// import ChipBar from './components/tabLayout/chipBar';
|
|
47
|
+
// import TabBar from './components/tabLayout/tabBar';
|
|
48
|
+
// import BillerList from './components/table/listTable/biller';
|
|
49
|
+
// import BillerProductList from './components/table/listTable/product/billerproduct';
|
|
50
|
+
// import InternalProductList from './components/table/listTable/product/internalproduct';
|
|
51
|
+
// import ReportList from './components/table/listTable/report/businessadmin';
|
|
52
|
+
// import ReportListClient from './components/table/listTable/report/clientadmin';
|
|
53
|
+
// import Pagination from './components/table/pagination';
|
|
54
|
+
// import TextInput from './components/textinput';
|
|
55
|
+
// import HeaderTable from './components/table/headerTable';
|
|
56
|
+
// import BillingList from './components/table/listTable/billing';
|
|
57
|
+
// import ModalBilling from './components/modal/modalBilling';
|
|
58
|
+
// import LimitList from './components/table/listTable/limit';
|
|
59
|
+
// import ModalLimit from './components/modal/modalLimit';
|
|
60
|
+
// import VerticalStepBar from './components/verticalstepbar';
|
|
61
|
+
// import DepositList from './components/table/listTable/deposit';
|
|
62
|
+
// import ModalDeposit from './components/modal/modalDeposit';
|
|
63
|
+
// import CellModelOne from './components/table/listTable/cellmodelone';
|
|
64
|
+
// import SearchDropdown from './components/searchdropdown';
|
|
65
|
+
// import FilterDropdown from './components/filter/filterDropdown';
|
|
66
|
+
// import Footer from './components/footer';
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
export {Footer, CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
70
|
-
SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
|
|
71
|
-
DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
|
|
69
|
+
// export {Footer, CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
70
|
+
// SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
|
|
71
|
+
// DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
|
package/src/templates/index.js
CHANGED
|
@@ -724,6 +724,16 @@ const Templates = () => {
|
|
|
724
724
|
const [selectedMenuRadioButton, setSelectedMenuRadioButton] = useState(null)
|
|
725
725
|
const [selectedSubmenuRadioButton, setSelectedSubmenuRadioButton] = useState([])
|
|
726
726
|
|
|
727
|
+
const [searchFilter, setSearchFilter] = useState()
|
|
728
|
+
const [filterDropdown, setFilterDropdown] = useState({
|
|
729
|
+
name : "duar",
|
|
730
|
+
value : "dfdsf"
|
|
731
|
+
})
|
|
732
|
+
|
|
733
|
+
const onHandleEnter = () => {
|
|
734
|
+
console.log(searchFilter, filterDropdown)
|
|
735
|
+
}
|
|
736
|
+
|
|
727
737
|
return (
|
|
728
738
|
<div>
|
|
729
739
|
<div className='m-9'></div>
|
|
@@ -1039,20 +1049,32 @@ const Templates = () => {
|
|
|
1039
1049
|
|
|
1040
1050
|
<div className='m-9'></div>
|
|
1041
1051
|
<SearchDropdown
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1052
|
+
options={[
|
|
1053
|
+
{
|
|
1054
|
+
name: "Name 1",
|
|
1055
|
+
value : "Value 1"
|
|
1056
|
+
},
|
|
1057
|
+
{
|
|
1058
|
+
name: "Name 2",
|
|
1059
|
+
value : "Value 2"
|
|
1060
|
+
},
|
|
1061
|
+
]}
|
|
1062
|
+
placeholderSearch='Search Here...'
|
|
1063
|
+
filterDropdown={filterDropdown}
|
|
1064
|
+
setFilterDropdown={setFilterDropdown}
|
|
1065
|
+
filterSearch={searchFilter}
|
|
1066
|
+
setFilterSearch={setSearchFilter}
|
|
1067
|
+
onEnterPress={onHandleEnter}
|
|
1046
1068
|
/>
|
|
1047
1069
|
|
|
1048
1070
|
<div className='m-9'></div>
|
|
1049
1071
|
<p className='text-black font-bold text-2xl text-center py-2'>Stepper</p>
|
|
1050
1072
|
{
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1073
|
+
scenarios.map((scenario, index) => (
|
|
1074
|
+
<div key={index} className='mb-10'>
|
|
1075
|
+
<Stepper data={scenario.data} currentStep={scenario.currentStep} />
|
|
1076
|
+
</div>
|
|
1077
|
+
))
|
|
1056
1078
|
}
|
|
1057
1079
|
|
|
1058
1080
|
<div className='m-9'></div>
|