react-core-ts 1.1.30 → 1.1.31

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.
Files changed (10) hide show
  1. package/dist/ReactTextField.js +7 -7
  2. package/dist/ReactTextField.js.map +1 -1
  3. package/dist/styles/styles/components/autocomplete.css +602 -0
  4. package/dist/styles/styles/components/selectedautocomplete.css +122 -0
  5. package/dist/styles/styles/components/tooltip.css +496 -0
  6. package/dist/styles/styles/components/treedropdown.css +63 -0
  7. package/dist/styles/styles/global.css +8 -0
  8. package/docs/App.tsx +62 -50
  9. package/package.json +1 -1
  10. package/src/ReactTextField.tsx +3 -3
package/docs/App.tsx CHANGED
@@ -1,15 +1,15 @@
1
- import React, { useState } from "react";
1
+ import React, { useState } from 'react';
2
2
 
3
3
  import {
4
4
  AutoComplete,
5
5
  AutoCompleteWithSelectedList,
6
6
  AutoCompleteWithTreeStructure,
7
7
  ExpandableAutoComplete,
8
- } from "../src/index";
9
- import { treeDropData } from "./store";
8
+ } from '../src/index';
9
+ import TextField from '../src/ReactTextField';
10
+ import { treeDropData } from './store';
10
11
 
11
- import TextField from "../src/ReactTextField";
12
- import "../src/styles/global.css";
12
+ import '../src/styles/global.css';
13
13
 
