Merge pull request #77 from PLoecker/feature/add_value_to_SelectItem

Feature/add a value-prop to select item

Author: michael-braun

examples/react-chayns-selectlist/Example.jsx

@@ -40,8 +40,8 @@ export default class Example extends React.Component {
                     selectFirst
                     // value={this.state.selectedId}
                     className="hello world"
-                    onChange={(value) => {
-                        console.log('change selectlist', value);
+                    onChange={(id, value) => {
+                        console.log('change selectlist', { id, value });
                     }}
                 >
                     {
@@ -57,8 +57,9 @@ export default class Example extends React.Component {
                                     name="Hi"
                                     id={index}
                                     key={index}
-                                    {...others}
+                                    value={{ doubleIndex: index * 2 }}
                                     className="Hi"
+                                    {...others}
                                 >
                                     {element}
                                 </SelectListItem>

src/react-chayns-selectlist/README.md

@@ -48,11 +48,12 @@ You can set the following props on a SelectList element:
 ### Props (SelectItem) ###
 You can set the following props on a SelectList element:
 
-| Property  | Description                                                                                         | Type        | Default    |
-|-----------|-----------------------------------------------------------------------------------------------------|-------------|------------|
-| id        | The id of the item, will be send to onChange-callback and used in defaultId prop of the SelectList  | string, int | *required* |
-| name      | Sets the id of an element that should be preselected                                                | string      | *required* |
-| className | Sets the css-class of the parent element above the radiobutton                                      | boolean     |  false     |
+| Property  | Description                                                                                         | Type            | Default    |
+|-----------|-----------------------------------------------------------------------------------------------------|-----------------|------------|
+| id        | The id of the item, will be send to onChange-callback and used in defaultId prop of the SelectList  | string, int     | *required* |
+| name      | Sets the id of an element that should be preselected                                                | string          | *required* |
+| className | Sets the css-class of the parent element above the radiobutton                                      | boolean         | false      |
+| value     | Additional information of the item.                                                                 | object, array   | null       |
 
 ### Beispiele ###
 #### defaultValue ####

src/react-chayns-selectlist/component/SelectItem.jsx

@@ -15,6 +15,10 @@ export default class SelectItem extends React.Component {
             PropTypes.node,
             PropTypes.arrayOf(PropTypes.node),
         ]),
+        value: PropTypes.oneOfType([ // eslint-disable-line react/no-unused-prop-types
+            PropTypes.object,
+            PropTypes.array,
+        ]),
         disabled: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
         className: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
         children: PropTypes.node,
@@ -23,6 +27,7 @@ export default class SelectItem extends React.Component {
     static defaultProps = {
         id: null,
         name: null,
+        value: null,
         disabled: null,
         className: null,
         children: null,

src/react-chayns-selectlist/component/SelectList.jsx

@@ -85,13 +85,13 @@ export default class SelectList extends React.Component {
         });
     }
 
-    _changeActiveItem = (id) => {
+    _changeActiveItem = (id, value) => {
         if(id === this.state.selectedId) return;
 
         if(this.changing) return;
 
         if(this.props.onChange) {
-            this.props.onChange(id);
+            this.props.onChange(id, value);
         }
 
         if(this.props.value) {
@@ -114,7 +114,7 @@ export default class SelectList extends React.Component {
             const { props } = children[i];
 
             if(!props.disabled) {
-                this._changeActiveItem(props.id);
+                this._changeActiveItem(props.id, props.value);
                 return;
             }
         }
@@ -130,6 +130,7 @@ export default class SelectList extends React.Component {
                 disabled,
                 className,
                 name,
+                value,
             } = child.props;
 
             return (
@@ -142,6 +143,7 @@ export default class SelectList extends React.Component {
                     key={id}
                     name={name}
                     className={className}
+                    value={value}
                 >
 
                     {child}

src/react-chayns-selectlist/component/internal/SelectItemInternal.jsx

@@ -14,7 +14,11 @@ export default class SelectItemInternal extends React.Component {
         checked: PropTypes.bool,
         disabled: PropTypes.bool,
         children: PropTypes.node,
-        name: PropTypes.string
+        name: PropTypes.string,
+        value: PropTypes.oneOfType([
+            PropTypes.object,
+            PropTypes.array,
+        ]),
     };
 
     static defaultProps = {
@@ -23,7 +27,8 @@ export default class SelectItemInternal extends React.Component {
         checked: false,
         disabled: false,
         children: null,
-        name: ''
+        name: '',
+        value: null,
     };
 
     constructor(props) {
@@ -47,9 +52,8 @@ export default class SelectItemInternal extends React.Component {
     }
 
     _handleChange = () => {
-        const { onChange, id } = this.props;
-
-        onChange(id);
+        const { onChange, id, value } = this.props;
+        onChange(id, value);
     };
 
     render() {