ish-ui 1.0.2 → 1.0.3

package/src/dialog/confirm/ConfirmBase.tsx

@@ -1,59 +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.
- */
-
-/**
- * Common confirm dialog
- * */
-
-import React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import { ConfirmState } from '@src/model';
-
-const ConfirmBase: React.FunctionComponent<ConfirmState> = props => {
-  const {
-    open,
-    onCancel,
-    title,
-    confirmMessage,
-    onConfirm,
-    cancelButtonText,
-    confirmButtonText,
-    onCancelCustom,
-    confirmCustomComponent
-  } = props;
-
-  return (
-    <Dialog open={open} onClose={onCancel}>
-      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
-      {confirmMessage && (
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">{confirmMessage}</DialogContentText>
-        </DialogContent>
-      )}
-
-      <DialogActions>
-        <Button onClick={onCancelCustom || onCancel} color="primary">
-          {cancelButtonText}
-        </Button>
-        {onConfirm && !confirmCustomComponent && (
-          <Button onClick={() => onConfirm()} variant="contained" color="primary">
-            {confirmButtonText}
-          </Button>
-        )}
-        {confirmCustomComponent && confirmCustomComponent}
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default ConfirmBase;

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),
-  }
-});