react-core-ts 2.0.3 → 2.0.5
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/ReactAutoComplete.d.ts +4 -4
- package/dist/ReactAutoComplete.js +101 -99
- package/dist/ReactAutoComplete.js.map +1 -1
- package/dist/styles/styles/components/autocomplete.css +744 -0
- package/dist/styles/styles/components/selectedautocomplete.css +179 -0
- package/dist/styles/styles/components/tooltip.css +497 -0
- package/dist/styles/styles/components/treedropdown.css +97 -0
- package/dist/styles/styles/global.css +8 -0
- package/docs/App.tsx +158 -160
- package/package.json +1 -1
- package/src/ReactAutoComplete.tsx +138 -135
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
.qbs-tree-list-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
}
|
|
5
|
+
.qbs-tree-list-container-sub {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: row;
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
gap: 7px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.qbs-tree-list-container-sub .no-children {
|
|
13
|
+
margin-left: 1.75rem; /* Corresponds to ml-7 in Tailwind */
|
|
14
|
+
}
|
|
15
|
+
.qbs-tree-list-container-sub-icon {
|
|
16
|
+
margin-top: 0.25rem; /* Corresponds to mt-1 in Tailwind */
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
padding-top: 0.5rem; /* Corresponds to py-2 in Tailwind */
|
|
19
|
+
padding-bottom: 0.5rem;
|
|
20
|
+
transition: transform 0.3s ease; /* Smooth rotation transition */
|
|
21
|
+
color: #003c71;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.qbs-tree-list-container-sub-icon.expanded {
|
|
25
|
+
transform: rotate(90deg); /* Corresponds to rotate-90 in Tailwind */
|
|
26
|
+
}
|
|
27
|
+
.qbs-tree-list-container-sub-container {
|
|
28
|
+
display: flex;
|
|
29
|
+
gap: 15px; /* Corresponds to gap-2 in Tailwind */
|
|
30
|
+
padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
|
|
31
|
+
flex-direction: row; /* Corresponds to flex-row in Tailwind */
|
|
32
|
+
width: 100%; /* Corresponds to w-full in Tailwind */
|
|
33
|
+
color: #3d414a;
|
|
34
|
+
}
|
|
35
|
+
.qbs-tree-list-container-sub-container-hideicon {
|
|
36
|
+
display: flex;
|
|
37
|
+
gap: 6px; /* Corresponds to gap-2 in Tailwind */
|
|
38
|
+
padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
|
|
39
|
+
flex-direction: row; /* Corresponds to flex-row in Tailwind */
|
|
40
|
+
width: 100%; /* Corresponds to w-full in Tailwind */
|
|
41
|
+
color: #3d414a;
|
|
42
|
+
}
|
|
43
|
+
.qbs-tree-list-container-sub-container-hideicon:hover {
|
|
44
|
+
color: #003c71;
|
|
45
|
+
background-color: rgba(141, 194, 240, 0.15) !important;
|
|
46
|
+
}
|
|
47
|
+
.qbs-tree-list-container-sub-container:hover {
|
|
48
|
+
color: #003c71;
|
|
49
|
+
background-color: rgba(141, 194, 240, 0.15) !important;
|
|
50
|
+
}
|
|
51
|
+
.qbs-tree-list-container-sub-container.qbs-expanded-child {
|
|
52
|
+
color: #003c71;
|
|
53
|
+
}
|
|
54
|
+
.qbs-tree-list-container-sub-text.qbs-expanded-child {
|
|
55
|
+
color: #003c71;
|
|
56
|
+
}
|
|
57
|
+
.qbs-tree-list-container-sub-text:hover {
|
|
58
|
+
color: #003c71;
|
|
59
|
+
/* background-color: rgba(141, 194, 240, 0.15) !important; */
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.qbs-tree-list-container-sub-container.checked,
|
|
63
|
+
.qbs-tree-list-container-sub-container-hideicon.checked {
|
|
64
|
+
color: #003c71;
|
|
65
|
+
background-color: rgba(
|
|
66
|
+
141,
|
|
67
|
+
194,
|
|
68
|
+
240,
|
|
69
|
+
0.15
|
|
70
|
+
) !important; /* Corresponds to bg-green-200 in Tailwind */
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.marginLeft {
|
|
74
|
+
margin-left: 28px; /* Corresponds to ml-2 in Tailwind */
|
|
75
|
+
}
|
|
76
|
+
.lightmarginLeft {
|
|
77
|
+
margin-left: 19px; /* Corresponds to ml-2 in Tailwind */
|
|
78
|
+
}
|
|
79
|
+
.qbs-tree-list-container-sub- {
|
|
80
|
+
line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
|
|
81
|
+
font-size: 0.875rem; /* Corresponds to text-sm in Tailwind (14px) */
|
|
82
|
+
}
|
|
83
|
+
.qbs-tree-list-container-child {
|
|
84
|
+
margin-left: 1rem; /* Corresponds to ml-4 in Tailwind */
|
|
85
|
+
margin-top: 0.5rem; /* Corresponds to mt-2 in Tailwind */
|
|
86
|
+
display: flex; /* Corresponds to flex in Tailwind */
|
|
87
|
+
flex-direction: column; /* Corresponds to flex-col in Tailwind */
|
|
88
|
+
gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
|
|
89
|
+
}
|
|
90
|
+
.qbs-tree-list-container-sub-text {
|
|
91
|
+
line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
|
|
92
|
+
font-size: 14px; /* Corresponds to text-sm in Tailwind (14px) */
|
|
93
|
+
font-weight: 500;
|
|
94
|
+
letter-spacing: 0.28px;
|
|
95
|
+
font-family: 'Noto Sans';
|
|
96
|
+
/* color: #3d414a; */
|
|
97
|
+
}
|
package/docs/App.tsx
CHANGED
|
@@ -1,21 +1,12 @@
|
|
|
1
|
-
import React, { useState } from
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
ExpandableAutoComplete,
|
|
9
|
-
ModernAutoComplete,
|
|
10
|
-
ModernAutoCompleteDropdown,
|
|
11
|
-
ModernTextField,
|
|
12
|
-
} from '../src/index';
|
|
13
|
-
import ModernTextArea from '../src/ReactTextArea';
|
|
14
|
-
import TextField from '../src/ReactTextField';
|
|
15
|
-
import { ValueProps } from '../src/commontypes';
|
|
16
|
-
import { treeDropData } from './store';
|
|
3
|
+
import { ValueProps } from "../src/commontypes";
|
|
4
|
+
import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTabFilter, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete, ModernAutoCompleteDropdown, ModernTextField } from "../src/index";
|
|
5
|
+
import ModernTextArea from "../src/ReactTextArea";
|
|
6
|
+
import TextField from "../src/ReactTextField";
|
|
7
|
+
import { treeDropData } from "./store";
|
|
17
8
|
|
|
18
|
-
import
|
|
9
|
+
import "../src/styles/global.css";
|
|
19
10
|
|
|
20
11
|
export default function App() {
|
|
21
12
|
const [dropData, setDropData] = useState();
|
|
@@ -24,9 +15,8 @@ export default function App() {
|
|
|
24
15
|
const [selectedTabItems, setSelectedTabItems] = useState<ValueProps[]>([]);
|
|
25
16
|
const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
|
|
26
17
|
|
|
27
|
-
|
|
28
18
|
const getData = (keyName?: string, next?: number) => {
|
|
29
|
-
console.log(keyName,
|
|
19
|
+
console.log(keyName, "keyName");
|
|
30
20
|
return fetch(
|
|
31
21
|
keyName
|
|
32
22
|
? `https://jsonplaceholder.typicode.com/posts?_page=${next}&_limit=10&title_like=${keyName}`
|
|
@@ -36,7 +26,7 @@ export default function App() {
|
|
|
36
26
|
.then((res) => {
|
|
37
27
|
setNexBlock(nexBlock + 1);
|
|
38
28
|
const result = res.map((item: any) => {
|
|
39
|
-
return { ...item, [
|
|
29
|
+
return { ...item, ["name"]: item?.title, id: item?.id.toString() };
|
|
40
30
|
});
|
|
41
31
|
return result;
|
|
42
32
|
});
|
|
@@ -45,7 +35,7 @@ export default function App() {
|
|
|
45
35
|
return fetch(
|
|
46
36
|
keyName
|
|
47
37
|
? `https://jsonplaceholder.typicode.com/posts?title_like=${
|
|
48
|
-
keyName ===
|
|
38
|
+
keyName === "*" ? "" : keyName
|
|
49
39
|
}`
|
|
50
40
|
: `https://jsonplaceholder.typicode.com/posts`
|
|
51
41
|
)
|
|
@@ -53,7 +43,7 @@ export default function App() {
|
|
|
53
43
|
.then((res) => {
|
|
54
44
|
setPrev(prev + 1);
|
|
55
45
|
const result = res.map((item: any) => {
|
|
56
|
-
return { ...item, [
|
|
46
|
+
return { ...item, ["name"]: item?.title, id: item?.id.toString() };
|
|
57
47
|
});
|
|
58
48
|
return result;
|
|
59
49
|
});
|
|
@@ -74,7 +64,11 @@ export default function App() {
|
|
|
74
64
|
.then((res) => {
|
|
75
65
|
setNexBlock(nexBlock + 1);
|
|
76
66
|
const result = res.map((item: any) => {
|
|
77
|
-
return {
|
|
67
|
+
return {
|
|
68
|
+
...item,
|
|
69
|
+
["name"]: item?.title + " - " + tab?.toString(),
|
|
70
|
+
id: `${item?.id.toString()}-${tab?.toString()}`,
|
|
71
|
+
};
|
|
78
72
|
});
|
|
79
73
|
return result;
|
|
80
74
|
});
|
|
@@ -83,98 +77,107 @@ export default function App() {
|
|
|
83
77
|
<React.Fragment>
|
|
84
78
|
<div
|
|
85
79
|
style={{
|
|
86
|
-
display:
|
|
87
|
-
flexDirection:
|
|
88
|
-
alignItems:
|
|
89
|
-
justifyContent:
|
|
80
|
+
display: "flex",
|
|
81
|
+
flexDirection: "column",
|
|
82
|
+
alignItems: "center",
|
|
83
|
+
justifyContent: "center",
|
|
90
84
|
}}
|
|
91
85
|
>
|
|
92
86
|
<div
|
|
93
87
|
style={{
|
|
94
|
-
display:
|
|
95
|
-
flexDirection:
|
|
88
|
+
display: "flex",
|
|
89
|
+
flexDirection: "column",
|
|
96
90
|
gap: 20,
|
|
97
91
|
padding: 20,
|
|
98
|
-
maxWidth:
|
|
92
|
+
maxWidth: "75%",
|
|
99
93
|
|
|
100
|
-
overflowY:
|
|
94
|
+
overflowY: "scroll",
|
|
101
95
|
}}
|
|
102
96
|
>
|
|
103
|
-
|
|
104
97
|
<div style={{ width: 500 }}>
|
|
105
98
|
<AutoCompleteWithTabFilter
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
99
|
+
label="Auto Suggestion With Data"
|
|
100
|
+
name="sample"
|
|
101
|
+
type="auto_suggestion"
|
|
102
|
+
async={true}
|
|
103
|
+
typeOnlyFetch={true}
|
|
104
|
+
desc="name"
|
|
105
|
+
isMultiple={true}
|
|
106
|
+
singleSelect={false}
|
|
107
|
+
descId="id"
|
|
108
|
+
getData={getData}
|
|
109
|
+
paginationEnabled={false}
|
|
110
|
+
initialLoad={false}
|
|
111
|
+
itemCount={3}
|
|
112
|
+
placeholder="Auto Suggestion"
|
|
113
|
+
selectedItems={selectedItems}
|
|
114
|
+
onChange={(e) =>
|
|
115
|
+
setSelectedItems(Array.isArray(e) ? e : e ? [e] : [])
|
|
116
|
+
}
|
|
117
|
+
tabSelectedItems={selectedTabItems}
|
|
118
|
+
getTabData={getDataWithTab}
|
|
119
|
+
onToolTabChange={(value) =>
|
|
120
|
+
setSelectedTabItems(
|
|
121
|
+
Array.isArray(value) ? value : value ? [value] : []
|
|
122
|
+
)
|
|
123
|
+
}
|
|
124
|
+
countOnly={true}
|
|
125
|
+
toolTabClearSwitch={false}
|
|
126
|
+
enableToolsTab={true}
|
|
127
|
+
toolTabs={[
|
|
128
|
+
{ id: 1, label: "Tab 1" },
|
|
129
|
+
{ id: 2, label: "Tab 2" },
|
|
130
|
+
]}
|
|
131
|
+
tabName="sample"
|
|
132
|
+
tabDesc="name"
|
|
133
|
+
tabDescId="id"
|
|
134
|
+
enableSelectAll={true}
|
|
135
|
+
autoDropdown={true}
|
|
136
|
+
/>
|
|
139
137
|
</div>
|
|
140
138
|
|
|
141
139
|
<div style={{ width: 500 }}>
|
|
142
140
|
<AutoCompleteWithTabFilter
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
141
|
+
label="Inline Auto Suggestion With Data"
|
|
142
|
+
name="sample"
|
|
143
|
+
type="auto_suggestion"
|
|
144
|
+
async={true}
|
|
145
|
+
typeOnlyFetch={true}
|
|
146
|
+
desc="name"
|
|
147
|
+
isMultiple={true}
|
|
148
|
+
singleSelect={false}
|
|
149
|
+
descId="id"
|
|
150
|
+
getData={getData}
|
|
151
|
+
paginationEnabled={false}
|
|
152
|
+
initialLoad={false}
|
|
153
|
+
itemCount={3}
|
|
154
|
+
placeholder="Auto Suggestion"
|
|
155
|
+
selectedItems={selectedItems}
|
|
156
|
+
onChange={(e) =>
|
|
157
|
+
setSelectedItems(Array.isArray(e) ? e : e ? [e] : [])
|
|
158
|
+
}
|
|
159
|
+
tabSelectedItems={selectedTabItems}
|
|
160
|
+
getTabData={getDataWithTab}
|
|
161
|
+
onToolTabChange={(value) =>
|
|
162
|
+
setSelectedTabItems(
|
|
163
|
+
Array.isArray(value) ? value : value ? [value] : []
|
|
164
|
+
)
|
|
165
|
+
}
|
|
166
|
+
countOnly={true}
|
|
167
|
+
toolTabClearSwitch={false}
|
|
168
|
+
enableToolsTab={true}
|
|
169
|
+
toolTabs={[
|
|
170
|
+
{ id: 1, label: "Tab 1" },
|
|
171
|
+
{ id: 2, label: "Tab 2" },
|
|
172
|
+
]}
|
|
173
|
+
tabName="sample"
|
|
174
|
+
tabDesc="name"
|
|
175
|
+
tabDescId="id"
|
|
176
|
+
enableSelectAll={true}
|
|
177
|
+
autoDropdown={true}
|
|
178
|
+
tabInlineSearch={false}
|
|
179
|
+
//autoTabSelectAll={false}
|
|
180
|
+
/>
|
|
178
181
|
</div>
|
|
179
182
|
|
|
180
183
|
<div style={{ width: 300 }}>
|
|
@@ -182,12 +185,12 @@ export default function App() {
|
|
|
182
185
|
name="sample"
|
|
183
186
|
label="TextField Enable Search"
|
|
184
187
|
id="id"
|
|
185
|
-
type="text"
|
|
188
|
+
type="text"
|
|
186
189
|
placeholder="TextField"
|
|
187
190
|
required
|
|
188
|
-
onChange={(e) => console.log(e,
|
|
191
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
189
192
|
enableSearch={true}
|
|
190
|
-
onSearchClick={(value) => console.log(value,
|
|
193
|
+
onSearchClick={(value) => console.log(value, "onSearchClick")}
|
|
191
194
|
/>
|
|
192
195
|
</div>
|
|
193
196
|
|
|
@@ -201,7 +204,7 @@ export default function App() {
|
|
|
201
204
|
placeholder="TextField"
|
|
202
205
|
required
|
|
203
206
|
getData={getDatas}
|
|
204
|
-
onChange={(e) => console.log(e,
|
|
207
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
205
208
|
shortCode="id"
|
|
206
209
|
labelCode="userId"
|
|
207
210
|
/>
|
|
@@ -216,7 +219,7 @@ export default function App() {
|
|
|
216
219
|
placeholder="TextField"
|
|
217
220
|
required
|
|
218
221
|
getData={getDatas}
|
|
219
|
-
onChange={(e) => console.log(e,
|
|
222
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
220
223
|
/>
|
|
221
224
|
</div>
|
|
222
225
|
|
|
@@ -249,7 +252,7 @@ export default function App() {
|
|
|
249
252
|
placeholder="Auto Suggestion"
|
|
250
253
|
selectedItems={[]}
|
|
251
254
|
getData={getData}
|
|
252
|
-
onChange={(e) => console.log(e,
|
|
255
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
253
256
|
/>
|
|
254
257
|
</div>
|
|
255
258
|
<div className="autocomplete-section">
|
|
@@ -271,7 +274,7 @@ export default function App() {
|
|
|
271
274
|
singleSelect={true}
|
|
272
275
|
expandable={true}
|
|
273
276
|
isTreeDropdown={true}
|
|
274
|
-
filterCondition={{ filterKey:
|
|
277
|
+
filterCondition={{ filterKey: "id", filterValue: 22 }}
|
|
275
278
|
descId="id"
|
|
276
279
|
data={treeDropData}
|
|
277
280
|
paginationEnabled={false}
|
|
@@ -310,11 +313,11 @@ export default function App() {
|
|
|
310
313
|
placeholder="Auto Suggestion"
|
|
311
314
|
selectedItems={[
|
|
312
315
|
{
|
|
313
|
-
name:
|
|
316
|
+
name: "Port G - A small",
|
|
314
317
|
id: 2,
|
|
315
318
|
},
|
|
316
319
|
]}
|
|
317
|
-
onChange={(e) => console.log(e,
|
|
320
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
318
321
|
countOnly={true}
|
|
319
322
|
/>
|
|
320
323
|
</div>
|
|
@@ -332,7 +335,7 @@ export default function App() {
|
|
|
332
335
|
itemCount={3}
|
|
333
336
|
placeholder="Auto Suggestion"
|
|
334
337
|
selectedItems={[]}
|
|
335
|
-
onChange={(e) => console.log(e,
|
|
338
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
336
339
|
countOnly={true}
|
|
337
340
|
enableSelectAll={true}
|
|
338
341
|
autoDropdown={true}
|
|
@@ -353,14 +356,13 @@ export default function App() {
|
|
|
353
356
|
itemCount={3}
|
|
354
357
|
placeholder="Auto Suggestion"
|
|
355
358
|
selectedItems={[]}
|
|
356
|
-
onChange={(e) => console.log(e,
|
|
359
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
357
360
|
countOnly={true}
|
|
358
361
|
enableSelectAll={true}
|
|
359
362
|
autoDropdown={true}
|
|
360
363
|
tabInlineSearch={false}
|
|
361
364
|
/>
|
|
362
365
|
</div>
|
|
363
|
-
|
|
364
366
|
|
|
365
367
|
<div style={{ width: 300 }}>
|
|
366
368
|
<AutoCompleteWithSelectedList
|
|
@@ -376,17 +378,19 @@ export default function App() {
|
|
|
376
378
|
itemCount={3}
|
|
377
379
|
placeholder="Auto Suggestion"
|
|
378
380
|
selectedItems={[]}
|
|
379
|
-
onChange={(e) => console.log(e,
|
|
381
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
380
382
|
countOnly={true}
|
|
381
383
|
tab={[
|
|
382
|
-
{ id: 1, label:
|
|
383
|
-
{ id: 2, label:
|
|
384
|
+
{ id: 1, label: "Tab 1" },
|
|
385
|
+
{ id: 2, label: "Tab 2" },
|
|
384
386
|
]}
|
|
385
387
|
clearTabSwitch={true}
|
|
386
388
|
tabInlineSearch={false}
|
|
387
|
-
|
|
388
|
-
searchValue=
|
|
389
|
-
onSearchValueChange={(value) =>
|
|
389
|
+
// autoDropdown={true}
|
|
390
|
+
searchValue="Hello"
|
|
391
|
+
onSearchValueChange={(value) =>
|
|
392
|
+
console.log(value, "onSearchValueChange")
|
|
393
|
+
}
|
|
390
394
|
/>
|
|
391
395
|
</div>
|
|
392
396
|
|
|
@@ -404,11 +408,11 @@ export default function App() {
|
|
|
404
408
|
itemCount={3}
|
|
405
409
|
placeholder="Auto Suggestion"
|
|
406
410
|
selectedItems={[]}
|
|
407
|
-
onChange={(e) => console.log(e,
|
|
411
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
408
412
|
countOnly={true}
|
|
409
413
|
tab={[
|
|
410
|
-
{ id: 1, label:
|
|
411
|
-
{ id: 2, label:
|
|
414
|
+
{ id: 1, label: "Tab 1" },
|
|
415
|
+
{ id: 2, label: "Tab 2" },
|
|
412
416
|
]}
|
|
413
417
|
clearTabSwitch={true}
|
|
414
418
|
tabInlineSearch={true}
|
|
@@ -430,18 +434,11 @@ export default function App() {
|
|
|
430
434
|
desc="name"
|
|
431
435
|
isMultiple={true}
|
|
432
436
|
selectedItems={[]}
|
|
437
|
+
initialLoad={true}
|
|
433
438
|
descId="id"
|
|
434
439
|
type="custom_select"
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
{ name: 'test1', id: '2' },
|
|
438
|
-
|
|
439
|
-
{ name: 'test2', id: '3' },
|
|
440
|
-
|
|
441
|
-
{ name: 'test3', id: '4' },
|
|
442
|
-
]}
|
|
443
|
-
// getData={getData}
|
|
444
|
-
onChange={() => console.log('onchange')}
|
|
440
|
+
getData={getData}
|
|
441
|
+
onChange={() => console.log("onchange")}
|
|
445
442
|
/>
|
|
446
443
|
</div>
|
|
447
444
|
<div className="autocomplete-section">
|
|
@@ -465,7 +462,7 @@ export default function App() {
|
|
|
465
462
|
placeholder="Auto Complete"
|
|
466
463
|
// data={[{ name: 'test', id: '1' }]}
|
|
467
464
|
getData={getData}
|
|
468
|
-
onChange={() => console.log(
|
|
465
|
+
onChange={() => console.log("onchange")}
|
|
469
466
|
/>
|
|
470
467
|
</div>
|
|
471
468
|
<div style={{ width: 300 }}>
|
|
@@ -479,7 +476,7 @@ export default function App() {
|
|
|
479
476
|
placeholder="Auto Complete"
|
|
480
477
|
// data={[{ name: 'test', id: '1' }]}
|
|
481
478
|
getData={getDatas}
|
|
482
|
-
onChange={() => console.log(
|
|
479
|
+
onChange={() => console.log("onchange")}
|
|
483
480
|
/>
|
|
484
481
|
</div>
|
|
485
482
|
<div className="autocomplete-section">
|
|
@@ -501,18 +498,18 @@ export default function App() {
|
|
|
501
498
|
descId="id"
|
|
502
499
|
type="custom_search_select"
|
|
503
500
|
data={[
|
|
504
|
-
{ name:
|
|
505
|
-
{ name:
|
|
506
|
-
{ name:
|
|
507
|
-
{ name:
|
|
508
|
-
{ name:
|
|
509
|
-
{ name:
|
|
510
|
-
{ name:
|
|
511
|
-
{ name:
|
|
512
|
-
{ name:
|
|
513
|
-
{ name:
|
|
501
|
+
{ name: "Apple", id: "1" },
|
|
502
|
+
{ name: "Banana", id: "2" },
|
|
503
|
+
{ name: "Cherry", id: "3" },
|
|
504
|
+
{ name: "Date", id: "4" },
|
|
505
|
+
{ name: "Fig", id: "5" },
|
|
506
|
+
{ name: "Grape", id: "6" },
|
|
507
|
+
{ name: "Honeydew", id: "7" },
|
|
508
|
+
{ name: "Kiwi", id: "8" },
|
|
509
|
+
{ name: "Lemon", id: "9" },
|
|
510
|
+
{ name: "Mango", id: "10" },
|
|
514
511
|
]}
|
|
515
|
-
onChange={() => console.log(
|
|
512
|
+
onChange={() => console.log("onchange")}
|
|
516
513
|
/>
|
|
517
514
|
</div>
|
|
518
515
|
<div className="autocomplete-section">
|
|
@@ -535,7 +532,7 @@ export default function App() {
|
|
|
535
532
|
placeholder="Auto Suggestion"
|
|
536
533
|
// data={[{ name: 'test', id: '1' }]}
|
|
537
534
|
getData={getData}
|
|
538
|
-
onChange={() => console.log(
|
|
535
|
+
onChange={() => console.log("onchange")}
|
|
539
536
|
/>
|
|
540
537
|
</div>
|
|
541
538
|
<div style={{ width: 300 }}>
|
|
@@ -545,14 +542,15 @@ export default function App() {
|
|
|
545
542
|
type="auto_suggestion"
|
|
546
543
|
required
|
|
547
544
|
desc="name"
|
|
545
|
+
|
|
548
546
|
async
|
|
549
547
|
isMultiple
|
|
550
548
|
descId="id"
|
|
551
549
|
placeholder="Auto Suggestion"
|
|
552
|
-
selectedItems={[{ name:
|
|
550
|
+
selectedItems={[{ name: "test", id: "1" }]}
|
|
553
551
|
// data={[{ name: 'test', id: '1' }]}
|
|
554
552
|
getData={getData}
|
|
555
|
-
onChange={(value) => console.log(value,
|
|
553
|
+
onChange={(value) => console.log(value, "onchange")}
|
|
556
554
|
/>
|
|
557
555
|
</div>
|
|
558
556
|
<div style={{ width: 300 }}>
|
|
@@ -568,9 +566,9 @@ export default function App() {
|
|
|
568
566
|
initialLoad={true}
|
|
569
567
|
// nextBlock={nexBlock}
|
|
570
568
|
placeholder="Auto Suggestion"
|
|
571
|
-
selectedItems={[{ name:
|
|
569
|
+
selectedItems={[{ name: "test", id: "1" }]}
|
|
572
570
|
getData={getData}
|
|
573
|
-
onChange={(e) => console.log(e,
|
|
571
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
574
572
|
/>
|
|
575
573
|
</div>
|
|
576
574
|
|
|
@@ -598,9 +596,9 @@ export default function App() {
|
|
|
598
596
|
itemCount={5}
|
|
599
597
|
// nextBlock={nexBlock}
|
|
600
598
|
placeholder="Auto Suggestion"
|
|
601
|
-
selectedItems={[{ name:
|
|
599
|
+
selectedItems={[{ name: "test", id: "1" }]}
|
|
602
600
|
getData={getData}
|
|
603
|
-
onChange={(e) => console.log(e,
|
|
601
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
604
602
|
/>
|
|
605
603
|
</div>
|
|
606
604
|
<div className="autocomplete-section">
|
|
@@ -621,7 +619,7 @@ export default function App() {
|
|
|
621
619
|
adorementPosition="start"
|
|
622
620
|
placeholder="TextField"
|
|
623
621
|
required
|
|
624
|
-
onChange={(e) => console.log(e,
|
|
622
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
625
623
|
/>
|
|
626
624
|
</div>
|
|
627
625
|
<div style={{ width: 300 }}>
|
|
@@ -641,15 +639,15 @@ export default function App() {
|
|
|
641
639
|
itemCount={3}
|
|
642
640
|
placeholder="Auto Suggestion"
|
|
643
641
|
selectedItems={[
|
|
644
|
-
{ id: 1, name:
|
|
645
|
-
{ id: 2, name:
|
|
646
|
-
{ id: 3, name:
|
|
647
|
-
{ id: 4, name:
|
|
648
|
-
{ id: 5, name:
|
|
649
|
-
{ id: 6, name:
|
|
650
|
-
{ id: 7, name:
|
|
642
|
+
{ id: 1, name: "testssdfsdfsdfsd sdvsdf" },
|
|
643
|
+
{ id: 2, name: "test1 slkdflksmflksd" },
|
|
644
|
+
{ id: 3, name: "test2 lsdfkslkdfmlksdf" },
|
|
645
|
+
{ id: 4, name: "test3 lksdmflkmsflkms" },
|
|
646
|
+
{ id: 5, name: "test4lskdmflksldkf sdf" },
|
|
647
|
+
{ id: 6, name: "test5lksdlkf sdf" },
|
|
648
|
+
{ id: 7, name: "test6lksdlf sdf" },
|
|
651
649
|
]}
|
|
652
|
-
onChange={(e) => console.log(e,
|
|
650
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
653
651
|
countOnly={true}
|
|
654
652
|
/>
|
|
655
653
|
</div>
|
|
@@ -660,7 +658,7 @@ export default function App() {
|
|
|
660
658
|
placeholder="efsdf"
|
|
661
659
|
label="sdfsdfsd"
|
|
662
660
|
value=""
|
|
663
|
-
onChange={(e) => console.log(e,
|
|
661
|
+
onChange={(e) => console.log(e, "onchange")}
|
|
664
662
|
/>
|
|
665
663
|
</div>
|
|
666
664
|
</div>
|