14
14
  export default function App() {
15
15
  const [dropData, setDropData] = useState();
@@ -26,7 +26,7 @@ export default function App() {
26
26
  .then((res) => {
27
27
  setNexBlock(nexBlock + 1);
28
28
  const result = res.map((item: any) => {
29
- return { ...item, ["name"]: item?.title, id: item?.id.toString() };
29
+ return { ...item, ['name']: item?.title, id: item?.id.toString() };
30
30
  });
31
31
  return result;
32
32
  });
@@ -41,7 +41,7 @@ export default function App() {
41
41
  .then((res) => {
42
42
  setPrev(prev + 1);
43
43
  const result = res.map((item: any) => {
44
- return { ...item, ["name"]: item?.title, id: item?.id.toString() };
44
+ return { ...item, ['name']: item?.title, id: item?.id.toString() };
45
45
  });
46
46
  return result;
47
47
  });
@@ -62,7 +62,7 @@ export default function App() {
62
62
  .then((res) => {
63
63
  setNexBlock(nexBlock + 1);
64
64
  const result = res.map((item: any) => {
65
- return { ...item, ["name"]: item?.title, id: item?.id.toString() };
65
+ return { ...item, ['name']: item?.title, id: item?.id.toString() };
66
66
  });
67
67
  return result;
68
68
  });
@@ -71,23 +71,35 @@ export default function App() {
71
71
  <React.Fragment>
72
72
  <div
73
73
  style={{
74
- display: "flex",
75
- flexDirection: "column",
76
- alignItems: "center",
77
- justifyContent: "center",
74
+ display: 'flex',
75
+ flexDirection: 'column',
76
+ alignItems: 'center',
77
+ justifyContent: 'center',
78
78
  }}
79
79
  >
80
80
  <div
81
81
  style={{
82
- display: "flex",
83
- flexDirection: "column",
82
+ display: 'flex',
83
+ flexDirection: 'column',
84
84
  gap: 20,
85
85
  padding: 20,
86
- maxWidth: "75%",
86
+ maxWidth: '75%',
87
87
 
88
- overflowY: "scroll",
88
+ overflowY: 'scroll',
89
89
  }}
90
90
  >
91
+ <div style={{ width: 300 }}>
92
+ <TextField
93
+ name="sample"
94
+ label="TextField"
95
+ id="id"
96
+ type="text"
97
+ adorementPosition="start"
98
+ placeholder="TextField"
99
+ required
100
+ onChange={(e) => console.log(e, 'onchange')}
101
+ />
102
+ </div>
91
103
  <div className="autocomplete-section">
92
104
  <h2>Expandable Auto Suggestion</h2>
93
105
  <p>
@@ -114,7 +126,7 @@ export default function App() {
114
126
  placeholder="Auto Suggestion"
115
127
  selectedItems={[]}
116
128
  getData={getData}
117
- onChange={(e) => console.log(e, "onchange")}
129
+ onChange={(e) => console.log(e, 'onchange')}
118
130
  />
119
131
  </div>
120
132
  <div className="autocomplete-section">
@@ -143,9 +155,9 @@ export default function App() {
143
155
  itemCount={5}
144
156
  // nextBlock={nexBlock}
145
157
  placeholder="Auto Suggestion"
146
- selectedItems={[{ name: "test", id: "1" }]}
158
+ selectedItems={[{ name: 'test', id: '1' }]}
147
159
  // getData={getData}
148
- onChange={(e) => console.log(e, "onchange")}
160
+ onChange={(e) => console.log(e, 'onchange')}
149
161
  />
150
162
  </div>
151
163
 
@@ -173,7 +185,7 @@ export default function App() {
173
185
  itemCount={3}
174
186
  placeholder="Auto Suggestion"
175
187
  selectedItems={[]}
176
- onChange={(e) => console.log(e, "onchange")}
188
+ onChange={(e) => console.log(e, 'onchange')}
177
189
  countOnly={true}
178
190
  />
179
191
  </div>
@@ -191,7 +203,7 @@ export default function App() {
191
203
  itemCount={3}
192
204
  placeholder="Auto Suggestion"
193
205
  selectedItems={[]}
194
- onChange={(e) => console.log(e, "onchange")}
206
+ onChange={(e) => console.log(e, 'onchange')}
195
207
  countOnly={true}
196
208
  />
197
209
  </div>
@@ -210,11 +222,11 @@ export default function App() {
210
222
  itemCount={3}
211
223
  placeholder="Auto Suggestion"
212
224
  selectedItems={[]}
213
- onChange={(e) => console.log(e, "onchange")}
225
+ onChange={(e) => console.log(e, 'onchange')}
214
226
  countOnly={true}
215
227
  tab={[
216
- { id: 1, label: "Tab 1" },
217
- { id: 2, label: "Tab 2" },
228
+ { id: 1, label: 'Tab 1' },
229
+ { id: 2, label: 'Tab 2' },
218
230
  ]}
219
231
  clearTabSwitch={true}
220
232
  />
@@ -235,15 +247,15 @@ export default function App() {
235
247
  descId="id"
236
248
  type="custom_select"
237
249
  data={[
238
- { name: "test", id: "1" },
239
- { name: "test1", id: "2" },
250
+ { name: 'test', id: '1' },
251
+ { name: 'test1', id: '2' },
240
252
 
241
- { name: "test2", id: "3" },
253
+ { name: 'test2', id: '3' },
242
254
 
243
- { name: "test3", id: "4" },
255
+ { name: 'test3', id: '4' },
244
256
  ]}
245
257
  // getData={getData}
246
- onChange={() => console.log("onchange")}
258
+ onChange={() => console.log('onchange')}
247
259
  />
248
260
  </div>
249
261
  <div className="autocomplete-section">
@@ -267,7 +279,7 @@ export default function App() {
267
279
  placeholder="Auto Complete"
268
280
  // data={[{ name: 'test', id: '1' }]}
269
281
  getData={getData}
270
- onChange={() => console.log("onchange")}
282
+ onChange={() => console.log('onchange')}
271
283
  />
272
284
  </div>
273
285
  <div style={{ width: 300 }}>
@@ -281,7 +293,7 @@ export default function App() {
281
293
  placeholder="Auto Complete"
282
294
  // data={[{ name: 'test', id: '1' }]}
283
295
  getData={getDatas}
284
- onChange={() => console.log("onchange")}
296
+ onChange={() => console.log('onchange')}
285
297
  />
286
298
  </div>
287
299
  <div className="autocomplete-section">
@@ -303,18 +315,18 @@ export default function App() {
303
315
  descId="id"
304
316
  type="custom_search_select"
305
317
  data={[
306
- { name: "Apple", id: "1" },
307
- { name: "Banana", id: "2" },
308
- { name: "Cherry", id: "3" },
309
- { name: "Date", id: "4" },
310
- { name: "Fig", id: "5" },
311
- { name: "Grape", id: "6" },
312
- { name: "Honeydew", id: "7" },
313
- { name: "Kiwi", id: "8" },
314
- { name: "Lemon", id: "9" },
315
- { name: "Mango", id: "10" },
318
+ { name: 'Apple', id: '1' },
319
+ { name: 'Banana', id: '2' },
320
+ { name: 'Cherry', id: '3' },
321
+ { name: 'Date', id: '4' },
322
+ { name: 'Fig', id: '5' },
323
+ { name: 'Grape', id: '6' },
324
+ { name: 'Honeydew', id: '7' },
325
+ { name: 'Kiwi', id: '8' },
326
+ { name: 'Lemon', id: '9' },
327
+ { name: 'Mango', id: '10' },
316
328
  ]}
317
- onChange={() => console.log("onchange")}
329
+ onChange={() => console.log('onchange')}
318
330
  />
319
331
  </div>
320
332
  <div className="autocomplete-section">
@@ -337,7 +349,7 @@ export default function App() {
337
349
  placeholder="Auto Suggestion"
338
350
  // data={[{ name: 'test', id: '1' }]}
339
351
  getData={getData}
340
- onChange={() => console.log("onchange")}
352
+ onChange={() => console.log('onchange')}
341
353
  />
342
354
  </div>
343
355
  <div style={{ width: 300 }}>
@@ -351,10 +363,10 @@ export default function App() {
351
363
  isMultiple
352
364
  descId="id"
353
365
  placeholder="Auto Suggestion"
354
- selectedItems={[{ name: "test", id: "1" }]}
366
+ selectedItems={[{ name: 'test', id: '1' }]}
355
367
  // data={[{ name: 'test', id: '1' }]}
356
368
  getData={getData}
357
- onChange={(value) => console.log(value, "onchange")}
369
+ onChange={(value) => console.log(value, 'onchange')}
358
370
  />
359
371
  </div>
360
372
  <div style={{ width: 300 }}>
@@ -370,9 +382,9 @@ export default function App() {
370
382
  initialLoad={true}
371
383
  // nextBlock={nexBlock}
372
384
  placeholder="Auto Suggestion"
373
- selectedItems={[{ name: "test", id: "1" }]}
385
+ selectedItems={[{ name: 'test', id: '1' }]}
374
386
  getData={getData}
375
- onChange={(e) => console.log(e, "onchange")}
387
+ onChange={(e) => console.log(e, 'onchange')}
376
388
  />
377
389
  </div>
378
390
 
@@ -400,9 +412,9 @@ export default function App() {
400
412
  itemCount={5}
401
413
  // nextBlock={nexBlock}
402
414
  placeholder="Auto Suggestion"
403
- selectedItems={[{ name: "test", id: "1" }]}
415
+ selectedItems={[{ name: 'test', id: '1' }]}
404
416
  getData={getData}
405
- onChange={(e) => console.log(e, "onchange")}
417
+ onChange={(e) => console.log(e, 'onchange')}
406
418
  />
407
419
  </div>
408
420
  <div className="autocomplete-section">
@@ -422,7 +434,7 @@ export default function App() {
422
434
  adorementPosition="start"
423
435
  placeholder="TextField"
424
436
  required
425
- onChange={(e) => console.log(e, "onchange")}
437
+ onChange={(e) => console.log(e, 'onchange')}
426
438
  />
427
439
  </div>
428
440
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-core-ts",
3
- "version": "1.1.30",
3
+ "version": "1.1.31",
4
4
  "description": "React Components",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/ReactTextField.tsx CHANGED
@@ -33,9 +33,9 @@ const TextField: React.FC<TextFieldProps> = ({
33
33
  onStepUp, //new requirement number steper
34
34
  onStepDown, //new requirement number steper
35
35
  onChange,
36
- infoTitle,
36
+ infoTitle = 'added for set background colour according to the form',
37
37
  onBlur,
38
- showInfo,
38
+ showInfo = true,
39
39
  errors,
40
40
  keyRegexPattern,
41
41
  backGround, //added for set background colour according to the form
@@ -272,7 +272,7 @@ const TextField: React.FC<TextFieldProps> = ({
272
272
 
273
273
  useEffect(() => {
274
274
  applyPositionClass(textFieldRef);
275
- }, [isHovered]);
275
+ }, []);
276
276
  return (
277
277
  <div ref={textFieldRef} className={` ${fullwidth ? 'w-full' : 'w-auto'}`}>
278
278
  <div className="tooltip-container ">