@elliemae/ds-page-number 2.2.0-alpha.3 → 2.2.0-next.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/cjs/DSPageNumber.js +130 -125
- package/cjs/DSPageNumber.test.js +48 -0
- package/cjs/components/utils.js +12 -39
- package/cjs/index.js +11 -36
- package/esm/DSPageNumber.js +108 -87
- package/esm/DSPageNumber.test.js +42 -0
- package/esm/components/utils.js +7 -10
- package/esm/index.js +1 -7
- package/package.json +5 -5
- package/cjs/DSPageNumber.js.map +0 -7
- package/cjs/components/utils.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/esm/DSPageNumber.js.map +0 -7
- package/esm/components/utils.js.map +0 -7
- package/esm/index.js.map +0 -7
package/cjs/DSPageNumber.js
CHANGED
|
@@ -1,154 +1,159 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
14
|
+
var react = require('react');
|
|
15
|
+
var reactDesc = require('react-desc');
|
|
16
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
17
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
18
|
+
var DSButton = require('@elliemae/ds-button');
|
|
19
|
+
var dsForm = require('@elliemae/ds-form');
|
|
20
|
+
var utils = require('./components/utils.js');
|
|
21
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
22
|
+
|
|
23
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
24
|
+
|
|
25
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
26
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
27
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
28
|
+
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
|
|
29
|
+
|
|
30
|
+
var _ChevronSmallUp, _ChevronSmallDown;
|
|
31
|
+
|
|
32
|
+
const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "currentPage", "totalPages", "separator"];
|
|
33
|
+
|
|
34
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
|
+
|
|
36
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
37
|
+
const blockName = 'page-number-block';
|
|
38
|
+
const PageNumberInputContainer = dsClassnames.aggregatedClasses(dsForm.DSInputGroup)(blockName);
|
|
39
|
+
|
|
40
|
+
const DSPageNumber = _ref => {
|
|
41
|
+
let {
|
|
42
|
+
className,
|
|
43
|
+
disabled,
|
|
44
|
+
value,
|
|
45
|
+
onChange,
|
|
46
|
+
containerProps,
|
|
47
|
+
currentPage,
|
|
48
|
+
totalPages,
|
|
49
|
+
separator
|
|
50
|
+
} = _ref,
|
|
51
|
+
otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
52
|
+
|
|
53
|
+
const safeTotal = utils.cleanPage(totalPages);
|
|
54
|
+
const ref = react.useRef(null);
|
|
55
|
+
const {
|
|
56
|
+
cssClassName,
|
|
57
|
+
classNameElement
|
|
58
|
+
} = dsClassnames.convertPropToCssClassName('page-number', className, {
|
|
58
59
|
disabled
|
|
59
60
|
});
|
|
60
|
-
const [page, setPage] =
|
|
61
|
-
const [size, setSize] =
|
|
62
|
-
|
|
63
|
-
const {
|
|
64
|
-
|
|
61
|
+
const [page, setPage] = react.useState(utils.cleanPage(currentPage) || 1);
|
|
62
|
+
const [size, setSize] = react.useState(null);
|
|
63
|
+
react.useEffect(() => {
|
|
64
|
+
const {
|
|
65
|
+
width
|
|
66
|
+
} = ref.current.getBoundingClientRect();
|
|
67
|
+
const calculatedWidth = utils.lengthToSize(width, page);
|
|
65
68
|
setSize(calculatedWidth);
|
|
66
69
|
}, [page, safeTotal]);
|
|
70
|
+
|
|
67
71
|
function handleUpdateInput(e) {
|
|
68
|
-
const newValue =
|
|
69
|
-
if (newValue > safeTotal || newValue === 0)
|
|
70
|
-
return;
|
|
72
|
+
const newValue = utils.cleanPage(e.target.value);
|
|
73
|
+
if (newValue > safeTotal || newValue === 0) return;
|
|
71
74
|
setPage(newValue);
|
|
72
75
|
onChange(newValue);
|
|
73
76
|
}
|
|
77
|
+
|
|
74
78
|
function handleIncrease() {
|
|
75
79
|
const newValue = page ? parseInt(page, 10) + 1 : 1;
|
|
76
|
-
if (newValue > safeTotal)
|
|
77
|
-
return;
|
|
80
|
+
if (newValue > safeTotal) return;
|
|
78
81
|
setPage(newValue);
|
|
79
82
|
onChange(newValue);
|
|
80
83
|
}
|
|
84
|
+
|
|
81
85
|
function handleDecrease() {
|
|
82
86
|
const newValue = page ? parseInt(page, 10) - 1 : 1;
|
|
83
|
-
if (newValue < 1)
|
|
84
|
-
return;
|
|
87
|
+
if (newValue < 1) return;
|
|
85
88
|
setPage(newValue);
|
|
86
89
|
onChange(newValue);
|
|
87
90
|
}
|
|
88
|
-
|
|
91
|
+
|
|
92
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
89
93
|
"data-testid": "ds-page-number",
|
|
90
|
-
className:
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
"
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}))
|
|
94
|
+
className: "".concat(cssClassName)
|
|
95
|
+
}, containerProps), otherProps), {}, {
|
|
96
|
+
children: /*#__PURE__*/_jsx__default["default"](PageNumberInputContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
|
|
97
|
+
className: "".concat(classNameElement('pages'))
|
|
98
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInput, {
|
|
99
|
+
className: "".concat(classNameElement('input')),
|
|
100
|
+
"data-testid": "page-number__current-page",
|
|
101
|
+
onChange: handleUpdateInput,
|
|
102
|
+
style: {
|
|
103
|
+
width: "".concat(size, "px")
|
|
104
|
+
},
|
|
105
|
+
value: page
|
|
106
|
+
}), /*#__PURE__*/_jsx__default["default"]("div", {
|
|
107
|
+
className: "".concat(classNameElement('separator'))
|
|
108
|
+
}, void 0, separator), /*#__PURE__*/_jsx__default["default"]("div", {
|
|
109
|
+
className: "".concat(classNameElement('total')),
|
|
110
|
+
"data-testid": "page-number__total-pages"
|
|
111
|
+
}, void 0, totalPages), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
112
|
+
ref: ref,
|
|
113
|
+
className: "".concat(classNameElement('ref'))
|
|
114
|
+
})), /*#__PURE__*/_jsx__default["default"]("div", {
|
|
115
|
+
className: "".concat(classNameElement('limiter'))
|
|
116
|
+
}), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
117
|
+
"aria-label": "dropdown-indicator",
|
|
118
|
+
buttonType: "text",
|
|
119
|
+
className: "dropdown-indicator",
|
|
120
|
+
"data-testid": "page-number__increase",
|
|
121
|
+
icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})),
|
|
122
|
+
onClick: handleIncrease
|
|
123
|
+
}), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
124
|
+
"aria-label": "dropdown-indicator",
|
|
125
|
+
buttonType: "text",
|
|
126
|
+
className: "dropdown-indicator",
|
|
127
|
+
"data-testid": "page-number__decrease",
|
|
128
|
+
icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
|
|
129
|
+
onClick: handleDecrease
|
|
130
|
+
}))
|
|
131
|
+
}));
|
|
128
132
|
};
|
|
133
|
+
|
|
129
134
|
const pageNumberProps = {
|
|
130
|
-
className:
|
|
131
|
-
containerProps:
|
|
132
|
-
disabled:
|
|
133
|
-
value:
|
|
134
|
-
onChange:
|
|
135
|
-
currentPage:
|
|
136
|
-
totalPages:
|
|
137
|
-
separator:
|
|
135
|
+
className: reactDesc.PropTypes.string.description('html class attribute'),
|
|
136
|
+
containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
|
|
137
|
+
disabled: reactDesc.PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),
|
|
138
|
+
value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.object]).description('page number value'),
|
|
139
|
+
onChange: reactDesc.PropTypes.func.description('function executed when the page number changes'),
|
|
140
|
+
currentPage: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Value of the current page'),
|
|
141
|
+
totalPages: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Amount of pages').defaultValue(1),
|
|
142
|
+
separator: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Separator between current page and total pages').defaultValue('/')
|
|
138
143
|
};
|
|
139
|
-
|
|
140
|
-
const PageNumberWithSchema = (0, import_react_desc.describe)(DSPageNumber);
|
|
144
|
+
const PageNumberWithSchema = reactDesc.describe(DSPageNumber);
|
|
141
145
|
PageNumberWithSchema.propTypes = pageNumberProps;
|
|
142
146
|
DSPageNumber.defaultProps = {
|
|
143
|
-
className:
|
|
147
|
+
className: '',
|
|
144
148
|
disabled: false,
|
|
145
149
|
onChange: () => null,
|
|
146
150
|
containerProps: {},
|
|
147
|
-
value:
|
|
148
|
-
currentPage:
|
|
151
|
+
value: undefined,
|
|
152
|
+
currentPage: undefined,
|
|
149
153
|
totalPages: 1,
|
|
150
|
-
separator:
|
|
154
|
+
separator: '/'
|
|
151
155
|
};
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
156
|
+
|
|
157
|
+
exports.DSPageNumber = DSPageNumber;
|
|
158
|
+
exports.PageNumberWithSchema = PageNumberWithSchema;
|
|
159
|
+
exports["default"] = DSPageNumber;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('react');
|
|
5
|
+
require('@testing-library/jest-dom/extend-expect');
|
|
6
|
+
var react = require('@testing-library/react');
|
|
7
|
+
var DSPageNumber = require('./DSPageNumber.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
12
|
+
|
|
13
|
+
var _PageNumber, _PageNumber2, _PageNumber3;
|
|
14
|
+
test('Increases page number ', async () => {
|
|
15
|
+
const {
|
|
16
|
+
queryByTestId
|
|
17
|
+
} = react.render(_PageNumber || (_PageNumber = /*#__PURE__*/_jsx__default["default"](DSPageNumber.DSPageNumber, {
|
|
18
|
+
totalPages: 3
|
|
19
|
+
})));
|
|
20
|
+
const increaseButton = queryByTestId('page-number__increase');
|
|
21
|
+
const currentPage = queryByTestId('page-number__current-page');
|
|
22
|
+
react.fireEvent.click(increaseButton);
|
|
23
|
+
expect(currentPage).toHaveValue('2');
|
|
24
|
+
});
|
|
25
|
+
test('Decreases page number ', async () => {
|
|
26
|
+
const {
|
|
27
|
+
queryByTestId
|
|
28
|
+
} = react.render(_PageNumber2 || (_PageNumber2 = /*#__PURE__*/_jsx__default["default"](DSPageNumber.DSPageNumber, {
|
|
29
|
+
currentPage: 2,
|
|
30
|
+
totalPages: 3
|
|
31
|
+
})));
|
|
32
|
+
const decreaseButton = queryByTestId('page-number__decrease');
|
|
33
|
+
const currentPage = queryByTestId('page-number__current-page');
|
|
34
|
+
react.fireEvent.click(decreaseButton);
|
|
35
|
+
expect(currentPage).toHaveValue('1');
|
|
36
|
+
});
|
|
37
|
+
test('Increases page number until last page number', async () => {
|
|
38
|
+
const {
|
|
39
|
+
queryByTestId
|
|
40
|
+
} = react.render(_PageNumber3 || (_PageNumber3 = /*#__PURE__*/_jsx__default["default"](DSPageNumber.DSPageNumber, {
|
|
41
|
+
currentPage: 2,
|
|
42
|
+
totalPages: 3
|
|
43
|
+
})));
|
|
44
|
+
const increaseButton = queryByTestId('page-number__increase');
|
|
45
|
+
const currentPage = queryByTestId('page-number__current-page');
|
|
46
|
+
react.fireEvent.click(increaseButton);
|
|
47
|
+
expect(currentPage).toHaveValue('3');
|
|
48
|
+
});
|
package/cjs/components/utils.js
CHANGED
|
@@ -1,41 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var utils_exports = {};
|
|
29
|
-
__export(utils_exports, {
|
|
30
|
-
cleanPage: () => cleanPage,
|
|
31
|
-
lengthToSize: () => lengthToSize
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/es.string.replace.js');
|
|
6
|
+
|
|
34
7
|
const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
|
|
35
|
-
const cleanPage =
|
|
36
|
-
if (!value || value ===
|
|
37
|
-
|
|
38
|
-
return parseInt(String(value || 1).replace(/\D/g, ""), 10);
|
|
8
|
+
const cleanPage = value => {
|
|
9
|
+
if (!value || value === '' || isNaN(parseInt(value))) return '';
|
|
10
|
+
return parseInt(String(value || 1).replace(/\D/g, ''), 10);
|
|
39
11
|
};
|
|
40
|
-
|
|
41
|
-
|
|
12
|
+
|
|
13
|
+
exports.cleanPage = cleanPage;
|
|
14
|
+
exports.lengthToSize = lengthToSize;
|
package/cjs/index.js
CHANGED
|
@@ -1,36 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var src_exports = {};
|
|
29
|
-
__export(src_exports, {
|
|
30
|
-
default: () => import_DSPageNumber.default
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
__reExport(src_exports, __toESM(require("./DSPageNumber")));
|
|
34
|
-
var import_DSPageNumber = __toESM(require("./DSPageNumber"));
|
|
35
|
-
module.exports = __toCommonJS(src_exports);
|
|
36
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var DSPageNumber = require('./DSPageNumber.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.DSPageNumber = DSPageNumber.DSPageNumber;
|
|
10
|
+
exports.PageNumberWithSchema = DSPageNumber.PageNumberWithSchema;
|
|
11
|
+
exports["default"] = DSPageNumber.DSPageNumber;
|
package/esm/DSPageNumber.js
CHANGED
|
@@ -1,125 +1,146 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
10
|
+
import { useRef, useState, useEffect } from 'react';
|
|
11
|
+
import { PropTypes, describe } from 'react-desc';
|
|
12
|
+
import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
|
|
13
|
+
import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
|
|
14
|
+
import DSButton from '@elliemae/ds-button';
|
|
15
|
+
import { DSInputGroup, DSInput } from '@elliemae/ds-form';
|
|
16
|
+
import { cleanPage, lengthToSize } from './components/utils.js';
|
|
17
|
+
import { jsx } from 'react/jsx-runtime';
|
|
18
|
+
|
|
19
|
+
var _ChevronSmallUp, _ChevronSmallDown;
|
|
20
|
+
|
|
21
|
+
const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "currentPage", "totalPages", "separator"];
|
|
22
|
+
|
|
23
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
24
|
+
|
|
25
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
26
|
+
const blockName = 'page-number-block';
|
|
10
27
|
const PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
28
|
+
|
|
29
|
+
const DSPageNumber = _ref => {
|
|
30
|
+
let {
|
|
31
|
+
className,
|
|
32
|
+
disabled,
|
|
33
|
+
value,
|
|
34
|
+
onChange,
|
|
35
|
+
containerProps,
|
|
36
|
+
currentPage,
|
|
37
|
+
totalPages,
|
|
38
|
+
separator
|
|
39
|
+
} = _ref,
|
|
40
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
41
|
+
|
|
22
42
|
const safeTotal = cleanPage(totalPages);
|
|
23
43
|
const ref = useRef(null);
|
|
24
|
-
const {
|
|
44
|
+
const {
|
|
45
|
+
cssClassName,
|
|
46
|
+
classNameElement
|
|
47
|
+
} = convertPropToCssClassName('page-number', className, {
|
|
25
48
|
disabled
|
|
26
49
|
});
|
|
27
50
|
const [page, setPage] = useState(cleanPage(currentPage) || 1);
|
|
28
51
|
const [size, setSize] = useState(null);
|
|
29
52
|
useEffect(() => {
|
|
30
|
-
const {
|
|
53
|
+
const {
|
|
54
|
+
width
|
|
55
|
+
} = ref.current.getBoundingClientRect();
|
|
31
56
|
const calculatedWidth = lengthToSize(width, page);
|
|
32
57
|
setSize(calculatedWidth);
|
|
33
58
|
}, [page, safeTotal]);
|
|
59
|
+
|
|
34
60
|
function handleUpdateInput(e) {
|
|
35
61
|
const newValue = cleanPage(e.target.value);
|
|
36
|
-
if (newValue > safeTotal || newValue === 0)
|
|
37
|
-
return;
|
|
62
|
+
if (newValue > safeTotal || newValue === 0) return;
|
|
38
63
|
setPage(newValue);
|
|
39
64
|
onChange(newValue);
|
|
40
65
|
}
|
|
66
|
+
|
|
41
67
|
function handleIncrease() {
|
|
42
68
|
const newValue = page ? parseInt(page, 10) + 1 : 1;
|
|
43
|
-
if (newValue > safeTotal)
|
|
44
|
-
return;
|
|
69
|
+
if (newValue > safeTotal) return;
|
|
45
70
|
setPage(newValue);
|
|
46
71
|
onChange(newValue);
|
|
47
72
|
}
|
|
73
|
+
|
|
48
74
|
function handleDecrease() {
|
|
49
75
|
const newValue = page ? parseInt(page, 10) - 1 : 1;
|
|
50
|
-
if (newValue < 1)
|
|
51
|
-
return;
|
|
76
|
+
if (newValue < 1) return;
|
|
52
77
|
setPage(newValue);
|
|
53
78
|
onChange(newValue);
|
|
54
79
|
}
|
|
55
|
-
|
|
80
|
+
|
|
81
|
+
return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
56
82
|
"data-testid": "ds-page-number",
|
|
57
|
-
className:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
"
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}))
|
|
83
|
+
className: "".concat(cssClassName)
|
|
84
|
+
}, containerProps), otherProps), {}, {
|
|
85
|
+
children: /*#__PURE__*/_jsx(PageNumberInputContainer, {}, void 0, /*#__PURE__*/_jsx("div", {
|
|
86
|
+
className: "".concat(classNameElement('pages'))
|
|
87
|
+
}, void 0, /*#__PURE__*/_jsx(DSInput, {
|
|
88
|
+
className: "".concat(classNameElement('input')),
|
|
89
|
+
"data-testid": "page-number__current-page",
|
|
90
|
+
onChange: handleUpdateInput,
|
|
91
|
+
style: {
|
|
92
|
+
width: "".concat(size, "px")
|
|
93
|
+
},
|
|
94
|
+
value: page
|
|
95
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
96
|
+
className: "".concat(classNameElement('separator'))
|
|
97
|
+
}, void 0, separator), /*#__PURE__*/_jsx("div", {
|
|
98
|
+
className: "".concat(classNameElement('total')),
|
|
99
|
+
"data-testid": "page-number__total-pages"
|
|
100
|
+
}, void 0, totalPages), /*#__PURE__*/jsx("div", {
|
|
101
|
+
ref: ref,
|
|
102
|
+
className: "".concat(classNameElement('ref'))
|
|
103
|
+
})), /*#__PURE__*/_jsx("div", {
|
|
104
|
+
className: "".concat(classNameElement('limiter'))
|
|
105
|
+
}), /*#__PURE__*/_jsx(DSButton, {
|
|
106
|
+
"aria-label": "dropdown-indicator",
|
|
107
|
+
buttonType: "text",
|
|
108
|
+
className: "dropdown-indicator",
|
|
109
|
+
"data-testid": "page-number__increase",
|
|
110
|
+
icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
|
|
111
|
+
onClick: handleIncrease
|
|
112
|
+
}), /*#__PURE__*/_jsx(DSButton, {
|
|
113
|
+
"aria-label": "dropdown-indicator",
|
|
114
|
+
buttonType: "text",
|
|
115
|
+
className: "dropdown-indicator",
|
|
116
|
+
"data-testid": "page-number__decrease",
|
|
117
|
+
icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
|
|
118
|
+
onClick: handleDecrease
|
|
119
|
+
}))
|
|
120
|
+
}));
|
|
95
121
|
};
|
|
122
|
+
|
|
96
123
|
const pageNumberProps = {
|
|
97
|
-
className: PropTypes.string.description(
|
|
98
|
-
containerProps: PropTypes.object.description(
|
|
99
|
-
disabled: PropTypes.bool.description(
|
|
100
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(
|
|
101
|
-
onChange: PropTypes.func.description(
|
|
102
|
-
currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
|
|
103
|
-
totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
|
|
104
|
-
separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
|
|
124
|
+
className: PropTypes.string.description('html class attribute'),
|
|
125
|
+
containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
|
|
126
|
+
disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),
|
|
127
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),
|
|
128
|
+
onChange: PropTypes.func.description('function executed when the page number changes'),
|
|
129
|
+
currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),
|
|
130
|
+
totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),
|
|
131
|
+
separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Separator between current page and total pages').defaultValue('/')
|
|
105
132
|
};
|
|
106
|
-
DSPageNumber.propTypes = pageNumberProps;
|
|
107
133
|
const PageNumberWithSchema = describe(DSPageNumber);
|
|
108
134
|
PageNumberWithSchema.propTypes = pageNumberProps;
|
|
109
135
|
DSPageNumber.defaultProps = {
|
|
110
|
-
className:
|
|
136
|
+
className: '',
|
|
111
137
|
disabled: false,
|
|
112
138
|
onChange: () => null,
|
|
113
139
|
containerProps: {},
|
|
114
|
-
value:
|
|
115
|
-
currentPage:
|
|
140
|
+
value: undefined,
|
|
141
|
+
currentPage: undefined,
|
|
116
142
|
totalPages: 1,
|
|
117
|
-
separator:
|
|
143
|
+
separator: '/'
|
|
118
144
|
};
|
|
119
|
-
|
|
120
|
-
export {
|
|
121
|
-
DSPageNumber,
|
|
122
|
-
PageNumberWithSchema,
|
|
123
|
-
DSPageNumber_default as default
|
|
124
|
-
};
|
|
125
|
-
//# sourceMappingURL=DSPageNumber.js.map
|
|
145
|
+
|
|
146
|
+
export { DSPageNumber, PageNumberWithSchema, DSPageNumber as default };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'react';
|
|
3
|
+
import '@testing-library/jest-dom/extend-expect';
|
|
4
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
5
|
+
import { DSPageNumber } from './DSPageNumber.js';
|
|
6
|
+
|
|
7
|
+
var _PageNumber, _PageNumber2, _PageNumber3;
|
|
8
|
+
test('Increases page number ', async () => {
|
|
9
|
+
const {
|
|
10
|
+
queryByTestId
|
|
11
|
+
} = render(_PageNumber || (_PageNumber = /*#__PURE__*/_jsx(DSPageNumber, {
|
|
12
|
+
totalPages: 3
|
|
13
|
+
})));
|
|
14
|
+
const increaseButton = queryByTestId('page-number__increase');
|
|
15
|
+
const currentPage = queryByTestId('page-number__current-page');
|
|
16
|
+
fireEvent.click(increaseButton);
|
|
17
|
+
expect(currentPage).toHaveValue('2');
|
|
18
|
+
});
|
|
19
|
+
test('Decreases page number ', async () => {
|
|
20
|
+
const {
|
|
21
|
+
queryByTestId
|
|
22
|
+
} = render(_PageNumber2 || (_PageNumber2 = /*#__PURE__*/_jsx(DSPageNumber, {
|
|
23
|
+
currentPage: 2,
|
|
24
|
+
totalPages: 3
|
|
25
|
+
})));
|
|
26
|
+
const decreaseButton = queryByTestId('page-number__decrease');
|
|
27
|
+
const currentPage = queryByTestId('page-number__current-page');
|
|
28
|
+
fireEvent.click(decreaseButton);
|
|
29
|
+
expect(currentPage).toHaveValue('1');
|
|
30
|
+
});
|
|
31
|
+
test('Increases page number until last page number', async () => {
|
|
32
|
+
const {
|
|
33
|
+
queryByTestId
|
|
34
|
+
} = render(_PageNumber3 || (_PageNumber3 = /*#__PURE__*/_jsx(DSPageNumber, {
|
|
35
|
+
currentPage: 2,
|
|
36
|
+
totalPages: 3
|
|
37
|
+
})));
|
|
38
|
+
const increaseButton = queryByTestId('page-number__increase');
|
|
39
|
+
const currentPage = queryByTestId('page-number__current-page');
|
|
40
|
+
fireEvent.click(increaseButton);
|
|
41
|
+
expect(currentPage).toHaveValue('3');
|
|
42
|
+
});
|
package/esm/components/utils.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import 'core-js/modules/es.string.replace.js';
|
|
2
|
+
|
|
2
3
|
const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
|
|
3
|
-
const cleanPage =
|
|
4
|
-
if (!value || value ===
|
|
5
|
-
|
|
6
|
-
return parseInt(String(value || 1).replace(/\D/g, ""), 10);
|
|
4
|
+
const cleanPage = value => {
|
|
5
|
+
if (!value || value === '' || isNaN(parseInt(value))) return '';
|
|
6
|
+
return parseInt(String(value || 1).replace(/\D/g, ''), 10);
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
lengthToSize
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=utils.js.map
|
|
8
|
+
|
|
9
|
+
export { cleanPage, lengthToSize };
|
package/esm/index.js
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export * from "./DSPageNumber";
|
|
3
|
-
import { default as default2 } from "./DSPageNumber";
|
|
4
|
-
export {
|
|
5
|
-
default2 as default
|
|
6
|
-
};
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export { DSPageNumber, PageNumberWithSchema, DSPageNumber as default } from './DSPageNumber.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-page-number",
|
|
3
|
-
"version": "2.2.0-
|
|
3
|
+
"version": "2.2.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Page Number",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"build": "node ../../scripts/build/build.js"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@elliemae/ds-button": "2.2.0-
|
|
44
|
-
"@elliemae/ds-classnames": "2.2.0-
|
|
45
|
-
"@elliemae/ds-form": "2.2.0-
|
|
46
|
-
"@elliemae/ds-icons": "2.2.0-
|
|
43
|
+
"@elliemae/ds-button": "2.2.0-next.2",
|
|
44
|
+
"@elliemae/ds-classnames": "2.2.0-next.2",
|
|
45
|
+
"@elliemae/ds-form": "2.2.0-next.2",
|
|
46
|
+
"@elliemae/ds-icons": "2.2.0-next.2",
|
|
47
47
|
"react-desc": "~4.1.3"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
package/cjs/DSPageNumber.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSPageNumber.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n className,\n disabled,\n value,\n onChange,\n containerProps,\n currentPage,\n totalPages,\n separator,\n ...otherProps\n}) => {\n const safeTotal = cleanPage(totalPages);\n const ref = useRef(null);\n const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n disabled,\n });\n const [page, setPage] = useState(cleanPage(currentPage) || 1);\n const [size, setSize] = useState(null);\n useEffect(() => {\n const { width } = ref.current.getBoundingClientRect();\n const calculatedWidth = lengthToSize(width, page);\n setSize(calculatedWidth);\n }, [page, safeTotal]);\n\n function handleUpdateInput(e) {\n const newValue = cleanPage(e.target.value);\n if (newValue > safeTotal || newValue === 0) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleIncrease() {\n const newValue = page ? parseInt(page, 10) + 1 : 1;\n if (newValue > safeTotal) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleDecrease() {\n const newValue = page ? parseInt(page, 10) - 1 : 1;\n if (newValue < 1) return;\n setPage(newValue);\n onChange(newValue);\n }\n\n return (\n <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <PageNumberInputContainer>\n <div className={`${classNameElement('pages')}`}>\n <DSInput\n className={`${classNameElement('input')}`}\n data-testid=\"page-number__current-page\"\n onChange={handleUpdateInput}\n style={{\n width: `${size}px`,\n }}\n value={page}\n />\n <div className={`${classNameElement('separator')}`}>{separator}</div>\n <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n {totalPages}\n </div>\n <div ref={ref} className={`${classNameElement('ref')}`} />\n </div>\n <div className={`${classNameElement('limiter')}`} />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__increase\"\n icon={<ChevronSmallUp />}\n onClick={handleIncrease}\n />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__decrease\"\n icon={<ChevronSmallDown />}\n onClick={handleDecrease}\n />\n </PageNumberInputContainer>\n </div>\n );\n};\n\nconst pageNumberProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n onChange: PropTypes.func.description('function executed when the page number changes'),\n currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Separator between current page and total pages')\n .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\n\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n className: '',\n disabled: false,\n onChange: () => null,\n containerProps: {},\n value: undefined,\n currentPage: undefined,\n totalPages: 1,\n separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const lengthToSize = (referenceWidth, value) =>\n referenceWidth + (referenceWidth / 7) * String(value).length;\n\nexport const cleanPage = value => {\n if (!value || value === '' || isNaN(parseInt(value))) return '';\n return parseInt(String(value || 1).replace(/\\D/g, ''), 10);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe,CAAC,gBAAgB,UAC3C,iBAAkB,iBAAiB,IAAK,OAAO,OAAO;AAEjD,MAAM,YAAY,WAAS;AAChC,MAAI,CAAC,SAAS,UAAU,MAAM,MAAM,SAAS;AAAS,WAAO;AAC7D,SAAO,SAAS,OAAO,SAAS,GAAG,QAAQ,OAAO,KAAK;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './DSPageNumber';\n\nexport { default } from './DSPageNumber';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AAEd,0BAAwB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/DSPageNumber.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSPageNumber.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n className,\n disabled,\n value,\n onChange,\n containerProps,\n currentPage,\n totalPages,\n separator,\n ...otherProps\n}) => {\n const safeTotal = cleanPage(totalPages);\n const ref = useRef(null);\n const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n disabled,\n });\n const [page, setPage] = useState(cleanPage(currentPage) || 1);\n const [size, setSize] = useState(null);\n useEffect(() => {\n const { width } = ref.current.getBoundingClientRect();\n const calculatedWidth = lengthToSize(width, page);\n setSize(calculatedWidth);\n }, [page, safeTotal]);\n\n function handleUpdateInput(e) {\n const newValue = cleanPage(e.target.value);\n if (newValue > safeTotal || newValue === 0) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleIncrease() {\n const newValue = page ? parseInt(page, 10) + 1 : 1;\n if (newValue > safeTotal) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleDecrease() {\n const newValue = page ? parseInt(page, 10) - 1 : 1;\n if (newValue < 1) return;\n setPage(newValue);\n onChange(newValue);\n }\n\n return (\n <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <PageNumberInputContainer>\n <div className={`${classNameElement('pages')}`}>\n <DSInput\n className={`${classNameElement('input')}`}\n data-testid=\"page-number__current-page\"\n onChange={handleUpdateInput}\n style={{\n width: `${size}px`,\n }}\n value={page}\n />\n <div className={`${classNameElement('separator')}`}>{separator}</div>\n <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n {totalPages}\n </div>\n <div ref={ref} className={`${classNameElement('ref')}`} />\n </div>\n <div className={`${classNameElement('limiter')}`} />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__increase\"\n icon={<ChevronSmallUp />}\n onClick={handleIncrease}\n />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__decrease\"\n icon={<ChevronSmallDown />}\n onClick={handleDecrease}\n />\n </PageNumberInputContainer>\n </div>\n );\n};\n\nconst pageNumberProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n onChange: PropTypes.func.description('function executed when the page number changes'),\n currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Separator between current page and total pages')\n .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\n\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n className: '',\n disabled: false,\n onChange: () => null,\n containerProps: {},\n value: undefined,\n currentPage: undefined,\n totalPages: 1,\n separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,2BAA2B,kBAAkB,cAAc;AAEjE,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MACC;AACJ,QAAM,YAAY,UAAU;AAC5B,QAAM,MAAM,OAAO;AACnB,QAAM,EAAE,cAAc,qBAAqB,0BAA0B,eAAe,WAAW;AAAA,IAC7F;AAAA;AAEF,QAAM,CAAC,MAAM,WAAW,SAAS,UAAU,gBAAgB;AAC3D,QAAM,CAAC,MAAM,WAAW,SAAS;AACjC,YAAU,MAAM;AACd,UAAM,EAAE,UAAU,IAAI,QAAQ;AAC9B,UAAM,kBAAkB,aAAa,OAAO;AAC5C,YAAQ;AAAA,KACP,CAAC,MAAM;AAEV,6BAA2B,GAAG;AAC5B,UAAM,WAAW,UAAU,EAAE,OAAO;AACpC,QAAI,WAAW,aAAa,aAAa;AAAG;AAC5C,YAAQ;AACR,aAAS;AAAA;AAEX,4BAA0B;AACxB,UAAM,WAAW,OAAO,SAAS,MAAM,MAAM,IAAI;AACjD,QAAI,WAAW;AAAW;AAC1B,YAAQ;AACR,aAAS;AAAA;AAEX,4BAA0B;AACxB,UAAM,WAAW,OAAO,SAAS,MAAM,MAAM,IAAI;AACjD,QAAI,WAAW;AAAG;AAClB,YAAQ;AACR,aAAS;AAAA;AAGX,SACE,qCAAC,OAAD;AAAA,IAAK,eAAY;AAAA,IAAiB,WAAW,GAAG;AAAA,OAAoB;AAAA,OAAoB;AAAA,KACtF,qCAAC,0BAAD,MACE,qCAAC,OAAD;AAAA,IAAK,WAAW,GAAG,iBAAiB;AAAA,KAClC,qCAAC,SAAD;AAAA,IACE,WAAW,GAAG,iBAAiB;AAAA,IAC/B,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,MACL,OAAO,GAAG;AAAA;AAAA,IAEZ,OAAO;AAAA,MAET,qCAAC,OAAD;AAAA,IAAK,WAAW,GAAG,iBAAiB;AAAA,KAAiB,YACrD,qCAAC,OAAD;AAAA,IAAK,WAAW,GAAG,iBAAiB;AAAA,IAAY,eAAY;AAAA,KACzD,aAEH,qCAAC,OAAD;AAAA,IAAK;AAAA,IAAU,WAAW,GAAG,iBAAiB;AAAA,OAEhD,qCAAC,OAAD;AAAA,IAAK,WAAW,GAAG,iBAAiB;AAAA,MACpC,qCAAC,UAAD;AAAA,IACE,cAAW;AAAA,IACX,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,qCAAC,gBAAD;AAAA,IACN,SAAS;AAAA,MAEX,qCAAC,UAAD;AAAA,IACE,cAAW;AAAA,IACX,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,qCAAC,kBAAD;AAAA,IACN,SAAS;AAAA;AAAA;AAOnB,MAAM,kBAAkB;AAAA,EACtB,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,UAAU,UAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EACnF,YAAY,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY,mBAAmB,aAAa;AAAA,EAClH,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SACzD,YAAY,kDACZ,aAAa;AAAA;AAGlB,aAAa,YAAY;AAEzB,MAAM,uBAAuB,SAAS;AACtC,qBAAqB,YAAY;AAEjC,aAAa,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAChB,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA;AAIb,IAAO,uBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/utils.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const lengthToSize = (referenceWidth, value) =>\n referenceWidth + (referenceWidth / 7) * String(value).length;\n\nexport const cleanPage = value => {\n if (!value || value === '' || isNaN(parseInt(value))) return '';\n return parseInt(String(value || 1).replace(/\\D/g, ''), 10);\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,eAAe,CAAC,gBAAgB,UAC3C,iBAAkB,iBAAiB,IAAK,OAAO,OAAO;AAEjD,MAAM,YAAY,WAAS;AAChC,MAAI,CAAC,SAAS,UAAU,MAAM,MAAM,SAAS;AAAS,WAAO;AAC7D,SAAO,SAAS,OAAO,SAAS,GAAG,QAAQ,OAAO,KAAK;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSPageNumber';\n\nexport { default } from './DSPageNumber';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|