ish-ui 1.0.2 → 1.0.3

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

package/src/formFields/CheckboxField.tsx

@@ -1,90 +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.
- */
-
-/**
- * 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

@@ -1,103 +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 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;

package/src/formFields/ColoredCheckBox.tsx

@@ -1,74 +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, { useCallback, useRef } from 'react';
-import { ButtonBase, Typography } from '@mui/material';
-import clsx from 'clsx';
-import { alpha } from '@mui/material/styles';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useAppTheme } from '@src/themes';
-import { rgbToHex } from '@mui/system/colorManipulator';
-import { ColoredCheckboxFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
-import { getCheckboxValue } from '@src/utils';
-
-export function ColoredCheckBox<IP extends FieldInputProps, MP extends FieldMetaProps>({
- input, label, color, className, disabled
-}: ColoredCheckboxFieldProps<IP, MP>) {
-  const theme = useAppTheme();
-  
-  const inputRef = useRef<HTMLInputElement>();
-
-  const onClick = useCallback(() => {
-    inputRef.current.click();
-  }, [inputRef.current]);
-  
-  if (disabled) {
-    color = rgbToHex(theme.palette.divider);
-  }
-
-  return (
-    <div
-      className={clsx('centeredFlex cursor-pointer', className)}
-      onClick={onClick}
-    >
-      <input
-        ref={inputRef}
-        type="checkbox"
-        {...input}
-        checked={getCheckboxValue(input.value, false)}
-        hidden
-      />
-      <ButtonBase
-        component="div"
-        disabled={disabled}
-        sx={{
-          width: theme => theme.spacing(3),
-          height: theme => theme.spacing(3),
-          border: `2px solid ${color}`,
-          borderRadius: '50%',
-          fontSize: '10px',
-          backgroundColor: input.value ? `${color}` : alpha(`${color}`, 0.1),
-          color: theme => theme.palette.getContrastText(`${color}`)
-        }}
-      >
-        {input.value && <FontAwesomeIcon fixedWidth icon="check" />}
-      </ButtonBase>
-      {label && <Typography
-        variant="caption"
-        fontWeight="400"
-        sx={{
-          marginLeft: 1,
-          textDecoration: input.value ? 'line-through' : 'unset',
-          color: theme => (input.value ? theme.palette.text.disabled : 'unset'),
-        }}
-      >
-        {label}
-      </Typography>}
-    </div>
-  );
-}

package/src/formFields/DateTimeField.tsx

@@ -1,61 +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 TextField from '@mui/material/TextField';
-import { MobileDatePicker, MobileDateTimePicker, MobileTimePicker } from '@mui/x-date-pickers';
-import { DD_MM_YYYY_HH_MM_SPECIAL, DD_MMM_YYYY_MINUSED, HH_MM_COLONED } from '@src/utils';
-
-export const DateTimeField = props => {
-  const {
-   onChange, type, ampm, value, setPickerRef, formatDate, maxDate, minDate, ...rest
-  } = props;
-
-  const picker = type === 'date' ? (
-    <MobileDatePicker
-      ref={setPickerRef}
-      onChange={onChange}
-      ampm={ampm || false}
-      value={value}
-      format={formatDate || DD_MMM_YYYY_MINUSED}
-      maxDate={maxDate || undefined}
-      minDate={minDate || undefined}
-      renderInput={props => <TextField {...props} />}
-      variant="standard"
-      {...rest}
-    />
-    ) : type === 'time' ? (
-      <MobileTimePicker
-        ref={setPickerRef}
-        onChange={onChange}
-        ampm={ampm || false}
-        value={value}
-        format={formatDate || HH_MM_COLONED}
-        maxDate={maxDate || undefined}
-        minDate={minDate || undefined}
-        renderInput={props => <TextField {...props} />}
-        variant="standard"
-        {...rest}
-      />
-    ) : type === 'datetime' ? (
-      <MobileDateTimePicker
-        ref={setPickerRef}
-        onChange={onChange}
-        ampm={ampm || false}
-        value={value}
-        format={formatDate || DD_MM_YYYY_HH_MM_SPECIAL}
-        maxDate={maxDate || undefined}
-        minDate={minDate || undefined}
-        renderInput={props => <TextField {...props} />}
-        variant="standard"
-        {...rest}
-      />
-    ) : null;
-
-  return picker || null;
-};