ish-ui 1.0.2

package/src/formFields/EditInPlaceFieldBase.tsx

@@ -0,0 +1,241 @@
+/*
+ * 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, { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import {
+  FilledInput,
+  FormControl,
+  FormHelperText,
+  Input,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput
+} from '@mui/material';
+import { InputProps } from '@mui/material/Input/Input';
+import { makeAppStyles } from '@src/styles';
+import WarningMessage from '../fieldMessage/WarningMessage';
+import { FieldClasses } from '@src/model';
+import { FormControlTypeMap } from '@mui/material/FormControl/FormControl';
+import { countWidth } from '@src/utils';
+
+interface Props {
+  name: string;
+  value: string;
+  className?: string;
+  endAdornmentClass?: string;
+  label?: React.ReactNode;
+  labelAdornment?: React.ReactNode;
+  editIcon?: React.ReactNode;
+  CustomInput?: React.ReactNode;
+  InputProps?: Partial<InputProps>,
+  fieldClasses?: FieldClasses,
+  placeholder?: string;
+  warning?: string;
+  error?: string;
+  rightAligned?: boolean;
+  inline?: boolean;
+  invalid?: boolean;
+  shrink?: boolean;
+  disabled?: boolean;
+  hideArrows?: boolean;
+  variant?: FormControlTypeMap['props']['variant'];
+}
+
+const useStyles = makeAppStyles(theme => ({
+  label: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+    marginRight: theme.spacing(0.5)
+  },
+  rightLabel: {
+    left: 'unset',
+    right: theme.spacing(-2),
+    '& $label': {
+      marginRight: 0
+    }
+  },
+  inputWrapper: {
+    paddingBottom: 0,
+    '&:hover .d-none': {
+      display: 'flex',
+    },
+    '&:hover .invisible': {
+      visibility: 'visible',
+    },
+    '& .Mui-focused $inputEndAdornment': {
+      opacity: 1,
+    }
+  },
+  hideArrows: {
+    '&::-webkit-outer-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    },
+    '&::-webkit-inner-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    },
+    '-moz-appearance': 'textfield'
+  },
+  inlineInput: {
+    padding: 0,
+    fontSize: 'inherit',
+  },
+  readonly: {
+    fontWeight: 300,
+    pointerEvents: 'none'
+  },
+  inputEndAdornment: {
+    display: 'flex',
+    fontSize: '24px',
+    color: theme.palette.primary.main,
+    alignItems: 'flex-end',
+    alignSelf: 'flex-end',
+    marginBottom: '5px'
+  }
+}));
+
+const EditInPlaceFieldBase = (
+  {
+    value,
+    invalid,
+    className,
+    inline,
+    label,
+    fieldClasses = {},
+    rightAligned,
+    shrink,
+    name,
+    disabled,
+    labelAdornment,
+    editIcon,
+    error,
+    placeholder,
+    hideArrows,
+    warning,
+    endAdornmentClass,
+    CustomInput,
+    InputProps,
+    variant = 'standard'
+  }: Props) => {
+  
+  const [inputWidth, setInputWidth] = useState<number>();
+  
+  const classes = useStyles();
+  
+  const inputNode = useRef<any>();
+
+  const onAdornmentClick = () => {
+    inputNode.current.focus();
+  };
+
+  useEffect(() => {
+    if (inline && inputNode.current) {
+      setInputWidth(countWidth(value || placeholder, inputNode.current) + 1);
+    }
+  }, [value]);
+  
+  const InputComp = useMemo(() => {
+    switch (variant) {
+      default:
+      case 'standard':
+        return Input;
+      case 'filled':
+        return FilledInput;
+      case 'outlined':
+        return OutlinedInput;
+    }
+  }, [variant]);
+
+  return (
+    <FormControl
+      fullWidth
+      error={invalid}
+      variant={variant}
+      margin="none"
+      className={clsx(className, classes.inputWrapper)}
+    >
+    {
+      label && (
+        <InputLabel
+          classes={{
+            root: clsx(
+              fieldClasses.label,
+              'd-flex',
+              'overflow-visible',
+              rightAligned && classes.rightLabel
+            ),
+          }}
+          shrink={shrink}
+          htmlFor={`input-${name}`}
+        >
+          <span className={classes.label}>
+            {label}
+          </span>
+          {labelAdornment}
+        </InputLabel>
+      )
+    }
+      {CustomInput ||
+        <InputComp
+          {...InputProps || {}}
+          label={label}
+          inputRef={inputNode}
+          inputProps={{
+            placeholder,
+            disabled,
+            className: clsx(fieldClasses.text, {
+              [classes.inlineInput]: inline,
+              [classes.readonly]: disabled,
+              [classes.hideArrows]: hideArrows,
+              'text-end': rightAligned
+            }),
+            style: {
+              width: inline && !invalid ? inputWidth : undefined
+            },
+            ...InputProps?.inputProps || {}
+          }}
+          classes={{
+            root: clsx(fieldClasses.text, inline && classes.inlineInput),
+            underline: fieldClasses.underline
+          }}
+          disabled={disabled}
+          endAdornment={!disabled &&
+            <InputAdornment
+              position="end"
+              onClick={onAdornmentClick}
+              className={clsx(classes.inputEndAdornment, endAdornmentClass, {
+                ['fsInherit']: inline,
+                ['d-none']: (rightAligned || inline),
+                ['invisible']: !(rightAligned || inline)
+              })}
+            >
+              {editIcon}
+            </InputAdornment>
+          }
+          id={`input-${name}`}
+          name={name}
+        />
+      }
+    <FormHelperText
+      classes={{
+        root: clsx(rightAligned && 'text-end'),
+        error: 'shakingError'
+      }}
+    >
+      {error}
+      {warning && <WarningMessage warning={warning} />}
+    </FormHelperText>
+  </FormControl>
+  );
+};
+
+export default EditInPlaceFieldBase;

package/src/formFields/EditInPlaceFileField.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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, { useRef } from 'react';
+import AttachmentIcon from '@mui/icons-material/Attachment';
+import InputAdornment from '@mui/material/InputAdornment';
+import EditInPlaceField from './EditInPlaceField';
+import { EditInPlaceFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
+import { stubFunction } from '@src/utils';
+
+function EditInPlaceFileField<InputProps extends FieldInputProps, MetaProps extends FieldMetaProps>(
+  {
+    input,
+    ...restProps
+  }: EditInPlaceFieldProps<InputProps, MetaProps>) {
+
+  const inputRef = useRef<HTMLInputElement>();
+  const fileRef = useRef<HTMLInputElement>();
+
+  const handleFileSelect = e => {
+    if (e.target.files[0]) {
+      input.onChange(e.target.files[0]);
+      fileRef.current.value = null;
+      inputRef.current.blur();
+    }
+  };
+  
+  const onFocus = () => {
+    fileRef.current.click();
+    setTimeout(() => {
+      inputRef.current.blur();
+    }, 200);
+  };
+
+  return (
+    <>
+      <input type="file" ref={fileRef} onChange={handleFileSelect} className="d-none" />
+      <EditInPlaceField
+        {...restProps}
+        input={{
+          onChange: stubFunction,
+          onFocus: stubFunction,
+          onBlur: stubFunction
+        }}
+        InputProps={{
+          startAdornment: <InputAdornment position="start"><AttachmentIcon /></InputAdornment>,
+          onFocus,
+          inputProps: {
+            ref: inputRef
+          },
+          value: input.value ? input.value.name : '',
+        }}
+      />
+    </>
+  );
+}
+
+export default EditInPlaceFileField;

package/src/formFields/EditInPlaceMoneyField.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 } from 'react';
+import { NumericFormat } from 'react-number-format';
+import InputAdornment from '@mui/material/InputAdornment';
+import clsx from 'clsx';
+import EditInPlaceField from './EditInPlaceField';
+import { EditInPlaceFieldProps } from '@src/model';
+import { formatCurrency, normalizeNumber } from '@src/utils';
+import { Dispatch } from 'redux';
+
+interface NumberFormatCustomProps {
+  onChange?: (event: { target: { value: string } }) => void;
+  decimalScale: number;
+  allowNegative: boolean;
+}
+
+const NumberFormatCustom = React.forwardRef<any, NumberFormatCustomProps>((props, ref) => {
+  const { onChange, allowNegative = true, ...other } = props;
+
+  const onValueChange = useCallback(values => {
+    onChange(normalizeNumber(values.value));
+  }, []);
+
+  return (
+    <NumericFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={onValueChange}
+      allowNegative={allowNegative}
+      decimalScale={2}
+      thousandSeparator
+    />
+);
+});
+
+interface Props<InputProps, MetaProps> extends EditInPlaceFieldProps<InputProps, MetaProps> {
+  currencySymbol: string;
+  dispatch?: Dispatch;
+}
+
+const preformatDisplayValue = value => value || value === 0 ? formatCurrency(value, '') : value;
+
+function EditInPlaceMoneyField<IP, MP>({ InputProps, currencySymbol, dispatch, className, ...restProps }: Props<IP, MP>) {
+  return (
+    <EditInPlaceField
+      {...restProps}
+      preformatDisplayValue={preformatDisplayValue}
+      InputProps={{
+        ...InputProps,
+        startAdornment: <InputAdornment position="start">{currencySymbol}</InputAdornment>,
+        inputComponent: NumberFormatCustom as any,
+      }}
+      className={clsx('money', className)}
+    />
+  );
+}
+export default EditInPlaceMoneyField;

package/src/formFields/EditInPlacePhoneField.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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, useRef, useState
+} from 'react';
+import { PatternFormat } from 'react-number-format';
+import InputAdornment from '@mui/material/InputAdornment';
+import PhoneIcon from '@mui/icons-material/Phone';
+import debounce from 'lodash.debounce';
+import EditInPlaceField from './EditInPlaceField';
+import { AnyArgFunction, EditInPlaceFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
+import { getPhoneMask } from '@src/utils';
+
+interface NumberFormatCustomProps {
+  onChange?: (event: any) => void;
+  value?: string;
+  input?: Partial<Omit<FieldInputProps, 'onBlur'>> & { onBlur?: AnyArgFunction };
+  meta?: Partial<FieldMetaProps>;
+}
+
+const NumberFormatCustom = React.forwardRef<any, NumberFormatCustomProps>((props, ref) => {
+  const { onChange, ...other } = props;
+
+  const inputRef = useRef<any>();
+
+  const [format, setFormat] = useState(null);
+  const [prefix, setPrefix] = useState(undefined);
+
+  const processFormat = useCallback(debounce(data => {
+    setFormat(getPhoneMask(data.value));
+    if (!data.value) {
+      setPrefix(undefined);
+    }
+    if (data.formattedValue.startsWith('+') && prefix !== '+') {
+      setPrefix('+');
+    }
+  }, 500), []);
+
+  const onValueChange = useCallback(data => {
+    onChange(data.formattedValue?.replace(/[^0-9+]/g, '') || null);
+    processFormat(data);
+  }, []);
+
+  useEffect(() => {
+    if (other.value) {
+      setFormat(getPhoneMask(other.value));
+    }
+  }, []);
+
+  const onKeyPress = e => {
+    if (e.key === '+') {
+      inputRef.current._valueTracker.setValue('+');
+      if (prefix !== '+') {
+        setPrefix('+');
+      }
+    }
+  };
+  
+  const getInputRef = input => {
+    ref = input;
+    inputRef.current = input;
+  };
+
+  return (
+    <PatternFormat
+      {...other}
+      getInputRef={getInputRef}
+      onKeyPress={onKeyPress}
+      prefix={prefix}
+      onValueChange={onValueChange}
+      format={format}
+      type="text"
+    />
+  );
+});
+
+function EditInPlacePhoneField<FP extends FieldInputProps, MP extends FieldMetaProps>({ InputProps, className, ...restProps }: EditInPlaceFieldProps<FP, MP>) {
+  return (
+    <EditInPlaceField
+      {...restProps}
+      InputProps={{
+        ...InputProps,
+        startAdornment: <InputAdornment position="start"><PhoneIcon /></InputAdornment>,
+        inputComponent: NumberFormatCustom
+      }}
+      className={className}
+    />
+  );
+}
+
+export default EditInPlacePhoneField;