@instructure/ui-pagination 8.14.1-snapshot.6 → 8.14.1-snapshot.69
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/es/Pagination/PaginationArrowButton/PaginationArrowButtonLocator.js +4 -2
- package/es/Pagination/PaginationArrowButton/index.js +2 -3
- package/es/Pagination/PaginationArrowButton/props.js +1 -1
- package/es/Pagination/PaginationButton/index.js +2 -2
- package/es/Pagination/PaginationButton/props.js +0 -11
- package/es/Pagination/PaginationLocator.js +4 -2
- package/es/Pagination/PaginationPageInput/PaginationPageInputLocator.js +4 -2
- package/es/Pagination/PaginationPageInput/index.js +0 -3
- package/es/Pagination/index.js +10 -12
- package/es/Pagination/props.js +2 -70
- package/lib/Pagination/PaginationArrowButton/PaginationArrowButtonLocator.js +3 -1
- package/lib/Pagination/PaginationArrowButton/index.js +2 -3
- package/lib/Pagination/PaginationArrowButton/props.js +1 -1
- package/lib/Pagination/PaginationButton/index.js +2 -2
- package/lib/Pagination/PaginationButton/props.js +0 -11
- package/lib/Pagination/PaginationLocator.js +3 -1
- package/lib/Pagination/PaginationPageInput/PaginationPageInputLocator.js +3 -1
- package/lib/Pagination/PaginationPageInput/index.js +0 -3
- package/lib/Pagination/index.js +10 -12
- package/lib/Pagination/props.js +2 -70
- package/package.json +22 -22
- package/src/Pagination/PaginationArrowButton/index.tsx +3 -6
- package/src/Pagination/PaginationArrowButton/props.ts +20 -6
- package/src/Pagination/PaginationButton/index.tsx +4 -2
- package/src/Pagination/PaginationButton/props.ts +16 -11
- package/src/Pagination/PaginationPageInput/index.tsx +0 -3
- package/src/Pagination/PaginationPageInput/props.ts +1 -1
- package/src/Pagination/index.tsx +26 -31
- package/src/Pagination/props.ts +82 -55
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Pagination/PaginationArrowButton/PaginationArrowButtonLocator.d.ts +4 -4
- package/types/Pagination/PaginationArrowButton/index.d.ts +6 -7
- package/types/Pagination/PaginationArrowButton/index.d.ts.map +1 -1
- package/types/Pagination/PaginationArrowButton/props.d.ts +5 -4
- package/types/Pagination/PaginationArrowButton/props.d.ts.map +1 -1
- package/types/Pagination/PaginationButton/index.d.ts.map +1 -1
- package/types/Pagination/PaginationButton/props.d.ts +12 -2
- package/types/Pagination/PaginationButton/props.d.ts.map +1 -1
- package/types/Pagination/PaginationLocator.d.ts +24 -24
- package/types/Pagination/PaginationPageInput/PaginationPageInputLocator.d.ts +4 -4
- package/types/Pagination/PaginationPageInput/index.d.ts +2 -3
- package/types/Pagination/PaginationPageInput/index.d.ts.map +1 -1
- package/types/Pagination/PaginationPageInput/props.d.ts +1 -1
- package/types/Pagination/PaginationPageInput/props.d.ts.map +1 -1
- package/types/Pagination/index.d.ts +15 -15
- package/types/Pagination/index.d.ts.map +1 -1
- package/types/Pagination/props.d.ts +66 -2
- package/types/Pagination/props.d.ts.map +1 -1
|
@@ -22,11 +22,13 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
-
import { find } from '@instructure/ui-test-queries'; //
|
|
25
|
+
import { find } from '@instructure/ui-test-queries'; // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
26
|
+
// eslint-disable-next-line no-restricted-imports
|
|
26
27
|
|
|
27
28
|
import { TooltipLocator } from '@instructure/ui-tooltip/es/Tooltip/TooltipLocator';
|
|
28
29
|
import { PaginationArrowButton } from './index';
|
|
29
|
-
export const PaginationArrowButtonLocator = locator(
|
|
30
|
+
export const PaginationArrowButtonLocator = locator( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
31
|
+
PaginationArrowButton.selector, {
|
|
30
32
|
findTooltipContent: function () {
|
|
31
33
|
return TooltipLocator.findContent(...arguments);
|
|
32
34
|
},
|
|
@@ -38,6 +38,7 @@ import { allowedProps, propTypes } from './props';
|
|
|
38
38
|
parent: Pagination
|
|
39
39
|
id: Pagination.Navigation
|
|
40
40
|
---
|
|
41
|
+
@tsProps
|
|
41
42
|
**/
|
|
42
43
|
|
|
43
44
|
let PaginationArrowButton = (_dec = testable(), _dec(_class = (_temp = _class2 = class PaginationArrowButton extends Component {
|
|
@@ -105,8 +106,6 @@ let PaginationArrowButton = (_dec = testable(), _dec(_class = (_temp = _class2 =
|
|
|
105
106
|
}), this.Icon));
|
|
106
107
|
}
|
|
107
108
|
|
|
108
|
-
}, _class2.displayName = "PaginationArrowButton", _class2.componentId = 'Pagination.Navigation', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
|
109
|
-
buttonRef: el => {}
|
|
110
|
-
}, _temp)) || _class);
|
|
109
|
+
}, _class2.displayName = "PaginationArrowButton", _class2.componentId = 'Pagination.Navigation', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {}, _temp)) || _class);
|
|
111
110
|
export default PaginationArrowButton;
|
|
112
111
|
export { PaginationArrowButton };
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
import PropTypes from 'prop-types';
|
|
25
25
|
const propTypes = {
|
|
26
26
|
direction: PropTypes.oneOf(['first', 'prev', 'next', 'last']),
|
|
27
|
-
label: PropTypes.
|
|
27
|
+
label: PropTypes.string.isRequired,
|
|
28
28
|
buttonRef: PropTypes.func,
|
|
29
29
|
onClick: PropTypes.func
|
|
30
30
|
};
|
|
@@ -50,8 +50,8 @@ let PaginationButton = (_dec = testable(), _dec(_class = (_temp = _class2 = clas
|
|
|
50
50
|
const props = omitProps(this.props, PaginationButton.allowedProps, exclude);
|
|
51
51
|
return /*#__PURE__*/React.createElement(BaseButton, Object.assign({
|
|
52
52
|
color: "primary",
|
|
53
|
-
withBackground: this.props.current
|
|
54
|
-
withBorder: this.props.current
|
|
53
|
+
withBackground: this.props.current,
|
|
54
|
+
withBorder: this.props.current
|
|
55
55
|
}, props, {
|
|
56
56
|
"aria-current": this.props.current ? 'page' : void 0,
|
|
57
57
|
elementRef: this.handleRef
|
|
@@ -23,19 +23,8 @@
|
|
|
23
23
|
*/
|
|
24
24
|
import PropTypes from 'prop-types';
|
|
25
25
|
const propTypes = {
|
|
26
|
-
/**
|
|
27
|
-
* Content to render as page selection
|
|
28
|
-
*/
|
|
29
26
|
children: PropTypes.node.isRequired,
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Whether the page is currently displayed
|
|
33
|
-
*/
|
|
34
27
|
current: PropTypes.bool,
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Whether the page is currently displayed
|
|
38
|
-
*/
|
|
39
28
|
onClick: PropTypes.func
|
|
40
29
|
};
|
|
41
30
|
const allowedProps = ['children', 'current' // we don't want to pass onClick
|
|
@@ -24,8 +24,10 @@
|
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
25
|
import { PaginationPageInputLocator } from './PaginationPageInput/PaginationPageInputLocator';
|
|
26
26
|
import { PaginationArrowButtonLocator } from './PaginationArrowButton/PaginationArrowButtonLocator';
|
|
27
|
-
import { Pagination } from './index';
|
|
28
|
-
|
|
27
|
+
import { Pagination } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
28
|
+
|
|
29
|
+
const PaginationButtonLocator = locator(Pagination.Page.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
30
|
+
|
|
29
31
|
export const PaginationLocator = locator(Pagination.selector, {
|
|
30
32
|
findAllPageButtons: async function () {
|
|
31
33
|
return PaginationButtonLocator.findAll(...arguments);
|
|
@@ -21,11 +21,13 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
-
import { locator } from '@instructure/ui-test-locator';
|
|
24
|
+
import { locator } from '@instructure/ui-test-locator'; // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
25
|
+
|
|
25
26
|
import { NumberInputLocator } from '@instructure/ui-number-input/es/NumberInput/NumberInputLocator'; // eslint-disable-line no-restricted-imports
|
|
26
27
|
|
|
27
28
|
import { PaginationPageInput } from './index';
|
|
28
|
-
export const PaginationPageInputLocator = locator(
|
|
29
|
+
export const PaginationPageInputLocator = locator( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
30
|
+
PaginationPageInput.selector, {
|
|
29
31
|
findInput: function () {
|
|
30
32
|
return NumberInputLocator.findInput(...arguments);
|
|
31
33
|
},
|
|
@@ -45,15 +45,12 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
|
|
|
45
45
|
constructor(props) {
|
|
46
46
|
super(props);
|
|
47
47
|
this.ref = null;
|
|
48
|
-
this._inputRef = null;
|
|
49
48
|
|
|
50
49
|
this.handleRef = el => {
|
|
51
50
|
this.ref = el;
|
|
52
51
|
};
|
|
53
52
|
|
|
54
53
|
this.handleInputRef = el => {
|
|
55
|
-
this._inputRef = el;
|
|
56
|
-
|
|
57
54
|
if (typeof this.props.inputRef === 'function') {
|
|
58
55
|
this.props.inputRef(el);
|
|
59
56
|
}
|
package/es/Pagination/index.js
CHANGED
|
@@ -60,30 +60,30 @@ function propsHaveCompactView(props) {
|
|
|
60
60
|
---
|
|
61
61
|
category: components
|
|
62
62
|
---
|
|
63
|
+
@tsProps
|
|
63
64
|
**/
|
|
64
65
|
let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pagination extends Component {
|
|
65
|
-
constructor() {
|
|
66
|
-
super(
|
|
66
|
+
constructor(props) {
|
|
67
|
+
super(props);
|
|
67
68
|
this._labelId = void 0;
|
|
68
|
-
this.ref = null;
|
|
69
|
-
this._inputRef = null;
|
|
70
69
|
this._firstButton = null;
|
|
71
70
|
this._prevButton = null;
|
|
72
71
|
this._nextButton = null;
|
|
73
72
|
this._lastButton = null;
|
|
73
|
+
this.ref = null;
|
|
74
74
|
|
|
75
75
|
this.handleElementRef = el => {
|
|
76
76
|
this.ref = el;
|
|
77
77
|
|
|
78
|
-
if (el) {
|
|
79
|
-
|
|
80
|
-
this.props.elementRef(el);
|
|
81
|
-
}
|
|
78
|
+
if (el && typeof this.props.elementRef === 'function') {
|
|
79
|
+
this.props.elementRef(el);
|
|
82
80
|
}
|
|
83
81
|
};
|
|
84
82
|
|
|
85
83
|
this.handleInputRef = el => {
|
|
86
|
-
this.
|
|
84
|
+
if (typeof this.props.inputRef === 'function') {
|
|
85
|
+
this.props.inputRef(el);
|
|
86
|
+
}
|
|
87
87
|
};
|
|
88
88
|
|
|
89
89
|
this._labelId = uid('Pagination');
|
|
@@ -314,7 +314,7 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
|
|
|
314
314
|
var _this$props$styles, _this$props$styles2;
|
|
315
315
|
|
|
316
316
|
if (!this.props.children) return null;
|
|
317
|
-
const currentPageIndex = fastFindIndex(this.
|
|
317
|
+
const currentPageIndex = fastFindIndex(this.childPages, p => p && p.props && p.props.current);
|
|
318
318
|
const passthroughProps = View.omitViewProps(omitProps(this.props, Pagination.allowedProps), Pagination);
|
|
319
319
|
return jsx(View, Object.assign({}, passthroughProps, {
|
|
320
320
|
role: "navigation",
|
|
@@ -330,13 +330,11 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
|
|
|
330
330
|
}
|
|
331
331
|
|
|
332
332
|
}, _class2.displayName = "Pagination", _class2.componentId = 'Pagination', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
333
|
-
children: null,
|
|
334
333
|
disabled: false,
|
|
335
334
|
withFirstAndLastButton: false,
|
|
336
335
|
showDisabledButtons: false,
|
|
337
336
|
variant: 'full',
|
|
338
337
|
as: 'div',
|
|
339
|
-
elementRef: el => {},
|
|
340
338
|
labelNumberInput: numberOfPages => `of ${numberOfPages}`,
|
|
341
339
|
screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
|
|
342
340
|
shouldHandleFocus: true
|
package/es/Pagination/props.js
CHANGED
|
@@ -26,91 +26,23 @@ import { Children } from '@instructure/ui-prop-types';
|
|
|
26
26
|
import { ThemeablePropTypes } from '@instructure/emotion';
|
|
27
27
|
import { PaginationButton } from './PaginationButton';
|
|
28
28
|
const propTypes = {
|
|
29
|
-
/**
|
|
30
|
-
* children of type Pagination.Page
|
|
31
|
-
*/
|
|
32
29
|
children: Children.oneOf([PaginationButton]),
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Disables interaction with all pages
|
|
36
|
-
*/
|
|
37
30
|
disabled: PropTypes.bool,
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Displays "jump to first" and "jump to last" buttons. Always turned on with `input` variant.
|
|
41
|
-
*/
|
|
42
31
|
withFirstAndLastButton: PropTypes.bool,
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Displays the unavailable navigation buttons as disabled instead of hiding them. Always turned on with `input` variant.
|
|
46
|
-
*/
|
|
47
32
|
showDisabledButtons: PropTypes.bool,
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Visible label for component
|
|
51
|
-
*/
|
|
52
33
|
label: PropTypes.node,
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Accessible label for next button
|
|
56
|
-
*/
|
|
57
34
|
labelNext: PropTypes.string,
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Accessible label for previous button
|
|
61
|
-
*/
|
|
62
35
|
labelPrev: PropTypes.string,
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* Accessible label for "jump to first" button
|
|
66
|
-
*/
|
|
67
36
|
labelFirst: PropTypes.string,
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Accessible label for "jump to last" button
|
|
71
|
-
*/
|
|
72
37
|
labelLast: PropTypes.string,
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* Label for number input (for `input` variant)
|
|
76
|
-
*/
|
|
77
38
|
labelNumberInput: PropTypes.func,
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* ScreenReaderLabel for number input (for `input` variant)
|
|
81
|
-
*/
|
|
82
39
|
screenReaderLabelNumberInput: PropTypes.func,
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* The compact variant truncates the page navigation to show only the first,
|
|
86
|
-
* last, and pages immediately surrounding the current page. Fewer than 5 pages,
|
|
87
|
-
* no next/previous arrow buttons will be shown, and all pages will be listed
|
|
88
|
-
*/
|
|
89
40
|
variant: PropTypes.oneOf(['full', 'compact', 'input']),
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
93
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
94
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
95
|
-
*/
|
|
96
41
|
margin: ThemeablePropTypes.spacing,
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
* the element type to render as
|
|
100
|
-
*/
|
|
101
42
|
as: PropTypes.elementType,
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* provides a reference to the underlying html root element
|
|
105
|
-
*/
|
|
106
43
|
elementRef: PropTypes.func,
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* For accessibility, Pagination sets focus on the first or last Pagination.Pages,
|
|
110
|
-
* respectively, when the Previous or Next arrow buttons are removed from the DOM.
|
|
111
|
-
* Set this property to `false` to prevent this behavior.
|
|
112
|
-
*/
|
|
44
|
+
inputRef: PropTypes.func,
|
|
113
45
|
shouldHandleFocus: PropTypes.bool
|
|
114
46
|
};
|
|
115
|
-
const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'shouldHandleFocus'];
|
|
47
|
+
const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'inputRef', 'shouldHandleFocus'];
|
|
116
48
|
export { propTypes, allowedProps };
|
|
@@ -36,8 +36,10 @@ var _index = require("./index");
|
|
|
36
36
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
37
37
|
* SOFTWARE.
|
|
38
38
|
*/
|
|
39
|
+
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
39
40
|
// eslint-disable-next-line no-restricted-imports
|
|
40
|
-
const PaginationArrowButtonLocator = (0, _locator.locator)(
|
|
41
|
+
const PaginationArrowButtonLocator = (0, _locator.locator)( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
42
|
+
_index.PaginationArrowButton.selector, {
|
|
41
43
|
findTooltipContent: function () {
|
|
42
44
|
return _TooltipLocator.TooltipLocator.findContent(...arguments);
|
|
43
45
|
},
|
|
@@ -40,6 +40,7 @@ var _dec, _class, _class2, _temp;
|
|
|
40
40
|
parent: Pagination
|
|
41
41
|
id: Pagination.Navigation
|
|
42
42
|
---
|
|
43
|
+
@tsProps
|
|
43
44
|
**/
|
|
44
45
|
let PaginationArrowButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class PaginationArrowButton extends _react.Component {
|
|
45
46
|
constructor() {
|
|
@@ -105,9 +106,7 @@ let PaginationArrowButton = (_dec = (0, _testable.testable)(), _dec(_class = (_t
|
|
|
105
106
|
}), this.Icon));
|
|
106
107
|
}
|
|
107
108
|
|
|
108
|
-
}, _class2.displayName = "PaginationArrowButton", _class2.componentId = 'Pagination.Navigation', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
|
109
|
-
buttonRef: el => {}
|
|
110
|
-
}, _temp)) || _class);
|
|
109
|
+
}, _class2.displayName = "PaginationArrowButton", _class2.componentId = 'Pagination.Navigation', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {}, _temp)) || _class);
|
|
111
110
|
exports.PaginationArrowButton = PaginationArrowButton;
|
|
112
111
|
var _default = PaginationArrowButton;
|
|
113
112
|
exports.default = _default;
|
|
@@ -34,7 +34,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
34
34
|
*/
|
|
35
35
|
const propTypes = {
|
|
36
36
|
direction: _propTypes.default.oneOf(['first', 'prev', 'next', 'last']),
|
|
37
|
-
label: _propTypes.default.
|
|
37
|
+
label: _propTypes.default.string.isRequired,
|
|
38
38
|
buttonRef: _propTypes.default.func,
|
|
39
39
|
onClick: _propTypes.default.func
|
|
40
40
|
};
|
|
@@ -40,8 +40,8 @@ let PaginationButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp =
|
|
|
40
40
|
const props = (0, _omitProps.omitProps)(this.props, PaginationButton.allowedProps, exclude);
|
|
41
41
|
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({
|
|
42
42
|
color: "primary",
|
|
43
|
-
withBackground: this.props.current
|
|
44
|
-
withBorder: this.props.current
|
|
43
|
+
withBackground: this.props.current,
|
|
44
|
+
withBorder: this.props.current
|
|
45
45
|
}, props, {
|
|
46
46
|
"aria-current": this.props.current ? 'page' : void 0,
|
|
47
47
|
elementRef: this.handleRef
|
|
@@ -33,19 +33,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
33
33
|
* SOFTWARE.
|
|
34
34
|
*/
|
|
35
35
|
const propTypes = {
|
|
36
|
-
/**
|
|
37
|
-
* Content to render as page selection
|
|
38
|
-
*/
|
|
39
36
|
children: _propTypes.default.node.isRequired,
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Whether the page is currently displayed
|
|
43
|
-
*/
|
|
44
37
|
current: _propTypes.default.bool,
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Whether the page is currently displayed
|
|
48
|
-
*/
|
|
49
38
|
onClick: _propTypes.default.func
|
|
50
39
|
};
|
|
51
40
|
exports.propTypes = propTypes;
|
|
@@ -36,7 +36,9 @@ var _index = require("./index");
|
|
|
36
36
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
37
37
|
* SOFTWARE.
|
|
38
38
|
*/
|
|
39
|
-
|
|
39
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
40
|
+
const PaginationButtonLocator = (0, _locator.locator)(_index.Pagination.Page.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
41
|
+
|
|
40
42
|
const PaginationLocator = (0, _locator.locator)(_index.Pagination.selector, {
|
|
41
43
|
findAllPageButtons: async function () {
|
|
42
44
|
return PaginationButtonLocator.findAll(...arguments);
|
|
@@ -34,8 +34,10 @@ var _index = require("./index");
|
|
|
34
34
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
35
35
|
* SOFTWARE.
|
|
36
36
|
*/
|
|
37
|
+
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
37
38
|
// eslint-disable-line no-restricted-imports
|
|
38
|
-
const PaginationPageInputLocator = (0, _locator.locator)(
|
|
39
|
+
const PaginationPageInputLocator = (0, _locator.locator)( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
40
|
+
_index.PaginationPageInput.selector, {
|
|
39
41
|
findInput: function () {
|
|
40
42
|
return _NumberInputLocator.NumberInputLocator.findInput(...arguments);
|
|
41
43
|
},
|
|
@@ -38,15 +38,12 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
38
38
|
constructor(props) {
|
|
39
39
|
super(props);
|
|
40
40
|
this.ref = null;
|
|
41
|
-
this._inputRef = null;
|
|
42
41
|
|
|
43
42
|
this.handleRef = el => {
|
|
44
43
|
this.ref = el;
|
|
45
44
|
};
|
|
46
45
|
|
|
47
46
|
this.handleInputRef = el => {
|
|
48
|
-
this._inputRef = el;
|
|
49
|
-
|
|
50
47
|
if (typeof this.props.inputRef === 'function') {
|
|
51
48
|
this.props.inputRef(el);
|
|
52
49
|
}
|
package/lib/Pagination/index.js
CHANGED
|
@@ -67,30 +67,30 @@ function propsHaveCompactView(props) {
|
|
|
67
67
|
---
|
|
68
68
|
category: components
|
|
69
69
|
---
|
|
70
|
+
@tsProps
|
|
70
71
|
**/
|
|
71
72
|
let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pagination extends _react.Component {
|
|
72
|
-
constructor() {
|
|
73
|
-
super(
|
|
73
|
+
constructor(props) {
|
|
74
|
+
super(props);
|
|
74
75
|
this._labelId = void 0;
|
|
75
|
-
this.ref = null;
|
|
76
|
-
this._inputRef = null;
|
|
77
76
|
this._firstButton = null;
|
|
78
77
|
this._prevButton = null;
|
|
79
78
|
this._nextButton = null;
|
|
80
79
|
this._lastButton = null;
|
|
80
|
+
this.ref = null;
|
|
81
81
|
|
|
82
82
|
this.handleElementRef = el => {
|
|
83
83
|
this.ref = el;
|
|
84
84
|
|
|
85
|
-
if (el) {
|
|
86
|
-
|
|
87
|
-
this.props.elementRef(el);
|
|
88
|
-
}
|
|
85
|
+
if (el && typeof this.props.elementRef === 'function') {
|
|
86
|
+
this.props.elementRef(el);
|
|
89
87
|
}
|
|
90
88
|
};
|
|
91
89
|
|
|
92
90
|
this.handleInputRef = el => {
|
|
93
|
-
this.
|
|
91
|
+
if (typeof this.props.inputRef === 'function') {
|
|
92
|
+
this.props.inputRef(el);
|
|
93
|
+
}
|
|
94
94
|
};
|
|
95
95
|
|
|
96
96
|
this._labelId = (0, _uid.uid)('Pagination');
|
|
@@ -321,7 +321,7 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
|
|
|
321
321
|
var _this$props$styles, _this$props$styles2;
|
|
322
322
|
|
|
323
323
|
if (!this.props.children) return null;
|
|
324
|
-
const currentPageIndex = fastFindIndex(this.
|
|
324
|
+
const currentPageIndex = fastFindIndex(this.childPages, p => p && p.props && p.props.current);
|
|
325
325
|
|
|
326
326
|
const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Pagination.allowedProps), Pagination);
|
|
327
327
|
|
|
@@ -339,13 +339,11 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
|
|
|
339
339
|
}
|
|
340
340
|
|
|
341
341
|
}, _class2.displayName = "Pagination", _class2.componentId = 'Pagination', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
342
|
-
children: null,
|
|
343
342
|
disabled: false,
|
|
344
343
|
withFirstAndLastButton: false,
|
|
345
344
|
showDisabledButtons: false,
|
|
346
345
|
variant: 'full',
|
|
347
346
|
as: 'div',
|
|
348
|
-
elementRef: el => {},
|
|
349
347
|
labelNumberInput: numberOfPages => `of ${numberOfPages}`,
|
|
350
348
|
screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
|
|
351
349
|
shouldHandleFocus: true
|
package/lib/Pagination/props.js
CHANGED
|
@@ -39,92 +39,24 @@ var _PaginationButton = require("./PaginationButton");
|
|
|
39
39
|
* SOFTWARE.
|
|
40
40
|
*/
|
|
41
41
|
const propTypes = {
|
|
42
|
-
/**
|
|
43
|
-
* children of type Pagination.Page
|
|
44
|
-
*/
|
|
45
42
|
children: _Children.Children.oneOf([_PaginationButton.PaginationButton]),
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* Disables interaction with all pages
|
|
49
|
-
*/
|
|
50
43
|
disabled: _propTypes.default.bool,
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Displays "jump to first" and "jump to last" buttons. Always turned on with `input` variant.
|
|
54
|
-
*/
|
|
55
44
|
withFirstAndLastButton: _propTypes.default.bool,
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Displays the unavailable navigation buttons as disabled instead of hiding them. Always turned on with `input` variant.
|
|
59
|
-
*/
|
|
60
45
|
showDisabledButtons: _propTypes.default.bool,
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Visible label for component
|
|
64
|
-
*/
|
|
65
46
|
label: _propTypes.default.node,
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Accessible label for next button
|
|
69
|
-
*/
|
|
70
47
|
labelNext: _propTypes.default.string,
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Accessible label for previous button
|
|
74
|
-
*/
|
|
75
48
|
labelPrev: _propTypes.default.string,
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* Accessible label for "jump to first" button
|
|
79
|
-
*/
|
|
80
49
|
labelFirst: _propTypes.default.string,
|
|
81
|
-
|
|
82
|
-
/**
|
|
83
|
-
* Accessible label for "jump to last" button
|
|
84
|
-
*/
|
|
85
50
|
labelLast: _propTypes.default.string,
|
|
86
|
-
|
|
87
|
-
/**
|
|
88
|
-
* Label for number input (for `input` variant)
|
|
89
|
-
*/
|
|
90
51
|
labelNumberInput: _propTypes.default.func,
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* ScreenReaderLabel for number input (for `input` variant)
|
|
94
|
-
*/
|
|
95
52
|
screenReaderLabelNumberInput: _propTypes.default.func,
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* The compact variant truncates the page navigation to show only the first,
|
|
99
|
-
* last, and pages immediately surrounding the current page. Fewer than 5 pages,
|
|
100
|
-
* no next/previous arrow buttons will be shown, and all pages will be listed
|
|
101
|
-
*/
|
|
102
53
|
variant: _propTypes.default.oneOf(['full', 'compact', 'input']),
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
106
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
107
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
108
|
-
*/
|
|
109
54
|
margin: _emotion.ThemeablePropTypes.spacing,
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* the element type to render as
|
|
113
|
-
*/
|
|
114
55
|
as: _propTypes.default.elementType,
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* provides a reference to the underlying html root element
|
|
118
|
-
*/
|
|
119
56
|
elementRef: _propTypes.default.func,
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* For accessibility, Pagination sets focus on the first or last Pagination.Pages,
|
|
123
|
-
* respectively, when the Previous or Next arrow buttons are removed from the DOM.
|
|
124
|
-
* Set this property to `false` to prevent this behavior.
|
|
125
|
-
*/
|
|
57
|
+
inputRef: _propTypes.default.func,
|
|
126
58
|
shouldHandleFocus: _propTypes.default.bool
|
|
127
59
|
};
|
|
128
60
|
exports.propTypes = propTypes;
|
|
129
|
-
const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'shouldHandleFocus'];
|
|
61
|
+
const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'inputRef', 'shouldHandleFocus'];
|
|
130
62
|
exports.allowedProps = allowedProps;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-pagination",
|
|
3
|
-
"version": "8.14.1-snapshot.
|
|
3
|
+
"version": "8.14.1-snapshot.69+ffdd1951c",
|
|
4
4
|
"description": "A UI component library made by Instructure Inc.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -24,29 +24,29 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@instructure/ui-babel-preset": "8.14.1-snapshot.
|
|
28
|
-
"@instructure/ui-test-locator": "8.14.1-snapshot.
|
|
29
|
-
"@instructure/ui-test-queries": "8.14.1-snapshot.
|
|
30
|
-
"@instructure/ui-test-utils": "8.14.1-snapshot.
|
|
27
|
+
"@instructure/ui-babel-preset": "8.14.1-snapshot.69+ffdd1951c",
|
|
28
|
+
"@instructure/ui-test-locator": "8.14.1-snapshot.69+ffdd1951c",
|
|
29
|
+
"@instructure/ui-test-queries": "8.14.1-snapshot.69+ffdd1951c",
|
|
30
|
+
"@instructure/ui-test-utils": "8.14.1-snapshot.69+ffdd1951c"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@babel/runtime": "^7.13.10",
|
|
34
|
-
"@instructure/emotion": "8.14.1-snapshot.
|
|
35
|
-
"@instructure/shared-types": "8.14.1-snapshot.
|
|
36
|
-
"@instructure/ui-a11y-content": "8.14.1-snapshot.
|
|
37
|
-
"@instructure/ui-a11y-utils": "8.14.1-snapshot.
|
|
38
|
-
"@instructure/ui-buttons": "8.14.1-snapshot.
|
|
39
|
-
"@instructure/ui-dom-utils": "8.14.1-snapshot.
|
|
40
|
-
"@instructure/ui-icons": "8.14.1-snapshot.
|
|
41
|
-
"@instructure/ui-number-input": "8.14.1-snapshot.
|
|
42
|
-
"@instructure/ui-portal": "8.14.1-snapshot.
|
|
43
|
-
"@instructure/ui-prop-types": "8.14.1-snapshot.
|
|
44
|
-
"@instructure/ui-react-utils": "8.14.1-snapshot.
|
|
45
|
-
"@instructure/ui-testable": "8.14.1-snapshot.
|
|
46
|
-
"@instructure/ui-tooltip": "8.14.1-snapshot.
|
|
47
|
-
"@instructure/ui-utils": "8.14.1-snapshot.
|
|
48
|
-
"@instructure/ui-view": "8.14.1-snapshot.
|
|
49
|
-
"@instructure/uid": "8.14.1-snapshot.
|
|
34
|
+
"@instructure/emotion": "8.14.1-snapshot.69+ffdd1951c",
|
|
35
|
+
"@instructure/shared-types": "8.14.1-snapshot.69+ffdd1951c",
|
|
36
|
+
"@instructure/ui-a11y-content": "8.14.1-snapshot.69+ffdd1951c",
|
|
37
|
+
"@instructure/ui-a11y-utils": "8.14.1-snapshot.69+ffdd1951c",
|
|
38
|
+
"@instructure/ui-buttons": "8.14.1-snapshot.69+ffdd1951c",
|
|
39
|
+
"@instructure/ui-dom-utils": "8.14.1-snapshot.69+ffdd1951c",
|
|
40
|
+
"@instructure/ui-icons": "8.14.1-snapshot.69+ffdd1951c",
|
|
41
|
+
"@instructure/ui-number-input": "8.14.1-snapshot.69+ffdd1951c",
|
|
42
|
+
"@instructure/ui-portal": "8.14.1-snapshot.69+ffdd1951c",
|
|
43
|
+
"@instructure/ui-prop-types": "8.14.1-snapshot.69+ffdd1951c",
|
|
44
|
+
"@instructure/ui-react-utils": "8.14.1-snapshot.69+ffdd1951c",
|
|
45
|
+
"@instructure/ui-testable": "8.14.1-snapshot.69+ffdd1951c",
|
|
46
|
+
"@instructure/ui-tooltip": "8.14.1-snapshot.69+ffdd1951c",
|
|
47
|
+
"@instructure/ui-utils": "8.14.1-snapshot.69+ffdd1951c",
|
|
48
|
+
"@instructure/ui-view": "8.14.1-snapshot.69+ffdd1951c",
|
|
49
|
+
"@instructure/uid": "8.14.1-snapshot.69+ffdd1951c",
|
|
50
50
|
"keycode": "^2",
|
|
51
51
|
"prop-types": "^15"
|
|
52
52
|
},
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"access": "public"
|
|
58
58
|
},
|
|
59
59
|
"sideEffects": false,
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "ffdd1951c2d3160bb314a49fa64d7cf94444a18d"
|
|
61
61
|
}
|