@deviceinsight/ng-ui-components 6.18.0 → 6.19.0

package/lib/esm/src/components/colorpicker/GridColorPicker.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+import ColorPickerPopper from './ColorPickerPopper';
+/**
+ * Unlike the GradientColorPicker, the GridColorPicker uses a predefined set of colors.
+ * The colors can be defined individually for each GridColorPicker and passed in as prop.
+ * Each line can take up to five cells.
+ * The cell width within the grid is then calculated automatically via the `styles` prop.
+ */
+export default class GridColorPicker extends React.Component {
+    renderColorPicker() {
+        const { value, colors, onPick, pickerStyle, pickerClassName } = this.props;
+        return (React.createElement("div", { className: classNames('di color-picker grid-color-picker clearfix', pickerClassName), style: pickerStyle }, colors.map((color) => (React.createElement("div", { key: color, onClick: () => {
+                onPick(color);
+            }, className: `color ${color === value ? 'selected' : ''}`, style: {
+                background: color
+            } })))));
+    }
+    render() {
+        const { style, className, value, inline, isOpen, onOpenStateChange, direction } = this.props;
+        if (inline) {
+            return this.renderColorPicker();
+        }
+        return (React.createElement(ColorPickerPopper, { className: className, style: style, value: value, colorPicker: this.renderColorPicker(), isOpen: isOpen, onOpenStateChange: onOpenStateChange, direction: direction }));
+    }
+}
+GridColorPicker.defaultProps = {
+    inline: true,
+    popperAlignment: 'top'
+};

package/lib/esm/src/components/contentHeader/ContentHeader.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type Props = {
+    /** title which is going to be displayed */
+    title: string | TranslationDescriptor;
+    /** (optional) subtitle which is going to be displayed */
+    subtitle?: string | TranslationDescriptor;
+    /** (optional) if set to true, enables back button */
+    parentPageLink?: boolean;
+    /** (optional) if set, navigates back got certain parent page */
+    subPagePathPrefix?: string;
+    /** @ignore */
+    subPagePathPrefixArray?: Array<string>;
+    /** (optional) renders additional components as children */
+    children?: React.ReactNode;
+};
+/**
+ * `parentPageLink` set to true shows a back button to go to the parent page.
+ * `subPagePathPrefix` needs to be used with `parentPageLink` set to true. It allows to customize what is considered the parent page.
+ * With only the `parentPageLink` set to true the parent page is the direct parent, e.g. of `/assets/1234/conditions/5678` the parent is `/assets/1234/conditions`
+ * To make the parent of e.g. `/assets/1234/conditions/edit/5678` the page `/assets/1234/conditions`, `subPagePathPrefix="/edit"` needs to be used.
+ */
+declare const ContentHeader: ({ parentPageLink, title, subPagePathPrefixArray, subPagePathPrefix, subtitle, children }: Props) => React.JSX.Element;
+export default ContentHeader;
+//# sourceMappingURL=ContentHeader.d.ts.map

package/lib/esm/src/components/contentHeader/ContentHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/contentHeader/ContentHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAC;IAEtC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAC;IAE1C,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,cAAc;IACd,sBAAsB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEvC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,aAAa,6FAOhB,KAAK,sBAoDP,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/esm/src/components/contentHeader/ContentHeader.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useTranslation } from '../../i18n';
+import { Button } from '@deviceinsight/ng-ui-basic-components';
+import arrowBackIcon from '../../assets/img/icon-arrow-back.png';
+/**
+ * `parentPageLink` set to true shows a back button to go to the parent page.
+ * `subPagePathPrefix` needs to be used with `parentPageLink` set to true. It allows to customize what is considered the parent page.
+ * With only the `parentPageLink` set to true the parent page is the direct parent, e.g. of `/assets/1234/conditions/5678` the parent is `/assets/1234/conditions`
+ * To make the parent of e.g. `/assets/1234/conditions/edit/5678` the page `/assets/1234/conditions`, `subPagePathPrefix="/edit"` needs to be used.
+ */
+const ContentHeader = ({ parentPageLink, title, subPagePathPrefixArray, subPagePathPrefix, subtitle, children }) => {
+    const { push } = useHistory();
+    const { pathname } = useLocation();
+    const { t } = useTranslation();
+    const goToParentPage = () => {
+        if (subPagePathPrefix) {
+            push(pathname.substring(0, pathname.lastIndexOf(subPagePathPrefix)));
+        }
+        else if (subPagePathPrefixArray) {
+            subPagePathPrefixArray.forEach((pathPrefix) => {
+                if (pathname.includes(pathPrefix)) {
+                    push(pathname.substring(0, pathname.lastIndexOf(pathPrefix)));
+                }
+            });
+        }
+        else {
+            push(pathname.substring(0, pathname.lastIndexOf('/')));
+        }
+    };
+    const printStringOrMessage = (stringOrMessage) => {
+        if (typeof stringOrMessage === 'string') {
+            return stringOrMessage;
+        }
+        else {
+            const { id, defaultValue } = stringOrMessage;
+            return t(id, {
+                defaultValue
+            });
+        }
+    };
+    return (React.createElement("h1", { className: "di header" },
+        parentPageLink && (React.createElement(Button, { onClick: goToParentPage, style: {
+                marginRight: '15px'
+            } },
+            React.createElement("img", { src: arrowBackIcon, alt: t('general.navigation.goBack', {
+                    defaultValue: 'Go Back'
+                }) }))),
+        React.createElement("span", null, printStringOrMessage(title)),
+        subtitle && React.createElement("span", { className: "search-result-count" }, printStringOrMessage(subtitle)),
+        children));
+};
+export default ContentHeader;

