phx-react
Version:
PHX REACT
232 lines • 12.9 kB
JavaScript
import { __assign, __awaiter, __generator } from "tslib";
import { CheckIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import React, { useEffect, useState } from 'react';
import { ApolloWrapper } from '../../lib/apollo-wrapper';
import EmptySearchResult from './EmptySearchResult';
import PHXUseDebounce from '../Func/useDebounce';
import ErrorMessage from '../../commons/ErrorMessage';
import PHXClientQueryV3 from '../Func/clientQueryV3';
import { requestMaxDuration } from '../../utils/constants';
export function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
var PHXSearchResultListV3 = function (_a) {
var _b = _a.defaultInputText, defaultInputText = _b === void 0 ? '' : _b, disabled = _a.disabled, error = _a.error, errorMessageCustom = _a.errorMessageCustom, errorType = _a.errorType, filterArray = _a.filterArray, getSearchResult = _a.getSearchResult, handleCustomRender = _a.handleCustomRender, handleQueryValue = _a.handleQueryValue, isArray = _a.isArray, isFillInput = _a.isFillInput, label = _a.label, listSelected = _a.listSelected, name = _a.name, placeholder = _a.placeholder, _c = _a.queryValueType, queryValueType = _c === void 0 ? 'default' : _c, register = _a.register, search = _a.search, setValue = _a.setValue, _d = _a.isUnaccentSearchValue, isUnaccentSearchValue = _d === void 0 ? false : _d;
var _e = useState(defaultInputText), searchValue = _e[0], setSearchValue = _e[1];
var _f = useState(false), isSearchLoading = _f[0], setIsSearchLoading = _f[1];
var _g = useState(false), isSearching = _g[0], setIsSearching = _g[1];
var _h = useState([]), searchDataResult = _h[0], setSearchDataResult = _h[1];
var _j = useState(''), previousValue = _j[0], setPreviousValue = _j[1];
function unaccentValue(rawValue) {
if (!rawValue)
return '';
return rawValue
.normalize('NFD') // Tách các ký tự có dấu thành ký tự cơ bản và dấu
.replace(/[\u0300-\u036f]/g, '') // Loại bỏ các dấu
.replace(/Đ/g, 'D') // Thay Đ thành D
.replace(/đ/g, 'd'); // Thay đ thành d
}
var filterQuery = function (query, value) {
var formatValue = isUnaccentSearchValue ? unaccentValue(value) : value;
return query.replace(/%@value%/g, "\"\"%".concat(formatValue, "%\"\""));
};
var fetchSearchData = function () { return __awaiter(void 0, void 0, void 0, function () {
var searchQuery, res, e_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
searchQuery = search ? filterQuery(search.query, searchValue) : '';
return [4 /*yield*/, PHXClientQueryV3({
query: searchQuery
})];
case 1:
res = _a.sent();
return [2 /*return*/, res];
case 2:
e_1 = _a.sent();
console.log(e_1);
return [2 /*return*/];
case 3: return [2 /*return*/];
}
});
}); };
var getData = function (option) { return __awaiter(void 0, void 0, void 0, function () {
var startTime, result, data, endTime, duration;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
startTime = performance.now();
return [4 /*yield*/, option()];
case 1:
result = _a.sent();
data = result.data;
endTime = performance.now();
duration = endTime - startTime;
if (!(duration < requestMaxDuration)) return [3 /*break*/, 3];
console.info('promise delay...');
return [4 /*yield*/, new Promise(function (r) { return setTimeout(r, 300); })];
case 2:
_a.sent();
_a.label = 3;
case 3: return [2 /*return*/, data];
}
});
}); };
var searchChange = function (e) {
var value = e.target.value;
// Loại bỏ ký tự "\" từ chuỗi
var replaceSensitiveValue = value.replace(/\\/g, '');
setSearchValue(replaceSensitiveValue);
setIsSearching(true);
if (replaceSensitiveValue === '') {
setIsSearching(false);
}
if (replaceSensitiveValue !== previousValue) {
setPreviousValue(replaceSensitiveValue);
}
};
var debouncedSearch = PHXUseDebounce(searchValue, 300);
var formatDynamicFields = function (dataParams) {
var formattedValues = [];
var searchData = {};
filterArray.forEach(function (item) {
if (item.keyParent) {
var parentData = dataParams[item.keyParent] || {};
searchData[item.keyChild] =
(parentData.length > 0 ? parentData[0][item.keyChild] : parentData[item.keyChild]) || '';
}
else {
searchData[item.keyChild] = dataParams[item.keyChild];
}
});
// eslint-disable-next-line no-restricted-syntax
for (var field in searchData) {
if (searchData[field] !== null && searchData[field] !== undefined) {
formattedValues.push("".concat(searchData[field])
.toLowerCase()
.split(' ')
.map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); })
.join(' '));
}
}
return formattedValues.join(' - ');
};
useEffect(function () {
if (searchValue === '') {
setSearchDataResult([]);
}
else {
setIsSearchLoading(true);
}
}, [searchValue]);
var handleClickSearchItem = function (item) {
getSearchResult(item);
setIsSearching(false);
formatDynamicFields(item);
setSearchValue(formatDynamicFields(item));
if (isArray) {
setSearchValue('');
}
if (isFillInput && handleCustomRender) {
setSearchValue(handleCustomRender(item));
}
};
var message = function (type) {
var errorMessage = '';
switch (type) {
case 'required-field':
errorMessage = 'Vui lòng nhập thông tin';
break;
case 'validate-input-field':
errorMessage = 'Vui lòng nhập thông tin hợp lệ (độ dài 1 - 60 kí tự)';
break;
case 'duplicate-field':
errorMessage = 'Thông tin đã tồn tại';
break;
case 'validate-phone-number':
errorMessage = 'Số điện thoại chưa hợp lệ';
break;
case 'validate-input-email':
errorMessage = 'Định dạng email chưa đúng, vui lòng nhập lại';
break;
case 'custom-message':
errorMessage = errorMessageCustom;
break;
default:
break;
}
return errorMessage;
};
var handleSearch = function () { return __awaiter(void 0, void 0, void 0, function () {
var data, dataTable, result, newData;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setIsSearchLoading(true);
return [4 /*yield*/, getData(fetchSearchData)];
case 1:
data = _a.sent();
dataTable = search.keyResult;
result = queryValueType === 'default' ? data[dataTable] : handleQueryValue(data[dataTable]);
if (listSelected && (listSelected === null || listSelected === void 0 ? void 0 : listSelected.length) > 0) {
newData = result.map(function (item) {
var isSelected;
switch (name) {
case 'user_assigned_tuition':
isSelected = listSelected.some(function (selectedItem) { return selectedItem.profile_student.user_code === item.profile_student.user_code; });
break;
default:
isSelected = listSelected.some(function (selectedItem) { return selectedItem.id === item.id; });
break;
}
if (isSelected) {
return __assign(__assign({}, item), { is_selected: true });
}
return item;
});
setSearchDataResult(newData);
}
else {
setSearchDataResult(result);
}
setIsSearchLoading(false);
return [2 /*return*/];
}
});
}); };
useEffect(function () {
if (debouncedSearch) {
// @ts-ignore
handleSearch();
setValue(name, debouncedSearch);
}
else {
setSearchValue('');
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedSearch]);
return (React.createElement(ApolloWrapper, null,
React.createElement("div", { className: 'relative w-full' },
React.createElement("div", { className: 'relative' },
label && React.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
React.createElement("div", { className: 'flex items-center' },
React.createElement("div", { className: 'relative w-full' },
React.createElement("span", { className: 'absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500' },
React.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4' })),
React.createElement("input", __assign({ autoComplete: 'off', className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 pl-9 pr-3 text-xs font-normal shadow-sm focus:border-gray-500 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'bg-gray-50' : ''), name: name, onInput: searchChange, placeholder: placeholder, value: isArray || isFillInput ? searchValue : undefined }, register, { type: 'text' }))))),
error && errorType ? React.createElement(ErrorMessage, { message: message(errorType) }) : null,
React.createElement("div", { className: 'absolute z-50 w-full drop-shadow-xl' }, isSearching && (searchDataResult === null || searchDataResult === void 0 ? void 0 : searchDataResult.length) > 0 ? (React.createElement("div", { className: 'my-2 min-w-full pb-2' },
React.createElement("div", { className: 'max-h-[300px] divide-gray-200 overflow-y-auto rounded-xl border border-gray-100 bg-white px-2 py-1' }, searchDataResult.map(function (item) { return (
// @ts-ignore
React.createElement("button", { key: item.id, "aria-expanded": 'false', "aria-haspopup": 'listbox', "aria-labelledby": 'headlessui-combobox-label-:rk: headlessui-combobox-button-:rm:', className: "".concat(item.is_selected ? 'bg-gray-200 font-medium text-gray-900' : 'hover:bg-gray-100', " inset-y-0 right-0 my-1 mt-1 flex w-full items-center rounded-md px-2 py-[6px] pr-4 font-sans text-xs text-gray-600 transition-colors focus:outline-none"), "data-headlessui-state": '', disabled: item.is_selected, onClick: function () { return handleClickSearchItem(item); }, tabIndex: -1, type: 'button' },
React.createElement("div", { className: 'flex w-full justify-between' },
handleCustomRender ? React.createElement("p", null, handleCustomRender(item)) : React.createElement("p", null, formatDynamicFields(item)),
item.is_selected ? React.createElement(CheckIcon, { className: 'h-4 w-4' }) : null))); })))) : (React.createElement(React.Fragment, null, isSearching && React.createElement(EmptySearchResult, { isSearchLoading: isSearchLoading })))))));
};
export default PHXSearchResultListV3;
//# sourceMappingURL=SearchResultList.js.map