ish-ui 1.0.2

package/src/dynamicSizeList/DynamicSizeList.tsx

@@ -0,0 +1,208 @@
+/*
+ * 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.
+ */
+
+// 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';
+
+interface Props {
+  height: number;
+  itemCount: number;
+  width: number;
+  estimatedItemSize: number;
+  children: any;
+  listRef?: any;
+}
+
+class ItemMeasurer extends React.Component<any, any> {
+  _node = null;
+
+  _resizeObserver = null;
+
+  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
+    });
+  }
+
+  _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);
+      }
+    }
+  };
+
+  _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);
+    }
+  };
+
+  _onResize = entries => {
+    const _this = this;
+    window.requestAnimationFrame(() => {
+      if (!Array.isArray(entries) || !entries.length) {
+        return;
+      }
+      _this._measureItem();
+    });
+  };
+}
+
+class DynamicSizeList extends React.Component<Props> {
+  listRef = React.createRef<any>();
+
+  rowSizes = [];
+
+  componentDidMount() {
+    const ref = this.listRef.current;
+    if (ref) {
+      ref.resetAfterIndex(0, true);
+    }
+  }
+
+  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;
+      }
+    }
+  };
+
+  render() {
+    const { children,
+      ...rest } = this.props;
+
+    return (
+      <VariableSizeList
+        {...rest}
+        ref={this.attachRefs}
+        itemSize={this.getItemSize}
+      >
+        {this.renderItem}
+      </VariableSizeList>
+    );
+  }
+
+  scrollToItem(index, align) {
+    const ref = this.listRef.current;
+
+    if (ref) {
+      ref.scrollToItem(index, align);
+      //
+      window.requestAnimationFrame(() => {
+        ref.scrollToItem(index, align);
+      });
+    }
+  }
+
+  renderItem = props => {
+    // clear height
+    if (props.style.height !== undefined) {
+      props.style.height = undefined;
+    }
+
+    return React.createElement<any>(ItemMeasurer, {
+      index: props.index,
+      // @ts-ignore
+      item: React.createElement(this.props.children, props),
+      handleNewMeasurements: this.handleNewMeasurements
+    });
+  };
+
+  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);
+      }
+    }
+  };
+
+  getItemSize = index => {
+    // https://react-window.now.sh/#/api/VariableSizeList
+    const defaultEstimatedItemSize = 50;
+
+    return (
+      this.rowSizes[index]
+      || this.props.estimatedItemSize
+      || defaultEstimatedItemSize
+    );
+  };
+}
+
+export default DynamicSizeList;

package/src/dynamicSizeList/index.ts

@@ -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';

package/src/fieldMessage/ErrorMessage.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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';
+
+interface Props {
+  classes?: any;
+  className?: string;
+  message: string;
+}
+
+const ErrorMessage: React.FC<Props> = ({ classes, className, message }) => (
+  <div className={clsx(classes.root, className)}>
+    <Error color="error" className={classes.icon} />
+    <Typography variant="caption" className="errorColor">
+      {message}
+    </Typography>
+  </div>
+  );
+
+export default withStyles(styles)(ErrorMessage);

package/src/fieldMessage/WarningMessage.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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';
+
+interface Props {
+  classes?: any;
+  className?: string;
+  warning: string;
+}
+
+const WarningMessage: React.FC<Props> = ({ classes, className, warning }) => (
+  <div className={clsx(classes.root, className)}>
+    <Warning className={clsx(classes.icon, 'warningColor')} />
+    <Typography variant="caption" className="warningColor">
+      {warning}
+    </Typography>
+  </div>
+);
+
+export default withStyles(styles)(WarningMessage);

package/src/fieldMessage/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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';

package/src/fieldMessage/styles.ts

