ish-ui 1.0.0-alpha.12

package/dist/dialog/message/Message.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.JSXElementConstructor<Omit<any, "classes"> & (import("@mui/styles").StyledComponentProps<any> | (import("@mui/styles").StyledComponentProps<any> & object))>;
+export default _default;

package/dist/dialog/message/Message.js

@@ -0,0 +1,91 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import { withStyles } from '@mui/styles';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import Alert from '@mui/material/Alert';
+import CloseIcon from '@mui/icons-material/Close';
+const styles = theme => ({
+    close: {
+        color: theme.palette.primary.contrastText,
+        width: theme.spacing(4),
+        height: theme.spacing(4),
+        padding: theme.spacing(0.5)
+    },
+    success: {
+        maxWidth: 'unset'
+    },
+    autoWidth: {
+        [theme.breakpoints.down('md')]: {
+            flexGrow: 'unset',
+            borderRadius: `${theme.shape.borderRadius}px`
+        }
+    },
+    autoWidthRoot: {
+        [theme.breakpoints.down('md')]: {
+            left: '24px',
+            right: 'auto',
+            bottom: '24px'
+        }
+    },
+    fullScreenMessage: {
+        maxHeight: 'calc(100vh - 90px)',
+        overflow: 'auto',
+        marginRight: theme.spacing(-2),
+        paddingRight: theme.spacing(2)
+    }
+});
+class Message extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleClose = () => {
+            if (!this.state.persist) {
+                this.props.clearMessage();
+            }
+        };
+        this.state = {
+            success: props.isSuccess,
+            text: props.text,
+            persist: props.persist
+        };
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.opened !== prevProps.opened) {
+            this.setState({
+                success: this.props.opened ? this.props.isSuccess : this.state.success,
+                text: this.props.opened ? this.props.text : this.state.text,
+                persist: this.props.opened ? this.props.persist : this.state.persist
+            });
+        }
+    }
+    render() {
+        const { classes, opened, clearMessage } = this.props;
+        const { success, text, persist } = this.state;
+        return (React.createElement(Snackbar, { open: opened, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+            }, classes: {
+                root: classes.autoWidthRoot
+            }, ContentProps: {
+                classes: {
+                    root: clsx(classes.autoWidth, {
+                        [classes.success]: success
+                    }),
+                    message: persist ? classes.fullScreenMessage : undefined
+                }
+            }, ClickAwayListenerProps: {
+                onClickAway: this.handleClose
+            }, autoHideDuration: persist ? null : 6000, onClose: this.handleClose, disableWindowBlurListener: persist },
+            React.createElement(Alert, { variant: "filled", severity: success ? 'success' : 'error', classes: {
+                    message: 'text-pre-wrap',
+                    standardError: 'errorBackgroundColor',
+                    standardSuccess: 'successBackgroundColor'
+                }, action: (React.createElement(IconButton, { key: "close", "aria-label": "Close", color: "inherit", className: classes.close, onClick: clearMessage },
+                    React.createElement(CloseIcon, null))) }, text)));
+    }
+}
+export default withStyles(styles)(Message);

package/dist/documents/DocumentIconsChooser.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"preview" | "previewNormal" | "previewHoverIcon" | "previewHoverImage">>;
+export default _default;

package/dist/documents/DocumentIconsChooser.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+import * as React from 'react';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import clsx from 'clsx';
+import { FileTypeIcon } from './utils';
+const styles = theme => createStyles({
+    preview: {
+        backgroundSize: 'cover',
+        width: '36px',
+        height: '48px',
+        borderRadius: '4px',
+        marginRight: '16px',
+        color: 'rgba(0,0,0,.2)',
+        transition: 'color 200ms ease-in-out',
+        backgroundPosition: 'center'
+    },
+    previewNormal: {
+        width: '60px',
+        height: 'calc(100% - 16px)'
+    },
+    previewHoverIcon: {
+        '&:hover': {
+            color: theme.palette.primary.main
+        }
+    },
+    previewHoverImage: {
+        '&:hover': {
+            boxShadow: `0 0 1px 1px ${theme.palette.primary.main}`
+        }
+    }
+});
+const DocumentIconsChooser = props => {
+    const { type, thumbnail, classes, hovered = true, isHeader } = props;
+    return thumbnail ? (React.createElement("div", { style: {
+            backgroundImage: `url(data:image;base64,${thumbnail})`
+        }, className: clsx(classes.preview, {
+            [classes.previewHoverImage]: hovered,
+            [classes.previewNormal]: isHeader
+        }) })) : (React.createElement("div", { className: clsx(classes.preview, {
+            [classes.previewHoverIcon]: hovered
+        }) },
+        React.createElement(FileTypeIcon, { mimeType: type })));
+};
+export default withStyles(styles)(DocumentIconsChooser);

