@thecb/components 7.7.4-beta.7 → 7.7.4
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/package.json
CHANGED
|
@@ -107,6 +107,40 @@ const Pagination = ({
|
|
|
107
107
|
}) => {
|
|
108
108
|
const { isMobile } = useContext(ThemeContext);
|
|
109
109
|
|
|
110
|
+
const extraStyles = `
|
|
111
|
+
min-width: ${buttonWidth}; min-height: 100%; padding: 0;
|
|
112
|
+
border-radius: ${borderRadius};
|
|
113
|
+
&:hover, &:focus {
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
> * > span {
|
|
116
|
+
text-decoration: none;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
> * > span {
|
|
120
|
+
color: ${numberColor ?? themeValues.numberColor}
|
|
121
|
+
}
|
|
122
|
+
margin: 0;
|
|
123
|
+
&:hover {
|
|
124
|
+
background-color: ${themeValues.hoverBackgroundColor}
|
|
125
|
+
}
|
|
126
|
+
&:focus {
|
|
127
|
+
outline: none
|
|
128
|
+
}
|
|
129
|
+
`;
|
|
130
|
+
|
|
131
|
+
const extraDisabledStyles = `
|
|
132
|
+
border: ${activeBorderWidth} solid ${numberColor ??
|
|
133
|
+
themeValues.numberColor};
|
|
134
|
+
color: ${numberColor ?? themeValues.activeColor};
|
|
135
|
+
background-color: ${themeValues.activeBackgroundColor};
|
|
136
|
+
&:focus {
|
|
137
|
+
box-shadow: none;
|
|
138
|
+
}
|
|
139
|
+
&:hover {
|
|
140
|
+
background-color: initial;
|
|
141
|
+
}
|
|
142
|
+
`;
|
|
143
|
+
|
|
110
144
|
return (
|
|
111
145
|
<Cluster justify="center" childGap={childGap}>
|
|
112
146
|
{currentPage > 1 ? (
|
|
@@ -150,44 +184,14 @@ const Pagination = ({
|
|
|
150
184
|
key={item.index}
|
|
151
185
|
text={item.index}
|
|
152
186
|
disabled={item.active}
|
|
153
|
-
extraDisabledStyles={
|
|
154
|
-
border: ${activeBorderWidth} solid ${numberColor ??
|
|
155
|
-
themeValues.numberColor};
|
|
156
|
-
color: ${numberColor ?? themeValues.activeColor};
|
|
157
|
-
background-color: ${themeValues.activeBackgroundColor};
|
|
158
|
-
&:focus {
|
|
159
|
-
box-shadow: none;
|
|
160
|
-
}
|
|
161
|
-
&:hover {
|
|
162
|
-
background-color: initial;
|
|
163
|
-
}
|
|
164
|
-
`}
|
|
187
|
+
extraDisabledStyles={extraDisabledStyles}
|
|
165
188
|
action={
|
|
166
189
|
!item.active
|
|
167
190
|
? () => setCurrentPage({ pageNumber: item.index })
|
|
168
191
|
: noop
|
|
169
192
|
}
|
|
170
193
|
textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
|
|
171
|
-
extraStyles={
|
|
172
|
-
min-width: ${buttonWidth}; min-height: 100%; padding: 0;
|
|
173
|
-
border-radius: ${borderRadius};
|
|
174
|
-
&:hover, &:focus {
|
|
175
|
-
text-decoration: none;
|
|
176
|
-
> * > span {
|
|
177
|
-
text-decoration: none;
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
> * > span {
|
|
181
|
-
color: ${numberColor ?? themeValues.numberColor}
|
|
182
|
-
}
|
|
183
|
-
margin: 0;
|
|
184
|
-
&:hover {
|
|
185
|
-
background-color: ${themeValues.hoverBackgroundColor}
|
|
186
|
-
}
|
|
187
|
-
&:focus {
|
|
188
|
-
outline: none
|
|
189
|
-
}
|
|
190
|
-
`}
|
|
194
|
+
extraStyles={extraStyles}
|
|
191
195
|
dataQa={index}
|
|
192
196
|
>
|
|
193
197
|
{item.index}
|