Skip to content

feat(trigger): show autocomplete only after whitespace #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 13, 2018
Merged

feat(trigger): show autocomplete only after whitespace #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b61cc50
feat(trigger): show autocomplete only after whitespace
jukben May 13, 2018
0d3d172
docs(readme): updated trigger point afterWhitespace
jukben May 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ export default App;
token: string
) => Promise<Array<Object | string>> | Array<Object | string>,
allowWhitespace?: boolean,
afterWhitespace?: boolean,
component: ReactClass<*>
|},
}
Expand All @@ -140,6 +141,7 @@ export default App;
- **dataProvider** is called after each keystroke to get data what the suggestion list should display (array or promise resolving array)
- **component** is the component for render the item in suggestion list. It has `selected` and `entity` props provided by React Textarea Autocomplete
- **allowWhitespace** (Optional; defaults to false) Set this to true if you want to provide autocomplete for words (tokens) containing whitespace
- **afterWhitespace** (Optional; defaults to false) Show autocomplete only if it's preceded by whitespace. Cannot be combined with _allowWhitespace_
- **output** (Optional for string based item. If the item is an object this method is *required*) This function defines text which will be placed into textarea after the user makes a selection.

You can also specify the behavior of caret if you return object `{text: "item", caretPosition: "start"}` the caret will be before the word once the user confirms his selection. Other possible value are "next", "end" and number, which is absolute number in contex of textarea (0 is equal position before the first char). Defaults to "next" which is space after the injected word.
Expand Down
7 changes: 7 additions & 0 deletions cypress/integration/textarea.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,5 +215,12 @@ describe('React Textarea Autocomplete', () => {
});
cy.get('.rta__textarea').should('have.value', 'This is test /');
});

