ish-ui 1.0.19 → 1.0.21

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,17 @@
+import React from 'react';
+import { VariableSizeListProps } from 'react-window';
+interface Props extends Omit<VariableSizeListProps, 'itemSize'> {
+    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,167 @@
+/*
+ * 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;
+};
+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';

package/dist/fileUploader/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 './FileUploaderDialog';
+export { default as FileUploaderDialog } from './FileUploaderDialog';

package/dist/formFields/CheckboxField.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Redux Form field checkbox component creator
+ * */
+import React from 'react';
+import { CheckboxFieldProps, FieldInputProps } from '../model';
+export declare const StyledCheckbox: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"root"> & object>;
+export declare function CheckboxField<IP extends FieldInputProps>({ input, color, disabled, stringValue, className, uncheckedClass, onChangeHandler, stopPropagation }: CheckboxFieldProps<IP>): React.JSX.Element;

package/dist/formFields/CheckboxField.js

@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+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;
+};
+/**
+ * Redux Form field checkbox component creator
+ * */
+import React, { useCallback } from 'react';
+import Checkbox from '@mui/material/Checkbox';
+import withStyles from '@mui/styles/withStyles';
+import clsx from 'clsx';
+const getValue = (value, stringValue) => {
+    if (!stringValue) {
+        return !!value;
+    }
+    switch (value) {
+        case 'false':
+            return false;
+        case 'true':
+            return true;
+        default:
+            return Boolean(value);
+    }
+};
+const styles = theme => ({
+    root: {
+        width: theme.spacing(4),
+        height: theme.spacing(4),
+        margin: theme.spacing(0.5)
+    }
+});
+const StyledCheckboxBase = props => {
+    const { classes, uncheckedClass, className } = props, rest = __rest(props, ["classes", "uncheckedClass", "className"]);
+    return (React.createElement(Checkbox, Object.assign({ classes: {
+            root: clsx(classes.root, uncheckedClass, className),
+        } }, rest)));
+};
+export const StyledCheckbox = withStyles(styles)(StyledCheckboxBase);
+export function CheckboxField({ input, color, disabled, stringValue, className, uncheckedClass, onChangeHandler, stopPropagation }) {
+    const onChange = useCallback((e, value) => {
+        let checked = value;
+        if (stringValue) {
+            checked = checked.toString();
+        }
+        if (typeof onChangeHandler === 'function') {
+            onChangeHandler(e, checked);
+        }
+        if (!e.isDefaultPrevented()) {
+            input.onChange(checked);
+        }
+    }, [stringValue, input, onChangeHandler]);
+    return (React.createElement(StyledCheckbox, { checked: getValue(input.value, stringValue), onChange: onChange, color: color, disabled: disabled, className: className, uncheckedClass: uncheckedClass, onClick: stopPropagation ? e => e.stopPropagation() : undefined, id: `input-${input.name}`, name: input.name }));
+}

package/dist/formFields/CodeEditorField.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import 'ace-builds/src-noconflict/mode-groovy';
+import 'ace-builds/src-noconflict/theme-textmate';
+import { CodeFieldProps, FieldInputProps, FieldMetaProps } from '../model';
+declare function CodeEditorField<IP extends FieldInputProps, MP extends FieldMetaProps>({ input, meta: { error }, errorMessage, disabled, onFocus, className }: CodeFieldProps<IP, MP>): React.JSX.Element;
+export default CodeEditorField;

package/dist/formFields/CodeEditorField.js

@@ -0,0 +1,69 @@
+/*
+ * 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 AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-groovy';
+import 'ace-builds/src-noconflict/theme-textmate';
+import { makeAppStyles } from '../styles';
+const useStyles = makeAppStyles(theme => ({
+    editor: {
+        filter: theme.palette.mode === 'dark' ? 'invert(80%)' : '',
+        zIndex: 0,
+        outline: 'none'
+    },
+    errorBackground: {
+        '&.ace-tm': {
+            backgroundColor: theme.palette.error.light
+        }
+    },
+    errorMessage: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(calc(-50% + 21px), -50%)',
+        color: '#fff',
+        fontFamily: 'sans-serif',
+        zIndex: 1
+    },
+    queryMarker: {
+        borderRadius: '4px',
+        width: '55px',
+        paddingLeft: '4px',
+        height: '25px',
+        background: '#fff',
+        cursor: 'pointer',
+        position: 'absolute',
+        zIndex: 2,
+        boxShadow: theme.shadows[1],
+        '&:after': {
+            content: '\'Query\'',
+            marginLeft: '2px'
+        },
+        '&:hover': {
+            background: theme.palette.grey[100]
+        }
+    }
+}));
+function CodeEditorField({ input, meta: { error }, errorMessage, disabled, onFocus, className }) {
+    const classes = useStyles();
+    return (React.createElement("div", { id: input.name, className: className },
+        error && React.createElement("div", { className: classes.errorMessage },
+            React.createElement("div", { className: "shakingError" }, errorMessage || error)),
+        React.createElement(AceEditor, { mode: "groovy", theme: "textmate", value: input.value || ' ', onFocus: onFocus, onChange: input.onChange, fontSize: 14, showPrintMargin: false, showGutter: true, highlightActiveLine: true, width: "100%", maxLines: Infinity, className: clsx(classes.editor, {
+                [classes.errorBackground]: error
+            }), wrapEnabled: true, setOptions: {
+                enableBasicAutocompletion: true,
+                enableLiveAutocompletion: true,
+                enableSnippets: true,
+                showLineNumbers: true,
+                readOnly: disabled,
+                tabSize: 2
+            }, editorProps: { $blockScrolling: Infinity } })));
+}
+export default CodeEditorField;

package/dist/formFields/ColoredCheckBox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ColoredCheckboxFieldProps, FieldInputProps, FieldMetaProps } from '../model';
+export declare function ColoredCheckBox<IP extends FieldInputProps, MP extends FieldMetaProps>({ input, label, color, className, disabled }: ColoredCheckboxFieldProps<IP, MP>): React.JSX.Element;