superdesk-ui-framework 4.0.12 → 4.0.14

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 (12) hide show
  1. package/app-typescript/components/DateTimePicker.tsx +3 -3
  2. package/app-typescript/components/TreeSelect/TreeSelect.tsx +14 -1
  3. package/dist/components/DateTimePicker.tsx +1 -0
  4. package/dist/components/TreeSelect.tsx +10 -15
  5. package/dist/examples.bundle.js +25 -22
  6. package/dist/superdesk-ui.bundle.js +11 -4
  7. package/examples/pages/components/DateTimePicker.tsx +1 -0
  8. package/examples/pages/components/TreeSelect.tsx +10 -15
  9. package/package.json +1 -1
  10. package/react/components/DateTimePicker.js +3 -3
  11. package/react/components/TreeSelect/TreeSelect.d.ts +1 -0
  12. package/react/components/TreeSelect/TreeSelect.js +8 -1
package/app-typescript/components/DateTimePicker.tsx CHANGED
@@ -58,8 +58,8 @@ export class DateTimePicker extends React.PureComponent<IProps> {
58
58
  : '';
59
59
 
60
60
  return (
61
- <div style={{width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH}}>
62
- <Spacer h gap="0" noGrow alignItems='end'>
61
+ <div style={{width: this.props.width ? this.props.width : MIN_WIDTH}}>
62
+ <Spacer h gap="8" alignItems='end'>
63
63
  <DatePicker
64
64
  disabled={this.props.disabled}
65
65
  preview={this.props.preview}
@@ -91,7 +91,7 @@ export class DateTimePicker extends React.PureComponent<IProps> {
91
91
  {this.props.preview !== true && (
92
92
  <IconButton
93
93
  disabled={this.props.disabled}
94
- icon='close-small'
94
+ icon='remove-sign'
95
95
  onClick={() => {
96
96
  this.props.onChange(null);
97
97
  }}
package/app-typescript/components/TreeSelect/TreeSelect.tsx CHANGED
@@ -96,6 +96,13 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
96
96
  private popperInstance: Instance | null;
97
97
  private zIndex: number = getNextZIndex();
98
98
 
99
+ /*
100
+ * This variable is used to distinguish changes coming from outside (from props.value)
101
+ * from those made by the user through interaction with the component.
102
+ * It prevents triggering `onChange` when `props.value` updates externally.
103
+ */
104
+ private changesFromOutside: boolean;
105
+
99
106
  constructor(props: IProps<T>) {
100
107
  super(props);
101
108
  this.state = {
@@ -133,6 +140,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
133
140
  this.treeSelectRef = React.createRef();
134
141
  this.popperInstance = null;
135
142
  this.onDragEnd = this.onDragEnd.bind(this);
143
+ this.changesFromOutside = false;
136
144
  }
137
145
 
138
146
  inputFocus = () => {
@@ -212,8 +220,13 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
212
220
 
213
221
  componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
214
222
  if (!isEqual(prevState.value, this.state.value)) {
215
- this.props.onChange(this.state.value);
223
+ if (this.changesFromOutside) {
224
+ this.changesFromOutside = false;
225
+ } else {
226
+ this.props.onChange(this.state.value);
227
+ }
216
228
  } else if (!isEqual(prevProps.value, this.props.value)) {
229
+ this.changesFromOutside = true;
217
230
  this.setState({
218
231
  value: this.props.value ?? [],
219
232
  });
package/dist/components/DateTimePicker.tsx CHANGED
@@ -17,6 +17,7 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
17
17
  label={{text: "Planning date"}}
18
18
  value={this.state.dateTime}
19
19
  dateFormat="YYYY-MM-DD"
20
+ width="100%"
20
21
  onChange={(val) => {
21
22
  const parsedVal = val != null ? new Date(val) : null;
22
23
 
package/dist/components/TreeSelect.tsx CHANGED
@@ -12,7 +12,7 @@ interface IState {
12
12
  arr: any;
13
13
  }
14
14
 
15
- let options = [
15
+ const multiSelectOptions = [
16
16
  {
17
17
  value: {name: 'Category1'},
18
18
  children: [
@@ -93,7 +93,7 @@ let options = [
93
93
  },
94
94
  ]
95
95
 
96
- let options2 = [
96
+ const singleSelectOptions = [
97
97
  {
98
98
  value: {name: 'Category1', border: 'red'},
99
99
  children: [
@@ -169,9 +169,6 @@ let options2 = [
169
169
  },
170
170
  ]
171
171
 
172
- let fetchedArr = [];
173
- fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data);
174
-
175
172
  type ICancelFn = () => void;
176
173
 
177
174
  function searchOptions(
@@ -181,9 +178,7 @@ function searchOptions(
181
178
  let timeout = setTimeout(() => {
182
179
 
183
180
  callback(
184
- fetchedArr
185
- .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
186
- .map((item) => ({value: item})),
181
+ multiSelectOptions.filter((item: any) => item.value.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
187
182
  );
188
183
  }, 1000);
189
184
 
@@ -198,8 +193,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
198
193
  this.state = {
199
194
  value: [],
200
195
  value2: [],
201
- options: options,
202
- options2: options,
196
+ options: multiSelectOptions,
197
+ options2: multiSelectOptions,
203
198
  inputValue: '',
204
199
  arr: []
205
200
  }
@@ -244,7 +239,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
244
239
  <TreeSelect
245
240
  kind='synchronous'
246
241
  value={[{name: 'Category1'}]}
247
- getOptions={() => options}
242
+ getOptions={() => multiSelectOptions}
248
243
  getId={(item) => item.name}
249
244
  getLabel={(item) => item.name}
250
245
  selectBranchWithChildren
@@ -300,7 +295,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
300
295
  <TreeSelect
301
296
  kind='synchronous'
302
297
  value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
303
- getOptions={() => options}
298
+ getOptions={() => multiSelectOptions}
304
299
  getId={(item) => item.name}
305
300
  getLabel={(item) => item.name}
306
301
  selectBranchWithChildren
@@ -358,8 +353,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
358
353
  <TreeSelect
359
354
  kind="asynchronous"
360
355
  value={this.state.value}
361
- getLabel={({display_name}) => display_name}
362
- getId={({display_name}) => display_name}
356
+ getLabel={({name}) => name}
357
+ getId={({name}) => name}
363
358
  selectBranchWithChildren
364
359
  allowMultiple
365
360
  searchOptions={searchOptions}
@@ -400,7 +395,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
400
395
  <TreeSelect
401
396
  kind='synchronous'
402
397
  value={[]}
403
- getOptions={() => options2}
398
+ getOptions={() => singleSelectOptions}
404
399
  getLabel={(item) => item.name}
405
400
  getId={(item) => item.name}
406
401
  getBorderColor={(item) => item.border}
package/dist/examples.bundle.js CHANGED
@@ -79164,6 +79164,7 @@ var TreeSelect = /** @class */ (function (_super) {
79164
79164
  _this.treeSelectRef = React.createRef();
79165
79165
  _this.popperInstance = null;
79166
79166
  _this.onDragEnd = _this.onDragEnd.bind(_this);
79167
+ _this.changesFromOutside = false;
79167
79168
  return _this;
79168
79169
  }
79169
79170
  TreeSelect.prototype.componentWillUnmount = function () {
@@ -79174,9 +79175,15 @@ var TreeSelect = /** @class */ (function (_super) {
79174
79175
  TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
79175
79176
  var _a, _b;
79176
79177
  if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
79177
- this.props.onChange(this.state.value);
79178
+ if (this.changesFromOutside) {
79179
+ this.changesFromOutside = false;
79180
+ }
79181
+ else {
79182
+ this.props.onChange(this.state.value);
79183
+ }
79178
79184
  }
79179
79185
  else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
79186
+ this.changesFromOutside = true;
79180
79187
  this.setState({
79181
79188
  value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
79182
79189
  });
@@ -124128,15 +124135,15 @@ var DateTimePicker = /** @class */ (function (_super) {
124128
124135
  var convertedTimeValue = this.props.value != null
124129
124136
  ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
124130
124137
  : '';
124131
- return (React.createElement("div", { style: { width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH } },
124132
- React.createElement(common_1.Spacer, { h: true, gap: "0", noGrow: true, alignItems: 'end' },
124138
+ return (React.createElement("div", { style: { width: this.props.width ? this.props.width : MIN_WIDTH } },
124139
+ React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: 'end' },
124133
124140
  React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {
124134
124141
  _this.handleDateChange(val);
124135
124142
  }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth }),
124136
124143
  React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
124137
124144
  _this.handleTimeChange(val);
124138
124145
  }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required }),
124139
- this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'close-small', onClick: function () {
124146
+ this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'remove-sign', onClick: function () {
124140
124147
  _this.props.onChange(null);
124141
124148
  }, ariaValue: 'Clear' })))));
124142
124149
  };
@@ -171965,7 +171972,7 @@ var DateTimePickerExample = /** @class */ (function (_super) {
171965
171972
  }
171966
171973
  DateTimePickerExample.prototype.render = function () {
171967
171974
  var _this = this;
171968
- return (React.createElement(app_typescript_1.DateTimePicker, { label: { text: "Planning date" }, value: this.state.dateTime, dateFormat: "YYYY-MM-DD", onChange: function (val) {
171975
+ return (React.createElement(app_typescript_1.DateTimePicker, { label: { text: "Planning date" }, value: this.state.dateTime, dateFormat: "YYYY-MM-DD", width: "100%", onChange: function (val) {
171969
171976
  var parsedVal = val != null ? new Date(val) : null;
171970
171977
  _this.setState({ dateTime: parsedVal });
171971
171978
  } }));
@@ -181136,7 +181143,7 @@ var React = __importStar(__webpack_require__(0));
181136
181143
  var Markup = __importStar(__webpack_require__(8));
181137
181144
  var app_typescript_1 = __webpack_require__(5);
181138
181145
  var TreeSelect_1 = __webpack_require__(383);
181139
- var options = [
181146
+ var multiSelectOptions = [
181140
181147
  {
181141
181148
  value: { name: 'Category1' },
181142
181149
  children: [
@@ -181215,7 +181222,7 @@ var options = [
181215
181222
  ]
181216
181223
  },
181217
181224
  ];
181218
- var options2 = [
181225
+ var singleSelectOptions = [
181219
181226
  {
181220
181227
  value: { name: 'Category1', border: 'red' },
181221
181228
  children: [
@@ -181286,13 +181293,9 @@ var options2 = [
181286
181293
  ]
181287
181294
  },
181288
181295
  ];
181289
- var fetchedArr = [];
181290
- fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(function (response) { return response.json(); }).then(function (data) { return fetchedArr = data; });
181291
181296
  function searchOptions(term, callback) {
181292
181297
  var timeout = setTimeout(function () {
181293
- callback(fetchedArr
181294
- .filter(function (item) { return item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()); })
181295
- .map(function (item) { return ({ value: item }); }));
181298
+ callback(multiSelectOptions.filter(function (item) { return item.value.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()); }));
181296
181299
  }, 1000);
181297
181300
  return function () {
181298
181301
  clearTimeout(timeout);
@@ -181305,8 +181308,8 @@ var TreeSelectDocs = /** @class */ (function (_super) {
181305
181308
  _this.state = {
181306
181309
  value: [],
181307
181310
  value2: [],
181308
- options: options,
181309
- options2: options,
181311
+ options: multiSelectOptions,
181312
+ options2: multiSelectOptions,
181310
181313
  inputValue: '',
181311
181314
  arr: []
181312
181315
  };
@@ -181331,7 +181334,7 @@ var TreeSelectDocs = /** @class */ (function (_super) {
181331
181334
  React.createElement(Markup.ReactMarkupPreview, null,
181332
181335
  React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
181333
181336
  React.createElement("div", { className: 'form__row' },
181334
- React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }], getOptions: function () { return options; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, label: 'TreeSelect Label', info: 'Info Message', searchPlaceholder: 'Search...', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
181337
+ React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }], getOptions: function () { return multiSelectOptions; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, label: 'TreeSelect Label', info: 'Info Message', searchPlaceholder: 'Search...', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
181335
181338
  return (React.createElement(Wrapper, { backgroundColor: item.bgColor },
181336
181339
  React.createElement("span", null, item.name)));
181337
181340
  }, onChange: function (e) { return false; } })))),
@@ -181341,7 +181344,7 @@ var TreeSelectDocs = /** @class */ (function (_super) {
181341
181344
  React.createElement(Markup.ReactMarkupPreview, null,
181342
181345
  React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
181343
181346
  React.createElement("div", { className: 'form__row' },
181344
- React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }, { name: 'Category2' }, { name: 'Category3' }], getOptions: function () { return options; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, sortable: true, label: 'TreeSelect Label', info: 'Info Message', searchPlaceholder: 'Search...', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
181347
+ React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }, { name: 'Category2' }, { name: 'Category3' }], getOptions: function () { return multiSelectOptions; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, sortable: true, label: 'TreeSelect Label', info: 'Info Message', searchPlaceholder: 'Search...', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
181345
181348
  return (React.createElement(Wrapper, { backgroundColor: item.bgColor },
181346
181349
  React.createElement("span", null, item.name)));
181347
181350
  }, onChange: function (e) { return false; } })))),
@@ -181352,11 +181355,11 @@ var TreeSelectDocs = /** @class */ (function (_super) {
181352
181355
  React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
181353
181356
  React.createElement("div", { className: 'form__row' },
181354
181357
  React.createElement(TreeSelect_1.TreeSelect, { kind: "asynchronous", value: this.state.value, getLabel: function (_a) {
181355
- var display_name = _a.display_name;
181356
- return display_name;
181358
+ var name = _a.name;
181359
+ return name;
181357
181360
  }, getId: function (_a) {
181358
- var display_name = _a.display_name;
181359
- return display_name;
181361
+ var name = _a.name;
181362
+ return name;
181360
181363
  }, selectBranchWithChildren: true, allowMultiple: true, searchOptions: searchOptions, label: 'TreeSelect Label', info: 'Info Message', onChange: function (val) {
181361
181364
  _this.setState({ value: val });
181362
181365
  } })))),
@@ -181366,7 +181369,7 @@ var TreeSelectDocs = /** @class */ (function (_super) {
181366
181369
  React.createElement(Markup.ReactMarkupPreview, null,
181367
181370
  React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
181368
181371
  React.createElement("div", { className: 'form__row' },
181369
- React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [], getOptions: function () { return options2; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, getBorderColor: function (item) { return item.border; }, selectBranchWithChildren: true, label: 'TreeSelect Label', info: 'Info Message', placeholder: 'Select one', optionTemplate: function (item) {
181372
+ React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [], getOptions: function () { return singleSelectOptions; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, getBorderColor: function (item) { return item.border; }, selectBranchWithChildren: true, label: 'TreeSelect Label', info: 'Info Message', placeholder: 'Select one', optionTemplate: function (item) {
181370
181373
  return React.createElement("div", null,
181371
181374
  "Label: ",
181372
181375
  item.name);
@@ -185401,7 +185404,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
185401
185404
  /* 938 */
185402
185405
  /***/ (function(module, exports) {
185403
185406
 
185404
- module.exports = {"name":"superdesk-ui-framework","version":"4.0.12","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"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
185407
+ module.exports = {"name":"superdesk-ui-framework","version":"4.0.14","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"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
185405
185408
 
185406
185409
  /***/ }),
185407
185410
  /* 939 */
package/dist/superdesk-ui.bundle.js CHANGED
@@ -78285,6 +78285,7 @@ var TreeSelect = /** @class */ (function (_super) {
78285
78285
  _this.treeSelectRef = React.createRef();
78286
78286
  _this.popperInstance = null;
78287
78287
  _this.onDragEnd = _this.onDragEnd.bind(_this);
78288
+ _this.changesFromOutside = false;
78288
78289
  return _this;
78289
78290
  }
78290
78291
  TreeSelect.prototype.componentWillUnmount = function () {
@@ -78295,9 +78296,15 @@ var TreeSelect = /** @class */ (function (_super) {
78295
78296
  TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
78296
78297
  var _a, _b;
78297
78298
  if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
78298
- this.props.onChange(this.state.value);
78299
+ if (this.changesFromOutside) {
78300
+ this.changesFromOutside = false;
78301
+ }
78302
+ else {
78303
+ this.props.onChange(this.state.value);
78304
+ }
78299
78305
  }
78300
78306
  else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
78307
+ this.changesFromOutside = true;
78301
78308
  this.setState({
78302
78309
  value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
78303
78310
  });
@@ -123249,15 +123256,15 @@ var DateTimePicker = /** @class */ (function (_super) {
123249
123256
  var convertedTimeValue = this.props.value != null
123250
123257
  ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
123251
123258
  : '';
123252
- return (React.createElement("div", { style: { width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH } },
123253
- React.createElement(common_1.Spacer, { h: true, gap: "0", noGrow: true, alignItems: 'end' },
123259
+ return (React.createElement("div", { style: { width: this.props.width ? this.props.width : MIN_WIDTH } },
123260
+ React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: 'end' },
123254
123261
  React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {
123255
123262
  _this.handleDateChange(val);
123256
123263
  }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth }),
123257
123264
  React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
123258
123265
  _this.handleTimeChange(val);
123259
123266
  }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required }),
123260
- this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'close-small', onClick: function () {
123267
+ this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'remove-sign', onClick: function () {
123261
123268
  _this.props.onChange(null);
123262
123269
  }, ariaValue: 'Clear' })))));
123263
123270
  };
package/examples/pages/components/DateTimePicker.tsx CHANGED
@@ -17,6 +17,7 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
17
17
  label={{text: "Planning date"}}
18
18
  value={this.state.dateTime}
19
19
  dateFormat="YYYY-MM-DD"
20
+ width="100%"
20
21
  onChange={(val) => {
21
22
  const parsedVal = val != null ? new Date(val) : null;
22
23
 
package/examples/pages/components/TreeSelect.tsx CHANGED
@@ -12,7 +12,7 @@ interface IState {
12
12
  arr: any;
13
13
  }
14
14
 
15
- let options = [
15
+ const multiSelectOptions = [
16
16
  {
17
17
  value: {name: 'Category1'},
18
18
  children: [
@@ -93,7 +93,7 @@ let options = [
93
93
  },
94
94
  ]
95
95
 
96
- let options2 = [
96
+ const singleSelectOptions = [
97
97
  {
98
98
  value: {name: 'Category1', border: 'red'},
99
99
  children: [
@@ -169,9 +169,6 @@ let options2 = [
169
169
  },
170
170
  ]
171
171
 
172
- let fetchedArr = [];
173
- fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data);
174
-
175
172
  type ICancelFn = () => void;
176
173
 
177
174
  function searchOptions(
@@ -181,9 +178,7 @@ function searchOptions(
181
178
  let timeout = setTimeout(() => {
182
179
 
183
180
  callback(
184
- fetchedArr
185
- .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
186
- .map((item) => ({value: item})),
181
+ multiSelectOptions.filter((item: any) => item.value.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
187
182
  );
188
183
  }, 1000);
189
184
 
@@ -198,8 +193,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
198
193
  this.state = {
199
194
  value: [],
200
195
  value2: [],
201
- options: options,
202
- options2: options,
196
+ options: multiSelectOptions,
197
+ options2: multiSelectOptions,
203
198
  inputValue: '',
204
199
  arr: []
205
200
  }
@@ -244,7 +239,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
244
239
  <TreeSelect
245
240
  kind='synchronous'
246
241
  value={[{name: 'Category1'}]}
247
- getOptions={() => options}
242
+ getOptions={() => multiSelectOptions}
248
243
  getId={(item) => item.name}
249
244
  getLabel={(item) => item.name}
250
245
  selectBranchWithChildren
@@ -300,7 +295,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
300
295
  <TreeSelect
301
296
  kind='synchronous'
302
297
  value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
303
- getOptions={() => options}
298
+ getOptions={() => multiSelectOptions}
304
299
  getId={(item) => item.name}
305
300
  getLabel={(item) => item.name}
306
301
  selectBranchWithChildren
@@ -358,8 +353,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
358
353
  <TreeSelect
359
354
  kind="asynchronous"
360
355
  value={this.state.value}
361
- getLabel={({display_name}) => display_name}
362
- getId={({display_name}) => display_name}
356
+ getLabel={({name}) => name}
357
+ getId={({name}) => name}
363
358
  selectBranchWithChildren
364
359
  allowMultiple
365
360
  searchOptions={searchOptions}
@@ -400,7 +395,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
400
395
  <TreeSelect
401
396
  kind='synchronous'
402
397
  value={[]}
403
- getOptions={() => options2}
398
+ getOptions={() => singleSelectOptions}
404
399
  getLabel={(item) => item.name}
405
400
  getId={(item) => item.name}
406
401
  getBorderColor={(item) => item.border}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "4.0.12",
3
+ "version": "4.0.14",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/DateTimePicker.js CHANGED
@@ -78,15 +78,15 @@ var DateTimePicker = /** @class */ (function (_super) {
78
78
  var convertedTimeValue = this.props.value != null
79
79
  ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
80
80
  : '';
81
- return (React.createElement("div", { style: { width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH } },
82
- React.createElement(common_1.Spacer, { h: true, gap: "0", noGrow: true, alignItems: 'end' },
81
+ return (React.createElement("div", { style: { width: this.props.width ? this.props.width : MIN_WIDTH } },
82
+ React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: 'end' },
83
83
  React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {
84
84
  _this.handleDateChange(val);
85
85
  }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth }),
86
86
  React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
87
87
  _this.handleTimeChange(val);
88
88
  }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required }),
89
- this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'close-small', onClick: function () {
89
+ this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'remove-sign', onClick: function () {
90
90
  _this.props.onChange(null);
91
91
  }, ariaValue: 'Clear' })))));
92
92
  };
package/react/components/TreeSelect/TreeSelect.d.ts CHANGED
@@ -63,6 +63,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
63
63
  private htmlId;
64
64
  private popperInstance;
65
65
  private zIndex;
66
+ private changesFromOutside;
66
67
  constructor(props: IProps<T>);
67
68
  inputFocus: () => void;
68
69
  listNavigation: () => void;
package/react/components/TreeSelect/TreeSelect.js CHANGED
@@ -179,6 +179,7 @@ var TreeSelect = /** @class */ (function (_super) {
179
179
  _this.treeSelectRef = React.createRef();
180
180
  _this.popperInstance = null;
181
181
  _this.onDragEnd = _this.onDragEnd.bind(_this);
182
+ _this.changesFromOutside = false;
182
183
  return _this;
183
184
  }
184
185
  TreeSelect.prototype.componentWillUnmount = function () {
@@ -189,9 +190,15 @@ var TreeSelect = /** @class */ (function (_super) {
189
190
  TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
190
191
  var _a, _b;
191
192
  if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
192
- this.props.onChange(this.state.value);
193
+ if (this.changesFromOutside) {
194
+ this.changesFromOutside = false;
195
+ }
196
+ else {
197
+ this.props.onChange(this.state.value);
198
+ }
193
199
  }
194
200
  else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
201
+ this.changesFromOutside = true;
195
202
  this.setState({
196
203
  value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
197
204
  });