package/dist/documents/index.d.ts

@@ -0,0 +1,3 @@
+export * from './utils';
+export * from './DocumentIconsChooser';
+export { default as DocumentIconsChooser } from './DocumentIconsChooser';

package/dist/documents/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './utils';
+export * from './DocumentIconsChooser';
+export { default as DocumentIconsChooser } from './DocumentIconsChooser';

package/dist/documents/utils/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const formatDocumentSize: (size: number) => string;
+export declare const getDocumentContent: (file: File) => Promise<string>;
+export declare const getDocumentThumbnail: (file: File) => Promise<string>;
+export declare const FileTypeIcon: ({ mimeType }: {
+    mimeType: any;
+}) => React.JSX.Element;

package/dist/documents/utils/index.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright ish group pty ltd 2022.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+export const formatDocumentSize = (size) => {
+    if (size < Math.pow(1024, 2)) {
+        return `${Math.round(size / 1024)} kb`;
+    }
+    if (size < Math.pow(1024, 3)) {
+        return `${Math.round(size / 1024 / 1024)} Mb`;
+    }
+    if (size < Math.pow(1024, 4)) {
+        return `${Math.round(size / 1024 / 1024 / 1024)} Gb`;
+    }
+    return size.toString();
+};
+export const getDocumentContent = (file) => {
+    const reader = new FileReader();
+    return new Promise(resolve => {
+        reader.onload = () => resolve(reader.result);
+        reader.readAsDataURL(file);
+    }).then((result) => result.replace(`data:${file.type};base64,`, ''));
+};
+export const getDocumentThumbnail = (file) => {
+    if (file.type.match(/image/)) {
+        return getDocumentContent(file);
+    }
+    return new Promise(resolve => resolve(''));
+};
+const getIcon = type => {
+    switch (type) {
+        case 'image/tiff':
+        case 'image/bmp':
+        case 'image/png':
+        case 'image/gif':
+        case 'image/jpeg':
+            return 'file-image';
+        case 'application/pdf':
+            return 'file-pdf';
+        case 'application/msword':
+            return 'file-word';
+        case 'application/vnd.ms-excel':
+            return 'file-excel';
+        case 'application/vnd.ms-powerpoint':
+            return 'file-powerpoint';
+        case 'application/zip':
+            return 'file-archive';
+        case 'application/x-gzip':
+            return 'file-archive';
+        case 'application/txt':
+            return 'file-alt';
+        default:
+            return 'file';
+    }
+};
+export const FileTypeIcon = ({ mimeType }) => React.createElement(FontAwesomeIcon, { icon: getIcon(mimeType), fixedWidth: true, className: "w-100 h-100" });

package/dist/dynamicSizeList/DynamicSizeList.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface Props {
+    height: number;
+    itemCount: number;
+    width: number;
+    estimatedItemSize: number;
+    children: any;
+    listRef?: any;
+}
+declare class DynamicSizeList extends React.Component<Props> {
+    listRef: React.RefObject<any>;
+    rowSizes: any[];
+    componentDidMount(): void;
+    attachRefs: (node: any) => void;
+    render(): React.JSX.Element;
+    scrollToItem(index: any, align: any): void;
+    renderItem: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    handleNewMeasurements: (index: any, newSize: any) => void;
+    getItemSize: (index: any) => any;
+}
+export default DynamicSizeList;

package/dist/dynamicSizeList/DynamicSizeList.js

