@fixefy/fixefy-ui-components 0.3.108 → 0.3.110

package/dist/fixefy-ui-components/src/FxAsyncDropdown/components/LogoOption.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LogoOption", {
+    enumerable: true,
+    get: function() {
+        return LogoOption;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _FxIcon = require("../../FxIcon");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _styles = require("@mui/material/styles");
+const _helpers = require("../helpers/helpers");
+const _fixefyhooks = require("@fixefy/fixefy-hooks");
+const _DeleteButton = require("./DeleteButton");
+const _ChosenIcon = require("./ChosenIcon");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const LogoOption = ({ option, curValue, modal, fetchedProps, displayed, setDisplayed })=>{
+    const theme = (0, _styles.useTheme)();
+    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,
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Logo, {
+                        option: option,
+                        fetchedProps: fetchedProps
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                        sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
+                                variant: "subtitle2",
+                                color: theme.palette.typography.title,
+                                children: (0, _helpers.titleCase)(curValue)
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteButton.DeleteButton, {
+                                option: option,
+                                isDisplay: modal == 'displayed',
+                                fetchedProps: fetchedProps,
+                                displayed: displayed,
+                                setDisplayed: setDisplayed
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChosenIcon.ChosenIcon, {
+                option: option,
+                isDisplay: modal == 'list',
+                fetchedProps: fetchedProps,
+                displayed: displayed
+            })
+        ]
+    }, option._id);
+};
+const Logo = ({ option, fetchedProps })=>{
+    const getRandomColor = (0, _fixefyhooks.useRandomColor)();
+    const { assetUrl, logo_folder_name, logo_placeholder, name } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    var _option_name;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        style: {
+            width: '70px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+            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: getRandomColor()
+        })
+    });
+};

package/dist/fixefy-ui-components/src/FxAsyncDropdown/components/TextOption.js

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

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

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

package/dist/fixefy-ui-components/src/FxAsyncDropdown/helpers/helpers.js

