@fixefy/fixefy-ui-components 0.1.59 → 0.1.60

package/dist/FxAsyncDropdown/FxAsyncDropdown.d.ts

@@ -14,27 +14,16 @@ export type AsyncDropdownPropsType = {
     debug?: boolean;
     initialValue?: Option | any;
     styles?: StylesOptions;
-    structure: {
-        name: string;
-        extended: {
-            title: string;
-            title_path: string;
-            search_path: string;
-            variables: {
-                method_name: string;
-            };
-        };
-        children: any;
-    };
-    fetcher: {
-        query: any;
-        queryOptions: any;
-    };
+    method_name: string;
     multiple?: boolean;
+    name: any;
+    variables: any;
     onChange?: (value: any, name: string) => void;
     type?: 'checkbox' | 'text';
     renderOptions?: (option: Option, index: number) => void;
     [x: string]: any;
     showSelectedValue?: boolean;
+    modal_type?: string;
+    query: string;
 };
 export declare const FxAsyncDropdown: React.ForwardRefExoticComponent<Omit<AsyncDropdownPropsType, "ref"> & React.RefAttributes<unknown>>;

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -10,14 +10,16 @@ Object.defineProperty(exports, "FxAsyncDropdown", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _lodash = /*#__PURE__*/ _interop_require_default(require("lodash"));
-const _iconsmaterial = require("@mui/icons-material");
-const _graphqltag = require("graphql-tag");
-const _client = require("@apollo/client");
-const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _iconsmaterial = require("@mui/icons-material");
 const _material = require("@mui/material");
+const _FxChip = require("../FxChip");
+const _graphqltag = require("graphql-tag");
 const _dropdownstyles = require("./styles/dropdown.styles");
+const _helpers = require("./helpers/helpers");
+const _client = require("@apollo/client");
+const _FxIcon = require("../FxIcon");
+const _nookies = require("nookies");
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -31,11 +33,6 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-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();
@@ -150,82 +147,76 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
     fontSize: "small"
 });
 const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
-    var _structure_extended, _props_styles, _props_styles1, _props_styles2;
+    var _props_styles;
     const ref = (0, _react.useRef)(null);
     const theme = (0, _material.useTheme)();
+    const [value, setValue] = (0, _react.useState)(null);
+    const [displayedValue, setDisplayedValue] = (0, _react.useState)('');
     const [options, setOptions] = (0, _react.useState)([]);
-    const [loadingData, setLoadingData] = (0, _react.useState)(false);
+    // const [loadingData, setLoadingData] = useState(false)
+    const [reason, setReason] = (0, _react.useState)('init');
     const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
     const [searchValue, setSearchValue] = (0, _react.useState)(null);
     const [hasClearBtn, setHasClearBtn] = (0, _react.useState)(false);
     const [page, setPage] = (0, _react.useState)(1);
     const [prevPage, setPrevPage] = (0, _react.useState)(0);
-    const [pageSize] = (0, _react.useState)(20);
-    const { debug, structure, onChange, onClear, renderOptions, fetcher, initialValue = {}, multiple, disabled, type = 'text', showSelectedValue } = props, rest = _object_without_properties(props, [
-        "debug",
-        "structure",
-        "onChange",
-        "onClear",
-        "renderOptions",
-        "fetcher",
-        "initialValue",
-        "multiple",
-        "disabled",
-        "type",
-        "showSelectedValue"
-    ]);
-    const { name, extended, children } = structure;
-    const { search_path, variables } = extended;
+    const pageSize = 20;
+    const { debug, onChange, // onClear,
+    renderOptions, fetcher, // initialValue = {},
+    // multiple,
+    disabled, type = 'text', // showSelectedValue = true,
+    title_path, variables, search_path, modal_type, query, name } = props;
     const { method_name } = variables;
+    const ws = (0, _nookies.parseCookies)().ws;
+    const storedFilters = sessionStorage.getItem(query) || {};
+    (0, _react.useEffect)(()=>{
+        if (storedFilters[name]) {
+            const storedOperator = Object.keys(storedFilters[name])[0];
+            setDisplayedValue((0, _helpers.titleCase)(storedFilters[name][storedOperator].replaceAll('_', ' ')));
+        }
+    }, [
+        name,
+        query
+    ]);
+    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)(fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
         variables: _object_spread_props(_object_spread({}, fetcher.queryOptions.variables), {
-            where: searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
-                [search_path]: searchValue
-            }) : _object_spread({}, fetcher.queryOptions.variables.where),
+            where: getWhere(),
             skip: page * pageSize - pageSize,
             limit: pageSize
         })
     }));
