ish-ui 1.0.2 → 1.0.4

package/src/formFields/FilePreview.tsx

@@ -1,149 +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 Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import { createStyles, withStyles } from '@mui/styles';
-import { darken } from '@mui/material/styles';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Avatar from '@mui/material/Avatar';
-import clsx from 'clsx';
-import { AppTheme } from '@src/model';
-
-const styles = (theme: AppTheme) => createStyles({
-  root: {
-    height: 'fit-content',
-    width: 'fit-content',
-    position: 'relative',
-    fontSize: 0,
-    '&:hover $backdrop$active': {
-      opacity: 1
-    },
-    color: '#fff',
-  },
-  backdrop: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    background: theme.palette.action.active,
-    position: 'absolute',
-    height: '100%',
-    width: '100%',
-    opacity: 0,
-    transition: theme.transitions.create('opacity', {
-      duration: theme.transitions.duration.complex,
-      easing: theme.transitions.easing.easeInOut
-    }),
-    zIndex: 1,
-  },
-  rounded: {
-    borderRadius: '100%',
-  },
-  actionButton: {
-    background: theme.palette.background.paper,
-    '&:hover': {
-      background: darken(theme.palette.background.paper, 0.2)
-    },
-    marginTop: theme.spacing(1)
-  },
-  noValue: {
-    color: theme.palette.divider,
-    marginTop: theme.spacing(-1)
-  },
-  active: {},
-  avatarRoot: {
-    maxWidth: '100%',
-    transition: theme.transitions.create('all', {
-      duration: theme.transitions.duration.complex,
-      easing: theme.transitions.easing.easeInOut
-    }),
-  },
-});
-
-interface Props {
-  data: string;
-  label?: string;
-  actions?: {
-    actionLabel?: string;
-    onAction?: any;
-    disabled?: boolean,
-    icon?: any;
-  }[];
-  classes?: any;
-  iconPlacementRow?: boolean;
-  disabled?: boolean;
-  avatarSize?: number;
-}
-
-const FilePreview: React.FC<Props> = ({
- label, actions, data, classes, iconPlacementRow, disabled, avatarSize
-}) => {
-  const size = avatarSize || 90;
-  return (
-    <>
-      {label && (
-        <Typography variant="caption" color="textSecondary" component="div" className="pb-1">
-          {label}
-        </Typography>
-      )}
-
-      {data ? (
-        <div className={classes.root}>
-          {!disabled && (
-            <div className={clsx(classes.backdrop, avatarSize && classes.rounded, actions && classes.active)}>
-              <div className={iconPlacementRow ? 'centeredFlex' : 'flex-column'}>
-                {actions
-                    && actions.map((a, i) => (a.icon ? (
-                      <Tooltip key={i} title={a.actionLabel} placement={iconPlacementRow ? 'top' : 'right'}>
-                        <IconButton color="inherit" size="medium" onClick={a.onAction} disabled={a.disabled}>
-                          {a.icon}
-                        </IconButton>
-                      </Tooltip>
-                    ) : (
-                      <Button
-                        key={i}
-                        size="small"
-                        variant="outlined"
-                        color="secondary"
-                        classes={{
-                          root: classes.actionButton
-                        }}
-                        onClick={a.onAction}
-                        disabled={a.disabled}
-                      >
-                        {a.actionLabel}
-                      </Button>
-                    )))}
-              </div>
-            </div>
-          )}
-          {avatarSize
-          ? (
-            <Avatar
-              alt="FilePreview"
-              src={`data:image/png;base64, ${data}`}
-              sx={{ width: size, height: size }}
-              classes={{ root: classes.avatarRoot }}
-            />
-            ) : (
-              <img
-                alt="FilePreview"
-                src={`data:image/png;base64, ${data}`}
-                className={classes.avatarRoot}
-              />
-            )}
-        </div>
-      ) : (
-        <Typography variant="body1" className={classes.noValue}>
-          No Value
-        </Typography>
-      )}
-    </>
-  );
-};
-
-export default withStyles(styles)(FilePreview);

package/src/formFields/FormRadioButtons.tsx

