superdesk-ui-framework 4.0.16 → 4.0.18
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/ToggleBox/CustomHeaderToggleBox.tsx +14 -4
- package/app-typescript/components/Tooltip.tsx +5 -0
- package/dist/examples.bundle.js +12 -3
- package/dist/superdesk-ui.bundle.js +11 -2
- package/package.json +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +3 -2
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -2
- package/react/components/Tooltip.js +4 -0
|
@@ -5,18 +5,23 @@ import {IPropsCustomHeader} from "../ToggleBox/index";
|
|
|
5
5
|
|
|
6
6
|
interface IState {
|
|
7
7
|
isOpen: boolean;
|
|
8
|
+
wasOpened: boolean;
|
|
8
9
|
isAnimating: boolean;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
|
|
12
|
-
htmlId = nextId('togglebox-');
|
|
13
|
-
contentRef = React.createRef<HTMLDivElement>();
|
|
13
|
+
private htmlId = nextId('togglebox-');
|
|
14
|
+
private contentRef = React.createRef<HTMLDivElement>();
|
|
14
15
|
|
|
15
16
|
constructor(props: IPropsCustomHeader) {
|
|
16
17
|
super(props);
|
|
18
|
+
|
|
19
|
+
const isOpen = this.props.initiallyOpen ?? false;
|
|
20
|
+
|
|
17
21
|
this.state = {
|
|
18
|
-
isOpen:
|
|
22
|
+
isOpen: isOpen,
|
|
19
23
|
isAnimating: false,
|
|
24
|
+
wasOpened: isOpen,
|
|
20
25
|
};
|
|
21
26
|
}
|
|
22
27
|
|
|
@@ -41,6 +46,10 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
41
46
|
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
42
47
|
}
|
|
43
48
|
}
|
|
49
|
+
|
|
50
|
+
if (this.state.isOpen && !this.state.wasOpened) {
|
|
51
|
+
this.setState({wasOpened: true});
|
|
52
|
+
}
|
|
44
53
|
}
|
|
45
54
|
|
|
46
55
|
handleAnimationEnd = () => {
|
|
@@ -79,6 +88,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
79
88
|
</button>
|
|
80
89
|
</div>
|
|
81
90
|
|
|
91
|
+
{/** render wrapper unconditionally in order not to break the animation */}
|
|
82
92
|
<div className='new-collapse-box__content'>
|
|
83
93
|
<div
|
|
84
94
|
id={this.htmlId}
|
|
@@ -87,7 +97,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
87
97
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
88
98
|
})}
|
|
89
99
|
>
|
|
90
|
-
{this.props.children}
|
|
100
|
+
{this.state.isOpen || this.state.wasOpened ? this.props.children : null}
|
|
91
101
|
</div>
|
|
92
102
|
</div>
|
|
93
103
|
</div>
|
|
@@ -44,6 +44,11 @@ export class Tooltip extends React.PureComponent<IProps> {
|
|
|
44
44
|
placement: placement,
|
|
45
45
|
})[0];
|
|
46
46
|
|
|
47
|
+
if (this.instance == null) {
|
|
48
|
+
// prevent crashing in unit tests
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
|
|
47
52
|
if (content != null) {
|
|
48
53
|
this.instance.setContent(content);
|
|
49
54
|
} else {
|
package/dist/examples.bundle.js
CHANGED
|
@@ -27570,6 +27570,10 @@ var Tooltip = /** @class */ (function (_super) {
|
|
|
27570
27570
|
this.instance = (0, tippy_js_1.default)('#' + this.id, {
|
|
27571
27571
|
placement: placement,
|
|
27572
27572
|
})[0];
|
|
27573
|
+
if (this.instance == null) {
|
|
27574
|
+
// prevent crashing in unit tests
|
|
27575
|
+
return;
|
|
27576
|
+
}
|
|
27573
27577
|
if (content != null) {
|
|
27574
27578
|
this.instance.setContent(content);
|
|
27575
27579
|
}
|
|
@@ -150061,9 +150065,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
150061
150065
|
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
150062
150066
|
}
|
|
150063
150067
|
};
|
|
150068
|
+
var isOpen = (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false;
|
|
150064
150069
|
_this.state = {
|
|
150065
|
-
isOpen:
|
|
150070
|
+
isOpen: isOpen,
|
|
150066
150071
|
isAnimating: false,
|
|
150072
|
+
wasOpened: isOpen,
|
|
150067
150073
|
};
|
|
150068
150074
|
return _this;
|
|
150069
150075
|
}
|
|
@@ -150074,6 +150080,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
150074
150080
|
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
150075
150081
|
}
|
|
150076
150082
|
}
|
|
150083
|
+
if (this.state.isOpen && !this.state.wasOpened) {
|
|
150084
|
+
this.setState({ wasOpened: true });
|
|
150085
|
+
}
|
|
150077
150086
|
};
|
|
150078
150087
|
CustomHeaderToggleBox.prototype.render = function () {
|
|
150079
150088
|
var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
|
|
@@ -150088,7 +150097,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
150088
150097
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
150089
150098
|
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
150090
150099
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
150091
|
-
}) }, this.props.children))));
|
|
150100
|
+
}) }, this.state.isOpen || this.state.wasOpened ? this.props.children : null))));
|
|
150092
150101
|
};
|
|
150093
150102
|
return CustomHeaderToggleBox;
|
|
150094
150103
|
}(React.PureComponent));
|
|
@@ -187885,7 +187894,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
187885
187894
|
/* 938 */
|
|
187886
187895
|
/***/ (function(module, exports) {
|
|
187887
187896
|
|
|
187888
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
187897
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.18","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":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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","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":"4.9.5","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","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@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"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
|
|
187889
187898
|
|
|
187890
187899
|
/***/ }),
|
|
187891
187900
|
/* 939 */
|
|
@@ -27121,6 +27121,10 @@ var Tooltip = /** @class */ (function (_super) {
|
|
|
27121
27121
|
this.instance = (0, tippy_js_1.default)('#' + this.id, {
|
|
27122
27122
|
placement: placement,
|
|
27123
27123
|
})[0];
|
|
27124
|
+
if (this.instance == null) {
|
|
27125
|
+
// prevent crashing in unit tests
|
|
27126
|
+
return;
|
|
27127
|
+
}
|
|
27124
27128
|
if (content != null) {
|
|
27125
27129
|
this.instance.setContent(content);
|
|
27126
27130
|
}
|
|
@@ -149182,9 +149186,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
149182
149186
|
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
149183
149187
|
}
|
|
149184
149188
|
};
|
|
149189
|
+
var isOpen = (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false;
|
|
149185
149190
|
_this.state = {
|
|
149186
|
-
isOpen:
|
|
149191
|
+
isOpen: isOpen,
|
|
149187
149192
|
isAnimating: false,
|
|
149193
|
+
wasOpened: isOpen,
|
|
149188
149194
|
};
|
|
149189
149195
|
return _this;
|
|
149190
149196
|
}
|
|
@@ -149195,6 +149201,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
149195
149201
|
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
149196
149202
|
}
|
|
149197
149203
|
}
|
|
149204
|
+
if (this.state.isOpen && !this.state.wasOpened) {
|
|
149205
|
+
this.setState({ wasOpened: true });
|
|
149206
|
+
}
|
|
149198
149207
|
};
|
|
149199
149208
|
CustomHeaderToggleBox.prototype.render = function () {
|
|
149200
149209
|
var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
|
|
@@ -149209,7 +149218,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
149209
149218
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
149210
149219
|
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
149211
149220
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
149212
|
-
}) }, this.props.children))));
|
|
149221
|
+
}) }, this.state.isOpen || this.state.wasOpened ? this.props.children : null))));
|
|
149213
149222
|
};
|
|
149214
149223
|
return CustomHeaderToggleBox;
|
|
149215
149224
|
}(React.PureComponent));
|
package/package.json
CHANGED
|
@@ -2,11 +2,12 @@ import * as React from 'react';
|
|
|
2
2
|
import { IPropsCustomHeader } from "../ToggleBox/index";
|
|
3
3
|
interface IState {
|
|
4
4
|
isOpen: boolean;
|
|
5
|
+
wasOpened: boolean;
|
|
5
6
|
isAnimating: boolean;
|
|
6
7
|
}
|
|
7
8
|
export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
|
|
8
|
-
htmlId
|
|
9
|
-
contentRef
|
|
9
|
+
private htmlId;
|
|
10
|
+
private contentRef;
|
|
10
11
|
constructor(props: IPropsCustomHeader);
|
|
11
12
|
/**
|
|
12
13
|
* Called via ref
|
|
@@ -71,9 +71,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
71
71
|
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
|
+
var isOpen = (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false;
|
|
74
75
|
_this.state = {
|
|
75
|
-
isOpen:
|
|
76
|
+
isOpen: isOpen,
|
|
76
77
|
isAnimating: false,
|
|
78
|
+
wasOpened: isOpen,
|
|
77
79
|
};
|
|
78
80
|
return _this;
|
|
79
81
|
}
|
|
@@ -84,6 +86,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
84
86
|
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
85
87
|
}
|
|
86
88
|
}
|
|
89
|
+
if (this.state.isOpen && !this.state.wasOpened) {
|
|
90
|
+
this.setState({ wasOpened: true });
|
|
91
|
+
}
|
|
87
92
|
};
|
|
88
93
|
CustomHeaderToggleBox.prototype.render = function () {
|
|
89
94
|
var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
|
|
@@ -98,7 +103,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
98
103
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
99
104
|
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
100
105
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
101
|
-
}) }, this.props.children))));
|
|
106
|
+
}) }, this.state.isOpen || this.state.wasOpened ? this.props.children : null))));
|
|
102
107
|
};
|
|
103
108
|
return CustomHeaderToggleBox;
|
|
104
109
|
}(React.PureComponent));
|
|
@@ -77,6 +77,10 @@ var Tooltip = /** @class */ (function (_super) {
|
|
|
77
77
|
this.instance = (0, tippy_js_1.default)('#' + this.id, {
|
|
78
78
|
placement: placement,
|
|
79
79
|
})[0];
|
|
80
|
+
if (this.instance == null) {
|
|
81
|
+
// prevent crashing in unit tests
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
80
84
|
if (content != null) {
|
|
81
85
|
this.instance.setContent(content);
|
|
82
86
|
}
|