superdesk-ui-framework 5.0.2 → 5.0.3

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom"), require("angular")) : factory(root["react"], root["react-dom"], root["angular"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_918__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_919__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 915);
+/******/ 	return __webpack_require__(__webpack_require__.s = 916);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -89,7 +89,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_13__;
 
 /***/ }),
 
-/***/ 25:
+/***/ 24:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -28253,24 +28253,24 @@ return jQuery;
 
 /***/ }),
 
-/***/ 915:
+/***/ 916:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-__webpack_require__(25);
+__webpack_require__(24);
 __webpack_require__(89);
-__webpack_require__(916);
-__webpack_require__(918);
+__webpack_require__(917);
 __webpack_require__(919);
+__webpack_require__(920);
 __webpack_require__(0);
 __webpack_require__(13);
 
 
 /***/ }),
 
-/***/ 916:
+/***/ 917:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28294,7 +28294,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(89), __webpack_require__(917) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(89), __webpack_require__(918) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29032,7 +29032,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 917:
+/***/ 918:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29062,23 +29062,23 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 918:
+/***/ 919:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_918__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_919__;
 
 /***/ }),
 
-/***/ 919:
+/***/ 920:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(920);
+__webpack_require__(921);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 920:
+/***/ 921:
 /***/ (function(module, exports) {
 
 /**

package/package.json

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

package/react/components/TimePicker/TimePickerPopover.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export declare function convert12HourTo24Hour(hour: number, period: 'am' | 'pm'): number;
+export declare function convert24HourTo12Hour(hour: number): number;
+export declare function toInternalState(timeStr: string | undefined | null): IState;
+interface IProps {
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
+    allowSeconds?: boolean;
+    onChange: (nextValue: string) => void;
+    value: string | null;
+}
+interface IState {
+    hours: string | null;
+    minutes: string | null;
+    seconds: string | null;
+    period: 'am' | 'pm' | null;
+}
+export declare class TimePickerPopover extends React.PureComponent<IProps, IState> {
+    private inputRefs;
+    constructor(props: IProps);
+    private handleChange;
+    scrollToValues(): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<IProps>): void;
+    render(): React.ReactNode;
+}
+export {};

package/react/components/TimePicker/TimePickerPopover.js

@@ -0,0 +1,231 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePickerPopover = void 0;
+exports.convert12HourTo24Hour = convert12HourTo24Hour;
+exports.convert24HourTo12Hour = convert24HourTo12Hour;
+exports.toInternalState = toInternalState;
+var React = __importStar(require("react"));
+var common_1 = require("@sourcefabric/common");
+var ContentDivider_1 = require("../ContentDivider");
+var RadioButtonGroup_1 = require("../RadioButtonGroup");
+var time_1 = require("../../utils/time");
+var TimeValueHolder_1 = require("./TimeValueHolder");
+function convert12HourTo24Hour(hour, period) {
+    if (period === 'am' && hour === 12) {
+        return 0; // midnight
+    }
+    if (period === 'pm' && hour !== 12) {
+        return hour + 12; // PM and not 12
+    }
+    return hour; // For 12PM, 1-11AM
+}
+function convert24HourTo12Hour(hour) {
+    var remainder = hour % 12;
+    return remainder === 0 ? 12 : remainder;
+}
+function isAm(hours) {
+    return hours < 12;
+}
+function toInternalState(timeStr) {
+    if (timeStr == null || (timeStr !== null && timeStr !== void 0 ? timeStr : '').trim().length < 1) {
+        return {
+            hours: null,
+            minutes: null,
+            seconds: null,
+            period: null,
+        };
+    }
+    var _a = timeStr.split(':'), hours = _a[0], minutes = _a[1], seconds = _a[2];
+    var secondsDefault = hours != null && minutes != null ? '00' : null;
+    return {
+        hours: (function () {
+            if (hours == null) {
+                return null;
+            }
+            if (is12HourFormat) {
+                return convert24HourTo12Hour(parseInt(hours, 10)).toString().padStart(2, '0');
+            }
+            else {
+                return hours;
+            }
+        })(),
+        minutes: minutes !== null && minutes !== void 0 ? minutes : null,
+        seconds: seconds !== null && seconds !== void 0 ? seconds : secondsDefault,
+        period: hours == null ? null : isAm(parseInt(hours, 10)) ? 'am' : 'pm',
+    };
+}
+var is12HourFormat = (function () {
+    var hour = new Date().toLocaleTimeString([]);
+    return hour.includes('AM') || hour.includes('PM');
+})();
+var TimePickerPopover = /** @class */ (function (_super) {
+    __extends(TimePickerPopover, _super);
+    function TimePickerPopover(props) {
+        var _this = _super.call(this, props) || this;
+        _this.inputRefs = [React.createRef(), React.createRef(), React.createRef()];
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.scrollToValues = _this.scrollToValues.bind(_this);
+        _this.state = toInternalState(props.value);
+        return _this;
+    }
+    TimePickerPopover.prototype.handleChange = function (nextState) {
+        var _this = this;
+        this.setState(nextState, function () {
+            var timeParts = [];
+            if (_this.state.hours == null) {
+                return;
+            }
+            if (is12HourFormat) {
+                if (_this.state.period == null) {
+                    return;
+                }
+                timeParts.push(convert12HourTo24Hour(parseInt(_this.state.hours, 10), _this.state.period)
+                    .toString()
+                    .padStart(2, '0'));
+            }
+            else {
+                timeParts.push(_this.state.hours);
+            }
+            if (_this.state.minutes == null) {
+                return;
+            }
+            else {
+                timeParts.push(_this.state.minutes);
+            }
+            if (_this.props.allowSeconds) {
+                if (_this.state.seconds == null) {
+                    return;
+                }
+                else {
+                    timeParts.push(_this.state.seconds);
+                }
+            }
+            _this.props.onChange(timeParts.join(':'));
+        });
+    };
+    TimePickerPopover.prototype.scrollToValues = function () {
+        this.inputRefs.forEach(function (unitOfTime) { var _a, _b; return (_b = (_a = unitOfTime === null || unitOfTime === void 0 ? void 0 : unitOfTime.current) === null || _a === void 0 ? void 0 : _a.scrollToValue) === null || _b === void 0 ? void 0 : _b.call(_a); });
+    };
+    TimePickerPopover.prototype.componentDidMount = function () {
+        this.scrollToValues();
+    };
+    TimePickerPopover.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        if (this.props.value !== prevProps.value) {
+            this.setState(toInternalState(this.props.value), function () {
+                _this.scrollToValues();
+            });
+        }
+    };
+    TimePickerPopover.prototype.render = function () {
+        var _this = this;
+        var styleForColumnOfUnit = {
+            maxHeight: 190,
+            overflowY: 'auto',
+            scrollbarWidth: 'thin',
+            marginTop: 'var(--gap-1)',
+            scrollBehavior: 'smooth',
+        };
+        return (React.createElement("div", { className: "sd-shadow--z2 radius-md" },
+            React.createElement(common_1.Spacer, { v: true, gap: "0", style: {
+                    minWidth: 200,
+                    maxWidth: 'max-content',
+                    backgroundColor: 'var(--color-dropdown-menu-Bg)',
+                    borderRadius: 'var(--b-radius--small)',
+                } },
+                this.props.headerTemplate && (React.createElement("div", { className: "px-1-5 py-1", style: { borderBottom: '1px solid var(--color-line-x-light)' } }, this.props.headerTemplate)),
+                React.createElement(common_1.Spacer, { h: true, gap: "4", noWrap: true, justifyContent: "center", alignItems: "start", style: { paddingInline: 'var(--gap-1)' } },
+                    React.createElement(common_1.Spacer, { v: true, gap: "4", style: styleForColumnOfUnit, alignItems: "center", noWrap: true }, (0, time_1.getOptionsForTimeUnit)('hours', is12HourFormat).map(function (hour) {
+                        var isActiveHour = hour === _this.state.hours;
+                        return (React.createElement(TimeValueHolder_1.TimeValueHolder, { key: hour, ref: isActiveHour ? _this.inputRefs[0] : undefined, onClick: function () {
+                                _this.handleChange(__assign(__assign({}, _this.state), { hours: hour }));
+                            }, isActive: isActiveHour, value: hour }));
+                    })),
+                    React.createElement(ContentDivider_1.ContentDivider, { align: "center", border: true, type: "solid", orientation: "vertical", margin: "none" }),
+                    React.createElement(common_1.Spacer, { v: true, gap: "4", style: styleForColumnOfUnit, alignItems: "center", noWrap: true }, (0, time_1.getOptionsForTimeUnit)('minutes', is12HourFormat).map(function (minute) {
+                        var isActiveMinute = minute === _this.state.minutes;
+                        return (React.createElement(TimeValueHolder_1.TimeValueHolder, { key: minute, ref: isActiveMinute ? _this.inputRefs[1] : undefined, isActive: isActiveMinute, value: minute, onClick: function () {
+                                _this.handleChange(__assign(__assign({}, _this.state), { minutes: minute }));
+                            } }));
+                    })),
+                    this.props.allowSeconds && (React.createElement(React.Fragment, null,
+                        React.createElement(ContentDivider_1.ContentDivider, { align: "center", border: true, type: "solid", orientation: "vertical", margin: "none" }),
+                        React.createElement(common_1.Spacer, { v: true, gap: "4", style: styleForColumnOfUnit, alignItems: "center", noWrap: true }, (0, time_1.getOptionsForTimeUnit)('seconds', is12HourFormat).map(function (second) {
+                            var isActiveSecond = second === _this.state.seconds;
+                            return (React.createElement(TimeValueHolder_1.TimeValueHolder, { key: second, ref: isActiveSecond ? _this.inputRefs[2] : undefined, onClick: function () {
+                                    _this.handleChange(__assign(__assign({}, _this.state), { seconds: second }));
+                                }, isActive: isActiveSecond, value: second }));
+                        })))),
+                    is12HourFormat && (React.createElement("div", { style: {
+                            marginTop: 'var(--gap-1)',
+                        } },
+                        React.createElement(RadioButtonGroup_1.RadioButtonGroup, { onChange: function (nextValue) {
+                                _this.handleChange(__assign(__assign({}, _this.state), { period: nextValue }));
+                            }, options: [
+                                { label: 'AM', value: 'am' },
+                                { label: 'PM', value: 'pm' },
+                            ], value: this.state.period == null ? '' : this.state.period })))),
+                this.props.footerTemplate && (React.createElement("div", { className: "px-1-5 py-1", style: { borderTop: '1px solid var(--color-line-x-light)' } }, this.props.footerTemplate)))));
+    };
+    return TimePickerPopover;
+}(React.PureComponent));
+exports.TimePickerPopover = TimePickerPopover;

package/react/components/TimePicker/TimeValueHolder.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    isActive?: boolean;
+    value: string;
+    onClick(event: React.MouseEvent<HTMLSpanElement>): void;
+}
+export declare class TimeValueHolder extends React.PureComponent<IProps> {
+    private spanEl;
+    constructor(props: IProps);
+    scrollToValue(): void;
+    render(): JSX.Element;
+}
+export {};

