@fixefy/fixefy-ui-components 0.3.30 → 0.3.31

package/dist/src/FxAsyncDropdown/FxAsyncDropdown.js

@@ -1,628 +0,0 @@
-// @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 == null || 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 && (options === null || options === void 0 ? void 0 : 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
-        ]
-    });
-});