ish-ui 1.0.2

package/src/formFields/FilePreview.tsx

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

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

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

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

@@ -0,0 +1,60 @@
+  /*
+ * 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}
+    />
+  );
+};