-    var _structure_extended_title_path;
-    const labelOption = (_structure_extended_title_path = structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path) !== null && _structure_extended_title_path !== void 0 ? _structure_extended_title_path : 'title';
-    const { getRootProps, getInputProps, getClearProps, getListboxProps, getOptionProps, groupedOptions, value, popupOpen, focused, setAnchorEl } = (0, _material.useAutocomplete)(_object_spread_props(_object_spread({}, rest), {
-        defaultValue: initialValue,
-        options: options,
-        disableCloseOnSelect: !!multiple,
-        multiple,
-        disabled: disabled,
-        isOptionEqualToValue: (option, value)=>{
-            return option._id === value._id;
-        },
-        getOptionLabel: (option)=>{
-            var _option_labelOption;
-            return (0, _fixefyuiutils.titleCase)((_option_labelOption = option[labelOption]) !== null && _option_labelOption !== void 0 ? _option_labelOption : option.title);
-        }
-    }));
-    const onPopupScroll = _lodash.default.debounce(()=>{
-        if (ref && ref.current) {
-            //@ts-ignore
-            const threshHold = ref.current.scrollHeight / 2;
-            //@ts-ignore
-            if (ref.current.scrollTop > threshHold && !loadingData && !isLastPage) {
-                setLoadingData(true);
-                setPage((prevPage)=>prevPage + 1);
-                setPrevPage((prevPage)=>prevPage + 1);
-            }
-        }
-    }, 800);
-    const createTitle = ()=>{
-        if (Array.isArray(value)) {
-            if (value && value.length) {
-                return `${(0, _fixefyuiutils.titleCase)(name)} (${value.length})`;
-            }
-        }
-        return (0, _fixefyuiutils.titleCase)(name);
-    };
-    const handleSearch = _lodash.default.debounce((e)=>{
+    const handleSearch = (e)=>{
         setSearchValue(e.target.value);
+        setDisplayedValue(e.target.value);
+        setReason('searched');
         setPage(1);
-    }, 300);
+        setPrevPage(0);
+        setIsLastPage(false);
+    };
+    (0, _react.useEffect)(()=>{
+        //@ts-ignore
+        onChange && value && onChange(value, name);
+    }, [
+        value
+    ]);
     const handleChildrens = (_param)=>{
         var { structure } = _param, rest = _object_without_properties(_param, [
             "structure"
@@ -261,89 +252,100 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
     };
     const handleRenderOptions = ()=>{
         debug === true && console.log('renderOptions: ', renderOptions);
-        if (renderOptions) {
-            return groupedOptions.map((option, index)=>{
-                const CustomeComponent = renderOptions(option, index);
-                //@ts-ignore
-                return /*#__PURE__*/ _react.default.cloneElement(CustomeComponent, _object_spread({}, getOptionProps({
-                    option,
-                    index
-                })));
-            });
-        } else {
-            switch(type){
-                case 'checkbox':
-                    {
-                        return groupedOptions.map((option, index)=>{
-                            const isSelected = getOptionProps({
-                                option,
-                                index
-                            })['aria-selected'];
-                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", _object_spread_props(_object_spread({}, getOptionProps({
-                                option,
-                                index
-                            })), {
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                        icon: icon,
-                                        checked: Boolean(isSelected),
-                                        checkedIcon: checkedIcon,
-                                        sx: {
-                                            mr: 1,
-                                            minWidth: 24,
-                                            minHeight: 24,
-                                            p: 0,
-                                            ['& svg']: {
-                                                fill: theme.palette.primary.light
-                                            }
+        switch(type){
+            case 'checkbox':
+                {
+                    return options.map((option)=>{
+                        var _option_title_path;
+                        const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
+                        let title = (0, _helpers.getJPart)(option, title_path, 0);
+                        //if title is an array need to extract the first element
+                        if (typeof title === 'object' && title.length > 0) {
+                            title = title[0];
+                        }
+                        var _option_title;
+                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                            onClick: ()=>{
+                                setValue(option);
+                                setDisplayedValue(displayedVal);
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                    icon: icon,
+                                    checked: value === option,
+                                    checkedIcon: checkedIcon,
+                                    sx: {
+                                        mr: 1,
+                                        minWidth: 24,
+                                        minHeight: 24,
+                                        p: 0,
+                                        ['& svg']: {
+                                            fill: theme.palette.primary.light
                                         }
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "subtitle2",
+                                    color: theme.palette.typography.title,
+                                    children: (0, _helpers.titleCase)((_option_title = option === null || option === void 0 ? void 0 : option.title) !== null && _option_title !== void 0 ? _option_title : title)
+                                })
+                            ]
+                        }, option._id);
+                    });
+                }
+            case 'text':
+                {
+                    return options.map((option)=>{
+                        debug === true && console.log('renderOptions: ', title_path, option[title_path], options);
+                        var _option_title_path;
+                        const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                            onClick: ()=>{
+                                setValue(option);
+                                setDisplayedValue((0, _helpers.titleCase)(displayedVal));
+                            },
+                            children: modal_type === 'chip' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+                                status: option.value,
+                                label: (0, _helpers.titleCase)(displayedVal),
+                                variant: "outlined"
+                            }) : modal_type === 'logo' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                                        icon: `companies/${option.logo}`,
+                                        width: 70,
+                                        height: 16
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        sx: {
+                                            marginLeft: '5px'
+                                        },
                                         variant: "subtitle2",
                                         color: theme.palette.typography.title,
-                                        children: (0, _fixefyuiutils.titleCase)(option === null || option === void 0 ? void 0 : option.title)
+                                        children: (0, _helpers.titleCase)(displayedVal)
                                     })
                                 ]
-                            }));
-                        });
-                    }
-                case 'text':
-                    {
-                        return groupedOptions.map((option, index)=>{
-                            var _structure_extended, _structure_extended1, _structure_extended2;
-                            debug === true && console.log('renderOptions: ', structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path, option[structure === null || structure === void 0 ? void 0 : (_structure_extended1 = structure.extended) === null || _structure_extended1 === void 0 ? void 0 : _structure_extended1.title_path], options);
-                            var _option_structure_extended_title_path;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", _object_spread_props(_object_spread({}, getOptionProps({
-                                option,
-                                index
-                            })), {
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "subtitle2",
-                                    color: theme.palette.typography.title,
-                                    children: (0, _fixefyuiutils.titleCase)((_option_structure_extended_title_path = option[structure === null || structure === void 0 ? void 0 : (_structure_extended2 = structure.extended) === null || _structure_extended2 === void 0 ? void 0 : _structure_extended2.title_path]) !== null && _option_structure_extended_title_path !== void 0 ? _option_structure_extended_title_path : option.title)
-                                })
-                            }));
-                        });
-                    }
-                default:
-                    {
-                        return groupedOptions.map((option, index)=>{
-                            var _structure_extended, _structure_extended1, _structure_extended2;
-                            debug === true && console.log('renderOptions: ', structure === null || structure === void 0 ? void 0 : (_structure_extended = structure.extended) === null || _structure_extended === void 0 ? void 0 : _structure_extended.title_path, option[structure === null || structure === void 0 ? void 0 : (_structure_extended1 = structure.extended) === null || _structure_extended1 === void 0 ? void 0 : _structure_extended1.title_path], options);
-                            var _option_structure_extended_title_path;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", _object_spread_props(_object_spread({}, getOptionProps({
-                                option,
-                                index
-                            })), {
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "subtitle2",
-                                    color: theme.palette.typography.title,
-                                    children: (0, _fixefyuiutils.titleCase)((_option_structure_extended_title_path = option[structure === null || structure === void 0 ? void 0 : (_structure_extended2 = structure.extended) === null || _structure_extended2 === void 0 ? void 0 : _structure_extended2.title_path]) !== null && _option_structure_extended_title_path !== void 0 ? _option_structure_extended_title_path : option.title)
-                                })
-                            }));
+                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                variant: "subtitle2",
+                                color: theme.palette.typography.title,
+                                children: (0, _helpers.titleCase)(displayedVal)
+                            })
+                        }, option._id);
+                    });
+                }
+            default:
+                {
+                    return options.map((option)=>{
+                        debug === true && console.log('renderOptions: ', title_path, option[title_path], options);
+                        var _option_title_path;
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                variant: "subtitle2",
+                                color: theme.palette.typography.title,
+                                children: (0, _helpers.titleCase)((_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title)
+                            })
                         });
