@fixefy/fixefy-ui-components 0.3.108 → 0.3.110

package/dist/fixefy-ui-components/src/FxObjStaticDropdown/FxObjStaticDropdown.js

@@ -0,0 +1,548 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxObjStaticDropdown", {
+    enumerable: true,
+    get: function() {
+        return FxObjStaticDropdown;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _CheckBoxOutlineBlank = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const _CheckBox = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBox"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("@mui/material/Button"));
+const _Checkbox = /*#__PURE__*/ _interop_require_default(require("@mui/material/Checkbox"));
+const _styles = require("@mui/material/styles");
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Stack = /*#__PURE__*/ _interop_require_default(require("@mui/material/Stack"));
+const _FxChip = require("../FxChip");
+const _FxIcon = require("../FxIcon");
+const _dropdownstyles = require("./styles/dropdown.styles");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _fixefyhooks = require("@fixefy/fixefy-hooks");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const uncheckedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckBoxOutlineBlank.default, {
+    fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckBox.default, {
+    fontSize: "small"
+});
+const FxObjStaticDropdown = (props)=>{
+    const { assetUrl, onAdd, onRemoveOne, onRemoveAll, onUnselectAll, disabled, type = 'text', search_path, modal_type, multiple, name, query, isInitialOpen, placeholder, title_path, rootStylesOverride, logo_placeholder, logo_folder_name, _id, data, defaultValue } = props;
+    const ref = (0, _react.useRef)(null);
+    const theme = (0, _styles.useTheme)();
+    const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
+    const [options, setOptions] = (0, _react.useState)([]);
+    const [reason, setReason] = (0, _react.useState)('init');
+    const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
+    const [isOpen, setIsOpen] = (0, _react.useState)(isInitialOpen);
+    const [searchValue, setSearchValue] = (0, _react.useState)(null);
+    const [page, setPage] = (0, _react.useState)(1);
+    const [prevPage, setPrevPage] = (0, _react.useState)(0);
+    const pageSize = 20;
+    (0, _react.useEffect)(()=>{
+        const storedData = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+        if (storedData) {
+            const parsedData = JSON.parse(storedData);
+            const items = parsedData[name];
+            if (items) {
+                switch(multiple){
+                    case true:
+                        setDisplayed([
+                            ...items
+                        ]);
+                        break;
+                    default:
+                        setDisplayed(items[0]);
+                }
+            }
+        }
+    }, [
+        query,
+        name
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (data && !isLastPage && prevPage < page) {
+            if (data == null || data.length < pageSize) {
+                setIsLastPage(true);
+            }
+            if (reason !== 'loaded more') {
+                setOptions(data);
+            } else {
+                setOptions((prevOptions)=>[
+                        ...prevOptions,
+                        ...data
+                    ]);
+            }
+        }
+    }, [
+        data,
+        reason
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (searchValue) {
+            setOptions(data.filter((option)=>option[title_path].toLowerCase().includes(searchValue.toLowerCase())));
+        } else {
+            setOptions(data);
+        }
+    }, [
+        searchValue
+    ]);
+    const handleSearch = (e)=>{
+        setSearchValue(e.target.value);
+        setReason('searched');
+        setPage(1);
+        setPrevPage(0);
+        setIsLastPage(false);
+    };
+    const addToStoredDisplayed = (option)=>{
+        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 removeOneFromStoredDisplayed = (option)=>{
+        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 handleOptionClick = (option)=>{
+        switch(multiple){
+            case true:
+                if (displayed.map((item)=>{
+                    return item[title_path];
+                }).includes(option)) {
+                    deleteOneItem(option);
+                } else {
+                    onAdd(option);
+                    setDisplayed((prev)=>[
+                            ...prev,
+                            option
+                        ]);
+                    addToStoredDisplayed(option);
+                    if (!multiple) {
+                        setIsOpen(false);
+                    }
+                }
+                break;
+            default:
+                setDisplayed(option);
+                onAdd(option);
+                addToStoredDisplayed(option);
+                if (!multiple && !defaultValue) {
+                    setIsOpen(false);
+                }
+        }
+    };
+    const deleteOneItem = (item)=>{
+        if (multiple) {
+            setDisplayed((prev)=>prev.filter((val)=>val[title_path] !== item[title_path]));
+        } else {
+            setDisplayed('');
+        }
+        onRemoveOne(item);
+        removeOneFromStoredDisplayed(item);
+    };
+    const isChecked = (option)=>{
+        if (typeof displayed === 'string') {
+            return false;
+        } else {
+            if (multiple) {
+                return displayed.map((item)=>{
+                    return item[title_path];
+                }).includes(option);
+            } else {
+                return displayed[search_path] === option[title_path];
+            }
+        }
+    };
+    const selectAll = ()=>{
+        setDisplayed((prev)=>{
+            const unselectedOptions = options.filter((option)=>{
+                return !prev.map((item)=>item[title_path]).includes(option);
+            });
+            const opts = [
+                ...prev,
+                ...unselectedOptions
+            ];
+            onAdd(opts);
+            sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify({
+                [name]: opts
+            }));
+            return opts;
+        });
+    };
+    const unSelectAll = ()=>{
+        if (onUnselectAll) {
+            onUnselectAll();
+            setDisplayed([]);
+            sessionStorage.removeItem(`dropdown-${query}-${name}-${_id}`);
+        }
+    };
+    const displayListOptions = ()=>{
+        switch(type){
+            case 'checkbox':
+                {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            multiple && onUnselectAll && /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                                onClick: ()=>{
+                                    if (displayed.length === options.length) {
+                                        unSelectAll();
+                                    } else {
+                                        selectAll();
+                                    }
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                        icon: uncheckedIcon,
+                                        checked: displayed.length === options.length,
+                                        checkedIcon: checkedIcon,
+                                        sx: {
+                                            mr: 1,
+                                            minWidth: 24,
+                                            minHeight: 24,
+                                            p: 0,
+                                            ['& svg']: {
+                                                fill: theme.palette.primary.light
+                                            }
+                                        }
+                                    }),
+                                    (0, _fixefyuiutils.titleCase)('select all')
+                                ]
+                            }),
+                            options.map((option, i)=>{
+                                return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                                    onClick: ()=>{
+                                        handleOptionClick(option);
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                                            icon: uncheckedIcon,
+                                            checked: isChecked(option),
+                                            checkedIcon: checkedIcon,
+                                            sx: {
+                                                mr: 1,
+                                                minWidth: 24,
+                                                minHeight: 24,
+                                                p: 0,
+                                                ['& svg']: {
+                                                    fill: theme.palette.primary.light
+                                                }
+                                            }
+                                        }),
+                                        getSingleOptionFromListOrDisplayed(option, 'list')
+                                    ]
+                                }, i);
+                            }),
+                            ' '
+                        ]
+                    });
+                }
+            case 'text':
+            default:
+                {
+                    return options.map((option, i)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                            onClick: ()=>{
+                                handleOptionClick(option);
+                            },
+                            children: getSingleOptionFromListOrDisplayed(option, 'list')
+                        }, i);
+                    });
+                }
+        }
+    };
+    const loadMore = ()=>{
+        setPage((prevPage)=>prevPage + 1);
+        setPrevPage((prevPage)=>prevPage + 1);
+    };
+    const getCurrentValues = ()=>{
+        if (multiple) {
+            return getDisplayedValuesMultiple();
+        } else {
+            return getSingleOptionFromListOrDisplayed(displayed, 'displayed');
+        }
+    };
+    const OneOption = ({ option, curValue, modal, modal_type })=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: '100%',
+                gap: 1,
+                color: 'grey',
+                cursor: 'pointer'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    sx: {
+                        width: '100%',
+                        display: 'flex',
+                        justifyContent: 'flex-start',
+                        gap: 1
+                    },
+                    children: [
+                        modal_type == 'logo' && /*#__PURE__*/ (0, _jsxruntime.jsx)(Logo, {
+                            option: option
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
+                            variant: "subtitle2",
+                            color: theme.palette.typography.title,
+                            children: (0, _fixefyuiutils.titleCase)(curValue)
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                            option: option,
+                            isDisplay: modal == 'displayed'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(ChosenIcon, {
+                    option: option,
+                    isDisplay: modal == 'list'
+                })
+            ]
+        }, option === null || option === void 0 ? void 0 : option._id);
+    };
+    const DeleteButton = ({ option, isDisplay })=>{
+        const isDisplayButton = isDisplay && (multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed[search_path] === option[title_path]);
+        switch(isDisplayButton){
+            case true:
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    onClick: ()=>{
+                        deleteOneItem(option);
+                    },
+                    children: "x"
+                });
+            default:
+                return null;
+        }
+    };
+    const ChosenIcon = ({ option, isDisplay })=>{
+        if (isDisplay && isChecked(option)) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                width: 16,
+                height: 16,
+                icon: 'filters/chosen_icon.svg',
+                assetUrl: assetUrl
+            });
+        }
+        return null;
+    };
+    const Logo = ({ option })=>{
+        var _option_name;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+            style: {
+                width: '70px'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                assetUrl: assetUrl,
+                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: (0, _fixefyhooks.useRandomColor)()
+            })
+        });
+    };
+    const Chip = ({ option, curValue, modal })=>{
+        return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+            assetUrl: assetUrl,
+            status: curValue,
+            label: (0, _fixefyuiutils.titleCase)(curValue),
+            variant: "outlined",
+            onDelete: ()=>{
+                deleteOneItem(option);
+            }
+        }, option === null || option === void 0 ? void 0 : option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+            assetUrl: assetUrl,
+            status: curValue,
+            label: (0, _fixefyuiutils.titleCase)(curValue),
+            variant: "outlined"
+        }, option === null || option === void 0 ? void 0 : option._id);
+    };
+    const getSingleOptionFromListOrDisplayed = (option, modal)=>{
+        if (option) {
+            let rv = null;
+            switch(modal_type){
+                case 'chip':
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(Chip, {
+                        option: option,
+                        curValue: option[title_path],
+                        modal: modal
+                    });
+                    break;
+                case 'logo':
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
+                        option: option,
+                        curValue: option[title_path],
+                        modal: modal,
+                        modal_type: modal_type
+                    });
+                    break;
+                case 'text':
+                default:
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
+                        option: option,
+                        curValue: option[title_path],
+                        modal: modal
+                    });
+                    break;
+            }
+            return rv;
+        }
+    };
+    const getDisplayedValuesMultiple = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            direction: 'row',
+            sx: {
+                display: 'flex',
+                justifyContent: 'space-between'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                    direction: 'row',
+                    sx: {
+                        overflow: 'hidden',
+                        flexWrap: 'wrap',
+                        gap: 1
+                    },
+                    children: displayed.map((item)=>{
+                        return getSingleOptionFromListOrDisplayed(item, 'displayed');
+                    })
+                }),
+                (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    sx: {
+                        minWidth: '20px',
+                        maxWidth: '20px',
+                        cursor: 'pointer',
+                        paddingLeft: '3px'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        assetUrl: assetUrl,
+                        onClick: ()=>{
+                            setDisplayed([]);
+                            onRemoveAll();
+                            sessionStorage.removeItem(`dropdown-${query}-${name}-${_id}`);
+                        },
+                        icon: 'filters/remove_all_button.svg',
+                        width: 16,
+                        height: 16
+                    })
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
+        style: rootStylesOverride,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                children: [
+                    getCurrentValues(),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.InputWrapper, {
+                        disabled: disabled,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                            autoFocus: true,
+                            placeholder: placeholder || 'Select an option...',
+                            onChange: (e)=>{
+                                handleSearch(e);
+                            },
+                            onFocus: ()=>{
+                                if (!isInitialOpen) {
+                                    setIsOpen(true);
+                                }
+                            }
+                        })
+                    })
+                ]
+            }),
+            (isInitialOpen || isOpen) && options && (options === null || options === void 0 ? void 0 : options.length) > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
+                ref: ref,
+                children: [
+                    displayListOptions(),
+                    !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            onClick: ()=>{
+                                setReason('loaded more');
+                                loadMore();
+                            },
+                            children: "load more"
+                        })
+                    })
+                ]
+            }) : null
+        ]
+    });
+};

package/dist/fixefy-ui-components/src/FxObjStaticDropdown/index.js

@@ -0,0 +1,25 @@
+"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, {
+    AsyncDropdownPropsType: function() {
+        return _FxObjStaticDropdown.AsyncDropdownPropsType;
+    },
+    FxObjStaticDropdown: function() {
+        return _FxObjStaticDropdown.FxObjStaticDropdown;
+    },
+    Option: function() {
+        return _FxObjStaticDropdown.Option;
+    },
+    StylesOptions: function() {
+        return _FxObjStaticDropdown.StylesOptions;
+    }
+});
+const _FxObjStaticDropdown = require("./FxObjStaticDropdown");