@fixefy/fixefy-ui-components 0.3.50 → 0.3.52

package/dist/FxAsyncDropdown/components/ChosenIcon.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChosenIcon", {
+    enumerable: true,
+    get: function() {
+        return ChosenIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _FxIcon = require("../../FxIcon");
+const _helpers = require("../helpers/helpers");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ChosenIcon = ({ option, isDisplay })=>{
+    const { fetchedProps, displayed } = (0, _useDropdownStore.default)();
+    const { title_path, multiple, search_path } = fetchedProps;
+    const isChecked = (option)=>{
+        const clicked = (0, _helpers.getOption)(option, title_path);
+        if (typeof displayed === 'string') {
+            return false;
+        } else {
+            if (multiple) {
+                return Array.isArray(displayed) && displayed.map((item)=>{
+                    return item[title_path];
+                }).includes(clicked);
+            } else {
+                return displayed[search_path] === clicked;
+            }
+        }
+    };
+    if (isDisplay && isChecked(option)) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+            width: 16,
+            height: 16,
+            icon: 'filters/chosen_icon.svg'
+        });
+    }
+    return null;
+};

package/dist/FxAsyncDropdown/components/DeleteButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const DeleteButton: ({ option, isDisplay }: {
+    option: any;
+    isDisplay: boolean;
+}) => React.JSX.Element | null;

package/dist/FxAsyncDropdown/components/DeleteButton.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DeleteButton", {
+    enumerable: true,
+    get: function() {
+        return DeleteButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
+const _helpers = require("../helpers/helpers");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeleteButton = ({ option, isDisplay })=>{
+    const { fetchedProps, displayed, setDisplayed } = (0, _useDropdownStore.default)();
+    const { multiple, search_path, getOption, title_path } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const isDisplayButton = isDisplay && (multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed[search_path] === getOption(option, title_path));
+    switch(isDisplayButton){
+        case true:
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    margin: '0 5px'
+                },
+                onClick: ()=>{
+                    (0, _helpers.deleteOneItem)(option, fetchedProps, displayed, setDisplayed);
+                },
+                children: "x"
+            });
+        default:
+            return null;
+    }
+};

package/dist/FxAsyncDropdown/components/LogoOption.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const LogoOption: ({ option, curValue, modal }: {
+    option: any;
+    curValue: any;
+    modal: 'displayed' | 'list';
+}) => React.JSX.Element;

package/dist/FxAsyncDropdown/components/LogoOption.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LogoOption", {
+    enumerable: true,
+    get: function() {
+        return LogoOption;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _FxIcon = require("../../FxIcon");
+const _material = require("@mui/material");
+const _styles = require("@mui/styles");
+const _helpers = require("../helpers/helpers");
+const _fixefyhooks = require("@fixefy/fixefy-hooks");
+const _DeleteButton = require("./DeleteButton");
+const _ChosenIcon = require("./ChosenIcon");
+const _useDropdownStore = /*#__PURE__*/ _interop_require_default(require("./../useDropdownStore"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const LogoOption = ({ option, curValue, modal })=>{
+    const theme = (0, _styles.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '100%',
+            gap: 1,
+            color: 'grey',
+            cursor: 'pointer'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                sx: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    gap: 1,
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Logo, {
+                        option: option
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                variant: "subtitle2",
+                                color: theme.palette.typography.title,
+                                children: (0, _helpers.titleCase)(curValue)
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteButton.DeleteButton, {
+                                option: option,
+                                isDisplay: modal == 'displayed'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChosenIcon.ChosenIcon, {
+                option: option,
+                isDisplay: modal == 'list'
+            })
+        ]
+    }, option._id);
+};
+const Logo = ({ option })=>{
+    const getRandomColor = (0, _fixefyhooks.useRandomColor)();
+    const { fetchedProps } = (0, _useDropdownStore.default)();
+    const { logo_folder_name, logo_placeholder, name } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    var _option_name;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        style: {
+            width: '70px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+            icon: `${option.logo ? `${logo_folder_name}/${option.logo}` : logo_placeholder ? logo_placeholder : (_option_name = option === null || option === void 0 ? void 0 : option[name]) !== null && _option_name !== void 0 ? _option_name : 'x'}`,
+            width: 70,
+            height: 16,
+            variant: "rounded",
+            fontSize: 17,
+            background: getRandomColor()
+        })
+    });
+};

