FIX (renderComponents): use props as object and not as args

__tests__/components/Option.spec.js

@@ -34,15 +34,15 @@ describe('<Option/> component', () => {
 
   it('renders correctly', () => {
     const tree = TestRenderer.create(
-      <Option {...props({ parentItem: options[0] })}/>
+      <Option {...props({ item: options[0] })}/>
     ).toJSON();
 
   expect(tree).toMatchSnapshot();
   });
 
   it('onClick remove item', () => {
     TestRenderer.create(
-      <Option {...props({ parentItem: options[0] })} onClick={spy}/>)
+      <Option {...props({ item: options[0] })} onClick={spy}/>)
       .root.findByProps({ className: 'react-dropdown-select-option-remove' }).props.onClick();
 
     expect(spy).toHaveBeenCalled;

docs/src/examples/CustomContentAndDropdown.js

@@ -10,13 +10,13 @@ export class CustomContentAndDropdown extends React.Component {
       value: user.email
     }));
 
-  customContentRenderer = (props, state) => (
+  customContentRenderer = ({ props, state }) => (
     <div style={{ cursor: 'pointer' }}>
       {state.values.length} of {props.options.length} selected
     </div>
   );
 
-  customDropdownRenderer = (props, state, methods) => {
+  customDropdownRenderer = ({ props, state, methods }) => {
     const regexp = new RegExp(state.search, 'i');
 
     return (
@@ -54,7 +54,7 @@ export class CustomContentAndDropdown extends React.Component {
                   onClick={option.disabled ? null : () => methods.addItem(option)}>
                   <input
                     type="checkbox"
-                    onChange={() => option.disabled ? undefined : methods.addItem(option)}
+                    onChange={() => (option.disabled ? undefined : methods.addItem(option))}
                     checked={state.values.indexOf(option) !== -1}
                   />
                   <ItemLabel>{option[props.labelField]}</ItemLabel>

docs/src/examples/ItemRenderer.js

@@ -14,7 +14,7 @@ const ItemRenderer = ({ options, title }) => (
       multi
       options={options}
       values={[]}
-      itemRenderer={(item, itemIndex, props, state, methods) => (
+      itemRenderer={({ item, itemIndex, props, state, methods }) => (
         <StyledItem>
           {item.disabled ? (
             <div aria-disabled>{item.label}</div>

docs/src/pages/demo.js

@@ -43,10 +43,10 @@ export class Demo extends React.Component {
 
   setValues = (selectValues) => this.setState({ selectValues });
 
-  contentRenderer = (innerProps, innerState) => {
+  contentRenderer = ({props, state}) => {
     return (
       <div>
-        {innerState.values.length} of {innerProps.options.length} Selected
+        {state.values.length} of {props.options.length} Selected
       </div>
     );
   };
@@ -59,7 +59,7 @@ export class Demo extends React.Component {
     );
   };
 
-  itemRenderer = (item, itemIndex, props, state, methods) => (
+  itemRenderer = ({item, itemIndex, props, state, methods}) => (
     <div key={item[props.valueField]} onClick={() => methods.addItem(item)}>
       <div style={{ margin: '10px' }}>
         <input type="checkbox" checked={methods.isSelected(item)} />
@@ -68,7 +68,7 @@ export class Demo extends React.Component {
     </div>
   );
 
-  dropdownRenderer = (props, state, methods) => {
+  dropdownRenderer = ({props, state, methods}) => {
     const regexp = new RegExp(state.search, 'i');
 
     return (
@@ -118,13 +118,13 @@ export class Demo extends React.Component {
     );
   };
 
-  optionRenderer = (option, props, state, methods) => (
+  optionRenderer = ({option, props, state, methods}) => (
     <React.Fragment>
       <div onClick={(event) => methods.removeItem(event, option, true)}>{option.label}</div>
     </React.Fragment>
   );
 
-  inputRenderer = (props, state, methods) => (
+  inputRenderer = ({props, state, methods}) => (
     <input
       tabIndex="1"
       className="react-dropdown-select-input"

docs/src/pages/demos/clear-renderer.md

@@ -14,6 +14,6 @@ Override default clear all button
 
 ```
 clearRenderer={
-  (parentProps, parentState, parentMethods) => <component/>
+  ({ props, state, methods }) => <component/>
 }
 ```

docs/src/pages/demos/content-renderer.md

@@ -14,6 +14,6 @@ Override default element content
 
 ```
 contentRenderer={
-  (innerProps, innerState, innerMethods) => <component/>
+  ({ props, state, methods }) => <component/>
 }
 ```

docs/src/pages/demos/dropdown-hanle-renderer.md

@@ -14,6 +14,6 @@ Override default handle for opening dropdown
 
 ```
 dropdownHandleRenderer={
-  (parentProps, parentState, parentMethods) => <component/>
+  ({ props, state, methods }) => <component/>
 }
 ```

docs/src/pages/demos/dropdown-renderer.md

@@ -14,6 +14,6 @@ Override default dropdown
 
 ```jsx
 dropdownRenderer={
-  (parentProps, parentState, parentMethods) => func(parentProps, parentState, parentMethods)
+  ({ props, state, methods }) => func(parentProps, parentState, parentMethods)
 }
 ```

docs/src/pages/demos/input-renderer.md

@@ -14,6 +14,6 @@ Override default "input" component, the search in the content
 
 ```
 inputRenderer={
-  (parentProps, parentState, parentMethods) => <component/>
+  ({ props, state, methods }) => <component/>
 }
 ```

docs/src/pages/demos/item-renderer.md

@@ -14,6 +14,6 @@ Override default list item component in a dropdown
 
 ```
 itemRenderer={
-  (item, itemIndex, innerProps, innerState, innerMethods) => <component/>
+  ({ item, itemIndex, props, state, methods }) => <component/>
 }
 ```

docs/src/pages/demos/loading-renderer.md

@@ -14,6 +14,6 @@ Override default loading indicator
 
 ```
 loadingRenderer={
-  (innerProps) => <component/>
+  ({ props }) => <component/>
 }
 ```

docs/src/pages/demos/no-data-renderer.md

@@ -14,6 +14,6 @@ Override default "no data" content
 
 ```
 noDataRenderer={
-  (innerProps, innerState, innerMethods) => <component/>
+  ({ props, state, methods }) => <component/>
 }
 ```

docs/src/pages/demos/option-renderer.md

@@ -14,6 +14,6 @@ Override default "option" component (the pillow with label and ×) in the c
 
 ```
 optionRenderer={
-  (innerItem, innerProps, innerState, innerMethods) => <component/>
+  ({ item, props, state, methods }) => <component/>
 }
 ```

docs/src/pages/demos/separator-renderer.md

@@ -14,6 +14,6 @@ Override default separator
 
 ```
 separatorRenderer={
-  (parentProps, parentState, parentMethods) => <component/>
+  ({ props, state, methods }) => <component/>
 }
 ```

src/components/Clear.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const Clear = ({ props, state, methods }) =>
   props.clearRenderer ? (
-    props.clearRenderer(props, state, methods)
+    props.clearRenderer({ props, state, methods })
   ) : (
     <ClearComponent
       className="react-dropdown-select-clear"

src/components/Content.js

@@ -12,29 +12,23 @@ const Content = ({ props, state, methods }) => {
       }`}
       onClick={() => methods.dropDown('open')}>
       {props.contentRenderer ? (
-        props.contentRenderer(props, state, methods)
+        props.contentRenderer({ props, state, methods })
       ) : (
         <React.Fragment>
           {props.multi
             ? state.values &&
               state.values.map((item) => (
                 <Option
                   key={`${item[props.valueField]}${item[props.labelField]}`}
-                  parentItem={item}
+                  item={item}
                   state={state}
                   props={props}
                   methods={methods}
                 />
               ))
             : state.values &&
-              state.values.length > 0 && (
-                <span>{state.values[0][props.labelField]}</span>
-              )}
-          <Input
-            props={props}
-            methods={methods}
-            state={state}
-          />
+              state.values.length > 0 && <span>{state.values[0][props.labelField]}</span>}
+          <Input props={props} methods={methods} state={state} />
         </React.Fragment>
       )}
     </ContentComponent>

src/components/Dropdown.js

@@ -37,7 +37,7 @@ const Dropdown = ({ props, state, methods }) => (
       methods
     )}`}>
     {props.dropdownRenderer ? (
-      props.dropdownRenderer(props, state, methods)
+      props.dropdownRenderer({ props, state, methods })
     ) : (
       <React.Fragment>
         {props.create && state.search && !valueExistInSelected(state.search, state.values) && (

src/components/DropdownHandle.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const DropdownHandle = ({ props, state, methods }) =>
   props.dropdownHandleRenderer ? (
-    props.dropdownHandleRenderer(props, state, methods)
+    props.dropdownHandleRenderer({ props, state, methods })
   ) : (
     <DropdownHandleComponent
       tabIndex="-1"

src/components/Input.js

@@ -31,7 +31,7 @@ const Input = ({ props, state, methods }) => {
     methods.createNew(state.search);
 
   return props.inputRenderer ? (
-    props.inputRenderer(props, state, methods)
+    props.inputRenderer({ props, state, methods })
   ) : (
     <InputComponent
       tabIndex="-1"

src/components/Item.js

@@ -4,7 +4,7 @@ import { hexToRGBA } from '../util';
 
 const Item = ({ props, state, methods, item, itemIndex }) => {
   if (props.itemRenderer) {
-    return props.itemRenderer(item, itemIndex, props, state, methods);
+    return props.itemRenderer({ item, itemIndex, props, state, methods });
   }
 
   if (!props.keepSelectedInList && methods.isSelected(item)) {
@@ -22,7 +22,9 @@ const Item = ({ props, state, methods, item, itemIndex }) => {
       tabIndex="-1"
       className={`react-dropdown-select-item ${
         methods.isSelected(item) ? 'react-dropdown-select-item-selected' : ''
-      } ${state.cursor === itemIndex ? 'react-dropdown-select-item-active' : ''} ${item.disabled ? 'react-dropdown-select-item-disabled' : ''}`}
+      } ${state.cursor === itemIndex ? 'react-dropdown-select-item-active' : ''} ${
+        item.disabled ? 'react-dropdown-select-item-disabled' : ''
+      }`}
       onClick={item.disabled ? undefined : () => methods.addItem(item)}
       onKeyPress={item.disabled ? undefined : () => methods.addItem(item)}
       color={props.color}>

src/components/Loading.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const Loading = ({ props }) =>
   props.loadingRenderer ? (
-    props.loadingRenderer()
+    props.loadingRenderer({ props })
   ) : (
     <LoadingComponent className="react-dropdown-select-loading" color={props.color} />
   );

src/components/NoData.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const NoData = ({ props, state, methods }) =>
   props.noDataRenderer ? (
-    props.noDataRenderer(props, state, methods)
+    props.noDataRenderer({ props, state, methods })
   ) : (
     <NoDataComponent color={props.color}>{props.noDataLabel}</NoDataComponent>
   );

src/components/Option.js

@@ -1,21 +1,19 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-const Option = ({ parentItem, props, state, methods }) =>
-  parentItem && props.optionRenderer ? (
-    props.optionRenderer(parentItem, props, state, methods)
+const Option = ({ item, props, state, methods }) =>
+  item && props.optionRenderer ? (
+    props.optionRenderer({ item, props, state, methods })
   ) : (
     <OptionComponent
       role="listitem"
       disabled={props.disabled}
       className="react-dropdown-select-option"
       color={props.color}>
-      <span className="react-dropdown-select-option-label">
-        {parentItem[props.labelField]}
-      </span>
+      <span className="react-dropdown-select-option-label">{item[props.labelField]}</span>
       <span
         className="react-dropdown-select-option-remove"
-        onClick={(event) => methods.removeItem(event, parentItem, props.closeOnSelect)}>
+        onClick={(event) => methods.removeItem(event, item, props.closeOnSelect)}>
         &times;
       </span>
     </OptionComponent>

src/components/Separator.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const Separator = ({ props, state, methods }) =>
   props.separatorRenderer ? (
-    props.separatorRenderer(props, state, methods)
+    props.separatorRenderer({ props, state, methods })
   ) : (
     <SeparatorComponent className="react-dropdown-select-separator" />
   );