diff --git a/e2e/pages/dynamic/components/app.js b/e2e/pages/dynamic/components/app.js
index 67665d2d..ff73d159 100644
--- a/e2e/pages/dynamic/components/app.js
+++ b/e2e/pages/dynamic/components/app.js
@@ -4,13 +4,14 @@ import FormsPage from './pages/forms/index.js';
import EventsPage from './pages/events/index.js';
import IframePage from './pages/iframes/index.js';
import MediaPage from './pages/media/index.js';
+import PaginationPage from './pages/pagination/index.js';
const e = React.createElement;
const Router = ReactRouter.Router;
const Switch = ReactRouter.Switch;
const Route = ReactRouter.Route;
const Redirect = ReactRouter.Redirect;
-const createBrowserHistory = History.createBrowserHistory;
+const createHistory = History.createHashHistory;
export default React.memo(function AppComponent(params = {}) {
let redirectTo;
@@ -32,7 +33,7 @@ export default React.memo(function AppComponent(params = {}) {
redirectTo = e(Redirect, { to });
}
- return e(Router, { history: createBrowserHistory() },
+ return e(Router, { history: createHistory() },
e(Layout, null, [
e(Switch, null, [
e(Route, {
@@ -56,6 +57,10 @@ export default React.memo(function AppComponent(params = {}) {
path: '/media',
component: MediaPage
}),
+ e(Route, {
+ path: '/pagination',
+ component: PaginationPage
+ }),
]),
redirectTo
])
diff --git a/e2e/pages/dynamic/components/pages/pagination/index.js b/e2e/pages/dynamic/components/pages/pagination/index.js
new file mode 100644
index 00000000..a4e260aa
--- /dev/null
+++ b/e2e/pages/dynamic/components/pages/pagination/index.js
@@ -0,0 +1,59 @@
+const e = React.createElement;
+const Pagination = ReactBootstrap.Pagination;
+const Item = Pagination.Item;
+
+export default class PaginationPage extends React.Component {
+ min = 1;
+ max = 5;
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ active: 1
+ }
+ }
+
+ handleClick(number) {
+ if (number > this.max || number < this.min) {
+ return;
+ }
+
+ this.setState({
+ active: number
+ })
+ }
+
+ render() {
+ const items = [];
+
+ items.push(e(Pagination.Prev, {
+ className: "page-item-prev",
+ disabled: this.state.active === this.min,
+ onClick: this.handleClick.bind(this, this.state.active - 1)
+ }));
+
+ for (let number = this.min; number <= this.max; number++) {
+ items.push(
+ e(Item, {
+ key: number,
+ active: number === this.state.active,
+ onClick: this.handleClick.bind(this, number)
+ }, number)
+ );
+ }
+
+ items.push(e(Pagination.Next, {
+ className: "page-item-next",
+ disabled: this.state.active === this.max,
+ onClick: this.handleClick.bind(this, this.state.active + 1)
+ }));
+
+ return e("div", { className: "row"}, [
+ e("div", { className: "col-12" }, [
+ e(Pagination, {
+ }, items)
+ ])
+ ])
+ }
+}
\ No newline at end of file
diff --git a/e2e/pages/dynamic/index.html b/e2e/pages/dynamic/index.html
index 73f670ca..cb06b40e 100644
--- a/e2e/pages/dynamic/index.html
+++ b/e2e/pages/dynamic/index.html
@@ -6,7 +6,7 @@
Ferret E2E SPA
-
+
@@ -16,6 +16,7 @@
+