sprint-asia-custom-component 0.1.40 → 0.1.42

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 CHANGED
@@ -46739,6 +46739,148 @@
46739
46739
  }, "\xA0"))))));
46740
46740
  };
46741
46741
 
46742
+ const CellModelThree = ({
46743
+ Column_One_A,
46744
+ Column_One_B,
46745
+ Column_One_C,
46746
+ Column_One_D,
46747
+ Column_Two_A,
46748
+ Column_Three_A,
46749
+ Column_Four_A,
46750
+ Column_Five_A = "Active",
46751
+ onClickBody
46752
+ }) => {
46753
+ let chipType = "success";
46754
+ let chipTitle = Column_Five_A;
46755
+ switch (Column_Five_A.toLowerCase()) {
46756
+ case "active":
46757
+ chipType = "success";
46758
+ chipTitle = "Active";
46759
+ break;
46760
+ case "waiting":
46761
+ chipType = "primary";
46762
+ chipTitle = "Waiting";
46763
+ break;
46764
+ case "inactive":
46765
+ chipType = "neutral";
46766
+ chipTitle = "Inactive";
46767
+ break;
46768
+ }
46769
+ return /*#__PURE__*/React__default["default"].createElement("tr", {
46770
+ className: `bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`
46771
+ }, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
46772
+ className: "flex items-center",
46773
+ onClick: () => {
46774
+ if (onClickBody != undefined) {
46775
+ onClickBody();
46776
+ }
46777
+ }
46778
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
46779
+ className: "py-3.5 px-4"
46780
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46781
+ className: "font-semibold text-black text-sm"
46782
+ }, Column_One_A ? Column_One_A : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
46783
+ className: "font-normal text-neutral300 text-sm"
46784
+ }, Column_One_B ? Column_One_B : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
46785
+ className: "font-normal text-neutral300 text-sm"
46786
+ }, Column_One_C ? Column_One_C : "-"), /*#__PURE__*/React__default["default"].createElement("p", {
46787
+ className: "font-normal text-neutral300 text-sm"
46788
+ }, Column_One_D ? Column_One_D : "-")))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
46789
+ className: "flex items-center",
46790
+ onClick: () => {
46791
+ if (onClickBody != undefined) {
46792
+ onClickBody();
46793
+ }
46794
+ }
46795
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
46796
+ className: "py-3.5 px-4"
46797
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46798
+ className: "font-semibold text-black text-sm"
46799
+ }, Column_Two_A ? Column_Two_A : "-"), /*#__PURE__*/React__default["default"].createElement("div", {
46800
+ className: "flex items-center pt-1"
46801
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46802
+ className: "font-normal text-neutral500 text-sm"
46803
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46804
+ className: "flex items-center pt-1"
46805
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46806
+ className: "font-normal text-neutral500 text-sm"
46807
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46808
+ className: "flex items-center pt-1"
46809
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46810
+ className: "font-normal text-neutral500 text-sm"
46811
+ }, "\xA0"))))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
46812
+ className: "flex items-center",
46813
+ onClick: () => {
46814
+ if (onClickBody != undefined) {
46815
+ onClickBody();
46816
+ }
46817
+ }
46818
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
46819
+ className: "py-3.5 px-4"
46820
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46821
+ className: "font-normal text-black text-sm"
46822
+ }, Column_Three_A ? Column_Three_A : "-"), /*#__PURE__*/React__default["default"].createElement("div", {
46823
+ className: "flex items-center pt-1"
46824
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46825
+ className: "font-normal text-neutral500 text-sm"
46826
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46827
+ className: "flex items-center pt-1"
46828
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46829
+ className: "font-normal text-neutral500 text-sm"
46830
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46831
+ className: "flex items-center pt-1"
46832
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46833
+ className: "font-normal text-neutral500 text-sm"
46834
+ }, "\xA0"))))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
46835
+ className: "flex items-center",
46836
+ onClick: () => {
46837
+ if (onClickBody != undefined) {
46838
+ onClickBody();
46839
+ }
46840
+ }
46841
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
46842
+ className: "py-3.5 px-4"
46843
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46844
+ className: "font-normal text-black text-sm"
46845
+ }, Column_Four_A ? Column_Four_A : "-"), /*#__PURE__*/React__default["default"].createElement("div", {
46846
+ className: "flex items-center pt-1"
46847
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46848
+ className: "font-normal text-neutral500 text-sm"
46849
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46850
+ className: "flex items-center pt-1"
46851
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46852
+ className: "font-normal text-neutral500 text-sm"
46853
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46854
+ className: "flex items-center pt-1"
46855
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46856
+ className: "font-normal text-neutral500 text-sm"
46857
+ }, "\xA0"))))), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
46858
+ className: "flex items-center",
46859
+ onClick: () => {
46860
+ if (onClickBody != undefined) {
46861
+ onClickBody();
46862
+ }
46863
+ }
46864
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
46865
+ className: "py-3.5 px-4"
46866
+ }, /*#__PURE__*/React__default["default"].createElement(Chip, {
46867
+ type: chipType,
46868
+ title: chipTitle
46869
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
46870
+ className: "flex items-center pt-1"
46871
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46872
+ className: "font-normal text-neutral500 text-sm"
46873
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46874
+ className: "flex items-center pt-1"
46875
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46876
+ className: "font-normal text-neutral500 text-sm"
46877
+ }, "\xA0")), /*#__PURE__*/React__default["default"].createElement("div", {
46878
+ className: "flex items-center pt-1"
46879
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
46880
+ className: "font-normal text-neutral500 text-sm"
46881
+ }, "\xA0"))))));
46882
+ };
46883
+
46742
46884
  const SearchDropdown = ({
46743
46885
  options = [{
46744
46886
  option: "Name 1",
@@ -47018,7 +47160,6 @@
47018
47160
  const [isNotificationContentVisible, setNotificationContentVisible] = React.useState(false);
47019
47161
  const modalRefProfile = React.useRef(null);
47020
47162
  const modalRefNotification = React.useRef(null);
47021
- const navigateTo = useNavigate();
47022
47163
  function toggleProfileContent() {
47023
47164
  setProfileContentVisible(!isProfileContentVisible);
47024
47165
  setNotificationContentVisible(false);
@@ -47063,12 +47204,12 @@
47063
47204
  className: "absolute right-20 top-16 z-50"
47064
47205
  }, dataNotification.length !== 0 && /*#__PURE__*/React__default["default"].createElement("div", {
47065
47206
  className: "z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md"
47066
- }, dataNotification.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
47207
+ }, dataNotification.map((value, index) => /*#__PURE__*/React__default["default"].createElement("a", {
47067
47208
  key: index,
47068
47209
  className: `px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
47069
47210
  ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : ""}
47070
47211
  `,
47071
- onClick: () => navigateTo(value.navigate)
47212
+ href: `${value.navigate}`
47072
47213
  }, /*#__PURE__*/React__default["default"].createElement("p", {
47073
47214
  className: "text-sm"
47074
47215
  }, value)))))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -47090,12 +47231,12 @@
47090
47231
  className: "absolute right-0 top-16 z-50"
47091
47232
  }, dataProfile.length !== 0 && /*#__PURE__*/React__default["default"].createElement("div", {
47092
47233
  className: "z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md"
47093
- }, dataProfile.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
47234
+ }, dataProfile.map((value, index) => /*#__PURE__*/React__default["default"].createElement("a", {
47094
47235
  key: index,
47095
47236
  className: `px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
47096
47237
  ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : ""}
47097
47238
  `,
47098
- onClick: () => navigateTo(value.navigate)
47239
+ href: `${value.navigate}`
47099
47240
  }, /*#__PURE__*/React__default["default"].createElement(value.logo, {
47100
47241
  size: 16,
47101
47242
  className: "text-neutral300 mr-2"
@@ -47110,6 +47251,7 @@
47110
47251
  exports.BillingList = BillingList;
47111
47252
  exports.CardInternalProduct = CardInternalProduct;
47112
47253
  exports.CellModelOne = CellModelOne;
47254
+ exports.CellModelThree = CellModelThree;
47113
47255
  exports.CellModelTwo = CellModelTwo;
47114
47256
  exports.Chip = Chip;
47115
47257
  exports.ChipBar = ChipBar;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sprint-asia-custom-component",
3
3
  "main": "dist/index.js",
4
- "version": "0.1.40",
4
+ "version": "0.1.42",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
@@ -1,7 +1,6 @@
1
- import React, {useState, useEffect, useRef} from 'react'
1
+ import React, {useState, useRef} from 'react'
2
2
  import Profile from '../../assets/images/profile.png';
3
3
  import { PiDoorOpenDuotone, PiUserCircleDuotone, PiBellDuotone,PiWalletDuotone } from 'react-icons/pi';
4
- import { useNavigate } from 'react-router-dom';
5
4
 
6
5
  const Header = ({
7
6
  title = "Label",
@@ -20,7 +19,6 @@ const Header = ({
20
19
  const [isNotificationContentVisible, setNotificationContentVisible] = useState(false);
21
20
  const modalRefProfile = useRef(null);
22
21
  const modalRefNotification = useRef(null);
23
- const navigateTo = useNavigate()
24
22
 
25
23
  function toggleProfileContent() {
26
24
  setProfileContentVisible(!isProfileContentVisible)
@@ -64,7 +62,7 @@ const Header = ({
64
62
  {dataNotification.length !== 0 && (
65
63
  <div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
66
64
  {dataNotification.map((value, index) => (
67
- <div
65
+ <a
68
66
  key={index}
69
67
  className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
70
68
  ${dataProfile.length == 1 ?
@@ -78,10 +76,10 @@ const Header = ({
78
76
  : ""
79
77
  }
80
78
  `}
81
- onClick={() => navigateTo(value.navigate)}
79
+ href={`${value.navigate}`}
82
80
  >
83
81
  <p className='text-sm'>{value}</p>
84
- </div>
82
+ </a>
85
83
  ))}
86
84
  </div>
87
85
  )}
@@ -102,7 +100,7 @@ const Header = ({
102
100
  {dataProfile.length !== 0 && (
103
101
  <div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
104
102
  {dataProfile.map((value, index) => (
105
- <div
103
+ <a
106
104
  key={index}
107
105
  className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
108
106
  ${dataProfile.length == 1 ?
@@ -116,11 +114,11 @@ const Header = ({
116
114
  : ""
117
115
  }
118
116
  `}
119
- onClick={() => navigateTo(value.navigate)}
117
+ href={`${value.navigate}`}
120
118
  >
121
119
  <value.logo size={16} className='text-neutral300 mr-2' />
122
120
  <p className='text-sm'>{value.title}</p>
123
- </div>
121
+ </a>
124
122
  ))}
125
123
  </div>
126
124
  )}
@@ -0,0 +1,151 @@
1
+ import React from 'react'
2
+ import Chip from '../../../chip'
3
+
4
+ const CellModelThree = ({
5
+ Column_One_A,
6
+ Column_One_B,
7
+ Column_One_C,
8
+ Column_One_D,
9
+ Column_Two_A,
10
+ Column_Three_A,
11
+ Column_Four_A,
12
+ Column_Five_A = "Active",
13
+ onClickBody,
14
+ }) => {
15
+ let chipType = "success";
16
+ let chipTitle = Column_Five_A;
17
+
18
+ switch (Column_Five_A.toLowerCase()) {
19
+ case "active":
20
+ chipType = "success";
21
+ chipTitle = "Active";
22
+ break;
23
+ case "waiting":
24
+ chipType = "primary";
25
+ chipTitle = "Waiting";
26
+ break;
27
+ case "inactive":
28
+ chipType = "neutral";
29
+ chipTitle = "Inactive";
30
+ break;
31
+ }
32
+ return (
33
+ <tr
34
+ className={`bg-white hover:bg-neutral20 border-t border-neutral40 ${onClickBody != undefined && "cursor-pointer"}`}
35
+ >
36
+ <td>
37
+ <div className='flex items-center'
38
+ onClick={
39
+ () => {
40
+ if (onClickBody != undefined) {
41
+ onClickBody()
42
+ }
43
+ }
44
+ }>
45
+ <div className= "py-3.5 px-4">
46
+ <p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
47
+ <p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
48
+ <p className='font-normal text-neutral300 text-sm'>{Column_One_C ? Column_One_C : "-"}</p>
49
+ <p className='font-normal text-neutral300 text-sm'>{Column_One_D ? Column_One_D : "-"}</p>
50
+ </div>
51
+ </div>
52
+ </td>
53
+ <td>
54
+ <div className='flex items-center'
55
+ onClick={
56
+ () => {
57
+ if (onClickBody != undefined) {
58
+ onClickBody()
59
+ }
60
+ }
61
+ }>
62
+ <div className= "py-3.5 px-4">
63
+ <p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
64
+ <div className='flex items-center pt-1'>
65
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
66
+ </div>
67
+ <div className='flex items-center pt-1'>
68
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
69
+ </div>
70
+ <div className='flex items-center pt-1'>
71
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </td>
76
+ <td>
77
+ <div className='flex items-center'
78
+ onClick={
79
+ () => {
80
+ if (onClickBody != undefined) {
81
+ onClickBody()
82
+ }
83
+ }
84
+ }>
85
+ <div className= "py-3.5 px-4">
86
+ <p className='font-normal text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
87
+ <div className='flex items-center pt-1'>
88
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
89
+ </div>
90
+ <div className='flex items-center pt-1'>
91
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
92
+ </div>
93
+ <div className='flex items-center pt-1'>
94
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </td>
99
+ <td>
100
+ <div className='flex items-center'
101
+ onClick={
102
+ () => {
103
+ if (onClickBody != undefined) {
104
+ onClickBody()
105
+ }
106
+ }
107
+ }>
108
+ <div className= "py-3.5 px-4">
109
+ <p className='font-normal text-black text-sm'>{Column_Four_A ? Column_Four_A : "-"}</p>
110
+ <div className='flex items-center pt-1'>
111
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
112
+ </div>
113
+ <div className='flex items-center pt-1'>
114
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
115
+ </div>
116
+ <div className='flex items-center pt-1'>
117
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </td>
122
+ <td>
123
+ <div className='flex items-center'
124
+ onClick={
125
+ () => {
126
+ if (onClickBody != undefined) {
127
+ onClickBody()
128
+ }
129
+ }
130
+ }>
131
+ <div className= "py-3.5 px-4">
132
+ <Chip
133
+ type={chipType}
134
+ title={chipTitle}/>
135
+ <div className='flex items-center pt-1'>
136
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
137
+ </div>
138
+ <div className='flex items-center pt-1'>
139
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
140
+ </div>
141
+ <div className='flex items-center pt-1'>
142
+ <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </td>
147
+ </tr>
148
+ )
149
+ }
150
+
151
+ export default CellModelThree
package/src/index.js CHANGED
@@ -62,12 +62,13 @@ import DepositList from './components/table/listTable/deposit';
62
62
  import ModalDeposit from './components/modal/modalDeposit';
63
63
  import CellModelOne from './components/table/listTable/cellmodelone';
64
64
  import CellModelTwo from './components/table/listTable/cellmodeltwo';
65
+ import CellModelThree from './components/table/listTable/cellmodelthree';
65
66
  import SearchDropdown from './components/searchdropdown';
66
67
  import FilterDropdown from './components/filter/filterDropdown';
67
68
  import Footer from './components/footer';
68
69
  import Header from './components/header';
69
70
 
70
71
 
71
- export {Header, Footer, CellModelOne, CellModelTwo, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
72
+ export {Header, Footer, CellModelOne, CellModelTwo, CellModelThree, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
72
73
  SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
73
74
  DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
@@ -53,6 +53,7 @@ import CellModelOne from '../components/table/listTable/cellmodelone';
53
53
  import FilterDropdown from '../components/filter/filterDropdown';
54
54
  import Header from '../components/header';
55
55
  import CellModelTwo from '../components/table/listTable/cellmodeltwo';
56
+ import CellModelThree from '../components/table/listTable/cellmodelthree';
56
57
 
57
58
 
58
59
  const Templates = () => {
@@ -1280,6 +1281,19 @@ const Templates = () => {
1280
1281
  </tbody>
1281
1282
  </table>
1282
1283
 
1284
+
1285
+ <table className='w-full text-left'>
1286
+ <HeaderTable dataHeader={["Column One", "Column Two", "Column Three", "Column Four", "Column Five"]} />
1287
+ <tbody>
1288
+ asdasdas
1289
+ {
1290
+ internalProducts.map((product, index) => (
1291
+ <CellModelThree />
1292
+ ))
1293
+ }
1294
+ </tbody>
1295
+ </table>
1296
+
1283
1297
  <div className='m-9'></div>
1284
1298
  <p className='text-black font-bold text-2xl text-center py-2'>Report</p>
1285
1299
  <ReportList {...reportData} />