@dilicorp/ui 0.2.46 → 0.2.47

package/dist/components/form-builder/components/infinite-select.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FormikProps } from 'formik';
+import { OnChangeValue } from 'react-select/dist/declarations/src/types';
+declare type Option = {
+    label: string | number;
+    value: string | number;
+};
+declare type Props = {
+    name: string;
+    actions: FormikProps<any>;
+    options?: Option[];
+    defaultOptions?: Option[];
+    id?: string;
+    value?: Option | Option[];
+    placeholder?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    onChange?: (event: {
+        currentTarget: {
+            value: OnChangeValue<Option, boolean>;
+            name: string;
+        };
+    }) => void;
+    selectRef?: React.MutableRefObject<any>;
+    loadOptions?: (newValue: string) => void;
+    loadMoreOptions?: () => void;
+};
+export default function InfiniteSelect(props: Props): JSX.Element;
+export {};
+//# sourceMappingURL=infinite-select.d.ts.map

package/dist/components/form-builder/components/infinite-select.js

@@ -0,0 +1,30 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import AsyncSelect from 'react-select/async';
+export default function InfiniteSelect(props) {
+    const { actions, options = [], defaultOptions = [], name, id = name, value = null, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, selectRef, onChange, loadOptions, loadMoreOptions } = props;
+    const [currValue, setValue] = useState(value || null);
+    useEffect(() => {
+        if (value !== currValue) {
+            actions.setFieldValue(name, '');
+            setValue(null);
+        }
+    }, [options]);
+    const handleChange = useCallback((newValue) => {
+        if (onChange) {
+            onChange({
+                currentTarget: {
+                    value: newValue,
+                    name
+                }
+            });
+        }
+        actions.setFieldValue(name, JSON.stringify(newValue));
+        setValue(newValue);
+    }, [onChange, actions, name]);
+    const handleMenuScrollToBottom = useCallback(() => {
+        if (loadMoreOptions && options.length >= 100) {
+            loadMoreOptions();
+        }
+    }, [loadMoreOptions, options]);
+    return (React.createElement(AsyncSelect, { ref: selectRef, placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: options, defaultOptions: defaultOptions, name: name, id: id, "data-testid": id, defaultValue: currValue, value: currValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, onChange: handleChange, loadOptions: loadOptions, onMenuScrollToBottom: handleMenuScrollToBottom }));
+}

package/dist/components/form-builder/form-builder-components-list.d.ts

@@ -7,5 +7,6 @@ export declare const FormBuilderComponentsList: {
     password: any;
     radio: any;
     select: any;
+    infiniteSelect: any;
 };
 //# sourceMappingURL=form-builder-components-list.d.ts.map

package/dist/components/form-builder/form-builder-components-list.js

@@ -6,6 +6,7 @@ import Input from './components/input';
 import Password from './components/password';
 import Radio from './components/radio';
 import Select from './components/select';
+import InfiniteSelect from './components/infinite-select';
 export const FormBuilderComponentsList = {
     button: Button,
     checkbox: Checkbox,
@@ -14,5 +15,6 @@ export const FormBuilderComponentsList = {
     input: Input,
     password: Password,
     radio: Radio,
-    select: Select
+    select: Select,
+    infiniteSelect: InfiniteSelect
 };

package/dist/components/form-builder/form-builder.types.d.ts

@@ -52,6 +52,18 @@ interface FormBuilderItemSelect extends Omit<FormBuilderBasicsItem, 'value'> {
     isMulti?: boolean;
     selectRef?: React.MutableRefObject<any>;
 }
+interface FormBuilderItemInfinitiSelect extends Omit<FormBuilderItemSelect, 'component'> {
+    component: 'infiniteSelect';
+    value?: Option | Option[];
+    options: Option[];
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    selectRef?: React.MutableRefObject<any>;
+    loadMoreOptions?: () => void;
+}
 interface FormBuilderItemDatePicker extends FormBuilderBasicsItem {
     component?: 'datepicker';
     locale?: SupportedLanguages;
@@ -79,7 +91,7 @@ interface FormBuilderItemCheckbox extends Omit<FormBuilderBasicsItem, 'value'> {
     value?: string[];
     options: Option[];
 }
-export declare type FormBuilderItem = FormBuildItemInput | FormBuilderItemPassword | FormBuilderItemButton | FormBuilderItemSelect | FormBuilderItemDropZone | FormBuilderItemDatePicker | FormBuilderItemRadio | FormBuilderItemCheckbox;
+export declare type FormBuilderItem = FormBuildItemInput | FormBuilderItemPassword | FormBuilderItemButton | FormBuilderItemSelect | FormBuilderItemDropZone | FormBuilderItemDatePicker | FormBuilderItemRadio | FormBuilderItemCheckbox | FormBuilderItemInfinitiSelect;
 export declare type FormBuilderGroup = {
     items: FormBuilderItem[];
     name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilicorp/ui",
-  "version": "0.2.46",
+  "version": "0.2.47",
   "description": "A simple UI design for Dilicorp",
   "repository": {
     "type": "git",