phx-react 1.3.1447 → 1.3.1448
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/TableReport/component/Search.d.ts +1 -1
- package/dist/cjs/components/TableReport/component/Search.js +20 -19
- package/dist/cjs/components/TableReport/component/Search.js.map +1 -1
- package/dist/esm/components/TableReport/component/Search.d.ts +1 -1
- package/dist/esm/components/TableReport/component/Search.js +11 -10
- package/dist/esm/components/TableReport/component/Search.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,5 +9,5 @@ interface SearchProps {
|
|
|
9
9
|
setOffset(page: number): void;
|
|
10
10
|
paginationChange?(page: number): void;
|
|
11
11
|
}
|
|
12
|
-
declare function Search({ isSearch,
|
|
12
|
+
declare function Search({ isSearch, paginationChange, search, setCurrentPage, setIsSearch, setOffset, type }: SearchProps): React.JSX.Element;
|
|
13
13
|
export default Search;
|
|
@@ -1,35 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
|
-
var react_1 =
|
|
4
|
+
var react_1 = require("@headlessui/react");
|
|
5
|
+
var react_2 = tslib_1.__importStar(require("react"));
|
|
5
6
|
var types_1 = require("../../types");
|
|
6
7
|
var Loading_1 = require("../../Loading");
|
|
7
|
-
var react_2 = require("@headlessui/react");
|
|
8
8
|
var useDebounce_1 = tslib_1.__importDefault(require("../../Func/useDebounce"));
|
|
9
9
|
function Search(_a) {
|
|
10
|
-
var isSearch = _a.isSearch,
|
|
11
|
-
var _b = (0,
|
|
10
|
+
var isSearch = _a.isSearch, paginationChange = _a.paginationChange, search = _a.search, setCurrentPage = _a.setCurrentPage, setIsSearch = _a.setIsSearch, setOffset = _a.setOffset, type = _a.type;
|
|
11
|
+
var _b = (0, react_2.useState)(''), searchValue = _b[0], setSearchValue = _b[1];
|
|
12
12
|
var debouncedSearch = (0, useDebounce_1.default)(searchValue, 300);
|
|
13
|
-
(0,
|
|
13
|
+
(0, react_2.useEffect)(function () {
|
|
14
14
|
if (search.onChange) {
|
|
15
|
-
search.onChange(
|
|
15
|
+
search.onChange(debouncedSearch);
|
|
16
|
+
setCurrentPage(1);
|
|
17
|
+
setOffset(0);
|
|
18
|
+
if (paginationChange) {
|
|
19
|
+
paginationChange(1);
|
|
20
|
+
}
|
|
16
21
|
}
|
|
17
22
|
}, [debouncedSearch]);
|
|
18
|
-
return (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
return (react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition-[max-height,opacity] duration-300 ease-out overflow-hidden', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-20 opacity-100', show: isSearch },
|
|
24
|
+
react_2.default.createElement("div", { className: 'min-w-full' }, isSearch && (react_2.default.createElement("div", { className: (0, types_1.classNames)('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg ring-opacity-5', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
|
|
25
|
+
react_2.default.createElement("div", { className: 'relative mr-2 w-11/12' },
|
|
26
|
+
react_2.default.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent bg-white py-1 text-xs hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onChange: function (event) {
|
|
22
27
|
setSearchValue(event.target.value);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
} })),
|
|
29
|
-
react_1.default.createElement("div", { className: 'flex w-14 justify-center pt-1' }, search.loading ? react_1.default.createElement(Loading_1.PHXSpinner, null) : null),
|
|
30
|
-
react_1.default.createElement("div", null,
|
|
31
|
-
react_1.default.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: function () {
|
|
28
|
+
}, placeholder: 'T\u00ECm ki\u1EBFm', type: 'text', value: searchValue })),
|
|
29
|
+
react_2.default.createElement("div", { className: 'flex w-14 justify-center pt-1' }, search.loading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null),
|
|
30
|
+
react_2.default.createElement("div", null,
|
|
31
|
+
react_2.default.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: function () {
|
|
32
32
|
setIsSearch(false);
|
|
33
|
+
setSearchValue('');
|
|
33
34
|
if (search.onChange) {
|
|
34
35
|
search.onChange('');
|
|
35
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../../src/components/TableReport/component/Search.tsx"],"names":[],"mappings":";;;AAAA,qDAA4D;
|
|
1
|
+
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../../src/components/TableReport/component/Search.tsx"],"names":[],"mappings":";;;AAAA,2CAA8C;AAC9C,qDAA4D;AAE5D,qCAAwC;AACxC,yCAA0C;AAC1C,+EAAmD;AAYnD,SAAS,MAAM,CAAC,EAAiG;QAA/F,QAAQ,cAAA,EAAE,gBAAgB,sBAAA,EAAE,MAAM,YAAA,EAAE,cAAc,oBAAA,EAAE,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA;IAC1F,IAAA,KAAgC,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA3C,WAAW,QAAA,EAAE,cAAc,QAAgB,CAAA;IAElD,IAAM,eAAe,GAAG,IAAA,qBAAc,EAAC,WAAW,EAAE,GAAG,CAAC,CAAA;IAExD,IAAA,iBAAS,EAAC;QACR,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;YAChC,cAAc,CAAC,CAAC,CAAC,CAAA;YACjB,SAAS,CAAC,CAAC,CAAC,CAAA;YACZ,IAAI,gBAAgB,EAAE,CAAC;gBACrB,gBAAgB,CAAC,CAAC,CAAC,CAAA;YACrB,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,OAAO,CACL,8BAAC,kBAAU,IACT,EAAE,EAAE,gBAAQ,EACZ,KAAK,EAAC,uEAAuE,EAC7E,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAC,sBAAsB,EAC9B,IAAI,EAAE,QAAQ;QAEd,uCAAK,SAAS,EAAC,YAAY,IACxB,QAAQ,IAAI,CACX,uCACE,SAAS,EAAE,IAAA,kBAAU,EACnB,sFAAsF,EACtF,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAC/C;YAED,uCAAK,SAAS,EAAC,uBAAuB;gBACpC,yCACE,SAAS,QACT,SAAS,EAAC,iLAAiL,EAC3L,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,UAAC,KAA0C;wBACnD,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpC,CAAC,EACD,WAAW,EAAC,oBAAU,EACtB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,GAClB,CACE;YACN,uCAAK,SAAS,EAAC,+BAA+B,IAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,8BAAC,oBAAU,OAAG,CAAC,CAAC,CAAC,IAAI,CAAO;YAC7F;gBACE,0CACE,SAAS,EAAC,mHAAmH,EAC7H,OAAO,EAAE;wBACP,WAAW,CAAC,KAAK,CAAC,CAAA;wBAClB,cAAc,CAAC,EAAE,CAAC,CAAA;wBAClB,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;4BACpB,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;wBACrB,CAAC;wBACD,cAAc,CAAC,CAAC,CAAC,CAAA;wBACjB,SAAS,CAAC,CAAC,CAAC,CAAA;oBACd,CAAC,EACD,IAAI,EAAC,QAAQ,aAGN,CACL,CACF,CACP,CACG,CACK,CACd,CAAA;AACH,CAAC;AAED,kBAAe,MAAM,CAAA"}
|
|
@@ -9,5 +9,5 @@ interface SearchProps {
|
|
|
9
9
|
setOffset(page: number): void;
|
|
10
10
|
paginationChange?(page: number): void;
|
|
11
11
|
}
|
|
12
|
-
declare function Search({ isSearch,
|
|
12
|
+
declare function Search({ isSearch, paginationChange, search, setCurrentPage, setIsSearch, setOffset, type }: SearchProps): React.JSX.Element;
|
|
13
13
|
export default Search;
|
|
@@ -1,32 +1,33 @@
|
|
|
1
|
+
import { Transition } from '@headlessui/react';
|
|
1
2
|
import React, { Fragment, useEffect, useState } from 'react';
|
|
2
3
|
import { classNames } from '../../types';
|
|
3
4
|
import { PHXSpinner } from '../../Loading';
|
|
4
|
-
import { Transition } from '@headlessui/react';
|
|
5
5
|
import PHXUseDebounce from '../../Func/useDebounce';
|
|
6
6
|
function Search(_a) {
|
|
7
|
-
var isSearch = _a.isSearch,
|
|
7
|
+
var isSearch = _a.isSearch, paginationChange = _a.paginationChange, search = _a.search, setCurrentPage = _a.setCurrentPage, setIsSearch = _a.setIsSearch, setOffset = _a.setOffset, type = _a.type;
|
|
8
8
|
var _b = useState(''), searchValue = _b[0], setSearchValue = _b[1];
|
|
9
9
|
var debouncedSearch = PHXUseDebounce(searchValue, 300);
|
|
10
10
|
useEffect(function () {
|
|
11
11
|
if (search.onChange) {
|
|
12
|
-
search.onChange(
|
|
12
|
+
search.onChange(debouncedSearch);
|
|
13
|
+
setCurrentPage(1);
|
|
14
|
+
setOffset(0);
|
|
15
|
+
if (paginationChange) {
|
|
16
|
+
paginationChange(1);
|
|
17
|
+
}
|
|
13
18
|
}
|
|
14
19
|
}, [debouncedSearch]);
|
|
15
20
|
return (React.createElement(Transition, { as: Fragment, enter: 'transition-[max-height,opacity] duration-300 ease-out overflow-hidden', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-20 opacity-100', show: isSearch },
|
|
16
21
|
React.createElement("div", { className: 'min-w-full' }, isSearch && (React.createElement("div", { className: classNames('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg ring-opacity-5', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
|
|
17
22
|
React.createElement("div", { className: 'relative mr-2 w-11/12' },
|
|
18
|
-
React.createElement("input", { autoFocus: true, className: 'block
|
|
23
|
+
React.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent bg-white py-1 text-xs hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onChange: function (event) {
|
|
19
24
|
setSearchValue(event.target.value);
|
|
20
|
-
|
|
21
|
-
setOffset(0);
|
|
22
|
-
if (paginationChange) {
|
|
23
|
-
paginationChange(1);
|
|
24
|
-
}
|
|
25
|
-
} })),
|
|
25
|
+
}, placeholder: 'T\u00ECm ki\u1EBFm', type: 'text', value: searchValue })),
|
|
26
26
|
React.createElement("div", { className: 'flex w-14 justify-center pt-1' }, search.loading ? React.createElement(PHXSpinner, null) : null),
|
|
27
27
|
React.createElement("div", null,
|
|
28
28
|
React.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: function () {
|
|
29
29
|
setIsSearch(false);
|
|
30
|
+
setSearchValue('');
|
|
30
31
|
if (search.onChange) {
|
|
31
32
|
search.onChange('');
|
|
32
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../../src/components/TableReport/component/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../../src/components/TableReport/component/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,cAAc,MAAM,wBAAwB,CAAA;AAYnD,SAAS,MAAM,CAAC,EAAiG;QAA/F,QAAQ,cAAA,EAAE,gBAAgB,sBAAA,EAAE,MAAM,YAAA,EAAE,cAAc,oBAAA,EAAE,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA;IAC1F,IAAA,KAAgC,QAAQ,CAAC,EAAE,CAAC,EAA3C,WAAW,QAAA,EAAE,cAAc,QAAgB,CAAA;IAElD,IAAM,eAAe,GAAG,cAAc,CAAC,WAAW,EAAE,GAAG,CAAC,CAAA;IAExD,SAAS,CAAC;QACR,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;YAChC,cAAc,CAAC,CAAC,CAAC,CAAA;YACjB,SAAS,CAAC,CAAC,CAAC,CAAA;YACZ,IAAI,gBAAgB,EAAE,CAAC;gBACrB,gBAAgB,CAAC,CAAC,CAAC,CAAA;YACrB,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,OAAO,CACL,oBAAC,UAAU,IACT,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,uEAAuE,EAC7E,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAC,sBAAsB,EAC9B,IAAI,EAAE,QAAQ;QAEd,6BAAK,SAAS,EAAC,YAAY,IACxB,QAAQ,IAAI,CACX,6BACE,SAAS,EAAE,UAAU,CACnB,sFAAsF,EACtF,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAC/C;YAED,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,+BACE,SAAS,QACT,SAAS,EAAC,iLAAiL,EAC3L,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,UAAC,KAA0C;wBACnD,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpC,CAAC,EACD,WAAW,EAAC,oBAAU,EACtB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,GAClB,CACE;YACN,6BAAK,SAAS,EAAC,+BAA+B,IAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAC,UAAU,OAAG,CAAC,CAAC,CAAC,IAAI,CAAO;YAC7F;gBACE,gCACE,SAAS,EAAC,mHAAmH,EAC7H,OAAO,EAAE;wBACP,WAAW,CAAC,KAAK,CAAC,CAAA;wBAClB,cAAc,CAAC,EAAE,CAAC,CAAA;wBAClB,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;4BACpB,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;wBACrB,CAAC;wBACD,cAAc,CAAC,CAAC,CAAC,CAAA;wBACjB,SAAS,CAAC,CAAC,CAAC,CAAA;oBACd,CAAC,EACD,IAAI,EAAC,QAAQ,aAGN,CACL,CACF,CACP,CACG,CACK,CACd,CAAA;AACH,CAAC;AAED,eAAe,MAAM,CAAA"}
|