superdesk-ui-framework 4.0.46 → 4.0.47

package/dist/vendor.bundle.js

@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 18:
+/***/ 19:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -28252,7 +28252,7 @@ return jQuery;
 "use strict";
 
 
-__webpack_require__(18);
+__webpack_require__(19);
 
 __webpack_require__(74);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.46",
+  "version": "4.0.47",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/DateTimePicker.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { InputWrapper } from "./Form";
 import { IInputWrapper } from "./Form/InputWrapper";
-interface IProps extends IInputWrapper {
+interface IPropsValueDate extends IInputWrapper {
+    valueType: 'date';
     value: Date | null;
     dateFormat: string;
     onChange: (value: Date | null) => void;
@@ -13,11 +14,32 @@ interface IProps extends IInputWrapper {
     ref?: React.LegacyRef<InputWrapper>;
     'data-test-id'?: string;
 }
+type IValue = {
+    date?: string;
+    time?: string;
+};
+interface IPropsValueObject extends IInputWrapper {
+    valueType: 'object';
+    value: IValue;
+    dateFormat: string;
+    onChange: (value: IValue) => void;
+    preview?: boolean;
+    fullWidth?: boolean;
+    allowSeconds?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    ref?: React.LegacyRef<InputWrapper>;
+    'data-test-id'?: string;
+}
+type IProps = IPropsValueDate | IPropsValueObject;
 export declare class DateTimePicker extends React.PureComponent<IProps> {
     private htmlId;
     handleTimeChange: (time: string) => void;
     handleDateChange: (date: Date | null) => void;
     prepareFormat(unitOfTime: number): string;
+    getTimeValue(): string;
+    getDateValue(): Date | null;
+    handleClear: () => void;
     render(): JSX.Element;
 }
 export {};

package/react/components/DateTimePicker.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -60,53 +71,99 @@ var TimePicker_1 = require("./TimePicker");
 var IconButton_1 = require("./IconButton");
 var Form_1 = require("./Form");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var date_fns_1 = require("date-fns");
+var helpers_1 = require("../helpers");
 var DateTimePicker = /** @class */ (function (_super) {
     __extends(DateTimePicker, _super);
     function DateTimePicker() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
         _this.handleTimeChange = function (time) {
-            var _a = time
-                .split(":")
-                .map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1]; // handle NaN value
-            var origDate = _this.props.value ? new Date(_this.props.value) : new Date();
-            origDate.setHours(hours, minutes);
-            _this.props.onChange(origDate);
+            if (_this.props.valueType === 'date') {
+                var _a = time
+                    .split(":")
+                    .map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1];
+                var origDate = _this.props.value ? new Date(_this.props.value) : new Date();
+                origDate.setHours(hours, minutes);
+                _this.props.onChange(origDate);
+            }
+            else if (_this.props.valueType === 'object') {
+                _this.props.onChange(__assign(__assign({}, _this.props.value), { time: time }));
+            }
+            else {
+                (0, helpers_1.assertNever)(_this.props);
+            }
         };
         _this.handleDateChange = function (date) {
             var _a;
-            if (date == null) {
+            if (_this.props.valueType === 'date') {
+                if (date == null) {
+                    _this.props.onChange(null);
+                    return;
+                }
+                var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
+                var selectedDate = new Date(date);
+                selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+                _this.props.onChange(selectedDate);
+            }
+            else if (_this.props.valueType === 'object') {
+                _this.props.onChange(__assign(__assign({}, _this.props.value), { date: date ? (0, date_fns_1.format)(date, 'yyyy-MM-dd') : undefined }));
+            }
+            else {
+                (0, helpers_1.assertNever)(_this.props);
+            }
+        };
+        _this.handleClear = function () {
+            if (_this.props.valueType === 'date') {
                 _this.props.onChange(null);
-                return;
             }
-            var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
-            var selectedDate = new Date(date);
-            selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
-            _this.props.onChange(selectedDate);
+            else if (_this.props.valueType === 'object') {
+                _this.props.onChange({ date: undefined, time: undefined });
+            }
+            else {
+                (0, helpers_1.assertNever)(_this.props);
+            }
         };
         return _this;
     }
     DateTimePicker.prototype.prepareFormat = function (unitOfTime) {
         return unitOfTime.toString().padStart(2, "0");
     };
+    DateTimePicker.prototype.getTimeValue = function () {
+        var _a;
+        if (this.props.valueType === 'date') {
+            return this.props.value != null
+                ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
+                : "";
+        }
+        else if (this.props.valueType === 'object') {
+            return (_a = this.props.value.time) !== null && _a !== void 0 ? _a : '';
+        }
+        else {
+            (0, helpers_1.assertNever)(this.props);
+        }
+    };
+    DateTimePicker.prototype.getDateValue = function () {
+        if (this.props.valueType === 'date') {
+            return this.props.value;
+        }
+        else if (this.props.valueType === 'object') {
+            return this.props.value.date ? new Date(this.props.value.date) : null;
+        }
+        else {
+            (0, helpers_1.assertNever)(this.props);
+        }
+    };
     DateTimePicker.prototype.render = function () {
-        var _this = this;
-        var convertedTimeValue = this.props.value != null
-            ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-            : "";
+        var timeValue = this.getTimeValue();
+        var dateValue = this.getDateValue();
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props["data-test-id"], ref: this.props.ref },
             React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    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) {
-                            _this.handleDateChange(val);
-                        }, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
+                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
                 React.createElement("div", { style: { flexGrow: 1 } },
-                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
-                            _this.handleTimeChange(val);
-                        }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
-                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: function () {
-                        _this.props.onChange(null);
-                    }, ariaValue: "Clear" })))));
+                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
+                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: this.handleClear, ariaValue: "Clear" })))));
     };
     return DateTimePicker;
 }(React.PureComponent));