package/dist/FxAsyncDropdown/components/TextOption.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TextOption: ({ option, curValue, modal }: {
+    option: any;
+    curValue: any;
+    modal: 'displayed' | 'list';
+}) => React.JSX.Element;

package/dist/FxAsyncDropdown/components/TextOption.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TextOption", {
+    enumerable: true,
+    get: function() {
+        return TextOption;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _styles = require("@mui/styles");
+const _helpers = require("../helpers/helpers");
+const _DeleteButton = require("./DeleteButton");
+const _ChosenIcon = require("./ChosenIcon");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TextOption = ({ option, curValue, modal })=>{
+    const theme = (0, _styles.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '100%',
+            gap: 1,
+            color: 'grey',
+            cursor: 'pointer'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    gap: 1,
+                    alignItems: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        width: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "subtitle2",
+                            color: theme.palette.typography.title,
+                            children: (0, _helpers.titleCase)(curValue)
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteButton.DeleteButton, {
+                            option: option,
+                            isDisplay: modal == 'displayed'
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChosenIcon.ChosenIcon, {
+                option: option,
+                isDisplay: modal == 'list'
+            })
+        ]
+    }, option._id);
+};

package/dist/FxAsyncDropdown/components/index.d.ts

@@ -0,0 +1,6 @@
+export { CheckboxIcon } from './CheckboxIcon';
+export { ChipOption } from './ChipOption';
+export { ChosenIcon } from './ChosenIcon';
+export { DeleteButton } from './DeleteButton';
+export { LogoOption } from './LogoOption';
+export { TextOption } from './TextOption';

package/dist/FxAsyncDropdown/components/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CheckboxIcon: function() {
+        return _CheckboxIcon.CheckboxIcon;
+    },
+    ChipOption: function() {
+        return _ChipOption.ChipOption;
+    },
+    ChosenIcon: function() {
+        return _ChosenIcon.ChosenIcon;
+    },
+    DeleteButton: function() {
+        return _DeleteButton.DeleteButton;
+    },
+    LogoOption: function() {
+        return _LogoOption.LogoOption;
+    },
+    TextOption: function() {
+        return _TextOption.TextOption;
+    }
+});
+const _CheckboxIcon = require("./CheckboxIcon");
+const _ChipOption = require("./ChipOption");
+const _ChosenIcon = require("./ChosenIcon");
+const _DeleteButton = require("./DeleteButton");
+const _LogoOption = require("./LogoOption");
+const _TextOption = require("./TextOption");

package/dist/FxAsyncDropdown/helpers/helpers.d.ts

@@ -6,3 +6,7 @@ export declare const titleCase: (str?: string) => string;
 export declare const toPascalCase: (string: string, title?: boolean) => string;
 export declare const useRandomColor: (theme: any) => () => unknown;
 export declare const getOption: (option: any, title_path: string) => any;
+export declare const removeOneFromStoredDisplayed: (option: any, fetchedProps: any) => void;
+export declare const deleteOneItem: (item: any, fetchedProps: any, displayed: any, setDisplayed: any) => void;
+export declare const addToStoredDisplayed: (option: any, fetchedProps: any) => void;
+export declare const isChecked: (option: any, displayed: any, fetchedProps: any) => any;

package/dist/FxAsyncDropdown/helpers/helpers.js

@@ -9,6 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    addToStoredDisplayed: function() {
+        return addToStoredDisplayed;
+    },
+    deleteOneItem: function() {
+        return deleteOneItem;
+    },
     getJPart: function() {
         return getJPart;
     },
