@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/lib/es/components/dialog/InfoDialog.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
-const InfoDialog = props => {
-    const { content, onClose, className } = props;
+const InfoDialog = (props) => {
+    const { content, className } = props, remainingProps = tslib_1.__rest(props, ["content", "className"]);
     const dialogClassName = `${className ? className : ''} info-dialog`;
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, props, { body: content, onHide: onClose, className: dialogClassName }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: content, className: dialogClassName }));
 };
-InfoDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes_1.default), { content: prop_types_1.default.node });
 exports.default = InfoDialog;

package/lib/es/components/dialog/MediaDialog.d.ts

@@ -1,58 +1,65 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type MediaDialogMedia = {
+    /**
+     * Defines the media type that is going to be displayed.
+     *
+     * Possible values are: `image` and `video`.
+     */
+    type: 'image' | 'video';
+    /**
+     * The source location for the media data.
+     */
+    src: string;
+    /**
+     * The name or title of the media used for the dialogs title.
+     */
+    title: string | React.ReactNode;
+    /**
+     * Additional media information used for the dialogs subtitle.
+     */
+    subtitle?: string | React.ReactNode;
+    /**
+     * Only relevant for videos where the aspect of the video is defined.
+     *
+     * Possible values are: `4by3` and `16by9`.
+     * @default '16by9'
+     */
+    aspectRatio?: '4by3' | '16by9';
+    /**
+     * Additional classes for the image element.
+     */
+    className?: string;
+};
+export type MediaDialogProps = BaseDialogProps & {
+    /**
+     * List of media objects.
+     */
+    media: MediaDialogMedia[];
+    /**
+     * The button text for switching to the previous media if there are multiple.
+     */
+    previousButtonText: string | React.ReactNode;
+    /**
+     * Callback function for when the previous button is clicked.
+     * @param newIndex
+     * @returns
+     */
+    previousButtonCallback?: (newIndex: number) => void;
+    /**
+     * The button text for switching to the next media if there are multiple.
+     */
+    nextButtonText: string | React.ReactNode;
+    /**
+     * Callback function for when the next button is clicked.
+     * @param newIndex
+     * @returns
+     */
+    nextButtonCallback?: (newIndex: number) => void;
+};
+declare const MediaDialog: {
+    (props: MediaDialogProps): import("react/jsx-runtime").JSX.Element;
+    MEDIA_TYPE_IMAGE: "image";
+    MEDIA_TYPE_VIDEO: "video";
+};
 export default MediaDialog;
