Skip to content

Added function render function option #96

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.

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,29 @@ Widget supports both controlling options: by value and by state. If you explicit
If true, then an enter / return keypress is passed on (after being used to autocomplete).
Useful if you want to have the form submit as soon as a single value is chosen.

## renderOptionsList : func
#### Default value: `(markUp, plaintext) => markUp`
Accepts function that changes each option in the autocomplete list. `markUp` will be the original text (including the highlighting), while `plaintext` will be the pure-text value of the option. Example:
```JavaScript
import React from 'react';
import TextInput from 'react-autocomplete-input';

class MyComponent extends React.Component {

render() {
return <TextInput renderOptionsList={(markUp, plaintext) => {
return <><i className="fa fa-some-icon"></i> {markUp}</>
}} options={this.state.options} />;
}
}

```

## expandUp: boolean
#### Default value: false
If true, option list "expands up", essentially moving the ul based on the size of the options displayed.
Useful if input is near/at the bottom of the page.

# Styles Customization
By default styles are defined in `"react-autocomplete-input/dist/bundle.css"`, however, you may define your custom styles instead for following entities:

Expand Down
20 changes: 16 additions & 4 deletions src/AutoCompleteTextField.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ const propTypes = {
offsetX: PropTypes.number,
offsetY: PropTypes.number,
passThroughEnter: PropTypes.bool,
renderOptionsList: PropTypes.func,
expandUp: PropTypes.bool
};

const defaultProps = {
Expand All @@ -72,6 +74,8 @@ const defaultProps = {
offsetY: 0,
value: null,
passThroughEnter: false,
renderOptionsList: (markUp, plaintext)=> markUp,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: (markUp, plaintext) => markUp,

expandUp: false
};

class AutocompleteTextField extends React.Component {
Expand Down Expand Up @@ -429,6 +433,8 @@ class AutocompleteTextField extends React.Component {
value,
} = this.state;

const {renderOptionsList, expandUp} = this.props;

if (!helperVisible) {
return null;
}
Expand All @@ -447,8 +453,11 @@ class AutocompleteTextField extends React.Component {

const optionNumber = maxOptions === 0 ? options.length : maxOptions;

let height = offsetY;

const helperOptions = options.slice(0, optionNumber).map((val, idx) => {
const highlightStart = val.toLowerCase().indexOf(value.substr(matchStart, matchLength).toLowerCase());
height -= 52;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why 52? Magic constant here is confusing


return (
<li
Expand All @@ -457,15 +466,18 @@ class AutocompleteTextField extends React.Component {
onClick={() => { this.handleSelection(idx); }}
onMouseEnter={() => { this.setState({ selection: idx }); }}
>
{val.slice(0, highlightStart)}
<strong>{val.substr(highlightStart, matchLength)}</strong>
{val.slice(highlightStart + matchLength)}

{renderOptionsList(<>{val.slice(0, highlightStart)}<strong>{val.substr(highlightStart, matchLength)}</strong>{val.slice(highlightStart + matchLength)}</>, val)}
</li>
);
});

if (!expandUp) {
height = top + offsetY;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way logic is spreaded for height evaluation if confusing.

Something like below would be cleaner from my perspective:

const height = expandUp ? (offsetY + helperOptions.length * optionHeight) : top + offsetY;

}

return (
<ul className="react-autocomplete-input" style={{ left: left + offsetX, top: top + offsetY }}>
<ul className="react-autocomplete-input" style={{ left: left + offsetX, top: expandUp }}>
{helperOptions}
</ul>
);
Expand Down