ish-ui 1.0.2 → 1.0.4

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;

package/src/formFields/EditInPlaceFieldBase.tsx

@@ -1,241 +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, { 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

@@ -1,67 +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, { 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

@@ -1,64 +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 } 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

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