superdesk-ui-framework 4.0.55 → 4.0.56
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/app-typescript/components/Card.tsx +38 -15
- package/app-typescript/components/ShowPopup.tsx +50 -4
- package/app-typescript/components/with-pagination.spec.tsx +3 -3
- package/dist/examples.bundle.js +84 -17
- package/dist/superdesk-ui.bundle.js +83 -16
- package/package.json +2 -2
- package/react/components/Card.d.ts +2 -0
- package/react/components/Card.js +39 -13
- package/react/components/ShowPopup.js +44 -3
|
@@ -9,26 +9,49 @@ interface IProps extends Pick<React.CSSProperties, 'paddingBlock'> {
|
|
|
9
9
|
paddingInline?: React.CSSProperties['paddingInline'];
|
|
10
10
|
paddingInlineStart?: React.CSSProperties['paddingInlineStart'];
|
|
11
11
|
paddingInlineEnd?: React.CSSProperties['paddingInlineEnd'];
|
|
12
|
+
style?: React.CSSProperties;
|
|
13
|
+
'data-test-id'?: string;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
export class Card extends React.PureComponent<IProps> {
|
|
15
17
|
render() {
|
|
18
|
+
const style: React.CSSProperties = {
|
|
19
|
+
width: '100%',
|
|
20
|
+
background: 'var(--sd-item__main-Bg)',
|
|
21
|
+
borderRadius: 'var(--b-radius--medium)',
|
|
22
|
+
boxShadow: 'var(--sd-shadow--z2)',
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
if (this.props.paddingBase != null) {
|
|
26
|
+
style.padding = `calc( ${this.props.paddingBase} * var(--base-increment))`;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
if (this.props.paddingBlock != null) {
|
|
30
|
+
style.paddingBlock = this.props.paddingBlock;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (this.props.paddingBlockStart != null) {
|
|
34
|
+
style.paddingBlockStart = this.props.paddingBlockStart;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (this.props.paddingBlockEnd != null) {
|
|
38
|
+
style.paddingBlockEnd = this.props.paddingBlockEnd;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
if (this.props.paddingInline != null) {
|
|
42
|
+
style.paddingInline = this.props.paddingInline;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (this.props.paddingInlineStart != null) {
|
|
46
|
+
style.paddingInlineStart = this.props.paddingInlineStart;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (this.props.paddingInlineEnd != null) {
|
|
50
|
+
style.paddingInlineEnd = this.props.paddingInlineEnd;
|
|
51
|
+
}
|
|
52
|
+
|
|
16
53
|
return (
|
|
17
|
-
<div
|
|
18
|
-
style={{
|
|
19
|
-
width: '100%',
|
|
20
|
-
background: 'var(--sd-item__main-Bg)',
|
|
21
|
-
borderRadius: 'var(--b-radius--medium)',
|
|
22
|
-
padding: `calc( ${this.props.paddingBase} * var(--base-increment))`,
|
|
23
|
-
boxShadow: 'var(--sd-shadow--z2)',
|
|
24
|
-
paddingBlock: this.props.paddingBlock,
|
|
25
|
-
paddingBlockStart: this.props.paddingBlockStart,
|
|
26
|
-
paddingBlockEnd: this.props.paddingBlockEnd,
|
|
27
|
-
paddingInline: this.props.paddingInline,
|
|
28
|
-
paddingInlineStart: this.props.paddingInlineStart,
|
|
29
|
-
paddingInlineEnd: this.props.paddingInlineEnd,
|
|
30
|
-
}}
|
|
31
|
-
>
|
|
54
|
+
<div style={{...style, ...this.props.style}} data-test-id={this.props['data-test-id']}>
|
|
32
55
|
{this.props.children}
|
|
33
56
|
</div>
|
|
34
57
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
3
|
import {createPopper, Instance as PopperInstance, Placement, Modifier} from '@popperjs/core';
|
|
4
|
-
import {throttle} from 'lodash';
|
|
4
|
+
import {noop, throttle} from 'lodash';
|
|
5
5
|
import maxSize from 'popper-max-size-modifier';
|
|
6
6
|
import {getNextZIndex} from '../zIndex';
|
|
7
7
|
|
|
@@ -13,6 +13,8 @@ interface IPropsPopupPositioner {
|
|
|
13
13
|
'data-test-id'?: string;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
const padding = 8;
|
|
17
|
+
|
|
16
18
|
export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
|
|
17
19
|
private wrapperEl: HTMLDivElement | null;
|
|
18
20
|
private popper: PopperInstance | null;
|
|
@@ -78,11 +80,43 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
|
|
|
78
80
|
fn: ({state}) => {
|
|
79
81
|
const {height} = state.modifiersData.maxSize;
|
|
80
82
|
|
|
81
|
-
// subtracting
|
|
82
|
-
state.styles.popper.maxHeight = `${height -
|
|
83
|
+
// subtracting {padding} in order to make a gap between the edge of the viewport
|
|
84
|
+
state.styles.popper.maxHeight = `${height - padding}px`;
|
|
83
85
|
},
|
|
84
86
|
};
|
|
85
87
|
|
|
88
|
+
/**
|
|
89
|
+
* If popover height is greater than viewport height,
|
|
90
|
+
* popper will not flip it to direction that has more space available.
|
|
91
|
+
* This modifier limits popover height to max available
|
|
92
|
+
* so popper can position it in direction where more space is available.
|
|
93
|
+
*/
|
|
94
|
+
const restrictHeightToMaxAvailable: Modifier<any, any> = {
|
|
95
|
+
name: 'restrictHeightToMaxAvailable',
|
|
96
|
+
enabled: true,
|
|
97
|
+
phase: 'main',
|
|
98
|
+
fn: noop,
|
|
99
|
+
|
|
100
|
+
// execute this as early as possible not to interfere with popper calculations
|
|
101
|
+
requires: ['popperOffsets'],
|
|
102
|
+
|
|
103
|
+
effect: (args) => {
|
|
104
|
+
const popperHeight = args.state.elements.popper.offsetHeight;
|
|
105
|
+
const viewportHeight = document.body.offsetHeight;
|
|
106
|
+
const refRect = args.state.elements.reference.getBoundingClientRect();
|
|
107
|
+
const availableSpaceAbove = refRect.top;
|
|
108
|
+
const availableSpaceBelow = viewportHeight - refRect.bottom;
|
|
109
|
+
const availableSpaceMax = Math.max(availableSpaceAbove, availableSpaceBelow);
|
|
110
|
+
|
|
111
|
+
if (popperHeight > availableSpaceMax) {
|
|
112
|
+
args.state.elements.popper.style.height = availableSpaceMax + 'px';
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return () => {
|
|
116
|
+
// no cleanup needed
|
|
117
|
+
};
|
|
118
|
+
},
|
|
119
|
+
};
|
|
86
120
|
if (this.wrapperEl != null) {
|
|
87
121
|
/**
|
|
88
122
|
* Wait until referenceElement renders so createPopper
|
|
@@ -92,7 +126,19 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
|
|
|
92
126
|
if (this.wrapperEl != null) {
|
|
93
127
|
this.popper = createPopper(this.props.getReferenceElement(), this.wrapperEl, {
|
|
94
128
|
placement: this.props.placement,
|
|
95
|
-
modifiers: [
|
|
129
|
+
modifiers: [
|
|
130
|
+
restrictHeightToMaxAvailable,
|
|
131
|
+
{
|
|
132
|
+
name: 'preventOverflow',
|
|
133
|
+
options: {
|
|
134
|
+
padding: {
|
|
135
|
+
top: padding,
|
|
136
|
+
},
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
maxSize,
|
|
140
|
+
applyMaxSize,
|
|
141
|
+
],
|
|
96
142
|
});
|
|
97
143
|
}
|
|
98
144
|
}, 50);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {describe, it} from 'mocha';
|
|
1
|
+
import {describe, it, xit} from 'mocha';
|
|
2
2
|
import * as assert from 'assert';
|
|
3
3
|
import {mount} from 'enzyme';
|
|
4
4
|
import * as React from 'react';
|
|
@@ -83,7 +83,7 @@ describe('with-pagination', () => {
|
|
|
83
83
|
}, TIMEOUT + 100);
|
|
84
84
|
});
|
|
85
85
|
|
|
86
|
-
|
|
86
|
+
xit('previous-next buttons works', (done) => {
|
|
87
87
|
const wrapper = mount(<Paginated />);
|
|
88
88
|
|
|
89
89
|
setTimeout(() => {
|
|
@@ -108,7 +108,7 @@ describe('with-pagination', () => {
|
|
|
108
108
|
}, TIMEOUT + 100);
|
|
109
109
|
});
|
|
110
110
|
|
|
111
|
-
it
|
|
111
|
+
it('scrolls to the top of the pagination container', (done) => {
|
|
112
112
|
const wrapper = mount(
|
|
113
113
|
<div style={{height: 1200, overflowY: 'auto'}}>
|
|
114
114
|
<div style={{height: 400}} />
|
package/dist/examples.bundle.js
CHANGED
|
@@ -59899,6 +59899,7 @@ var core_1 = __webpack_require__(45);
|
|
|
59899
59899
|
var lodash_1 = __webpack_require__(18);
|
|
59900
59900
|
var popper_max_size_modifier_1 = __importDefault(__webpack_require__(618));
|
|
59901
59901
|
var zIndex_1 = __webpack_require__(24);
|
|
59902
|
+
var padding = 8;
|
|
59902
59903
|
var PopupPositioner = /** @class */ (function (_super) {
|
|
59903
59904
|
__extends(PopupPositioner, _super);
|
|
59904
59905
|
function PopupPositioner(props) {
|
|
@@ -59952,8 +59953,36 @@ var PopupPositioner = /** @class */ (function (_super) {
|
|
|
59952
59953
|
fn: function (_a) {
|
|
59953
59954
|
var state = _a.state;
|
|
59954
59955
|
var height = state.modifiersData.maxSize.height;
|
|
59955
|
-
// subtracting
|
|
59956
|
-
state.styles.popper.maxHeight = "".concat(height -
|
|
59956
|
+
// subtracting {padding} in order to make a gap between the edge of the viewport
|
|
59957
|
+
state.styles.popper.maxHeight = "".concat(height - padding, "px");
|
|
59958
|
+
},
|
|
59959
|
+
};
|
|
59960
|
+
/**
|
|
59961
|
+
* If popover height is greater than viewport height,
|
|
59962
|
+
* popper will not flip it to direction that has more space available.
|
|
59963
|
+
* This modifier limits popover height to max available
|
|
59964
|
+
* so popper can position it in direction where more space is available.
|
|
59965
|
+
*/
|
|
59966
|
+
var restrictHeightToMaxAvailable = {
|
|
59967
|
+
name: 'restrictHeightToMaxAvailable',
|
|
59968
|
+
enabled: true,
|
|
59969
|
+
phase: 'main',
|
|
59970
|
+
fn: lodash_1.noop,
|
|
59971
|
+
// execute this as early as possible not to interfere with popper calculations
|
|
59972
|
+
requires: ['popperOffsets'],
|
|
59973
|
+
effect: function (args) {
|
|
59974
|
+
var popperHeight = args.state.elements.popper.offsetHeight;
|
|
59975
|
+
var viewportHeight = document.body.offsetHeight;
|
|
59976
|
+
var refRect = args.state.elements.reference.getBoundingClientRect();
|
|
59977
|
+
var availableSpaceAbove = refRect.top;
|
|
59978
|
+
var availableSpaceBelow = viewportHeight - refRect.bottom;
|
|
59979
|
+
var availableSpaceMax = Math.max(availableSpaceAbove, availableSpaceBelow);
|
|
59980
|
+
if (popperHeight > availableSpaceMax) {
|
|
59981
|
+
args.state.elements.popper.style.height = availableSpaceMax + 'px';
|
|
59982
|
+
}
|
|
59983
|
+
return function () {
|
|
59984
|
+
// no cleanup needed
|
|
59985
|
+
};
|
|
59957
59986
|
},
|
|
59958
59987
|
};
|
|
59959
59988
|
if (this.wrapperEl != null) {
|
|
@@ -59965,7 +59994,19 @@ var PopupPositioner = /** @class */ (function (_super) {
|
|
|
59965
59994
|
if (_this.wrapperEl != null) {
|
|
59966
59995
|
_this.popper = (0, core_1.createPopper)(_this.props.getReferenceElement(), _this.wrapperEl, {
|
|
59967
59996
|
placement: _this.props.placement,
|
|
59968
|
-
modifiers: [
|
|
59997
|
+
modifiers: [
|
|
59998
|
+
restrictHeightToMaxAvailable,
|
|
59999
|
+
{
|
|
60000
|
+
name: 'preventOverflow',
|
|
60001
|
+
options: {
|
|
60002
|
+
padding: {
|
|
60003
|
+
top: padding,
|
|
60004
|
+
},
|
|
60005
|
+
},
|
|
60006
|
+
},
|
|
60007
|
+
popper_max_size_modifier_1.default,
|
|
60008
|
+
applyMaxSize,
|
|
60009
|
+
],
|
|
59969
60010
|
});
|
|
59970
60011
|
}
|
|
59971
60012
|
}, 50);
|
|
@@ -98925,6 +98966,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
98925
98966
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
98926
98967
|
};
|
|
98927
98968
|
})();
|
|
98969
|
+
var __assign = (this && this.__assign) || function () {
|
|
98970
|
+
__assign = Object.assign || function(t) {
|
|
98971
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
98972
|
+
s = arguments[i];
|
|
98973
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
98974
|
+
t[p] = s[p];
|
|
98975
|
+
}
|
|
98976
|
+
return t;
|
|
98977
|
+
};
|
|
98978
|
+
return __assign.apply(this, arguments);
|
|
98979
|
+
};
|
|
98928
98980
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
98929
98981
|
if (k2 === undefined) k2 = k;
|
|
98930
98982
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -98967,19 +99019,34 @@ var Card = /** @class */ (function (_super) {
|
|
|
98967
99019
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
98968
99020
|
}
|
|
98969
99021
|
Card.prototype.render = function () {
|
|
98970
|
-
|
|
98971
|
-
|
|
98972
|
-
|
|
98973
|
-
|
|
98974
|
-
|
|
98975
|
-
|
|
98976
|
-
|
|
98977
|
-
|
|
98978
|
-
|
|
98979
|
-
|
|
98980
|
-
|
|
98981
|
-
|
|
98982
|
-
|
|
99022
|
+
var style = {
|
|
99023
|
+
width: '100%',
|
|
99024
|
+
background: 'var(--sd-item__main-Bg)',
|
|
99025
|
+
borderRadius: 'var(--b-radius--medium)',
|
|
99026
|
+
boxShadow: 'var(--sd-shadow--z2)',
|
|
99027
|
+
};
|
|
99028
|
+
if (this.props.paddingBase != null) {
|
|
99029
|
+
style.padding = "calc( ".concat(this.props.paddingBase, " * var(--base-increment))");
|
|
99030
|
+
}
|
|
99031
|
+
if (this.props.paddingBlock != null) {
|
|
99032
|
+
style.paddingBlock = this.props.paddingBlock;
|
|
99033
|
+
}
|
|
99034
|
+
if (this.props.paddingBlockStart != null) {
|
|
99035
|
+
style.paddingBlockStart = this.props.paddingBlockStart;
|
|
99036
|
+
}
|
|
99037
|
+
if (this.props.paddingBlockEnd != null) {
|
|
99038
|
+
style.paddingBlockEnd = this.props.paddingBlockEnd;
|
|
99039
|
+
}
|
|
99040
|
+
if (this.props.paddingInline != null) {
|
|
99041
|
+
style.paddingInline = this.props.paddingInline;
|
|
99042
|
+
}
|
|
99043
|
+
if (this.props.paddingInlineStart != null) {
|
|
99044
|
+
style.paddingInlineStart = this.props.paddingInlineStart;
|
|
99045
|
+
}
|
|
99046
|
+
if (this.props.paddingInlineEnd != null) {
|
|
99047
|
+
style.paddingInlineEnd = this.props.paddingInlineEnd;
|
|
99048
|
+
}
|
|
99049
|
+
return (React.createElement("div", { style: __assign(__assign({}, style), this.props.style), "data-test-id": this.props['data-test-id'] }, this.props.children));
|
|
98983
99050
|
};
|
|
98984
99051
|
return Card;
|
|
98985
99052
|
}(React.PureComponent));
|
|
@@ -191072,7 +191139,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
191072
191139
|
/* 959 */
|
|
191073
191140
|
/***/ (function(module, exports) {
|
|
191074
191141
|
|
|
191075
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
191142
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.56","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"],"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","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","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.63","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.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","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
|
|
191076
191143
|
|
|
191077
191144
|
/***/ }),
|
|
191078
191145
|
/* 960 */
|
|
@@ -59378,6 +59378,7 @@ var core_1 = __webpack_require__(45);
|
|
|
59378
59378
|
var lodash_1 = __webpack_require__(18);
|
|
59379
59379
|
var popper_max_size_modifier_1 = __importDefault(__webpack_require__(618));
|
|
59380
59380
|
var zIndex_1 = __webpack_require__(24);
|
|
59381
|
+
var padding = 8;
|
|
59381
59382
|
var PopupPositioner = /** @class */ (function (_super) {
|
|
59382
59383
|
__extends(PopupPositioner, _super);
|
|
59383
59384
|
function PopupPositioner(props) {
|
|
@@ -59431,8 +59432,36 @@ var PopupPositioner = /** @class */ (function (_super) {
|
|
|
59431
59432
|
fn: function (_a) {
|
|
59432
59433
|
var state = _a.state;
|
|
59433
59434
|
var height = state.modifiersData.maxSize.height;
|
|
59434
|
-
// subtracting
|
|
59435
|
-
state.styles.popper.maxHeight = "".concat(height -
|
|
59435
|
+
// subtracting {padding} in order to make a gap between the edge of the viewport
|
|
59436
|
+
state.styles.popper.maxHeight = "".concat(height - padding, "px");
|
|
59437
|
+
},
|
|
59438
|
+
};
|
|
59439
|
+
/**
|
|
59440
|
+
* If popover height is greater than viewport height,
|
|
59441
|
+
* popper will not flip it to direction that has more space available.
|
|
59442
|
+
* This modifier limits popover height to max available
|
|
59443
|
+
* so popper can position it in direction where more space is available.
|
|
59444
|
+
*/
|
|
59445
|
+
var restrictHeightToMaxAvailable = {
|
|
59446
|
+
name: 'restrictHeightToMaxAvailable',
|
|
59447
|
+
enabled: true,
|
|
59448
|
+
phase: 'main',
|
|
59449
|
+
fn: lodash_1.noop,
|
|
59450
|
+
// execute this as early as possible not to interfere with popper calculations
|
|
59451
|
+
requires: ['popperOffsets'],
|
|
59452
|
+
effect: function (args) {
|
|
59453
|
+
var popperHeight = args.state.elements.popper.offsetHeight;
|
|
59454
|
+
var viewportHeight = document.body.offsetHeight;
|
|
59455
|
+
var refRect = args.state.elements.reference.getBoundingClientRect();
|
|
59456
|
+
var availableSpaceAbove = refRect.top;
|
|
59457
|
+
var availableSpaceBelow = viewportHeight - refRect.bottom;
|
|
59458
|
+
var availableSpaceMax = Math.max(availableSpaceAbove, availableSpaceBelow);
|
|
59459
|
+
if (popperHeight > availableSpaceMax) {
|
|
59460
|
+
args.state.elements.popper.style.height = availableSpaceMax + 'px';
|
|
59461
|
+
}
|
|
59462
|
+
return function () {
|
|
59463
|
+
// no cleanup needed
|
|
59464
|
+
};
|
|
59436
59465
|
},
|
|
59437
59466
|
};
|
|
59438
59467
|
if (this.wrapperEl != null) {
|
|
@@ -59444,7 +59473,19 @@ var PopupPositioner = /** @class */ (function (_super) {
|
|
|
59444
59473
|
if (_this.wrapperEl != null) {
|
|
59445
59474
|
_this.popper = (0, core_1.createPopper)(_this.props.getReferenceElement(), _this.wrapperEl, {
|
|
59446
59475
|
placement: _this.props.placement,
|
|
59447
|
-
modifiers: [
|
|
59476
|
+
modifiers: [
|
|
59477
|
+
restrictHeightToMaxAvailable,
|
|
59478
|
+
{
|
|
59479
|
+
name: 'preventOverflow',
|
|
59480
|
+
options: {
|
|
59481
|
+
padding: {
|
|
59482
|
+
top: padding,
|
|
59483
|
+
},
|
|
59484
|
+
},
|
|
59485
|
+
},
|
|
59486
|
+
popper_max_size_modifier_1.default,
|
|
59487
|
+
applyMaxSize,
|
|
59488
|
+
],
|
|
59448
59489
|
});
|
|
59449
59490
|
}
|
|
59450
59491
|
}, 50);
|
|
@@ -98021,6 +98062,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
98021
98062
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
98022
98063
|
};
|
|
98023
98064
|
})();
|
|
98065
|
+
var __assign = (this && this.__assign) || function () {
|
|
98066
|
+
__assign = Object.assign || function(t) {
|
|
98067
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
98068
|
+
s = arguments[i];
|
|
98069
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
98070
|
+
t[p] = s[p];
|
|
98071
|
+
}
|
|
98072
|
+
return t;
|
|
98073
|
+
};
|
|
98074
|
+
return __assign.apply(this, arguments);
|
|
98075
|
+
};
|
|
98024
98076
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
98025
98077
|
if (k2 === undefined) k2 = k;
|
|
98026
98078
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -98063,19 +98115,34 @@ var Card = /** @class */ (function (_super) {
|
|
|
98063
98115
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
98064
98116
|
}
|
|
98065
98117
|
Card.prototype.render = function () {
|
|
98066
|
-
|
|
98067
|
-
|
|
98068
|
-
|
|
98069
|
-
|
|
98070
|
-
|
|
98071
|
-
|
|
98072
|
-
|
|
98073
|
-
|
|
98074
|
-
|
|
98075
|
-
|
|
98076
|
-
|
|
98077
|
-
|
|
98078
|
-
|
|
98118
|
+
var style = {
|
|
98119
|
+
width: '100%',
|
|
98120
|
+
background: 'var(--sd-item__main-Bg)',
|
|
98121
|
+
borderRadius: 'var(--b-radius--medium)',
|
|
98122
|
+
boxShadow: 'var(--sd-shadow--z2)',
|
|
98123
|
+
};
|
|
98124
|
+
if (this.props.paddingBase != null) {
|
|
98125
|
+
style.padding = "calc( ".concat(this.props.paddingBase, " * var(--base-increment))");
|
|
98126
|
+
}
|
|
98127
|
+
if (this.props.paddingBlock != null) {
|
|
98128
|
+
style.paddingBlock = this.props.paddingBlock;
|
|
98129
|
+
}
|
|
98130
|
+
if (this.props.paddingBlockStart != null) {
|
|
98131
|
+
style.paddingBlockStart = this.props.paddingBlockStart;
|
|
98132
|
+
}
|
|
98133
|
+
if (this.props.paddingBlockEnd != null) {
|
|
98134
|
+
style.paddingBlockEnd = this.props.paddingBlockEnd;
|
|
98135
|
+
}
|
|
98136
|
+
if (this.props.paddingInline != null) {
|
|
98137
|
+
style.paddingInline = this.props.paddingInline;
|
|
98138
|
+
}
|
|
98139
|
+
if (this.props.paddingInlineStart != null) {
|
|
98140
|
+
style.paddingInlineStart = this.props.paddingInlineStart;
|
|
98141
|
+
}
|
|
98142
|
+
if (this.props.paddingInlineEnd != null) {
|
|
98143
|
+
style.paddingInlineEnd = this.props.paddingInlineEnd;
|
|
98144
|
+
}
|
|
98145
|
+
return (React.createElement("div", { style: __assign(__assign({}, style), this.props.style), "data-test-id": this.props['data-test-id'] }, this.props.children));
|
|
98079
98146
|
};
|
|
98080
98147
|
return Card;
|
|
98081
98148
|
}(React.PureComponent));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "superdesk-ui-framework",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.56",
|
|
4
4
|
"license": "AGPL-3.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"build-ui": "webpack && tsc && npm run lint",
|
|
24
24
|
"playground-lint": "tsc -p examples/pages/playgrounds/react-playgrounds --noEmit",
|
|
25
25
|
"format-code": "npx prettier . --write",
|
|
26
|
-
"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",
|
|
26
|
+
"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",
|
|
27
27
|
"lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
|
|
28
28
|
"prepublishOnly": "npm run build",
|
|
29
29
|
"unit-test": "mocha",
|
|
@@ -8,6 +8,8 @@ interface IProps extends Pick<React.CSSProperties, 'paddingBlock'> {
|
|
|
8
8
|
paddingInline?: React.CSSProperties['paddingInline'];
|
|
9
9
|
paddingInlineStart?: React.CSSProperties['paddingInlineStart'];
|
|
10
10
|
paddingInlineEnd?: React.CSSProperties['paddingInlineEnd'];
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
'data-test-id'?: string;
|
|
11
13
|
}
|
|
12
14
|
export declare class Card extends React.PureComponent<IProps> {
|
|
13
15
|
render(): JSX.Element;
|
package/react/components/Card.js
CHANGED
|
@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
14
14
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
15
|
};
|
|
16
16
|
})();
|
|
17
|
+
var __assign = (this && this.__assign) || function () {
|
|
18
|
+
__assign = Object.assign || function(t) {
|
|
19
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
+
s = arguments[i];
|
|
21
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
22
|
+
t[p] = s[p];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
};
|
|
26
|
+
return __assign.apply(this, arguments);
|
|
27
|
+
};
|
|
17
28
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
29
|
if (k2 === undefined) k2 = k;
|
|
19
30
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -56,19 +67,34 @@ var Card = /** @class */ (function (_super) {
|
|
|
56
67
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
57
68
|
}
|
|
58
69
|
Card.prototype.render = function () {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
var style = {
|
|
71
|
+
width: '100%',
|
|
72
|
+
background: 'var(--sd-item__main-Bg)',
|
|
73
|
+
borderRadius: 'var(--b-radius--medium)',
|
|
74
|
+
boxShadow: 'var(--sd-shadow--z2)',
|
|
75
|
+
};
|
|
76
|
+
if (this.props.paddingBase != null) {
|
|
77
|
+
style.padding = "calc( ".concat(this.props.paddingBase, " * var(--base-increment))");
|
|
78
|
+
}
|
|
79
|
+
if (this.props.paddingBlock != null) {
|
|
80
|
+
style.paddingBlock = this.props.paddingBlock;
|
|
81
|
+
}
|
|
82
|
+
if (this.props.paddingBlockStart != null) {
|
|
83
|
+
style.paddingBlockStart = this.props.paddingBlockStart;
|
|
84
|
+
}
|
|
85
|
+
if (this.props.paddingBlockEnd != null) {
|
|
86
|
+
style.paddingBlockEnd = this.props.paddingBlockEnd;
|
|
87
|
+
}
|
|
88
|
+
if (this.props.paddingInline != null) {
|
|
89
|
+
style.paddingInline = this.props.paddingInline;
|
|
90
|
+
}
|
|
91
|
+
if (this.props.paddingInlineStart != null) {
|
|
92
|
+
style.paddingInlineStart = this.props.paddingInlineStart;
|
|
93
|
+
}
|
|
94
|
+
if (this.props.paddingInlineEnd != null) {
|
|
95
|
+
style.paddingInlineEnd = this.props.paddingInlineEnd;
|
|
96
|
+
}
|
|
97
|
+
return (React.createElement("div", { style: __assign(__assign({}, style), this.props.style), "data-test-id": this.props['data-test-id'] }, this.props.children));
|
|
72
98
|
};
|
|
73
99
|
return Card;
|
|
74
100
|
}(React.PureComponent));
|
|
@@ -59,6 +59,7 @@ var core_1 = require("@popperjs/core");
|
|
|
59
59
|
var lodash_1 = require("lodash");
|
|
60
60
|
var popper_max_size_modifier_1 = __importDefault(require("popper-max-size-modifier"));
|
|
61
61
|
var zIndex_1 = require("../zIndex");
|
|
62
|
+
var padding = 8;
|
|
62
63
|
var PopupPositioner = /** @class */ (function (_super) {
|
|
63
64
|
__extends(PopupPositioner, _super);
|
|
64
65
|
function PopupPositioner(props) {
|
|
@@ -112,8 +113,36 @@ var PopupPositioner = /** @class */ (function (_super) {
|
|
|
112
113
|
fn: function (_a) {
|
|
113
114
|
var state = _a.state;
|
|
114
115
|
var height = state.modifiersData.maxSize.height;
|
|
115
|
-
// subtracting
|
|
116
|
-
state.styles.popper.maxHeight = "".concat(height -
|
|
116
|
+
// subtracting {padding} in order to make a gap between the edge of the viewport
|
|
117
|
+
state.styles.popper.maxHeight = "".concat(height - padding, "px");
|
|
118
|
+
},
|
|
119
|
+
};
|
|
120
|
+
/**
|
|
121
|
+
* If popover height is greater than viewport height,
|
|
122
|
+
* popper will not flip it to direction that has more space available.
|
|
123
|
+
* This modifier limits popover height to max available
|
|
124
|
+
* so popper can position it in direction where more space is available.
|
|
125
|
+
*/
|
|
126
|
+
var restrictHeightToMaxAvailable = {
|
|
127
|
+
name: 'restrictHeightToMaxAvailable',
|
|
128
|
+
enabled: true,
|
|
129
|
+
phase: 'main',
|
|
130
|
+
fn: lodash_1.noop,
|
|
131
|
+
// execute this as early as possible not to interfere with popper calculations
|
|
132
|
+
requires: ['popperOffsets'],
|
|
133
|
+
effect: function (args) {
|
|
134
|
+
var popperHeight = args.state.elements.popper.offsetHeight;
|
|
135
|
+
var viewportHeight = document.body.offsetHeight;
|
|
136
|
+
var refRect = args.state.elements.reference.getBoundingClientRect();
|
|
137
|
+
var availableSpaceAbove = refRect.top;
|
|
138
|
+
var availableSpaceBelow = viewportHeight - refRect.bottom;
|
|
139
|
+
var availableSpaceMax = Math.max(availableSpaceAbove, availableSpaceBelow);
|
|
140
|
+
if (popperHeight > availableSpaceMax) {
|
|
141
|
+
args.state.elements.popper.style.height = availableSpaceMax + 'px';
|
|
142
|
+
}
|
|
143
|
+
return function () {
|
|
144
|
+
// no cleanup needed
|
|
145
|
+
};
|
|
117
146
|
},
|
|
118
147
|
};
|
|
119
148
|
if (this.wrapperEl != null) {
|
|
@@ -125,7 +154,19 @@ var PopupPositioner = /** @class */ (function (_super) {
|
|
|
125
154
|
if (_this.wrapperEl != null) {
|
|
126
155
|
_this.popper = (0, core_1.createPopper)(_this.props.getReferenceElement(), _this.wrapperEl, {
|
|
127
156
|
placement: _this.props.placement,
|
|
128
|
-
modifiers: [
|
|
157
|
+
modifiers: [
|
|
158
|
+
restrictHeightToMaxAvailable,
|
|
159
|
+
{
|
|
160
|
+
name: 'preventOverflow',
|
|
161
|
+
options: {
|
|
162
|
+
padding: {
|
|
163
|
+
top: padding,
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
popper_max_size_modifier_1.default,
|
|
168
|
+
applyMaxSize,
|
|
169
|
+
],
|
|
129
170
|
});
|
|
130
171
|
}
|
|
131
172
|
}, 50);
|