react-restyle-components 0.2.55 → 0.2.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/package.json +1 -1
- package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map +1 -1
- package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +20 -5
- package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts +0 -1
- package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts.map +1 -1
- package/lib/src/core-components/molecules/autocomplete/autocomplete.js +9 -9
- package/package.json +1 -1
package/lib/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAIhC,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,4CAyMvD,CAAC"}
|
|
@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import { useState, useEffect, useRef } from 'react';
|
|
4
4
|
import { Icon } from '../../atoms/icons/icons.component';
|
|
5
5
|
import '../../../tc.module.css';
|
|
6
|
+
import s from '../../../tc.module.css';
|
|
7
|
+
import { cn } from '../../../core-utils';
|
|
6
8
|
export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', onFilter, onSelect, onBlur, }) => {
|
|
7
9
|
const [value, setValue] = useState(displayValue);
|
|
8
10
|
const [options, setOptions] = useState(data.list);
|
|
@@ -22,6 +24,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
|
|
|
22
24
|
};
|
|
23
25
|
}, [ref, isListOpen]);
|
|
24
26
|
};
|
|
27
|
+
const inputRef = useRef(null);
|
|
25
28
|
const wrapperRef = useRef(null);
|
|
26
29
|
useOutsideAlerter(wrapperRef);
|
|
27
30
|
useEffect(() => {
|
|
@@ -57,26 +60,38 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
|
|
|
57
60
|
}
|
|
58
61
|
}
|
|
59
62
|
};
|
|
60
|
-
|
|
63
|
+
const calculateMaxHeight = () => {
|
|
64
|
+
if (inputRef.current) {
|
|
65
|
+
const inputRect = inputRef.current.getBoundingClientRect();
|
|
66
|
+
const availableHeight = window.innerHeight - inputRect.bottom - 10; // 10px padding
|
|
67
|
+
return availableHeight;
|
|
68
|
+
}
|
|
69
|
+
return 'calc(100vh - 100px)';
|
|
70
|
+
};
|
|
71
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
|
|
72
|
+
[s['border-red']]: hasError,
|
|
73
|
+
[s['border-gray-300']]: !hasError,
|
|
74
|
+
[s['dark:text-black']]: true,
|
|
75
|
+
}), children: [_jsx("input", { ref: inputRef, placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
|
|
61
76
|
color: '#000000',
|
|
62
77
|
size: 22,
|
|
63
78
|
} })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
|
|
64
79
|
color: '#000000',
|
|
65
80
|
size: 22,
|
|
66
81
|
} }))] }), options && isListOpen
|
|
67
|
-
? options.length > 0 && (_jsx("div", { className:
|
|
82
|
+
? options.length > 0 && (_jsx("div", { className: cn(s['absolute'], s['w-full'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['overflow-y-auto']), style: {
|
|
68
83
|
zIndex: 500,
|
|
69
|
-
|
|
84
|
+
maxHeight: `${calculateMaxHeight()}px`,
|
|
85
|
+
}, children: _jsx("ul", { className: "flex", children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
|
|
70
86
|
setValue(data.displayKey
|
|
71
87
|
.map((key) => `${item[key]}`)
|
|
72
88
|
.join(' - '));
|
|
73
89
|
setIsListOpen(false);
|
|
74
90
|
onSelect && onSelect(item);
|
|
75
|
-
}, children: _jsx("label", { className:
|
|
91
|
+
}, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), style: {
|
|
76
92
|
textOverflow: 'ellipsis',
|
|
77
93
|
minWidth: 0,
|
|
78
94
|
overflow: 'hidden',
|
|
79
|
-
maxWidth: '334px',
|
|
80
95
|
whiteSpace: 'nowrap',
|
|
81
96
|
}, title: data.displayKey
|
|
82
97
|
.map((key) => item[key])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/autocomplete/autocomplete.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,uCAItB,iBAAiB,4CAgNnB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect, useCallback } from 'react';
|
|
3
|
-
|
|
4
|
-
import '../../../
|
|
3
|
+
import s from '../../../tc.module.css';
|
|
4
|
+
import { cn } from '../../../core-utils';
|
|
5
5
|
const LI_ELEMENT_HEIGHT = 34;
|
|
6
6
|
export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
|
|
7
7
|
const [activeOption, setActiveOption] = useState(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));
|
|
@@ -86,13 +86,13 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
|
|
|
86
86
|
onValueChange,
|
|
87
87
|
]);
|
|
88
88
|
const renderList = () => {
|
|
89
|
-
return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className:
|
|
90
|
-
let className = 'flex gap-2 p-2
|
|
89
|
+
return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: filteredOptions?.length > 0 ? (_jsx("ul", { role: "list", className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['w-full']), id: "list", ref: listRef, children: filteredOptions?.map((option, index) => {
|
|
90
|
+
let className = cn(s['flex'], s['gap-2'], s['p-2']);
|
|
91
91
|
if (index === activeOption) {
|
|
92
|
-
className = className
|
|
92
|
+
className = cn(className, s['font-bold']);
|
|
93
93
|
}
|
|
94
94
|
return (_jsx("li", { className: className, role: "listitem", onClick: onOptionClick, children: option }, index));
|
|
95
|
-
}) })) : (
|
|
95
|
+
}) })) : (_jsx("div", { className: cn(s['flex'], s['bg-gray-200'], s['w-full'], s['p-2']), children: _jsx("span", { children: "Not Found Result!!" }) })) }) })) : (_jsx(_Fragment, {})) }));
|
|
96
96
|
};
|
|
97
97
|
useEffect(() => {
|
|
98
98
|
// this only works on click when inside timeout
|
|
@@ -102,7 +102,7 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
|
|
|
102
102
|
filteredOptions[0] && onValueChange(filteredOptions[0]);
|
|
103
103
|
// setShouldShowList(true);
|
|
104
104
|
}, []);
|
|
105
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { className:
|
|
105
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['flex-col'], s['relative']), children: [_jsx("div", { className: cn(s['flex'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md']), children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: cn(s['flex'], s['focus:outline-none']), placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
|
|
106
106
|
setShouldShowList(true);
|
|
107
|
-
} }) }), _jsx("div", { className:
|
|
107
|
+
} }) }), _jsx("div", { className: cn(s['flex']), children: renderList() })] }) }));
|
|
108
108
|
};
|