phx-react 1.3.1686 → 1.3.1687
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/dist/cjs/components/SelectBox/SelectBox.d.ts +2 -0
- package/dist/cjs/components/SelectBox/SelectBox.js +17 -5
- package/dist/cjs/components/SelectBox/SelectBox.js.map +1 -1
- package/dist/esm/components/SelectBox/SelectBox.d.ts +2 -0
- package/dist/esm/components/SelectBox/SelectBox.js +17 -5
- package/dist/esm/components/SelectBox/SelectBox.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,6 +16,8 @@ type TInputSelectSearch = {
|
|
|
16
16
|
error?: boolean;
|
|
17
17
|
errorMessageCustom?: string;
|
|
18
18
|
errorType?: 'required-field' | 'validate-input-field' | 'duplicate-field' | 'validate-phone-number' | 'validate-input-email' | 'custom-message';
|
|
19
|
+
onToggle?(toggle: boolean): void;
|
|
20
|
+
origin?: 'top' | 'bottom';
|
|
19
21
|
};
|
|
20
22
|
export declare const PHXSelectBox: (props: TInputSelectSearch) => React.JSX.Element;
|
|
21
23
|
export {};
|
|
@@ -11,7 +11,7 @@ function classNames(...classes) {
|
|
|
11
11
|
return classes.filter(Boolean).join(' ');
|
|
12
12
|
}
|
|
13
13
|
const PHXSelectBox = (props) => {
|
|
14
|
-
const { data, defaultValue, error, errorMessageCustom, errorType, label, onChange,
|
|
14
|
+
const { data, defaultValue, disabled = false, error, errorMessageCustom, errorType, label, onChange, onToggle, origin = 'bottom', placeholder, register, } = props;
|
|
15
15
|
const [query, setQuery] = (0, react_2.useState)('');
|
|
16
16
|
const comboBtn = (0, react_2.useRef)(null);
|
|
17
17
|
const inputRef = (0, react_2.useRef)(null);
|
|
@@ -80,21 +80,33 @@ const PHXSelectBox = (props) => {
|
|
|
80
80
|
const onChangeSelectBox = (event) => {
|
|
81
81
|
setQuery(event.target.value);
|
|
82
82
|
};
|
|
83
|
+
const OpenStateWatcher = ({ onToggleCombobox, open }) => {
|
|
84
|
+
(0, react_2.useEffect)(() => {
|
|
85
|
+
if (onToggleCombobox) {
|
|
86
|
+
onToggleCombobox(open);
|
|
87
|
+
}
|
|
88
|
+
if (!open) {
|
|
89
|
+
setQuery('');
|
|
90
|
+
}
|
|
91
|
+
}, [open]);
|
|
92
|
+
return react_2.default.createElement(react_2.default.Fragment, null);
|
|
93
|
+
};
|
|
83
94
|
return (react_2.default.createElement(react_2.default.Fragment, null,
|
|
84
|
-
react_2.default.createElement(react_1.Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson },
|
|
95
|
+
react_2.default.createElement(react_1.Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson }, ({ open }) => (react_2.default.createElement(react_2.default.Fragment, null,
|
|
96
|
+
react_2.default.createElement(OpenStateWatcher, { onToggleCombobox: onToggle, open: open }),
|
|
85
97
|
react_2.default.createElement(react_1.Combobox.Label, { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
|
|
86
98
|
react_2.default.createElement("div", { className: 'relative' },
|
|
87
99
|
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, { 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: (person) => person === null || person === void 0 ? void 0 : person.value, onChange: (event) => onChangeSelectBox(event), onClick: () => handlerClickInput(), placeholder: placeholder })),
|
|
88
100
|
react_2.default.createElement(react_1.Combobox.Button, { ref: comboBtn, className: 'hidden' },
|
|
89
101
|
react_2.default.createElement(solid_1.ChevronUpDownIcon, { "aria-hidden": 'true', className: 'h-5 w-5 text-gray-400' })),
|
|
90
|
-
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: {
|
|
102
|
+
filteredPeople.length > 0 ? (react_2.default.createElement(react_1.Combobox.Options, { className: classNames('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', origin === 'top' ? 'bottom-10' : ''), style: {
|
|
91
103
|
width: inputWidth ? `${inputWidth}px` : '100%',
|
|
92
104
|
left: 0,
|
|
93
105
|
boxSizing: 'border-box',
|
|
94
106
|
} }, filteredPeople.map((person) => (react_2.default.createElement(react_1.Combobox.Option, { key: person.id, className: ({ active }) => 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'), value: person }, ({ active }) => (react_2.default.createElement(react_2.default.Fragment, null,
|
|
95
107
|
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),
|
|
96
108
|
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') },
|
|
97
|
-
react_2.default.createElement(solid_1.CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))))) : (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: {
|
|
109
|
+
react_2.default.createElement(solid_1.CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))))) : (react_2.default.createElement(react_1.Combobox.Options, { className: classNames('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', origin === 'top' ? 'bottom-10' : ''), style: {
|
|
98
110
|
width: inputWidth ? `${inputWidth}px` : '100%',
|
|
99
111
|
left: 0,
|
|
100
112
|
boxSizing: 'border-box',
|
|
@@ -103,7 +115,7 @@ const PHXSelectBox = (props) => {
|
|
|
103
115
|
react_2.default.createElement("div", { className: 'flex flex-col items-center justify-center' },
|
|
104
116
|
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' },
|
|
105
117
|
react_2.default.createElement("path", { d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })),
|
|
106
|
-
react_2.default.createElement("h3", { className: 'pt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))),
|
|
118
|
+
react_2.default.createElement("h3", { className: 'pt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))))),
|
|
107
119
|
errorCheck ? react_2.default.createElement(ErrorMessage_1.default, { message: message(errorType) }) : null));
|
|
108
120
|
};
|
|
109
121
|
exports.PHXSelectBox = PHXSelectBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":";;;;AAAA,6CAA4C;AAC5C,qDAAwE;AACxE,uDAA0D;AAE1D,oCAAmC;AACnC,sFAAqD;
|
|
1
|
+
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,6 +16,8 @@ type TInputSelectSearch = {
|
|
|
16
16
|
error?: boolean;
|
|
17
17
|
errorMessageCustom?: string;
|
|
18
18
|
errorType?: 'required-field' | 'validate-input-field' | 'duplicate-field' | 'validate-phone-number' | 'validate-input-email' | 'custom-message';
|
|
19
|
+
onToggle?(toggle: boolean): void;
|
|
20
|
+
origin?: 'top' | 'bottom';
|
|
19
21
|
};
|
|
20
22
|
export declare const PHXSelectBox: (props: TInputSelectSearch) => React.JSX.Element;
|
|
21
23
|
export {};
|
|
@@ -7,7 +7,7 @@ function classNames(...classes) {
|
|
|
7
7
|
return classes.filter(Boolean).join(' ');
|
|
8
8
|
}
|
|
9
9
|
export const PHXSelectBox = (props) => {
|
|
10
|
-
const { data, defaultValue, error, errorMessageCustom, errorType, label, onChange,
|
|
10
|
+
const { data, defaultValue, disabled = false, error, errorMessageCustom, errorType, label, onChange, onToggle, origin = 'bottom', placeholder, register, } = props;
|
|
11
11
|
const [query, setQuery] = useState('');
|
|
12
12
|
const comboBtn = useRef(null);
|
|
13
13
|
const inputRef = useRef(null);
|
|
@@ -76,21 +76,33 @@ export const PHXSelectBox = (props) => {
|
|
|
76
76
|
const onChangeSelectBox = (event) => {
|
|
77
77
|
setQuery(event.target.value);
|
|
78
78
|
};
|
|
79
|
+
const OpenStateWatcher = ({ onToggleCombobox, open }) => {
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (onToggleCombobox) {
|
|
82
|
+
onToggleCombobox(open);
|
|
83
|
+
}
|
|
84
|
+
if (!open) {
|
|
85
|
+
setQuery('');
|
|
86
|
+
}
|
|
87
|
+
}, [open]);
|
|
88
|
+
return React.createElement(React.Fragment, null);
|
|
89
|
+
};
|
|
79
90
|
return (React.createElement(React.Fragment, null,
|
|
80
|
-
React.createElement(Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson },
|
|
91
|
+
React.createElement(Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson }, ({ open }) => (React.createElement(React.Fragment, null,
|
|
92
|
+
React.createElement(OpenStateWatcher, { onToggleCombobox: onToggle, open: open }),
|
|
81
93
|
React.createElement(Combobox.Label, { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
|
|
82
94
|
React.createElement("div", { className: 'relative' },
|
|
83
95
|
disabled ? (React.createElement(PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (React.createElement(Combobox.Input, { 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: (person) => person === null || person === void 0 ? void 0 : person.value, onChange: (event) => onChangeSelectBox(event), onClick: () => handlerClickInput(), placeholder: placeholder })),
|
|
84
96
|
React.createElement(Combobox.Button, { ref: comboBtn, className: 'hidden' },
|
|
85
97
|
React.createElement(ChevronUpDownIcon, { "aria-hidden": 'true', className: 'h-5 w-5 text-gray-400' })),
|
|
86
|
-
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: {
|
|
98
|
+
filteredPeople.length > 0 ? (React.createElement(Combobox.Options, { className: classNames('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', origin === 'top' ? 'bottom-10' : ''), style: {
|
|
87
99
|
width: inputWidth ? `${inputWidth}px` : '100%',
|
|
88
100
|
left: 0,
|
|
89
101
|
boxSizing: 'border-box',
|
|
90
102
|
} }, filteredPeople.map((person) => (React.createElement(Combobox.Option, { key: person.id, className: ({ active }) => 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'), value: person }, ({ active }) => (React.createElement(React.Fragment, null,
|
|
91
103
|
React.createElement("span", { className: classNames('block truncate text-xs', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && 'font-semibold') }, person.value),
|
|
92
104
|
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') },
|
|
93
|
-
React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))))) : (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
|
+
React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))))) : (React.createElement(Combobox.Options, { className: classNames('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', origin === 'top' ? 'bottom-10' : ''), style: {
|
|
94
106
|
width: inputWidth ? `${inputWidth}px` : '100%',
|
|
95
107
|
left: 0,
|
|
96
108
|
boxSizing: 'border-box',
|
|
@@ -99,7 +111,7 @@ export const PHXSelectBox = (props) => {
|
|
|
99
111
|
React.createElement("div", { className: 'flex flex-col items-center justify-center' },
|
|
100
112
|
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' },
|
|
101
113
|
React.createElement("path", { d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })),
|
|
102
|
-
React.createElement("h3", { className: 'pt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))),
|
|
114
|
+
React.createElement("h3", { className: 'pt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))))),
|
|
103
115
|
errorCheck ? React.createElement(ErrorMessage, { message: message(errorType) }) : null));
|
|
104
116
|
};
|
|
105
117
|
//# sourceMappingURL=SelectBox.js.map
|
|
@@ -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,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,YAAY,MAAM,4BAA4B,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectBox.js","sourceRoot":"","sources":["../../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":"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"}
|