ish-ui 1.0.2 → 1.0.4

package/src/dialog/message/Message.tsx

@@ -1,140 +0,0 @@
-/*
- * 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';
-import { AnyArgFunction } from '@src/model';
-
-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)
-  }
-});
-
-interface Props {
-  opened: boolean;
-  text: string;
-  clearMessage: AnyArgFunction;
-  isSuccess?: boolean;
-  persist?: boolean;
-  classes?: any;
-}
-
-class Message extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-
-    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
-      });
-    }
-  }
-
-  handleClose = () => {
-    if (!this.state.persist) {
-      this.props.clearMessage();
-    }
-  };
-
-  render() {
-    const { classes, opened, clearMessage } = this.props;
-
-    const { success, text, persist } = this.state;
-
-    return (
-
-      <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}
-      >
-        <Alert
-          variant="filled"
-          severity={success ? 'success' : 'error'}
-          classes={{
-            message: 'text-pre-wrap',
-            standardError: 'errorBackgroundColor',
-            standardSuccess: 'successBackgroundColor'
-          }}
-          action={(
-            <IconButton
-              key="close"
-              aria-label="Close"
-              color="inherit"
-              className={classes.close}
-              onClick={clearMessage}
-            >
-              <CloseIcon />
-            </IconButton>
-)}
-        >
-          {text}
-        </Alert>
-      </Snackbar>
-    );
-  }
-}
-
-export default withStyles(styles as any)(Message);

package/src/documents/DocumentIconsChooser.tsx

@@ -1,69 +0,0 @@
-/*
- * 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 ? (
-    <div
-      style={{
-        backgroundImage: `url(data:image;base64,${thumbnail})`
-      }}
-      className={clsx(classes.preview, {
-        [classes.previewHoverImage]: hovered,
-        [classes.previewNormal]: isHeader
-      })}
-    />
-  ) : (
-    <div
-      className={clsx(classes.preview, {
-        [classes.previewHoverIcon]: hovered
-      })}
-    >
-      <FileTypeIcon mimeType={type} />
-    </div>
-  );
-};
-
-export default withStyles(styles)(DocumentIconsChooser);

package/src/documents/utils/index.tsx

@@ -1,71 +0,0 @@
-/*
- * 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: number): string => {
-  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: File): Promise<string> => {
-  const reader = new FileReader();
-
-  return new Promise(resolve => {
-    reader.onload = () => resolve(reader.result);
-    reader.readAsDataURL(file);
-  }).then((result: any) => result.replace(`data:${file.type};base64,`, ''));
-
-};
-
-export const getDocumentThumbnail = (file: File): Promise<string> => {
-  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 }) => <FontAwesomeIcon icon={getIcon(mimeType)} fixedWidth className="w-100 h-100" />;

package/src/dynamicSizeList/DynamicSizeList.tsx

@@ -1,208 +0,0 @@
-/*
- * 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/fieldMessage/styles.ts

@@ -1,21 +0,0 @@
-/*
- * 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

@@ -1,158 +0,0 @@
-/*
- * 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

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