-declare class MediaDialog extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        currentMediaIndex: number;
-    };
-    handlePrevious(): void;
-    handleNext(): void;
-    renderFallback(): import("react/jsx-runtime").JSX.Element;
-    renderImage(mediaData: any): import("react/jsx-runtime").JSX.Element;
-    renderVideo(mediaData: any): import("react/jsx-runtime").JSX.Element;
-    renderMediaContent(mediaData?: {}): any;
-    renderBody(media: any[] | undefined, currentMediaIndex: any): import("react/jsx-runtime").JSX.Element;
-    renderFooter(props: any): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element | null;
-}
-declare namespace MediaDialog {
-    const MEDIA_TYPE_IMAGE: string;
-    const MEDIA_TYPE_VIDEO: string;
-    namespace defaultProps {
-        const show: boolean;
-        function onClose(): void;
-        const disableEsc: boolean;
-        const useOverflow: boolean;
-        const bsSize: string;
-        const media: never[];
-        const previousButtonText: string;
-        function previousButtonCallback(): void;
-        const nextButtonText: string;
-        function nextButtonCallback(): void;
-    }
-    const propTypes: {
-        media: PropTypes.Validator<(PropTypes.InferProps<{
-            type: PropTypes.Validator<string>;
-            src: PropTypes.Validator<string>;
-            title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            subtitle: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            aspectRatio: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        previousButtonText: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        previousButtonCallback: PropTypes.Requireable<(...args: any[]) => any>;
-        nextButtonText: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        nextButtonCallback: PropTypes.Requireable<(...args: any[]) => any>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import React from "react";
-import PropTypes from "prop-types";

package/lib/es/components/dialog/MediaDialog.js

@@ -2,108 +2,65 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const ResponsiveVideo_1 = tslib_1.__importDefault(require("../video/ResponsiveVideo"));
 const ImagePreloader_1 = tslib_1.__importDefault(require("../preloader/ImagePreloader"));
 const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
-const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
-// TODO: add keyboard support left/right
-class MediaDialog extends react_1.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            currentMediaIndex: 0,
-        };
-        this.handlePrevious = this.handlePrevious.bind(this);
-        this.handleNext = this.handleNext.bind(this);
-    }
-    handlePrevious() {
-        const oldIndex = this.state.currentMediaIndex;
-        const newIndex = oldIndex === 0 ? this.props.media.length - 1 : oldIndex - 1;
-        this.setState(() => ({
-            currentMediaIndex: newIndex,
-        }));
-        this.props.previousButtonCallback(newIndex);
-    }
-    handleNext() {
-        const oldIndex = this.state.currentMediaIndex;
-        const newIndex = oldIndex === this.props.media.length - 1 ? 0 : oldIndex + 1;
-        this.setState(() => ({
-            currentMediaIndex: newIndex,
-        }));
-        this.props.nextButtonCallback(newIndex);
-    }
-    renderFallback() {
+const MediaDialog = (props) => {
+    const { show = false, onClose = noop_1.default, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop_1.default, nextButtonText = 'Next', nextButtonCallback = noop_1.default, className } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "disableEsc", "useOverflow", "bsSize", "media", "previousButtonText", "previousButtonCallback", "nextButtonText", "nextButtonCallback", "className"]);
+    const [currentMediaIndex, setCurrentMediaIndex] = (0, react_1.useState)(0);
+    const handlePrevious = () => {
+        const oldIndex = currentMediaIndex;
+        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;
+        setCurrentMediaIndex(newIndex);
+        previousButtonCallback(newIndex);
+    };
+    const handleNext = () => {
+        const oldIndex = currentMediaIndex;
+        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;
+        setCurrentMediaIndex(newIndex);
+        nextButtonCallback(newIndex);
+    };
+    const renderFallback = () => {
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-center text-size-h3' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) })));
-    }
-    renderImage(mediaData) {
+    };
+    const renderImage = (mediaData) => {
         const imageClassNames = (0, classnames_1.default)('img-responsive', mediaData.className && mediaData.className);
-        return ((0, jsx_runtime_1.jsx)(ImagePreloader_1.default, Object.assign({ src: mediaData.src, className: imageClassNames }, { children: ({ status, image }) => {
+        return (
+        // @ts-ignore
+        (0, jsx_runtime_1.jsx)(ImagePreloader_1.default, Object.assign({ src: mediaData.src, className: imageClassNames }, { children: ({ status, image }) => {
                 if (status === ImagePreloader_1.default.STATUS_LOADED) {
                     // When image has been loaded, render the image tag
                     return (0, jsx_runtime_1.jsx)("img", { className: 'ani-fade-in', src: image.src }, image.src);
                 }
                 if (status === ImagePreloader_1.default.STATUS_FAILED) {
-                    return this.renderFallback();
+                    return renderFallback();
                 }
                 return (0, jsx_runtime_1.jsx)(Spinner_1.default, { isInverse: false });
             } })));
-    }
-    renderVideo(mediaData) {
+    };
+    const renderVideo = (mediaData) => {
+        var _a;
         const videoClassNames = (0, classnames_1.default)(mediaData.className && mediaData.className);
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-0' }, { children: (0, jsx_runtime_1.jsx)(ResponsiveVideo_1.default, Object.assign({}, mediaData, { className: videoClassNames })) })));
-    }
-    renderMediaContent(mediaData = {}) {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-0' }, { children: (0, jsx_runtime_1.jsx)(ResponsiveVideo_1.default, { src: mediaData.src, aspectRatio: (_a = mediaData.aspectRatio) !== null && _a !== void 0 ? _a : '16by9', className: videoClassNames }) })));
+    };
+    const renderMediaContent = (mediaData = {}) => {
         if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {
-            return this.renderVideo(mediaData);
+            return renderVideo(mediaData);
         }
         // image media is default
-        return mediaData.src && this.renderImage(mediaData);
-    }
-    renderBody(media = [], currentMediaIndex) {
-        const mediaData = media[currentMediaIndex];
-        const mediaContentClassNames = (0, classnames_1.default)('media-content', 'content-center');
-        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: mediaContentClassNames }, { children: this.renderMediaContent(mediaData) }));
-    }
-    renderFooter(props) {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative clearfix' }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: this.handlePrevious }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }), props.previousButtonText] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute top-50pct left-50pct transform translate-centered' }, { children: `${this.state.currentMediaIndex + 1} / ${props.media.length}` })), (0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link btn-icon-right pull-right', onClick: this.handleNext }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }), props.nextButtonText] }))] })));
-    }
-    render() {
-        const _a = this.props, { show, onClose, className, media = [], previousButtonText, nextButtonText, previousButtonCallback, nextButtonCallback } = _a, remainingProps = tslib_1.__rest(_a, ["show", "onClose", "className", "media", "previousButtonText", "nextButtonText", "previousButtonCallback", "nextButtonCallback"]);
-        const { currentMediaIndex } = this.state;
-        if (!show) {
-            return null;
-        }
-        const dialogClassName = (0, classnames_1.default)('media-dialog', className && className);
-        const bodyClassNames = (0, classnames_1.default)('padding-0');
-        const mediaTitle = media[currentMediaIndex].title;
-        const mediaSubtitle = media[currentMediaIndex].subtitle || null;
-        return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { show: show, title: mediaTitle, subtitle: mediaSubtitle, body: this.renderBody(media, currentMediaIndex), footer: media && media.length > 1 ? this.renderFooter(this.props) : '', onHide: onClose, className: dialogClassName, bodyClassName: bodyClassNames })));
-    }
-}
+        return mediaData.src && renderImage(mediaData);
+    };
+    const dialogClassName = (0, classnames_1.default)('media-dialog', className && className);
+    const bodyClassNames = (0, classnames_1.default)('padding-0');
+    const mediaContentClassNames = (0, classnames_1.default)('media-content', 'content-center');
+    const mediaTitle = media[currentMediaIndex].title;
+    const mediaSubtitle = media[currentMediaIndex].subtitle || null;
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { show: show, title: mediaTitle, subtitle: mediaSubtitle, body: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: mediaContentClassNames }, { children: renderMediaContent(media[currentMediaIndex]) })), footer: (media === null || media === void 0 ? void 0 : media.length) > 1 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative clearfix' }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute top-50pct left-50pct transform translate-centered' }, { children: `${currentMediaIndex + 1} / ${props.media.length}` })), (0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link btn-icon-right pull-right', onClick: handleNext }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }), nextButtonText] }))] }))), onClose: onClose, className: dialogClassName, bodyClassName: bodyClassNames, disableEsc: disableEsc, useOverflow: useOverflow, bsSize: bsSize })));
+};
 MediaDialog.MEDIA_TYPE_IMAGE = 'image';
 MediaDialog.MEDIA_TYPE_VIDEO = 'video';
