@elliemae/ds-page-number 2.2.1 → 2.3.0-alpha.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.
Files changed (15) hide show
  1. package/cjs/DSPageNumber.js +125 -130
  2. package/cjs/DSPageNumber.js.map +7 -0
  3. package/cjs/components/utils.js +39 -12
  4. package/cjs/components/utils.js.map +7 -0
  5. package/cjs/index.js +36 -11
  6. package/cjs/index.js.map +7 -0
  7. package/esm/DSPageNumber.js +87 -108
  8. package/esm/DSPageNumber.js.map +7 -0
  9. package/esm/components/utils.js +10 -7
  10. package/esm/components/utils.js.map +7 -0
  11. package/esm/index.js +7 -1
  12. package/esm/index.js.map +7 -0
  13. package/package.json +5 -5
  14. package/cjs/DSPageNumber.test.js +0 -48
  15. package/esm/DSPageNumber.test.js +0 -42
package/cjs/DSPageNumber.js CHANGED
@@ -1,159 +1,154 @@
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, {
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
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 DSPageNumber_exports = {};
29
+ __export(DSPageNumber_exports, {
30
+ DSPageNumber: () => DSPageNumber,
31
+ PageNumberWithSchema: () => PageNumberWithSchema,
32
+ default: () => DSPageNumber_default
33
+ });
34
+ var React = __toESM(require("react"));
35
+ var import_react = __toESM(require("react"));
36
+ var import_react_desc = require("react-desc");
37
+ var import_ds_classnames = require("@elliemae/ds-classnames");
38
+ var import_ds_icons = require("@elliemae/ds-icons");
39
+ var import_ds_button = __toESM(require("@elliemae/ds-button"));
40
+ var import_ds_form = require("@elliemae/ds-form");
41
+ var import_utils = require("./components/utils");
42
+ const blockName = "page-number-block";
43
+ const PageNumberInputContainer = (0, import_ds_classnames.aggregatedClasses)(import_ds_form.DSInputGroup)(blockName);
44
+ const DSPageNumber = ({
45
+ className,
46
+ disabled,
47
+ value,
48
+ onChange,
49
+ containerProps,
50
+ currentPage,
51
+ totalPages,
52
+ separator,
53
+ ...otherProps
54
+ }) => {
55
+ const safeTotal = (0, import_utils.cleanPage)(totalPages);
56
+ const ref = (0, import_react.useRef)(null);
57
+ const { cssClassName, classNameElement } = (0, import_ds_classnames.convertPropToCssClassName)("page-number", className, {
59
58
  disabled
60
59
  });
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);
60
+ const [page, setPage] = (0, import_react.useState)((0, import_utils.cleanPage)(currentPage) || 1);
61
+ const [size, setSize] = (0, import_react.useState)(null);
62
+ (0, import_react.useEffect)(() => {
63
+ const { width } = ref.current.getBoundingClientRect();
64
+ const calculatedWidth = (0, import_utils.lengthToSize)(width, page);
68
65
  setSize(calculatedWidth);
69
66
  }, [page, safeTotal]);
70
-
71
67
  function handleUpdateInput(e) {
72
- const newValue = utils.cleanPage(e.target.value);
73
- if (newValue > safeTotal || newValue === 0) return;
68
+ const newValue = (0, import_utils.cleanPage)(e.target.value);
69
+ if (newValue > safeTotal || newValue === 0)
70
+ return;
74
71
  setPage(newValue);
75
72
  onChange(newValue);
76
73
  }
77
-
78
74
  function handleIncrease() {
79
75
  const newValue = page ? parseInt(page, 10) + 1 : 1;
80
- if (newValue > safeTotal) return;
76
+ if (newValue > safeTotal)
77
+ return;
81
78
  setPage(newValue);
82
79
  onChange(newValue);
83
80
  }
84
-
85
81
  function handleDecrease() {
86
82
  const newValue = page ? parseInt(page, 10) - 1 : 1;
87
- if (newValue < 1) return;
83
+ if (newValue < 1)
84
+ return;
88
85
  setPage(newValue);
89
86
  onChange(newValue);
90
87
  }
91
-
92
- return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
88
+ return /* @__PURE__ */ import_react.default.createElement("div", {
93
89
  "data-testid": "ds-page-number",
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
- }));
90
+ className: `${cssClassName}`,
91
+ ...containerProps,
92
+ ...otherProps
93
+ }, /* @__PURE__ */ import_react.default.createElement(PageNumberInputContainer, null, /* @__PURE__ */ import_react.default.createElement("div", {
94
+ className: `${classNameElement("pages")}`
95
+ }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSInput, {
96
+ className: `${classNameElement("input")}`,
97
+ "data-testid": "page-number__current-page",
98
+ onChange: handleUpdateInput,
99
+ style: {
100
+ width: `${size}px`
101
+ },
102
+ value: page
103
+ }), /* @__PURE__ */ import_react.default.createElement("div", {
104
+ className: `${classNameElement("separator")}`
105
+ }, separator), /* @__PURE__ */ import_react.default.createElement("div", {
106
+ className: `${classNameElement("total")}`,
107
+ "data-testid": "page-number__total-pages"
108
+ }, totalPages), /* @__PURE__ */ import_react.default.createElement("div", {
109
+ ref,
110
+ className: `${classNameElement("ref")}`
111
+ })), /* @__PURE__ */ import_react.default.createElement("div", {
112
+ className: `${classNameElement("limiter")}`
113
+ }), /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
114
+ "aria-label": "dropdown-indicator",
115
+ buttonType: "text",
116
+ className: "dropdown-indicator",
117
+ "data-testid": "page-number__increase",
118
+ icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallUp, null),
119
+ onClick: handleIncrease
120
+ }), /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
121
+ "aria-label": "dropdown-indicator",
122
+ buttonType: "text",
123
+ className: "dropdown-indicator",
124
+ "data-testid": "page-number__decrease",
125
+ icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null),
126
+ onClick: handleDecrease
127
+ })));
132
128
  };
