ish-ui 1.0.2 → 1.0.4

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

package/src/formFields/EditInPlaceDateTimeField.tsx

@@ -1,285 +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 DateTimeField with edit in place functional
- * */
-
-import React, {
-  useEffect, useMemo, useRef, useState
-} from 'react';
-import clsx from 'clsx';
-import DateRange from '@mui/icons-material/DateRange';
-import QueryBuilder from '@mui/icons-material/QueryBuilder';
-import { format, isValid } from 'date-fns';
-import IconButton from '@mui/material/IconButton';
-import { DateTimeField } from './DateTimeField';
-import { makeAppStyles } from '@src/styles';
-import EditInPlaceFieldBase from './EditInPlaceFieldBase';
-import { EditInPlaceDateTimeFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
-import {
-  appendTimezone,
-  formatStringDate, HH_MM_COLONED, III_DD_MMM_YYYY,
-  III_DD_MMM_YYYY_HH_MM,
-  prependTimezone,
-  YYYY_MM_DD_MINUSED
-} from '@src/utils';
-import { endFieldProcessingAction, startFieldProcessingAction } from '@src/actions/FieldProcessing';
-
-const useStyles = makeAppStyles(theme => ({
-  inlinePickerButton: {
-    padding: '2px',
-    marginBottom: '-4px',
-    fontSize: '1.3em',
-    '&:hover': {
-      color: theme.palette.primary.main,
-    }
-  },
-  pickerButton: {
-    width: theme.spacing(4),
-    height: theme.spacing(4),
-    bottom: theme.spacing(-0.5)
-  },
-  inlineContainer: {
-    display: 'inline-block',
-  }
-}));
-
-interface InputTypes {
-  type?: 'date' | 'time' | 'datetime'
-}
-
-function EditInPlaceDateTimeField<IP extends FieldInputProps, MP extends FieldMetaProps>(
-  {
-   type,
-   formatDate,
-   formatTime,
-   formatDateTime,
-   timezone,
-   input,
-   fieldClasses = {},
-   inline,
-   meta: { error, invalid, active, dispatch },
-   labelAdornment,
-   label,
-   disabled,
-   formatValue,
-   className,
-   onKeyPress,
-   placeholder = 'No value',
-   persistValue,
-   warning,
-   defaultValue,
-   rightAligned,
-   processActionId
-  }: EditInPlaceDateTimeFieldProps<IP, MP>  & InputTypes
-) {
-  const [textValue, setTextValue] = useState(defaultValue || '');
-  const [pickerOpened, setPickerOpened] = useState(false);
-
-  const inputNode = useRef<any>(null);
-
-  const classes = useStyles();
-
-  const formatDateInner = dateObj => {
-    if (!dateObj) {
-      return '';
-    }
-
-    if (dateObj.toString() === 'Invalid Date') return '';
-
-    switch (type) {
-      case 'date':
-        return format(dateObj, formatDate || III_DD_MMM_YYYY);
-      case 'time':
-        return format(dateObj, formatTime || HH_MM_COLONED);
-      case 'datetime':
-        return format(dateObj, formatDateTime || III_DD_MMM_YYYY_HH_MM);
-      default:
-        return dateObj.toString();
-    }
-  };
-
-  const dateValue = useMemo(() => {
-    let base = input.value ? new Date(input.value) : null;
-    
-    if (base && timezone) {
-      base = appendTimezone(base, timezone);
-    }
-    
-    return base;
-  }, [input.value, timezone]);
-
-  useEffect(() => {
-    setTextValue(formatDateInner(dateValue));
-  }, [dateValue]);
-
-  useEffect(() => {
-    if (!active && processActionId) {
-      dispatch(endFieldProcessingAction(input.name));
-    }
-  }, [input.value, input.name, active, processActionId]);
-
-  const onInputChange = e => {
-    if (e) setTextValue(e.target.value);
-  };
-
-  const openPicker = e => {
-    e.stopPropagation();
-    setPickerOpened(true);
-  };
-
-  const onChange = (v: Date) => {
-    if (v) {
-      let formatted;
-      if (formatValue) {
-        formatted = format(v, formatValue);
-      } else if (type === 'date') {
-        if (isValid(v)) {
-          formatted = format(v, YYYY_MM_DD_MINUSED);
-        } else {
-          formatted = null;
-        }
-      } else {
-        try {
-          formatted = v.toISOString();
-        } catch {
-          formatted = null;
-        }
-      }
-
-      if (timezone && formatted) {
-        formatted = prependTimezone(formatted, timezone)?.toISOString();
-      }
-
-      input.onChange(formatted);
-      input.onBlur(formatted);
-      return;
-    }
-    setTextValue('');
-    input.onChange(null);
-    input.onBlur(null);
-  };
-
-  const onBlur = () => {
-    dispatch(startFieldProcessingAction(input.name));
-
-    if (persistValue && !textValue) {
-      input.onChange(input.value);
-      input.onBlur(input.value);
-      setTextValue(formatDateInner(dateValue));
-      return;
-    }
-
-    const parsed = textValue
-      ? formatStringDate(textValue, type, dateValue || new Date(), formatDate || formatDateTime || formatTime)
-      : null;
-
-    if (parsed) {
-      let formatted;
-      if (formatValue) {
-        formatted = format(parsed, formatValue);
-      } else if (type === 'date' && isValid(parsed)) {
-        formatted = format(parsed, YYYY_MM_DD_MINUSED);
-      } else {
-        try {
-          formatted = parsed.toISOString();
-        } catch {
-          formatted = null;
-        }
-      }
-      setTextValue(formatDateInner(parsed));
-
-      if (timezone && formatted) {
-        formatted = prependTimezone(formatted, timezone).toISOString();
-      }
-
-      input.onChange(formatted);
-      input.onBlur(formatted);
-    } else {
-      setTextValue(null);
-      input.onChange(null);
-      input.onBlur(null);
-    }
-  };
-
-  const onClose = () => {
-    setPickerOpened(false);
-  };
-
-  const onEnterPress = e => {
-    if (e.keyCode === 13 && inputNode.current) {
-      inputNode.current.blur();
-    }
-  };
-
-  return (
-    <div
-      className={clsx(className, 'outline-none', {
-        [classes.inlineContainer]: inline,
-        'pointer-events-none': disabled
-      })}
-    >
-      <div
-        id={input.name}
-        className="w-100"
-      >
-        <DateTimeField
-          type={type}
-          toolbarTitle={label}
-          open={pickerOpened}
-          value={dateValue}
-          onChange={onChange}
-          onClose={onClose}
-          renderInput={() => (
-            <EditInPlaceFieldBase
-              name={input.name}
-              value={textValue}
-              error={error}
-              invalid={invalid}
-              inline={inline}
-              label={label}
-              warning={warning}
-              fieldClasses={fieldClasses}
-              rightAligned={rightAligned}
-              shrink={Boolean(label || input.value)}
-              disabled={disabled}
-              labelAdornment={labelAdornment}
-              placeholder={placeholder}
-              editIcon={
-                <IconButton
-                  tabIndex={-1}
-                  onClick={openPicker}
-                  classes={{
-                    root: clsx(fieldClasses.text, inline ? classes.inlinePickerButton : classes.pickerButton)
-                  }}
-                >
-                {type === 'time'
-                  ? <QueryBuilder fontSize="inherit" color="inherit" />
-                  : <DateRange color="inherit" fontSize="inherit" />}
-                  </IconButton>}
-                InputProps={{
-                  type: 'text',
-                  onFocus: input.onFocus,
-                  inputRef: inputNode,
-                  value: textValue,
-                  onKeyPress,
-                  disabled,
-                  onBlur,
-                  onKeyDown: onEnterPress,
-                  onChange: onInputChange
-                }}
-              />
-            )}
-          />
-      </div>
-    </div>
-  );
-}
-
-export default EditInPlaceDateTimeField;

package/src/formFields/EditInPlaceDurationField.tsx

@@ -1,79 +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, useEffect, useState } from 'react';
-import EditInPlaceField from './EditInPlaceField';
-import { EditInPlaceFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
-import { formatDurationMinutes } from '@src/utils/dates/formatString';
-
-const parseDurationString = (duration: string): number => {
-  if (duration.indexOf('.') > -1) {
-    return Math.round(parseFloat(duration) * 60);
-  }
-
-  let min = 0;
-  const hoursMatch = duration.match(/(\d+)h/);
-  const minutesMatch = duration.match(/(\d+)m/);
-  const plainHours = parseFloat(duration);
-
-  if (hoursMatch) {
-    min += Number(hoursMatch[1]) * 60;
-  }
-
-  if (minutesMatch) {
-    min += Number(minutesMatch[1]);
-  }
-
-  if (!hoursMatch && !minutesMatch && !isNaN(plainHours)) {
-    min += Math.round(plainHours) * 60;
-  }
-
-  return min;
-};
-
-function EditInPlaceDurationField<FP extends FieldInputProps, MP extends FieldMetaProps>(
-{
- input, ...restProps
-}: EditInPlaceFieldProps<FP, MP>) {
-  const [textValue, setTextValue] = useState(formatDurationMinutes(input.value || 0));
-
-  const onChange = useCallback(
-    e => {
-      setTextValue(e.target.value);
-    },
-    [input.onChange]
-  );
-
-  const onBlur = useCallback(
-    value => {
-      const parsed = parseDurationString(value);
-      input.onBlur(parsed);
-      setTextValue(formatDurationMinutes(parsed || 0));
-    },
-    [input.onBlur]
-  );
-
-  useEffect(() => {
-    setTextValue(formatDurationMinutes(input.value || 0));
-  }, [input.value]);
-
-  return (
-    <EditInPlaceField
-      {...restProps}
-      input={{
-        value: textValue,
-        onBlur,
-        onChange,
-        onFocus: input.onFocus,
-        name: input.name
-      }}
-    />
-  );
-}
-
-export default EditInPlaceDurationField;