-MediaDialog.defaultProps = {
-    show: false,
-    onClose: () => { },
-    disableEsc: false,
-    useOverflow: false,
-    bsSize: Dialog_1.default.SIZE_LG,
-    media: [],
-    previousButtonText: 'Prev',
-    previousButtonCallback: () => { },
-    nextButtonText: 'Next',
-    nextButtonCallback: () => { },
-};
-MediaDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes_1.default), { media: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        type: prop_types_1.default.oneOf([MediaDialog.MEDIA_TYPE_IMAGE, MediaDialog.MEDIA_TYPE_VIDEO]).isRequired,
-        src: prop_types_1.default.string.isRequired,
-        title: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
-        subtitle: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-        aspectRatio: prop_types_1.default.string,
-        className: prop_types_1.default.string,
-    })).isRequired, previousButtonText: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired, previousButtonCallback: prop_types_1.default.func, nextButtonText: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired, nextButtonCallback: prop_types_1.default.func });
 exports.default = MediaDialog;

package/lib/es/components/dialog/ReleaseNotesDialog.d.ts

@@ -1,20 +1,61 @@
+import { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';
+export type ReleaseNotesDialogProps = {
+    /**
+     * Decides if the dialog is opened.
+     */
+    showReleaseNotes: boolean;
+    /**
+     * Callback set showReleaseNotes state
+     * @param show
+     * @returns
+     */
+    setShowReleaseNotes: (show: boolean) => void;
+    /**
+     * Translated text for "What`s new?"
+     */
+    whatsNewTitle?: string;
+    /**
+     * The translated modulename.
+     */
+    moduleName?: string;
+    /**
+     * Translated text for the close button.
+     */
+    closeButtonText?: string;
+    /**
+     * Translated release notes.
+     *
+     * @example
+     *
+     * ```tsx
+     * {
+     *     "0.1.2": {
+     *         date: '20.10.2023',
+     *         content: (
+     *             <div className='padding-left-15'>
+     *                 Summary
+     *                 • Feature 1
+     *                 • Feature 2
+     *             </div>
+     *         ),
+     *     }
+     * }
+     * ```
+     */
+    translatedReleaseNotes: ReleaseNotesData;
+    /**
+     * Specifies the current module version.
+     */
+    currentVersion: string;
+    /**
+     * Specifies the item in the localStorage that is used to save the last read module version.
+     */
+    RELEASE_NOTES_ITEM: string;
+    /**
+     * Enables the content of the dialog to scroll when it overflows.
+     * This means the dialog body scrolls instead of the entire dialog.
+     */
+    useOverflow?: boolean;
+};
+declare const ReleaseNotesDialog: (props: ReleaseNotesDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default ReleaseNotesDialog;
-declare function ReleaseNotesDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ReleaseNotesDialog {
-    namespace defaultProps {
-        const useOverflow: boolean;
-    }
-    namespace propTypes {
-        export const showReleaseNotes: PropTypes.Validator<boolean>;
-        export const setShowReleaseNotes: PropTypes.Validator<(...args: any[]) => any>;
-        export const whatsNewTitle: PropTypes.Requireable<string>;
-        export const moduleName: PropTypes.Requireable<string>;
-        export const closeButtonText: PropTypes.Requireable<string>;
-        export const translatedReleaseNotes: PropTypes.Requireable<object>;
-        export const currentVersion: PropTypes.Validator<string>;
-        export const RELEASE_NOTES_ITEM: PropTypes.Validator<string>;
-        const useOverflow_1: PropTypes.Requireable<boolean>;
-        export { useOverflow_1 as useOverflow };
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/dialog/ReleaseNotesDialog.js

@@ -2,39 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const ReleaseNotes_1 = tslib_1.__importDefault(require("../releaseNotes/ReleaseNotes"));
-const setReleaseNotesItem = props => {
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const setReleaseNotesItem = (props) => {
     window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);
     props.setShowReleaseNotes(false);
 };
-const getModuleName = (moduleName, whatsNew) => (0, jsx_runtime_1.jsx)("span", { children: moduleName ? moduleName : whatsNew });
-const getBody = props => {
-    const { translatedReleaseNotes } = props;
-    return (0, jsx_runtime_1.jsx)(ReleaseNotes_1.default, { releaseNotes: translatedReleaseNotes });
-};
-const getFooter = props => {
-    const { closeButtonText } = props;
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ "data-component": 'CloseButton', type: 'button', className: 'btn btn-default', onClick: () => setReleaseNotesItem(props) }, { children: closeButtonText || 'Close' })));
-};
-const ReleaseNotesDialog = props => {
-    const { moduleName, whatsNewTitle } = props;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { show: props.showReleaseNotes, useOverflow: props.useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: getBody(props), footer: getFooter(props), onHide: () => setReleaseNotesItem(props) }));
-};
-ReleaseNotesDialog.defaultProps = {
-    useOverflow: true,
-};
-ReleaseNotesDialog.propTypes = {
-    showReleaseNotes: prop_types_1.default.bool.isRequired,
-    setShowReleaseNotes: prop_types_1.default.func.isRequired,
-    whatsNewTitle: prop_types_1.default.string,
-    moduleName: prop_types_1.default.string,
-    closeButtonText: prop_types_1.default.string,
-    translatedReleaseNotes: prop_types_1.default.object,
-    currentVersion: prop_types_1.default.string.isRequired,
-    RELEASE_NOTES_ITEM: prop_types_1.default.string.isRequired,
-    useOverflow: prop_types_1.default.bool,
+const getModuleName = (moduleName, whatsNew) => ((0, jsx_runtime_1.jsx)("span", { children: moduleName ? moduleName : whatsNew }));
+const ReleaseNotesDialog = (props) => {
+    const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: (0, jsx_runtime_1.jsx)(ReleaseNotes_1.default, { releaseNotes: translatedReleaseNotes }), footer: (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ onClick: () => setReleaseNotesItem(props) }, { children: closeButtonText || 'Close' })), onClose: () => setReleaseNotesItem(props) }));
 };
 exports.default = ReleaseNotesDialog;