133
-
134
129
  const pageNumberProps = {
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('/')
130
+ className: import_react_desc.PropTypes.string.description("html class attribute"),
131
+ containerProps: import_react_desc.PropTypes.object.description("Set of Properties attached to the main container"),
132
+ disabled: import_react_desc.PropTypes.bool.description("Whether the component is disabled or not").defaultValue(false),
133
+ value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number, import_react_desc.PropTypes.object]).description("page number value"),
134
+ onChange: import_react_desc.PropTypes.func.description("function executed when the page number changes"),
135
+ currentPage: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Value of the current page"),
136
+ totalPages: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Amount of pages").defaultValue(1),
137
+ separator: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Separator between current page and total pages").defaultValue("/")
143
138
  };
144
- const PageNumberWithSchema = reactDesc.describe(DSPageNumber);
139
+ DSPageNumber.propTypes = pageNumberProps;
140
+ const PageNumberWithSchema = (0, import_react_desc.describe)(DSPageNumber);
145
141
  PageNumberWithSchema.propTypes = pageNumberProps;
146
142
  DSPageNumber.defaultProps = {
147
- className: '',
143
+ className: "",
148
144
  disabled: false,
149
145
  onChange: () => null,
150
146
  containerProps: {},
151
- value: undefined,
152
- currentPage: undefined,
147
+ value: void 0,
148
+ currentPage: void 0,
153
149
  totalPages: 1,
154
- separator: '/'
150
+ separator: "/"
155
151
  };
156
-
157
- exports.DSPageNumber = DSPageNumber;
158
- exports.PageNumberWithSchema = PageNumberWithSchema;
159
- exports["default"] = DSPageNumber;
152
+ var DSPageNumber_default = DSPageNumber;
153
+ module.exports = __toCommonJS(DSPageNumber_exports);
154
+ //# sourceMappingURL=DSPageNumber.js.map
package/cjs/DSPageNumber.js.map ADDED
@@ -0,0 +1,7 @@
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
+ }
package/cjs/components/utils.js CHANGED
@@ -1,14 +1,41 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/es.string.replace.js');
6
-
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
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"));
7
34
  const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
