Skip to content

Commit e53d3e3

Browse files
abkarimabkarim
committed
files added
1 parent 1847ac0 commit e53d3e3

File tree

10 files changed

+409
-5
lines changed

10 files changed

+409
-5
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@
88
# testing
99
/coverage
1010

11-
# production
12-
/build
13-
1411
# misc
1512
.DS_Store
1613
.env.local

‎build/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports["default"] = void 0;
7+
var _Table = _interopRequireDefault(require("./react-table/Table"));
8+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
9+
var _default = _Table["default"];
10+
exports["default"] = _default;

‎build/react-table/Footer.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports["default"] = Footer;
7+
var _Pagination = _interopRequireDefault(require("./Pagination"));
8+
var _excluded = ["itemsPerPage", "currentPage", "setCurrentPage", "total"];
9+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
11+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
12+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
13+
function Footer(_ref) {
14+
var itemsPerPage = _ref.itemsPerPage,
15+
currentPage = _ref.currentPage,
16+
setCurrentPage = _ref.setCurrentPage,
17+
total = _ref.total,
18+
props = _objectWithoutProperties(_ref, _excluded);
19+
var showingFrom = itemsPerPage * (currentPage - 1);
20+
var showingTo = showingFrom + itemsPerPage > total ? total : parseInt(showingFrom) + parseInt(itemsPerPage);
21+
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
22+
className: "flex justify-between mt-1"
23+
}), total && /*#__PURE__*/React.createElement("div", null, "showing from ", /*#__PURE__*/React.createElement("span", {
24+
className: "font-bold"
25+
}, showingFrom), "\xA0 to\xA0", /*#__PURE__*/React.createElement("span", {
26+
className: "font-bold"
27+
}, showingTo), "\xA0 of total\xA0", total), /*#__PURE__*/React.createElement(_Pagination["default"], {
28+
total: total,
29+
currentPage: currentPage,
30+
itemsPerPage: itemsPerPage,
31+
setCurrentPage: setCurrentPage
32+
}));
33+
}

‎build/react-table/Header.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports["default"] = Header;
7+
var _react = require("react");
8+
var _appendURLParameter = _interopRequireDefault(require("../util/appendURLParameter"));
9+
var _excluded = ["perPage", "setPerPage", "search", "setSearch", "searchBy", "setSearchBy", "title"];
10+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
12+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
13+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
14+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
15+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
16+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
17+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
18+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
19+
function Header(_ref) {
20+
var perPage = _ref.perPage,
21+
setPerPage = _ref.setPerPage,
22+
search = _ref.search,
23+
setSearch = _ref.setSearch,
24+
searchBy = _ref.searchBy,
25+
setSearchBy = _ref.setSearchBy,
26+
title = _ref.title,
27+
props = _objectWithoutProperties(_ref, _excluded);
28+
var _useState = (0, _react.useState)(search),
29+
_useState2 = _slicedToArray(_useState, 2),
30+
searchLocal = _useState2[0],
31+
setSearchLocal = _useState2[1];
32+
var _useState3 = (0, _react.useState)(search),
33+
_useState4 = _slicedToArray(_useState3, 2),
34+
searchByLocal = _useState4[0],
35+
setSearchByLocal = _useState4[1];
36+
var executeSearch = function executeSearch() {
37+
(0, _appendURLParameter["default"])("search", searchLocal);
38+
(0, _appendURLParameter["default"])("search_by", searchByLocal);
39+
setSearch(searchLocal);
40+
setSearchBy(searchByLocal);
41+
};
42+
var itemsCount = [10, 20, 30, 40, 50, 100];
43+
return /*#__PURE__*/React.createElement("div", {
44+
className: "flex justify-between items-center mb-1"
45+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
46+
htmlFor: "react-table-items-per-page"
47+
}, "show\xA0"), /*#__PURE__*/React.createElement("select", {
48+
id: "react-table-items-per-page",
49+
className: "p-1 border-2 rounded-sm cursor-pointer",
50+
onChange: function onChange(e) {
51+
(0, _appendURLParameter["default"])("limit", e.target.value);
52+
setPerPage(e.target.value);
53+
},
54+
value: perPage
55+
}, itemsCount.map(function (n, i) {
56+
return /*#__PURE__*/React.createElement("option", {
57+
value: n,
58+
key: i
59+
}, n);
60+
}))), /*#__PURE__*/React.createElement("div", {
61+
className: "flex gap-1"
62+
}, /*#__PURE__*/React.createElement("select", {
63+
className: "p-1 border-2 rounded-sm cursor-pointer",
64+
onChange: function onChange(e) {
65+
return setSearchByLocal(e.target.value);
66+
},
67+
value: searchBy
68+
}, /*#__PURE__*/React.createElement("option", null, "column"), title.map(function (item, i) {
69+
return /*#__PURE__*/React.createElement("option", {
70+
value: item,
71+
key: i
72+
}, item);
73+
})), /*#__PURE__*/React.createElement("div", {
74+
className: "flex items-stretch"
75+
}, /*#__PURE__*/React.createElement("input", {
76+
type: "search",
77+
className: "bg-white border-2 rounded-sm p-1 border-r-0 h-8 focus:outline-none rounded-tr-none rounded-br-none",
78+
placeholder: "search",
79+
defaultValue: search,
80+
onChange: function onChange(e) {
81+
return setSearchLocal(e.target.value);
82+
}
83+
}), /*#__PURE__*/React.createElement("button", {
84+
type: "button",
85+
onClick: executeSearch,
86+
className: "bg-emerald-300 p-1 text-gray-900 rounded-sm h-8 rounded-tl-none rounded-bl-none"
87+
}, "\xA0search"))));
88+
}