package/lib/esm/src/components/infobox/InfoBox.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type Props = {
+    /** Color scheme type based on InfoBox purpose */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /** The message to display in the InfoBox */
+    message: TranslationDescriptor | string;
+    /** Optional icon of the InfoBox */
+    icon?: string;
+    /** Optional flag whether the InfoBox should be hideable */
+    hideable?: boolean;
+    /** Optional additional classnames for the parent div container */
+    className?: string;
+    /** Optional additional information to display under the info header */
+    children?: React.ReactNode;
+};
+/**
+ * InfoBox is best used for highlighting information, especially if a warning and/or an error shall be displayed.
+ */
+declare function InfoBox({ type, hideable, className, icon, message: inputMessage, children }: Props): React.JSX.Element | null;
+export default InfoBox;
+//# sourceMappingURL=InfoBox.d.ts.map

package/lib/esm/src/components/infobox/InfoBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/infobox/InfoBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAQvD,oBAAY,KAAK,GAAG;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAEhD,4CAA4C;IAC5C,OAAO,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAExC,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAC,IAAa,EAAE,QAAgB,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAC,EAAE,KAAK,4BAwC1G;AAED,eAAe,OAAO,CAAC"}

package/lib/esm/src/components/infobox/InfoBox.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { useTranslation } from '../../i18n';
+import { Icon } from '@deviceinsight/ng-ui-basic-components';
+const colors = {
+    info: '#ffffff',
+    success: '#cce0cc',
+    warning: '#fed254',
+    error: '#d66961'
+};
+/**
+ * InfoBox is best used for highlighting information, especially if a warning and/or an error shall be displayed.
+ */
+function InfoBox({ type = 'info', hideable = false, className, icon, message: inputMessage, children }) {
+    const [visible, setVisible] = useState(true);
+    const { t } = useTranslation();
+    function getMessage() {
+        if (typeof inputMessage !== 'string') {
+            const { id, defaultValue, ...rest } = inputMessage;
+            return t(id, { ...rest, defaultValue });
+        }
+        return inputMessage;
+    }
+    const message = getMessage();
+    return visible ? (React.createElement("div", { className: `infobox ${className ? className : ''}` },
+        React.createElement("div", { className: "infobox-header", style: {
+                backgroundColor: colors[type]
+            } },
+            React.createElement("div", { className: "infobox-header-content" },
+                icon && (React.createElement("div", { className: "infobox-iconcontainer" },
+                    React.createElement("img", { src: icon, alt: "info-icon", style: { width: 16, height: 16 } }))),
+                React.createElement("div", { className: "infobox-message" }, message)),
+            hideable && (React.createElement("button", { className: "infobox-closebutton", onClick: () => setVisible(false) },
+                React.createElement(Icon, { del: true, large: true })))),
+        children)) : null;
+}
+export default InfoBox;

