superdesk-ui-framework 5.1.0 → 5.1.1
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/.github/workflows/publish-to-npm.yml +1 -1
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_load-more-indicator.scss +15 -0
- package/app/styles/components/_sd-loader.scss +9 -0
- package/app-typescript/components/Lists/LoadMoreIndicator.tsx +15 -20
- package/dist/components/LoadMoreIndicator.tsx +48 -52
- package/dist/examples.bundle.js +45 -44
- package/dist/superdesk-ui.bundle.css +19 -0
- package/dist/superdesk-ui.bundle.js +17 -13
- package/package.json +1 -1
- package/react/components/Lists/LoadMoreIndicator.d.ts +1 -1
- package/react/components/Lists/LoadMoreIndicator.js +17 -13
|
@@ -45,7 +45,7 @@ jobs:
|
|
|
45
45
|
uses: softprops/action-gh-release@v1
|
|
46
46
|
with:
|
|
47
47
|
tag_name: v${{ steps.package-version.outputs.version }}
|
|
48
|
-
name:
|
|
48
|
+
name: v${{ steps.package-version.outputs.version }}
|
|
49
49
|
generate_release_notes: true
|
|
50
50
|
body: |
|
|
51
51
|
Published to npm: https://www.npmjs.com/package/superdesk-ui-framework/v/${{ steps.package-version.outputs.version }}
|
package/app/styles/app.scss
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.load-more-indicator {
|
|
2
|
+
display: contents;
|
|
3
|
+
.sd-loader {
|
|
4
|
+
z-index: 10;
|
|
5
|
+
}
|
|
6
|
+
.load-more-indicator__text {
|
|
7
|
+
z-index: 11;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
.load-more-indicator__text {
|
|
11
|
+
font-size: var(--text-size-small);
|
|
12
|
+
color: var(--color-text-subdued);
|
|
13
|
+
position: relative;
|
|
14
|
+
padding-left: 0.5rem;
|
|
15
|
+
}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
|
|
4
|
+
const sizeClassMap: Record<'small' | 'medium' | 'large', string> = {
|
|
5
|
+
small: 'sd-loader--small',
|
|
6
|
+
medium: 'sd-loader--medium',
|
|
7
|
+
large: 'sd-loader--large',
|
|
8
|
+
};
|
|
2
9
|
|
|
3
10
|
interface IProps {
|
|
4
11
|
/**
|
|
@@ -29,7 +36,7 @@ interface IProps {
|
|
|
29
36
|
|
|
30
37
|
/**
|
|
31
38
|
* Size of the loader
|
|
32
|
-
* @default '
|
|
39
|
+
* @default 'medium'
|
|
33
40
|
*/
|
|
34
41
|
size?: 'small' | 'medium' | 'large';
|
|
35
42
|
|
|
@@ -63,7 +70,7 @@ export const LoadMoreIndicator: React.FC<IProps> = ({
|
|
|
63
70
|
totalCount,
|
|
64
71
|
loadingText = 'Loading more...',
|
|
65
72
|
showProgress = true,
|
|
66
|
-
size = '
|
|
73
|
+
size = 'medium',
|
|
67
74
|
className,
|
|
68
75
|
'data-test-id': testId = 'load-more-indicator',
|
|
69
76
|
}) => {
|
|
@@ -71,26 +78,13 @@ export const LoadMoreIndicator: React.FC<IProps> = ({
|
|
|
71
78
|
return null;
|
|
72
79
|
}
|
|
73
80
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (size === 'small') {
|
|
77
|
-
loaderClassName = 'sd-loader sd-loader--small';
|
|
78
|
-
} else if (size === 'large') {
|
|
79
|
-
loaderClassName = 'sd-loader sd-loader--large';
|
|
80
|
-
}
|
|
81
|
+
const loaderClassName = `sd-loader ${sizeClassMap[size]}`;
|
|
82
|
+
const containerClassName = classNames('sd-list-item', 'sd-list-item--no-hover', 'px-1', 'items-center', className);
|
|
81
83
|
|
|
82
84
|
return (
|
|
83
|
-
<li
|
|
84
|
-
className=
|
|
85
|
-
|
|
86
|
-
data-test-id={testId}
|
|
87
|
-
role="status"
|
|
88
|
-
aria-live="polite"
|
|
89
|
-
aria-busy="true"
|
|
90
|
-
>
|
|
91
|
-
<div className="sd-flex-no-grow sd-flex-v-center sd-flex-h-center sd-padding-x--1">
|
|
92
|
-
<div className={`${loaderClassName}`} />
|
|
93
|
-
<span className="sd-text__normal">
|
|
85
|
+
<li className={containerClassName} data-test-id={testId} role="status" aria-live="polite" aria-busy="true">
|
|
86
|
+
<div className="load-more-indicator">
|
|
87
|
+
<span className="load-more-indicator__text">
|
|
94
88
|
{loadingText}
|
|
95
89
|
{showProgress && currentCount != null && totalCount != null && (
|
|
96
90
|
<>
|
|
@@ -99,6 +93,7 @@ export const LoadMoreIndicator: React.FC<IProps> = ({
|
|
|
99
93
|
</>
|
|
100
94
|
)}
|
|
101
95
|
</span>
|
|
96
|
+
<div className={loaderClassName} />
|
|
102
97
|
</div>
|
|
103
98
|
</li>
|
|
104
99
|
);
|
|
@@ -39,20 +39,18 @@ export default class LoadMoreIndicatorDoc extends React.Component<{}, IState> {
|
|
|
39
39
|
<Markup.ReactMarkup>
|
|
40
40
|
<Markup.ReactMarkupPreview>
|
|
41
41
|
<p className="docs-page__paragraph">// Default with progress counter</p>
|
|
42
|
-
<
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</ul>
|
|
55
|
-
</div>
|
|
42
|
+
<ul className="sd-list-item-group sd-shadow--z1">
|
|
43
|
+
<li className="sd-list-item">
|
|
44
|
+
<div className="sd-list-item__column">Item 1</div>
|
|
45
|
+
</li>
|
|
46
|
+
<li className="sd-list-item">
|
|
47
|
+
<div className="sd-list-item__column">Item 2</div>
|
|
48
|
+
</li>
|
|
49
|
+
<li className="sd-list-item">
|
|
50
|
+
<div className="sd-list-item__column">Item 3</div>
|
|
51
|
+
</li>
|
|
52
|
+
<LoadMoreIndicator loading={this.state.showExample1} currentCount={3} totalCount={10} />
|
|
53
|
+
</ul>
|
|
56
54
|
</Markup.ReactMarkupPreview>
|
|
57
55
|
<Markup.ReactMarkupCode>
|
|
58
56
|
{`
|
|
@@ -72,23 +70,22 @@ export default class LoadMoreIndicatorDoc extends React.Component<{}, IState> {
|
|
|
72
70
|
|
|
73
71
|
<Markup.ReactMarkup>
|
|
74
72
|
<Markup.ReactMarkupPreview>
|
|
75
|
-
<p className="docs-page__paragraph">// Without progress counter</p>
|
|
76
|
-
<
|
|
77
|
-
<
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
</div>
|
|
73
|
+
<p className="docs-page__paragraph">// Without progress counter & loader size (small)</p>
|
|
74
|
+
<ul className="sd-list-item-group sd-shadow--z1">
|
|
75
|
+
<li className="sd-list-item">
|
|
76
|
+
<div className="sd-list-item__column">Item 1</div>
|
|
77
|
+
</li>
|
|
78
|
+
<li className="sd-list-item">
|
|
79
|
+
<div className="sd-list-item__column">Item 2</div>
|
|
80
|
+
</li>
|
|
81
|
+
<LoadMoreIndicator
|
|
82
|
+
loading={this.state.showExample2}
|
|
83
|
+
currentCount={2}
|
|
84
|
+
totalCount={10}
|
|
85
|
+
showProgress={false}
|
|
86
|
+
size="small"
|
|
87
|
+
/>
|
|
88
|
+
</ul>
|
|
92
89
|
</Markup.ReactMarkupPreview>
|
|
93
90
|
<Markup.ReactMarkupCode>
|
|
94
91
|
{`
|
|
@@ -97,6 +94,7 @@ export default class LoadMoreIndicatorDoc extends React.Component<{}, IState> {
|
|
|
97
94
|
currentCount={2}
|
|
98
95
|
totalCount={10}
|
|
99
96
|
showProgress={false}
|
|
97
|
+
size="small"
|
|
100
98
|
/>
|
|
101
99
|
`}
|
|
102
100
|
</Markup.ReactMarkupCode>
|
|
@@ -104,21 +102,19 @@ export default class LoadMoreIndicatorDoc extends React.Component<{}, IState> {
|
|
|
104
102
|
|
|
105
103
|
<Markup.ReactMarkup>
|
|
106
104
|
<Markup.ReactMarkupPreview>
|
|
107
|
-
<p className="docs-page__paragraph">// Custom text
|
|
108
|
-
<
|
|
109
|
-
<
|
|
110
|
-
<
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
</ul>
|
|
121
|
-
</div>
|
|
105
|
+
<p className="docs-page__paragraph">// Custom text & loader size (large)</p>
|
|
106
|
+
<ul className="sd-list-item-group sd-shadow--z1">
|
|
107
|
+
<li className="sd-list-item">
|
|
108
|
+
<div className="sd-list-item__column">Item 1</div>
|
|
109
|
+
</li>
|
|
110
|
+
<LoadMoreIndicator
|
|
111
|
+
loading={this.state.showExample3}
|
|
112
|
+
currentCount={1}
|
|
113
|
+
totalCount={5}
|
|
114
|
+
loadingText="Fetching more items..."
|
|
115
|
+
size="large"
|
|
116
|
+
/>
|
|
117
|
+
</ul>
|
|
122
118
|
</Markup.ReactMarkupPreview>
|
|
123
119
|
<Markup.ReactMarkupCode>
|
|
124
120
|
{`
|
|
@@ -127,7 +123,7 @@ export default class LoadMoreIndicatorDoc extends React.Component<{}, IState> {
|
|
|
127
123
|
currentCount={1}
|
|
128
124
|
totalCount={5}
|
|
129
125
|
loadingText="Fetching more items..."
|
|
130
|
-
size="
|
|
126
|
+
size="large"
|
|
131
127
|
/>
|
|
132
128
|
`}
|
|
133
129
|
</Markup.ReactMarkupCode>
|
|
@@ -174,7 +170,7 @@ export default class LoadMoreIndicatorDoc extends React.Component<{}, IState> {
|
|
|
174
170
|
name="size"
|
|
175
171
|
isRequired={false}
|
|
176
172
|
type="'small' | 'medium' | 'large'"
|
|
177
|
-
default="'
|
|
173
|
+
default="'medium'"
|
|
178
174
|
description="Size of the loader spinner"
|
|
179
175
|
/>
|
|
180
176
|
<Prop
|
|
@@ -234,14 +230,14 @@ export default class LoadMoreIndicatorDoc extends React.Component<{}, IState> {
|
|
|
234
230
|
<p className="docs-page__paragraph">
|
|
235
231
|
The component includes proper ARIA attributes for screen readers:
|
|
236
232
|
</p>
|
|
237
|
-
<ul className="docs-
|
|
238
|
-
<li>
|
|
233
|
+
<ul className="docs-page__unordered-list">
|
|
234
|
+
<li className="py-0-5">
|
|
239
235
|
<code>role="status"</code> - Indicates the element is a status message
|
|
240
236
|
</li>
|
|
241
|
-
<li>
|
|
237
|
+
<li className="py-0-5">
|
|
242
238
|
<code>aria-live="polite"</code> - Screen readers will announce updates when convenient
|
|
243
239
|
</li>
|
|
244
|
-
<li>
|
|
240
|
+
<li className="py-0-5">
|
|
245
241
|
<code>aria-busy="true"</code> - Indicates the section is being updated
|
|
246
242
|
</li>
|
|
247
243
|
</ul>
|
package/dist/examples.bundle.js
CHANGED
|
@@ -95108,9 +95108,18 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
95108
95108
|
return result;
|
|
95109
95109
|
};
|
|
95110
95110
|
})();
|
|
95111
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
95112
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
95113
|
+
};
|
|
95111
95114
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
95112
95115
|
exports.LoadMoreIndicator = void 0;
|
|
95113
95116
|
var React = __importStar(__webpack_require__(0));
|
|
95117
|
+
var classnames_1 = __importDefault(__webpack_require__(3));
|
|
95118
|
+
var sizeClassMap = {
|
|
95119
|
+
small: 'sd-loader--small',
|
|
95120
|
+
medium: 'sd-loader--medium',
|
|
95121
|
+
large: 'sd-loader--large',
|
|
95122
|
+
};
|
|
95114
95123
|
/**
|
|
95115
95124
|
* A loading indicator component designed to be appended at the end of scrollable lists
|
|
95116
95125
|
* during infinite scroll/pagination. Shows a spinner with optional progress counter.
|
|
@@ -95128,21 +95137,15 @@ var React = __importStar(__webpack_require__(0));
|
|
|
95128
95137
|
* ```
|
|
95129
95138
|
*/
|
|
95130
95139
|
var LoadMoreIndicator = function (_a) {
|
|
95131
|
-
var loading = _a.loading, currentCount = _a.currentCount, totalCount = _a.totalCount, _b = _a.loadingText, loadingText = _b === void 0 ? 'Loading more...' : _b, _c = _a.showProgress, showProgress = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? '
|
|
95140
|
+
var loading = _a.loading, currentCount = _a.currentCount, totalCount = _a.totalCount, _b = _a.loadingText, loadingText = _b === void 0 ? 'Loading more...' : _b, _c = _a.showProgress, showProgress = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, className = _a.className, _e = _a["data-test-id"], testId = _e === void 0 ? 'load-more-indicator' : _e;
|
|
95132
95141
|
if (!loading) {
|
|
95133
95142
|
return null;
|
|
95134
95143
|
}
|
|
95135
|
-
var loaderClassName =
|
|
95136
|
-
|
|
95137
|
-
|
|
95138
|
-
|
|
95139
|
-
|
|
95140
|
-
loaderClassName = 'sd-loader sd-loader--large';
|
|
95141
|
-
}
|
|
95142
|
-
return (React.createElement("li", { className: "sd-list-item sd-list-item--no-hover ".concat(className || '').trim(), style: { padding: '1rem', textAlign: 'center' }, "data-test-id": testId, role: "status", "aria-live": "polite", "aria-busy": "true" },
|
|
95143
|
-
React.createElement("div", { className: "sd-flex-no-grow sd-flex-v-center sd-flex-h-center sd-padding-x--1" },
|
|
95144
|
-
React.createElement("div", { className: "".concat(loaderClassName) }),
|
|
95145
|
-
React.createElement("span", { className: "sd-text__normal" },
|
|
95144
|
+
var loaderClassName = "sd-loader ".concat(sizeClassMap[size]);
|
|
95145
|
+
var containerClassName = (0, classnames_1.default)('sd-list-item', 'sd-list-item--no-hover', 'px-1', 'items-center', className);
|
|
95146
|
+
return (React.createElement("li", { className: containerClassName, "data-test-id": testId, role: "status", "aria-live": "polite", "aria-busy": "true" },
|
|
95147
|
+
React.createElement("div", { className: "load-more-indicator" },
|
|
95148
|
+
React.createElement("span", { className: "load-more-indicator__text" },
|
|
95146
95149
|
loadingText,
|
|
95147
95150
|
showProgress && currentCount != null && totalCount != null && (React.createElement(React.Fragment, null,
|
|
95148
95151
|
' ',
|
|
@@ -95150,7 +95153,8 @@ var LoadMoreIndicator = function (_a) {
|
|
|
95150
95153
|
currentCount,
|
|
95151
95154
|
" of ",
|
|
95152
95155
|
totalCount,
|
|
95153
|
-
")")))
|
|
95156
|
+
")"))),
|
|
95157
|
+
React.createElement("div", { className: loaderClassName }))));
|
|
95154
95158
|
};
|
|
95155
95159
|
exports.LoadMoreIndicator = LoadMoreIndicator;
|
|
95156
95160
|
|
|
@@ -185118,36 +185122,33 @@ var LoadMoreIndicatorDoc = /** @class */ (function (_super) {
|
|
|
185118
185122
|
React.createElement(Markup.ReactMarkup, null,
|
|
185119
185123
|
React.createElement(Markup.ReactMarkupPreview, null,
|
|
185120
185124
|
React.createElement("p", { className: "docs-page__paragraph" }, "// Default with progress counter"),
|
|
185121
|
-
React.createElement("
|
|
185122
|
-
React.createElement("
|
|
185123
|
-
React.createElement("
|
|
185124
|
-
|
|
185125
|
-
React.createElement("
|
|
185126
|
-
|
|
185127
|
-
React.createElement("
|
|
185128
|
-
|
|
185129
|
-
React.createElement(app_typescript_1.LoadMoreIndicator, { loading: this.state.showExample1, currentCount: 3, totalCount: 10 })))),
|
|
185125
|
+
React.createElement("ul", { className: "sd-list-item-group sd-shadow--z1" },
|
|
185126
|
+
React.createElement("li", { className: "sd-list-item" },
|
|
185127
|
+
React.createElement("div", { className: "sd-list-item__column" }, "Item 1")),
|
|
185128
|
+
React.createElement("li", { className: "sd-list-item" },
|
|
185129
|
+
React.createElement("div", { className: "sd-list-item__column" }, "Item 2")),
|
|
185130
|
+
React.createElement("li", { className: "sd-list-item" },
|
|
185131
|
+
React.createElement("div", { className: "sd-list-item__column" }, "Item 3")),
|
|
185132
|
+
React.createElement(app_typescript_1.LoadMoreIndicator, { loading: this.state.showExample1, currentCount: 3, totalCount: 10 }))),
|
|
185130
185133
|
React.createElement(Markup.ReactMarkupCode, null, "\n <ul className=\"sd-list-item-group\">\n <li className=\"sd-list-item\">...</li>\n <li className=\"sd-list-item\">...</li>\n <li className=\"sd-list-item\">...</li>\n <LoadMoreIndicator\n loading={true}\n currentCount={3}\n totalCount={10}\n />\n </ul>\n ")),
|
|
185131
185134
|
React.createElement(Markup.ReactMarkup, null,
|
|
185132
185135
|
React.createElement(Markup.ReactMarkupPreview, null,
|
|
185133
|
-
React.createElement("p", { className: "docs-page__paragraph" }, "// Without progress counter"),
|
|
185134
|
-
React.createElement("
|
|
185135
|
-
React.createElement("
|
|
185136
|
-
React.createElement("
|
|
185137
|
-
|
|
185138
|
-
React.createElement("
|
|
185139
|
-
|
|
185140
|
-
|
|
185141
|
-
React.createElement(Markup.ReactMarkupCode, null, "\n <LoadMoreIndicator\n loading={true}\n currentCount={2}\n totalCount={10}\n showProgress={false}\n />\n ")),
|
|
185136
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "// Without progress counter & loader size (small)"),
|
|
185137
|
+
React.createElement("ul", { className: "sd-list-item-group sd-shadow--z1" },
|
|
185138
|
+
React.createElement("li", { className: "sd-list-item" },
|
|
185139
|
+
React.createElement("div", { className: "sd-list-item__column" }, "Item 1")),
|
|
185140
|
+
React.createElement("li", { className: "sd-list-item" },
|
|
185141
|
+
React.createElement("div", { className: "sd-list-item__column" }, "Item 2")),
|
|
185142
|
+
React.createElement(app_typescript_1.LoadMoreIndicator, { loading: this.state.showExample2, currentCount: 2, totalCount: 10, showProgress: false, size: "small" }))),
|
|
185143
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n <LoadMoreIndicator\n loading={true}\n currentCount={2}\n totalCount={10}\n showProgress={false}\n size=\"small\"\n />\n ")),
|
|
185142
185144
|
React.createElement(Markup.ReactMarkup, null,
|
|
185143
185145
|
React.createElement(Markup.ReactMarkupPreview, null,
|
|
185144
|
-
React.createElement("p", { className: "docs-page__paragraph" }, "// Custom text
|
|
185145
|
-
React.createElement("
|
|
185146
|
-
React.createElement("
|
|
185147
|
-
React.createElement("
|
|
185148
|
-
|
|
185149
|
-
|
|
185150
|
-
React.createElement(Markup.ReactMarkupCode, null, "\n <LoadMoreIndicator\n loading={true}\n currentCount={1}\n totalCount={5}\n loadingText=\"Fetching more items...\"\n size=\"medium\"\n />\n ")),
|
|
185146
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "// Custom text & loader size (large)"),
|
|
185147
|
+
React.createElement("ul", { className: "sd-list-item-group sd-shadow--z1" },
|
|
185148
|
+
React.createElement("li", { className: "sd-list-item" },
|
|
185149
|
+
React.createElement("div", { className: "sd-list-item__column" }, "Item 1")),
|
|
185150
|
+
React.createElement(app_typescript_1.LoadMoreIndicator, { loading: this.state.showExample3, currentCount: 1, totalCount: 5, loadingText: "Fetching more items...", size: "large" }))),
|
|
185151
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n <LoadMoreIndicator\n loading={true}\n currentCount={1}\n totalCount={5}\n loadingText=\"Fetching more items...\"\n size=\"large\"\n />\n ")),
|
|
185151
185152
|
React.createElement("h3", { className: "docs-page__h3" }, "Props"),
|
|
185152
185153
|
React.createElement(app_typescript_1.PropsList, null,
|
|
185153
185154
|
React.createElement(app_typescript_1.Prop, { name: "loading", isRequired: true, type: "boolean", default: "/", description: "Whether the loading indicator should be visible" }),
|
|
@@ -185155,7 +185156,7 @@ var LoadMoreIndicatorDoc = /** @class */ (function (_super) {
|
|
|
185155
185156
|
React.createElement(app_typescript_1.Prop, { name: "totalCount", isRequired: true, type: "number", default: "/", description: "Total number of items available" }),
|
|
185156
185157
|
React.createElement(app_typescript_1.Prop, { name: "loadingText", isRequired: false, type: "string", default: "'Loading more...'", description: "Custom loading text" }),
|
|
185157
185158
|
React.createElement(app_typescript_1.Prop, { name: "showProgress", isRequired: false, type: "boolean", default: "true", description: "Whether to show the progress counter (e.g., '25 of 100')" }),
|
|
185158
|
-
React.createElement(app_typescript_1.Prop, { name: "size", isRequired: false, type: "'small' | 'medium' | 'large'", default: "'
|
|
185159
|
+
React.createElement(app_typescript_1.Prop, { name: "size", isRequired: false, type: "'small' | 'medium' | 'large'", default: "'medium'", description: "Size of the loader spinner" }),
|
|
185159
185160
|
React.createElement(app_typescript_1.Prop, { name: "className", isRequired: false, type: "string", default: "/", description: "Custom className for the container" }),
|
|
185160
185161
|
React.createElement(app_typescript_1.Prop, { name: "data-test-id", isRequired: false, type: "string", default: "'load-more-indicator'", description: "Test ID for testing purposes" })),
|
|
185161
185162
|
React.createElement("h3", { className: "docs-page__h3" }, "Usage with Infinite Scroll"),
|
|
@@ -185163,14 +185164,14 @@ var LoadMoreIndicatorDoc = /** @class */ (function (_super) {
|
|
|
185163
185164
|
React.createElement(Markup.ReactMarkupCode, null, "\n class MyListComponent extends React.Component {\n state = { isNextPageLoading: false };\n\n handleScroll = (event) => {\n if (this.state.isNextPageLoading) return;\n\n const node = event.target;\n if (node.scrollTop + node.offsetHeight + 200 >= node.scrollHeight) {\n this.setState({ isNextPageLoading: true });\n this.props.loadMore()\n .finally(() => this.setState({ isNextPageLoading: false }));\n }\n };\n\n render() {\n return (\n <ul onScroll={this.handleScroll}>\n {this.props.items.map(item => <li key={item.id}>{item.name}</li>)}\n <LoadMoreIndicator\n loading={this.state.isNextPageLoading}\n currentCount={this.props.items.length}\n totalCount={this.props.totalCount}\n />\n </ul>\n );\n }\n }\n "),
|
|
185164
185165
|
React.createElement("h3", { className: "docs-page__h3" }, "Accessibility"),
|
|
185165
185166
|
React.createElement("p", { className: "docs-page__paragraph" }, "The component includes proper ARIA attributes for screen readers:"),
|
|
185166
|
-
React.createElement("ul", { className: "docs-
|
|
185167
|
-
React.createElement("li",
|
|
185167
|
+
React.createElement("ul", { className: "docs-page__unordered-list" },
|
|
185168
|
+
React.createElement("li", { className: "py-0-5" },
|
|
185168
185169
|
React.createElement("code", null, "role=\"status\""),
|
|
185169
185170
|
" - Indicates the element is a status message"),
|
|
185170
|
-
React.createElement("li",
|
|
185171
|
+
React.createElement("li", { className: "py-0-5" },
|
|
185171
185172
|
React.createElement("code", null, "aria-live=\"polite\""),
|
|
185172
185173
|
" - Screen readers will announce updates when convenient"),
|
|
185173
|
-
React.createElement("li",
|
|
185174
|
+
React.createElement("li", { className: "py-0-5" },
|
|
185174
185175
|
React.createElement("code", null, "aria-busy=\"true\""),
|
|
185175
185176
|
" - Indicates the section is being updated"))));
|
|
185176
185177
|
};
|
|
@@ -196536,7 +196537,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
196536
196537
|
/* 1055 */
|
|
196537
196538
|
/***/ (function(module, exports) {
|
|
196538
196539
|
|
|
196539
|
-
module.exports = {"name":"superdesk-ui-framework","version":"5.1.
|
|
196540
|
+
module.exports = {"name":"superdesk-ui-framework","version":"5.1.1","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic","Konstantin Markov","Helmy Giacoman"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"^5.8.3","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-16","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
|
|
196540
196541
|
|
|
196541
196542
|
/***/ }),
|
|
196542
196543
|
/* 1056 */
|
|
@@ -35504,6 +35504,12 @@ textarea.sd-media-carousel__media-title {
|
|
|
35504
35504
|
inset-block-end: 0;
|
|
35505
35505
|
inset-inline-start: 0;
|
|
35506
35506
|
z-index: 99999; }
|
|
35507
|
+
.sd-loader.sd-loader--small {
|
|
35508
|
+
background-size: 30px; }
|
|
35509
|
+
.sd-loader.sd-loader--medium {
|
|
35510
|
+
background-size: 40px; }
|
|
35511
|
+
.sd-loader.sd-loader--large {
|
|
35512
|
+
background-size: 60px; }
|
|
35507
35513
|
|
|
35508
35514
|
.red--100 {
|
|
35509
35515
|
background-color: #fde4e2; }
|
|
@@ -39104,6 +39110,19 @@ textarea.sd-media-carousel__media-title {
|
|
|
39104
39110
|
grid-template-rows: 1fr;
|
|
39105
39111
|
gap: var(--gap-1); }
|
|
39106
39112
|
|
|
39113
|
+
.load-more-indicator {
|
|
39114
|
+
display: contents; }
|
|
39115
|
+
.load-more-indicator .sd-loader {
|
|
39116
|
+
z-index: 10; }
|
|
39117
|
+
.load-more-indicator .load-more-indicator__text {
|
|
39118
|
+
z-index: 11; }
|
|
39119
|
+
|
|
39120
|
+
.load-more-indicator__text {
|
|
39121
|
+
font-size: var(--text-size-small);
|
|
39122
|
+
color: var(--color-text-subdued);
|
|
39123
|
+
position: relative;
|
|
39124
|
+
padding-left: 0.5rem; }
|
|
39125
|
+
|
|
39107
39126
|
.dropdown {
|
|
39108
39127
|
position: relative;
|
|
39109
39128
|
display: inline-block;
|
|
@@ -94838,9 +94838,18 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
94838
94838
|
return result;
|
|
94839
94839
|
};
|
|
94840
94840
|
})();
|
|
94841
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
94842
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
94843
|
+
};
|
|
94841
94844
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
94842
94845
|
exports.LoadMoreIndicator = void 0;
|
|
94843
94846
|
var React = __importStar(__webpack_require__(0));
|
|
94847
|
+
var classnames_1 = __importDefault(__webpack_require__(3));
|
|
94848
|
+
var sizeClassMap = {
|
|
94849
|
+
small: 'sd-loader--small',
|
|
94850
|
+
medium: 'sd-loader--medium',
|
|
94851
|
+
large: 'sd-loader--large',
|
|
94852
|
+
};
|
|
94844
94853
|
/**
|
|
94845
94854
|
* A loading indicator component designed to be appended at the end of scrollable lists
|
|
94846
94855
|
* during infinite scroll/pagination. Shows a spinner with optional progress counter.
|
|
@@ -94858,21 +94867,15 @@ var React = __importStar(__webpack_require__(0));
|
|
|
94858
94867
|
* ```
|
|
94859
94868
|
*/
|
|
94860
94869
|
var LoadMoreIndicator = function (_a) {
|
|
94861
|
-
var loading = _a.loading, currentCount = _a.currentCount, totalCount = _a.totalCount, _b = _a.loadingText, loadingText = _b === void 0 ? 'Loading more...' : _b, _c = _a.showProgress, showProgress = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? '
|
|
94870
|
+
var loading = _a.loading, currentCount = _a.currentCount, totalCount = _a.totalCount, _b = _a.loadingText, loadingText = _b === void 0 ? 'Loading more...' : _b, _c = _a.showProgress, showProgress = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, className = _a.className, _e = _a["data-test-id"], testId = _e === void 0 ? 'load-more-indicator' : _e;
|
|
94862
94871
|
if (!loading) {
|
|
94863
94872
|
return null;
|
|
94864
94873
|
}
|
|
94865
|
-
var loaderClassName =
|
|
94866
|
-
|
|
94867
|
-
|
|
94868
|
-
|
|
94869
|
-
|
|
94870
|
-
loaderClassName = 'sd-loader sd-loader--large';
|
|
94871
|
-
}
|
|
94872
|
-
return (React.createElement("li", { className: "sd-list-item sd-list-item--no-hover ".concat(className || '').trim(), style: { padding: '1rem', textAlign: 'center' }, "data-test-id": testId, role: "status", "aria-live": "polite", "aria-busy": "true" },
|
|
94873
|
-
React.createElement("div", { className: "sd-flex-no-grow sd-flex-v-center sd-flex-h-center sd-padding-x--1" },
|
|
94874
|
-
React.createElement("div", { className: "".concat(loaderClassName) }),
|
|
94875
|
-
React.createElement("span", { className: "sd-text__normal" },
|
|
94874
|
+
var loaderClassName = "sd-loader ".concat(sizeClassMap[size]);
|
|
94875
|
+
var containerClassName = (0, classnames_1.default)('sd-list-item', 'sd-list-item--no-hover', 'px-1', 'items-center', className);
|
|
94876
|
+
return (React.createElement("li", { className: containerClassName, "data-test-id": testId, role: "status", "aria-live": "polite", "aria-busy": "true" },
|
|
94877
|
+
React.createElement("div", { className: "load-more-indicator" },
|
|
94878
|
+
React.createElement("span", { className: "load-more-indicator__text" },
|
|
94876
94879
|
loadingText,
|
|
94877
94880
|
showProgress && currentCount != null && totalCount != null && (React.createElement(React.Fragment, null,
|
|
94878
94881
|
' ',
|
|
@@ -94880,7 +94883,8 @@ var LoadMoreIndicator = function (_a) {
|
|
|
94880
94883
|
currentCount,
|
|
94881
94884
|
" of ",
|
|
94882
94885
|
totalCount,
|
|
94883
|
-
")")))
|
|
94886
|
+
")"))),
|
|
94887
|
+
React.createElement("div", { className: loaderClassName }))));
|
|
94884
94888
|
};
|
|
94885
94889
|
exports.LoadMoreIndicator = LoadMoreIndicator;
|
|
94886
94890
|
|
package/package.json
CHANGED
|
@@ -32,9 +32,18 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
35
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
39
|
exports.LoadMoreIndicator = void 0;
|
|
37
40
|
var React = __importStar(require("react"));
|
|
41
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
var sizeClassMap = {
|
|
43
|
+
small: 'sd-loader--small',
|
|
44
|
+
medium: 'sd-loader--medium',
|
|
45
|
+
large: 'sd-loader--large',
|
|
46
|
+
};
|
|
38
47
|
/**
|
|
39
48
|
* A loading indicator component designed to be appended at the end of scrollable lists
|
|
40
49
|
* during infinite scroll/pagination. Shows a spinner with optional progress counter.
|
|
@@ -52,21 +61,15 @@ var React = __importStar(require("react"));
|
|
|
52
61
|
* ```
|
|
53
62
|
*/
|
|
54
63
|
var LoadMoreIndicator = function (_a) {
|
|
55
|
-
var loading = _a.loading, currentCount = _a.currentCount, totalCount = _a.totalCount, _b = _a.loadingText, loadingText = _b === void 0 ? 'Loading more...' : _b, _c = _a.showProgress, showProgress = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? '
|
|
64
|
+
var loading = _a.loading, currentCount = _a.currentCount, totalCount = _a.totalCount, _b = _a.loadingText, loadingText = _b === void 0 ? 'Loading more...' : _b, _c = _a.showProgress, showProgress = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, className = _a.className, _e = _a["data-test-id"], testId = _e === void 0 ? 'load-more-indicator' : _e;
|
|
56
65
|
if (!loading) {
|
|
57
66
|
return null;
|
|
58
67
|
}
|
|
59
|
-
var loaderClassName =
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
loaderClassName = 'sd-loader sd-loader--large';
|
|
65
|
-
}
|
|
66
|
-
return (React.createElement("li", { className: "sd-list-item sd-list-item--no-hover ".concat(className || '').trim(), style: { padding: '1rem', textAlign: 'center' }, "data-test-id": testId, role: "status", "aria-live": "polite", "aria-busy": "true" },
|
|
67
|
-
React.createElement("div", { className: "sd-flex-no-grow sd-flex-v-center sd-flex-h-center sd-padding-x--1" },
|
|
68
|
-
React.createElement("div", { className: "".concat(loaderClassName) }),
|
|
69
|
-
React.createElement("span", { className: "sd-text__normal" },
|
|
68
|
+
var loaderClassName = "sd-loader ".concat(sizeClassMap[size]);
|
|
69
|
+
var containerClassName = (0, classnames_1.default)('sd-list-item', 'sd-list-item--no-hover', 'px-1', 'items-center', className);
|
|
70
|
+
return (React.createElement("li", { className: containerClassName, "data-test-id": testId, role: "status", "aria-live": "polite", "aria-busy": "true" },
|
|
71
|
+
React.createElement("div", { className: "load-more-indicator" },
|
|
72
|
+
React.createElement("span", { className: "load-more-indicator__text" },
|
|
70
73
|
loadingText,
|
|
71
74
|
showProgress && currentCount != null && totalCount != null && (React.createElement(React.Fragment, null,
|
|
72
75
|
' ',
|
|
@@ -74,6 +77,7 @@ var LoadMoreIndicator = function (_a) {
|
|
|
74
77
|
currentCount,
|
|
75
78
|
" of ",
|
|
76
79
|
totalCount,
|
|
77
|
-
")")))
|
|
80
|
+
")"))),
|
|
81
|
+
React.createElement("div", { className: loaderClassName }))));
|
|
78
82
|
};
|
|
79
83
|
exports.LoadMoreIndicator = LoadMoreIndicator;
|