‎build/react-table/Pagination.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports["default"] = Pagination;
7+
var _react = require("react");
8+
var _appendURLParameter = _interopRequireDefault(require("../util/appendURLParameter"));
9+
var _excluded = ["total", "currentPage", "itemsPerPage", "setCurrentPage"];
10+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
12+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
13+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
14+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
15+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
16+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
17+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
18+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
19+
var updatePageNumberInUrl = function updatePageNumberInUrl(n) {
20+
(0, _appendURLParameter["default"])("page", n);
21+
};
22+
function Pages(_ref) {
23+
var currentPage = _ref.currentPage,
24+
totalPages = _ref.totalPages,
25+
setCurrentPage = _ref.setCurrentPage;
26+
var _useState = (0, _react.useState)([]),
27+
_useState2 = _slicedToArray(_useState, 2),
28+
pages = _useState2[0],
29+
setPages = _useState2[1];
30+
(0, _react.useEffect)(function () {
31+
var page = [];
32+
if (totalPages > 5) {
33+
if (currentPage !== 1) page.push(1);
34+
var middlePage = parseInt(totalPages / 2);
35+
if (middlePage === currentPage) {
36+
page.push(currentPage);
37+
} else if (middlePage > currentPage) {
38+
page.push(currentPage);
39+
page.push(middlePage);
40+
} else {
41+
page.push(middlePage);
42+
page.push(currentPage);
43+
}
44+
if (currentPage !== totalPages) page.push(totalPages);
45+
} else {
46+
for (var i = 1; i <= totalPages; i++) page.push(i);
47+
}
48+
var newPage = [];
49+
// eslint-disable-next-line array-callback-return
50+
page.map(function (n, i) {
51+
/**
52+
* Nothing to do on last page
53+
*/
54+
if (i + 1 === page.length) return newPage.push(n);
55+
/**
56+
* If current value and next value are siblings get original
57+
*/
58+
if (n + 1 === page[i + 1]) return newPage.push(n);
59+
newPage.push(n);
60+
newPage.push("...");
61+
});
62+
setPages(newPage);
63+
}, [currentPage, totalPages]);
64+
return pages.map(function (n, i) {
65+
if (!isNaN(n)) {
66+
return /*#__PURE__*/React.createElement("span", {
67+
key: i,
68+
onClick: function onClick() {
69+
updatePageNumberInUrl(n);
70+
setCurrentPage(n);
71+
},
72+
className: "inline-block px-2 py-1 rounded-sm ml-1 select-none cursor-pointer ".concat(currentPage === n ? "bg-gray-300 pointer-events-none" : "bg-gray-100")
73+
}, n);
74+
} else {
75+
return /*#__PURE__*/React.createElement("span", {
76+
key: i,
77+
className: "inline-block px-2 py-1 tracking-wider"
78+
}, "...");
79+
}
80+
});
81+
}
82+
function Pagination(_ref2) {
83+
var total = _ref2.total,
84+
currentPage = _ref2.currentPage,
85+
itemsPerPage = _ref2.itemsPerPage,
86+
setCurrentPage = _ref2.setCurrentPage,
87+
props = _objectWithoutProperties(_ref2, _excluded);
88+
var totalPages = Math.ceil(total / itemsPerPage);
89+
var className = "inline-block px-2 py-1 font-bold cursor-pointer bg-emerald-300 rounded-sm text-gray-800 hover:bg-emerald-500 transition select-none";
90+
return totalPages > 1 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
91+
className: currentPage === 1 ? "cursor-not-allowed" : ""
92+
}, /*#__PURE__*/React.createElement("span", {
93+
title: "previous page",
94+
onClick: function onClick() {
95+
updatePageNumberInUrl(currentPage - 1);
96+
setCurrentPage(currentPage - 1);
97+
},
98+
className: "".concat(className, " ").concat(currentPage === 1 ? "bg-emerald-100 pointer-events-none" : "")
99+
}, "\u21FD")), /*#__PURE__*/React.createElement(Pages, {
100+
currentPage: currentPage,
101+
totalPages: totalPages,
102+
setCurrentPage: setCurrentPage
103+
}), /*#__PURE__*/React.createElement("span", {
104+
className: currentPage === totalPages ? "cursor-not-allowed" : ""
105+
}, /*#__PURE__*/React.createElement("span", {
106+
title: "next page",
107+
onClick: function onClick() {
108+
updatePageNumberInUrl(currentPage + 1);
109+
setCurrentPage(currentPage + 1);
110+
},
111+
className: "".concat(className, " ml-1 ").concat(currentPage === totalPages ? "bg-emerald-100 pointer-events-none" : "")
112+
}, "\u21FE")));
113+
}

