superdesk-ui-framework 4.0.19 → 4.0.21
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/styles/components/_sd-collapse-box.scss +4 -0
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +24 -4
- package/app-typescript/components/ToggleBox/index.tsx +5 -0
- package/dist/examples.bundle.js +20 -6
- package/dist/superdesk-ui.bundle.css +2 -0
- package/dist/superdesk-ui.bundle.js +19 -5
- package/package.json +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +19 -5
- package/react/components/ToggleBox/index.d.ts +4 -0
|
@@ -152,6 +152,10 @@
|
|
|
152
152
|
overflow: hidden;
|
|
153
153
|
transition: all 0.2s ease;
|
|
154
154
|
outline: 1px solid var(--sd-colour-line--x-light);
|
|
155
|
+
|
|
156
|
+
.toggle-box__content--animation {
|
|
157
|
+
animation: fadeIn 0.3s ease-in 0s 1;
|
|
158
|
+
}
|
|
155
159
|
}
|
|
156
160
|
.new-collapse-box__header {
|
|
157
161
|
grid-row: 1 / 2;
|
|
@@ -32,9 +32,24 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
32
32
|
return this.state.isOpen;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
public toggle = ():
|
|
36
|
-
|
|
37
|
-
this.
|
|
35
|
+
public toggle = (): Promise<boolean> => {
|
|
36
|
+
return new Promise((resolve, reject) => {
|
|
37
|
+
this.setState(
|
|
38
|
+
{isOpen: !this.state.isOpen, isAnimating: true},
|
|
39
|
+
() => {
|
|
40
|
+
if (this.contentRef.current) {
|
|
41
|
+
const handleAnimation = () => {
|
|
42
|
+
this.props.onToggle?.(this.state.isOpen);
|
|
43
|
+
this.handleAnimationEnd();
|
|
44
|
+
resolve(this.state.isOpen);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
this.contentRef.current.addEventListener("animationend", handleAnimation, {once: true});
|
|
48
|
+
} else {
|
|
49
|
+
reject();
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
);
|
|
38
53
|
});
|
|
39
54
|
}
|
|
40
55
|
|
|
@@ -91,13 +106,18 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
91
106
|
{/** render wrapper unconditionally in order not to break the animation */}
|
|
92
107
|
<div className='new-collapse-box__content'>
|
|
93
108
|
<div
|
|
109
|
+
ref={this.contentRef}
|
|
94
110
|
id={this.htmlId}
|
|
95
111
|
aria-hidden={!isOpen}
|
|
96
112
|
className={classNames('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
97
113
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
98
114
|
})}
|
|
99
115
|
>
|
|
100
|
-
{
|
|
116
|
+
{
|
|
117
|
+
this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
|
|
118
|
+
? this.props.children
|
|
119
|
+
: null
|
|
120
|
+
}
|
|
101
121
|
</div>
|
|
102
122
|
</div>
|
|
103
123
|
</div>
|
|
@@ -26,6 +26,11 @@ export interface IPropsCustomHeader {
|
|
|
26
26
|
initiallyOpen?: boolean;
|
|
27
27
|
onToggle?(isOpen: boolean): void;
|
|
28
28
|
toggleBoxRef?: React.RefObject<CustomHeaderToggleBox>;
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* by default - children would only get rendered when toggle box is expanded
|
|
32
|
+
*/
|
|
33
|
+
alwaysRenderChildren?: boolean;
|
|
29
34
|
}
|
|
30
35
|
|
|
31
36
|
type IProps = IPropsSimple | IPropsCustomHeader;
|
package/dist/examples.bundle.js
CHANGED
|
@@ -150054,9 +150054,21 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
150054
150054
|
return _this.state.isOpen;
|
|
150055
150055
|
};
|
|
150056
150056
|
_this.toggle = function () {
|
|
150057
|
-
|
|
150058
|
-
|
|
150059
|
-
|
|
150057
|
+
return new Promise(function (resolve, reject) {
|
|
150058
|
+
_this.setState({ isOpen: !_this.state.isOpen, isAnimating: true }, function () {
|
|
150059
|
+
if (_this.contentRef.current) {
|
|
150060
|
+
var handleAnimation = function () {
|
|
150061
|
+
var _a, _b;
|
|
150062
|
+
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
150063
|
+
_this.handleAnimationEnd();
|
|
150064
|
+
resolve(_this.state.isOpen);
|
|
150065
|
+
};
|
|
150066
|
+
_this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
|
|
150067
|
+
}
|
|
150068
|
+
else {
|
|
150069
|
+
reject();
|
|
150070
|
+
}
|
|
150071
|
+
});
|
|
150060
150072
|
});
|
|
150061
150073
|
};
|
|
150062
150074
|
_this.handleAnimationEnd = function () {
|
|
@@ -150095,9 +150107,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
150095
150107
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
150096
150108
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
|
|
150097
150109
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
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', {
|
|
150110
|
+
React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
150099
150111
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
150100
|
-
}) }, this.state.isOpen || this.state.wasOpened
|
|
150112
|
+
}) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
|
|
150113
|
+
? this.props.children
|
|
150114
|
+
: null))));
|
|
150101
150115
|
};
|
|
150102
150116
|
return CustomHeaderToggleBox;
|
|
150103
150117
|
}(React.PureComponent));
|
|
@@ -187894,7 +187908,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
187894
187908
|
/* 938 */
|
|
187895
187909
|
/***/ (function(module, exports) {
|
|
187896
187910
|
|
|
187897
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
187911
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.21","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"}}
|
|
187898
187912
|
|
|
187899
187913
|
/***/ }),
|
|
187900
187914
|
/* 939 */
|
|
@@ -44664,6 +44664,8 @@ a.text-link {
|
|
|
44664
44664
|
overflow: hidden;
|
|
44665
44665
|
transition: all 0.2s ease;
|
|
44666
44666
|
outline: 1px solid var(--sd-colour-line--x-light); }
|
|
44667
|
+
.new-collapse-box .toggle-box__content--animation {
|
|
44668
|
+
animation: fadeIn 0.3s ease-in 0s 1; }
|
|
44667
44669
|
|
|
44668
44670
|
.new-collapse-box__header {
|
|
44669
44671
|
grid-row: 1 / 2;
|
|
@@ -149175,9 +149175,21 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
149175
149175
|
return _this.state.isOpen;
|
|
149176
149176
|
};
|
|
149177
149177
|
_this.toggle = function () {
|
|
149178
|
-
|
|
149179
|
-
|
|
149180
|
-
|
|
149178
|
+
return new Promise(function (resolve, reject) {
|
|
149179
|
+
_this.setState({ isOpen: !_this.state.isOpen, isAnimating: true }, function () {
|
|
149180
|
+
if (_this.contentRef.current) {
|
|
149181
|
+
var handleAnimation = function () {
|
|
149182
|
+
var _a, _b;
|
|
149183
|
+
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
149184
|
+
_this.handleAnimationEnd();
|
|
149185
|
+
resolve(_this.state.isOpen);
|
|
149186
|
+
};
|
|
149187
|
+
_this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
|
|
149188
|
+
}
|
|
149189
|
+
else {
|
|
149190
|
+
reject();
|
|
149191
|
+
}
|
|
149192
|
+
});
|
|
149181
149193
|
});
|
|
149182
149194
|
};
|
|
149183
149195
|
_this.handleAnimationEnd = function () {
|
|
@@ -149216,9 +149228,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
149216
149228
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
149217
149229
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
|
|
149218
149230
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
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', {
|
|
149231
|
+
React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
149220
149232
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
149221
|
-
}) }, this.state.isOpen || this.state.wasOpened
|
|
149233
|
+
}) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
|
|
149234
|
+
? this.props.children
|
|
149235
|
+
: null))));
|
|
149222
149236
|
};
|
|
149223
149237
|
return CustomHeaderToggleBox;
|
|
149224
149238
|
}(React.PureComponent));
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@ export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCus
|
|
|
13
13
|
* Called via ref
|
|
14
14
|
*/
|
|
15
15
|
isOpen: () => boolean;
|
|
16
|
-
toggle: () =>
|
|
16
|
+
toggle: () => Promise<boolean>;
|
|
17
17
|
componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState): void;
|
|
18
18
|
handleAnimationEnd: () => void;
|
|
19
19
|
render(): JSX.Element;
|
|
@@ -60,9 +60,21 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
60
60
|
return _this.state.isOpen;
|
|
61
61
|
};
|
|
62
62
|
_this.toggle = function () {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
return new Promise(function (resolve, reject) {
|
|
64
|
+
_this.setState({ isOpen: !_this.state.isOpen, isAnimating: true }, function () {
|
|
65
|
+
if (_this.contentRef.current) {
|
|
66
|
+
var handleAnimation = function () {
|
|
67
|
+
var _a, _b;
|
|
68
|
+
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
69
|
+
_this.handleAnimationEnd();
|
|
70
|
+
resolve(_this.state.isOpen);
|
|
71
|
+
};
|
|
72
|
+
_this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
reject();
|
|
76
|
+
}
|
|
77
|
+
});
|
|
66
78
|
});
|
|
67
79
|
};
|
|
68
80
|
_this.handleAnimationEnd = function () {
|
|
@@ -101,9 +113,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
101
113
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
102
114
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
|
|
103
115
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
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', {
|
|
116
|
+
React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
105
117
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
106
|
-
}) }, this.state.isOpen || this.state.wasOpened
|
|
118
|
+
}) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
|
|
119
|
+
? this.props.children
|
|
120
|
+
: null))));
|
|
107
121
|
};
|
|
108
122
|
return CustomHeaderToggleBox;
|
|
109
123
|
}(React.PureComponent));
|
|
@@ -23,6 +23,10 @@ export interface IPropsCustomHeader {
|
|
|
23
23
|
initiallyOpen?: boolean;
|
|
24
24
|
onToggle?(isOpen: boolean): void;
|
|
25
25
|
toggleBoxRef?: React.RefObject<CustomHeaderToggleBox>;
|
|
26
|
+
/**
|
|
27
|
+
* by default - children would only get rendered when toggle box is expanded
|
|
28
|
+
*/
|
|
29
|
+
alwaysRenderChildren?: boolean;
|
|
26
30
|
}
|
|
27
31
|
type IProps = IPropsSimple | IPropsCustomHeader;
|
|
28
32
|
export declare class ToggleBox extends React.PureComponent<IProps> {
|