@@ -0,0 +1,21 @@
+/*
+ * 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';
+import { AppTheme } from '@src/model';
+
+export default (theme: AppTheme) => 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/src/fileUploader/FileUploaderDialog.tsx

@@ -0,0 +1,158 @@
+/*
+ * 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';
+import { AppTheme } from '@src/model';
+
+const styles = createStyles((theme: AppTheme) => ({
+  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]
+  }
+}));
+
+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;
+}
+
+const FileUploaderDialog: React.FC<Props> = (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
+  } as any);
+
+  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 = (
+    <div {...getRootProps()}  className={clsx('w-100 h-100', classes.fullScreenFileDropContainer)}>
+      <div className="h-100 outline-none overflow-hidden cursor-pointer">
+        <div className="h-100 p-1">
+          <input {...getInputProps()} />
+        </div>
+      </div>
+    </div>
+  );
+
+  const uploadContent = (
+    <div {...getRootProps()}  className={clsx('w-100 overflow-y-auto relative', classes.boxDropContainer, { 'zIndex2': isBackdropDragging })}>
+      <div className="h-100 outline-none overflow-hidden cursor-pointer">
+        <div className="h-100 p-1">
+          <input {...getInputProps()} />
+          <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 })}
+          >
+            <Typography variant="subtitle1" gutterBottom className="mb-0">Drop files here</Typography>
+            <Typography variant="caption" className="mb-1">or</Typography>
+            <Button
+              variant="contained"
+              size="small"
+              color="primary"
+              className="mb-1 fontWeight-normal"
+            >
+              Browse 
+            </Button>
+            {accept && (
+              <Typography variant="caption" color="error">
+                Please upload only:
+                {' '}
+                {acceptText()}
+              </Typography>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return dialog ? (
+    <Dialog
+      ref={fileRef}
+      open={opened}
+      disableEscapeKeyDown
+      onClose={onClose}
+      classes={{
+        paper: 'w-100'
+      }}
+    >
+      <div>
+        {onClose && (
+          <IconButton className={clsx('fixed zIndex1401 p-1', classes.dialogCloseButton)} onClick={onClose}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        )}
+        {uploadContent}
+        {isBackdropDragging && backdropEnabled && backdropUploaderContent}
+      </div>
+    </Dialog>
+  ) : backdropEnabled ? backdropUploaderContent : uploadContent;
+});
+
+export default withStyles(styles)(FileUploaderDialog);

package/src/fileUploader/index.ts

@@ -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';

package/src/formFields/CheckboxField.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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.
+ */
+
+/**
+ * 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';
+import { CheckboxFieldProps, FieldInputProps } from '@src/model';
+
+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, ...rest
+  } = props;
+
+  return (
+    <Checkbox
+      classes={{
+        root: clsx(classes.root, uncheckedClass, className),
+      }}
+      {...rest}
+    />
+  );
+};
+
+export const StyledCheckbox = withStyles(styles)(StyledCheckboxBase);
+
+export function CheckboxField<IP extends FieldInputProps>({ input, color, disabled, stringValue, className, uncheckedClass, onChangeHandler, stopPropagation }: CheckboxFieldProps<IP>) {
+  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 (
+    <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/src/formFields/CodeEditorField.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { CodeFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
+import { makeAppStyles } from '@src/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<IP extends FieldInputProps, MP extends FieldMetaProps>({
+   input,
+   meta: { error },
+   errorMessage,
+   disabled,
+   onFocus,
+   className
+ }: CodeFieldProps<IP, MP> ) {
+
+  const classes = useStyles();
+
+  return (
+    <div id={input.name} className={className}>
+      {error && <div className={classes.errorMessage}><div className="shakingError">{errorMessage || error}</div></div>}
+      <AceEditor
+        mode="groovy"
+        theme="textmate"
+        value={input.value || ' '}
+        onFocus={onFocus}
+        onChange={input.onChange}
+        fontSize={14}
+        showPrintMargin={false}
+        showGutter
+        highlightActiveLine
+        width="100%"
+        maxLines={Infinity}
+        className={clsx(classes.editor, {
+          [classes.errorBackground]: error
+        })}
+        wrapEnabled
+        setOptions={{
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: true,
+          enableSnippets: true,
+          showLineNumbers: true,
+          readOnly: disabled,
+          tabSize: 2
+        }}
+        editorProps={{ $blockScrolling: Infinity }}
+      />
+    </div>
+  );
+}
+
+export default CodeEditorField;