@@ -18,12 +24,18 @@ _export(exports, {
     isArrayValid: function() {
         return isArrayValid;
     },
+    isChecked: function() {
+        return isChecked;
+    },
     isObjectValid: function() {
         return isObjectValid;
     },
     isStringValid: function() {
         return isStringValid;
     },
+    removeOneFromStoredDisplayed: function() {
+        return removeOneFromStoredDisplayed;
+    },
     titleCase: function() {
         return titleCase;
     },
@@ -155,3 +167,67 @@ const getOption = (option, title_path)=>{
     }
     return null;
 };
+const removeOneFromStoredDisplayed = (option, fetchedProps)=>{
+    const { multiple, title_path, name, _id, query } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    let storedDisplayed = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+    if (storedDisplayed) {
+        storedDisplayed = JSON.parse(storedDisplayed);
+        if (multiple) {
+            const newDisplayed = storedDisplayed[name].filter((opt)=>opt[title_path] !== option[title_path]);
+            storedDisplayed[name] = newDisplayed;
+        } else {
+            delete storedDisplayed[name];
+        }
+        sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(storedDisplayed));
+    }
+};
+const deleteOneItem = (item, fetchedProps, displayed, setDisplayed)=>{
+    const { multiple, title_path, onRemoveOne } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    if (multiple) {
+        const newDisplayed = displayed.filter((opt)=>opt[title_path] !== item[title_path]);
+        setDisplayed(newDisplayed);
+    } else {
+        setDisplayed('');
+    }
+    if (onRemoveOne) {
+        onRemoveOne(item);
+    }
+    removeOneFromStoredDisplayed(item, fetchedProps);
+};
+const addToStoredDisplayed = (option, fetchedProps)=>{
+    const { name, multiple, query, _id } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const prevStored = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+    const data = prevStored ? JSON.parse(prevStored) : {};
+    if (data[name]) {
+        if (multiple) {
+            data[name] = [
+                ...data[name],
+                option
+            ];
+        } else {
+            data[name] = [
+                option
+            ];
+        }
+    } else {
+        data[name] = [
+            option
+        ];
+    }
+    sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(data));
+};
+const isChecked = (option, displayed, fetchedProps)=>{
+    const { multiple, title_path, search_path } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const clicked = getOption(option, title_path);
+    if (typeof displayed === 'string') {
+        return false;
+    } else {
+        if (multiple) {
+            return displayed.map((item)=>{
+                return item[title_path];
+            }).includes(clicked);
+        } else {
+            return displayed[search_path] === clicked;
+        }
+    }
+};

package/dist/FxAsyncDropdown/index.d.ts

@@ -1 +1 @@
-export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from './FxAsyncDropdown';
+export { FxAsyncDropdown } from './FxAsyncDropdown';

package/dist/FxAsyncDropdown/index.js

