ish-ui 1.0.2 → 1.0.3

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;

package/src/formFields/EditInPlaceField.tsx

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