@@ -0,0 +1,169 @@
+/*
+ * Copyright ish group pty ltd 2022.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Temporary implementation
+// TODO: Remove component when native DynamicSizeList will be included in react-window v.2
+import React from 'react';
+import { VariableSizeList } from 'react-window';
+class ItemMeasurer extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._node = null;
+        this._resizeObserver = null;
+        this._measureItem = () => {
+            const { handleNewMeasurements, index } = this.props;
+            const node = this._node;
+            if (node) {
+                const { height, width } = node.getBoundingClientRect();
+                const isVisible = height > 0 || width > 0;
+                if (isVisible) {
+                    const newSize = Math.ceil(height);
+                    handleNewMeasurements(index, newSize);
+                }
+            }
+        };
+        this._refSetter = ref => {
+            if (this._resizeObserver !== null && this._node !== null) {
+                this._resizeObserver.unobserve(this._node);
+            }
+            if (ref) {
+                this._node = ref;
+            }
+            else {
+                this._node = null;
+            }
+            if (this._resizeObserver !== null && this._node !== null) {
+                this._resizeObserver.observe(this._node);
+            }
+        };
+        this._onResize = entries => {
+            const _this = this;
+            window.requestAnimationFrame(() => {
+                if (!Array.isArray(entries) || !entries.length) {
+                    return;
+                }
+                _this._measureItem();
+            });
+        };
+    }
+    componentDidMount() {
+        this._measureItem();
+        // @ts-ignore
+        if (typeof window.ResizeObserver !== 'undefined') {
+            // @ts-ignore
+            this._resizeObserver = new window.ResizeObserver(this._onResize);
+            if (this._node !== null) {
+                this._resizeObserver.observe(this._node);
+            }
+        }
+        else {
+            //
+        }
+    }
+    componentWillUnmount() {
+        if (this._resizeObserver !== null) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
+    }
+    render() {
+        return React.cloneElement(this.props.item, {
+            ref: this._refSetter
+        });
+    }
+}
+class DynamicSizeList extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.listRef = React.createRef();
+        this.rowSizes = [];
+        this.attachRefs = node => {
+            const { listRef } = this.props;
+            if (node) {
+                if (!this.listRef.current) {
+                    // @ts-ignore
+                    this.listRef.current = node;
+                }
+                if (typeof listRef === 'function') {
+                    listRef(node);
+                }
+                if (typeof listRef === 'object') {
+                    listRef.current = node;
+                }
+            }
+        };
+        this.renderItem = props => {
+            // clear height
+            if (props.style.height !== undefined) {
+                props.style.height = undefined;
+            }
+            return React.createElement(ItemMeasurer, {
+                index: props.index,
+                // @ts-ignore
+                item: React.createElement(this.props.children, props),
+                handleNewMeasurements: this.handleNewMeasurements
+            });
+        };
+        this.handleNewMeasurements = (index, newSize) => {
+            const itemSizeDelta = newSize - this.getItemSize(index);
+            if (itemSizeDelta !== 0) {
+                this.rowSizes[index] = newSize;
+                const ref = this.listRef.current;
+                if (ref) {
+                    const { isScrolling, scrollDirection } = ref.state;
+                    if (isScrolling && scrollDirection === 'backward') {
+                        ref._outerRef.scrollBy({
+                            top: itemSizeDelta,
+                            left: 0,
+                            behavior: 'auto'
+                        });
+                    }
+                    ref.resetAfterIndex(index, true);
+                }
+            }
+        };
+        this.getItemSize = index => {
+            // https://react-window.now.sh/#/api/VariableSizeList
+            const defaultEstimatedItemSize = 50;
+            return (this.rowSizes[index]
+                || this.props.estimatedItemSize
+                || defaultEstimatedItemSize);
+        };
+    }
+    componentDidMount() {
+        const ref = this.listRef.current;
+        if (ref) {
+            ref.resetAfterIndex(0, true);
+        }
+    }
+    render() {
+        const _a = this.props, { children } = _a, rest = __rest(_a, ["children"]);
+        return (React.createElement(VariableSizeList, Object.assign({}, rest, { ref: this.attachRefs, itemSize: this.getItemSize }), this.renderItem));
+    }
+    scrollToItem(index, align) {
+        const ref = this.listRef.current;
+        if (ref) {
+            ref.scrollToItem(index, align);
+            //
+            window.requestAnimationFrame(() => {
+                ref.scrollToItem(index, align);
+            });
+        }
+    }
+}
+export default DynamicSizeList;

package/dist/dynamicSizeList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DynamicSizeList';
+export { default as DynamicSizeList } from './DynamicSizeList';

package/dist/dynamicSizeList/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './DynamicSizeList';
+export { default as DynamicSizeList } from './DynamicSizeList';

package/dist/fieldMessage/ErrorMessage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    classes?: any;
+    className?: string;
+    message: string;
+}
+declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"icon" | "root">>;
+export default _default;

package/dist/fieldMessage/ErrorMessage.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import React from 'react';
+import Error from '@mui/icons-material/Error';
+import Typography from '@mui/material/Typography';
+import withStyles from '@mui/styles/withStyles';
+import clsx from 'clsx';
+import styles from './styles';
+const ErrorMessage = ({ classes, className, message }) => (React.createElement("div", { className: clsx(classes.root, className) },
+    React.createElement(Error, { color: "error", className: classes.icon }),
+    React.createElement(Typography, { variant: "caption", className: "errorColor" }, message)));
+export default withStyles(styles)(ErrorMessage);

package/dist/fieldMessage/WarningMessage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    classes?: any;
+    className?: string;
+    warning: string;
+}
+declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"icon" | "root">>;
+export default _default;

package/dist/fieldMessage/WarningMessage.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import React from 'react';
+import Warning from '@mui/icons-material/Warning';
+import Typography from '@mui/material/Typography';
+import withStyles from '@mui/styles/withStyles';
+import clsx from 'clsx';
+import styles from './styles';
+const WarningMessage = ({ classes, className, warning }) => (React.createElement("div", { className: clsx(classes.root, className) },
+    React.createElement(Warning, { className: clsx(classes.icon, 'warningColor') }),
+    React.createElement(Typography, { variant: "caption", className: "warningColor" }, warning)));
+export default withStyles(styles)(WarningMessage);

package/dist/fieldMessage/index.d.ts

@@ -0,0 +1,6 @@
+export * from './styles';
+export * from './ErrorMessage';
+export * from './WarningMessage';
+export { default as styles } from './styles';
+export { default as ErrorMessage } from './ErrorMessage';
+export { default as WarningMessage } from './WarningMessage';

package/dist/fieldMessage/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './styles';
+export * from './ErrorMessage';
+export * from './WarningMessage';
+export { default as styles } from './styles';
+export { default as ErrorMessage } from './ErrorMessage';
+export { default as WarningMessage } from './WarningMessage';

package/dist/fieldMessage/styles.d.ts

@@ -0,0 +1,3 @@
+import { AppTheme } from '../model';
+declare const _default: (theme: AppTheme) => import("@mui/styles").StyleRules<{}, "icon" | "root">;
+export default _default;

package/dist/fieldMessage/styles.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+import { createStyles } from '@mui/styles';
+export default (theme) => createStyles({
+    root: {
+        marginTop: `-${theme.spacing(1)}`,
+        // @ts-ignore
+        paddingBottom: `${theme.spacing(2) - 3}`,
+    },
+    icon: {
+        fontSize: theme.spacing(2),
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        marginRight: theme.spacing(0.5),
+    }
+});

package/dist/fileUploader/FileUploaderDialog.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface Props {
+    fileRef?: any;
+    classes?: any;
+    opened?: boolean;
+    backdropEnabled?: boolean;
+    dialog?: boolean;
+    onChange?: (acceptedfiles: any[], fileRejections: any[]) => void;
+    disabled?: boolean;
+    accept?: string | string[];
+    onClose?: () => void;
+    isBackdropDragging?: boolean;
+}
+declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles").StyledComponentProps<never>>;
+export default _default;

package/dist/fileUploader/FileUploaderDialog.js

@@ -0,0 +1,99 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import { useDropzone } from 'react-dropzone';
+import { createStyles, withStyles } from '@mui/styles';
+import { darken } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Dialog from '@mui/material/Dialog';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Button from '@mui/material/Button';
+const styles = createStyles((theme) => ({
+    fileContainer: {
+        border: `2px dotted ${theme.palette.primary.main}`,
+        borderRadius: 6,
+        transition: theme.transitions.create('background-color', {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeInOut
+        })
+    },
+    dragActive: {
+        backgroundColor: darken(theme.palette.background.default, 0.03),
+        boxShadow: theme.shadows[2]
+    },
+    fullScreenFileDropContainer: {
+        zIndex: 1300,
+        left: 0,
+        top: 0,
+        position: 'fixed'
+    },
+    boxDropContainer: {
+        zIndex: 1400
+    },
+    dialogCloseButton: {
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[100]
+    }
+}));
+const FileUploaderDialog = (props => {
+    const { fileRef, accept, disabled, classes, dialog, onChange, onClose, opened, backdropEnabled, isBackdropDragging } = props;
+    const onFileDrop = (acceptedfiles, fileRejections) => {
+        if (onChange)
+            onChange(acceptedfiles, fileRejections);
+    };
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop: onFileDrop,
+        multiple: false,
+        disabled,
+        accept
+    });
+    const acceptText = () => {
+        const text = [];
+        if (Array.isArray(accept)) {
+            accept.forEach(type => {
+                const typePart = type.split('/');
+                if (typePart.length > 1)
+                    text.push(`*.${typePart[1]}`);
+            });
+        }
+        else {
+            const typePart = accept.split('/');
+            if (typePart.length > 1)
+                text.push(`*.${typePart[1]}`);
+        }
+        return text.join(', ');
+    };
+    const backdropUploaderContent = (React.createElement("div", Object.assign({}, getRootProps(), { className: clsx('w-100 h-100', classes.fullScreenFileDropContainer) }),
+        React.createElement("div", { className: "h-100 outline-none overflow-hidden cursor-pointer" },
+            React.createElement("div", { className: "h-100 p-1" },
+                React.createElement("input", Object.assign({}, getInputProps()))))));
+    const uploadContent = (React.createElement("div", Object.assign({}, getRootProps(), { className: clsx('w-100 overflow-y-auto relative', classes.boxDropContainer, { 'zIndex2': isBackdropDragging }) }),
+        React.createElement("div", { className: "h-100 outline-none overflow-hidden cursor-pointer" },
+            React.createElement("div", { className: "h-100 p-1" },
+                React.createElement("input", Object.assign({}, getInputProps())),
+                React.createElement("div", { className: clsx('w-100 h-100 flex-column align-items-center justify-content-center text-center p-2 pb-3', classes.fileContainer, { [classes.dragActive]: isDragActive }) },
+                    React.createElement(Typography, { variant: "subtitle1", gutterBottom: true, className: "mb-0" }, "Drop files here"),
+                    React.createElement(Typography, { variant: "caption", className: "mb-1" }, "or"),
+                    React.createElement(Button, { variant: "contained", size: "small", color: "primary", className: "mb-1 fontWeight-normal" }, "Browse"),
+                    accept && (React.createElement(Typography, { variant: "caption", color: "error" },
+                        "Please upload only:",
+                        ' ',
+                        acceptText())))))));
+    return dialog ? (React.createElement(Dialog, { ref: fileRef, open: opened, disableEscapeKeyDown: true, onClose: onClose, classes: {
+            paper: 'w-100'
+        } },
+        React.createElement("div", null,
+            onClose && (React.createElement(IconButton, { className: clsx('fixed zIndex1401 p-1', classes.dialogCloseButton), onClick: onClose },
+                React.createElement(CloseIcon, { fontSize: "small" }))),
+            uploadContent,
+            isBackdropDragging && backdropEnabled && backdropUploaderContent))) : backdropEnabled ? backdropUploaderContent : uploadContent;
+});
+export default withStyles(styles)(FileUploaderDialog);

package/dist/fileUploader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FileUploaderDialog';
+export { default as FileUploaderDialog } from './FileUploaderDialog';