@@ -2,24 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    AsyncDropdownPropsType: function() {
-        return _FxAsyncDropdown.AsyncDropdownPropsType;
-    },
-    FxAsyncDropdown: function() {
+Object.defineProperty(exports, "FxAsyncDropdown", {
+    enumerable: true,
+    get: function() {
         return _FxAsyncDropdown.FxAsyncDropdown;
-    },
-    Option: function() {
-        return _FxAsyncDropdown.Option;
-    },
-    StylesOptions: function() {
-        return _FxAsyncDropdown.StylesOptions;
     }
 });
 const _FxAsyncDropdown = require("./FxAsyncDropdown");

package/dist/FxAsyncDropdown/types.d.ts

@@ -0,0 +1,40 @@
+export interface Option {
+    title: string;
+    value: string | number | boolean;
+    [key: string]: any;
+}
+export interface StylesOptions {
+    width?: string | number;
+    maxWidth?: string | number;
+    inputSx?: object;
+    menuSx?: object;
+}
+export type AsyncDropdownPropsType = {
+    initialValue?: Option | any;
+    styles?: StylesOptions;
+    method_name: string;
+    multiple?: boolean;
+    name: any;
+    variables: any;
+    onAdd?: (value: any) => void;
+    onRemoveOne?: (value: any) => void;
+    onRemoveAll?: () => void;
+    onUnselectAll?: () => void;
+    type?: 'checkbox' | 'text';
+    renderOptions?: (option: Option, index: number) => void;
+    [x: string]: any;
+    modal_type?: string;
+    query: string;
+    isInitialOpen?: boolean;
+    placeholder?: string;
+    rootStylesOverride?: any;
+    options_path?: string;
+    defaultValue?: any;
+    fetcher?: any;
+    disabled?: boolean;
+    search_path?: any;
+    title_path: string;
+    _id: any;
+    logo_folder_name?: string;
+    logo_placeholder?: string;
+};

package/dist/FxAsyncDropdown/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/FxAsyncDropdown/useDropdownStore.d.ts

@@ -0,0 +1,2 @@
+declare const useDropdownStore: import("zustand").UseBoundStore<import("zustand").StoreApi<unknown>>;
+export default useDropdownStore;

package/dist/FxAsyncDropdown/useDropdownStore.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _zustand = require("zustand");
+const useDropdownStore = (0, _zustand.create)((set)=>({
+        fetchedProps: {},
+        setFetchedProps: (val)=>set({
+                fetchedProps: val
+            }),
+        displayed: null,
+        setDisplayed: (val)=>set({
+                displayed: val
+            }),
+        options: [],
+        setOptions: (val)=>set({
+                options: val
+            }),
+        reason: 'init',
+        setReason: (val)=>set({
+                reason: val
+            }),
+        isLastPage: false,
+        setIsLastPage: (val)=>set({
+                isLastPage: val
+            }),
+        isOpen: false,
+        setIsOpen: (val)=>set({
+                isOpen: val
+            }),
+        searchValue: null,
+        setSearchValue: (val)=>set({
+                searchValue: val
+            }),
+        page: 1,
+        setPage: (val)=>set({
+                page: val
+            }),
+        prevPage: 0,
+        setPrevPage: (val)=>set({
+                prevPage: val
+            }),
+        pageSize: 20,
+        loadMore: (page, prevPage)=>{
+            set({
+                page: page + 1,
+                prevPage: prevPage + 1
+            });
+        }
+    }));
+const _default = useDropdownStore;

package/dist/FxGeneralModal/FxGeneralModal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-export declare const FxGeneralModal: ({ buttonComponent, modalComponent, onClick, }: {
+export declare const FxGeneralModal: ({ buttonComponent, modalComponent, onClick, closeOnButtonChange }: {
     buttonComponent: any;
     modalComponent: any;
     onClick?: any;
+    closeOnButtonChange?: boolean;
 }) => React.JSX.Element;

package/dist/FxGeneralModal/FxGeneralModal.js

@@ -52,7 +52,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const FxGeneralModal = ({ buttonComponent, modalComponent, onClick })=>{
+const FxGeneralModal = ({ buttonComponent, modalComponent, onClick, closeOnButtonChange = true })=>{
     const [isOpen, setIsOpen] = (0, _react.useState)(false);
     const [AnchorEl, setAnchorEl] = (0, _react.useState)(null);
     const handleClick = (e)=>{
@@ -72,7 +72,9 @@ const FxGeneralModal = ({ buttonComponent, modalComponent, onClick })=>{
         setAnchorEl(null);
     };
     (0, _react.useEffect)(()=>{
-        setIsOpen(false);
+        if (closeOnButtonChange) {
+            setIsOpen(false);
+        }
     }, [
         buttonComponent
     ]);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { FxActionsTray } from './FxActionsTray';
 export { FxAggregationsBar, AggregationsDataPropsType, AggreationsBarPropsType } from './FxAggregationsBar';
-export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from './FxAsyncDropdown';
+export { FxAsyncDropdown } from './FxAsyncDropdown';
 export { FxAvatar, AvatarPropsType, BackgroundColorsType } from './FxAvatar';
 export { FxButton, ButtonPropsType } from './FxButton';
 export { FxChip, ChipPropsType } from './FxChip';

package/dist/index.js

@@ -18,9 +18,6 @@ _export(exports, {
     Arrow: function() {
         return _FxPopper.Arrow;
     },
-    AsyncDropdownPropsType: function() {
-        return _FxAsyncDropdown.AsyncDropdownPropsType;
-    },
     AvatarPropsType: function() {
         return _FxAvatar.AvatarPropsType;
     },
@@ -159,9 +156,6 @@ _export(exports, {
     NumberfieldPropsType: function() {
         return _FxNumberField.NumberfieldPropsType;
     },
-    Option: function() {
-        return _FxAsyncDropdown.Option;
-    },
     Options: function() {
         return _FxStatusBar.Options;
     },
@@ -213,9 +207,6 @@ _export(exports, {
     StepsLauncher: function() {
         return _FxWizard.StepsLauncher;
     },
-    StylesOptions: function() {
-        return _FxAsyncDropdown.StylesOptions;
-    },
     TagPropsType: function() {
         return _FxTag.TagPropsType;
     },

package/package.json

@@ -19,7 +19,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-use-wizard": "2.3.0",
-    "tss-react": "^4.9.14"
+    "tss-react": "^4.9.14",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
@@ -69,5 +70,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.3.50"
+  "version": "0.3.52"
 }