ish-ui 1.0.2

package/src/formFields/ColoredCheckBox.tsx

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

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

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

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

package/src/formFields/EditInPlaceField.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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 Select and Text Field with edit in plaxce functional
+ * */
+
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { Edit } from '@mui/icons-material';
+import EditInPlaceFieldBase from './EditInPlaceFieldBase';
+import { makeAppStyles } from '@src/styles';
+import { EditInPlaceFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
+
+const useStyles = makeAppStyles(theme => ({
+  rightAligned: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  inlineContainer: {
+    display: 'inline-block',
+  },
+  editIcon: {
+    fontSize: '24px',
+    color: theme.palette.divider,
+    verticalAlign: 'middle',
+  },
+  endAdornment: {
+    opacity: 0.5
+  }
+}));
+
+interface InputTypes {
+  type?: 'password' | 'number' | 'text'
+}
+
+function EditInPlaceField<IP extends FieldInputProps, MP extends FieldMetaProps>(
+  {
+    inputRef,
+    input,
+    label,
+    maxLength,
+    disabled,
+    min,
+    max,
+    step,
+    className,
+    onKeyPress,
+    labelAdornment,
+    truncateLines,
+    rightAligned,
+    defaultValue,
+    onKeyDown,
+    multiline,
+    inline,
+    warning,
+    preformatDisplayValue,
+    type = 'text',
+    meta: { error, invalid },
+    placeholder = 'No value',
+    fieldClasses = {},
+    InputProps = {}
+  }: EditInPlaceFieldProps<IP, MP> & InputTypes) {
+
+  const classes = useStyles();
+  
+  const onBlur = () => {
+    input?.onBlur && input.onBlur(input.value);
+  };
+
+  const inputValue = useMemo(() => preformatDisplayValue
+    ? preformatDisplayValue(input.value === 0 ? input.value : input.value || defaultValue)
+    : (input.value === 0 ? String(input.value) : input.value) || defaultValue || '',
+  [preformatDisplayValue, input.value, defaultValue]);
+
+  return (
+    <div
+      id={input.name}
+      className={clsx(className, 'outline-none', {
+        [classes.rightAligned]: rightAligned,
+        [classes.inlineContainer]: inline
+      })}
+    >
+      <EditInPlaceFieldBase
+        name={input.name}
+        value={inputValue}
+        error={error}
+        invalid={invalid}
+        inline={inline}
+        label={label}
+        warning={warning}
+        fieldClasses={fieldClasses}
+        endAdornmentClass={classes.endAdornment}
+        rightAligned={rightAligned}
+        shrink={Boolean(label || input.value)}
+        disabled={disabled}
+        labelAdornment={labelAdornment}
+        placeholder={placeholder}
+        hideArrows={['percentage', 'number'].includes(type)}
+        editIcon={<Edit fontSize="inherit" />}
+        InputProps={{
+          multiline,
+          onKeyPress,
+          onBlur,
+          onFocus: input.onFocus,
+          maxRows: truncateLines,
+          inputProps: {
+            ref: inputRef,
+            maxLength,
+            step,
+            min,
+            max,
+            onKeyDown,
+            type,
+          },
+          value: inputValue,
+          onChange: v => (type === 'number' && max && Number(v) > Number(max) ? null : input.onChange(v)),
+          ...InputProps
+        }}
+      />
+    </div>
+  );
+}
+
+export default EditInPlaceField;