superdesk-ui-framework 3.0.53 → 3.0.54

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.
Files changed (10) hide show
  1. package/app/styles/primereact/_pr-general.scss +2 -2
  2. package/app-typescript/components/SelectWithTemplate.tsx +12 -2
  3. package/app-typescript/components/avatar/avatar-image.tsx +17 -5
  4. package/dist/examples.bundle.js +27 -7
  5. package/dist/superdesk-ui.bundle.css +3 -3
  6. package/dist/superdesk-ui.bundle.js +26 -6
  7. package/package.json +1 -1
  8. package/react/components/SelectWithTemplate.d.ts +3 -0
  9. package/react/components/SelectWithTemplate.js +7 -1
  10. package/react/components/avatar/avatar-image.js +19 -5
package/app/styles/primereact/_pr-general.scss CHANGED
@@ -36,7 +36,7 @@
36
36
  @mixin pr-input-item-base {
37
37
  display: inline-flex;
38
38
  align-items: center;
39
- height: $height-input--default;
39
+ min-height: $height-input--default;
40
40
  border-bottom: 1px solid var(--color-input-border);
41
41
  background-color: var(--color-input-bg);
42
42
  font-size: 1.4rem;
@@ -48,7 +48,7 @@
48
48
  background-color: var(--color-input-bg--hover);
49
49
  border-color: var(--color-input-border-hover);
50
50
  }
