Created
December 15, 2018 16:19
-
-
Save shubhang93/6ca5d3893e06d7e31f3a3bfffce781e2 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/hebixew
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
.paginator{ | |
flex-direction:row; | |
flex:1 | |
} | |
.button-active { | |
color:orange | |
} | |
.button-normal { | |
color:black | |
} | |
</style> | |
</head> | |
<body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.development.js"></script> | |
<div id="app"></div> | |
<script id="jsbin-javascript"> | |
"use strict"; | |
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })(); | |
var _React = React; | |
var useState = _React.useState; | |
var useEffect = _React.useEffect; | |
var usePagination = function usePagination() { | |
var data = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0]; | |
var offsetSize = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1]; | |
var _useState = useState(1); | |
var _useState2 = _slicedToArray(_useState, 2); | |
var pageNumber = _useState2[0]; | |
var setPage = _useState2[1]; | |
var _useState3 = useState([]); | |
var _useState32 = _slicedToArray(_useState3, 2); | |
var visibleData = _useState32[0]; | |
var setVisibleData = _useState32[1]; | |
var numPages = Math.ceil(data.length / offsetSize); | |
var startIndex = pageNumber * offsetSize - offsetSize; | |
useEffect(function () { | |
var endIndex = pageNumber * offsetSize; | |
setVisibleData(data.slice(startIndex, endIndex)); | |
}, [pageNumber]); | |
var onPageChange = function onPageChange(pageNumber) { | |
setPage(pageNumber); | |
}; | |
return [pageNumber, numPages, visibleData, onPageChange]; | |
}; | |
var App = function App(props) { | |
var data = Array(1000).fill(0).map(function (i, idx) { | |
return idx + 1; | |
}); | |
var _usePagination = usePagination(data); | |
var _usePagination2 = _slicedToArray(_usePagination, 4); | |
var page = _usePagination2[0]; | |
var numPages = _usePagination2[1]; | |
var visibleData = _usePagination2[2]; | |
var onPageChange = _usePagination2[3]; | |
return React.createElement( | |
"div", | |
null, | |
visibleData.map(function (d) { | |
return React.createElement( | |
"li", | |
{ key: d }, | |
d | |
); | |
}), | |
React.createElement( | |
"div", | |
{ className: "paginator" }, | |
Array(numPages).fill(0).map(function (_, idx) { | |
return React.createElement( | |
"button", | |
{ key: idx + 1, onClick: function () { | |
return onPageChange(idx + 1); | |
} }, | |
idx + 1 | |
); | |
}) | |
) | |
); | |
}; | |
ReactDOM.render(React.createElement(App, null), document.getElementById("app")); | |
</script> | |
<script id="jsbin-source-css" type="text/css">.paginator{ | |
flex-direction:row; | |
flex:1 | |
} | |
.button-active { | |
color:orange | |
} | |
.button-normal { | |
color:black | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">const{useState,useEffect}=React | |
const usePagination=function(data=[],offsetSize=100){ | |
const[pageNumber,setPage]=useState(1) | |
const[visibleData,setVisibleData]=useState([]) | |
const numPages=Math.ceil(data.length/offsetSize) | |
const startIndex = (pageNumber*offsetSize)-offsetSize | |
useEffect(()=>{ | |
const endIndex= pageNumber*offsetSize | |
setVisibleData(data.slice(startIndex,endIndex)) | |
},[pageNumber]) | |
const onPageChange=function(pageNumber){ | |
setPage(pageNumber) | |
} | |
return [pageNumber,numPages,visibleData,onPageChange] | |
} | |
const App = function(props){ | |
let data= Array(1000).fill(0).map((i,idx)=>idx+1) | |
const[page,numPages,visibleData,onPageChange]=usePagination(data) | |
return ( | |
<div> | |
{visibleData.map(d=><li key={d}>{d}</li>)} | |
<div className="paginator"> | |
{Array(numPages).fill(0).map((_,idx)=><button key={idx+1} onClick={()=>onPageChange(idx+1)}>{idx+1}</button>)} | |
</div> | |
</div> | |
) | |
} | |
ReactDOM.render(<App/>,document.getElementById("app"))</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.paginator{ | |
flex-direction:row; | |
flex:1 | |
} | |
.button-active { | |
color:orange | |
} | |
.button-normal { | |
color:black | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })(); | |
var _React = React; | |
var useState = _React.useState; | |
var useEffect = _React.useEffect; | |
var usePagination = function usePagination() { | |
var data = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0]; | |
var offsetSize = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1]; | |
var _useState = useState(1); | |
var _useState2 = _slicedToArray(_useState, 2); | |
var pageNumber = _useState2[0]; | |
var setPage = _useState2[1]; | |
var _useState3 = useState([]); | |
var _useState32 = _slicedToArray(_useState3, 2); | |
var visibleData = _useState32[0]; | |
var setVisibleData = _useState32[1]; | |
var numPages = Math.ceil(data.length / offsetSize); | |
var startIndex = pageNumber * offsetSize - offsetSize; | |
useEffect(function () { | |
var endIndex = pageNumber * offsetSize; | |
setVisibleData(data.slice(startIndex, endIndex)); | |
}, [pageNumber]); | |
var onPageChange = function onPageChange(pageNumber) { | |
setPage(pageNumber); | |
}; | |
return [pageNumber, numPages, visibleData, onPageChange]; | |
}; | |
var App = function App(props) { | |
var data = Array(1000).fill(0).map(function (i, idx) { | |
return idx + 1; | |
}); | |
var _usePagination = usePagination(data); | |
var _usePagination2 = _slicedToArray(_usePagination, 4); | |
var page = _usePagination2[0]; | |
var numPages = _usePagination2[1]; | |
var visibleData = _usePagination2[2]; | |
var onPageChange = _usePagination2[3]; | |
return React.createElement( | |
"div", | |
null, | |
visibleData.map(function (d) { | |
return React.createElement( | |
"li", | |
{ key: d }, | |
d | |
); | |
}), | |
React.createElement( | |
"div", | |
{ className: "paginator" }, | |
Array(numPages).fill(0).map(function (_, idx) { | |
return React.createElement( | |
"button", | |
{ key: idx + 1, onClick: function () { | |
return onPageChange(idx + 1); | |
} }, | |
idx + 1 | |
); | |
}) | |
) | |
); | |
}; | |
ReactDOM.render(React.createElement(App, null), document.getElementById("app")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment