phx-react 1.3.273 → 1.3.274
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/Table/SelectSort.d.ts +10 -0
- package/dist/cjs/components/Table/SelectSort.js +27 -0
- package/dist/cjs/components/Table/SelectSort.js.map +1 -0
- package/dist/cjs/components/Table/sort.js +9 -36
- package/dist/cjs/components/Table/sort.js.map +1 -1
- package/dist/esm/components/Table/SelectSort.d.ts +10 -0
- package/dist/esm/components/Table/SelectSort.js +24 -0
- package/dist/esm/components/Table/SelectSort.js.map +1 -0
- package/dist/esm/components/Table/sort.js +10 -37
- package/dist/esm/components/Table/sort.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
interface ISelectSortProps {
|
|
3
|
+
sortItem: any;
|
|
4
|
+
activeMenu: any;
|
|
5
|
+
typeDisplay: 'DESKTOP' | 'MOBILE';
|
|
6
|
+
selectArray: Array<any>;
|
|
7
|
+
onChangeSelect(item: any, columnName: string): void;
|
|
8
|
+
}
|
|
9
|
+
declare const SelectSort: FC<ISelectSortProps>;
|
|
10
|
+
export default SelectSort;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
var react_1 = require("@headlessui/react");
|
|
5
|
+
var solid_1 = require("@heroicons/react/24/solid");
|
|
6
|
+
var react_2 = tslib_1.__importStar(require("react"));
|
|
7
|
+
var types_1 = require("../types");
|
|
8
|
+
var SelectSort = function (_a) {
|
|
9
|
+
var _b, _c;
|
|
10
|
+
var activeMenu = _a.activeMenu, onChangeSelect = _a.onChangeSelect, selectArray = _a.selectArray, sortItem = _a.sortItem, typeDisplay = _a.typeDisplay;
|
|
11
|
+
return (react_2["default"].createElement(react_1.Menu, { key: sortItem.id, as: 'div', className: "relative text-left ".concat(typeDisplay === 'DESKTOP' ? 'mr-1 inline-block ' : 'px-4 py-2') },
|
|
12
|
+
react_2["default"].createElement("div", null,
|
|
13
|
+
react_2["default"].createElement(react_1.Menu.Button, { className: 'flex min-w-max items-center rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
14
|
+
selectArray.length > 0
|
|
15
|
+
? (_c = (_b = selectArray.find(function (selectItem) { return selectItem.columnName === sortItem.field; })) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : sortItem.name
|
|
16
|
+
: sortItem.name,
|
|
17
|
+
"\u00A0",
|
|
18
|
+
react_2["default"].createElement(solid_1.ChevronDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
19
|
+
react_2["default"].createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
20
|
+
react_2["default"].createElement(react_1.Menu.Items, { className: 'absolute left-0 z-10 mt-2 w-32 min-w-max origin-top-right rounded-md bg-white px-1 ring-1 ring-black ring-opacity-5 drop-shadow-lg' },
|
|
21
|
+
react_2["default"].createElement("div", { className: 'flex flex-col items-center py-1 ' }, sortItem.selectData.map(function (item) { return (react_2["default"].createElement(react_1.Menu.Item, { key: item.id }, function (_a) {
|
|
22
|
+
var active = _a.active;
|
|
23
|
+
return (react_2["default"].createElement("button", { className: (0, types_1.classNames)(active || activeMenu === item.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', 'bg-gray-200" my-[1px] block w-full min-w-max cursor-pointer rounded-lg border-gray-300 px-2 py-2 text-xs font-medium text-gray-700 transition-all hover:bg-gray-200 sm:text-xs'), onClick: function () { return onChangeSelect(item, sortItem.field); }, type: 'button' }, item.name));
|
|
24
|
+
})); }))))));
|
|
25
|
+
};
|
|
26
|
+
exports["default"] = SelectSort;
|
|
27
|
+
//# sourceMappingURL=SelectSort.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectSort.js","sourceRoot":"","sources":["../../../../src/components/Table/SelectSort.tsx"],"names":[],"mappings":";;;AAAA,2CAAoD;AACpD,mDAA2D;AAC3D,qDAA2C;AAC3C,kCAAqC;AAUrC,IAAM,UAAU,GAAyB,UAAC,EAAkE;;QAAhE,UAAU,gBAAA,EAAE,cAAc,oBAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAAO,OAAA,CAC/G,iCAAC,YAAI,IACH,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,6BAAsB,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAE;QAEjG;YACE,iCAAC,YAAI,CAAC,MAAM,IAAC,SAAS,EAAC,iOAAiO;gBACrP,WAAW,CAAC,MAAM,GAAG,CAAC;oBACrB,CAAC,CAAC,MAAA,MAAA,WAAW,CAAC,IAAI,CAAC,UAAC,UAAe,IAAK,OAAA,UAAU,CAAC,UAAU,KAAK,QAAQ,CAAC,KAAK,EAAxC,CAAwC,CAAC,0CAAE,IAAI,mCAAI,QAAQ,CAAC,IAAI;oBACxG,CAAC,CAAC,QAAQ,CAAC,IAAI;;gBAEjB,iCAAC,uBAAe,mBAAa,MAAM,EAAC,SAAS,EAAC,SAAS,GAAG,CAC9C,CACV;QAEN,iCAAC,kBAAU,IACT,EAAE,EAAE,gBAAQ,EACZ,KAAK,EAAC,kCAAkC,EACxC,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAC,iCAAiC,EACzC,KAAK,EAAC,gCAAgC,EACtC,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAC,8BAA8B;YAEtC,iCAAC,YAAI,CAAC,KAAK,IAAC,SAAS,EAAC,oIAAoI;gBACxJ,0CAAK,SAAS,EAAC,kCAAkC,IAC9C,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CACtC,iCAAC,YAAI,CAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,IACpB,UAAC,EAAU;wBAAR,MAAM,YAAA;oBAAO,OAAA,CACf,6CACE,SAAS,EAAE,IAAA,kBAAU,EACnB,MAAM,IAAI,UAAU,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,eAAe,EACjF,oLAAoL,CACrL,EACD,OAAO,EAAE,cAAM,OAAA,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,EAApC,CAAoC,EACnD,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,CACH,CACV;gBAXgB,CAWhB,CACS,CACb,EAfuC,CAevC,CAAC,CACE,CACK,CACF,CACR,CACR,CAAA;CAAA,CAAA;AACD,qBAAe,UAAU,CAAA"}
|
|
@@ -4,6 +4,7 @@ var tslib_1 = require("tslib");
|
|
|
4
4
|
var react_1 = require("@headlessui/react");
|
|
5
5
|
var solid_1 = require("@heroicons/react/20/solid");
|
|
6
6
|
var react_2 = tslib_1.__importStar(require("react"));
|
|
7
|
+
var SelectSort_1 = tslib_1.__importDefault(require("./SelectSort"));
|
|
7
8
|
function classNames() {
|
|
8
9
|
var classes = [];
|
|
9
10
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
@@ -15,49 +16,21 @@ function Sort(_a) {
|
|
|
15
16
|
var activeMenu = _a.activeMenu, className = _a.className, onChange = _a.onChange, onChangeSelect = _a.onChangeSelect, selectArray = _a.selectArray, sortList = _a.sortList;
|
|
16
17
|
return (react_2["default"].createElement(react_2["default"].Fragment, null,
|
|
17
18
|
react_2["default"].createElement("div", { className: "".concat(className, " hidden sm:block") }, sortList.map(function (sortItem) {
|
|
18
|
-
|
|
19
|
-
return sortItem.type === 'select-filter' ? (react_2["default"].createElement(react_1.Menu, { key: sortItem.id, as: 'div', className: 'relative mr-1 inline-block text-left' },
|
|
20
|
-
react_2["default"].createElement("div", null,
|
|
21
|
-
react_2["default"].createElement(react_1.Menu.Button, { className: 'flex items-center rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
22
|
-
selectArray.length > 0
|
|
23
|
-
? (_b = (_a = selectArray.find(function (selectItem) { return selectItem.columnName === sortItem.field; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : sortItem.name
|
|
24
|
-
: sortItem.name,
|
|
25
|
-
"\u00A0",
|
|
26
|
-
react_2["default"].createElement(solid_1.ChevronDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
27
|
-
react_2["default"].createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
28
|
-
react_2["default"].createElement(react_1.Menu.Items, { className: 'absolute left-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white px-1 ring-1 ring-black ring-opacity-5 drop-shadow-lg' },
|
|
29
|
-
react_2["default"].createElement("div", { className: 'flex flex-col items-center py-1 ' }, sortItem.selectData.map(function (item) { return (react_2["default"].createElement(react_1.Menu.Item, { key: item.id }, function (_a) {
|
|
30
|
-
var active = _a.active;
|
|
31
|
-
return (react_2["default"].createElement("button", { className: classNames(active || activeMenu === item.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', 'bg-gray-200" my-[1px] block w-full cursor-pointer rounded-lg border-gray-300 px-2 py-2 text-xs font-medium text-gray-700 transition-all hover:bg-gray-200 sm:text-xs'), onClick: function () { return onChangeSelect(item, sortItem.field); }, type: 'button' }, item.name));
|
|
32
|
-
})); })))))) : (react_2["default"].createElement("button", { key: sortItem.id, className: classNames('mr-1 inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', activeMenu === sortItem.id ? 'bg-gray-200' : 'bg-transparent'), onClick: function () { return onChange(sortItem); } }, sortItem.name));
|
|
19
|
+
return sortItem.type === 'select-filter' ? (react_2["default"].createElement(SelectSort_1["default"], { key: sortItem.id, activeMenu: activeMenu, onChangeSelect: onChangeSelect, selectArray: selectArray, sortItem: sortItem, typeDisplay: 'DESKTOP' })) : (react_2["default"].createElement("button", { key: sortItem.id, className: classNames('mr-1 inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', activeMenu === sortItem.id ? 'bg-gray-200' : 'bg-transparent'), onClick: function () { return onChange(sortItem); }, type: 'button' }, sortItem.name));
|
|
33
20
|
})),
|
|
34
|
-
sortList.map(function (sortItem) {
|
|
35
|
-
var _a, _b;
|
|
36
|
-
return sortItem.type === 'select-filter' && (react_2["default"].createElement(react_1.Menu, { key: sortItem.id, as: 'div', className: 'relative mr-1 inline-block text-left sm:hidden' },
|
|
37
|
-
react_2["default"].createElement("div", null,
|
|
38
|
-
react_2["default"].createElement(react_1.Menu.Button, { className: 'flex items-center rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
39
|
-
selectArray.length > 0
|
|
40
|
-
? (_b = (_a = selectArray.find(function (selectItem) { return selectItem.columnName === sortItem.field; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : sortItem.name
|
|
41
|
-
: sortItem.name,
|
|
42
|
-
"\u00A0",
|
|
43
|
-
react_2["default"].createElement(solid_1.ChevronDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
44
|
-
react_2["default"].createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
45
|
-
react_2["default"].createElement(react_1.Menu.Items, { className: 'absolute left-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white px-1 ring-1 ring-black ring-opacity-5 drop-shadow-lg' },
|
|
46
|
-
react_2["default"].createElement("div", { className: 'flex flex-col items-center py-1 ' }, sortItem.selectData.map(function (item) { return (react_2["default"].createElement(react_1.Menu.Item, { key: item.id }, function (_a) {
|
|
47
|
-
var active = _a.active;
|
|
48
|
-
return (react_2["default"].createElement("button", { className: classNames(active || activeMenu === item.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', 'bg-gray-200" my-[1px] block w-full cursor-pointer rounded-lg border-gray-300 px-2 py-2 text-xs font-medium text-gray-700 transition-all hover:bg-gray-200 sm:text-xs'), onClick: function () { return onChangeSelect(item, sortItem.field); }, type: 'button' }, item.name));
|
|
49
|
-
})); }))))));
|
|
50
|
-
}),
|
|
51
21
|
react_2["default"].createElement(react_1.Menu, { as: 'div', className: 'relative inline-block text-left sm:hidden' },
|
|
52
22
|
react_2["default"].createElement("div", null,
|
|
53
23
|
react_2["default"].createElement(react_1.Menu.Button, { className: 'flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
54
24
|
react_2["default"].createElement(solid_1.ArrowsUpDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
55
25
|
react_2["default"].createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
56
26
|
react_2["default"].createElement(react_1.Menu.Items, { className: 'absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' },
|
|
57
|
-
react_2["default"].createElement("div", { className: 'py-1' }, sortList.map(function (sortItem) {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
27
|
+
react_2["default"].createElement("div", { className: 'py-1' }, sortList.map(function (sortItem) {
|
|
28
|
+
return sortItem.type === 'select-filter' ? (react_2["default"].createElement(react_1.Menu.Item, { key: sortItem.id },
|
|
29
|
+
react_2["default"].createElement(SelectSort_1["default"], { activeMenu: activeMenu, onChangeSelect: onChangeSelect, selectArray: selectArray, sortItem: sortItem, typeDisplay: 'MOBILE' }))) : (react_2["default"].createElement(react_1.Menu.Item, { key: sortItem.id }, function (_a) {
|
|
30
|
+
var active = _a.active;
|
|
31
|
+
return (react_2["default"].createElement("a", { className: classNames(active || activeMenu === sortItem.id ? 'text-indigo-600' : 'text-gray-700', 'block cursor-pointer px-4 py-2 text-sm sm:text-xs'), onClick: function () { return onChange(sortItem); } }, sortItem.name));
|
|
32
|
+
}));
|
|
33
|
+
})))))));
|
|
61
34
|
}
|
|
62
35
|
exports["default"] = Sort;
|
|
63
36
|
//# sourceMappingURL=sort.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../../../src/components/Table/sort.tsx"],"names":[],"mappings":";;;AAAA,2CAAoD;AACpD,
|
|
1
|
+
{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../../../src/components/Table/sort.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
interface ISelectSortProps {
|
|
3
|
+
sortItem: any;
|
|
4
|
+
activeMenu: any;
|
|
5
|
+
typeDisplay: 'DESKTOP' | 'MOBILE';
|
|
6
|
+
selectArray: Array<any>;
|
|
7
|
+
onChangeSelect(item: any, columnName: string): void;
|
|
8
|
+
}
|
|
9
|
+
declare const SelectSort: FC<ISelectSortProps>;
|
|
10
|
+
export default SelectSort;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Menu, Transition } from '@headlessui/react';
|
|
2
|
+
import { ChevronDownIcon } from '@heroicons/react/24/solid';
|
|
3
|
+
import React, { Fragment } from 'react';
|
|
4
|
+
import { classNames } from '../types';
|
|
5
|
+
var SelectSort = function (_a) {
|
|
6
|
+
var _b, _c;
|
|
7
|
+
var activeMenu = _a.activeMenu, onChangeSelect = _a.onChangeSelect, selectArray = _a.selectArray, sortItem = _a.sortItem, typeDisplay = _a.typeDisplay;
|
|
8
|
+
return (React.createElement(Menu, { key: sortItem.id, as: 'div', className: "relative text-left ".concat(typeDisplay === 'DESKTOP' ? 'mr-1 inline-block ' : 'px-4 py-2') },
|
|
9
|
+
React.createElement("div", null,
|
|
10
|
+
React.createElement(Menu.Button, { className: 'flex min-w-max items-center rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
11
|
+
selectArray.length > 0
|
|
12
|
+
? (_c = (_b = selectArray.find(function (selectItem) { return selectItem.columnName === sortItem.field; })) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : sortItem.name
|
|
13
|
+
: sortItem.name,
|
|
14
|
+
"\u00A0",
|
|
15
|
+
React.createElement(ChevronDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
16
|
+
React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
17
|
+
React.createElement(Menu.Items, { className: 'absolute left-0 z-10 mt-2 w-32 min-w-max origin-top-right rounded-md bg-white px-1 ring-1 ring-black ring-opacity-5 drop-shadow-lg' },
|
|
18
|
+
React.createElement("div", { className: 'flex flex-col items-center py-1 ' }, sortItem.selectData.map(function (item) { return (React.createElement(Menu.Item, { key: item.id }, function (_a) {
|
|
19
|
+
var active = _a.active;
|
|
20
|
+
return (React.createElement("button", { className: classNames(active || activeMenu === item.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', 'bg-gray-200" my-[1px] block w-full min-w-max cursor-pointer rounded-lg border-gray-300 px-2 py-2 text-xs font-medium text-gray-700 transition-all hover:bg-gray-200 sm:text-xs'), onClick: function () { return onChangeSelect(item, sortItem.field); }, type: 'button' }, item.name));
|
|
21
|
+
})); }))))));
|
|
22
|
+
};
|
|
23
|
+
export default SelectSort;
|
|
24
|
+
//# sourceMappingURL=SelectSort.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectSort.js","sourceRoot":"","sources":["../../../../src/components/Table/SelectSort.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAUrC,IAAM,UAAU,GAAyB,UAAC,EAAkE;;QAAhE,UAAU,gBAAA,EAAE,cAAc,oBAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAAO,OAAA,CAC/G,oBAAC,IAAI,IACH,GAAG,EAAE,QAAQ,CAAC,EAAE,EAChB,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,6BAAsB,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAE;QAEjG;YACE,oBAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAC,iOAAiO;gBACrP,WAAW,CAAC,MAAM,GAAG,CAAC;oBACrB,CAAC,CAAC,MAAA,MAAA,WAAW,CAAC,IAAI,CAAC,UAAC,UAAe,IAAK,OAAA,UAAU,CAAC,UAAU,KAAK,QAAQ,CAAC,KAAK,EAAxC,CAAwC,CAAC,0CAAE,IAAI,mCAAI,QAAQ,CAAC,IAAI;oBACxG,CAAC,CAAC,QAAQ,CAAC,IAAI;;gBAEjB,oBAAC,eAAe,mBAAa,MAAM,EAAC,SAAS,EAAC,SAAS,GAAG,CAC9C,CACV;QAEN,oBAAC,UAAU,IACT,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,kCAAkC,EACxC,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAC,iCAAiC,EACzC,KAAK,EAAC,gCAAgC,EACtC,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAC,8BAA8B;YAEtC,oBAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,oIAAoI;gBACxJ,6BAAK,SAAS,EAAC,kCAAkC,IAC9C,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CACtC,oBAAC,IAAI,CAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,IACpB,UAAC,EAAU;wBAAR,MAAM,YAAA;oBAAO,OAAA,CACf,gCACE,SAAS,EAAE,UAAU,CACnB,MAAM,IAAI,UAAU,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,eAAe,EACjF,oLAAoL,CACrL,EACD,OAAO,EAAE,cAAM,OAAA,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,EAApC,CAAoC,EACnD,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,CACH,CACV;gBAXgB,CAWhB,CACS,CACb,EAfuC,CAevC,CAAC,CACE,CACK,CACF,CACR,CACR,CAAA;CAAA,CAAA;AACD,eAAe,UAAU,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Menu, Transition } from '@headlessui/react';
|
|
2
|
-
import { ArrowsUpDownIcon
|
|
2
|
+
import { ArrowsUpDownIcon } from '@heroicons/react/20/solid';
|
|
3
3
|
import React, { Fragment } from 'react';
|
|
4
|
+
import SelectSort from './SelectSort';
|
|
4
5
|
function classNames() {
|
|
5
6
|
var classes = [];
|
|
6
7
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
@@ -12,49 +13,21 @@ function Sort(_a) {
|
|
|
12
13
|
var activeMenu = _a.activeMenu, className = _a.className, onChange = _a.onChange, onChangeSelect = _a.onChangeSelect, selectArray = _a.selectArray, sortList = _a.sortList;
|
|
13
14
|
return (React.createElement(React.Fragment, null,
|
|
14
15
|
React.createElement("div", { className: "".concat(className, " hidden sm:block") }, sortList.map(function (sortItem) {
|
|
15
|
-
|
|
16
|
-
return sortItem.type === 'select-filter' ? (React.createElement(Menu, { key: sortItem.id, as: 'div', className: 'relative mr-1 inline-block text-left' },
|
|
17
|
-
React.createElement("div", null,
|
|
18
|
-
React.createElement(Menu.Button, { className: 'flex items-center rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
19
|
-
selectArray.length > 0
|
|
20
|
-
? (_b = (_a = selectArray.find(function (selectItem) { return selectItem.columnName === sortItem.field; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : sortItem.name
|
|
21
|
-
: sortItem.name,
|
|
22
|
-
"\u00A0",
|
|
23
|
-
React.createElement(ChevronDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
24
|
-
React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
25
|
-
React.createElement(Menu.Items, { className: 'absolute left-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white px-1 ring-1 ring-black ring-opacity-5 drop-shadow-lg' },
|
|
26
|
-
React.createElement("div", { className: 'flex flex-col items-center py-1 ' }, sortItem.selectData.map(function (item) { return (React.createElement(Menu.Item, { key: item.id }, function (_a) {
|
|
27
|
-
var active = _a.active;
|
|
28
|
-
return (React.createElement("button", { className: classNames(active || activeMenu === item.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', 'bg-gray-200" my-[1px] block w-full cursor-pointer rounded-lg border-gray-300 px-2 py-2 text-xs font-medium text-gray-700 transition-all hover:bg-gray-200 sm:text-xs'), onClick: function () { return onChangeSelect(item, sortItem.field); }, type: 'button' }, item.name));
|
|
29
|
-
})); })))))) : (React.createElement("button", { key: sortItem.id, className: classNames('mr-1 inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', activeMenu === sortItem.id ? 'bg-gray-200' : 'bg-transparent'), onClick: function () { return onChange(sortItem); } }, sortItem.name));
|
|
16
|
+
return sortItem.type === 'select-filter' ? (React.createElement(SelectSort, { key: sortItem.id, activeMenu: activeMenu, onChangeSelect: onChangeSelect, selectArray: selectArray, sortItem: sortItem, typeDisplay: 'DESKTOP' })) : (React.createElement("button", { key: sortItem.id, className: classNames('mr-1 inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', activeMenu === sortItem.id ? 'bg-gray-200' : 'bg-transparent'), onClick: function () { return onChange(sortItem); }, type: 'button' }, sortItem.name));
|
|
30
17
|
})),
|
|
31
|
-
sortList.map(function (sortItem) {
|
|
32
|
-
var _a, _b;
|
|
33
|
-
return sortItem.type === 'select-filter' && (React.createElement(Menu, { key: sortItem.id, as: 'div', className: 'relative mr-1 inline-block text-left sm:hidden' },
|
|
34
|
-
React.createElement("div", null,
|
|
35
|
-
React.createElement(Menu.Button, { className: 'flex items-center rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
36
|
-
selectArray.length > 0
|
|
37
|
-
? (_b = (_a = selectArray.find(function (selectItem) { return selectItem.columnName === sortItem.field; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : sortItem.name
|
|
38
|
-
: sortItem.name,
|
|
39
|
-
"\u00A0",
|
|
40
|
-
React.createElement(ChevronDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
41
|
-
React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
42
|
-
React.createElement(Menu.Items, { className: 'absolute left-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white px-1 ring-1 ring-black ring-opacity-5 drop-shadow-lg' },
|
|
43
|
-
React.createElement("div", { className: 'flex flex-col items-center py-1 ' }, sortItem.selectData.map(function (item) { return (React.createElement(Menu.Item, { key: item.id }, function (_a) {
|
|
44
|
-
var active = _a.active;
|
|
45
|
-
return (React.createElement("button", { className: classNames(active || activeMenu === item.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', 'bg-gray-200" my-[1px] block w-full cursor-pointer rounded-lg border-gray-300 px-2 py-2 text-xs font-medium text-gray-700 transition-all hover:bg-gray-200 sm:text-xs'), onClick: function () { return onChangeSelect(item, sortItem.field); }, type: 'button' }, item.name));
|
|
46
|
-
})); }))))));
|
|
47
|
-
}),
|
|
48
18
|
React.createElement(Menu, { as: 'div', className: 'relative inline-block text-left sm:hidden' },
|
|
49
19
|
React.createElement("div", null,
|
|
50
20
|
React.createElement(Menu.Button, { className: 'flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
|
|
51
21
|
React.createElement(ArrowsUpDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
|
|
52
22
|
React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
|
|
53
23
|
React.createElement(Menu.Items, { className: 'absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' },
|
|
54
|
-
React.createElement("div", { className: 'py-1' }, sortList.map(function (sortItem) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
24
|
+
React.createElement("div", { className: 'py-1' }, sortList.map(function (sortItem) {
|
|
25
|
+
return sortItem.type === 'select-filter' ? (React.createElement(Menu.Item, { key: sortItem.id },
|
|
26
|
+
React.createElement(SelectSort, { activeMenu: activeMenu, onChangeSelect: onChangeSelect, selectArray: selectArray, sortItem: sortItem, typeDisplay: 'MOBILE' }))) : (React.createElement(Menu.Item, { key: sortItem.id }, function (_a) {
|
|
27
|
+
var active = _a.active;
|
|
28
|
+
return (React.createElement("a", { className: classNames(active || activeMenu === sortItem.id ? 'text-indigo-600' : 'text-gray-700', 'block cursor-pointer px-4 py-2 text-sm sm:text-xs'), onClick: function () { return onChange(sortItem); } }, sortItem.name));
|
|
29
|
+
}));
|
|
30
|
+
})))))));
|
|
58
31
|
}
|
|
59
32
|
export default Sort;
|
|
60
33
|
//# sourceMappingURL=sort.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../../../src/components/Table/sort.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,
|
|
1
|
+
{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../../../src/components/Table/sort.tsx"],"names":[],"mappings":"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"}
|