51
-
51
+
52
52
  &:focus, &:focus-within, &.p-focus {
53
53
  background-color: var(--sd-colour-interactive--alpha-20);
54
54
  box-shadow: 0 1px 0 0 $sd-colour-interactive;
package/app-typescript/components/SelectWithTemplate.tsx CHANGED
@@ -12,6 +12,7 @@ interface IProps<T> extends IInputWrapper {
12
12
  onChange(value: T): void;
13
13
  areEqual(a: T, b: T): boolean; // Using reference equality for objects is error prone.
14
14
  itemTemplate: React.ComponentType<{option: T | null}>;
15
+ valueTemplate?: React.ComponentType<{option: T | null}>;
15
16
  noResultsFoundMessage: string;
16
17
  filterPlaceholder?: string;
17
18
  autoFocus?: boolean;
@@ -55,6 +56,7 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
55
56
  }
56
57
  render() {
57
58
  const ItemTemplate = this.props.itemTemplate;
59
+ const ValueTemplate = this.props.valueTemplate;
58
60
  const {loading, options} = this.state;
59
61
  const {
60
62
  value,
@@ -115,8 +117,16 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
115
117
  filterBy={labelKey}
116
118
  showClear={!required}
117
119
  emptyFilterMessage={emptyFilterMessage}
118
- valueTemplate={(option) => <ItemTemplate option={option == null ? null : option.original} />}
119
- itemTemplate={(option) => <ItemTemplate option={option.original} />}
120
+ itemTemplate={(option) => <ItemTemplate option={option?.original ?? null} />}
121
+ valueTemplate={(option) => ValueTemplate != null
122
+ ? (
123
+ <ValueTemplate option={option?.original ?? null} />
124
+
125
+ )
126
+ : (
127
+ <ItemTemplate option={option?.original ?? null} />
128
+ )
129
+ }
120
130
  disabled={disabled}
121
131
  required={required}
122
132
  autoFocus={autoFocus}
package/app-typescript/components/avatar/avatar-image.tsx CHANGED
@@ -9,19 +9,31 @@ interface IPropsImageAvatar extends IPropsBase {
9
9
  export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
10
10
  render() {
11
11
  const {imageUrl, tooltipText, onClick} = this.props;
12
- const role: string | undefined = onClick == null ? undefined : 'button';
12
+
13
+ const maybeButtonProps: React.HTMLAttributes<HTMLSpanElement> = onClick == null ? {} : {
14
+ role: 'button',
15
+ onClick: () => onClick(),
16
+ };
13
17
 
14
18
  if (imageUrl == null) {
15
19
  return (
16
- <span className="sd-avatar-content sd-avatar-content--dummy-img" title={tooltipText} role={role}>
20
+ <span
21
+ {...maybeButtonProps}
22
+ className="sd-avatar-content sd-avatar-content--dummy-img"
23
+ title={tooltipText}
24
+ >
17
25
  <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
18
- <circle cx="100" cy="100" r="100" fill="white" fill-opacity="0.01"/>
19
- <path fill-rule="evenodd" clip-rule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fill-opacity="1"/>
26
+ <circle cx="100" cy="100" r="100" fill="white" fillOpacity="0.01"/>
27
+ <path fillRule="evenodd" clipRule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fillOpacity="1"/>
20
28
  </svg>
21
29
  </span>);
22
30
  } else {
23
31
  return (
24
- <span className="sd-avatar-content" title={tooltipText} role={role}>
32
+ <span
33
+ {...maybeButtonProps}
34
+ className="sd-avatar-content"
35
+ title={tooltipText}
36
+ >
25
37
  <img src={imageUrl} />
26
38
  </span>
27
39
  );
package/dist/examples.bundle.js CHANGED
@@ -39175,6 +39175,17 @@ var __extends = (this && this.__extends) || (function () {
39175
39175
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
39176
39176
  };
39177
39177
  })();
39178
+ var __assign = (this && this.__assign) || function () {
39179
+ __assign = Object.assign || function(t) {
39180
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
39181
+ s = arguments[i];
39182
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
39183
+ t[p] = s[p];
39184
+ }
39185
+ return t;
39186
+ };
39187
+ return __assign.apply(this, arguments);
39188
+ };
39178
39189
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
39179
39190
  if (k2 === undefined) k2 = k;
39180
39191
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39208,15 +39219,18 @@ var AvatarContentImage = /** @class */ (function (_super) {
39208
39219
  }
39209
39220
  AvatarContentImage.prototype.render = function () {
39210
39221
  var _a = this.props, imageUrl = _a.imageUrl, tooltipText = _a.tooltipText, onClick = _a.onClick;
39211
- var role = onClick == null ? undefined : 'button';
39222
+ var maybeButtonProps = onClick == null ? {} : {
39223
+ role: 'button',
39224
+ onClick: function () { return onClick(); },
39225
+ };
39212
39226
  if (imageUrl == null) {
39213
- return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText, role: role },
39227
+ return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
39214
39228
  React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
39215
- React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", "fill-opacity": "0.01" }),
39216
- React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", "fill-opacity": "1" }))));
39229
+ React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
39230
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
39217
39231
  }
39218
39232
  else {
39219
- return (React.createElement("span", { className: "sd-avatar-content", title: tooltipText, role: role },
39233
+ return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content", title: tooltipText }),
39220
39234
  React.createElement("img", { src: imageUrl })));
39221
39235
  }
39222
39236
  };
@@ -67428,6 +67442,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
67428
67442
  var _this = this;
67429
67443
  var _a;
67430
67444
  var ItemTemplate = this.props.itemTemplate;
67445
+ var ValueTemplate = this.props.valueTemplate;
67431
67446
  var _b = this.state, loading = _b.loading, options = _b.options;
67432
67447
  var _c = this.props, value = _c.value, onChange = _c.onChange, getLabel = _c.getLabel, disabled = _c.disabled, required = _c.required, zIndex = _c.zIndex, autoFocus = _c.autoFocus, areEqual = _c.areEqual, getItems = _c.getItems, emptyFilterMessage = _c.noResultsFoundMessage, filterPlaceholder = _c.filterPlaceholder, width = _c.width;
67433
67448
  // Using another data structure so it is possible to have getLabel function
@@ -67451,7 +67466,12 @@ var SelectWithTemplate = /** @class */ (function (_super) {
67451
67466
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
67452
67467
  React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
67453
67468
  onChange(e.value == null ? null : e.value.original);
67454
- }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
67469
+ }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
67470
+ var _a, _b;
67471
+ return ValueTemplate != null
67472
+ ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }))
67473
+ : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
67474
+ }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
67455
67475
  _this.setState({ loading: true });
