32 |
33 | ## Feature
34 |
35 | - support ie9,ie9+,chrome,firefox,safari
36 |
37 | ### Keyboard
38 |
39 | - Open mentions (focus input || focus and click)
40 | - KeyDown/KeyUp/Enter to navigate menu
41 |
42 | ## install
43 |
44 | [](https://npmjs.org/package/rc-mentions)
45 |
46 | ## Usage
47 |
48 | ### basic use
49 |
50 | ```js
51 | /**
52 | * inline: true
53 | */
54 | import Mentions from '@rc-component/mentions';
55 | // Import the default styles
56 | import './index.less';
57 |
58 | const { Option } = Mentions;
59 |
60 | var Demo = (
61 |
9 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/docs/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Mentions from '@rc-component/mentions';
3 | import '../../assets/index.less';
4 |
5 | const onSelect = (option, prefix) => {
6 | console.log('Select:', prefix, '-', option.value);
7 | };
8 |
9 | const onFocus = () => {
10 | console.log('onFocus');
11 | };
12 |
13 | const onBlur = () => {
14 | console.log('onBlur');
15 | };
16 |
17 | export default () => (
18 | Uncontrolled
10 |controlled
12 |
82 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/docs/examples/filter.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Mentions from '@rc-component/mentions';
3 | import '../../assets/index.less';
4 |
5 | function filterOption(input, { key }) {
6 | return key.indexOf(input) !== -1;
7 | }
8 |
9 | export default () => (
10 | {searchRef.current}
89 |
25 | @ for string, # for number
26 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/docs/examples/onScroll.less:
--------------------------------------------------------------------------------
1 | .on-scroll .rc-mentions-dropdown-menu {
2 | max-height: 250px;
3 | overflow: auto;
4 | }
5 |
--------------------------------------------------------------------------------
/docs/examples/onScroll.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Mentions, { UnstableContext } from '@rc-component/mentions';
3 | import '../../assets/index.less';
4 | import './onScroll.less';
5 |
6 | export default () => (
7 |
14 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 |
--------------------------------------------------------------------------------
/docs/examples/textarea.less:
--------------------------------------------------------------------------------
1 | .motion {
2 |
3 | .effect() {
4 | animation-duration: 0.3s;
5 | animation-fill-mode: both;
6 | }
7 |
8 | &-zoom-enter,&-zoom-appear {
9 | opacity: 0;
10 | .effect();
11 | animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
12 | animation-play-state: paused;
13 | }
14 |
15 | &-zoom-leave {
16 | .effect();
17 | animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
18 | animation-play-state: paused;
19 | }
20 |
21 | &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
22 | animation-name: rcTriggerZoomIn;
23 | animation-play-state: running;
24 | }
25 |
26 | &-zoom-leave&-zoom-leave-active {
27 | animation-name: rcTriggerZoomOut;
28 | animation-play-state: running;
29 | }
30 |
31 | @keyframes rcTriggerZoomIn {
32 | 0% {
33 | opacity: 0;
34 | transform-origin: 50% 50%;
35 | transform: scale(0, 0);
36 | }
37 | 100% {
38 | opacity: 1;
39 | transform-origin: 50% 50%;
40 | transform: scale(1, 1);
41 | }
42 | }
43 | @keyframes rcTriggerZoomOut {
44 | 0% {
45 | opacity: 1;
46 | transform-origin: 50% 50%;
47 | transform: scale(1, 1);
48 | }
49 | 100% {
50 | opacity: 0;
51 | transform-origin: 50% 50%;
52 | transform: scale(0, 0);
53 | }
54 | }
55 | }
--------------------------------------------------------------------------------
/docs/examples/textarea.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Mentions from '@rc-component/mentions';
3 | import '../../assets/index.less';
4 | import './textarea.less';
5 |
6 | export default () => (
7 | Customize Split Logic
15 |Only validate string length less than 3
16 |
8 |
112 | );
113 |
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: rc-mentions
3 | ---
4 |
5 |
6 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = require('./src/');
4 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | setupFiles: ['./tests/setup.ts'],
3 | setupFilesAfterEnv: ['./tests/setupFilesAfterEnv.ts'],
4 | collectCoverageFrom: ['./src/**/*.{ts,tsx}'],
5 | };
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@rc-component/mentions",
3 | "version": "1.2.0",
4 | "description": "React Mentions",
5 | "keywords": [
6 | "react",
7 | "react-component",
8 | "react-mentions",
9 | "mentions"
10 | ],
11 | "homepage": "http://github.com/react-component/mentions",
12 | "bugs": {
13 | "url": "http://github.com/react-component/mentions/issues"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git@github.com:react-component/mentions.git"
18 | },
19 | "license": "MIT",
20 | "main": "./lib/index",
21 | "module": "./es/index",
22 | "files": [
23 | "assets/*.css",
24 | "es",
25 | "dist",
26 | "lib"
27 | ],
28 | "scripts": {
29 | "compile": "father build",
30 | "coverage": "rc-test --coverage",
31 | "docs:build": "dumi build",
32 | "docs:deploy": "gh-pages -d .doc",
33 | "gh-pages": "npm run docs:build && npm run docs:deploy",
34 | "lint": "eslint src/ --ext .tsx,.ts",
35 | "prepare": "husky install",
36 | "prepublishOnly": "npm run compile && rc-np",
37 | "postpublish": "npm run gh-pages",
38 | "start": "dumi dev",
39 | "test": "rc-test"
40 | },
41 | "lint-staged": {
42 | "**/*.{js,jsx,tsx,ts,md,json}": [
43 | "prettier --write",
44 | "git add"
45 | ]
46 | },
47 | "dependencies": {
48 | "@rc-component/input": "~1.0.1",
49 | "@rc-component/menu": "~1.1.0",
50 | "@rc-component/textarea": "~1.0.0",
51 | "@rc-component/trigger": "^3.0.0",
52 | "@rc-component/util": "^1.2.0",
53 | "classnames": "^2.2.6"
54 | },
55 | "devDependencies": {
56 | "@rc-component/father-plugin": "^2.0.2",
57 | "@rc-component/np": "^1.0.3",
58 | "@testing-library/jest-dom": "^6.4.6",
59 | "@testing-library/react": "^16.0.0",
60 | "@types/classnames": "^2.2.6",
61 | "@types/react": "^18.0.8",
62 | "@types/react-dom": "^18.0.3",
63 | "@types/warning": "^3.0.0",
64 | "@umijs/fabric": "^3.0.0",
65 | "dumi": "^2.0.18",
66 | "eslint": "^8.0.0",
67 | "eslint-plugin-jest": "^28.11.0",
68 | "eslint-plugin-unicorn": "^56.0.1",
69 | "father": "^4.0.0",
70 | "gh-pages": "^5.0.0",
71 | "husky": "^9.1.6",
72 | "lint-staged": "^15.2.7",
73 | "prettier": "^3.3.2",
74 | "rc-test": "^7.0.14",
75 | "react": "^18.0.0",
76 | "react-dom": "^18.0.0",
77 | "typescript": "^5.0.4"
78 | },
79 | "peerDependencies": {
80 | "react": ">=16.9.0",
81 | "react-dom": ">=16.9.0"
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/DropdownMenu.tsx:
--------------------------------------------------------------------------------
1 | import Menu, { MenuItem, MenuRef } from '@rc-component/menu';
2 | import React, { useEffect, useRef } from 'react';
3 | import MentionsContext from './MentionsContext';
4 | import type { DataDrivenOptionProps } from './Mentions';
5 | export interface DropdownMenuProps {
6 | prefixCls?: string;
7 | options: DataDrivenOptionProps[];
8 | }
9 |
10 | /**
11 | * We only use Menu to display the candidate.
12 | * The focus is controlled by textarea to make accessibility easy.
13 | */
14 | function DropdownMenu(props: DropdownMenuProps) {
15 | const {
16 | notFoundContent,
17 | activeIndex,
18 | setActiveIndex,
19 | selectOption,
20 | onFocus,
21 | onBlur,
22 | onScroll,
23 | } = React.useContext(MentionsContext);
24 |
25 | const { prefixCls, options } = props;
26 | const activeOption = options[activeIndex] || {};
27 | const menuRef = useRef
47 |
67 |
68 |
69 |
89 |
90 |
91 |
111 |
476 |
490 | {mergedMeasuring && (
491 |
527 | );
528 | },
529 | );
530 |
531 | const Mentions = forwardRef
492 | {mergedValue.slice(0, mergedMeasureLocation)}
493 |
504 |
518 | {mergedMeasurePrefix}
519 |
520 |
521 | {mergedValue.slice(
522 | mergedMeasureLocation + mergedMeasurePrefix.length,
523 | )}
524 |
525 | )}
526 |
10 |
14 |
15 |
18 |
25 |
26 |
27 | `;
28 |
29 | exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
30 |
33 |
36 |
40 |
41 |
44 |
51 |
52 |
53 | `;
54 |
55 | exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
56 |
59 |
62 |
66 |
67 |
70 |
77 |
78 |
79 | `;
80 |
81 | exports[`should support allowClear should not show icon if value is undefined, null or empty string 1`] = `
82 |
85 |
88 |
92 |
93 |
96 |
103 |
104 |
105 | `;
106 |
107 | exports[`should support allowClear should not show icon if value is undefined, null or empty string 2`] = `
108 |
111 |
114 |
118 |
119 |
122 |
129 |
130 |
131 | `;
132 |
133 | exports[`should support allowClear should not show icon if value is undefined, null or empty string 3`] = `
134 |
137 |
140 |
144 |
145 |
148 |
155 |
156 |
157 | `;
158 |
--------------------------------------------------------------------------------
/tests/setup.ts:
--------------------------------------------------------------------------------
1 | // Mock empty ResizeObserver
2 | global.ResizeObserver = class ResizeObserver {
3 | observe() {}
4 | unobserve() {}
5 | disconnect() {}
6 | };
7 |
8 | window.HTMLElement.prototype.scrollIntoView = jest.fn();
9 |
--------------------------------------------------------------------------------
/tests/setupFilesAfterEnv.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
--------------------------------------------------------------------------------
/tests/util.ts:
--------------------------------------------------------------------------------
1 | import { fireEvent } from '@testing-library/react';
2 |
3 | export function simulateInput(
4 | container: HTMLElement,
5 | text = '',
6 | keyEvent?: any,
7 | ) {
8 | const lastChar = text[text.length - 1];
9 | const myKeyEvent = keyEvent || {
10 | which: lastChar.charCodeAt(0),
11 | keyCode: lastChar.charCodeAt(0),
12 | key: lastChar,
13 | };
14 |
15 | fireEvent.keyDown(container.querySelector('textarea'), myKeyEvent);
16 |
17 | if (!keyEvent) {
18 | fireEvent.change(container.querySelector('textarea'), {
19 | target: { value: text, selectionStart: text.length },
20 | });
21 | }
22 |
23 | fireEvent.keyUp(container.querySelector('textarea'), myKeyEvent);
24 | }
25 |
26 | export function expectMatchOptions(targetLabels: string[]) {
27 | const list = Array.from(
28 | document.querySelectorAll('.rc-mentions-dropdown-menu-item'),
29 | ).map(item => item.textContent);
30 | expect(list).toEqual(targetLabels);
31 | }
32 |
33 | export function expectMeasuring(container: HTMLElement, measuring = true) {
34 | const expected = expect(container.querySelector('.rc-mentions-measure'));
35 |
36 | if (measuring) {
37 | expected.toBeTruthy();
38 | } else {
39 | expected.toBeFalsy();
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "moduleResolution": "node",
5 | "baseUrl": "./",
6 | "jsx": "react",
7 | "declaration": true,
8 | "skipLibCheck": true,
9 | "esModuleInterop": true,
10 | "paths": {
11 | "@/*": ["src/*"],
12 | "@@/*": [".dumi/tmp/*"],
13 | "@rc-component/mentions": ["src/index.ts"]
14 | }
15 | },
16 | "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
17 | }
18 |
--------------------------------------------------------------------------------