Skip to content

Commit

Permalink
FEATURE (keyDown): expose keydown function override closes #28
Browse files Browse the repository at this point in the history
  • Loading branch information
@sanusart
sanusart committed Sep 5, 2019
1 parent 8653a1e commit 442d7ab
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 19 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ and use as:
| [dropdownRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-renderer) | func | | Overrides internal dropdown component |
| [dropdownHandleRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-handle-renderer) | func | | Overrides internal dropdown handle |
| searchFn | func | undefined | Overrides internal search function |
| handleKeyDownFn | func | undefined | Overrides internal keyDown function |

### License

Expand Down
2 changes: 1 addition & 1 deletion dist/react-dropdown-select.js
View file

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions docs/src/pages/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ title: 'API'
| dropdownHandle | bool | true | Dropdown handle to open/close dropdown |
| dropdownHeight | string | "300px" | Minimum height of a dropdown |
| [direction](https://sanusart.github.io/react-dropdown-select/examples/#Right-to-left) | string | "ltr" | direction of a dropdown "ltr", "rtl" or "auto" |
| searchBy | string | label | Search by object property (or nested property with dot notation) in values |
| sortBy | string | null | Sort by object property (or nested property with dot notation) in values |
| labelField | string | "label" | Field (or nested property with dot notation) in data to use for label |
| valueField | string | "value" | Field (or nested property with dot notation) in data to use for value |
| searchBy | string | label | Search by object property (or nested property with dot notation) in values |
| sortBy | string | null | Sort by object property (or nested property with dot notation) in values |
| labelField | string | "label" | Field (or nested property with dot notation) in data to use for label |
| valueField | string | "value" | Field (or nested property with dot notation) in data to use for value |
| color | string | "#0074D9" | Base color to use in component, also can be overwritten via CSS |
| closeOnScroll | bool | false | If true, scrolling the page will close the dropdown |
| closeOnSelect | bool | false | If true, selecting option will close the dropdown |
Expand Down Expand Up @@ -66,3 +66,4 @@ title: 'API'
| [dropdownRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-renderer) | func | | Overrides internal dropdown component |
| [dropdownHandleRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-handle-renderer) | func | | Overrides internal dropdown handle |
| searchFn | func | undefined | Overrides internal search function |
| handleKeyDownFn | func | undefined | Overrides internal keyDown function |
2 changes: 1 addition & 1 deletion lib/index.js
View file

Large diffs are not rendered by default.

35 changes: 22 additions & 13 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,9 @@ export class Select extends Component {

addItem = (item) => {
if (this.props.multi) {
if (valueExistInSelected(getByPath(item, this.props.valueField), this.state.values, this.props)) {
if (
valueExistInSelected(getByPath(item, this.props.valueField), this.state.values, this.props)
) {
return this.removeItem(null, item, false);
}

Expand Down Expand Up @@ -344,10 +346,16 @@ export class Select extends Component {
});

handleKeyDown = (event) => {
const { cursor } = this.state;
const args = { event, state: this.state, props: this.props, methods: this.methods, setState: this.setState.bind(this) };

return this.props.handleKeyDownFn(args) || this.handleKeyDownFn(args);
};

handleKeyDownFn = ({ event, state, props, methods, setState }) => {
const { cursor } = state;

if (event.key === 'ArrowDown' && cursor === null) {
return this.setState({
return setState({
cursor: 0
});
}
Expand All @@ -361,36 +369,36 @@ export class Select extends Component {
}

if (event.key === 'Enter') {
const currentItem = this.searchResults()[cursor];
const currentItem = methods.searchResults()[cursor];
if (currentItem && !currentItem.disabled) {
if (this.props.create && valueExistInSelected(this.state.search, this.state.values, this.props)) {
if (props.create && valueExistInSelected(state.search, state.values, props)) {
return null;
}

this.addItem(currentItem);
methods.addItem(currentItem);
}
}

if (event.key === 'ArrowUp' && cursor > 0) {
this.setState((prevState) => ({
setState((prevState) => ({
cursor: prevState.cursor - 1
}));
}

if (event.key === 'ArrowUp' && cursor === 0) {
this.setState({
cursor: this.searchResults().length
setState({
cursor: methods.searchResults().length
});
}

if (event.key === 'ArrowDown') {
this.setState((prevState) => ({
setState((prevState) => ({
cursor: prevState.cursor + 1
}));
}

if (event.key === 'ArrowDown' && this.searchResults().length === cursor) {
return this.setState({
if (event.key === 'ArrowDown' && methods.searchResults().length === cursor) {
return setState({
cursor: 0
});
}
Expand Down Expand Up @@ -502,7 +510,8 @@ Select.defaultProps = {
onClearAll: () => undefined,
onSelectAll: () => undefined,
onCreateNew: () => undefined,
searchFn: () => undefined
searchFn: () => undefined,
handleKeyDownFn: () => undefined,
};

const ReactDropdownSelect = styled.div`
Expand Down
9 changes: 9 additions & 0 deletions types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ export interface IRenderer {
methods?: IMethods;
}

export interface IKeyDown {
event: Event;
props?: ISelectProps;
state?: IState;
methods?: IMethods;
setState?: () => void;
}

export interface IItemRenderer {
item?: number;
itemIndex?: number;
Expand Down Expand Up @@ -84,6 +92,7 @@ export interface ISelectProps {
onSelectAll?: () => void;
onCreateNew?: () => void;
searchFn?: () => void;
handleKeyDownFn?: ({ event, props, state, methods, setState }: IKeyDown) => void;
clearRenderer?: ({ props, state, methods }: IRenderer) => void;
contentRenderer?: ({ props, state, methods }: IRenderer) => void;
dropdownRenderer?: ({ props, state, methods }: IRenderer) => void;
Expand Down

0 comments on commit 442d7ab

Please sign in to comment.