ish-ui 1.0.2

package/src/formFields/EditInPlaceSearchSelect.tsx

@@ -0,0 +1,562 @@
+/*
+ * 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 CircularProgress from '@mui/material/CircularProgress';
+import Popper from '@mui/material/Popper';
+import { Autocomplete, IconButton, InputAdornment, Select } from '@mui/material';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import CloseIcon from '@mui/icons-material//Close';
+import clsx from 'clsx';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import { ListboxComponent, selectStyles } from './SelectCustomComponents';
+import EditInPlaceFieldBase from './EditInPlaceFieldBase';
+import { EditInPlaceSearchSelectFieldProps, FieldInputProps, FieldMetaProps } from '@src/model';
+import { makeAppStyles } from '@src/styles';
+import { getHighlightedPartLabel, stubComponent } from '@src/utils';
+import { usePrevious } from '@src/utils/hooks';
+
+const useStyles = makeAppStyles(theme => ({
+  selectAdornment: {
+    marginBottom: '6px',
+    color: theme.palette.primary.main
+  },
+  popper: {
+    zIndex: 1400
+  },
+  ...selectStyles(theme)
+}))
+
+const SelectContext = React.createContext<any>({});
+
+const ListBoxAdapter = React.forwardRef<any, any>(({ children, ...other }, ref) => {
+  const {
+    rowHeight,
+    remoteRowCount,
+    loadMoreRows,
+    classes,
+    fieldClasses = {},
+    loading,
+    selectAdornment
+  } = useContext(SelectContext);
+
+  return (
+    <ListboxComponent
+      rowHeight={rowHeight}
+      remoteRowCount={remoteRowCount}
+      loadMoreRows={loadMoreRows}
+      classes={classes}
+      fieldClasses={fieldClasses}
+      loading={loading}
+      selectAdornment={selectAdornment}
+      ref={ref}
+      {...other}
+    >
+      {children}
+    </ListboxComponent>
+  );
+});
+
+const PopperAdapter = React.memo<any>(params => {
+  const {
+    hideMenuOnNoResults,
+    items,
+    popperAnchor,
+    inline
+  } = useContext(SelectContext);
+
+  return (hideMenuOnNoResults && !items.length
+    ? null
+    : popperAnchor
+      // @ts-ignore
+      ? <Popper
+         {...params}
+         style={{ ...params.style, width: popperAnchor.clientWidth }}
+         anchorEl={popperAnchor}
+      />
+      // @ts-ignore
+      : <Popper
+        {...params}
+        style={inline ? null : params.style}
+      />);
+});
+
+function EditInPlaceSearchSelect<InputProps extends FieldInputProps, MetaProps extends FieldMetaProps>({
+    label,
+    disabled,
+    className,
+    labelAdornment,
+    inline,
+    loading,
+    creatable,
+    allowEmpty,
+    fieldClasses = {},
+    selectAdornment,
+    selectValueMark = 'value',
+    selectLabelMark = 'label',
+    selectLabelCondition,
+    selectFilterCondition,
+    defaultValue,
+    disableUnderline,
+    items = [],
+    rowHeight,
+    remoteRowCount,
+    loadMoreRows,
+    onCreateOption,
+    itemRenderer,
+    onInputChange,
+    onClearRows,
+    onInnerValueChange,
+    hideMenuOnNoResults,
+    hideEditIcon,
+    remoteData,
+    createLabel,
+    returnType = 'string',
+    alwaysDisplayDefault,
+    valueRenderer,
+    popperAnchor,
+    input,
+    meta: { error, invalid },
+    placeholder,
+    sort,
+    sortPropKey,
+    inputRef,
+    warning,
+    multiple,
+    rightAligned,
+    hasError,
+    categoryKey
+  }: EditInPlaceSearchSelectFieldProps<InputProps, MetaProps>) {
+
+  const classes = useStyles();
+
+  const sortedItems = useMemo(() => {
+    const sorted = items && (sort
+        ? [...items].sort(typeof sort === 'function'
+          ? sort
+          : (aOption, bOption) => {
+            const aLabel = selectLabelCondition ? selectLabelCondition(aOption) : aOption[sortPropKey || selectLabelMark];
+            const bLabel = selectLabelCondition ? selectLabelCondition(bOption) : bOption[sortPropKey || selectLabelMark];
+
+            return (aLabel.toLowerCase()).localeCompare(bLabel.toLowerCase());
+          })
+        : [...items]
+    );
+    
+    if (categoryKey) {
+      sorted.sort((aOption, bOption) => (aOption[categoryKey].toLowerCase()).localeCompare(bOption[categoryKey].toLowerCase()));
+    }
+    
+    return sorted;
+    
+  }, [items, selectLabelCondition, selectLabelMark, sortPropKey, categoryKey]);
+
+  const inputNode = useRef<any>(null);
+
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [formattedDisplayValue, setFormattedDisplayValue] = useState<any>('');
+
+  const prevDefaultDisplayValue = usePrevious(defaultValue);
+
+  useEffect(() => {
+    if (formattedDisplayValue && !input.value) {
+      setFormattedDisplayValue(null);
+    }
+  }, [formattedDisplayValue, input.value, input.name]);
+
+  useEffect(() => {
+    if (selectLabelCondition && formattedDisplayValue && defaultValue !== prevDefaultDisplayValue) {
+      setFormattedDisplayValue(null);
+    }
+    if (selectLabelCondition && !defaultValue) {
+      const selected = sortedItems.find(i => getOptionSelected(i, input.value));
+      if (selected) {
+        setFormattedDisplayValue(selectLabelCondition(selected));
+      }
+    }
+  }, [selectLabelCondition, formattedDisplayValue, defaultValue, sortedItems, input.value]);
+
+  const onBlur = () => {
+    setIsEditing(false);
+
+    if (!hideMenuOnNoResults) {
+      setSearchValue('');
+    }
+
+    if (remoteData) {
+      onInputChange('');
+      onClearRows();
+    }
+  };
+
+  const formatCreateLabel = inputValue => `${createLabel} "${inputValue}"`;
+
+  const filterItems = items => {
+    let filtered = [];
+
+    if (!Array.isArray(items)) return filtered;
+
+    if (!searchValue || remoteData)  return items;
+
+    const searchRegexp = new RegExp(searchValue.replace(',', '')
+      // eslint-disable-next-line no-useless-escape
+      .replace(/[\[\]\{\}\(\)\*]/g, '\\$&')
+      .trim().toLowerCase());
+
+    if (typeof selectFilterCondition === 'function') {
+      filtered = items.filter(item => {
+        const label = selectFilterCondition(item);
+
+        if (!label) {
+          return false;
+        }
+
+        return searchRegexp.test(label.trim().toLowerCase());
+      });
+    } else if (typeof selectLabelCondition === 'function') {
+      filtered = items.filter(item => {
+        const label = selectLabelCondition(item);
+
+        if (!label) {
+          return false;
+        }
+
+        return searchRegexp.test(label.trim().toLowerCase());
+      });
+    } else {
+      filtered = items.filter( item => item[selectLabelMark]
+        && searchRegexp.test(item[selectLabelMark].toLowerCase().trim()));
+    }
+
+    if (creatable) {
+      filtered.push({
+        [selectLabelMark]: formatCreateLabel(searchValue),
+        [selectValueMark]: searchValue,
+        createdOption: true
+      });
+    }
+
+    return filtered;
+  };
+
+  const edit = () => {
+    setIsEditing(true);
+    setTimeout(() => inputNode?.current?.focus(), 50);
+  };
+
+  const onClear = () => {
+    if (remoteData) {
+      onInputChange('');
+      onClearRows();
+    }
+
+    if (typeof onInnerValueChange === 'function') {
+      onInnerValueChange(null);
+    }
+
+    if (input && input.onChange) {
+      input.onChange(null);
+    }
+
+    setSearchValue('');
+    setIsEditing(false);
+    setFormattedDisplayValue(null);
+  };
+
+  const onEditButtonFocus = () => {
+    if (disabled) {
+      return;
+    }
+    edit();
+  };
+
+  const onCreateOptionInner = value => {
+    delete value.createdOption;
+    onCreateOption(value[selectValueMark]);
+    onBlur();
+  };
+
+  const handleChange = (e, value, reason) => {
+    if (reason === 'clear') {
+      return;
+    }
+
+    if (creatable && value && value.createdOption) {
+      onCreateOptionInner(value);
+    }
+
+    if (typeof onInnerValueChange === 'function') {
+      onInnerValueChange(value);
+    }
+
+    if (selectLabelCondition && returnType !== 'object') {
+      setFormattedDisplayValue(selectLabelCondition(value));
+    }
+
+    let newValue = value[selectValueMark];
+
+    if (returnType === 'object') {
+      newValue = (Object.keys(value).length ? value : null);
+    }
+
+    if (multiple) {
+      newValue = value.map(v => v[selectValueMark]);
+      if (!newValue.length) {
+        newValue = null;
+      }
+    }
+
+    input.onChange(newValue);
+
+    setTimeout(() => {
+      onBlur();
+      input?.onBlur(newValue);
+    }, 100);
+  };
+
+  const handleInputChange = e => {
+    setSearchValue(e.target.value);
+
+    if (onInputChange) {
+      onInputChange(e.target.value);
+    }
+
+    if (remoteData && !e.target.value) {
+      onClearRows();
+    }
+  };
+
+  const getOptionLabel = option => (selectLabelCondition ? selectLabelCondition(option) : option && option[selectLabelMark]) || '';
+
+  const getOptionSelected = (option: any, value: any) => {
+    if (multiple || returnType === 'object') {
+      return option[selectValueMark] === value[selectValueMark];
+    }
+    return option[selectValueMark] === value;
+  };
+
+  const renderOption = (optionProps, data) => {
+    if (typeof itemRenderer === 'function') {
+      return itemRenderer(getHighlightedPartLabel(getOptionLabel(data), searchValue), data, searchValue, optionProps) as any;
+    }
+    return getHighlightedPartLabel(getOptionLabel(data), searchValue, optionProps);
+  };
+
+  const selectedOption = useMemo(() => sortedItems.find(i => multiple
+      ? (input.value as any[] || []).includes(i[selectValueMark])
+      : getOptionSelected(i, input.value)),
+    [sortedItems, multiple, selectValueMark, input.value]);
+
+  const displayedValue = useMemo(() => {
+    let response;
+
+    if (selectLabelCondition) {
+      response = returnType === 'object' ? selectLabelCondition(input.value) : formattedDisplayValue || defaultValue;
+    } else if (returnType === 'object') {
+      response = input.value && input.value[selectLabelMark];
+    } else {
+      response = getOptionLabel(selectedOption) || defaultValue || input.value;
+    }
+
+    if (alwaysDisplayDefault) {
+      response = defaultValue;
+    }
+
+    return (
+      ![null, undefined].includes(input.value)
+      ? response
+      : null
+    );
+  }, [
+    formattedDisplayValue,
+    selectedOption,
+    selectLabelCondition,
+    alwaysDisplayDefault,
+    returnType,
+    defaultValue,
+    selectLabelMark,
+    input.value,
+    classes
+  ]);
+
+  const renderValue = useMemo(() => {
+    const valueForRender = returnType === 'object'
+      ? input.value
+      : selectedOption;
+    
+    return valueRenderer
+      ? valueRenderer(
+        displayedValue,
+        valueForRender,
+        searchValue,
+        { value: valueForRender && valueForRender[selectValueMark] }
+      )
+      : null;  
+  },
+  [selectedOption, searchValue, displayedValue, selectValueMark, returnType, valueRenderer, input.value]);
+
+  const renderIcons = useMemo(() => !disabled && (
+    loading
+      ? <CircularProgress size={24} thickness={4} className={fieldClasses.loading} />
+      : (
+        <div className={classes.inputEndAdornment}>
+          {allowEmpty && input.value && (
+            <IconButton
+              size="small"
+              onClick={onClear}
+              color="inherit"
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          )}
+          <IconButton
+            size="small"
+            color="inherit"
+            className={clsx(classes.expandIcon, 'pl-0 pr-0')}
+            disableRipple
+          >
+            <ExpandMore className={inline && 'fsInherit'} />
+          </IconButton>
+        </div>
+      )
+  ), [disabled, loading, inline, allowEmpty, input.value]);
+
+
+  const inputValue = useMemo(() => {
+    if (multiple) {
+      return (input.value as any[] || []).map(v => sortedItems.find(s => s[selectValueMark] === v));
+    }
+    return input.value || null;
+  }, [input.value, multiple, selectValueMark, sortedItems]);
+
+  const renderedPlaceholder = useMemo(() => {
+    const rendered = placeholder || (!isEditing ? 'No value' : '');
+    return multiple && (inputValue as any[]).length ? null : rendered;
+  }, [multiple, placeholder, isEditing, inputValue]);
+
+  return (
+    <div
+      className={clsx(className, 'outline-none', inline && classes.inline)}
+      id={input?.name}
+    >
+      <SelectContext.Provider value={{
+        rowHeight,
+        remoteRowCount,
+        loadMoreRows,
+        classes,
+        fieldClasses,
+        hideMenuOnNoResults,
+        inline,
+        items,
+        popperAnchor,
+        loading,
+        selectAdornment
+      }}
+      >
+        <Autocomplete
+          blurOnSelect={!multiple}
+          disableCloseOnSelect={multiple}
+          multiple={multiple}
+          value={inputValue}
+          options={sortedItems}
+          loading={loading}
+          freeSolo={creatable}
+          disabled={disabled}
+          disableClearable={!allowEmpty}
+          isOptionEqualToValue={getOptionSelected}
+          onChange={handleChange}
+          classes={{
+            root: clsx('d-inline-flex', classes.root),
+            hasPopupIcon: classes.hasPopup,
+            hasClearIcon: classes.hasClear,
+            inputRoot: clsx(classes.inputWrapper, multiple && classes.multiple),
+            option: 'w-100 text-pre',
+            popper: classes.popper,
+            groupUl: 'm-0'
+          }}
+          groupBy={categoryKey && (option => option[categoryKey])}
+          renderOption={renderOption}
+          getOptionLabel={getOptionLabel}
+          filterOptions={filterItems}
+          ListboxComponent={inline || categoryKey ? null : ListBoxAdapter as any}
+          PopperComponent={categoryKey ? null : PopperAdapter as any}
+          renderInput={({
+           InputLabelProps, InputProps, inputProps, ...params
+          }) => (
+            <EditInPlaceFieldBase
+              {...params}
+              name={input.name}
+              value={displayedValue}
+              error={error}
+              invalid={hasError || invalid}
+              inline={inline}
+              label={label}
+              warning={warning}
+              fieldClasses={fieldClasses}
+              endAdornmentClass={classes.selectAdornment}
+              rightAligned={rightAligned}
+              shrink={Boolean(label || input.value)}
+              labelAdornment={labelAdornment}
+              placeholder={renderedPlaceholder}
+              editIcon={!hideEditIcon && renderIcons}
+              InputProps={{
+                ...InputProps,
+                onChange: handleInputChange,
+                onFocus: edit,
+                onClick: onEditButtonFocus,
+                onBlur,
+                disableUnderline,
+                classes: {
+                  underline: fieldClasses.underline,
+                  input: clsx(disabled && classes.readonly, fieldClasses.text),
+                },
+                inputProps: {
+                  ...inputProps,
+                  className: clsx(fieldClasses.text, 'mr-auto'),
+                  ref: ref => {
+                    (inputProps as any).ref.current = ref;
+                    inputNode.current = ref;
+                    if (inputRef) inputRef.current = ref;
+                  },
+                  value: (isEditing ? searchValue : multiple ? '' : (typeof displayedValue === 'string' ? displayedValue : '')),
+                }
+              }}
+              CustomInput={(valueRenderer && !multiple && !isEditing && input.value)
+                ?
+                <Select
+                  {...InputProps}
+                  inputRef={ref => {
+                    (inputProps as any).ref.current = ref?.node;
+                  }}
+                  classes={{ select: 'cursor-text' }}
+                  onFocus={edit}
+                  value={(returnType === 'object' ? input.value[selectValueMark] : input.value) || ''}
+                  endAdornment={
+                    <InputAdornment
+                      position="end"
+                      className={clsx( classes.selectAdornment, 'd-none')}>
+                      {renderIcons}
+                    </InputAdornment>
+                  }
+                  IconComponent={stubComponent}
+                >
+                  {renderValue}
+                </Select>
+                : null}
+            />)
+          }
+          disableListWrap
+          openOnFocus
+          fullWidth
+        />
+      </SelectContext.Provider>
+    </div>
+  );
+}
+
+export default EditInPlaceSearchSelect;

package/src/formFields/FieldAdornments.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 IconButton from '@mui/material/IconButton';
+import Launch from '@mui/icons-material/Launch';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import { IconButtonTypeMap } from '@mui/material';
+
+interface Props {
+  link?: string | number;
+  linkHandler?: (arg: string | number) => void;
+  linkColor?: IconButtonTypeMap['props']['color'];
+  clickHandler?: any;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const LinkAdornment = ({
+ link,
+ linkColor = 'primary',
+ linkHandler,
+ clickHandler,
+ className,
+ disabled
+}: Props) => {
+  const onClick = () => (clickHandler ? clickHandler() : linkHandler(link));
+
+  return (
+    <span className={className}>
+      <IconButton
+        disabled={disabled || (!link && link !== 0)}
+        onClick={onClick}
+        color={linkColor}
+        classes={{
+          root: 'inputAdornmentButton'
+        }}
+      >
+        <Launch className="inputAdornmentIcon" color="inherit" />
+      </IconButton>
+    </span>
+  );
+};
+
+export const SettingsAdornment = ({
+ link, linkHandler, clickHandler, className, disabled
+}: Props) => {
+  const onClick = e => (clickHandler ? clickHandler(e) : linkHandler(link));
+
+  return (
+    <span className={className}>
+      <IconButton
+        disabled={disabled}
+        onClick={onClick}
+        classes={{
+          root: 'inputAdornmentButton ml-0-5'
+        }}
+        color="inherit"
+        size="small"
+      >
+        <SettingsOutlinedIcon color="inherit" />
+      </IconButton>
+    </span>
+  );
+};