67456
67476
  getItems(searchString).then(function (_options) {
67457
67477
  _this.setState({ options: _options, loading: false });
@@ -143444,7 +143464,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
143444
143464
  /* 689 */
143445
143465
  /***/ (function(module, exports) {
143446
143466
 
143447
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.53","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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","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/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","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","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
143467
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.54","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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","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/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","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","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
143448
143468
 
143449
143469
  /***/ }),
143450
143470
  /* 690 */
package/dist/superdesk-ui.bundle.css CHANGED
@@ -63543,7 +63543,7 @@ i.sd-sidetab-menu__helper-icon {
63543
63543
  .p-dropdown {
63544
63544
  display: inline-flex;
63545
63545
  align-items: center;
63546
- height: 3.2rem;
63546
+ min-height: 3.2rem;
63547
63547
  border-bottom: 1px solid var(--color-input-border);
63548
63548
  background-color: var(--color-input-bg);
63549
63549
  font-size: 1.4rem;
@@ -63566,7 +63566,7 @@ i.sd-sidetab-menu__helper-icon {
63566
63566
  .p-multiselect {
63567
63567
  display: inline-flex;
63568
63568
  align-items: center;
63569
- height: 3.2rem;
63569
+ min-height: 3.2rem;
63570
63570
  border-bottom: 1px solid var(--color-input-border);
63571
63571
  background-color: var(--color-input-bg);
63572
63572
  font-size: 1.4rem;
@@ -63891,7 +63891,7 @@ i.sd-sidetab-menu__helper-icon {
63891
63891
  .p-calendar {
63892
63892
  display: inline-flex;
63893
63893
  align-items: center;
63894
- height: 3.2rem;
63894
+ min-height: 3.2rem;
63895
63895
  border-bottom: 1px solid var(--color-input-border);
63896
63896
  background-color: var(--color-input-bg);
63897
63897
  font-size: 1.4rem;
package/dist/superdesk-ui.bundle.js CHANGED
@@ -38819,6 +38819,17 @@ var __extends = (this && this.__extends) || (function () {
38819
38819
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
38820
38820
  };
38821
38821
  })();
38822
+ var __assign = (this && this.__assign) || function () {
38823
+ __assign = Object.assign || function(t) {
38824
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
38825
+ s = arguments[i];
38826
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
38827
+ t[p] = s[p];
38828
+ }
38829
+ return t;
38830
+ };
38831
+ return __assign.apply(this, arguments);
38832
+ };
38822
38833
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
38823
38834
  if (k2 === undefined) k2 = k;
38824
38835
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -38852,15 +38863,18 @@ var AvatarContentImage = /** @class */ (function (_super) {
38852
38863
  }
38853
38864
  AvatarContentImage.prototype.render = function () {
38854
38865
  var _a = this.props, imageUrl = _a.imageUrl, tooltipText = _a.tooltipText, onClick = _a.onClick;
38855
- var role = onClick == null ? undefined : 'button';
38866
+ var maybeButtonProps = onClick == null ? {} : {
38867
+ role: 'button',
38868
+ onClick: function () { return onClick(); },
38869
+ };
38856
38870
  if (imageUrl == null) {
38857
- return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText, role: role },
38871
+ return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
38858
38872
  React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
38859
- React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", "fill-opacity": "0.01" }),
38860
- React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", "fill-opacity": "1" }))));
38873
+ React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
38874
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
38861
38875
  }
38862
38876
  else {
38863
- return (React.createElement("span", { className: "sd-avatar-content", title: tooltipText, role: role },
38877
+ return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content", title: tooltipText }),
38864
38878
  React.createElement("img", { src: imageUrl })));
38865
38879
  }
38866
38880
  };
@@ -66689,6 +66703,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
66689
66703
  var _this = this;
66690
66704
  var _a;
66691
66705
  var ItemTemplate = this.props.itemTemplate;
66706
+ var ValueTemplate = this.props.valueTemplate;
66692
66707
  var _b = this.state, loading = _b.loading, options = _b.options;
66693
66708
  var _c = this.props, value = _c.value, onChange = _c.onChange, getLabel = _c.getLabel, disabled = _c.disabled, required = _c.required, zIndex = _c.zIndex, autoFocus = _c.autoFocus, areEqual = _c.areEqual, getItems = _c.getItems, emptyFilterMessage = _c.noResultsFoundMessage, filterPlaceholder = _c.filterPlaceholder, width = _c.width;
66694
66709
  // Using another data structure so it is possible to have getLabel function
@@ -66712,7 +66727,12 @@ var SelectWithTemplate = /** @class */ (function (_super) {
66712
66727
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
66713
66728
  React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
66714
66729
  onChange(e.value == null ? null : e.value.original);
66715
- }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
66730
+ }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
66731
+ var _a, _b;
66732
+ return ValueTemplate != null
66733
+ ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }))
66734
+ : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
66735
+ }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
66716
66736
  _this.setState({ loading: true });
66717
66737
  getItems(searchString).then(function (_options) {
66718
66738
  _this.setState({ options: _options, loading: false });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.53",
3
+ "version": "3.0.54",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/SelectWithTemplate.d.ts CHANGED
@@ -10,6 +10,9 @@ interface IProps<T> extends IInputWrapper {
10
10
  itemTemplate: React.ComponentType<{
11
11
  option: T | null;
12
12
  }>;
13
+ valueTemplate?: React.ComponentType<{
14
+ option: T | null;
15
+ }>;
13
16
  noResultsFoundMessage: string;
14
17
  filterPlaceholder?: string;
15
18
  autoFocus?: boolean;
package/react/components/SelectWithTemplate.js CHANGED
@@ -75,6 +75,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
75
75
  var _this = this;
76
76
  var _a;
77
77
  var ItemTemplate = this.props.itemTemplate;
78
+ var ValueTemplate = this.props.valueTemplate;
78
79
  var _b = this.state, loading = _b.loading, options = _b.options;
79
80
  var _c = this.props, value = _c.value, onChange = _c.onChange, getLabel = _c.getLabel, disabled = _c.disabled, required = _c.required, zIndex = _c.zIndex, autoFocus = _c.autoFocus, areEqual = _c.areEqual, getItems = _c.getItems, emptyFilterMessage = _c.noResultsFoundMessage, filterPlaceholder = _c.filterPlaceholder, width = _c.width;
80
81
  // Using another data structure so it is possible to have getLabel function
@@ -98,7 +99,12 @@ var SelectWithTemplate = /** @class */ (function (_super) {
98
99
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
99
100
  React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
100
101
  onChange(e.value == null ? null : e.value.original);
101
- }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
102
+ }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
103
+ var _a, _b;
104
+ return ValueTemplate != null
105
+ ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }))
106
+ : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
107
+ }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
102
108
  _this.setState({ loading: true });
103
109
  getItems(searchString).then(function (_options) {
104
110
  _this.setState({ options: _options, loading: false });
package/react/components/avatar/avatar-image.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);
@@ -47,15 +58,18 @@ var AvatarContentImage = /** @class */ (function (_super) {
47
58
  }
48
59
  AvatarContentImage.prototype.render = function () {
49
60
  var _a = this.props, imageUrl = _a.imageUrl, tooltipText = _a.tooltipText, onClick = _a.onClick;
50
- var role = onClick == null ? undefined : 'button';
61
+ var maybeButtonProps = onClick == null ? {} : {
62
+ role: 'button',
63
+ onClick: function () { return onClick(); },
64
+ };
51
65
  if (imageUrl == null) {
52
- return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText, role: role },
66
+ return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
53
67
  React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
54
- React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", "fill-opacity": "0.01" }),
55
- React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", "fill-opacity": "1" }))));
68
+ React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
69
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
56
70
  }
57
71
  else {
58
- return (React.createElement("span", { className: "sd-avatar-content", title: tooltipText, role: role },
72
+ return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content", title: tooltipText }),
59
73
  React.createElement("img", { src: imageUrl })));
60
74
  }
61
75
  };