package/react/components/TimePicker/TimeValueHolder.js

@@ -0,0 +1,73 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeValueHolder = void 0;
+var React = __importStar(require("react"));
+var common_1 = require("@sourcefabric/common");
+var TimeValueHolder = /** @class */ (function (_super) {
+    __extends(TimeValueHolder, _super);
+    function TimeValueHolder(props) {
+        var _this = _super.call(this, props) || this;
+        _this.spanEl = React.createRef();
+        return _this;
+    }
+    TimeValueHolder.prototype.scrollToValue = function () {
+        var _a;
+        (_a = this.spanEl.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    };
+    TimeValueHolder.prototype.render = function () {
+        var _a;
+        return (React.createElement("span", { ref: this.props.isActive ? this.spanEl : undefined, onClick: this.props.onClick, className: (0, common_1.classnames)('p-1 time-unit', {
+                'time-unit-highlight': (_a = this.props.isActive) !== null && _a !== void 0 ? _a : false,
+            }) }, this.props.value));
+    };
+    return TimeValueHolder;
+}(React.PureComponent));
+exports.TimeValueHolder = TimeValueHolder;

package/react/components/{TimePicker.d.ts → TimePicker/index.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IInputWrapper } from './Form/InputWrapper';
+import { IInputWrapper } from '../Form/InputWrapper';
 interface IProps extends IInputWrapper {
     value: string | null;
     onChange(valueNext: string | null): void;

package/react/components/{TimePicker.js → TimePicker/index.js}

@@ -55,11 +55,11 @@ exports.TimePicker = void 0;
 var React = __importStar(require("react"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var classnames_1 = __importDefault(require("classnames"));
-var Form_1 = require("./Form");
+var Form_1 = require("../Form");
 var TimePickerPopover_1 = require("./TimePickerPopover");
-var ShowPopup_1 = require("./ShowPopup");
-var Icon_1 = require("./Icon");
-var IconButton_1 = require("./IconButton");
+var ShowPopup_1 = require("../ShowPopup");
+var Icon_1 = require("../Icon");
+var IconButton_1 = require("../IconButton");
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker(props) {
@@ -108,15 +108,11 @@ var TimePicker = /** @class */ (function (_super) {
             React.createElement("div", { className: "time-picker__input" },
                 React.createElement("input", { style: {
                         cursor: 'pointer',
-                    }, ref: this.timeInputRef, value: (_b = this.props.value) !== null && _b !== void 0 ? _b : '', type: "time", onClick: function (e) {
-                        // don't show default popup
-                        e.preventDefault();
+                    }, ref: this.timeInputRef, value: (_b = this.props.value) !== null && _b !== void 0 ? _b : '', type: "time", onClick: function () {
                         _this.setState({
                             popupOpen: !_this.state.popupOpen,
                         });
                     }, onKeyDown: function (event) {
-                        // don't show default popup
-                        event.preventDefault();
                         if (event.key === ' ') {
                             _this.setState({
                                 popupOpen: !_this.state.popupOpen,