@@ -1,62 +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 { withStyles } from '@mui/styles';
-import {
-  FormControl, FormControlLabel, Radio, RadioGroup
-} from '@mui/material';
-import Typography from '@mui/material/Typography';
-
-const styles = theme => ({
-  root: {
-    display: 'flex'
-  },
-  group: {
-    margin: theme.spacing(1, 0)
-  }
-});
-
-const FormRadioButtons = props => {
-  const {
-    classes,
-    items,
-    disabled,
-    input: { value, onChange, name },
-    labelPath = 'label',
-    valuePath = 'value',
-    color = 'primary',
-    row
-  } = props;
-
-  return (
-    <div className={classes.root}>
-      <FormControl component="fieldset">
-        <RadioGroup className={classes.group} value={value} onChange={(e: any) => onChange(e.target.value)} row={row}>
-          {items
-            && items.map((i, n) => (
-              <FormControlLabel
-                key={n}
-                value={i[valuePath]}
-                control={<Radio color={color} id={`input-${n}-${name}`} name={name} />}
-                label={(
-                  <Typography component="span" variant="body2">
-                    {i[labelPath]}
-                  </Typography>
-                )}
-                disabled={disabled}
-                htmlFor={`input-${n}-${name}`}
-              />
-            ))}
-        </RadioGroup>
-      </FormControl>
-    </div>
-  );
-};
-
-export default withStyles(styles)(FormRadioButtons) as React.FunctionComponent<any>;

package/src/formFields/SelectCustomComponents.tsx

