@map-colonies/react-components 3.15.1 → 4.0.1

package/src/lib/autocomplete/autocomplete.tsx

@@ -1,681 +0,0 @@
-/* eslint-disable */
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  ChangeEvent,
-  KeyboardEvent,
-} from 'react';
-import getCaretCoordinates from 'textarea-caret';
-import getInputSelection, { setCaretPosition } from 'get-input-selection';
-
-import './autocomplete.css';
-
-const KEY_UP = 38;
-const KEY_DOWN = 40;
-const KEY_RETURN = 13;
-const KEY_ENTER = 14;
-const KEY_ESCAPE = 27;
-const KEY_TAB = 9;
-
-const OPTION_LIST_Y_OFFSET = 10;
-const OPTION_LIST_MIN_WIDTH = 100;
-
-export interface IAutocompleteProps {
-  Component: React.ReactElement;
-  ComponentProps: Record<string, unknown>;
-  defaultValue: string | undefined;
-  disabled: boolean;
-  maxOptions: number;
-  onBlur: (evt: any) => void;
-  onChange: (val: string) => void;
-  onKeyDown: (evt: any) => void;
-  onRequestOptions: (val: string) => void;
-  onSelect: (val: string) => void;
-  changeOnSelect: (trigger: string, slug: string) => string;
-  options: string[];
-  regex: string;
-  matchAny: boolean;
-  minChars: number;
-  requestOnlyIfNoOptions: boolean;
-  spaceRemovers: string[];
-  spacer: string;
-  trigger: string | string[];
-  value: string | undefined;
-  offsetX: number;
-  offsetY: number;
-  passThroughEnter: boolean;
-  mode: 'autocomplete' | 'assist';
-  direction: 'ltr' | 'rtl';
-}
-
-const Autocomplete: React.FC<IAutocompleteProps> = (props) => {
-  const [recentValue, setRecentValue] = useState(props.defaultValue ?? '');
-  const [enableSpaceRemovers, setEnableSpaceRemovers] = useState(false);
-
-  const [state, setState] = useState({
-    helperVisible: false,
-    left: 0,
-    right: 0,
-    trigger: '',
-    matchLength: 0,
-    matchStart: 0,
-    options: [],
-    selection: 0,
-    top: 0,
-    value: '',
-    caret: 0,
-    width: 'unset',
-  });
-  const refInput = useRef(null);
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    return (): void => {
-      try {
-        window.removeEventListener('resize', handleResize);
-      } catch (e) {
-        console.log('WINDOW "resize" remove listener failed', e);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (typeof props.value !== 'undefined') {
-      setRecentValue(props.value);
-    }
-
-    if (typeof props.defaultValue !== 'undefined') {
-      setRecentValue(props.defaultValue);
-    }
-  }, [props.value, props.defaultValue]);
-
-  useEffect(() => {
-    const { options } = props;
-    const { caret } = state;
-
-    // if (options.length !== prevProps.options.length) {
-    updateHelper(recentValue, caret, options);
-    // }
-  }, [props]);
-
-  const getMatch = (
-    str: string,
-    caret: number,
-    providedOptions: string[]
-  ): Record<string, unknown> => {
-    const { trigger, matchAny, regex } = props;
-    const re = new RegExp(regex);
-
-    let triggers = trigger;
-    if (!Array.isArray(triggers)) {
-      triggers = new Array(trigger) as string[];
-    }
-    triggers.sort();
-
-    const providedOptionsObject: Record<string, unknown> = {};
-    if (Array.isArray(providedOptions)) {
-      triggers.forEach((triggerStr) => {
-        providedOptionsObject[triggerStr] = providedOptions;
-      });
-    }
-
-    const triggersMatch = arrayTriggerMatch(triggers, re);
-    let slugData: Record<string, unknown> = {};
-
-    for (
-      let triggersIndex = 0;
-      triggersIndex < triggersMatch.length;
-      triggersIndex++
-    ) {
-      const { triggerStr, triggerMatch, triggerLength } = triggersMatch[
-        triggersIndex
-      ];
-
-      for (let i = caret - 1; i >= 0; --i) {
-        const substr = str.substring(i, caret);
-        const match = substr.match(re);
-        let matchStart = -1;
-
-        if (triggerLength > 0) {
-          const triggerIdx = triggerMatch ? i : i - triggerLength + 1;
-
-          if (triggerIdx < 0) {
-            // out of input
-            break;
-          }
-
-          if (isTrigger(triggerStr, str, triggerIdx)) {
-            matchStart = triggerIdx + triggerLength;
-          }
-
-          if (!match && matchStart < 0) {
-            break;
-          }
-        } else {
-          if (match && i > 0) {
-            // find first non-matching character or begin of input
-            continue;
-          }
-          matchStart = i === 0 && match ? 0 : i + 1;
-
-          if (caret - matchStart === 0) {
-            // matched slug is empty
-            break;
-          }
-        }
-
-        if (matchStart >= 0) {
-          const triggerOptions = providedOptionsObject[triggerStr] as string[];
-          if (!Array.isArray(triggerOptions)) {
-            continue;
-          }
-
-          const matchedSlug = str.substring(matchStart, caret);
-
-          const options = triggerOptions.filter((slug) => {
-            const idx = slug.toLowerCase().indexOf(matchedSlug.toLowerCase());
-            return idx !== -1 && (matchAny || idx === 0);
-          });
-
-          const currTrigger = triggerStr;
-          const matchLength = matchedSlug.length;
-
-          if (slugData === {}) {
-            slugData = {
-              trigger: currTrigger,
-              matchStart,
-              matchLength,
-              options,
-            };
-          } else {
-            slugData = {
-              ...slugData,
-              trigger: currTrigger,
-              matchStart,
-              matchLength,
-              options,
-            };
-          }
-        }
-      }
-    }
-
-    return slugData;
-  };
-
-  const arrayTriggerMatch = (triggers: string[], re: RegExp) => {
-    const triggersMatch = triggers.map((trigger) => ({
-      triggerStr: trigger,
-      triggerMatch: trigger.match(re),
-      triggerLength: trigger.length,
-    }));
-
-    return triggersMatch;
-  };
-
-  const isTrigger = (trigger: string, str: string, i: number): boolean => {
-    if (!trigger || !trigger.length) {
-      return true;
-    }
-
-    if (str.substr(i, trigger.length) === trigger) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, options, spaceRemovers, spacer, value } = props;
-
-    const old = recentValue;
-    const str = e.target.value;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    const caret = (getInputSelection(getInputElement(e.target)) as {
-      start: number;
-      end: number;
-    }).end;
-
-    if (!str.length) {
-      updateState({
-        ...state,
-        helperVisible: false,
-      });
-    }
-
-    setRecentValue(str);
-
-    updateState({
-      ...state,
-      caret,
-      value: e.target.value,
-    });
-
-    if (!str.length || !caret) {
-      return onChange(e.target.value);
-    }
-
-    // '@wonderjenny ,|' -> '@wonderjenny, |'
-    if (
-      enableSpaceRemovers &&
-      spaceRemovers.length &&
-      str.length > 2 &&
-      spacer.length
-    ) {
-      for (let i = 0; i < Math.max(old.length, str.length); ++i) {
-        if (old[i] !== str[i]) {
-          if (
-            i >= 2 &&
-            str[i - 1] === spacer &&
-            spaceRemovers.indexOf(str[i - 2]) === -1 &&
-            spaceRemovers.indexOf(str[i]) !== -1 &&
-            getMatch(str.substring(0, i - 2), caret - 3, options) !== {}
-          ) {
-            const newValue = `${str.slice(0, i - 1)}${str.slice(
-              i,
-              i + 1
-            )}${str.slice(i - 1, i)}${str.slice(i + 1)}`;
-
-            updateCaretPosition(i + 1);
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (refInput.current !== null) {
-              ((refInput.current as unknown) as Record<
-                string,
-                unknown
-              >).value = newValue;
-            }
-
-            if (!value) {
-              updateState({
-                ...state,
-                value: newValue,
-              });
-            }
-
-            return onChange(newValue);
-          }
-
-          break;
-        }
-      }
-
-      setEnableSpaceRemovers(false);
-    }
-
-    updateHelper(str, caret, options);
-
-    // if (!value) {
-    //   updateState({
-    //     ...state,
-    //     value: e.target.value
-    //   });
-    // }
-
-    return onChange(e.target.value);
-  };
-
-  const getInputElement = (
-    parent: HTMLElement | undefined
-  ): HTMLElement | undefined => {
-    if (parent !== undefined) {
-      if (parent.children.length > 0) {
-        const innerTextAreas = parent.getElementsByTagName('textarea');
-        if (innerTextAreas.length > 0) {
-          return innerTextAreas[0];
-        }
-
-        const innerInputs = parent.getElementsByTagName('input');
-        if (innerInputs.length > 0) {
-          return innerInputs[0];
-        }
-      } else {
-        return parent;
-      }
-    }
-
-    return undefined;
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const { helperVisible, options, selection } = state;
-    const { onKeyDown, passThroughEnter } = props;
-
-    if (helperVisible) {
-      switch (event.keyCode) {
-        case KEY_ESCAPE:
-          event.preventDefault();
-          resetHelper();
-          break;
-        case KEY_UP:
-          event.preventDefault();
-          updateState({
-            ...state,
-            selection: (options.length + selection - 1) % options.length,
-          });
-          break;
-        case KEY_DOWN:
-          event.preventDefault();
-          updateState({
-            ...state,
-            selection: (selection + 1) % options.length,
-          });
-          break;
-        case KEY_ENTER:
-        case KEY_RETURN:
-          if (!passThroughEnter) {
-            event.preventDefault();
-          }
-          handleSelection(selection);
-          break;
-        case KEY_TAB:
-          handleSelection(selection);
-          break;
-        default:
-          onKeyDown(event);
-          break;
-      }
-    } else {
-      onKeyDown(event);
-    }
-  };
-
-  const handleResize = () => {
-    updateState({
-      ...state,
-      helperVisible: false,
-    });
-  };
-
-  const handleSelection = (idx: number) => {
-    const { spacer, onSelect, changeOnSelect } = props;
-    const { matchStart, matchLength, options, trigger } = state;
-
-    const slug = options[idx];
-    const value = recentValue;
-    const part1 = value.substring(0, matchStart - trigger.length);
-    const part2 = value.substring(matchStart + matchLength);
-
-    const event = { target: refInput.current };
-    const changedStr = changeOnSelect(trigger, slug);
-
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (event.target !== null) {
-      ((event.target as unknown) as Record<
-        string,
-        unknown
-      >).value = `${part1}${changedStr}${spacer}${part2}`;
-    }
-    handleChange(event as any);
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (event.target !== null) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      onSelect((event.target as any).value);
-    }
-
-    resetHelper();
-
-    updateCaretPosition(part1.length + changedStr.length + 1);
-
-    setEnableSpaceRemovers(true);
-  };
-
-  const updateCaretPosition = (caret: number) => {
-    updateState({
-      ...state,
-      caret,
-    });
-
-    const input = getInputElement((refInput.current as unknown) as HTMLElement);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    setCaretPosition(input, caret);
-  };
-
-  const updateState = (val: any) => {
-    setTimeout(() => {
-      setState({
-        ...val,
-      });
-    }, 0);
-  };
-
-  const updateHelper = (str: string, caret: number, options: string[]) => {
-    const parent = (refInput.current as unknown) as HTMLElement;
-    if (refInput.current === null) {
-      return;
-    }
-
-    const input = getInputElement(parent);
-    if (input === undefined) {
-      return;
-    }
-    const parentRect = parent.getBoundingClientRect();
-
-    const slug = getMatch(str, caret, options) as any;
-
-    if (Object.keys(slug).length > 0 && input !== null) {
-      const caretPos = getCaretCoordinates(input, caret);
-      const rect = input.getBoundingClientRect();
-      const {
-        minChars,
-        onRequestOptions,
-        requestOnlyIfNoOptions,
-        mode,
-      } = props;
-
-      let top,
-        left,
-        right,
-        width = 'unset';
-      if (mode === 'assist') {
-        top =
-          parent === input
-            ? caretPos.top + input.offsetTop
-            : caretPos.top + parentRect.top;
-        left = Math.min(
-          caretPos.left + input.offsetLeft - OPTION_LIST_Y_OFFSET,
-          input.offsetLeft + rect.width - OPTION_LIST_MIN_WIDTH
-        );
-      } else {
-        top = parentRect.top + parent.offsetHeight;
-        left = parent.offsetLeft;
-        right = parent.offsetLeft - parent.offsetWidth;
-        width = `${parentRect.width}px`;
-      }
-
-      if (
-        slug.matchLength >= minChars &&
-        (slug.options.length > 1 ||
-          (slug.options.length === 1 &&
-            slug.options[0].length !== slug.matchLength))
-      ) {
-        updateState({
-          ...state,
-          value: str,
-          helperVisible: true,
-          top,
-          left,
-          right,
-          width,
-          ...slug,
-        });
-      } else {
-        if (!requestOnlyIfNoOptions || !slug.options.length) {
-          onRequestOptions(str.substr(slug.matchStart, slug.matchLength));
-        }
-
-        resetHelper();
-      }
-    } else {
-      resetHelper();
-    }
-  };
-
-  const resetHelper = () => {
-    const timeDelay = 100;
-    setTimeout(() => {
-      updateState({
-        ...state,
-        helperVisible: false,
-        selection: 0,
-      });
-    }, timeDelay);
-  };
-
-  const renderAutocompleteList = () => {
-    const {
-      helperVisible,
-      left,
-      right,
-      matchStart,
-      matchLength,
-      options,
-      selection,
-      top,
-      value,
-      width,
-    } = state;
-
-    if (!helperVisible) {
-      return null;
-    }
-
-    const { maxOptions, offsetX, offsetY, direction } = props;
-
-    if (options.length === 0) {
-      return null;
-    }
-
-    if (selection >= options.length) {
-      updateState({
-        ...state,
-        selection: 0,
-      });
-
-      return null;
-    }
-
-    const optionNumber = maxOptions === 0 ? options.length : maxOptions;
-
-    const helperOptions = options
-      .slice(0, optionNumber)
-      .map((val: string, idx) => {
-        const highlightStart = val
-          .toLowerCase()
-          .indexOf(value.substr(matchStart, matchLength).toLowerCase());
-
-        return (
-          <li
-            className={idx === selection ? 'active' : undefined}
-            key={val}
-            onClick={() => {
-              handleSelection(idx);
-            }}
-            onMouseEnter={() => {
-              updateState({
-                ...state,
-                selection: idx,
-              });
-            }}
-          >
-            {val.slice(0, highlightStart)}
-            <strong>{val.substr(highlightStart, matchLength)}</strong>
-            {val.slice(highlightStart + matchLength)}
-          </li>
-        );
-      });
-
-    const horizontalPosition =
-      direction === 'ltr'
-        ? { left: left + offsetX }
-        : { right: right + offsetX };
-    return (
-      <ul
-        className="react-autocomplete-input"
-        style={{ ...horizontalPosition, top: top + offsetY, width }}
-      >
-        {helperOptions}
-      </ul>
-    );
-  };
-
-  const {
-    Component,
-    ComponentProps,
-    defaultValue,
-    disabled,
-    onBlur,
-    value,
-    ...rest
-  } = props;
-
-  const propagated: any = Object.assign({}, rest);
-  Object.keys(props).forEach((k) => {
-    delete (propagated as Record<string, unknown>)[k];
-  });
-
-  return (
-    <>
-      {React.cloneElement(Component, {
-        disabled: disabled,
-        onBlur: onBlur,
-        onChange: handleChange,
-        onKeyDown: handleKeyDown,
-        ref: refInput,
-        value: recentValue,
-        ...propagated,
-        ...ComponentProps,
-      })}
-      {renderAutocompleteList()}
-    </>
-  );
-};
-
-const defaultProps: IAutocompleteProps = {
-  Component: <textarea />,
-  ComponentProps: {},
-  defaultValue: undefined,
-  disabled: false,
-  maxOptions: 6,
-  onBlur: (evt: any) => {},
-  onChange: (val: string) => {},
-  onKeyDown: (evt: any) => {},
-  onRequestOptions: (val: string) => {},
-  onSelect: (val: string) => {},
-  changeOnSelect: (trigger: string, slug: string): string =>
-    `${trigger}${slug}`,
-  options: [],
-  regex: '^[A-Za-z0-9\\-_]+$',
-  matchAny: false,
-  minChars: 0,
-  requestOnlyIfNoOptions: true,
-  spaceRemovers: [',', '.', '!', '?'],
-  spacer: ' ',
-  trigger: '@',
-  offsetX: 0,
-  offsetY: 0,
-  value: undefined,
-  passThroughEnter: false,
-  mode: 'assist',
-  direction: 'ltr',
-};
-
-interface IAutocompleteOptionalProps extends Partial<IAutocompleteProps> {}
-export const AutocompleteWithDefauls: React.FC<IAutocompleteOptionalProps> = (
-  props
-) => {
-  let compProps = {
-    ...defaultProps,
-    ...props,
-  };
-  if (props.mode === 'autocomplete') {
-    compProps = {
-      ...compProps,
-      trigger: '',
-      regex: '.',
-      spacer: '',
-    };
-  }
-  return <Autocomplete {...compProps} />;
-};
-export default AutocompleteWithDefauls;

package/src/lib/autocomplete/get-input-selection.d.ts

@@ -1 +0,0 @@
-declare module 'get-input-selection';

package/src/lib/autocomplete/index.ts

@@ -1 +0,0 @@
-export { AutocompleteWithDefauls as Autocomplete } from './autocomplete';

package/src/lib/box/box.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Box, BoxProps } from '@material-ui/core';
-
-export const McBox: React.FC<BoxProps> = (props: BoxProps) => {
-  const { children, ...rest } = props;
-  return <Box {...rest}>{children}</Box>;
-};

package/src/lib/box/index.ts

@@ -1 +0,0 @@
-export { McBox as Box } from './box';