@@ -0,0 +1,233 @@
+"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, {
+    addToStoredDisplayed: function() {
+        return addToStoredDisplayed;
+    },
+    deleteOneItem: function() {
+        return deleteOneItem;
+    },
+    getJPart: function() {
+        return getJPart;
+    },
+    getOption: function() {
+        return getOption;
+    },
+    isArrayValid: function() {
+        return isArrayValid;
+    },
+    isChecked: function() {
+        return isChecked;
+    },
+    isObjectValid: function() {
+        return isObjectValid;
+    },
+    isStringValid: function() {
+        return isStringValid;
+    },
+    removeOneFromStoredDisplayed: function() {
+        return removeOneFromStoredDisplayed;
+    },
+    titleCase: function() {
+        return titleCase;
+    },
+    toPascalCase: function() {
+        return toPascalCase;
+    },
+    useRandomColor: function() {
+        return useRandomColor;
+    }
+});
+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 _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;
+}
+const getJPart = (j, jsonPath, defaultValue, separator = '.', replacer = '^\\.*', joiner = '.')=>{
+    // if key is invalid - return error
+    if (j == null) return defaultValue;
+    // convert indexes to properties
+    jsonPath = jsonPath.replace(/\[(['"]?)(.*?)\1\]/g, `${separator}$2`);
+    // strip all leading dots
+    jsonPath = jsonPath.replace(replacer, '');
+    // split path by '.'
+    let isArrValid = false, isStrValid = false, currentPathPart;
+    const pathParts = jsonPath.split(separator);
+    for(let i = 0, n = pathParts.length; i < n; ++i){
+        currentPathPart = pathParts[i];
+        isStrValid = isStringValid(j);
+        isArrValid = isArrayValid(j);
+        if (isStrValid === true || isArrValid === true) {
+            if (isStrValid === true) {
+                j = JSON.parse(j);
+            } else {
+                j = j.reduce((acc, cur)=>{
+                    const innerJ = getJPart(cur, pathParts.slice(i).join(joiner !== null && joiner !== void 0 ? joiner : separator), defaultValue);
+                    if (isArrayValid(innerJ)) {
+                        acc.push(...innerJ);
+                    } else {
+                        acc.push(innerJ);
+                    }
+                    return acc;
+                }, []);
+                break;
+            }
+        } else {
+            if (j[currentPathPart] != null && currentPathPart in j) {
+                j = j[currentPathPart];
+            } else {
+                // if something in the process failed:
+                //  1. set the rv as the default value
+                //  2. stop the loop`
+                j = defaultValue;
+                break;
+            }
+        }
+    }
+    return j;
+};
+const isArrayValid = (arr, minLength = 1, maxLength = 0)=>{
+    let rv = isObjectValid(arr) && arr.length >= minLength && //arr instanceof Array
+    Object.prototype.toString.call(arr) == '[object Array]';
+    if (maxLength > 0) {
+        rv = rv && arr.length <= maxLength;
+    }
+    return rv;
+};
+const isObjectValid = (obj, isCheckKeys = false)=>{
+    let rv = typeof obj !== 'undefined' && obj !== null;
+    if (isCheckKeys) {
+        rv = rv && Object.keys(obj).length > 0;
+    }
+    return rv;
+};
+const isStringValid = (str, minLength = null, maxLength = null, isValidateType = true)=>{
+    let rv = isObjectValid(str) && str.toString().length > 0 && (isValidateType ? typeof str === 'string' : true);
+    if (rv === false) return false;
+    if (minLength && isNaN(minLength) === false && minLength > 0) {
+        rv = rv && str.toString().length >= minLength;
+    }
+    if (rv === false) return false;
+    if (maxLength && isNaN(maxLength) === false && maxLength > 0) {
+        rv = rv && str.toString().length <= maxLength;
+    }
+    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 ? ' ' : ''));
+};
+const useRandomColor = (theme)=>{
+    const paletteColors = _object_spread({}, theme.palette.colors);
+    const colors = Object.entries(paletteColors).filter(([key])=>!key.includes('light')).map(([_, value])=>value);
+    const getRandomColor = ()=>{
+        const randomIndex = Math.floor(Math.random() * colors.length);
+        return colors[randomIndex];
+    };
+    return getRandomColor;
+};
+const getOption = (option, title_path)=>{
+    if (option != '') {
+        let curOption = getJPart(option, title_path, 0);
+        if (curOption !== null && isArrayValid(curOption)) {
+            curOption = curOption[0];
+        }
+        return curOption;
+    }
+    return null;
+};
+const removeOneFromStoredDisplayed = (option, fetchedProps)=>{
+    const { multiple, title_path, name, _id, query } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    let storedDisplayed = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+    if (storedDisplayed) {
+        storedDisplayed = JSON.parse(storedDisplayed);
+        if (multiple) {
+            const newDisplayed = storedDisplayed[name].filter((opt)=>opt[title_path] !== option[title_path]);
+            storedDisplayed[name] = newDisplayed;
+        } else {
+            delete storedDisplayed[name];
+        }
+        sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(storedDisplayed));
+    }
+};
+const deleteOneItem = (item, fetchedProps, displayed, setDisplayed)=>{
+    const { multiple, title_path, onRemoveOne } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    if (multiple) {
+        const newDisplayed = displayed.filter((opt)=>opt[title_path] !== item[title_path]);
+        setDisplayed(newDisplayed);
+    } else {
+        setDisplayed('');
+    }
+    if (onRemoveOne) {
+        onRemoveOne(item);
+    }
+    removeOneFromStoredDisplayed(item, fetchedProps);
+};
+const addToStoredDisplayed = (option, fetchedProps)=>{
+    const { name, multiple, query, _id } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const prevStored = sessionStorage.getItem(`dropdown-${query}-${name}-${_id}`);
+    const data = prevStored ? JSON.parse(prevStored) : {};
+    if (data[name]) {
+        if (multiple) {
+            data[name] = [
+                ...data[name],
+                option
+            ];
+        } else {
+            data[name] = [
+                option
+            ];
+        }
+    } else {
+        data[name] = [
+            option
+        ];
+    }
+    sessionStorage.setItem(`dropdown-${query}-${name}-${_id}`, JSON.stringify(data));
+};
+const isChecked = (option, displayed, fetchedProps)=>{
+    const { multiple, title_path, search_path } = fetchedProps !== null && fetchedProps !== void 0 ? fetchedProps : {};
+    const clicked = getOption(option, title_path);
+    if (typeof displayed === 'string') {
+        return false;
+    } else {
+        if (multiple) {
+            return displayed.map((item)=>{
+                return item[title_path];
+            }).includes(clicked);
+        } else {
+            return displayed[search_path] === clicked;
+        }
+    }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxAsyncDropdown", {
+    enumerable: true,
+    get: function() {
+        return _FxAsyncDropdown.FxAsyncDropdown;
+    }
+});
+const _FxAsyncDropdown = require("./FxAsyncDropdown");