package/lib/es/components/dialog/SaveDialog.d.ts

@@ -1,31 +1,35 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SaveDialogProps = BaseDialogProps & {
+    /**
+     * The content of the dialog body itself.
+     */
+    content: string | React.ReactNode;
+    /**
+     * A callback fired when the cancel button is clicked or the dialog is closed.
+     */
+    onClickCancel: VoidFunction;
+    /**
+     * A callback fired when the discard button is clicked.
+     */
+    onClickDiscard: VoidFunction;
+    /**
+     * A callback fired when the confirmation button is clicked.
+     */
+    onClickConfirm: VoidFunction;
+    /**
+     * The content of the discard button. (Usually a text, can also be a FormattedMessage component).
+     */
+    discardButtonText: string | React.ReactNode;
+    /**
+     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).
+     */
+    cancelButtonText: string | React.ReactNode;
+    /**
+     * The content of the confirmation button. Since it is a node, it can be a simple text
+     * or any JSX node like a div element with an icon and a text.
+     */
+    confirmButtonText: string | React.ReactNode;
+};
+declare const SaveDialog: (props: SaveDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SaveDialog;
-declare function SaveDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SaveDialog {
-    namespace defaultProps {
-        const show: boolean;
-        const showCloseButton: boolean;
-        function onClickCancel(): void;
-        function onClickConfirm(): void;
-        function onClickDiscard(): void;
-    }
-    const propTypes: {
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onClickCancel: PropTypes.Validator<(...args: any[]) => any>;
-        onClickDiscard: PropTypes.Validator<(...args: any[]) => any>;
-        onClickConfirm: PropTypes.Validator<(...args: any[]) => any>;
-        discardButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        cancelButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        confirmButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/lib/es/components/dialog/SaveDialog.js

@@ -2,24 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
-/*
- * Save dialog component to save, discard or cancel an action
- */
-const SaveDialog = props => {
-    const { content, onClickDiscard, discardButtonText, onClickCancel, cancelButtonText, onClickConfirm, confirmButtonText } = props, remainingProps = tslib_1.__rest(props, ["content", "onClickDiscard", "discardButtonText", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText"]);
-    const footer = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'DiscardButton btn btn-default', onClick: onClickDiscard }, { children: discardButtonText })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'CancelButton btn btn-default', onClick: onClickCancel }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'ConfirmationButton btn btn-primary', onClick: onClickConfirm }, { children: confirmButtonText }))] })));
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: content, footer: footer, onHide: onClickCancel, className: 'save-dialog', disableEsc: true })));
+const SaveDialog = (props) => {
+    const { showCloseButton = true, content, discardButtonText, cancelButtonText, confirmButtonText, onClickDiscard = noop_1.default, onClickCancel = noop_1.default, onClickConfirm = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["showCloseButton", "content", "discardButtonText", "cancelButtonText", "confirmButtonText", "onClickDiscard", "onClickCancel", "onClickConfirm"]);
+    const footer = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'DiscardButton', onClick: onClickDiscard }, { children: discardButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm }, { children: confirmButtonText }))] })));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { showCloseButton: showCloseButton, body: content, footer: footer, onClose: onClickCancel, className: 'save-dialog', disableEsc: true })));
 };