-                    }
-            }
+                    });
+                }
         }
     };
     (0, _react.useImperativeHandle)(parentRef, ()=>({
@@ -353,32 +355,11 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
                 (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(null);
             }
         }));
-    (0, _react.useEffect)(()=>{
-        if (ref && ref.current) {
-            //@ts-ignore
-            ref.current.addEventListener('scroll', ()=>onPopupScroll());
-        }
-        return ()=>{
-            if (ref && ref.current) {
-                //@ts-ignore
-                ref.current.removeEventListener('scroll', ()=>onPopupScroll());
-            }
-        };
-    }, [
-        groupedOptions
-    ]);
-    (0, _react.useEffect)(()=>{
-        onChange && onChange(value, name);
-    }, [
-        value
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (popupOpen && !isLastPage && prevPage < page && !disabled) {
-            fetch();
-        }
-    }, [
-        popupOpen
-    ]);
+    const loadMore = ()=>{
+        // setLoadingData(true)
+        setPage((prevPage)=>prevPage + 1);
+        setPrevPage((prevPage)=>prevPage + 1);
+    };
     (0, _react.useEffect)(()=>{
         if (!disabled) {
             fetch();
@@ -386,71 +367,83 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
     }, []);
     (0, _react.useEffect)(()=>{
         if (data && !isLastPage && prevPage < page) {
-            const newOptions = data[method_name];
+            //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);
             }
-            setOptions([
-                ...newOptions,
-                ...options
-            ]);
-            setLoadingData(false);
+            if (reason === 'searched' || reason === 'init') {
+                setOptions(newOptions);
+            } else if (reason === 'loaded more') {
+                setOptions((prevOptions)=>[
+                        ...prevOptions,
+                        ...newOptions
+                    ]);
+            }
+        // setLoadingData(false)
         }
     }, [
-        data
+        data,
+        reason
     ]);