package/dist/fixefy-ui-components/src/FxAsyncDropdown/styles/dropdown.styles.js

@@ -0,0 +1,211 @@
+"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, {
+    InputWrapper: function() {
+        return InputWrapper;
+    },
+    Loading: function() {
+        return Loading;
+    },
+    Root: function() {
+        return Root;
+    },
+    StyledListBox: function() {
+        return StyledListBox;
+    }
+});
+const _styles = require("@mui/material/styles");
+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 _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 Root = (0, _styles.styled)('div')(({ props })=>{
+    return _object_spread_props(_object_spread({
+        color: 'rgba(0,0,0,.85)',
+        fontSize: 14,
+        background: '#FFFFFF',
+        padding: '0 16px',
+        position: 'relative',
+        ' & .MuiBox-root': {
+            ['& > div']: {
+                padding: 0
+            }
+        },
+        minWidth: 270
+    }, props), {
+        width: 'min-content'
+    });
+});
+const Loading = (0, _styles.styled)('div')(()=>({
+        width: 30,
+        height: 30,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ['& span']: {
+            width: '20px !important',
+            height: '20px !important'
+        }
+    }));
+const InputWrapper = (0, _styles.styled)('div')(({ theme, hasValue, disabled })=>{
+    const disabledBorder = `1px solid ${theme.palette.greyscale[200]}`;
+    const activeBorder = `1px solid ${theme.palette.primary[500]}`;
+    return {
+        backgroundColor: theme.palette.common.white,
+        borderRadius: 4,
+        padding: 1,
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        width: '100%',
+        border: 'none !important',
+        outline: 'none !important',
+        ['&:hover']: {
+            border: disabled ? disabledBorder : activeBorder,
+            borderRadius: 4
+        },
+        ['&:focus']: {
+            border: disabled ? disabledBorder : activeBorder,
+            borderRadius: 4
+        },
+        ['& > svg']: {
+            color: disabled ? theme.palette.greyscale[300] : theme.palette.primary['500'],
+            marginRight: 8
+        },
+        ['& input']: _object_spread_props(_object_spread({
+            border: 'none',
+            outline: 'none',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            backgroundColor: theme.palette.common.white,
+            color: theme.palette.typography.title,
+            height: 36,
+            boxSizing: 'border-box',
+            width: 0,
+            minWidth: 30,
+            flexGrow: 1,
+            margin: 0
+        }, theme.typography.body1), {
+            lineHeight: '20px',
+            ['& ::placeholder']: {
+                color: hasValue ? theme.palette.typography.title : theme.palette.greyscale[400]
+            }
+        })
+    };
+});
+const StyledListBox = (0, _styles.styled)('ul')(({ theme })=>{
+    return {
+        margin: 0,
+        padding: '8px 0px',
+        listStyle: 'none',
+        backgroundColor: theme.palette.common.white,
+        overflow: 'auto',
+        zIndex: 1,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflowX: 'hidden',
+        minWidth: 270,
+        '&::-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',
+        ['& div']: {
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            margin: 'auto 0'
+        },
+        ['& li']: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            height: 40,
+            cursor: 'pointer',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            width: '100%',
+            minWidth: 270,
+            marginBottom: 2
+        },
+        ['& li:hover']: {
+            backgroundColor: '#F6F9FA'
+        },
+        ['& li[aria-selected=\'true\']']: {
+            fontWeight: 900,
+            backgroundColor: '#F6F9FA'
+        },
+        ['& li[data-focus=\'true\']']: {
+            backgroundColor: '#F6F9FA',
+            cursor: 'pointer',
+            ['& svg ']: {
+                color: 'currentColor'
+            }
+        }
+    };
+});

package/dist/fixefy-ui-components/src/FxAsyncDropdown/types.js

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