package/lib/esm/src/components/input/DateInput.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ReactDatePickerProps } from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import '../../assets/react-datepicker-custom.css';
+declare type DateInputProps = {
+    /** the current value (millis since 1970-01-01 or formatted string) */
+    value: number | string | null | undefined;
+    /** callback function that is executed when the user picks a date */
+    onChange: (date: number | null | undefined, fromTextField?: boolean) => void;
+    /** makes the input field clearable */
+    clearable?: boolean;
+    /** displays the date picker inline */
+    inline?: boolean;
+    /** displays the DateInput read only */
+    readOnly?: boolean;
+    /** (optional) class name for the wrapping elements */
+    wrapperClassName?: string;
+    /** (optional) locale, if not set, the i18next.language is taken */
+    locale?: string;
+};
+export declare type Props = Omit<ReactDatePickerProps, keyof DateInputProps> & DateInputProps;
+/**
+ * DateInput is used to let users set a date conveniently.
+ * Usually the user's locale is used for displaying the correct date format.
+ */
+export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, ...otherProps }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=DateInput.d.ts.map

package/lib/esm/src/components/input/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAmB,EAAC,oBAAoB,EAAiB,MAAM,kBAAkB,CAAC;AAalF,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAwClD,aAAK,cAAc,GAAG;IACrB,sEAAsE;IACtE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE1C,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC;AAqBtF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,GAAG,UAAU,EACb,EAAE,KAAK,qBAmKP"}

package/lib/esm/src/components/input/DateInput.js

@@ -0,0 +1,157 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { debounce } from 'lodash';
+import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import i18n from 'i18next';
+import cx from 'classnames';
+import { useTranslation } from '../../i18n';
+import * as Locales from 'date-fns/locale';
+import { Button, Icon, Popup } from '@deviceinsight/ng-ui-basic-components';
+import 'react-datepicker/dist/react-datepicker.css';
+import '../../assets/react-datepicker-custom.css';
+import { isLocaleSupported } from '../../utils/dayjsLocales';
+dayjs.extend(localeData);
+dayjs.extend(localizedFormat);
+dayjs.extend(customParseFormat);
+function registerLanguage(locale) {
+    const [localeSegment1, localeSegment2] = locale.split('-');
+    let module;
+    if (localeSegment1 && localeSegment2) {
+        // @ts-ignore
+        module = Locales[`${localeSegment1}${localeSegment2}`] ?? Locales[localeSegment1];
+    }
+    else if (localeSegment1) {
+        // @ts-ignore
+        module = Locales[localeSegment1];
+    }
+    else {
+        module = null;
+    }
+    if (module) {
+        registerLocale(locale, module);
+    }
+}
+async function changeDayjsLocale(locale) {
+    let dayjsLocale = null;
+    const [localeSegment1] = locale.split('-');
+    if (isLocaleSupported(locale.toLowerCase())) {
+        dayjsLocale = locale.toLowerCase();
+    }
+    else if (isLocaleSupported(localeSegment1.toLowerCase())) {
+        dayjsLocale = localeSegment1.toLowerCase();
+    }
+    if (dayjsLocale) {
+        dayjs.locale(dayjsLocale);
+    }
+}
+function isInputValid(value, pattern) {
+    if (value == null || (typeof value === 'number' && !isNaN(value)) || value == '') {
+        return true;
+    }
+    if (typeof value === 'string') {
+        return dayjs(value, pattern, true).isValid();
+    }
+    return false;
+}
+function inputToDate(value, pattern) {
+    if (value == null || value === '' || !isInputValid(value, pattern))
+        return null;
+    if (typeof value === 'number') {
+        return new Date(value);
+    }
+    else {
+        return dayjs(value, pattern, true).toDate();
+    }
+}
+/**
+ * DateInput is used to let users set a date conveniently.
+ * Usually the user's locale is used for displaying the correct date format.
+ */
+export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, ...otherProps }) {
+    const [pattern, setPattern] = useState(dayjs.localeData().longDateFormat('L'));
+    const { t } = useTranslation();
+    const [valid, setValid] = useState(false);
+    const [popupActive, setPopupActive] = useState(false);
+    const [inputText, setInputText] = useState('');
+    const debouncedSetPopupActive = useMemo(() => debounce(setPopupActive, 30), []);
+    useEffect(() => {
+        const language = locale ?? i18n.language;
+        if (language) {
+            registerLanguage(language);
+            changeDayjsLocale(language).then(() => setPattern(dayjs.localeData().longDateFormat('L')));
+        }
+    }, [locale]);
+    const formattedDate = useCallback((value) => {
+        if (value == null || value == '') {
+            return '';
+        }
+        else if (!isInputValid(value, pattern)) {
+            return t('dateInput.invalidDate', {
+                defaultValue: 'invalid date'
+            });
+        }
+        else {
+            const date = typeof value === 'number' ? dayjs(value) : dayjs(value, pattern, true);
+            return date.format(pattern);
+        }
+    }, [pattern, t]);
+    useEffect(() => {
+        if (value == null) {
+            setInputText('');
+        }
+        else {
+            setInputText(formattedDate(value));
+        }
+    }, [formattedDate, value]);
+    useEffect(() => {
+        setValid(isInputValid(value, pattern));
+    }, [pattern, value]);
+    useEffect(() => {
+        dayjs.locale(locale ?? i18n.language);
+        setPattern(dayjs.localeData().longDateFormat('L'));
+    }, [locale]);
+    const handleInputTextChange = (text) => {
+        setInputText(text);
+        if (text) {
+            const date = dayjs(text, pattern, true);
+            const valid = date.isValid();
+            if (valid) {
+                onChange(date.valueOf(), true);
+            }
+            setValid(valid);
+        }
+        else {
+            onChange(null, true);
+            setValid(true);
+        }
+    };
+    const handlePickerChange = (date) => {
+        onChange(date ? date.valueOf() : null);
+        setInputText(formattedDate(date ? date.getTime() : null));
+        handlePopupHide();
+    };
+    const handlePopupShow = () => setPopupActive(true);
+    const handlePopupHide = () => setPopupActive(false);
+    const handleClear = () => handleInputTextChange('');
+    if (inline) {
+        return (React.createElement(DatePicker, { ...otherProps, onChange: handlePickerChange, selected: inputToDate(value, pattern), locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }));
+    }
+    if (readOnly) {
+        return (React.createElement(DatePicker, { ...otherProps, onChange: () => { }, selected: inputToDate(value, pattern), locale: locale ?? i18n.language, customInput: React.createElement("span", null,
+                React.createElement("input", { type: "text", value: formattedDate(value), readOnly: true })), placeholderText: pattern, readOnly: true }));
+    }
+    return (React.createElement(Popup, { handler: React.createElement("span", { className: "di date-input-wrapper" },
+            React.createElement("input", { "data-testid": "date-input", className: cx('date', { invalid: !valid }), onChange: (e) => handleInputTextChange(e.target.value), value: inputText, placeholder: pattern, onClick: handlePopupShow, onFocus: handlePopupShow, onBlur: () => {
+                    handleInputTextChange(formattedDate(value));
+                    debouncedSetPopupActive(false);
+                } }),
+            clearable && (React.createElement(Button, { naked: true, small: true, onClick: handleClear },
+                React.createElement(Icon, { del: true })))), className: "date-input", handlerWrapperClassName: wrapperClassName, active: popupActive, onHide: handlePopupHide },
+        React.createElement("div", { className: "di date-picker-popup-wrapper", tabIndex: 0, onFocus: () => {
+                debouncedSetPopupActive(true);
+            } },
+            React.createElement(DatePicker, { ...otherProps, selected: inputToDate(value, pattern), onChange: handlePickerChange, locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }))));
+}

