phx-react 1.3.1005 → 1.3.1006
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.
|
@@ -18,7 +18,31 @@ var PHXSelectBox = function (props) {
|
|
|
18
18
|
var data = props.data, defaultValue = props.defaultValue, error = props.error, errorMessageCustom = props.errorMessageCustom, errorType = props.errorType, label = props.label, onChange = props.onChange, placeholder = props.placeholder, register = props.register, _a = props.disabled, disabled = _a === void 0 ? false : _a;
|
|
19
19
|
var _b = (0, react_2.useState)(''), query = _b[0], setQuery = _b[1];
|
|
20
20
|
var comboBtn = (0, react_2.useRef)(null);
|
|
21
|
-
var
|
|
21
|
+
var inputRef = (0, react_2.useRef)(null);
|
|
22
|
+
var _c = (0, react_2.useState)(null), inputWidth = _c[0], setInputWidth = _c[1];
|
|
23
|
+
var _d = (0, react_2.useState)(defaultValue ? defaultValue : null), selectedPerson = _d[0], setSelectedPerson = _d[1];
|
|
24
|
+
// Theo dõi thay đổi kích thước của input
|
|
25
|
+
(0, react_2.useEffect)(function () {
|
|
26
|
+
var updateWidth = function () {
|
|
27
|
+
if (inputRef.current) {
|
|
28
|
+
// Sử dụng getBoundingClientRect để lấy chiều rộng chính xác
|
|
29
|
+
var width = inputRef.current.getBoundingClientRect().width;
|
|
30
|
+
setInputWidth(width);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
updateWidth(); // Cập nhật ngay lần đầu
|
|
34
|
+
var observer = new ResizeObserver(function () {
|
|
35
|
+
updateWidth();
|
|
36
|
+
});
|
|
37
|
+
if (inputRef.current) {
|
|
38
|
+
observer.observe(inputRef.current);
|
|
39
|
+
}
|
|
40
|
+
return function () {
|
|
41
|
+
if (inputRef.current) {
|
|
42
|
+
observer.unobserve(inputRef.current);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}, []);
|
|
22
46
|
var filteredPeople = query === '' ? data : data.filter(function (person) { return person.value.toLowerCase().includes(query.toLowerCase()); });
|
|
23
47
|
var handlerClickInput = function () {
|
|
24
48
|
var _a;
|
|
@@ -63,20 +87,28 @@ var PHXSelectBox = function (props) {
|
|
|
63
87
|
return (react_2["default"].createElement(react_2["default"].Fragment, null,
|
|
64
88
|
react_2["default"].createElement(react_1.Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson },
|
|
65
89
|
react_2["default"].createElement(react_1.Combobox.Label, { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
|
|
66
|
-
react_2["default"].createElement("div",
|
|
67
|
-
disabled ? (react_2["default"].createElement(Input_1.PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (react_2["default"].createElement(react_1.Combobox.Input, tslib_1.__assign({ autoComplete: 'off', className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', errorCheck ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') }, register, { displayValue: function (person) { return person === null || person === void 0 ? void 0 : person.value; }, onChange: function (event) { return onChangeSelectBox(event); }, onClick: function () { return handlerClickInput(); }, placeholder: placeholder }))),
|
|
90
|
+
react_2["default"].createElement("div", { className: 'relative' },
|
|
91
|
+
disabled ? (react_2["default"].createElement(Input_1.PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (react_2["default"].createElement(react_1.Combobox.Input, tslib_1.__assign({ autoComplete: 'off', className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', errorCheck ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') }, register, { ref: inputRef, displayValue: function (person) { return person === null || person === void 0 ? void 0 : person.value; }, onChange: function (event) { return onChangeSelectBox(event); }, onClick: function () { return handlerClickInput(); }, placeholder: placeholder }))),
|
|
68
92
|
react_2["default"].createElement(react_1.Combobox.Button, { ref: comboBtn, className: 'hidden' },
|
|
69
93
|
react_2["default"].createElement(solid_1.ChevronUpDownIcon, { "aria-hidden": 'true', className: 'h-5 w-5 text-gray-400' })),
|
|
70
|
-
filteredPeople.length > 0 ? (react_2["default"].createElement(react_1.Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60
|
|
94
|
+
filteredPeople.length > 0 ? (react_2["default"].createElement(react_1.Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', style: {
|
|
95
|
+
width: inputWidth ? "".concat(inputWidth, "px") : '100%',
|
|
96
|
+
left: 0,
|
|
97
|
+
boxSizing: 'border-box'
|
|
98
|
+
} }, filteredPeople.map(function (person) { return (react_2["default"].createElement(react_1.Combobox.Option, { key: person.id, className: function (_a) {
|
|
71
99
|
var active = _a.active;
|
|
72
|
-
return classNames('relative mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) ? 'bg-zinc-200' : 'text-gray-900
|
|
100
|
+
return classNames('relative mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) ? 'bg-zinc-200' : 'text-gray-900', active ? 'bg-zinc-100' : 'text-gray-900');
|
|
73
101
|
}, value: person }, function (_a) {
|
|
74
102
|
var active = _a.active;
|
|
75
103
|
return (react_2["default"].createElement(react_2["default"].Fragment, null,
|
|
76
104
|
react_2["default"].createElement("span", { className: classNames('block truncate text-xs', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && 'font-semibold') }, person.value),
|
|
77
105
|
person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && (react_2["default"].createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-gray-900' : 'text-indigo-600') },
|
|
78
106
|
react_2["default"].createElement(solid_1.CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))));
|
|
79
|
-
})); }))) : (react_2["default"].createElement(react_1.Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60
|
|
107
|
+
})); }))) : (react_2["default"].createElement(react_1.Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', style: {
|
|
108
|
+
width: inputWidth ? "".concat(inputWidth, "px") : '100%',
|
|
109
|
+
left: 0,
|
|
110
|
+
boxSizing: 'border-box'
|
|
111
|
+
} },
|
|
80
112
|
react_2["default"].createElement(react_1.Combobox.Option, { className: 'mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', value: '' },
|
|
81
113
|
react_2["default"].createElement("div", { className: 'flex flex-col items-center justify-center' },
|
|
82
114
|
react_2["default"].createElement("svg", { className: 'mx-auto h-4 w-4 text-gray-700', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":";;;;AAAA,2CAA4C;AAC5C,mDAAwE;AACxE,
|
|
1
|
+
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
import { Combobox } from '@headlessui/react';
|
|
3
3
|
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
|
|
4
|
-
import React, { useRef, useState } from 'react';
|
|
4
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { PHXInput } from '../Input';
|
|
6
6
|
import ErrorMessage from '../../commons/ErrorMessage';
|
|
7
7
|
function classNames() {
|
|
@@ -15,7 +15,31 @@ export var PHXSelectBox = function (props) {
|
|
|
15
15
|
var data = props.data, defaultValue = props.defaultValue, error = props.error, errorMessageCustom = props.errorMessageCustom, errorType = props.errorType, label = props.label, onChange = props.onChange, placeholder = props.placeholder, register = props.register, _a = props.disabled, disabled = _a === void 0 ? false : _a;
|
|
16
16
|
var _b = useState(''), query = _b[0], setQuery = _b[1];
|
|
17
17
|
var comboBtn = useRef(null);
|
|
18
|
-
var
|
|
18
|
+
var inputRef = useRef(null);
|
|
19
|
+
var _c = useState(null), inputWidth = _c[0], setInputWidth = _c[1];
|
|
20
|
+
var _d = useState(defaultValue ? defaultValue : null), selectedPerson = _d[0], setSelectedPerson = _d[1];
|
|
21
|
+
// Theo dõi thay đổi kích thước của input
|
|
22
|
+
useEffect(function () {
|
|
23
|
+
var updateWidth = function () {
|
|
24
|
+
if (inputRef.current) {
|
|
25
|
+
// Sử dụng getBoundingClientRect để lấy chiều rộng chính xác
|
|
26
|
+
var width = inputRef.current.getBoundingClientRect().width;
|
|
27
|
+
setInputWidth(width);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
updateWidth(); // Cập nhật ngay lần đầu
|
|
31
|
+
var observer = new ResizeObserver(function () {
|
|
32
|
+
updateWidth();
|
|
33
|
+
});
|
|
34
|
+
if (inputRef.current) {
|
|
35
|
+
observer.observe(inputRef.current);
|
|
36
|
+
}
|
|
37
|
+
return function () {
|
|
38
|
+
if (inputRef.current) {
|
|
39
|
+
observer.unobserve(inputRef.current);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
}, []);
|
|
19
43
|
var filteredPeople = query === '' ? data : data.filter(function (person) { return person.value.toLowerCase().includes(query.toLowerCase()); });
|
|
20
44
|
var handlerClickInput = function () {
|
|
21
45
|
var _a;
|
|
@@ -60,20 +84,28 @@ export var PHXSelectBox = function (props) {
|
|
|
60
84
|
return (React.createElement(React.Fragment, null,
|
|
61
85
|
React.createElement(Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson },
|
|
62
86
|
React.createElement(Combobox.Label, { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
|
|
63
|
-
React.createElement("div",
|
|
64
|
-
disabled ? (React.createElement(PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (React.createElement(Combobox.Input, __assign({ autoComplete: 'off', className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', errorCheck ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') }, register, { displayValue: function (person) { return person === null || person === void 0 ? void 0 : person.value; }, onChange: function (event) { return onChangeSelectBox(event); }, onClick: function () { return handlerClickInput(); }, placeholder: placeholder }))),
|
|
87
|
+
React.createElement("div", { className: 'relative' },
|
|
88
|
+
disabled ? (React.createElement(PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (React.createElement(Combobox.Input, __assign({ autoComplete: 'off', className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', errorCheck ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') }, register, { ref: inputRef, displayValue: function (person) { return person === null || person === void 0 ? void 0 : person.value; }, onChange: function (event) { return onChangeSelectBox(event); }, onClick: function () { return handlerClickInput(); }, placeholder: placeholder }))),
|
|
65
89
|
React.createElement(Combobox.Button, { ref: comboBtn, className: 'hidden' },
|
|
66
90
|
React.createElement(ChevronUpDownIcon, { "aria-hidden": 'true', className: 'h-5 w-5 text-gray-400' })),
|
|
67
|
-
filteredPeople.length > 0 ? (React.createElement(Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60
|
|
91
|
+
filteredPeople.length > 0 ? (React.createElement(Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', style: {
|
|
92
|
+
width: inputWidth ? "".concat(inputWidth, "px") : '100%',
|
|
93
|
+
left: 0,
|
|
94
|
+
boxSizing: 'border-box'
|
|
95
|
+
} }, filteredPeople.map(function (person) { return (React.createElement(Combobox.Option, { key: person.id, className: function (_a) {
|
|
68
96
|
var active = _a.active;
|
|
69
|
-
return classNames('relative mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) ? 'bg-zinc-200' : 'text-gray-900
|
|
97
|
+
return classNames('relative mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) ? 'bg-zinc-200' : 'text-gray-900', active ? 'bg-zinc-100' : 'text-gray-900');
|
|
70
98
|
}, value: person }, function (_a) {
|
|
71
99
|
var active = _a.active;
|
|
72
100
|
return (React.createElement(React.Fragment, null,
|
|
73
101
|
React.createElement("span", { className: classNames('block truncate text-xs', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && 'font-semibold') }, person.value),
|
|
74
102
|
person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && (React.createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-gray-900' : 'text-indigo-600') },
|
|
75
103
|
React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))));
|
|
76
|
-
})); }))) : (React.createElement(Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60
|
|
104
|
+
})); }))) : (React.createElement(Combobox.Options, { className: 'absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', style: {
|
|
105
|
+
width: inputWidth ? "".concat(inputWidth, "px") : '100%',
|
|
106
|
+
left: 0,
|
|
107
|
+
boxSizing: 'border-box'
|
|
108
|
+
} },
|
|
77
109
|
React.createElement(Combobox.Option, { className: 'mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', value: '' },
|
|
78
110
|
React.createElement("div", { className: 'flex flex-col items-center justify-center' },
|
|
79
111
|
React.createElement("svg", { className: 'mx-auto h-4 w-4 text-gray-700', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":"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"}
|