-    var _props_styles_width, _props_styles_maxWidth;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, _object_spread_props(_object_spread({
-                hasValue: !!(value && Object.keys(value).length),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
                 disabled: disabled,
                 sx: {
-                    width: (_props_styles_width = (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.width) !== null && _props_styles_width !== void 0 ? _props_styles_width : 180,
-                    maxWidth: (_props_styles_maxWidth = (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.maxWidth) !== null && _props_styles_maxWidth !== void 0 ? _props_styles_maxWidth : 300
-                }
-            }, getRootProps()), {
-                ref: setAnchorEl,
-                className: focused ? 'focused' : '',
+                    width: '100%',
+                    border: 'none !important',
+                    outline: 'none !important'
+                },
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, getInputProps()), {
-                        readOnly: true,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                        style: {
+                            border: 'none',
+                            outline: 'none'
+                        },
+                        autoFocus: true,
+                        defaultValue: displayedValue !== null && displayedValue !== void 0 ? displayedValue : '',
+                        placeholder: "Select an option...",
                         onChange: (e)=>{
-                            var //@ts-ignore
-                            _getInputProps;
-                            (_getInputProps = getInputProps()) === null || _getInputProps === void 0 ? void 0 : _getInputProps.onChange(e);
                             handleSearch(e);
-                        },
-                        placeholder: createTitle(),
-                        value: showSelectedValue ? (0, _fixefyuiutils.titleCase)(value.title) : undefined
-                    })),
-                    loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
+                        }
+                    }),
+                    loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.KeyboardArrowDown, {})
+                    })
                 ]
-            })),
-            groupedOptions.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Listbox, _object_spread_props(_object_spread({}, getListboxProps()), {
+            }),
+            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: '16px',
+                        backgroundColor: '#F5F5F5'
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                        backgroundColor: '#F5F5F580',
+                        borderRadius: '8px',
+                        border: '4px solid #F5F5F5'
+                    },
+                    // To support Firefox
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: '#F5F5F580 #F5F5F5',
+                    maxHeight: '300px',
+                    overflowY: 'auto'
+                }),
+                ref: ref,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.StyledListBox, {
-                        sx: _object_spread({}, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.menuSx),
-                        hasClearBtn: children === null || children === void 0 ? void 0 : children.length,
-                        ref: ref,
-                        children: handleRenderOptions()
-                    }),
-                    children && children.length ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.StyledClose, {
-                        children: handleChildrens({
-                            structure: children[0],
-                            onClick: (e)=>{
-                                var //@ts-ignore
-                                _getClearProps;
-                                onClear && onClear();
-                                (_getClearProps = getClearProps()) === null || _getClearProps === void 0 ? void 0 : _getClearProps.onClick(e);
+                    handleRenderOptions(),
+                    !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            onClick: ()=>{
+                                setReason('loaded more');
+                                loadMore();
                             },
-                            startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.Close, {})
+                            children: "load more"
                         })
-                    }) : null
+                    })
                 ]