‎build/react-table/Table.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports["default"] = ReactTable;
7+
require("../util/app.css");
8+
var _Footer = _interopRequireDefault(require("./Footer"));
9+
var _Title = _interopRequireDefault(require("./Title"));
10+
var _Header = _interopRequireDefault(require("./Header"));
11+
var _excluded = ["order", "setOrder", "orderBy", "setOrderBy", "itemsPerPage", "setItemsPerPage", "currentPage", "setCurrentPage", "search", "searchBy", "setSearch", "setSearchBy", "total", "title", "data", "emptyMessage", "footer", "header"];
12+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
14+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
15+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
16+
function ReactTable(_ref) {
17+
var order = _ref.order,
18+
setOrder = _ref.setOrder,
19+
orderBy = _ref.orderBy,
20+
setOrderBy = _ref.setOrderBy,
21+
itemsPerPage = _ref.itemsPerPage,
22+
setItemsPerPage = _ref.setItemsPerPage,
23+
currentPage = _ref.currentPage,
24+
setCurrentPage = _ref.setCurrentPage,
25+
search = _ref.search,
26+
searchBy = _ref.searchBy,
27+
setSearch = _ref.setSearch,
28+
setSearchBy = _ref.setSearchBy,
29+
total = _ref.total,
30+
title = _ref.title,
31+
data = _ref.data,
32+
_ref$emptyMessage = _ref.emptyMessage,
33+
emptyMessage = _ref$emptyMessage === void 0 ? "Sorry, no data found" : _ref$emptyMessage,
34+
_ref$footer = _ref.footer,
35+
footer = _ref$footer === void 0 ? false : _ref$footer,
36+
_ref$header = _ref.header,
37+
header = _ref$header === void 0 ? true : _ref$header,
38+
props = _objectWithoutProperties(_ref, _excluded);
39+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Header["default"], {
40+
perPage: itemsPerPage,
41+
setPerPage: setItemsPerPage,
42+
title: title,
43+
search: search,
44+
setSearch: setSearch,
45+
searchBy: searchBy,
46+
setSearchBy: setSearchBy
47+
}), /*#__PURE__*/React.createElement("table", _extends({}, props, {
48+
className: "w-full"
49+
}), header === true && /*#__PURE__*/React.createElement("thead", {
50+
className: "bg-slate-200"
51+
}, /*#__PURE__*/React.createElement(_Title["default"], {
52+
orderBy: orderBy,
53+
setOrderBy: setOrderBy,
54+
order: order,
55+
setOrder: setOrder,
56+
data: title
57+
})), /*#__PURE__*/React.createElement("tbody", null, data.map(function (x) {
58+
return /*#__PURE__*/React.createElement("tr", {
59+
key: x["id"],
60+
className: "odd:bg-slate-50 even:bg-white border-b-2"
61+
}, title.map(function (item, i) {
62+
return /*#__PURE__*/React.createElement("td", {
63+
key: i,
64+
className: "first:pl-2 last:pr-2 text-gray-800"
65+
}, x[item]);
66+
}));
67+
}), data.length === 0 && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
68+
className: "bg-slate-50 px-2",
69+
colSpan: title.length
70+
}, emptyMessage))), footer === true && /*#__PURE__*/React.createElement("tfoot", {
71+
className: "bg-slate-200"
72+
}, /*#__PURE__*/React.createElement(_Title["default"], {
73+
orderBy: orderBy,
74+
setOrderBy: setOrderBy,
75+
order: order,
76+
setOrder: setOrder,
77+
data: title
78+
}))), /*#__PURE__*/React.createElement(_Footer["default"], {
79+
total: total,
80+
itemsPerPage: itemsPerPage,
81+
currentPage: currentPage,
82+
setCurrentPage: setCurrentPage
83+
}));
84+
}

0 commit comments

Comments
 (0)