fix(errors): fix few errors with ToggleOption

Author: Gitlab-CI

src/components/Toggle/ToggleOption.js

@@ -13,9 +13,9 @@ let intlShape;
 
 // this make react-intl optional to our component and our module
 try {
-  const reactIntl = require('react-intl'); // eslint-disable-line
-  injectIntl = reactIntl.injectIntl; // eslint-disable-line
-  intlShape = reactIntl.intlShape; // eslint-disable-line
+  const { injectIntl: injectIntlDefault, intlShape: intlShapeDefault } = require('react-intl'); // eslint-disable-line
+  injectIntl = injectIntlDefault; // eslint-disable-line
+  intlShape = intlShapeDefault; // eslint-disable-line
 } catch (er) {
   injectIntl = null;
   intlShape = null;
@@ -30,8 +30,9 @@ const ToggleOption = ({
   value,
   message,
   intl,
+  ...rest
 }) => (
-  <Tag value={value}>
+  <Tag value={value} {...rest}>
     {message && intl ? intl.formatMessage(message) : value}
   </Tag>
 );

src/components/Toggle/index.js

@@ -11,18 +11,30 @@ import Input from '@bootstrap-styled/v4/lib/Input';
 import ToggleOption from './ToggleOption';
 
 function Toggle(props) {
-  const { tag: Tag, optionTag: OptionTag, defaultLabel } = props;
-  let content = (<Option>{defaultLabel}</Option>);
-
+  const {
+    tag: Tag,
+    optionTag: OptionTag,
+    defaultLabel,
+    className,
+    onToggle,
+    value,
+    values,
+    messages,
+    ...rest
+  } = props;
   // If we have items, render them
-  if (props.values) {
-    content = props.values.map((value) => (
-      <OptionTag key={value} value={value} message={props.messages[value]} />
-    ));
-  }
-
+  const content = !values.length ? <Option>{defaultLabel}</Option> : values.map((v) => (
+    <OptionTag key={v} value={v} message={messages[v]} />
+  ));
   return (
-    <Tag type="select" name="select" value={props.value} onChange={props.onToggle} className={props.className}>
+    <Tag
+      type="select"
+      name="select"
+      value={value}
+      onChange={onToggle}
+      className={className}
+      {...rest}
+    >
       {content}
     </Tag>
   );
@@ -33,6 +45,9 @@ Toggle.defaultProps = {
   optionTag: ToggleOption,
   defaultLabel: '--',
   messages: {},
+  value: '',
+  values: [],
+  onToggle: () => {},
 };
 
 /* eslint-disable react/require-default-props */

src/components/Toggle/index.md

@@ -22,7 +22,7 @@ That will lock down the dependencies for the packages.
 
 That way npm install will look into npm-shrinkwrap.json before trying to install dependencies.
 
-You can read more about it here [https://docs.npmjs.com/cli/shrinkwrap][1]
+You can read more about it here https://docs.npmjs.com/cli/shrinkwrap
 
 
   [1]: https://docs.npmjs.com/cli/shrinkwrap

src/components/Toggle/tests/index.test.js

@@ -33,4 +33,8 @@ describe('<Toggle />', () => {
     expect(renderedComponent.contains(<Option>--</Option>)).toBe(true);
     expect(renderedComponent.find('Option').length).toBe(1);
   });
+  it('should have ToggleOptions if props.values is defined', () => {
+    const renderedComponent = shallow(<Toggle value="a" values={['a', 'b']} />);
+    expect(renderedComponent.find('InjectIntl(ToggleOption)').length).toBe(2);
+  });
 });