-            })) : null
+            }) : null
         ]
     });
 });

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

@@ -2,3 +2,5 @@ export declare const getJPart: (j: any, jsonPath: string, defaultValue?: any) =>
 export declare const isArrayValid: (arr: any[], minLength?: number, maxLength?: number) => boolean;
 export declare const isObjectValid: (obj: any, isCheckKeys?: boolean) => boolean;
 export declare const isStringValid: (str: string, minLength?: number | null, maxLength?: number | null, isValidateType?: boolean) => boolean;
+export declare const titleCase: (str?: string) => string;
+export declare const toPascalCase: (string: string, title?: boolean) => string;

package/dist/FxAsyncDropdown/helpers/helpers.js

@@ -20,6 +20,12 @@ _export(exports, {
     },
     isStringValid: function() {
         return isStringValid;
+    },
+    titleCase: function() {
+        return titleCase;
+    },
+    toPascalCase: function() {
+        return toPascalCase;
     }
 });
 function _define_property(obj, key, value) {
@@ -96,7 +102,7 @@ const getJPart = (j, jsonPath, defaultValue)=>{
                 j = JSON.parse(j);
             } else {
                 j = j.reduce((acc, cur)=>{
-                    const innerJ = getJPart(cur, pathParts.slice(i).join("."), defaultValue);
+                    const innerJ = getJPart(cur, pathParts.slice(i).join('.'), defaultValue);
                     if (isArrayValid(innerJ)) {
                         acc.push(...innerJ);
                     } else {
@@ -149,3 +155,7 @@ const isStringValid = (str, minLength = null, maxLength = null, isValidateType =
     }
     return rv;
 };
+const titleCase = (str = '')=>str && toPascalCase(str.toString(), true);
+const toPascalCase = (string, title = false)=>{
+    return string && string.replace(/(_[a-z])?(^[a-z])?(_|\s[a-z])?/g, ($1)=>$1.toUpperCase().replace('_', title ? ' ' : ''));
+};

package/dist/FxIcon/FxIcon.d.ts

@@ -1,11 +1,6 @@
-export type IconPropsType = {
-    className?: string;
-    color?: unknown;
-    fontSize?: string | number;
-    height?: `${number}` | number;
+export declare const FxIcon: ({ icon, width, height, onClick, }: {
     icon: string;
-    sx?: any;
-    root: string;
-    width?: `${number}` | number;
-};
-export declare const FxIcon: ({ className, color, fontSize, icon, height, sx, width }: IconPropsType) => JSX.Element;
+    width: number;
+    height: number;
+    onClick?: (() => void) | undefined;
+}) => JSX.Element;

package/dist/FxIcon/FxIcon.js

@@ -9,23 +9,10 @@ Object.defineProperty(exports, "FxIcon", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _content = require("./content");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
-const _iconsmaterial = /*#__PURE__*/ _interop_require_wildcard(require("@mui/icons-material"));
-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;
-}
+const _image = /*#__PURE__*/ _interop_require_default(require("next/image"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -72,76 +59,49 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     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;
-}
-// importing all the local icons - in the future should be removed to CDN server
-const iconsModule = [];
-const FxIcon = ({ className, color, fontSize, icon, height, sx, width })=>{
-    if (!icon) throw Error('Provide a property `icon`');
-    let rv;
-    const splittedPath = icon.split('/');
-    const iconWithoutPath = (0, _fixefyuiutils.toPascalCase)(splittedPath[splittedPath.length - 1]);
-    // const name = toPascalCase(icon)
-    if (iconsModule[iconWithoutPath]) {
-        rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_content.DynamicIcon, {
-            icon: iconsModule[iconWithoutPath],
-            sx: sx
-        });
-    // @ts-ignore
-    } else if (_iconsmaterial[iconWithoutPath]) {
-        // @ts-ignore
-        const MUIIcon = _iconsmaterial[iconWithoutPath];
-        rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(MUIIcon, {
-            className: className,
-            color: color,
-            sx: _object_spread_props(_object_spread({}, sx), {
-                fontSize
+const PublicIcon = ({ icon, width, height, onClick })=>{
+    const [isError, setError] = (0, _react.useState)(false);
+    const handleError = (isError)=>setError(isError);
+    if (isError) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Avatar, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                fontSize: 29,
+                fontWeight: 600,
+                children: (0, _fixefyuiutils.toInitials)(icon)
             })
         });
-    } else {
-        rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_content.LazyIcon, {
-            icon: icon,
-            sx: sx,
-            width: width,
-            height: height
-        });
     }
-    return rv;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_image.default, {
+        alt: "",
+        width: width,
+        height: height,
+        loader: imageLoader,
+        src: icon,
+        onLoad: ()=>handleError(false),
+        onError: ()=>handleError(true),
+        onClick: onClick
+    });
+};
+const FxIcon = ({ icon, width, height, onClick })=>{
+    if (!icon) throw Error('Provide a property `icon`');
+    return parseIconFromLibrary({
+        icon,
+        width,
+        height,
+        onClick
+    });
+};
+const parseIconFromLibrary = ({ icon, width, height, onClick })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PublicIcon, {
+        icon: icon,
+        width: width,
+        height: height,
+        onClick: onClick
+    });
+};
+const imageLoader = ({ src })=>{
+    const transformedSrc = src.split('/');
+    transformedSrc.splice(transformedSrc.length - 1, 1, transformedSrc[transformedSrc.length - 1].split(/(?=[A-Z])/).join('_').toLowerCase());
+    const url = transformedSrc.join('/');
+    return `${process.env.NEXT_PUBLIC_ASSET_URL}/${url}`;
 };

package/dist/FxIcon/index.d.ts

@@ -1 +1 @@
-export { FxIcon, IconPropsType } from './FxIcon';
+export { FxIcon } from './FxIcon';

package/dist/FxIcon/index.js

@@ -2,18 +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, {
-    FxIcon: function() {
+Object.defineProperty(exports, "FxIcon", {
+    enumerable: true,
+    get: function() {
         return _FxIcon.FxIcon;
-    },
-    IconPropsType: function() {
-        return _FxIcon.IconPropsType;
     }
 });
 const _FxIcon = require("./FxIcon");

package/dist/FxScore/styles/score.styles.js

@@ -78,7 +78,8 @@ const useStyles = (0, _styles.makeStyles)((theme)=>({
             flexDirection: 'column'
         },
         scoreNumber: {
-            color: theme.palette.common.white
+            color: theme.palette.common.white,
+            fontWeight: 700
         },
         scoreText: _object_spread_props(_object_spread({}, theme.typography.table), {
             fontWeight: 400,

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { FxAsyncDropdown, Option, StylesOptions, AsyncDropdownPropsType } from '
 export { FxAvatar, AvatarPropsType, BackgroundColorsType } from './FxAvatar';
 export { FxButton, ButtonPropsType } from './FxButton';
 export { FxChip, ChipPropsType } from './FxChip';
-export { FxIcon, IconPropsType } from './FxIcon';
+export { FxIcon } from './FxIcon';
 export { FxModal, ModalPropsType } from './FxModal';
 export { FxNotes, NoteCreateInput, NotesPropsType } from './FxNotes';
 export { FxNumberField, NumberfieldPropsType } from './FxNumberField';
@@ -18,4 +18,4 @@ export { FxStatusBar, StatusBarPropsType, Options } from './FxStatusBar';
 export { FxTag, TagPropsType } from './FxTag';
 export { FxTextField, TextFieldPropsType } from './FxTextField';
 export { FxTodo, TodoItemType, TodoPropsType } from './FxTodo';
-export { Card, PageHeader, Label, BoldValue, Value, PageTitle, Link, Text, ShowMore, ShowMoreContainer, DataWrapper, Bars } from './FxStyledComponents';
+export { Card, PageHeader, Label, BoldValue, Value, PageTitle, Link, Text, ShowMore, ShowMoreContainer, DataWrapper, Bars, } from './FxStyledComponents';

package/dist/index.js

@@ -105,9 +105,6 @@ _export(exports, {
     FxTodo: function() {
         return _FxTodo.FxTodo;
     },
-    IconPropsType: function() {
-        return _FxIcon.IconPropsType;
-    },
     Label: function() {
         return _FxStyledComponents.Label;
     },

package/package.json

@@ -70,5 +70,5 @@
       "require": "./dist/index.js"
     }
   },
-  "version": "0.1.59"
+  "version": "0.1.60"
 }