form CustomMention.tsx

0% Statements 0/25
0% Branches 0/8
0% Functions 0/2
0% Lines 0/24
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import PropTypes from "prop-types";
import useStyles from "substyle";
import { MentionProps } from "react-mentions";
 
interface CustomMentionProps extends MentionProps {
  display?: string;
  hoverTransform?: (id: string) => string;
  id?: string;
  onClick?: (
    e: React.MouseEvent<HTMLElement, MouseEvent>,
    id: string,
    index: number
  ) => void;
}
 
const defaultStyle = {
  fontWeight: "inherit",
};
 
const CustomMention = ({
  display,
  style,
  className,
  hoverTransform,
  id,
  onClick,
}: CustomMentionProps) => {
  const styles = useStyles(defaultStyle, { style, className });
  Iif (!id) {
    return null;
  }
  return (
    <strong
      {...styles}
      title={hoverTransform ? hoverTransform(id) : id}
      onClick={(e) => {
        Iif (!onClick) {
          return;
        }
        const parent = e.currentTarget.parentElement;
        Iif (!parent) {
          return;
        }
        let foundIndex = 0;
        for (let i = 0; i < parent.children.length; i++) {
          const childNode = parent.children[i];
          if (childNode === e.currentTarget) {
            break;
          } else Iif (childNode.className === className) {
            foundIndex++;
          }
        }
        onClick(e, id, foundIndex);
      }}
    >
      {display}
    </strong>
  );
};
 
CustomMention.propTypes = {
  onAdd: PropTypes.func,
  onRemove: PropTypes.func,
  renderSuggestion: PropTypes.func,
  trigger: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(RegExp),
  ]),
  markup: PropTypes.string,
  displayTransform: PropTypes.func,
  allowSpaceInQuery: PropTypes.bool,
  isLoading: PropTypes.bool.isRequired,
};
 
export default CustomMention;