8
- const cleanPage = value => {
9
- if (!value || value === '' || isNaN(parseInt(value))) return '';
10
- return parseInt(String(value || 1).replace(/\D/g, ''), 10);
35
+ const cleanPage = (value) => {
36
+ if (!value || value === "" || isNaN(parseInt(value)))
37
+ return "";
38
+ return parseInt(String(value || 1).replace(/\D/g, ""), 10);
11
39
  };
12
-
13
- exports.cleanPage = cleanPage;
14
- exports.lengthToSize = lengthToSize;
40
+ module.exports = __toCommonJS(utils_exports);
41
+ //# sourceMappingURL=utils.js.map
package/cjs/components/utils.js.map ADDED
@@ -0,0 +1,7 @@
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 CHANGED
@@ -1,11 +1,36 @@
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;
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
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 src_exports = {};
29
+ __export(src_exports, {
30
+ default: () => import_DSPageNumber.default
31
+ });
32
+ var React = __toESM(require("react"));
33
+ __reExport(src_exports, require("./DSPageNumber"));
34
+ var import_DSPageNumber = __toESM(require("./DSPageNumber"));
35
+ module.exports = __toCommonJS(src_exports);
36
+ //# sourceMappingURL=index.js.map
package/cjs/index.js.map ADDED
@@ -0,0 +1,7 @@
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 CHANGED
@@ -1,146 +1,125 @@
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';
1
+ import * as React from "react";
2
+ import React2, { useState, useRef, useEffect } from "react";
3
+ import { describe, PropTypes } from "react-desc";
4
+ import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
5
+ import { ChevronSmallDown, ChevronSmallUp } from "@elliemae/ds-icons";
6
+ import DSButton from "@elliemae/ds-button";
7
+ import { DSInput, DSInputGroup } from "@elliemae/ds-form";
8
+ import { lengthToSize, cleanPage } from "./components/utils";
9
+ const blockName = "page-number-block";
27
10
  const PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);
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
-
11
+ const DSPageNumber = ({
12
+ className,
13
+ disabled,
14
+ value,
15
+ onChange,
16
+ containerProps,
17
+ currentPage,
18
+ totalPages,
19
+ separator,
20
+ ...otherProps
21
+ }) => {
42
22
  const safeTotal = cleanPage(totalPages);
43
23
  const ref = useRef(null);
44
- const {
45
- cssClassName,
46
- classNameElement
47
- } = convertPropToCssClassName('page-number', className, {
24
+ const { cssClassName, classNameElement } = convertPropToCssClassName("page-number", className, {
48
25
  disabled
49
26
  });
50
27
  const [page, setPage] = useState(cleanPage(currentPage) || 1);
51
28
  const [size, setSize] = useState(null);
52
29
  useEffect(() => {
53
- const {
54
- width
55
- } = ref.current.getBoundingClientRect();
30
+ const { width } = ref.current.getBoundingClientRect();
56
31
  const calculatedWidth = lengthToSize(width, page);
57
32
  setSize(calculatedWidth);
58
33
  }, [page, safeTotal]);
59
-
60
34
  function handleUpdateInput(e) {
61
35
  const newValue = cleanPage(e.target.value);
62
- if (newValue > safeTotal || newValue === 0) return;
36
+ if (newValue > safeTotal || newValue === 0)
37
+ return;
63
38
  setPage(newValue);
64
39
  onChange(newValue);
65
40
  }
66
-
67
41
  function handleIncrease() {
68
42
  const newValue = page ? parseInt(page, 10) + 1 : 1;
69
- if (newValue > safeTotal) return;
43
+ if (newValue > safeTotal)
44
+ return;
70
45
  setPage(newValue);
71
46
  onChange(newValue);
72
47
  }
73
-
74
48
  function handleDecrease() {
75
49
  const newValue = page ? parseInt(page, 10) - 1 : 1;
76
- if (newValue < 1) return;
50
+ if (newValue < 1)
51
+ return;
77
52
  setPage(newValue);
78
53
  onChange(newValue);
79
54
  }
80
-
81
- return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
55
+ return /* @__PURE__ */ React2.createElement("div", {
82
56
  "data-testid": "ds-page-number",
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
- }));
57
+ className: `${cssClassName}`,
58
+ ...containerProps,
59
+ ...otherProps
60
+ }, /* @__PURE__ */ React2.createElement(PageNumberInputContainer, null, /* @__PURE__ */ React2.createElement("div", {
61
+ className: `${classNameElement("pages")}`
62
+ }, /* @__PURE__ */ React2.createElement(DSInput, {
63
+ className: `${classNameElement("input")}`,
64
+ "data-testid": "page-number__current-page",
65
+ onChange: handleUpdateInput,
66
+ style: {
67
+ width: `${size}px`
68
+ },
69
+ value: page
70
+ }), /* @__PURE__ */ React2.createElement("div", {
71
+ className: `${classNameElement("separator")}`
72
+ }, separator), /* @__PURE__ */ React2.createElement("div", {
73
+ className: `${classNameElement("total")}`,
74
+ "data-testid": "page-number__total-pages"
75
+ }, totalPages), /* @__PURE__ */ React2.createElement("div", {
76
+ ref,
77
+ className: `${classNameElement("ref")}`
78
+ })), /* @__PURE__ */ React2.createElement("div", {
79
+ className: `${classNameElement("limiter")}`
80
+ }), /* @__PURE__ */ React2.createElement(DSButton, {
81
+ "aria-label": "dropdown-indicator",
82
+ buttonType: "text",
83
+ className: "dropdown-indicator",
84
+ "data-testid": "page-number__increase",
85
+ icon: /* @__PURE__ */ React2.createElement(ChevronSmallUp, null),
86
+ onClick: handleIncrease
87
+ }), /* @__PURE__ */ React2.createElement(DSButton, {
88
+ "aria-label": "dropdown-indicator",
89
+ buttonType: "text",
90
+ className: "dropdown-indicator",
91
+ "data-testid": "page-number__decrease",
92
+ icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null),
93
+ onClick: handleDecrease
94
+ })));
121
95
  };
