superdesk-ui-framework 3.0.1-beta.4 → 3.0.1-beta.5

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 (9) hide show
  1. package/app-typescript/components/DurationInput.tsx +83 -61
  2. package/app-typescript/components/Form/InputNew.tsx +3 -1
  3. package/dist/examples.bundle.js +129 -109
  4. package/dist/superdesk-ui.bundle.js +117 -97
  5. package/package.json +1 -1
  6. package/patches/@superdesk+primereact+5.0.2-4.patch +10 -1
  7. package/react/components/DurationInput.d.ts +5 -2
  8. package/react/components/DurationInput.js +74 -56
  9. package/react/components/Form/InputNew.js +3 -1
package/react/components/DurationInput.js CHANGED
@@ -37,59 +37,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
- exports.DurationInput = void 0;
40
+ exports.getDurationString = exports.DurationInput = void 0;
41
41
  var React = __importStar(require("react"));
42
42
  var classnames_1 = __importDefault(require("classnames"));
43
43
  var moment_1 = __importDefault(require("moment"));
44
44
  var react_id_generator_1 = __importDefault(require("react-id-generator"));
45
+ var Form_1 = require("./Form");
45
46
  var DurationInput = /** @class */ (function (_super) {
46
47
  __extends(DurationInput, _super);
47
48
  function DurationInput(props) {
48
- var _a;
49
49
  var _this = _super.call(this, props) || this;
50
+ _this.htmlId = (0, react_id_generator_1.default)();
50
51
  _this.state = {
51
- hours: _this.props.hours ? _this.zerPad(_this.props.hours) : _this.zerPad(0),
52
- minutes: _this.props.minutes ? _this.zerPad(_this.props.minutes) : _this.zerPad(0),
53
- seconds: _this.props.seconds ? _this.zerPad(_this.props.seconds) : _this.zerPad(0),
54
- invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
52
+ hours: _this.stateUpdate('hours', _this.props.hours, _this.props.minutes, _this.props.seconds),
53
+ minutes: _this.stateUpdate('minutes', _this.props.minutes, _this.props.seconds),
54
+ seconds: _this.stateUpdate('seconds', _this.props.seconds),
55
55
  };
56
56
  _this.hourRef = React.createRef();
57
57
  _this.minuteRef = React.createRef();
58
58
  _this.secondRef = React.createRef();
59
59
  _this.handleKeyDown = _this.handleKeyDown.bind(_this);
60
- _this.zerPad = _this.zerPad.bind(_this);
60
+ _this.zeroPad = _this.zeroPad.bind(_this);
61
61
  _this.handleChange = _this.handleChange.bind(_this);
62
62
  _this.handleFocusOnKeyUp = _this.handleFocusOnKeyUp.bind(_this);
63
63
  _this.handleKeyValue = _this.handleKeyValue.bind(_this);
64
+ _this.valueUpdate = _this.valueUpdate.bind(_this);
65
+ _this.stateUpdate = _this.stateUpdate.bind(_this);
64
66
  return _this;
65
67
  }
66
- DurationInput.prototype.componentDidUpdate = function (_, prevState) {
67
- if (this.props.onChange) {
68
- this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
69
- .asSeconds());
68
+ DurationInput.prototype.stateUpdate = function (state, parametar1, parametar2, parametar3) {
69
+ var value;
70
+ if (state === 'hours') {
71
+ value = parametar1
72
+ ? parametar1 + Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600)
73
+ : Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600);
74
+ }
75
+ else if (state === 'minutes') {
76
+ value = parametar1
77
+ ? (parametar1 % 60) + Math.floor((parametar2 || 0) % 3600 / 60)
78
+ : Math.floor((parametar2 || 0) % 3600 / 60);
70
79
  }
80
+ else {
81
+ value = parametar1 ? parametar1 % 60 : 0;
82
+ }
83
+ return this.zeroPad(value);
84
+ };
85
+ DurationInput.prototype.componentDidUpdate = function (_, prevState) {
71
86
  if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
72
87
  return;
73
88
  }
74
89
  if (this.state.hours !== prevState.hours) {
75
90
  if (Number(this.hourRef.current.value) > 99) {
76
91
  this.setState({
77
- hours: this.zerPad(99),
92
+ hours: this.zeroPad(99),
78
93
  });
79
94
  }
80
95
  }
81
96
  if (this.state.minutes !== prevState.minutes) {
82
97
  if (Number(this.minuteRef.current.value) > 59) {
83
98
  this.setState({
84
- hours: this.zerPad(Number(this.state.hours) + 1),
85
- minutes: this.zerPad(0),
99
+ hours: this.zeroPad(Number(this.state.hours) + 1),
100
+ minutes: this.zeroPad(this.state.minutes % 60),
86
101
  });
87
102
  }
88
103
  if (Number(this.minuteRef.current.value) < 0) {
89
104
  this.setState({
90
- hours: this.zerPad(Number(this.state.hours)) > 0
91
- ? this.zerPad(Number(this.state.hours) - 1)
92
- : this.zerPad(Number(this.state.hours)),
105
+ hours: this.zeroPad(Number(this.state.hours)) > 0
106
+ ? this.zeroPad(Number(this.state.hours) - 1)
107
+ : this.zeroPad(Number(this.state.hours)),
93
108
  minutes: 59,
94
109
  });
95
110
  }
@@ -97,18 +112,24 @@ var DurationInput = /** @class */ (function (_super) {
97
112
  if (this.state.seconds !== prevState.seconds) {
98
113
  if (Number(this.secondRef.current.value) > 59) {
99
114
  this.setState({
100
- minutes: this.zerPad(Number(this.state.minutes) + 1),
101
- seconds: this.zerPad(0),
115
+ minutes: this.zeroPad(Number(this.state.minutes) + 1),
116
+ seconds: this.zeroPad(this.state.seconds % 60),
102
117
  });
103
118
  }
104
119
  if (Number(this.secondRef.current.value) < 0) {
105
120
  this.setState({
106
- minutes: this.zerPad(Number(this.state.minutes) - 1),
121
+ minutes: this.zeroPad(Number(this.state.minutes) - 1),
107
122
  seconds: 59,
108
123
  });
109
124
  }
110
125
  }
111
126
  };
127
+ DurationInput.prototype.valueUpdate = function () {
128
+ if (this.props.onChange) {
129
+ this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
130
+ .asSeconds());
131
+ }
132
+ };
112
133
  DurationInput.prototype.handleKeyDown = function (event) {
113
134
  if (!(event.target instanceof HTMLInputElement)) {
114
135
  return;
@@ -151,6 +172,12 @@ var DurationInput = /** @class */ (function (_super) {
151
172
  }
152
173
  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
153
174
  this.handleKeyValue(event, event.target.id);
175
+ setTimeout(this.valueUpdate);
176
+ }
177
+ if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
178
+ if (!this.state.hours || !this.state.minutes || !this.state.seconds) {
179
+ setTimeout(this.valueUpdate);
180
+ }
154
181
  }
155
182
  };
156
183
  DurationInput.prototype.handleKeyValue = function (event, state) {
@@ -166,24 +193,26 @@ var DurationInput = /** @class */ (function (_super) {
166
193
  if (event.key === 'ArrowUp') {
167
194
  if (event.target.id === 'hours') {
168
195
  stateClone[state] = this.state[state] < 99
169
- ? this.zerPad(Number(this.state[state]) + 1)
170
- : this.zerPad(99);
196
+ ? this.zeroPad(Number(this.state[state]) + 1)
197
+ : this.zeroPad(99);
171
198
  }
172
199
  else {
173
- stateClone[state] = this.zerPad(Number(this.state[state]) + 1);
200
+ stateClone[state] = this.zeroPad(Number(this.state[state]) + 1);
174
201
  }
175
202
  }
176
203
  else if (event.key === 'ArrowDown') {
177
204
  if (event.target.id === 'hours') {
178
- stateClone[state] = this.state[state] > 0 ? this.zerPad(Number(this.state[state]) - 1) : this.zerPad(0);
205
+ stateClone[state] = this.state[state] > 0
206
+ ? this.zeroPad(Number(this.state[state]) - 1)
207
+ : this.zeroPad(0);
179
208
  }
180
209
  else {
181
- stateClone[state] = this.zerPad(Number(this.state[state]) - 1);
210
+ stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
182
211
  }
183
212
  }
184
213
  this.setState(stateClone);
185
214
  };
186
- DurationInput.prototype.zerPad = function (value) {
215
+ DurationInput.prototype.zeroPad = function (value) {
187
216
  if (value.toString().length === 1 || value === 0) {
188
217
  return "0".concat(value);
189
218
  }
@@ -203,6 +232,7 @@ var DurationInput = /** @class */ (function (_super) {
203
232
  stateClone[state] = event.target.value;
204
233
  }
205
234
  this.setState(stateClone);
235
+ setTimeout(this.valueUpdate);
206
236
  };
207
237
  DurationInput.prototype.handleFocus = function (ref, state) {
208
238
  ref === null || ref === void 0 ? void 0 : ref.focus();
@@ -210,62 +240,50 @@ var DurationInput = /** @class */ (function (_super) {
210
240
  ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
211
241
  });
212
242
  var stateClone = {};
213
- stateClone[state] = this.zerPad(this.state[state]);
243
+ stateClone[state] = this.zeroPad(this.state[state]);
214
244
  this.setState(stateClone);
215
245
  };
216
246
  DurationInput.prototype.handleFocusOnKeyUp = function (event, ref) {
217
247
  if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Backspace') {
218
- var target = event.target;
219
- if (target.value.length >= 2) {
220
- ref === null || ref === void 0 ? void 0 : ref.focus();
221
- setTimeout(function () {
222
- ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
223
- });
248
+ if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
249
+ var target = event.target;
250
+ if (target.value.length >= 2) {
251
+ ref === null || ref === void 0 ? void 0 : ref.focus();
252
+ setTimeout(function () {
253
+ ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
254
+ });
255
+ }
224
256
  }
225
257
  }
226
258
  };
227
259
  DurationInput.prototype.render = function () {
228
260
  var _this = this;
229
261
  var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
230
- var classes = (0, classnames_1.default)('sd-input', {
231
- 'sd-input--inline-label': this.props.inlineLabel,
232
- 'sd-input--required': this.props.required,
233
- 'sd-input--disabled': this.props.disabled,
234
- 'sd-input--full-width': this.props.fullWidth,
235
- 'sd-input--invalid': this.props.invalid || this.state.invalid,
236
- });
237
- var labelClasses = (0, classnames_1.default)('sd-input__label', {
238
- 'a11y-only': this.props.labelHidden,
239
- });
240
- var htmlId = (0, react_id_generator_1.default)();
241
- return (React.createElement("div", { className: classes },
242
- React.createElement("label", { className: labelClasses, htmlFor: htmlId, id: htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
262
+ return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
243
263
  React.createElement("div", { className: InputClasses },
244
- React.createElement("input", { className: 'duration-input', type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zerPad(event.target.value) }); }, onKeyPress: function (event) {
264
+ React.createElement("input", { className: 'duration-input', type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
245
265
  if (!/[0-9]/.test(event.key)) {
246
266
  event.preventDefault();
247
267
  }
248
268
  } }),
249
269
  React.createElement("span", { className: 'sd-input__suffix' }, "h"),
250
- React.createElement("input", { className: 'duration-input', type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zerPad(event.target.value) }); }, onKeyPress: function (event) {
270
+ React.createElement("input", { className: 'duration-input', type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
251
271
  if (!/[0-9]/.test(event.key)) {
252
272
  event.preventDefault();
253
273
  }
254
274
  } }),
255
275
  React.createElement("span", { className: 'sd-input__suffix' }, "m"),
256
- React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zerPad(event.target.value) }); }, onKeyPress: function (event) {
276
+ React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
257
277
  if (!/[0-9]/.test(event.key)) {
258
278
  event.preventDefault();
259
279
  }
260
280
  } }),
261
- React.createElement("span", { className: 'sd-input__suffix' }, "s")),
262
- React.createElement("div", { className: 'sd-input__message-box' },
263
- this.props.info && !this.props.invalid && !this.state.invalid ?
264
- React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
265
- this.props.invalid || this.state.invalid ?
266
- React.createElement("div", { className: 'sd-input__message' }, this.props.error)
267
- : null)));
281
+ React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
268
282
  };
269
283
  return DurationInput;
270
284
  }(React.PureComponent));
271
285
  exports.DurationInput = DurationInput;
286
+ function getDurationString(seconds) {
287
+ return moment_1.default.utc(seconds * 1000).format("HH:mm:ss");
288
+ }
289
+ exports.getDurationString = getDurationString;
package/react/components/Form/InputNew.js CHANGED
@@ -64,7 +64,9 @@ var InputNew = /** @class */ (function (_super) {
64
64
  return (React.createElement(_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, value: this.state.value, invalid: this.state.invalid, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
65
65
  React.createElement(_1.InputBase, { type: "text", onChange: function (value) {
66
66
  _this.setState({ value: value });
67
- _this.setState({ invalid: _this.props.maxLength ? value.length > _this.props.maxLength : false });
67
+ _this.setState({ invalid: _this.props.maxLength
68
+ ? value.length > _this.props.maxLength
69
+ : false });
68
70
  _this.props.onChange(value);
69
71
  }, disabled: this.props.disabled, htmlId: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, placeholder: this.props.placeholder })));
70
72
  };