superdesk-ui-framework 4.0.28 → 4.0.30
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/editor/_editor-buttons.scss +12 -9
- package/app/styles/editor/_editor-themes.scss +129 -108
- package/app-typescript/components/Alert.tsx +11 -1
- package/app-typescript/components/Button.tsx +46 -18
- package/app-typescript/components/Tooltip.tsx +22 -6
- package/dist/components/Buttons.tsx +6 -6
- package/dist/examples.bundle.js +36662 -36597
- package/dist/superdesk-ui.bundle.css +133 -114
- package/dist/superdesk-ui.bundle.js +36659 -36594
- package/examples/pages/components/Buttons.tsx +6 -6
- package/package.json +1 -1
- package/react/components/Alert.d.ts +1 -0
- package/react/components/Alert.js +5 -1
- package/react/components/Button.js +35 -4
- package/react/components/Tooltip.d.ts +9 -1
- package/react/components/Tooltip.js +40 -10
@@ -17,7 +17,7 @@ export default class ButtonsDoc extends React.Component {
|
|
17
17
|
<Markup.ReactMarkup>
|
18
18
|
<Markup.ReactMarkupPreview>
|
19
19
|
<div className="docs-page__content-row">
|
20
|
-
<Button text="default" onClick={()=> false} />
|
20
|
+
<Button text="default" onClick={()=> false} tooltip="test tooltip" />
|
21
21
|
<Button text="primary" type="primary" onClick={()=> false} />
|
22
22
|
</div>
|
23
23
|
<p className="docs-page__paragraph">// Other colour options</p>
|
@@ -101,8 +101,8 @@ export default class ButtonsDoc extends React.Component {
|
|
101
101
|
|
102
102
|
<h3 className="docs-page__h3">Sizing</h3>
|
103
103
|
<p className="docs-page__paragraph">
|
104
|
-
For the default button, no size has to be specified.
|
105
|
-
To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>.
|
104
|
+
For the default button, no size has to be specified.
|
105
|
+
To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>.
|
106
106
|
For the button to take the full width of the container add <code>expand={'{true}'}</code>.
|
107
107
|
</p>
|
108
108
|
<Markup.ReactMarkup>
|
@@ -120,7 +120,7 @@ export default class ButtonsDoc extends React.Component {
|
|
120
120
|
</div>
|
121
121
|
<div className="docs-page__content-row">
|
122
122
|
<Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
|
123
|
-
</div>
|
123
|
+
</div>
|
124
124
|
</Markup.ReactMarkupPreview>
|
125
125
|
<Markup.ReactMarkupCode>{`
|
126
126
|
<Button text="button large" size="large" onClick={()=> false} />
|
@@ -201,7 +201,7 @@ export default class ButtonsDoc extends React.Component {
|
|
201
201
|
<Button text="success" type="success" icon="ok" onClick={()=> false} />
|
202
202
|
<Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
|
203
203
|
<Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
|
204
|
-
|
204
|
+
|
205
205
|
<Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
|
206
206
|
<Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
|
207
207
|
<Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
|
@@ -217,7 +217,7 @@ export default class ButtonsDoc extends React.Component {
|
|
217
217
|
</Markup.ReactMarkup>
|
218
218
|
|
219
219
|
<h3 className="docs-page__h3">Buttons with icon font only</h3>
|
220
|
-
<p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>.
|
220
|
+
<p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>.
|
221
221
|
The specified text value will be used for the <code>aria-label</code>.</p>
|
222
222
|
<Markup.ReactMarkup>
|
223
223
|
<Markup.ReactMarkupPreview>
|
package/package.json
CHANGED
@@ -77,7 +77,11 @@ var Alert = /** @class */ (function (_super) {
|
|
77
77
|
_b["sd-alert__info-btn--".concat(this.props.type)] = this.props.type,
|
78
78
|
_b['sd-alert__info-btn--hidden'] = this.state.open,
|
79
79
|
_b));
|
80
|
-
|
80
|
+
var styles = {};
|
81
|
+
if (this.props.fullWidth) {
|
82
|
+
styles.width = '100%';
|
83
|
+
}
|
84
|
+
return (React.createElement("div", { className: 'sd-alert__container', style: styles },
|
81
85
|
React.createElement("div", { className: classesAlert },
|
82
86
|
this.props.icon ?
|
83
87
|
React.createElement("span", { className: "sd-alert__icon" },
|
@@ -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);
|
@@ -46,6 +57,7 @@ var React = __importStar(require("react"));
|
|
46
57
|
var classnames_1 = __importDefault(require("classnames"));
|
47
58
|
var Icon_1 = require("./Icon");
|
48
59
|
var Spinner_1 = require("./Spinner");
|
60
|
+
var Tooltip_1 = require("./Tooltip");
|
49
61
|
var Button = /** @class */ (function (_super) {
|
50
62
|
__extends(Button, _super);
|
51
63
|
function Button() {
|
@@ -67,11 +79,30 @@ var Button = /** @class */ (function (_super) {
|
|
67
79
|
_a['sd-flex-justify-start'] = this.props.textAlign === 'start',
|
68
80
|
_a['sd-flex-justify-end'] = this.props.textAlign === 'end',
|
69
81
|
_a));
|
70
|
-
return (React.createElement(
|
71
|
-
|
72
|
-
|
73
|
-
|
82
|
+
return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
|
83
|
+
var attributes = _a.attributes;
|
84
|
+
return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": _this.props.iconOnly ? _this.props.text : '', "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
|
85
|
+
_this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
|
86
|
+
_this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
|
87
|
+
_this.props.iconOnly ? null : _this.props.text));
|
88
|
+
}));
|
74
89
|
};
|
75
90
|
return Button;
|
76
91
|
}(React.PureComponent));
|
77
92
|
exports.Button = Button;
|
93
|
+
var TooltipWrapper = /** @class */ (function (_super) {
|
94
|
+
__extends(TooltipWrapper, _super);
|
95
|
+
function TooltipWrapper() {
|
96
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
97
|
+
}
|
98
|
+
TooltipWrapper.prototype.render = function () {
|
99
|
+
var _a = this.props, tooltipText = _a.tooltipText, children = _a.children;
|
100
|
+
return (tooltipText !== null && tooltipText !== void 0 ? tooltipText : '').length > 0
|
101
|
+
? (React.createElement(Tooltip_1.WithTooltip, { text: tooltipText }, function (_a) {
|
102
|
+
var attributes = _a.attributes;
|
103
|
+
return children({ attributes: attributes });
|
104
|
+
}))
|
105
|
+
: (React.createElement(React.Fragment, null, children({ attributes: {} })));
|
106
|
+
};
|
107
|
+
return TooltipWrapper;
|
108
|
+
}(React.PureComponent));
|
@@ -2,14 +2,22 @@ import * as React from 'react';
|
|
2
2
|
interface IProps {
|
3
3
|
text: string | undefined | null;
|
4
4
|
flow?: 'top' | 'left' | 'right' | 'down';
|
5
|
+
children(options: {
|
6
|
+
attributes: {
|
7
|
+
[name: string]: string;
|
8
|
+
};
|
9
|
+
}): React.ReactNode;
|
5
10
|
}
|
6
|
-
export declare class
|
11
|
+
export declare class WithTooltip extends React.PureComponent<IProps> {
|
7
12
|
private id;
|
8
13
|
private instance;
|
9
14
|
constructor(props: IProps);
|
10
15
|
private setupTooltip;
|
11
16
|
componentDidMount(): void;
|
12
17
|
componentDidUpdate(): void;
|
18
|
+
render(): React.ReactNode;
|
19
|
+
}
|
20
|
+
export declare class Tooltip extends React.PureComponent<Omit<IProps, 'children'>> {
|
13
21
|
render(): JSX.Element;
|
14
22
|
}
|
15
23
|
export {};
|
@@ -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);
|
@@ -41,8 +52,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
41
52
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
42
53
|
};
|
43
54
|
Object.defineProperty(exports, "__esModule", { value: true });
|
44
|
-
exports.Tooltip = void 0;
|
55
|
+
exports.Tooltip = exports.WithTooltip = void 0;
|
45
56
|
var React = __importStar(require("react"));
|
57
|
+
var react_id_generator_1 = __importDefault(require("react-id-generator"));
|
46
58
|
var tippy_js_1 = __importDefault(require("tippy.js"));
|
47
59
|
var helpers_1 = require("../helpers");
|
48
60
|
function flowToPlacement(flow) {
|
@@ -61,20 +73,22 @@ function flowToPlacement(flow) {
|
|
61
73
|
return (0, helpers_1.assertNever)(flow);
|
62
74
|
}
|
63
75
|
}
|
64
|
-
var
|
65
|
-
|
66
|
-
|
76
|
+
var tooltipAttributeName = 'data-with-tooltip';
|
77
|
+
var getTooltipSelector = function (value) { return "[".concat(tooltipAttributeName, "=").concat(value, "]"); };
|
78
|
+
var WithTooltip = /** @class */ (function (_super) {
|
79
|
+
__extends(WithTooltip, _super);
|
80
|
+
function WithTooltip(props) {
|
67
81
|
var _this = _super.call(this, props) || this;
|
68
|
-
_this.id =
|
82
|
+
_this.id = (0, react_id_generator_1.default)();
|
69
83
|
_this.instance = null;
|
70
84
|
return _this;
|
71
85
|
}
|
72
|
-
|
86
|
+
WithTooltip.prototype.setupTooltip = function () {
|
73
87
|
var _a;
|
74
88
|
var placement = flowToPlacement((_a = this.props.flow) !== null && _a !== void 0 ? _a : 'top');
|
75
89
|
var content = this.props.text;
|
76
90
|
if (this.instance == null) {
|
77
|
-
this.instance = (0, tippy_js_1.default)(
|
91
|
+
this.instance = (0, tippy_js_1.default)(getTooltipSelector(this.id), {
|
78
92
|
placement: placement,
|
79
93
|
})[0];
|
80
94
|
if (this.instance == null) {
|
@@ -106,14 +120,30 @@ var Tooltip = /** @class */ (function (_super) {
|
|
106
120
|
this.instance.show();
|
107
121
|
}
|
108
122
|
};
|
109
|
-
|
123
|
+
WithTooltip.prototype.componentDidMount = function () {
|
110
124
|
this.setupTooltip();
|
111
125
|
};
|
112
|
-
|
126
|
+
WithTooltip.prototype.componentDidUpdate = function () {
|
113
127
|
this.setupTooltip();
|
114
128
|
};
|
129
|
+
WithTooltip.prototype.render = function () {
|
130
|
+
var _a;
|
131
|
+
return this.props.children({ attributes: (_a = {}, _a[tooltipAttributeName] = this.id, _a) });
|
132
|
+
};
|
133
|
+
return WithTooltip;
|
134
|
+
}(React.PureComponent));
|
135
|
+
exports.WithTooltip = WithTooltip;
|
136
|
+
var Tooltip = /** @class */ (function (_super) {
|
137
|
+
__extends(Tooltip, _super);
|
138
|
+
function Tooltip() {
|
139
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
140
|
+
}
|
115
141
|
Tooltip.prototype.render = function () {
|
116
|
-
|
142
|
+
var _this = this;
|
143
|
+
return (React.createElement(WithTooltip, { text: this.props.text, flow: this.props.flow }, function (_a) {
|
144
|
+
var attributes = _a.attributes;
|
145
|
+
return (React.createElement("div", __assign({}, attributes, { style: { display: 'inline-flex' } }), _this.props.children));
|
146
|
+
}));
|
117
147
|
};
|
118
148
|
return Tooltip;
|
119
149
|
}(React.PureComponent));
|