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.
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "4.0.28",
3
+ "version": "4.0.30",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -7,6 +7,7 @@ interface IProps {
7
7
  icon?: string;
8
8
  banner?: boolean;
9
9
  margin?: 'none' | 'small' | 'normal' | 'large';
10
+ fullWidth?: boolean;
10
11
  }
11
12
  interface IState {
12
13
  open: boolean;
@@ -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
- return (React.createElement("div", { className: 'sd-alert__container' },
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("button", { 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'], title: this.props.tooltip, style: this.props.noMargin ? { margin: 0 } : undefined },
71
- this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
72
- this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: this.props.icon }) : null,
73
- this.props.iconOnly ? null : this.props.text));
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 Tooltip extends React.PureComponent<IProps> {
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 Tooltip = /** @class */ (function (_super) {
65
- __extends(Tooltip, _super);
66
- function Tooltip(props) {
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 = 'tooltip-' + Math.random().toString().slice(2);
82
+ _this.id = (0, react_id_generator_1.default)();
69
83
  _this.instance = null;
70
84
  return _this;
71
85
  }
72
- Tooltip.prototype.setupTooltip = function () {
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)('#' + this.id, {
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
- Tooltip.prototype.componentDidMount = function () {
123
+ WithTooltip.prototype.componentDidMount = function () {
110
124
  this.setupTooltip();
111
125
  };
112
- Tooltip.prototype.componentDidUpdate = function () {
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
- return (React.createElement("div", { id: this.id, style: { display: 'inline-flex' } }, this.props.children));
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));