react-core-ts 1.0.23 → 1.0.25

package/src/components/TreeNode.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { DropSideIcon } from './Icons';
+
+const TreeNode: React.FC<any> = ({
+  node,
+  isMultiple,
+  singleSelect,
+  idx,
+  desc,
+  toggleExpand,
+  updateNode,
+  children,
+  descId,
+}) => {
+  // Toggle the expanded state when clicking on the node
+  const handleToggle = (node?: any) => {
+    console.log(node, 'node');
+    toggleExpand(node[descId]);
+  };
+
+  const handleCheckbox = (e: any, dataItem: any) => {
+    const { checked } = e.target;
+    updateNode(dataItem[descId], checked);
+  };
+  return (
+    <div>
+      <li className="flex flex-col">
+        <div
+          style={{ display: 'flex' }}
+          className={`items-start gap-4 flex-row ${
+            node?.children?.length > 0 ? '' : 'ml-5'
+          }`}
+        >
+          {/* Show an icon based on the expanded/collapsed state */}
+
+          {node?.children && node?.children?.length > 0 && (
+            <span
+              onClick={() => handleToggle(node)}
+              className={`mt-1 cursor-pointer ${
+                node.expanded ? ' rotate-90' : ''
+              }`}
+            >
+              <DropSideIcon />
+            </span>
+          )}
+          {(isMultiple || singleSelect) && (
+            <div className="qbs-autocomplete-checkbox">
+              <input
+                onChange={(e) => handleCheckbox(e, node)} // Pass correct node to the handler
+                type="checkbox"
+                checked={node.checked}
+                id={`qbs-checkbox-${idx.toString()}`}
+              />
+              <label htmlFor={`qbs-checkbox-${idx.toString()}`}>
+                <svg
+                  width="8"
+                  height="6"
+                  viewBox="0 0 8 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
+                    fill="white"
+                  />
+                </svg>
+              </label>
+            </div>
+          )}
+          <span className=" leading-[18px]">{node[desc]}</span>
+        </div>
+      </li>
+
+      {children}
+    </div>
+  );
+};
+
+export default TreeNode;

package/src/index.tsx

@@ -1,9 +1,12 @@
-import './styles/global.css';
+import "./styles/global.css";
 
-export { default as AutoComplete } from './AutoComplete';
-export { default as CustomAutoComplete } from './AutoComplete';
-export { default as ExpandableAutoComplete } from './ExpandableAutoComplete';
-export { default as ExpandableToolTip } from './utilities/expandableTootltip';
-export { default as ToolTip } from './utilities/tooltip';
-export { deepEqual } from './utilities/deepEqual';
-export type { AutoSuggestionInputProps } from './commontypes';
+export {
+  default as AutoComplete,
+  default as CustomAutoComplete,
+} from "./AutoComplete";
+export { default as AutoCompleteWithTreeStructure } from "./AutoCompleteWithTreeStructure";
+export type { AutoSuggestionInputProps } from "./commontypes";
+export { default as ExpandableAutoComplete } from "./ExpandableAutoComplete";
+export { deepEqual } from "./utilities/deepEqual";
+export { default as ExpandableToolTip } from "./utilities/expandableTootltip";
+export { default as ToolTip } from "./utilities/tooltip";

package/src/styles/global.css

@@ -1 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import './components/autocomplete.css';

package/src/utilities/convertFlatArraytoTreeStructure.ts

@@ -0,0 +1,27 @@
+export function buildTree(data: any[], idField: string, parentField: string) {
+  const nodeMap = new Map();
+
+  // Initialize all nodes
+  data.forEach((node) => {
+    node.children = [];
+    nodeMap.set(node[idField], node);
+  });
+
+  // Build the tree structure
+  const tree: any[] = [];
+
+  data.forEach((node) => {
+    if (node[parentField]) {
+      // Find the parent and add the node as a child
+      const parent = nodeMap.get(node[parentField]);
+      if (parent) {
+        parent.children.push(node);
+      }
+    } else {
+      // No parentId means it's a root node
+      tree.push(node);
+    }
+  });
+
+  return tree;
+}

package/src/utilities/filterSuggestions.ts

@@ -8,20 +8,22 @@ export const filterSuggestions = (
   type: string,
   desc: string,
   inputValue?: string,
-  async?: boolean
+  async?: boolean,
+  isTreeDropdown?: boolean
 ): Item[] => {
   if (
     (type === 'custom_search_select' ||
       type === 'auto_complete' ||
       type === 'auto_suggestion') &&
     !async &&
-    query
+    query &&
+    !isTreeDropdown
   ) {
     return data?.filter((item) =>
       item[desc].toLowerCase().includes(query.toLowerCase())
     );
   }
-  return sortedArrayData(data, inputValue, desc);
+  return isTreeDropdown ? data : sortedArrayData(data, inputValue, desc);
 };
 
 const sortedArrayData = (

package/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './docs/**/*.{html,js}'],
+  theme: {
+    extend: {
+      colors: {
+        'blue-navy': '#001f3f',
+        'table-hover': '#f8f8f8',
+        'neutrals-grey-20': '#f4f4f4',
+      },
+    },
+  },
+  plugins: [],
+};

package/webpack.config.js

@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   //...
-  entry: './docs',
+  entry: ['./docs', './src/styles/global.css'],
   devtool: 'source-map',
   devServer: {
     contentBase: './docs',
@@ -15,11 +15,25 @@ module.exports = {
   },
   module: {
     rules: [
+      // {
+      //   test: /\.css$/i,
+      //   use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      // },
       {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: ['tailwindcss', 'autoprefixer'],
+              },
+            },
+          },
+        ],
       },
-
       {
         test: /\.tsx?$/,
         exclude: (file) =>