package/lib/esm/src/components/input/DateTimeInput.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export declare type Props = {
+    /** the current value (millis since 1970-01-01) */
+    timestamp: number;
+    /** callback function that is executed when the user picks a date */
+    onChange: (date: number | null | undefined, fromTextField?: boolean) => void;
+    /** (optional) if set to true, displays warning styles */
+    warning?: boolean;
+    /** (optional) forces the input field to display the `Popup` */
+    forceOpen?: boolean;
+    /** displays the DateTimeInput read-only */
+    readOnly?: boolean;
+    selectsStart?: boolean;
+    selectsEnd?: boolean;
+    startDate?: Date;
+    endDate?: Date;
+    /** (optional) locale, if not set, the i18next.language is taken */
+    locale?: string;
+    /** (optional) timezone */
+    timezone?: string;
+};
+/**
+ * Extends DateInput but also displaying the current time.
+ * Usually the user's locale is used for displaying the correct date format.
+ */
+export default function DateTimeInput({ timestamp, timezone, warning, readOnly, onChange, ...otherProps }: Props): React.JSX.Element;
+//# sourceMappingURL=DateTimeInput.d.ts.map

package/lib/esm/src/components/input/DateTimeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}

package/lib/esm/src/components/input/DateTimeInput.js

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react';
+import { dayjsTz } from '../periodpicker/periods';
+import DateInput from './DateInput';
+import ValidatedTextInput from './ValidatedTextInput';
+const extractTime = (timezone, date) => {
+    try {
+        return dayjsTz(timezone, date).format('HH:mm');
+    }
+    catch (error) {
+        console.error('DateTimeInput: Error while extracting time from date', error);
+        return '00:00';
+    }
+};
+/**
+ * Extends DateInput but also displaying the current time.
+ * Usually the user's locale is used for displaying the correct date format.
+ */
+export default function DateTimeInput({ timestamp, timezone, warning, readOnly = false, onChange, ...otherProps }) {
+    const [time, setTime] = useState(extractTime(timezone, timestamp));
+    const timeValue = time == null ? extractTime(timezone, timestamp) : time;
+    useEffect(() => {
+        setTime(extractTime(timezone, timestamp));
+    }, [timezone, timestamp]);
+    function handleChangeDate(date, fromTextField) {
+        const oldDate = dayjsTz(timezone, timestamp);
+        onChange(dayjsTz(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
+    }
+    function handleChangeTime(time, valid) {
+        if (valid) {
+            const [hours, minutes] = time.split(':');
+            onChange(dayjsTz(timezone, timestamp)
+                .set('hour', parseInt(hours, 10))
+                .set('minute', parseInt(minutes, 10))
+                .set('second', 0)
+                .set('millisecond', 0)
+                .valueOf());
+        }
+        setTime(time);
+    }
+    function tryFixTime() {
+        if (time && /^[0-9]:[0-5][0-9]$/.test(time)) {
+            handleChangeTime(time.padStart(5, '0'), true);
+        }
+    }
+    return (React.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
+        React.createElement(DateInput, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
+        React.createElement(ValidatedTextInput, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
+                borderColor: 'red'
+            }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));
+}

package/lib/esm/src/components/input/SelectWithSearch.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import '../../assets/react-select.css';
+import '../../assets/react-select-custom.css';
+export declare type Item = {
+    type: 'item';
+    value: string;
+    label: string;
+};
+export declare type Group = {
+    type: 'group';
+    label: string;
+    options: Array<Item>;
+};
+export declare type Props = {
+    /** Flag to preselect the status of the checkbox */
+    value: Item | null | undefined;
+    /** Function, executed when selecting value */
+    onChange: (arg0: Item | null | undefined) => void;
+    /** Array of select options values */
+    options: Array<Item> | Array<Group>;
+    /** Array of special select options values */
+    specialOptions?: Array<Item> | null | undefined;
+    /** Message displayed when no results found by search feature */
+    noResultsMessage?: string;
+    /** Placeholder */
+    placeholder?: string;
+    /** Clearable */
+    clearable?: boolean;
+    /** Loading */
+    loading?: boolean;
+    /** Function comparing two options - used for sorting */
+    compareOptions?: (value1: Item, value2: Item) => number;
+    /** (Optional) Whether the menu should use a portal, and where it should attach */
+    menuPortalTarget?: HTMLElement;
+    /** (Optional) indicates if the component is disabled or not */
+    disabled?: boolean;
+    /** Enables free-form input mode */
+    freeForm?: boolean;
+    /** @ignore */
+    'data-testid'?: string;
+};
+declare type State = {
+    options: Array<Item> | Array<Group>;
+    inputValue: string | null;
+};
+/**
+ * SelectWithSearch enhances a native select list by applying a search functionality to it.
+ * Additional entries can be added by setting and adjusting `specialOptions`
+ */
+export default class SelectWithSearch extends React.Component<Props, State> {
+    state: State;
+    selectRef: {
+        current: any | null;
+    };
+    portalRoot: HTMLElement | null;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    updateOptions: () => void;
+    filterOption: (option: Item, inputValue: string) => boolean;
+    getContainerClasses: () => string[];
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=SelectWithSearch.d.ts.map

package/lib/esm/src/components/input/SelectWithSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectWithSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/SelectWithSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAE9C,oBAAY,IAAI,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,mDAAmD;IACnD,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAE/B,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAElD,qCAAqC;IACrC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAEpC,6CAA6C;IAC7C,cAAc,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEhD,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gBAAgB;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wDAAwD;IACxD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,KAAK,MAAM,CAAC;IAExD,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IACpC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AA0BF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1E,KAAK,EAAE,KAAK,CAGV;IACF,SAAS,EAAE;QACV,OAAO,EAAE,GAAG,GAAG,IAAI,CAAC;KACpB,CAAoC;IAErC,UAAU,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEtC,iBAAiB;IAejB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAMnC,oBAAoB;IAMpB,aAAa,EAAE,MAAM,IAAI,CAcvB;IAEF,YAAY,WAAY,IAAI,cAAc,MAAM,KAAG,OAAO,CAExD;IAEF,mBAAmB,iBAMjB;IAEF,MAAM;CAiDN"}

package/lib/esm/src/components/input/SelectWithSearch.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import Select from 'react-select';
+import { orderBy, isEqual } from 'lodash';
+import '../../assets/react-select.css';
+import '../../assets/react-select-custom.css';
+function getSortedOptions(options, compareOptions) {
+    if (!compareOptions) {
+        // @ts-ignore
+        return orderBy(options, 'label', 'asc');
+    }
+    // @ts-ignore
+    if (options.every((option) => !option.options)) {
+        const singleOptions = options;
+        return [...singleOptions].sort(compareOptions);
+    }
+    // @ts-ignore
+    if (options.every((option) => option.options)) {
+        const groupOptions = options;
+        return groupOptions.map((option) => ({ ...option, options: [...option.options].sort(compareOptions) }));
+    }
+    throw new Error('Mixing groups with single options not allowed');
+}
+/**
+ * SelectWithSearch enhances a native select list by applying a search functionality to it.
+ * Additional entries can be added by setting and adjusting `specialOptions`
+ */
+export default class SelectWithSearch extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            options: [],
+            inputValue: null
+        };
+        this.selectRef = React.createRef();
+        this.portalRoot = null;
+        this.updateOptions = () => {
+            const { options, specialOptions, compareOptions } = this.props;
+            const sortedOptions = getSortedOptions(options, compareOptions);
+            if (specialOptions) {
+                this.setState({
+                    // @ts-ignore
+                    options: [...sortedOptions, ...specialOptions]
+                });
+            }
+            else {
+                this.setState({
+                    options: sortedOptions
+                });
+            }
+        };
+        this.filterOption = (option, inputValue) => {
+            return option.label.toString().toLowerCase().startsWith(inputValue.toLowerCase());
+        };
+        this.getContainerClasses = () => {
+            const { specialOptions } = this.props;
+            if (specialOptions) {
+                return ['select-search-container', 'special'];
+            }
+            return ['select-search-container'];
+        };
+    }
+    componentDidMount() {
+        this.updateOptions();
+        if (this.props['data-testid'] && this.selectRef && this.selectRef.current) {
+            this.selectRef.current.controlRef.setAttribute('data-testid', this.props['data-testid']);
+        }
+        if (this.props.menuPortalTarget) {
+            this.portalRoot = document.createElement('div');
+            const classes = this.getContainerClasses();
+            this.portalRoot.classList.add(...classes);
+            this.props.menuPortalTarget.appendChild(this.portalRoot);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (!isEqual(prevProps.options, this.props.options) || prevProps.freeForm !== this.props.freeForm) {
+            this.updateOptions();
+        }
+    }
+    componentWillUnmount() {
+        if (this.props.menuPortalTarget && this.portalRoot) {
+            this.props.menuPortalTarget.removeChild(this.portalRoot);
+        }
+    }
+    render() {
+        const { noResultsMessage, placeholder, value, onChange, clearable, loading, disabled } = this.props;
+        const { options } = this.state;
+        return (React.createElement(Select, { ref: this.selectRef, joinValues: true, name: "form-field-name", className: this.getContainerClasses().join(' '), classNamePrefix: "select-search", isClearable: clearable, noOptionsMessage: noResultsMessage ? () => noResultsMessage : undefined, options: options, value: value || null, onChange: onChange, onInputChange: (newValue) => {
+                if (this.props.freeForm && newValue) {
+                    this.setState({ inputValue: newValue });
+                }
+            }, placeholder: placeholder, 
+            // @ts-ignore
+            filterOption: this.filterOption, isLoading: loading, menuPortalTarget: this.portalRoot, isDisabled: disabled, onBlur: () => {
+                if (this.props.freeForm && this.state.inputValue !== null) {
+                    this.setState({ options: this.props.options });
+                    this.setState({ inputValue: this.state.inputValue }, () => {
+                        const newItem = {
+                            type: 'item',
+                            value: this.state.inputValue,
+                            label: this.state.inputValue
+                        };
+                        this.setState((prevState) => ({
+                            options: [newItem, ...prevState.options]
+                        }));
+                        this.state.inputValue = null;
+                        onChange(newItem);
+                    });
+                }
+            } }));
+    }
+}