@fixefy/fixefy-ui-components 0.1.943 → 0.1.945

package/dist/src/FxAsyncDropdown/FxAsyncDropdown.js

@@ -0,0 +1,628 @@
+// @ts-ignore
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxAsyncDropdown", {
+    enumerable: true,
+    get: function() {
+        return FxAsyncDropdown;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _iconsmaterial = require("@mui/icons-material");
+const _material = require("@mui/material");
+const _FxChip = require("../FxChip");
+const _FxIcon = require("../FxIcon");
+const _graphqltag = require("graphql-tag");
+const _dropdownstyles = require("./styles/dropdown.styles");
+const _helpers = require("./helpers/helpers");
+const _client = require("@apollo/client");
+const _nookies = require("nookies");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return 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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const icon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
+    fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox, {
+    fontSize: "small"
+});
+const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
+    var _props_styles;
+    const { onAdd, onRemoveOne, onRemoveAll, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
+    const ref = (0, _react.useRef)(null);
+    const theme = (0, _material.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 [searchValue, setSearchValue] = (0, _react.useState)(null);
+    const [page, setPage] = (0, _react.useState)(1);
+    const [prevPage, setPrevPage] = (0, _react.useState)(0);
+    const pageSize = 20;
+    const { method_name } = variables;
+    const ws = (0, _nookies.parseCookies)().ws;
+    const isLocal = fetcher.query.loc;
+    const getWhere = ()=>{
+        if (variables.method_name == 'workspace') {
+            return searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
+                _id: ws,
+                [search_path]: {
+                    $regex: searchValue
+                }
+            }) : _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
+                _id: ws
+            });
+        } else {
+            return searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
+                [search_path]: {
+                    $regex: searchValue
+                }
+            }) : _object_spread({}, fetcher.queryOptions.variables.where);
+        }
+    };
+    const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(isLocal ? fetcher.query.loc.source.body : fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+        variables: _object_spread_props(_object_spread({}, fetcher.queryOptions.variables), {
+            where: getWhere(),
+            skip: page * pageSize - pageSize,
+            limit: pageSize
+        })
+    }));
+    (0, _react.useEffect)(()=>{
+        if (!disabled) {
+            fetch();
+        }
+    }, []);
+    (0, _react.useEffect)(()=>{
+        const storedData = sessionStorage.getItem(`dropdown-${query}`);
+        if (storedData) {
+            const parsedData = JSON.parse(storedData);
+            const items = parsedData[name];
+            if (items) {
+                multiple ? setDisplayed([
+                    ...items
+                ]) : setDisplayed(items[0]);
+            }
+        }
+    }, [
+        query,
+        name
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (data && !isLastPage && prevPage < page) {
+            //raaya todo: this is too messy clean it
+            const newOptions = variables.method_name == 'workspace' ? data.workspace[search_path === null || search_path === void 0 ? void 0 : search_path.split('.')[1]] : data[method_name];
+            if (newOptions.length === 0 || newOptions.length < pageSize) {
+                setIsLastPage(true);
+            }
+            if (reason === 'searched' || reason === 'init') {
+                setOptions(newOptions);
+            } else if (reason === 'loaded more') {
+                setOptions((prevOptions)=>[
+                        ...prevOptions,
+                        ...newOptions
+                    ]);
+            }
+        }
+    }, [
+        data,
+        reason
+    ]);
+    const handleSearch = (e)=>{
+        setSearchValue(e.target.value);
+        setReason('searched');
+        setPage(1);
+        setPrevPage(0);
+        setIsLastPage(false);
+    };
+    const addToStoredDisplayed = (option)=>{
+        const prevStored = sessionStorage.getItem(`dropdown-${query}`);
+        let 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}`, JSON.stringify(data));
+    };
+    const removeOneFromStoredDisplayed = (option)=>{
+        let storedDisplayed = sessionStorage.getItem(`dropdown-${query}`);
+        if (storedDisplayed) {
+            storedDisplayed = JSON.parse(storedDisplayed);
+            if (multiple) {
+                const newDisplayed = storedDisplayed[name].filter((opt)=>{
+                    if (search_path.includes('workspace')) {
+                        return opt['title'] !== option['title'];
+                    } else {
+                        return opt[search_path] !== option[search_path];
+                    }
+                });
+                storedDisplayed[name] = newDisplayed;
+            } else {
+                delete storedDisplayed[name];
+            }
+            sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(storedDisplayed));
+        }
+    };
+    const handleOptionClick = (option)=>{
+        let clicked = getClicked(option);
+        switch(multiple){
+            case true:
+                if (displayed.map((item)=>{
+                    if (search_path.includes('workspace')) {
+                        return item['title'];
+                    } else {
+                        return item[search_path];
+                    }
+                }).includes(clicked)) {
+                    deleteOneItem(option);
+                } else {
+                    onAdd && onAdd(option);
+                    setDisplayed((prev)=>[
+                            ...prev,
+                            option
+                        ]);
+                    addToStoredDisplayed(option);
+                }
+                break;
+            default:
+                setDisplayed(option);
+                onAdd && onAdd(option);
+                addToStoredDisplayed(option);
+        }
+    };
+    const deleteOneItem = (item)=>{
+        if (multiple) {
+            if (search_path.includes('workspace')) {
+                setDisplayed((prev)=>prev.filter((val)=>val['title'] !== item['title']));
+            } else {
+                setDisplayed((prev)=>prev.filter((val)=>val[search_path] !== item[search_path]));
+            }
+        } else {
+            setDisplayed('');
+        }
+        onRemoveOne && onRemoveOne(item);
+        removeOneFromStoredDisplayed(item);
+    };
+    const isChecked = (option)=>{
+        const clicked = getClicked(option);
+        if (typeof displayed === 'string') {
+            return false;
+        } else {
+            if (multiple) {
+                return displayed.map((item)=>{
+                    if (search_path.includes('workspace')) {
+                        return item['title'];
+                    } else {
+                        return item[search_path];
+                    }
+                }).includes(clicked);
+            } else {
+                return displayed[search_path] === clicked;
+            }
+        }
+    };
+    const handleListOptions = ()=>{
+        switch(type){
+            case 'checkbox':
+                {
+                    return options.map((option)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                            onClick: ()=>{
+                                handleOptionClick(option);
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                    icon: icon,
+                                    checked: isChecked(option),
+                                    checkedIcon: checkedIcon,
+                                    sx: {
+                                        mr: 1,
+                                        minWidth: 24,
+                                        minHeight: 24,
+                                        p: 0,
+                                        ['& svg']: {
+                                            fill: theme.palette.primary.light
+                                        }
+                                    }
+                                }),
+                                getValueByModalType(option, 'list')
+                            ]
+                        }, option._id);
+                    });
+                }
+            case 'text':
+            default:
+                {
+                    return options.map((option)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                            onClick: ()=>{
+                                handleOptionClick(option);
+                            },
+                            children: getValueByModalType(option, 'list')
+                        }, option._id);
+                    });
+                }
+        }
+    };
+    (0, _react.useImperativeHandle)(parentRef, ()=>({
+            clearDDL: ()=>{
+                var //@ts-ignore
+                _getClearProps;
+                (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(null);
+            }
+        }));
+    const loadMore = ()=>{
+        setPage((prevPage)=>prevPage + 1);
+        setPrevPage((prevPage)=>prevPage + 1);
+    };
+    const getClicked = (option)=>{
+        if (option != '') {
+            let clicked = (0, _helpers.getJPart)(option, search_path, 0) || option.title;
+            if (clicked !== null && typeof clicked === 'object') {
+                clicked = clicked[0];
+            }
+            return clicked;
+        }
+        return null;
+    };
+    const getCurrentValues = ()=>{
+        let rv = null;
+        switch(multiple){
+            case true:
+                rv = getMultipleDisplayedValues();
+                break;
+            case false:
+            default:
+                rv = getValueByModalType(displayed, 'displayed');
+                break;
+        }
+        return rv;
+    };
+    const DeleteButton = ({ option })=>{
+        let rv = null;
+        switch(multiple){
+            case true:
+                if ((displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0) {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        onClick: ()=>{
+                            deleteOneItem(option);
+                        },
+                        children: "x"
+                    });
+                }
+                break;
+            case false:
+            default:
+                if (displayed[search_path] === getClicked(option)) {
+                    rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        onClick: ()=>{
+                            deleteOneItem(option);
+                        },
+                        children: "x"
+                    });
+                }
+                break;
+        }
+        return rv;
+    };
+    const getValueByModalType = (option, location)=>{
+        let rv = null;
+        const clicked = getClicked(option);
+        switch(modal_type){
+            case 'chip':
+                rv = location === 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+                    status: clicked,
+                    label: (0, _helpers.titleCase)(clicked),
+                    variant: "outlined",
+                    onDelete: ()=>{
+                        deleteOneItem(option);
+                    }
+                }, option._id) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+                    status: clicked,
+                    label: (0, _helpers.titleCase)(clicked),
+                    variant: "outlined"
+                }, option._id);
+                break;
+            case 'logo':
+                rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        gap: 1,
+                        color: 'grey',
+                        cursor: 'pointer',
+                        width: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            style: {
+                                width: '70px'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                                icon: `companies/${option.logo}`,
+                                width: 70,
+                                height: 16
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                            sx: {
+                                width: '170px',
+                                overflow: 'hidden',
+                                display: 'flex',
+                                justifyContent: 'flex-start',
+                                gap: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _helpers.titleCase)(clicked)
+                                }),
+                                location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                    option: option
+                                })
+                            ]
+                        }),
+                        location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                            width: 16,
+                            height: 16,
+                            icon: 'filters/chosen_icon.svg'
+                        })
+                    ]
+                }, option._id);
+                break;
+            case 'text':
+            default:
+                rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                        maxWidth: '250px',
+                        gap: 1,
+                        color: 'grey',
+                        cursor: 'pointer'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                            sx: {
+                                width: '210px',
+                                overflow: 'hidden',
+                                display: 'flex',
+                                justifyContent: 'flex-start',
+                                gap: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _helpers.titleCase)(clicked)
+                                }),
+                                location === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
+                                    option: option
+                                })
+                            ]
+                        }),
+                        location === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                            width: 16,
+                            height: 16,
+                            icon: 'filters/chosen_icon.svg'
+                        })
+                    ]
+                }, option._id);
+                break;
+        }
+        return rv;
+    };
+    const getMultipleDisplayedValues = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            direction: 'row',
+            sx: {
+                maxWidth: 270,
+                minWidth: 270,
+                display: 'flex',
+                justifyContent: 'space-between'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: 'row',
+                    sx: {
+                        overflow: 'hidden',
+                        flexWrap: 'wrap',
+                        gap: 1
+                    },
+                    children: displayed.map((item)=>{
+                        return getValueByModalType(item, 'displayed');
+                    })
+                }),
+                (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        minWidth: '20px',
+                        maxWidth: '20px',
+                        cursor: 'pointer'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                        onClick: ()=>{
+                            setDisplayed([]);
+                            onRemoveAll && onRemoveAll();
+                            sessionStorage.removeItem(`dropdown-${query}`);
+                        },
+                        icon: `filters/remove_all_button.svg`,
+                        width: 16,
+                        height: 16
+                    })
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
+        sx: {
+            background: '#FFFFFF',
+            padding: '0 16px'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                children: [
+                    getCurrentValues(),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
+                        disabled: disabled,
+                        sx: {
+                            width: '100%',
+                            border: 'none !important',
+                            outline: 'none !important'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                style: {
+                                    border: 'none',
+                                    outline: 'none'
+                                },
+                                autoFocus: true,
+                                placeholder: "Select an option...",
+                                onChange: (e)=>{
+                                    handleSearch(e);
+                                }
+                            }),
+                            loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            options.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
+                sx: _object_spread_props(_object_spread({}, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.menuSx), {
+                    '&::-webkit-scrollbar': {
+                        width: '8px',
+                        backgroundColor: 'transparent'
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                        backgroundColor: '#8B9092',
+                        borderRadius: '8px'
+                    },
+                    // To support Firefox
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: '#8B9092 transparent',
+                    maxHeight: '300px',
+                    overflowY: 'auto'
+                }),
+                ref: ref,
+                children: [
+                    handleListOptions(),
+                    !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            onClick: ()=>{
+                                setReason('loaded more');
+                                loadMore();
+                            },
+                            children: "load more"
+                        })
+                    })
+                ]
+            }) : null
+        ]
+    });
+});