react-restyle-components 0.2.55 → 0.2.56
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 +10 -4
- 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,4CA+LvD,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);
|
|
@@ -57,22 +59,26 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
|
|
|
57
59
|
}
|
|
58
60
|
}
|
|
59
61
|
};
|
|
60
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className:
|
|
62
|
+
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'], {
|
|
63
|
+
[s['border-red']]: hasError,
|
|
64
|
+
[s['border-gray-300']]: !hasError,
|
|
65
|
+
[s['dark:text-black']]: true,
|
|
66
|
+
}), children: [_jsx("input", { 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
67
|
color: '#000000',
|
|
62
68
|
size: 22,
|
|
63
69
|
} })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
|
|
64
70
|
color: '#000000',
|
|
65
71
|
size: 22,
|
|
66
72
|
} }))] }), options && isListOpen
|
|
67
|
-
? options.length > 0 && (_jsx("div", { className:
|
|
73
|
+
? options.length > 0 && (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['w-full'], s['bg-gray-100'], s['p-2'], s['rounded-sm']), style: {
|
|
68
74
|
zIndex: 500,
|
|
69
|
-
}, children: _jsx("ul", { children: options?.map((item, index) => (_jsx("li", { className:
|
|
75
|
+
}, children: _jsx("ul", { children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
|
|
70
76
|
setValue(data.displayKey
|
|
71
77
|
.map((key) => `${item[key]}`)
|
|
72
78
|
.join(' - '));
|
|
73
79
|
setIsListOpen(false);
|
|
74
80
|
onSelect && onSelect(item);
|
|
75
|
-
}, children: _jsx("label", { className:
|
|
81
|
+
}, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), style: {
|
|
76
82
|
textOverflow: 'ellipsis',
|
|
77
83
|
minWidth: 0,
|
|
78
84
|
overflow: 'hidden',
|
|
@@ -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
|
};
|