@@ -1,228 +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 useTheme from '@mui/styles/useTheme';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import React from 'react';
-import ListSubheader from '@mui/material/ListSubheader';
-import InfiniteLoader from 'react-window-infinite-loader';
-import { areEqual, FixedSizeList as List } from 'react-window';
-import { createStyles } from '@mui/styles';
-import { green } from '@mui/material/colors';
-import clsx from 'clsx';
-import { ListItem } from '@mui/material';
-import { AppTheme } from '@src/model';
-import Tooltip from '@mui/material/Tooltip';
-
-export const selectStyles = theme => createStyles({
-    bottomMargin: {
-      marginBottom: `${theme.spacing(1) + 1}`
-    },
-    bottomPadding: {
-      paddingBottom: `${theme.spacing(1) + 1}`
-    },
-    topMargin: {
-      marginTop: `${theme.spacing(1)}`,
-      paddingLeft: '0'
-    },
-    editIcon: {
-      fontSize: '24px',
-      color: theme.palette.divider,
-      verticalAlign: 'middle',
-      margin: 0
-    },
-    editable: {
-      '&:hover': {
-        color: theme.palette.primary.main,
-        fill: theme.palette.primary.main
-      }
-    },
-    label: {
-      whiteSpace: 'nowrap',
-      '&$valid': {
-        color: green[500]
-      }
-    },
-    valid: {},
-    autoWidthSelect: {
-      width: 'calc(100% + 30px)'
-    },
-    emptySelect: {
-      color: '#fff'
-    },
-    error: {
-      color: theme.palette.error.main
-    },
-    validUnderline: {
-      '&:after': {
-        borderBottomColor: green[500]
-      }
-    },
-    menuItem: {
-      '&:hover .placeholderContent': {
-        color: '#fff'
-      },
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
-    menuItemActive: {
-      '& .placeholderContent': {
-        color: '#fff'
-      }
-    },
-    menuList: {
-      background: theme.palette.background.paper,
-      borderRadius: theme.shape.borderRadius,
-    },
-    readonly: {
-      fontWeight: 300,
-      pointerEvents: 'none'
-    },
-    multiple: {},
-    inline: {
-      display: 'inline-block',
-      '& .MuiInput-root .MuiInput-input': {
-        padding: 0
-      },
-      '& $inputEndAdornment': {
-        marginBottom: '-8px'
-      }
-    },
-    root: {
-      '& $multiple': {
-        flexWrap: 'wrap'
-      },
-      '& $multiple $inputEndAdornment': {
-        position: 'absolute',
-        right: 0,
-        bottom: 6,
-        height: 'auto'
-      }
-    },
-    inputEndAdornment: {
-      marginBottom: '-6px',
-      alignItems: 'center',
-      display: 'flex',
-    },
-    inputWrapper: {
-      '&:hover $inputEndAdornment': {
-        visibility: 'visible'
-      },
-      '&.Mui-focused $expandIcon': {
-        opacity: 1
-      }
-    },
-    expandIcon: { opacity: 0.5 },
-    hasPopup: {
-      '&$root $inputWrapper': {
-        paddingRight: 0
-      },
-      '&$root$hasClear $inputWrapper': {
-        paddingRight: 0
-      }
-    },
-    hasClear: {
-      '&$root $inputWrapper': {
-        paddingRight: 0
-      }
-    },
-  });
-
-export const ListRow = React.memo<any>(({ data: { children, selectAdornment }, index, style }) => {
-  const inlineStyle = {
-    ...style,
-    top: (style.top as number) + 8,
-    paddingLeft: 0,
-    paddingRight: 0,
-    whiteSpace: 'nowrap'
-  };
-
-  return (
-    <ListItem button style={inlineStyle}>
-      {((selectAdornment?.position === 'start' && index === 0)
-        || (selectAdornment?.position === 'end' && index === children.length))
-        ? selectAdornment.content
-        : children[index]
-      }
-    </ListItem>
-  );
-}, areEqual);
-
-const OuterElementContext = React.createContext({});
-
-const OuterElementType = React.forwardRef<any, any>((props, ref) => {
-  const outerProps = React.useContext(OuterElementContext);
-  return <div ref={ref} {...props} {...outerProps} />;
-});
-
-export const ListboxComponent = React.forwardRef<any, any>((props, ref) => {
-  const {
-   children, rowHeight, remoteRowCount, loadMoreRows, classes, loading, selectAdornment, fieldClasses, ...other
-  } = props;
-
-  const itemData = { selectAdornment, children: React.Children.toArray(children) };
-  const theme = useTheme() as AppTheme;
-  const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
-  const itemSize = rowHeight || (smUp ? 36 : 48);
-  const itemCount = (remoteRowCount > children.length ? children.length + 3 : children.length) + (selectAdornment ? 1 : 0);
-
-  const getChildSize = child => {
-    if (React.isValidElement(child) && child.type === ListSubheader) {
-      return 48;
-    }
-    return itemSize;
-  };
-
-  const getHeight = () => {
-    if (itemCount > 8) {
-      return 8 * itemSize;
-    }
-    return itemData.children.map(getChildSize).reduce((a, b) => a + b, 0);
-  };
-
-  const loadMoreItems = () => (loading ? undefined : loadMoreRows(itemData.children.length));
-
-  const isItemLoaded = index => index < (children.length + (selectAdornment ? 1 : 0));
-  
-  return (
-    <div ref={ref}>
-      <OuterElementContext.Provider value={other}>
-        <InfiniteLoader
-          isItemLoaded={isItemLoaded}
-          itemCount={itemCount}
-          loadMoreItems={loadMoreItems}
-        >
-          {({ onItemsRendered }) => (
-            <List
-              height={getHeight() + 2 * 8}
-              width="100%"
-              className={clsx(classes.menuList, fieldClasses.selectMenu)}
-              itemData={itemData}
-              outerElementType={OuterElementType}
-              onItemsRendered={onItemsRendered}
-              itemSize={itemSize}
-              itemCount={itemCount}
-            >
-              {ListRow}
-            </List>
-          )}
-        </InfiniteLoader>
-      </OuterElementContext.Provider>
-    </div>
-  );
-});
-
-export const NoWrapOption = (content, data, search, parentProps) => (
-  <div {...parentProps || {}}>
-    <Tooltip title={content}>
-      <div className="text-nowrap text-truncate">
-        {content}
-      </div>
-    </Tooltip>
-  </div>
-);

package/src/formFields/Switch.tsx

@@ -1,146 +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.
- */
-
-/**
- * Wrapper component for Material UI button
- * */
-
-import React, { useCallback } from 'react';
-import MuiSwitch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
-import { createStyles, withStyles } from '@mui/styles';
-import clsx from 'clsx';
-import { FieldInputProps, FormSwitchProps } from '@src/model';
-
-const getValue = value => {
-  switch (value) {
-    case 'false':
-      return false;
-    case 'true':
-      return true;
-    default:
-      return value;
-  }
-};
-
-const styles = theme => createStyles({
-    bar: {
-      height: '22px',
-      borderRadius: '12px',
-      marginTop: '2px',
-      marginLeft: '-7px',
-      width: '38px'
-    },
-    checked: {
-      '&$disabled + $bar ': {
-        opacity: 0.12
-      }
-    },
-    icon: {
-      boxShadow: theme.shadows[1],
-      backgroundColor: theme.palette.common.white
-    },
-    root: {
-      alignItems: 'center',
-      '&$disabled': {
-        opacity: 0.12
-      }
-    },
-    inline: {
-      marginLeft: '-12px'
-    },
-    default: {
-      top: theme.spacing(0.5),
-      height: theme.spacing(4),
-      width: theme.spacing(4),
-      padding: 0,
-      '&$disabled': {
-        color: theme.palette.common.white
-      },
-      '&$checked': {
-        transform: `translateX(${theme.spacing(2)})`
-      },
-      '&$checked + $bar': {
-        opacity: 1
-      },
-      '&$checked$disabled + $bar': {
-        backgroundColor: theme.palette.primary.main,
-        opacity: 0.6
-      }
-    },
-    focusVisible: {
-      background: 'red'
-    },
-    disabled: {}
-  });
-
-const SwitchBase = props => {
-  const {
-    classes, color = 'primary', inline, checked, ...custom
-  } = props;
-
-  return (
-    <MuiSwitch
-      color={color}
-      checked={Boolean(checked)}
-      classes={{
-        track: classes.bar,
-        root: clsx(classes.root, { [classes.inline]: inline }),
-        checked: classes.checked,
-        thumb: classes.icon,
-        switchBase: classes.default,
-        disabled: classes.disabled
-      }}
-      {...custom}
-    />
-  );
-};
-
-export const Switch = withStyles(styles)(SwitchBase);
-
-export function FormSwitch<InputProps extends FieldInputProps>({ input, color, disabled, stringValue, label, className, inline, onChangeHandler, onClick }:FormSwitchProps<InputProps>) {
-  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 (
-    <>
-      {label && (
-        <Typography variant="caption" color="textSecondary">
-          <label htmlFor={`input-${input.name}`}>
-            {label}
-          </label>
-        </Typography>
-      )}
-      <Switch
-        checked={getValue(input.value)}
-        onClick={onClick}
-        onChange={onChange}
-        color={color}
-        disabled={disabled}
-        className={className}
-        inline={inline}
-        id={`input-${input.name}`}
-        name={input.name}
-      />
-    </>
-  );
-}

package/src/formFields/TextField.tsx

@@ -1,60 +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.
- */
-
-  /**
- * Wrapper component for Material Text Field
- * */
-
-import * as React from 'react';
-import { withStyles } from '@mui/styles';
-import MuiTextField from '@mui/material/TextField';
-
-const styles = theme => ({
-  textField: {
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1)
-  }
-});
-
-class TextInput extends React.Component<any, any> {
-  render() {
-    const {
- classes, onChange, id, margin = 'dense', ...props
-} = this.props;
-
-    return (
-      <MuiTextField
-        name={props.id}
-        onChange={e => onChange(e.target.value, id)}
-        margin={margin}
-        {...props}
-        variant="standard"
-      />
-    );
-  }
-}
-
-export const TextField = withStyles(styles)(TextInput);
-
-// Form field text component creator
-export const FormTextField = props => {
-  const {
-    input, meta: { error, invalid, touched }, helperText, inputRef, ...custom
-  } = props;
-
-  return (
-    <TextField
-      error={touched && invalid}
-      inputRef={inputRef}
-      helperText={(touched && error) || helperText}
-      fullWidth
-      {...input}
-      {...custom}
-    />
-  );
-};