@digigov/ui 0.35.0 → 0.35.2
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/CHANGELOG.md +8 -1
- package/admin/Pagination/Pagination.stories.d.ts +2 -0
- package/admin/Pagination/Pagination.stories.js +28 -0
- package/admin/Pagination/__stories__/Default.js +11 -69
- package/admin/Pagination/__stories__/PaginationSmall.js +1 -1
- package/admin/Pagination/__stories__/WithInactiveValues.d.ts +2 -0
- package/admin/Pagination/__stories__/WithInactiveValues.js +88 -0
- package/admin/Pagination/__stories__/WithResultsPerPage.d.ts +2 -0
- package/admin/Pagination/__stories__/WithResultsPerPage.js +60 -0
- package/admin/Pagination/index.js +1 -1
- package/admin/Pagination/index.mdx +8 -0
- package/es/admin/Pagination/Pagination.stories.js +2 -0
- package/es/admin/Pagination/__stories__/Default.js +11 -69
- package/es/admin/Pagination/__stories__/PaginationSmall.js +1 -1
- package/es/admin/Pagination/__stories__/WithInactiveValues.js +71 -0
- package/es/admin/Pagination/__stories__/WithResultsPerPage.js +42 -0
- package/es/admin/Pagination/index.js +1 -1
- package/es/admin/Pagination/index.mdx +8 -0
- package/es/locales/el.js +1 -1
- package/esm/admin/Pagination/Pagination.stories.js +2 -0
- package/esm/admin/Pagination/__stories__/Default.js +11 -69
- package/esm/admin/Pagination/__stories__/PaginationSmall.js +1 -1
- package/esm/admin/Pagination/__stories__/WithInactiveValues.js +71 -0
- package/esm/admin/Pagination/__stories__/WithResultsPerPage.js +42 -0
- package/esm/admin/Pagination/index.js +1 -1
- package/esm/admin/Pagination/index.mdx +8 -0
- package/esm/index.js +1 -1
- package/esm/locales/el.js +1 -1
- package/locales/el.js +1 -1
- package/package.json +3 -3
- package/src/admin/Pagination/Pagination.stories.js +2 -0
- package/src/admin/Pagination/__stories__/Default.tsx +9 -86
- package/src/admin/Pagination/__stories__/PaginationSmall.tsx +1 -1
- package/src/admin/Pagination/__stories__/WithInactiveValues.tsx +90 -0
- package/src/admin/Pagination/__stories__/WithResultsPerPage.tsx +66 -0
- package/src/admin/Pagination/index.mdx +8 -0
- package/src/admin/Pagination/index.tsx +1 -1
- package/src/locales/el.ts +1 -1
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/admin/Pagination';
|
|
3
|
+
import { SelectContainer, SelectOption } from '@digigov/ui/core/SelectContainer';
|
|
4
|
+
import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
|
|
5
|
+
import { Link } from '@digigov/ui/core/Link';
|
|
6
|
+
import { I18NProvider } from '@digigov/ui/app/i18n';
|
|
7
|
+
import { LabelContainer } from '@digigov/react-core';
|
|
8
|
+
|
|
9
|
+
var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
|
|
10
|
+
start: 1,
|
|
11
|
+
end: 10,
|
|
12
|
+
total: 15
|
|
13
|
+
}), /*#__PURE__*/React.createElement(LabelContainer, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1", /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(SelectOption, null, "5"), /*#__PURE__*/React.createElement(SelectOption, null, "10"), /*#__PURE__*/React.createElement(SelectOption, null, "15"))), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
14
|
+
direction: "left"
|
|
15
|
+
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
16
|
+
href: "#page1"
|
|
17
|
+
}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
18
|
+
variant: "dots"
|
|
19
|
+
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
20
|
+
href: "#page2"
|
|
21
|
+
}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
22
|
+
currentPage: true
|
|
23
|
+
}, "8"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
24
|
+
href: "#page9"
|
|
25
|
+
}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
26
|
+
variant: "dots"
|
|
27
|
+
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
28
|
+
href: "#page20"
|
|
29
|
+
}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
30
|
+
direction: "right"
|
|
31
|
+
})))));
|
|
32
|
+
|
|
33
|
+
export var WithResultsPerPage = function WithResultsPerPage() {
|
|
34
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: "example"
|
|
36
|
+
}, /*#__PURE__*/React.createElement(I18NProvider, {
|
|
37
|
+
t: function t(str) {
|
|
38
|
+
return str;
|
|
39
|
+
}
|
|
40
|
+
}, _ref));
|
|
41
|
+
};
|
|
42
|
+
export default WithResultsPerPage;
|
|
@@ -13,7 +13,7 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
|
|
|
13
13
|
ref: ref
|
|
14
14
|
}, /*#__PURE__*/React.createElement(I18nText, {
|
|
15
15
|
i18nKey: "pagination.label"
|
|
16
|
-
}, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results
|
|
16
|
+
}, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results"));
|
|
17
17
|
});
|
|
18
18
|
export * from '@digigov/react-extensions/admin/Pagination';
|
|
19
19
|
export * from '@digigov/react-extensions/admin/PaginationList';
|
|
@@ -11,6 +11,14 @@ import Pagination from '@digigov/ui/app/Pagination';
|
|
|
11
11
|
|
|
12
12
|
<Story packageName="@digigov/ui" component="admin/Pagination" story="Default.tsx" />
|
|
13
13
|
|
|
14
|
+
## With inactive values
|
|
15
|
+
|
|
16
|
+
<Story packageName="@digigov/ui" component="admin/Pagination" story="WithInactiveValues.tsx" />
|
|
17
|
+
|
|
18
|
+
## With results per page
|
|
19
|
+
|
|
20
|
+
<Story packageName="@digigov/ui" component="admin/Pagination" story="WithResultsPerPage.tsx" />
|
|
21
|
+
|
|
14
22
|
## API
|
|
15
23
|
|
|
16
24
|
<PropTypes packageName="@digigov/ui" component="Pagination" />
|
package/es/locales/el.js
CHANGED
|
@@ -72,7 +72,7 @@ export default {
|
|
|
72
72
|
to: 'έως',
|
|
73
73
|
of: 'από',
|
|
74
74
|
results: 'αποτελέσματα',
|
|
75
|
-
label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5>
|
|
75
|
+
label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα'
|
|
76
76
|
},
|
|
77
77
|
upload: {
|
|
78
78
|
file: 'Αρχείο',
|
|
@@ -7,4 +7,6 @@ export default {
|
|
|
7
7
|
displayName: 'Pagination'
|
|
8
8
|
};
|
|
9
9
|
export * from '@digigov/ui/admin/Pagination/__stories__/Default';
|
|
10
|
+
export * from '@digigov/ui/admin/Pagination/__stories__/WithInactiveValues';
|
|
11
|
+
export * from '@digigov/ui/admin/Pagination/__stories__/WithResultsPerPage';
|
|
10
12
|
export * from '@digigov/ui/admin/Pagination/__stories__/PaginationSmall';
|
|
@@ -12,19 +12,19 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
|
|
|
12
12
|
}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
13
13
|
direction: "left"
|
|
14
14
|
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
15
|
-
href: "
|
|
15
|
+
href: "#page1"
|
|
16
16
|
}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
17
17
|
currentPage: true
|
|
18
18
|
}, "2"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
19
|
-
href: "
|
|
19
|
+
href: "#page3"
|
|
20
20
|
}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
21
21
|
variant: "dots"
|
|
22
22
|
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
23
|
-
href: "
|
|
23
|
+
href: "#page5"
|
|
24
24
|
}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
25
|
-
href: "
|
|
25
|
+
href: "#page6"
|
|
26
26
|
}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
27
|
-
href: "
|
|
27
|
+
href: "#page7"
|
|
28
28
|
}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
29
29
|
direction: "right"
|
|
30
30
|
})))));
|
|
@@ -34,83 +34,25 @@ var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
|
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
|
|
37
|
-
start: 10,
|
|
38
|
-
end: 20,
|
|
39
|
-
total: 10000
|
|
40
|
-
}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
41
|
-
inactive: true
|
|
42
|
-
}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
43
|
-
direction: "left"
|
|
44
|
-
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
45
|
-
currentPage: true
|
|
46
|
-
}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
47
|
-
href: "/page2"
|
|
48
|
-
}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
49
|
-
href: "/page3"
|
|
50
|
-
}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
51
|
-
variant: "dots"
|
|
52
|
-
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
53
|
-
href: "/page5"
|
|
54
|
-
}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
55
|
-
href: "/page6"
|
|
56
|
-
}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
57
|
-
href: "/page7"
|
|
58
|
-
}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
59
|
-
direction: "right"
|
|
60
|
-
})))));
|
|
61
|
-
|
|
62
|
-
var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
|
|
63
|
-
size: "l"
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
var _ref5 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
|
|
67
|
-
start: 10,
|
|
68
|
-
end: 20,
|
|
69
|
-
total: 10000
|
|
70
|
-
}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
71
|
-
direction: "left"
|
|
72
|
-
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
73
|
-
href: "/page1"
|
|
74
|
-
}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
75
|
-
href: "/page3"
|
|
76
|
-
}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
77
|
-
variant: "dots"
|
|
78
|
-
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
79
|
-
href: "/page5"
|
|
80
|
-
}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
81
|
-
href: "/page6"
|
|
82
|
-
}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
83
|
-
currentPage: true
|
|
84
|
-
}, "7"), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
85
|
-
inactive: true
|
|
86
|
-
}, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
87
|
-
direction: "right"
|
|
88
|
-
})))));
|
|
89
|
-
|
|
90
|
-
var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
|
|
91
|
-
size: "l"
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
var _ref7 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
|
|
95
37
|
start: 1,
|
|
96
38
|
end: 10,
|
|
97
39
|
total: 15
|
|
98
40
|
}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
99
41
|
direction: "left"
|
|
100
42
|
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
101
|
-
href: "
|
|
43
|
+
href: "#page1"
|
|
102
44
|
}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
103
45
|
variant: "dots"
|
|
104
46
|
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
105
|
-
href: "
|
|
106
|
-
}, "
|
|
47
|
+
href: "#page7"
|
|
48
|
+
}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
107
49
|
currentPage: true
|
|
108
50
|
}, "8"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
109
|
-
href: "
|
|
51
|
+
href: "#page9"
|
|
110
52
|
}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
111
53
|
variant: "dots"
|
|
112
54
|
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
113
|
-
href: "
|
|
55
|
+
href: "#page20"
|
|
114
56
|
}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
115
57
|
direction: "right"
|
|
116
58
|
})))));
|
|
@@ -122,6 +64,6 @@ export var Default = function Default() {
|
|
|
122
64
|
t: function t(str) {
|
|
123
65
|
return str;
|
|
124
66
|
}
|
|
125
|
-
}, _ref, _ref2, _ref3
|
|
67
|
+
}, _ref, _ref2, _ref3));
|
|
126
68
|
};
|
|
127
69
|
export default Default;
|
|
@@ -16,7 +16,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
|
|
|
16
16
|
}))), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
17
17
|
currentPage: true
|
|
18
18
|
}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
19
|
-
href: "
|
|
19
|
+
href: "#page2"
|
|
20
20
|
}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
21
21
|
direction: "right"
|
|
22
22
|
})))));
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/admin/Pagination';
|
|
3
|
+
import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
|
|
4
|
+
import { Link } from '@digigov/ui/core/Link';
|
|
5
|
+
import { SectionBreak } from '@digigov/ui/core/SectionBreak';
|
|
6
|
+
import { I18NProvider } from '@digigov/ui/app/i18n';
|
|
7
|
+
|
|
8
|
+
var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
|
|
9
|
+
start: 10,
|
|
10
|
+
end: 20,
|
|
11
|
+
total: 10000
|
|
12
|
+
}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
13
|
+
inactive: true
|
|
14
|
+
}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
15
|
+
direction: "left"
|
|
16
|
+
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
17
|
+
currentPage: true
|
|
18
|
+
}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
19
|
+
href: "#page2"
|
|
20
|
+
}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
21
|
+
href: "#page3"
|
|
22
|
+
}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
23
|
+
variant: "dots"
|
|
24
|
+
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
25
|
+
href: "#page5"
|
|
26
|
+
}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
27
|
+
href: "#page6"
|
|
28
|
+
}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
29
|
+
href: "#page7"
|
|
30
|
+
}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
31
|
+
direction: "right"
|
|
32
|
+
})))));
|
|
33
|
+
|
|
34
|
+
var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
|
|
35
|
+
size: "l"
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
|
|
39
|
+
start: 10,
|
|
40
|
+
end: 20,
|
|
41
|
+
total: 10000
|
|
42
|
+
}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
43
|
+
direction: "left"
|
|
44
|
+
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
45
|
+
href: "#page1"
|
|
46
|
+
}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
47
|
+
href: "#page3"
|
|
48
|
+
}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
49
|
+
variant: "dots"
|
|
50
|
+
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
51
|
+
href: "#page5"
|
|
52
|
+
}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
53
|
+
href: "#page6"
|
|
54
|
+
}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
55
|
+
currentPage: true
|
|
56
|
+
}, "7"), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
57
|
+
inactive: true
|
|
58
|
+
}, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
59
|
+
direction: "right"
|
|
60
|
+
})))));
|
|
61
|
+
|
|
62
|
+
export var WithInactiveValues = function WithInactiveValues() {
|
|
63
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
className: "example"
|
|
65
|
+
}, /*#__PURE__*/React.createElement(I18NProvider, {
|
|
66
|
+
t: function t(str) {
|
|
67
|
+
return str;
|
|
68
|
+
}
|
|
69
|
+
}, _ref, _ref2, _ref3));
|
|
70
|
+
};
|
|
71
|
+
export default WithInactiveValues;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/admin/Pagination';
|
|
3
|
+
import { SelectContainer, SelectOption } from '@digigov/ui/core/SelectContainer';
|
|
4
|
+
import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
|
|
5
|
+
import { Link } from '@digigov/ui/core/Link';
|
|
6
|
+
import { I18NProvider } from '@digigov/ui/app/i18n';
|
|
7
|
+
import { LabelContainer } from '@digigov/react-core';
|
|
8
|
+
|
|
9
|
+
var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
|
|
10
|
+
start: 1,
|
|
11
|
+
end: 10,
|
|
12
|
+
total: 15
|
|
13
|
+
}), /*#__PURE__*/React.createElement(LabelContainer, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1", /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(SelectOption, null, "5"), /*#__PURE__*/React.createElement(SelectOption, null, "10"), /*#__PURE__*/React.createElement(SelectOption, null, "15"))), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
14
|
+
direction: "left"
|
|
15
|
+
}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
16
|
+
href: "#page1"
|
|
17
|
+
}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
18
|
+
variant: "dots"
|
|
19
|
+
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
20
|
+
href: "#page2"
|
|
21
|
+
}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
22
|
+
currentPage: true
|
|
23
|
+
}, "8"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
24
|
+
href: "#page9"
|
|
25
|
+
}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, {
|
|
26
|
+
variant: "dots"
|
|
27
|
+
}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
|
|
28
|
+
href: "#page20"
|
|
29
|
+
}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
30
|
+
direction: "right"
|
|
31
|
+
})))));
|
|
32
|
+
|
|
33
|
+
export var WithResultsPerPage = function WithResultsPerPage() {
|
|
34
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: "example"
|
|
36
|
+
}, /*#__PURE__*/React.createElement(I18NProvider, {
|
|
37
|
+
t: function t(str) {
|
|
38
|
+
return str;
|
|
39
|
+
}
|
|
40
|
+
}, _ref));
|
|
41
|
+
};
|
|
42
|
+
export default WithResultsPerPage;
|
|
@@ -13,7 +13,7 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
|
|
|
13
13
|
ref: ref
|
|
14
14
|
}, /*#__PURE__*/React.createElement(I18nText, {
|
|
15
15
|
i18nKey: "pagination.label"
|
|
16
|
-
}, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results
|
|
16
|
+
}, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results"));
|
|
17
17
|
});
|
|
18
18
|
export * from '@digigov/react-extensions/admin/Pagination';
|
|
19
19
|
export * from '@digigov/react-extensions/admin/PaginationList';
|
|
@@ -11,6 +11,14 @@ import Pagination from '@digigov/ui/app/Pagination';
|
|
|
11
11
|
|
|
12
12
|
<Story packageName="@digigov/ui" component="admin/Pagination" story="Default.tsx" />
|
|
13
13
|
|
|
14
|
+
## With inactive values
|
|
15
|
+
|
|
16
|
+
<Story packageName="@digigov/ui" component="admin/Pagination" story="WithInactiveValues.tsx" />
|
|
17
|
+
|
|
18
|
+
## With results per page
|
|
19
|
+
|
|
20
|
+
<Story packageName="@digigov/ui" component="admin/Pagination" story="WithResultsPerPage.tsx" />
|
|
21
|
+
|
|
14
22
|
## API
|
|
15
23
|
|
|
16
24
|
<PropTypes packageName="@digigov/ui" component="Pagination" />
|
package/esm/index.js
CHANGED
package/esm/locales/el.js
CHANGED
|
@@ -72,7 +72,7 @@ export default {
|
|
|
72
72
|
to: 'έως',
|
|
73
73
|
of: 'από',
|
|
74
74
|
results: 'αποτελέσματα',
|
|
75
|
-
label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5>
|
|
75
|
+
label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα'
|
|
76
76
|
},
|
|
77
77
|
upload: {
|
|
78
78
|
file: 'Αρχείο',
|
package/locales/el.js
CHANGED
|
@@ -78,7 +78,7 @@ var _default = {
|
|
|
78
78
|
to: 'έως',
|
|
79
79
|
of: 'από',
|
|
80
80
|
results: 'αποτελέσματα',
|
|
81
|
-
label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5>
|
|
81
|
+
label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα'
|
|
82
82
|
},
|
|
83
83
|
upload: {
|
|
84
84
|
file: 'Αρχείο',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digigov/ui",
|
|
3
|
-
"version": "0.35.
|
|
3
|
+
"version": "0.35.2",
|
|
4
4
|
"description": "@digigov reusable components toolkit",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"clsx": "1.1.1",
|
|
21
21
|
"react": "^16.8.0 || ^17.0.0",
|
|
22
22
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
23
|
-
"@digigov/react-core": "0.25.
|
|
24
|
-
"@digigov/react-extensions": "0.23.
|
|
23
|
+
"@digigov/react-core": "0.25.3",
|
|
24
|
+
"@digigov/react-extensions": "0.23.2"
|
|
25
25
|
},
|
|
26
26
|
"gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
|
|
27
27
|
"private": false,
|
|
@@ -9,4 +9,6 @@ export default {
|
|
|
9
9
|
displayName: 'Pagination',
|
|
10
10
|
};
|
|
11
11
|
export * from '@digigov/ui/admin/Pagination/__stories__/Default';
|
|
12
|
+
export * from '@digigov/ui/admin/Pagination/__stories__/WithInactiveValues';
|
|
13
|
+
export * from '@digigov/ui/admin/Pagination/__stories__/WithResultsPerPage';
|
|
12
14
|
export * from '@digigov/ui/admin/Pagination/__stories__/PaginationSmall';
|
|
@@ -6,7 +6,6 @@ import {
|
|
|
6
6
|
PaginationListItem,
|
|
7
7
|
PaginationLabel,
|
|
8
8
|
} from '@digigov/ui/admin/Pagination';
|
|
9
|
-
|
|
10
9
|
import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
|
|
11
10
|
import { Link } from '@digigov/ui/core/Link';
|
|
12
11
|
import { SectionBreak } from '@digigov/ui/core/SectionBreak';
|
|
@@ -25,58 +24,21 @@ export const Default = () => (
|
|
|
25
24
|
</Link>
|
|
26
25
|
</PaginationListItem>
|
|
27
26
|
<PaginationListItem>
|
|
28
|
-
<Link href="
|
|
27
|
+
<Link href="#page1">1</Link>
|
|
29
28
|
</PaginationListItem>
|
|
30
29
|
<PaginationListItem currentPage>2</PaginationListItem>
|
|
31
30
|
<PaginationListItem>
|
|
32
|
-
<Link href="
|
|
31
|
+
<Link href="#page3">3</Link>
|
|
33
32
|
</PaginationListItem>
|
|
34
33
|
<PaginationListItem variant="dots" />
|
|
35
34
|
<PaginationListItem>
|
|
36
|
-
<Link href="
|
|
37
|
-
</PaginationListItem>
|
|
38
|
-
<PaginationListItem>
|
|
39
|
-
<Link href="/page6">6</Link>
|
|
40
|
-
</PaginationListItem>
|
|
41
|
-
<PaginationListItem>
|
|
42
|
-
<Link href="/page7">7</Link>
|
|
43
|
-
</PaginationListItem>
|
|
44
|
-
<PaginationListItem>
|
|
45
|
-
<Link>
|
|
46
|
-
Επόμενο
|
|
47
|
-
<ArrowIcon direction="right" />
|
|
48
|
-
</Link>
|
|
49
|
-
</PaginationListItem>
|
|
50
|
-
</PaginationList>
|
|
51
|
-
</Pagination>
|
|
52
|
-
|
|
53
|
-
<SectionBreak size="l" />
|
|
54
|
-
|
|
55
|
-
<Pagination>
|
|
56
|
-
<PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
|
|
57
|
-
<PaginationList>
|
|
58
|
-
<PaginationListItem inactive>
|
|
59
|
-
<Link>
|
|
60
|
-
<ArrowIcon direction="left" />
|
|
61
|
-
Προηγούμενο
|
|
62
|
-
</Link>
|
|
63
|
-
</PaginationListItem>
|
|
64
|
-
<PaginationListItem currentPage>1</PaginationListItem>
|
|
65
|
-
<PaginationListItem>
|
|
66
|
-
<Link href="/page2">2</Link>
|
|
67
|
-
</PaginationListItem>
|
|
68
|
-
<PaginationListItem>
|
|
69
|
-
<Link href="/page3">3</Link>
|
|
70
|
-
</PaginationListItem>
|
|
71
|
-
<PaginationListItem variant="dots"></PaginationListItem>
|
|
72
|
-
<PaginationListItem>
|
|
73
|
-
<Link href="/page5">5</Link>
|
|
35
|
+
<Link href="#page5">5</Link>
|
|
74
36
|
</PaginationListItem>
|
|
75
37
|
<PaginationListItem>
|
|
76
|
-
<Link href="
|
|
38
|
+
<Link href="#page6">6</Link>
|
|
77
39
|
</PaginationListItem>
|
|
78
40
|
<PaginationListItem>
|
|
79
|
-
<Link href="
|
|
41
|
+
<Link href="#page7">7</Link>
|
|
80
42
|
</PaginationListItem>
|
|
81
43
|
<PaginationListItem>
|
|
82
44
|
<Link>
|
|
@@ -86,46 +48,7 @@ export const Default = () => (
|
|
|
86
48
|
</PaginationListItem>
|
|
87
49
|
</PaginationList>
|
|
88
50
|
</Pagination>
|
|
89
|
-
|
|
90
51
|
<SectionBreak size="l" />
|
|
91
|
-
|
|
92
|
-
<Pagination>
|
|
93
|
-
<PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
|
|
94
|
-
<PaginationList>
|
|
95
|
-
<PaginationListItem>
|
|
96
|
-
<Link>
|
|
97
|
-
<ArrowIcon direction="left" />
|
|
98
|
-
Προηγούμενο
|
|
99
|
-
</Link>
|
|
100
|
-
</PaginationListItem>
|
|
101
|
-
<PaginationListItem>
|
|
102
|
-
<Link href="/page1">1</Link>
|
|
103
|
-
</PaginationListItem>
|
|
104
|
-
<PaginationListItem>
|
|
105
|
-
<Link>2</Link>
|
|
106
|
-
</PaginationListItem>
|
|
107
|
-
<PaginationListItem>
|
|
108
|
-
<Link href="/page3">3</Link>
|
|
109
|
-
</PaginationListItem>
|
|
110
|
-
<PaginationListItem variant="dots"></PaginationListItem>
|
|
111
|
-
<PaginationListItem>
|
|
112
|
-
<Link href="/page5">5</Link>
|
|
113
|
-
</PaginationListItem>
|
|
114
|
-
<PaginationListItem>
|
|
115
|
-
<Link href="/page6">6</Link>
|
|
116
|
-
</PaginationListItem>
|
|
117
|
-
<PaginationListItem currentPage>7</PaginationListItem>
|
|
118
|
-
<PaginationListItem inactive>
|
|
119
|
-
<Link>
|
|
120
|
-
Επόμενο
|
|
121
|
-
<ArrowIcon direction="right" />
|
|
122
|
-
</Link>
|
|
123
|
-
</PaginationListItem>
|
|
124
|
-
</PaginationList>
|
|
125
|
-
</Pagination>
|
|
126
|
-
|
|
127
|
-
<SectionBreak size="l" />
|
|
128
|
-
|
|
129
52
|
<Pagination>
|
|
130
53
|
<PaginationLabel start={1} end={10} total={15}></PaginationLabel>
|
|
131
54
|
<PaginationList>
|
|
@@ -136,19 +59,19 @@ export const Default = () => (
|
|
|
136
59
|
</Link>
|
|
137
60
|
</PaginationListItem>
|
|
138
61
|
<PaginationListItem>
|
|
139
|
-
<Link href="
|
|
62
|
+
<Link href="#page1">1</Link>
|
|
140
63
|
</PaginationListItem>
|
|
141
64
|
<PaginationListItem variant="dots"></PaginationListItem>
|
|
142
65
|
<PaginationListItem>
|
|
143
|
-
<Link href="
|
|
66
|
+
<Link href="#page7">7</Link>
|
|
144
67
|
</PaginationListItem>
|
|
145
68
|
<PaginationListItem currentPage>8</PaginationListItem>
|
|
146
69
|
<PaginationListItem>
|
|
147
|
-
<Link href="
|
|
70
|
+
<Link href="#page9">9</Link>
|
|
148
71
|
</PaginationListItem>
|
|
149
72
|
<PaginationListItem variant="dots"></PaginationListItem>
|
|
150
73
|
<PaginationListItem>
|
|
151
|
-
<Link href="
|
|
74
|
+
<Link href="#page20">20</Link>
|
|
152
75
|
</PaginationListItem>
|
|
153
76
|
<PaginationListItem>
|
|
154
77
|
<Link>
|