-SaveDialog.defaultProps = {
-    show: false,
-    showCloseButton: true,
-    onClickCancel: () => { },
-    onClickConfirm: () => { },
-    onClickDiscard: () => { },
-};
-SaveDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes_1.default), { content: prop_types_1.default.node, onClickCancel: prop_types_1.default.func.isRequired, onClickDiscard: prop_types_1.default.func.isRequired, onClickConfirm: prop_types_1.default.func.isRequired, discardButtonText: prop_types_1.default.node.isRequired, cancelButtonText: prop_types_1.default.node.isRequired, confirmButtonText: prop_types_1.default.node.isRequired });
 exports.default = SaveDialog;

package/lib/es/components/dialog/SimpleDialog.d.ts

@@ -1,21 +1,10 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SimpleDialogProps = BaseDialogProps & {
+    /**
+     * The content of the dialog body itself.
+     */
+    content: string | React.ReactNode;
+};
+declare const SimpleDialog: (props: SimpleDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleDialog;
-declare function SimpleDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SimpleDialog {
-    namespace defaultProps {
-        const showCloseButton: boolean;
-    }
-    const propTypes: {
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/lib/es/components/dialog/SimpleDialog.js

@@ -2,20 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
 /*
  * Component to show a modal popup containing a title, a content and a close handler.
  */
-const SimpleDialog = props => {
-    const { content, onClose, className } = props;
+const SimpleDialog = (props) => {
+    const { content, showCloseButton = true, className } = props, remainingProps = tslib_1.__rest(props, ["content", "showCloseButton", "className"]);
     const dialogClassName = `${className ? className : ''} simple-dialog`;
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, props, { body: content, onHide: onClose, className: dialogClassName }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { showCloseButton: showCloseButton, body: content, className: dialogClassName }));
 };
-SimpleDialog.defaultProps = {
-    showCloseButton: true,
-};
-SimpleDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes_1.default), { content: prop_types_1.default.node });
 exports.default = SimpleDialog;

package/lib/es/components/dialog/SplitDialog.d.ts

@@ -1,32 +1,30 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SplitDialogProps = BaseDialogProps & {
+    /**
+     * The content to be shown on the left side.
+     */
+    leftContent?: string | React.ReactNode;
+    /**
+     * Additional classes for the left content element.
+     */
+    leftContentClassName?: string;
+    /**
+     * The content to be shown on the right side.
+     */
+    rightContent?: string | React.ReactNode;
+    /**
+     * Additional classes for the right content element.
+     */
+    rightContentClassName?: string;
+    /**
+     * The dialog body content.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Additional classes for the modal-footer element.
+     */
+    footerClassName?: string;
+};
+declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;
-declare function SplitDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SplitDialog {
-    namespace defaultProps {
-        const className: string;
-        const footer: string;
-        const useOverflow: boolean;
-        const showCloseButton: boolean;
-        const leftContentClassName: string;
-        const rightContentClassName: string;
-    }
-    const propTypes: {
-        leftContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        leftContentClassName: PropTypes.Requireable<string>;
-        rightContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        rightContentClassName: PropTypes.Requireable<string>;
-        bodyClassName: PropTypes.Requireable<string>;
-        footerClassName: PropTypes.Requireable<string>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";