@visns-studio/visns-components 5.6.14 → 5.7.1

package/package.json

@@ -2,8 +2,6 @@
     "dependencies": {
         "@emotion/is-prop-valid": "^1.3.1",
         "@fontsource/barlow": "^5.2.5",
-        "@inovua/reactdatagrid-community": "^5.10.2",
-        "@inovua/reactdatagrid-enterprise": "^5.10.2",
         "@nivo/bar": "^0.88.0",
         "@nivo/core": "^0.88.0",
         "@nivo/line": "^0.88.0",
@@ -16,7 +14,6 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.9.0",
         "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
         "fabric": "^6.6.4",
@@ -33,7 +30,6 @@
         "quill-image-uploader": "^1.3.0",
         "react-big-calendar": "^1.18.0",
         "react-color": "^2.19.3",
-        "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^8.3.0",
         "react-dropzone": "^14.3.8",
@@ -84,7 +80,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.6.14",
+    "version": "5.7.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import numeral from 'numeral';
@@ -10,9 +9,10 @@ import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
 import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
 import Toggle from 'react-toggle';
+import fetchUtil from '../../utils/fetchUtil';
+import { confirmDialog } from '../utils/ConfirmDialog';
 import {
     Backspace,
     Check,
@@ -32,7 +32,6 @@ import {
 } from 'akar-icons';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import 'react-toggle/style.css';
 
 import CustomFetch from '../crm/Fetch';
@@ -82,7 +81,7 @@ const loadData = async (
     }
 
     try {
-        const response = await axios.post(url, params);
+        const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
         return { data, count: total };
     } catch (error) {
@@ -171,11 +170,12 @@ const DataGrid = ({
                 modalOpen('update', d.id);
                 break;
             case 'delete':
-                confirmAlert({
+                confirmDialog({
                     title: 'Delete Item',
                     message: `Are you sure you want to delete ${
                         d.name ? d.name : d.label ? d.label : 'this item'
                     }?`,
+                    data: d, // Pass the row data
                     buttons: [
                         {
                             label: 'Yes',
@@ -213,9 +213,10 @@ const DataGrid = ({
                 });
                 break;
             default:
-                confirmAlert({
+                confirmDialog({
                     title: s.title,
                     message: '',
+                    data: d, // Pass the row data
                     buttons: [
                         {
                             label: 'Yes',
@@ -1208,7 +1209,69 @@ const DataGrid = ({
                                     onClick={(e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
-                                        handleSettingClick(setting, data);
+
+                                        // Actions that should have confirmation dialogs
+                                        const actionsRequiringConfirmation = [
+                                            'complete',
+                                            'primary',
+                                            'ssa',
+                                        ];
+
+                                        // If this action requires confirmation and is not delete (which has its own confirmation)
+                                        if (
+                                            actionsRequiringConfirmation.includes(
+                                                setting.id
+                                            ) &&
+                                            setting.id !== 'delete'
+                                        ) {
+                                            // Get tooltip content for the message
+                                            const tooltipContent =
+                                                setting.active &&
+                                                data.hasOwnProperty(
+                                                    setting.active.id
+                                                ) &&
+                                                data[setting.active.id] ===
+                                                    setting.active.value
+                                                    ? setting.active.title
+                                                    : setting.title;
+
+                                            // Create a message based on the tooltip
+                                            let message = `Are you sure you want to ${tooltipContent.toLowerCase()}?`;
+
+                                            // Add item identifier if available
+                                            const itemName =
+                                                data.name ||
+                                                data.label ||
+                                                data.title ||
+                                                data.id;
+                                            if (itemName) {
+                                                message += ` Item: "${itemName}"`;
+                                            }
+
+                                            // Show confirmation dialog
+                                            confirmDialog({
+                                                title: tooltipContent,
+                                                message: message,
+                                                data: data,
+                                                buttons: [
+                                                    {
+                                                        label: 'Yes',
+                                                        onClick: () =>
+                                                            handleSettingClick(
+                                                                setting,
+                                                                data
+                                                            ),
+                                                    },
+                                                    {
+                                                        label: 'No',
+                                                        onClick: () => {},
+                                                    },
+                                                ],
+                                            });
+                                        } else {
+                                            // For actions that don't need confirmation or already have it (delete)
+                                            handleSettingClick(setting, data);
+                                        }
                                     }}
                                 >
                                     {renderSetting(setting, data)}

package/src/components/cms/DropZone.jsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { useDropzone } from 'react-dropzone';
-import { confirmAlert } from 'react-confirm-alert';
 import { CircleX, File, TrashCan } from 'akar-icons';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';
 import imageCompression from 'browser-image-compression';
 
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
+import { confirmDialog } from '../utils/ConfirmDialog';
 import CustomFetch from '../crm/Fetch';
 import SortableList from './sorting/List';
 
@@ -122,9 +120,10 @@ function VisnsDropZone({ fetchData, files, settings }) {
 
     const handleDelete = (id, name) => {
         if (id && id > 0) {
-            confirmAlert({
+            confirmDialog({
                 title: 'Confirm to Delete File',
                 message: 'Are you sure you want to delete ' + name,
+                data: { name: name }, // Pass the file name as data
                 buttons: [
                     {
                         label: 'Yes',

package/src/components/cms/Form.jsx

@@ -5,11 +5,9 @@ import slugify from 'react-slugify';
 import moment from 'moment';
 import Reveal from 'react-reveal/Reveal';
 import parse from 'html-react-parser';
-import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
 import { Copy, TrashBin } from 'akar-icons';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 function Form(props) {
     const { dataId, navigate, form } = props;
@@ -245,9 +243,10 @@ function Form(props) {
 
     const handleDelete = (e) => {
         if (e) {
-            confirmAlert({
+            confirmDialog({
                 title: 'Delete this entry',
                 message: 'Are you sure you want to delete it?',
+                data: data, // Pass the data object for context
                 buttons: [
                     {
                         label: 'Yes',

package/src/components/cms/generic/CmsDetail.jsx

@@ -4,8 +4,6 @@ import Reveal from 'react-reveal/Reveal';
 import { ToastContainer } from 'react-toastify';
 import CmsForm from '../Form';
 
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
 function CmsDetail({ setting }) {
     const { dataId } = useParams();
     const navigate = useNavigate();

package/src/components/crm/Autocomplete.jsx

@@ -1,10 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect, useCallback, useMemo, memo } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
 import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
 import styles from './styles/Autocomplete.module.scss';
+import fetchUtil from '../../utils/fetchUtil';
 
-const VisnsAutocomplete = (props) => {
+// Create the debounced function outside the component to prevent recreation
+const createDebouncedSearch = (fn) =>
+    AwesomeDebouncePromise(fn, 500, {
+        key: (id) => id,
+    });
+
+const VisnsAutocomplete = memo((props) => {
     const {
         api,
         country,
@@ -15,160 +21,188 @@ const VisnsAutocomplete = (props) => {
         setFormData,
         style,
     } = props;
+
     const [search, setSearch] = useState('');
     const [results, setResults] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [overwrite, setOverwrite] = useState(false);
 
-    const performSearch = (id, value) => {
-        if (id > 0) {
-            if (value === '') {
-                setResults([]);
-                setIsLoading(false);
-            } else {
-                let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
+    // Memoize URL building logic to avoid recalculations
+    const buildSearchUrl = useCallback(
+        (value) => {
+            if (!value || !api) return null;
 
-                if (country) {
-                    url += `&country=${country}`;
-                }
+            let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
 
-                if (mapbox) {
-                    if (mapbox.proximity) {
-                        url += `&proximity=${mapbox.proximity}`;
-                    }
+            if (country) {
+                url += `&country=${country}`;
+            }
 
-                    if (mapbox.bbox) {
-                        url += `&bbox=${mapbox.bbox}`;
-                    }
+            if (mapbox) {
+                if (mapbox.proximity) {
+                    url += `&proximity=${mapbox.proximity}`;
                 }
 
-                axios
-                    .get(url)
-                    .then((response) => {
-                        setResults(response.data.features);
-                        setIsLoading(false);
-                    })
-                    .catch(function (error) {
-                        console.log(error);
-                    });
+                if (mapbox.bbox) {
+                    url += `&bbox=${mapbox.bbox}`;
+                }
             }
-        }
-    };
 
-    const handleSearchChange = async (e) => {
-        if (e) {
-            setSearch(e.target.value);
+            return url;
+        },
+        [api, country, mapbox]
+    );
+
+    const performSearch = useCallback(
+        (id, value) => {
+            if (id <= 0 || !value) {
+                setResults([]);
+                setIsLoading(false);
+                return;
+            }
+
+            const url = buildSearchUrl(value);
+            if (!url) return;
+
+            fetchUtil
+                .get(url)
+                .then((response) => {
+                    setResults(response.data.features || []);
+                    setIsLoading(false);
+                })
+                .catch((error) => {
+                    console.log(error);
+                    setIsLoading(false);
+                });
+        },
+        [buildSearchUrl]
+    );
+
+    // Create the debounced search function using our memoized performSearch
+    const performSearchDebounced = useMemo(
+        () => createDebouncedSearch(performSearch),
+        [performSearch]
+    );
+
+    const handleSearchChange = useCallback(
+        async (e) => {
+            if (!e) return;
+
+            const newValue = e.target.value;
+            setSearch(newValue);
             setFormData((prevState) => ({
                 ...prevState,
-                [field]: e.target.value,
+                [field]: newValue,
             }));
 
-            if (overwrite === false) {
+            if (!overwrite) {
                 setIsLoading(true);
+                await performSearchDebounced(1, newValue);
             }
+        },
+        [field, overwrite, performSearchDebounced, setFormData]
+    );
 
-            if (overwrite === false) {
-                await performSearchDebounced(1, e.target.value);
-            }
-        }
-    };
-
-    const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
-        key: (id, value) => id,
-    });
+    const handleItemClicked = useCallback(
+        (place) => {
+            const address = place.address || '';
+            const text = place.text || '';
+            const search = address && text ? `${address} ${text}` : text;
 
-    const handleItemClicked = (place) => {
-        const address =
-            place.address !== undefined && place.address !== null
-                ? place.address
-                : '';
-        const text =
-            place.text !== undefined && place.text !== null ? place.text : '';
-
-        const search = address && text ? `${address} ${text}` : text;
-        setSearch(search);
-        setResults([]);
-        onSelect(place, field);
-    };
-
-    const handleOverwrite = () => {
-        if (overwrite === false) {
-            setOverwrite(true);
+            setSearch(search);
             setResults([]);
-        } else {
-            setOverwrite(false);
-        }
-    };
+            onSelect(place, field);
+        },
+        [field, onSelect]
+    );
 
-    useEffect(() => {
-        if (overwrite === false) {
-            if (search !== '') {
-                performSearch();
+    const handleOverwrite = useCallback(() => {
+        setOverwrite((prevState) => {
+            if (!prevState) {
+                setResults([]);
             }
+            return !prevState;
+        });
+    }, []);
+
+    // Effect to handle overwrite toggle
+    useEffect(() => {
+        if (!overwrite && search) {
+            setIsLoading(true);
+            performSearch(1, search);
         }
-    }, [overwrite]);
+    }, [overwrite, search, performSearch]);
 
+    // Effect to sync with inputValue prop
     useEffect(() => {
-        setSearch(inputValue);
+        if (inputValue !== undefined) {
+            setSearch(inputValue);
+        }
     }, [inputValue]);
 
+    // Memoize the input style to prevent recalculation
+    const inputStyle = useMemo(
+        () => ({
+            height: style?.multi_select_height || '52px',
+        }),
+        [style]
+    );
+
     return (
-        <>
-            <div className={styles.AutocompletePlace}>
-                <input
-                    className={styles['AutocompletePlace-input']}
-                    style={{
-                        height:
-                            style && style.multi_select_height
-                                ? style.multi_select_height
-                                : '52px',
-                    }}
-                    type="text"
-                    value={search || ''}
-                    onChange={handleSearchChange}
-                    placeholder="Type an address"
-                    autoComplete="off"
+        <div className={styles.AutocompletePlace}>
+            <input
+                className={styles['AutocompletePlace-input']}
+                style={inputStyle}
+                type="text"
+                value={search || ''}
+                onChange={handleSearchChange}
+                placeholder="Type an address"
+                autoComplete="off"
+            />
+
+            {overwrite ? (
+                <ToggleOnFill
+                    data-tooltip-id="system-tooltip"
+                    data-tooltip-content="Enable Autocomplete"
+                    strokeWidth={2}
+                    size={24}
+                    onClick={handleOverwrite}
+                    className={styles.toggleActive}
                 />
-                {overwrite === false ? (
-                    <ToggleOffFill
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content="Disable Autocomplete"
-                        strokeWidth={2}
-                        size={24}
-                        onClick={handleOverwrite}
-                    />
-                ) : (
-                    <ToggleOnFill
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content="Enable Autocomplete"
-                        strokeWidth={2}
-                        size={24}
-                        onClick={handleOverwrite}
-                        className={styles.toggleActive}
-                    />
-                )}
-                {results.length > 0 ? (
-                    <ul className="AutocompletePlace-results">
-                        {results.map((place) => (
-                            <li
-                                key={place.id}
-                                className={styles['AutocompletePlace-items']}
-                                onClick={() => handleItemClicked(place)}
-                            >
-                                {place.place_name}
-                            </li>
-                        ))}
-
-                        {isLoading && (
-                            <li className={styles['AutocompletePlace-items']}>
-                                Loading...
-                            </li>
-                        )}
-                    </ul>
-                ) : null}
-            </div>
-        </>
+            ) : (
+                <ToggleOffFill
+                    data-tooltip-id="system-tooltip"
+                    data-tooltip-content="Disable Autocomplete"
+                    strokeWidth={2}
+                    size={24}
+                    onClick={handleOverwrite}
+                />
+            )}
+
+            {results.length > 0 && (
+                <ul className="AutocompletePlace-results">
+                    {results.map((place) => (
+                        <li
+                            key={place.id}
+                            className={styles['AutocompletePlace-items']}
+                            onClick={() => handleItemClicked(place)}
+                        >
+                            {place.place_name}
+                        </li>
+                    ))}
+
+                    {isLoading && (
+                        <li className={styles['AutocompletePlace-items']}>
+                            Loading...
+                        </li>
+                    )}
+                </ul>
+            )}
+        </div>
     );
-};
+});
+
+// Add display name for debugging
+VisnsAutocomplete.displayName = 'VisnsAutocomplete';
 
 export default VisnsAutocomplete;