react-core-ts 1.0.23 → 1.0.24

package/docs/App.tsx

@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
-import { AutoComplete, ExpandableAutoComplete } from '../src/index';
+import {
+  AutoComplete,
+  AutoCompleteWithTreeStructure,
+  ExpandableAutoComplete,
+} from "../src/index";
 
-import '../src/styles/global.css';
+import "../src/styles/global.css";
+import { treeDropData } from "./store";
 
 export default function App() {
   const [dropData, setDropData] = useState();
@@ -19,7 +24,7 @@ export default function App() {
       .then((res) => {
         setNexBlock(nexBlock + 1);
         const result = res.map((item: any) => {
-          return { ...item, ['name']: item?.title, id: item?.id.toString() };
+          return { ...item, ["name"]: item?.title, id: item?.id.toString() };
         });
         return result;
       });
@@ -34,7 +39,7 @@ export default function App() {
       .then((res) => {
         setPrev(prev + 1);
         const result = res.map((item: any) => {
-          return { ...item, ['name']: item?.title, id: item?.id.toString() };
+          return { ...item, ["name"]: item?.title, id: item?.id.toString() };
         });
         return result;
       });
@@ -43,12 +48,12 @@ export default function App() {
     <React.Fragment>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
+          display: "flex",
+          flexDirection: "column",
           gap: 20,
           padding: 20,
 
-          overflowY: 'scroll',
+          overflowY: "scroll",
         }}
       >
         <div className="autocomplete-section">
@@ -60,7 +65,7 @@ export default function App() {
             input while still offering assistance.
           </p>
         </div>
-        <div style={{ width: 300 }}>
+        <div style={{ width: 800 }}>
           <ExpandableAutoComplete
             label="Auto Suggestion"
             name="sample"
@@ -75,9 +80,32 @@ export default function App() {
             itemCount={5}
             // nextBlock={nexBlock}
             placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
-            selectedItems={[{ name: 'test', id: '1' }]}
+            selectedItems={[{ name: "test", id: "1" }]}
             getData={getData}
-            onChange={(e) => console.log(e, 'onchange')}
+            onChange={(e) => console.log(e, "onchange")}
+          />
+        </div>
+        <div style={{ width: 800 }}>
+          <AutoCompleteWithTreeStructure
+            label="Auto Suggestion"
+            name="sample"
+            type="custom_select"
+            // async
+            desc="name"
+            isMultiple={true}
+            singleSelect={false}
+            expandable={true}
+            isTreeDropdown={true}
+            descId="id"
+            data={treeDropData}
+            paginationEnabled={false}
+            initialLoad={false}
+            itemCount={5}
+            // nextBlock={nexBlock}
+            placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
+            selectedItems={[{ name: "test", id: "1" }]}
+            // getData={getData}
+            onChange={(e) => console.log(e, "onchange")}
           />
         </div>
         <div className="autocomplete-section">
@@ -96,15 +124,15 @@ export default function App() {
             descId="id"
             type="custom_select"
             data={[
-              { name: 'test', id: '1' },
-              { name: 'test1', id: '2' },
+              { name: "test", id: "1" },
+              { name: "test1", id: "2" },
 
-              { name: 'test2', id: '3' },
+              { name: "test2", id: "3" },
 
-              { name: 'test3', id: '4' },
+              { name: "test3", id: "4" },
             ]}
             // getData={getData}
-            onChange={() => console.log('onchange')}
+            onChange={() => console.log("onchange")}
           />
         </div>
         <div className="autocomplete-section">
@@ -128,7 +156,7 @@ export default function App() {
             placeholder="Auto Complete"
             // data={[{ name: 'test', id: '1' }]}
             getData={getData}
-            onChange={() => console.log('onchange')}
+            onChange={() => console.log("onchange")}
           />
         </div>
         <div style={{ width: 300 }}>
@@ -142,7 +170,7 @@ export default function App() {
             placeholder="Auto Complete"
             // data={[{ name: 'test', id: '1' }]}
             getData={getDatas}
-            onChange={() => console.log('onchange')}
+            onChange={() => console.log("onchange")}
           />
         </div>
         <div className="autocomplete-section">
@@ -164,18 +192,18 @@ export default function App() {
             descId="id"
             type="custom_search_select"
             data={[
-              { name: 'Apple', id: '1' },
-              { name: 'Banana', id: '2' },
-              { name: 'Cherry', id: '3' },
-              { name: 'Date', id: '4' },
-              { name: 'Fig', id: '5' },
-              { name: 'Grape', id: '6' },
-              { name: 'Honeydew', id: '7' },
-              { name: 'Kiwi', id: '8' },
-              { name: 'Lemon', id: '9' },
-              { name: 'Mango', id: '10' },
+              { name: "Apple", id: "1" },
+              { name: "Banana", id: "2" },
+              { name: "Cherry", id: "3" },
+              { name: "Date", id: "4" },
+              { name: "Fig", id: "5" },
+              { name: "Grape", id: "6" },
+              { name: "Honeydew", id: "7" },
+              { name: "Kiwi", id: "8" },
+              { name: "Lemon", id: "9" },
+              { name: "Mango", id: "10" },
             ]}
-            onChange={() => console.log('onchange')}
+            onChange={() => console.log("onchange")}
           />
         </div>
         <div className="autocomplete-section">
@@ -198,7 +226,7 @@ export default function App() {
             placeholder="Auto Suggestion"
             // data={[{ name: 'test', id: '1' }]}
             getData={getData}
-            onChange={() => console.log('onchange')}
+            onChange={() => console.log("onchange")}
           />
         </div>
         <div style={{ width: 300 }}>
@@ -212,10 +240,10 @@ export default function App() {
             isMultiple
             descId="id"
             placeholder="Auto Suggestion"
-            selectedItems={[{ name: 'test', id: '1' }]}
+            selectedItems={[{ name: "test", id: "1" }]}
             // data={[{ name: 'test', id: '1' }]}
             getData={getData}
-            onChange={(value) => console.log(value, 'onchange')}
+            onChange={(value) => console.log(value, "onchange")}
           />
         </div>
         <div style={{ width: 300 }}>
@@ -231,9 +259,9 @@ export default function App() {
             initialLoad={true}
             // nextBlock={nexBlock}
             placeholder="Auto Suggestion"
-            selectedItems={[{ name: 'test', id: '1' }]}
+            selectedItems={[{ name: "test", id: "1" }]}
             getData={getData}
-            onChange={(e) => console.log(e, 'onchange')}
+            onChange={(e) => console.log(e, "onchange")}
           />
         </div>
 
@@ -261,9 +289,9 @@ export default function App() {
             itemCount={5}
             // nextBlock={nexBlock}
             placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
-            selectedItems={[{ name: 'test', id: '1' }]}
+            selectedItems={[{ name: "test", id: "1" }]}
             getData={getData}
-            onChange={(e) => console.log(e, 'onchange')}
+            onChange={(e) => console.log(e, "onchange")}
           />
         </div>
       </div>

package/docs/store.ts

@@ -0,0 +1,76 @@
+export const treeDropData = [
+  {
+    name: "Port A - This is the main port in the northern region with significant traffic and operations",
+    id: 22,
+    children: [
+      {
+        name: "Port C - A key sub-port with heavy container traffic in the southern bay area",
+        id: 1,
+        children: [
+          {
+            name: "Port G - A small port used for local shipments and fishing operations",
+            id: 2,
+            children: [
+              {
+                name: "Port H - A minor local port focusing on fisheries and small-scale cargo",
+                id: 3,
+                children: [],
+              },
+            ],
+          },
+          {
+            name: "Port I - A coastal port for regional trade and tourism operations",
+            id: 4,
+            children: [
+              {
+                name: "Port J - A harbor for tourist cruises and commercial boats",
+                id: 5,
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: "Port D - An industrial port dealing with large-scale cargo and ship repair services",
+        id: 6,
+        children: [
+          {
+            name: "Port K - A dock specializing in shipbuilding and marine repairs",
+            id: 7,
+            children: [
+              {
+                name: "Port L - A repair facility for both military and commercial vessels",
+                id: 8,
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Port B - This is the largest port in the central region, supporting international trade",
+    id: 9,
+    children: [
+      {
+        name: "Port E - A primary export port dealing with raw materials and heavy goods",
+        id: 10,
+        children: [
+          {
+            name: "Port M - A small export hub for agricultural and mining products",
+            id: 11,
+            children: [
+              {
+                name: "Port N - A warehouse and storage center for exported goods",
+                id: 12,
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,13 +38,17 @@
     "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.9",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^8.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.2",
     "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
     "style-loader": "^3.3.3",
+    "tailwindcss": "^3.4.13",
     "ts-loader": "^9.4.4",
     "typescript": "^4.0.0",
     "webpack": "^5.88.2",
@@ -53,9 +57,6 @@
   },
   "dependencies": {
     "@babel/plugin-transform-typescript": "^7.22.15",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "source-map-loader": "^4.0.1",
-    "tailwindcss": "^3.3.3"
+    "source-map-loader": "^4.0.1"
   }
 }

package/postcss.config.js

@@ -1,7 +1,6 @@
-// postcss.config.js
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ],
 };