it('show autocomplete only after whitespace', () => {
cy.get('.rta__textarea').type('This is test;');
cy.get('.rta__autocomplete').should('not.be.visible');
cy.get('.rta__textarea').type(' ;');
cy.get('.rta__autocomplete').should('be.visible');
});
});
});
13 changes: 13 additions & 0 deletions example/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,19 @@ class App extends React.Component {
next: this._outputCaretNext,
}[optionsCaret],
},
';': {
dataProvider: token => [
{ name: '1', char: 'one' },
{ name: '2', char: 'two' },
],
component: Item,
afterWhitespace: true,
output: {
start: this._outputCaretStart,
end: this._outputCaretEnd,
next: this._outputCaretNext,
}[optionsCaret],
},
}}
/>
</div>
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@
},
"devDependencies": {
"@jukben/emoji-search": "1.1.4",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "^3.1.0",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.7",
"cypress": "^1.1.2",
Expand Down
43 changes: 37 additions & 6 deletions src/Textarea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,9 @@ class ReactTextareaAutocomplete extends React.Component<
let tokenMatch = this.tokenRegExp.exec(value.slice(0, selectionEnd));
let lastToken = tokenMatch && tokenMatch[0];

let currentTrigger =
(lastToken && Object.keys(trigger).find(a => a === lastToken[0])) || null;

/*
if we lost the trigger token or there is no following character we want to close
the autocomplete
Expand All @@ -413,6 +416,22 @@ class ReactTextareaAutocomplete extends React.Component<
return;
}

/**
* This code has to be sync that is the reason why we obtain the currentTrigger
* from currentTrigger not this.state.currentTrigger
*
* Check if the currently typed token has to be afterWhitespace, or not.
*/
if (
currentTrigger &&
value[tokenMatch.index - 1] &&
(trigger[currentTrigger].afterWhitespace &&
!value[tokenMatch.index - 1].match(/\s/))
) {
this._closeAutocomplete();
return;
}

/**
If our current trigger allows whitespace
get the correct token for DataProvider, so we need to construct new RegExp
Expand All @@ -430,12 +449,10 @@ class ReactTextareaAutocomplete extends React.Component<
this._closeAutocomplete();
return;
}
}

const triggerChars = Object.keys(trigger);

const currentTrigger =
(lastToken && triggerChars.find(a => a === lastToken[0])) || null;
currentTrigger =
Object.keys(trigger).find(a => a === lastToken[0]) || null;
}

const actualToken = lastToken.slice(1);

Expand Down Expand Up @@ -620,7 +637,15 @@ const triggerPropsCheck = ({ trigger }: { trigger: triggerType }) => {
}

// $FlowFixMe
const { component, dataProvider, output } = settings;
const triggerSetting: triggerType = settings;

const {
component,
dataProvider,
output,
afterWhitespace,
allowWhitespace,
} = triggerSetting;

if (!component || typeof component !== 'function') {
return Error('Invalid prop trigger: component should be defined.');
Expand All @@ -633,6 +658,12 @@ const triggerPropsCheck = ({ trigger }: { trigger: triggerType }) => {
if (output && typeof output !== 'function') {
return Error('Invalid prop trigger: output should be a function.');
}

if (afterWhitespace && allowWhitespace) {
return Error(
'Invalid prop trigger: afterWhitespace and allowWhitespace can be used together'
);
}
}

return null;
Expand Down
1 change: 1 addition & 0 deletions src/types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export type settingType = {|
component: React$StatelessFunctionalComponent<*>,
dataProvider: dataProviderType,
allowWhitespace?: boolean,
afterWhitespace?: boolean,
output?: (Object | string, ?string) => textToReplaceType | string,
|};

Expand Down
5 changes: 4 additions & 1 deletion webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ module.exports = {
},
resolve: {
alias: {
'@webscopeio/react-textarea-autocomplete': path.resolve(__dirname, './src'),
'@webscopeio/react-textarea-autocomplete': path.resolve(
__dirname,
'./src'
),
},
extensions: ['.js', '.jsx', '.json'],
},
Expand Down
49 changes: 39 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,6 +348,30 @@ babel-core@^6.0.0, babel-core@^6.26.0:
slash "^1.0.0"
source-map "^0.5.6"

babel-core@^6.26.3:
version "6.26.3"
resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
dependencies:
babel-code-frame "^6.26.0"
babel-generator "^6.26.0"
babel-helpers "^6.24.1"
babel-messages "^6.23.0"
babel-register "^6.26.0"
babel-runtime "^6.26.0"
babel-template "^6.26.0"
babel-traverse "^6.26.0"
babel-types "^6.26.0"
babylon "^6.18.0"
convert-source-map "^1.5.1"
debug "^2.6.9"
json5 "^0.5.1"
lodash "^4.17.4"
minimatch "^3.0.4"
path-is-absolute "^1.0.1"
private "^0.1.8"
slash "^1.0.0"
source-map "^0.5.7"

babel-eslint@^7.2.3:
version "7.2.3"
resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
Expand Down Expand Up @@ -486,9 +510,9 @@ babel-jest@^21.2.0:
babel-plugin-istanbul "^4.0.0"
babel-preset-jest "^21.2.0"

babel-loader@^7.1.2:
version "7.1.2"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
babel-loader@^7.1.4:
version "7.1.4"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.4.tgz#e3463938bd4e6d55d1c174c5485d406a188ed015"
dependencies:
find-cache-dir "^1.0.0"
loader-utils "^1.0.2"
Expand Down Expand Up @@ -618,7 +642,7 @@ babel-plugin-transform-es2015-computed-properties@^6.22.0:
babel-runtime "^6.22.0"
babel-template "^6.24.1"

babel-plugin-transform-es2015-destructuring@^6.23.0:
babel-plugin-transform-es2015-destructuring@6.23.0, babel-plugin-transform-es2015-destructuring@^6.23.0:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
dependencies:
Expand Down Expand Up @@ -874,13 +898,14 @@ babel-preset-jest@^21.2.0:
babel-plugin-jest-hoist "^21.2.0"
babel-plugin-syntax-object-rest-spread "^6.13.0"

babel-preset-react-app@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.1.0.tgz#d77f6061ab9d7bf4b3cdc86b7cde9ded0df03e48"
babel-preset-react-app@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.1.1.tgz#d3f06a79742f0e89d7afcb72e282d9809c850920"
dependencies:
babel-plugin-dynamic-import-node "1.1.0"
babel-plugin-syntax-dynamic-import "6.18.0"
babel-plugin-transform-class-properties "6.24.1"
babel-plugin-transform-es2015-destructuring "6.23.0"
babel-plugin-transform-object-rest-spread "6.26.0"
babel-plugin-transform-react-constant-elements "6.23.0"
babel-plugin-transform-react-jsx "6.24.1"
Expand Down Expand Up @@ -1513,6 +1538,10 @@ convert-source-map@^1.4.0, convert-source-map@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"

convert-source-map@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"

cookie-signature@1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
Expand Down Expand Up @@ -1781,7 +1810,7 @@ debug@2.6.8:
dependencies:
ms "2.0.0"

debug@2.6.9, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8:
debug@2.6.9, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
dependencies:
Expand Down Expand Up @@ -5214,7 +5243,7 @@ pretty-format@^21.2.1:
ansi-regex "^3.0.0"
ansi-styles "^3.2.0"

private@^0.1.6, private@^0.1.7:
private@^0.1.6, private@^0.1.7, private@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"

Expand Down Expand Up @@ -5920,7 +5949,7 @@ source-map-support@^0.4.15:
dependencies:
source-map "^0.5.6"

source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"

Expand Down