122
-
123
96
  const pageNumberProps = {
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('/')
97
+ className: PropTypes.string.description("html class attribute"),
98
+ containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
99
+ disabled: PropTypes.bool.description("Whether the component is disabled or not").defaultValue(false),
100
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description("page number value"),
101
+ onChange: PropTypes.func.description("function executed when the page number changes"),
102
+ currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Value of the current page"),
103
+ totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Amount of pages").defaultValue(1),
104
+ separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Separator between current page and total pages").defaultValue("/")
132
105
  };
106
+ DSPageNumber.propTypes = pageNumberProps;
133
107
  const PageNumberWithSchema = describe(DSPageNumber);
134
108
  PageNumberWithSchema.propTypes = pageNumberProps;
135
109
  DSPageNumber.defaultProps = {
136
- className: '',
110
+ className: "",
137
111
  disabled: false,
138
112
  onChange: () => null,
139
113
  containerProps: {},
140
- value: undefined,
141
- currentPage: undefined,
114
+ value: void 0,
115
+ currentPage: void 0,
142
116
  totalPages: 1,
143
- separator: '/'
117
+ separator: "/"
144
118
  };
145
-
146
- export { DSPageNumber, PageNumberWithSchema, DSPageNumber as default };
119
+ var DSPageNumber_default = DSPageNumber;
120
+ export {
121
+ DSPageNumber,
122
+ PageNumberWithSchema,
123
+ DSPageNumber_default as default
124
+ };
125
+ //# sourceMappingURL=DSPageNumber.js.map
package/esm/DSPageNumber.js.map ADDED
@@ -0,0 +1,7 @@
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": "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",
6
+ "names": []
7
+ }
package/esm/components/utils.js CHANGED
@@ -1,9 +1,12 @@
1
- import 'core-js/modules/es.string.replace.js';
2
-
1
+ import * as React from "react";
3
2
  const lengthToSize = (referenceWidth, value) => referenceWidth + referenceWidth / 7 * String(value).length;
4
- const cleanPage = value => {
5
- if (!value || value === '' || isNaN(parseInt(value))) return '';
6
- return parseInt(String(value || 1).replace(/\D/g, ''), 10);
3
+ const cleanPage = (value) => {
4
+ if (!value || value === "" || isNaN(parseInt(value)))
5
+ return "";
6
+ return parseInt(String(value || 1).replace(/\D/g, ""), 10);
7
7
  };
8
-
9
- export { cleanPage, lengthToSize };
8
+ export {
9
+ cleanPage,
10
+ lengthToSize
11
+ };
12
+ //# sourceMappingURL=utils.js.map
package/esm/components/utils.js.map ADDED
@@ -0,0 +1,7 @@
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 CHANGED
@@ -1 +1,7 @@
1
- export { DSPageNumber, PageNumberWithSchema, DSPageNumber as default } from './DSPageNumber.js';
1
+ import * as React from "react";
2
+ export * from "./DSPageNumber";
3
+ import { default as default2 } from "./DSPageNumber";
4
+ export {
5
+ default2 as default
6
+ };
7
+ //# sourceMappingURL=index.js.map
package/esm/index.js.map ADDED
@@ -0,0 +1,7 @@
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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-page-number",
3
- "version": "2.2.1",
3
+ "version": "2.3.0-alpha.4",
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.1",
44
- "@elliemae/ds-classnames": "2.2.1",
45
- "@elliemae/ds-form": "2.2.1",
46
- "@elliemae/ds-icons": "2.2.1",
43
+ "@elliemae/ds-button": "2.3.0-alpha.4",
44
+ "@elliemae/ds-classnames": "2.3.0-alpha.4",
45
+ "@elliemae/ds-form": "2.3.0-alpha.4",
46
+ "@elliemae/ds-icons": "2.3.0-alpha.4",
47
47
  "react-desc": "~4.1.3"
48
48
  },
49
49
  "devDependencies": {
package/cjs/DSPageNumber.test.js DELETED
@@ -1,48 +0,0 @@
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/esm/DSPageNumber.test.js DELETED
@@ -1,42 +0,0 @@
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
- });