@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/crm/Loader.jsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import { usePromiseTracker } from 'react-promise-tracker';
+import styles from './styles/Loader.module.scss';
+
+function VisnsLoader({}) {
+    const { promiseInProgress } = usePromiseTracker();
+    const [loaderStyle, setLoaderStyle] = useState({
+        opacity: 0,
+    });
+
+    useEffect(() => {
+        setLoaderStyle({
+            opacity: promiseInProgress === true ? 1 : 0,
+        });
+    }, [promiseInProgress]);
+
+    return (
+        <div className={styles.preloader} style={loaderStyle}>
+            <div className={styles.preloader__icn}>
+                <div className={styles.preloader__cut}>
+                    <div className={styles.preloader__donut}></div>
+                </div>
+            </div>
+            <span>Processing Data</span>
+        </div>
+    );
+}
+
+export default VisnsLoader;

package/src/components/crm/MultiSelect.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import SelectList from './SelectList';
+import Select, { createFilter } from 'react-select';
+import styles from './styles/AsyncSelect.module.scss';
+
+function MultiSelect({
+    className,
+    inputValue,
+    multi,
+    onChange,
+    options,
+    placeholder,
+    settings,
+    style,
+}) {
+    const [selectOptions, setSelectOptions] = useState([]);
+
+    useEffect(() => {
+        let _options = [];
+
+        if (options.length > 0) {
+            options.forEach((a) => {
+                let _optionItem = {
+                    value: a.id,
+                    label: a.label,
+                };
+
+                Object.keys(a).forEach((b) => {
+                    if (b !== 'id') {
+                        _optionItem = {
+                            ..._optionItem,
+                            [b]: a[b],
+                        };
+                    }
+                });
+
+                _options.push(_optionItem);
+            });
+
+            setSelectOptions(_options);
+        }
+    }, [options]);
+
+    return (
+        <Select
+            closeMenuOnSelect={multi ? false : true}
+            isClearable
+            isSearchable
+            isMulti={multi}
+            filterOption={createFilter({ ignoreAccents: false })}
+            components={{ SelectList }}
+            options={selectOptions}
+            onChange={(inputValue, action) => {
+                onChange(inputValue, action, settings.id);
+            }}
+            className={
+                className
+                    ? `${styles.visns__ms} ${className}`
+                    : styles.visns__ms
+            }
+            classNamePrefix="visns-select"
+            styles={{
+                menu: (provided) => ({ ...provided, zIndex: 9999 }),
+                control: (base) => ({
+                    ...base,
+                    minHeight:
+                        style && style.multi_select_height
+                            ? style.multi_select_height
+                            : '52px',
+                }),
+            }}
+            value={inputValue}
+            placeholder={placeholder ? placeholder : 'Select...'}
+        />
+    );
+}
+
+export default MultiSelect;