feat(Uncontrolled): add uncontrolled components (#307)

TheSharpieOne · eddywashere · commit 2f648c177353 · 2017-01-28T14:39:18.000-08:00
- UncontrolledAlert
- UncontrolledButtonDropdown
- UncontrolledDropdown
- UncontrolledNavDropdown
- UncontrolledTooltip
diff --git a/docs/lib/Components/AlertsPage.js b/docs/lib/Components/AlertsPage.js
@@ -10,6 +10,9 @@ const AlertExampleSource = require('!!raw!../examples/Alert');
 import AlertDismissExample from '../examples/AlertDismiss';
 const AlertDismissExampleSource = require('!!raw!../examples/AlertDismiss');
 
+import AlertUncontrolledDismissExample from '../examples/AlertUncontrolledDismiss';
+const AlertUncontrolledDismissExampleSource = require('!!raw!../examples/AlertUncontrolledDismiss');
+
 export default class AlertsPage extends React.Component {
   render() {
     return (
@@ -53,6 +56,19 @@ export default class AlertsPage extends React.Component {
             {AlertDismissExampleSource}
           </PrismCode>
         </pre>
+
+        <h3>Uncontrolled [disable] Alerts</h3>
+        <p>
+          For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledAlert</code> does not require <code>isOpen</code> nor <code>toggle</code> props to work.
+        </p>
+        <div className="docs-example">
+          <AlertUncontrolledDismissExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {AlertUncontrolledDismissExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -11,9 +11,11 @@ import {
 import DropdownExample from '../examples/Dropdown';
 import DropdownSizingExample from '../examples/DropdownSizing';
 import CustomDropdownExample from '../examples/CustomDropdown';
+import DropdownUncontrolledExample from '../examples/DropdownUncontrolled';
 
 const DropdownExampleSource = require('!!raw!../examples/Dropdown');
 const CustomDropdownExampleSource = require('!!raw!../examples/CustomDropdown');
+const DropdownUncontrolledExampleSource = require('!!raw!../examples/DropdownUncontrolled');
 
 export default class DropdownPage extends React.Component {
   constructor(props) {
@@ -184,6 +186,19 @@ DropdownToggle.propTypes = {
             {CustomDropdownExampleSource}
           </PrismCode>
         </pre>
+
+        <h3>Uncontrolled Dropdown</h3>
+        <p>
+          For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledDropdown</code> does not require <code>isOpen</code> nor <code>toggle</code> props to work. For the other Dropdown flavors, <code>ButtonDropdown</code>, <code>NavDropdown</code>, uncontrolled components have been made as well; <code>UncontrolledButtonDropdown</code>, <code>UncontrolledNavDropdown</code> respectfully.
+        </p>
+        <div className="docs-example">
+          <DropdownUncontrolledExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {DropdownUncontrolledExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js
@@ -8,6 +8,8 @@ import TooltipAutoHideExample from '../examples/TooltipAutoHide';
 const TooltipExampleAutoHideSource = require('!!raw!../examples/TooltipAutoHide');
 import TooltipExampleMulti from '../examples/TooltipMulti';
 const TooltipExampleMultiSource = require('!!raw!../examples/TooltipMulti');
+import TooltipExampleUncontrolled from '../examples/TooltipUncontrolled';
+const TooltipExampleUncontrolledSource = require('!!raw!../examples/TooltipUncontrolled');
 
 export default class TooltipsPage extends React.Component {
   render() {
@@ -86,6 +88,18 @@ export default class TooltipsPage extends React.Component {
             {TooltipExampleMultiSource}
           </PrismCode>
         </pre>
+        <h3>Uncontrolled Tooltip</h3>
+        <p>
+          For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledTooltip</code> does not require <code>isOpen</code> nor <code>toggle</code> props to work.
+        </p>
+        <div className="docs-example">
+          <TooltipExampleUncontrolled />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {TooltipExampleUncontrolledSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/examples/AlertUncontrolledDismiss.js b/docs/lib/examples/AlertUncontrolledDismiss.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { UncontrolledAlert } from 'reactstrap';
+
+function AlertExample() {
+  return (
+    <UncontrolledAlert color="info">
+      I am an alert and I can be dismissed!
+    </UncontrolledAlert>
+  );
+}
+
+export default AlertExample;
diff --git a/docs/lib/examples/DropdownUncontrolled.js b/docs/lib/examples/DropdownUncontrolled.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+export default function Example () {
+  return (
+    <UncontrolledDropdown>
+      <DropdownToggle caret>
+        Dropdown
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem header>Header</DropdownItem>
+        <DropdownItem disabled>Action</DropdownItem>
+        <DropdownItem>Another Action</DropdownItem>
+        <DropdownItem divider />
+        <DropdownItem>Another Action</DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+}
diff --git a/docs/lib/examples/TooltipUncontrolled.js b/docs/lib/examples/TooltipUncontrolled.js
@@ -0,0 +1,14 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+
+export default function Example() {
+  return (
+    <div>
+      <p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>
+      <UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
+        Hello world!
+      </UncontrolledTooltip>
+    </div>
+  );
+}
diff --git a/src/Uncontrolled.js b/src/Uncontrolled.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import Alert from './Alert';
+import ButtonDropdown from './ButtonDropdown';
+import Dropdown from './Dropdown';
+import NavDropdown from './NavDropdown';
+import Tooltip from './Tooltip';
+
+const components = {
+  UncontrolledAlert: Alert,
+  UncontrolledButtonDropdown: ButtonDropdown,
+  UncontrolledDropdown: Dropdown,
+  UncontrolledNavDropdown: NavDropdown,
+  UncontrolledTooltip: Tooltip,
+};
+
+Object.keys(components).forEach(key => {
+  const Tag = components[key];
+  const defaultValue = Tag === Alert;
+
+  class Uncontrolled extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = { isOpen: defaultValue };
+
+      this.toggle = this.toggle.bind(this);
+    }
+
+    toggle() {
+      this.setState({ isOpen: !this.state.isOpen });
+    }
+
+    render() {
+      return <Tag isOpen={this.state.isOpen} toggle={this.toggle} {...this.props} />;
+    }
+  }
+
+  Uncontrolled.displayName = key;
+
+  components[key] = Uncontrolled;
+});
+
+const UncontrolledAlert = components.UncontrolledAlert;
+const UncontrolledButtonDropdown = components.UncontrolledButtonDropdown;
+const UncontrolledDropdown = components.UncontrolledDropdown;
+const UncontrolledNavDropdown = components.UncontrolledNavDropdown;
+const UncontrolledTooltip = components.UncontrolledTooltip;
+
+export {
+  UncontrolledAlert,
+  UncontrolledButtonDropdown,
+  UncontrolledDropdown,
+  UncontrolledNavDropdown,
+  UncontrolledTooltip,
+};
diff --git a/src/__tests__/Uncontrolled.spec.js b/src/__tests__/Uncontrolled.spec.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Alert from '../Alert';
+import ButtonDropdown from '../ButtonDropdown';
+import Dropdown from '../Dropdown';
+import NavDropdown from '../NavDropdown';
+import Tooltip from '../Tooltip';
+import {
+  UncontrolledAlert,
+  UncontrolledButtonDropdown,
+  UncontrolledDropdown,
+  UncontrolledNavDropdown,
+  UncontrolledTooltip,
+} from '../Uncontrolled';
+
+describe('UncontrolledAlert', () => {
+  it('should be an Alert', () => {
+    const alert = shallow(<UncontrolledAlert>Yo!</UncontrolledAlert>);
+    expect(alert.type()).toBe(Alert);
+  });
+
+  it('should have isOpen default to true', () => {
+    const alert = shallow(<UncontrolledAlert>Yo!</UncontrolledAlert>);
+    expect(alert.prop('isOpen')).toBe(true);
+  });
+
+  it('should have toggle function', () => {
+    const alert = shallow(<UncontrolledAlert>Yo!</UncontrolledAlert>);
+    expect(alert.prop('toggle')).toEqual(jasmine.any(Function));
+  });
+
+  it('should toggle isOpen when toggle is called', () => {
+    const alert = shallow(<UncontrolledAlert>Yo!</UncontrolledAlert>);
+    const instance = alert.instance();
+    instance.toggle();
+    expect(alert.prop('isOpen')).toBe(false);
+  });
+});
+
+describe('UncontrolledButtonDropdown', () => {
+  it('should be an ButtonDropdown', () => {
+    const buttonDropdown = shallow(<UncontrolledButtonDropdown>Yo!</UncontrolledButtonDropdown>);
+    expect(buttonDropdown.type()).toBe(ButtonDropdown);
+  });
+
+  it('should have isOpen default to false', () => {
+    const buttonDropdown = shallow(<UncontrolledButtonDropdown>Yo!</UncontrolledButtonDropdown>);
+    expect(buttonDropdown.prop('isOpen')).toBe(false);
+  });
+
+  it('should have toggle function', () => {
+    const buttonDropdown = shallow(<UncontrolledButtonDropdown>Yo!</UncontrolledButtonDropdown>);
+    expect(buttonDropdown.prop('toggle')).toEqual(jasmine.any(Function));
+  });
+
+  it('should toggle isOpen when toggle is called', () => {
+    const buttonDropdown = shallow(<UncontrolledButtonDropdown>Yo!</UncontrolledButtonDropdown>);
+    const instance = buttonDropdown.instance();
+    instance.toggle();
+    expect(buttonDropdown.prop('isOpen')).toBe(true);
+  });
+});
+
+describe('UncontrolledDropdown', () => {
+  it('should be an Dropdown', () => {
+    const dropdown = shallow(<UncontrolledDropdown>Yo!</UncontrolledDropdown>);
+    expect(dropdown.type()).toBe(Dropdown);
+  });
+
+  it('should have isOpen default to false', () => {
+    const dropdown = shallow(<UncontrolledDropdown>Yo!</UncontrolledDropdown>);
+    expect(dropdown.prop('isOpen')).toBe(false);
+  });
+
+  it('should have toggle function', () => {
+    const dropdown = shallow(<UncontrolledDropdown>Yo!</UncontrolledDropdown>);
+    expect(dropdown.prop('toggle')).toEqual(jasmine.any(Function));
+  });
+
+  it('should toggle isOpen when toggle is called', () => {
+    const dropdown = shallow(<UncontrolledDropdown>Yo!</UncontrolledDropdown>);
+    const instance = dropdown.instance();
+    instance.toggle();
+    expect(dropdown.prop('isOpen')).toBe(true);
+  });
+});
+
+describe('UncontrolledNavDropdown', () => {
+  it('should be an NavDropdown', () => {
+    const navDropdown = shallow(<UncontrolledNavDropdown>Yo!</UncontrolledNavDropdown>);
+    expect(navDropdown.type()).toBe(NavDropdown);
+  });
+
+  it('should have isOpen default to false', () => {
+    const navDropdown = shallow(<UncontrolledNavDropdown>Yo!</UncontrolledNavDropdown>);
+    expect(navDropdown.prop('isOpen')).toBe(false);
+  });
+
+  it('should have toggle function', () => {
+    const navDropdown = shallow(<UncontrolledNavDropdown>Yo!</UncontrolledNavDropdown>);
+    expect(navDropdown.prop('toggle')).toEqual(jasmine.any(Function));
+  });
+
+  it('should toggle isOpen when toggle is called', () => {
+    const navDropdown = shallow(<UncontrolledNavDropdown>Yo!</UncontrolledNavDropdown>);
+    const instance = navDropdown.instance();
+    instance.toggle();
+    expect(navDropdown.prop('isOpen')).toBe(true);
+  });
+});
+
+describe('UncontrolledTooltip', () => {
+  it('should be an Tooltip', () => {
+    const tooltip = shallow(<UncontrolledTooltip target="blah">Yo!</UncontrolledTooltip>);
+    expect(tooltip.type()).toBe(Tooltip);
+  });
+
+  it('should have isOpen default to false', () => {
+    const tooltip = shallow(<UncontrolledTooltip target="blah">Yo!</UncontrolledTooltip>);
+    expect(tooltip.prop('isOpen')).toBe(false);
+  });
+
+  it('should have toggle function', () => {
+    const tooltip = shallow(<UncontrolledTooltip target="blah">Yo!</UncontrolledTooltip>);
+    expect(tooltip.prop('toggle')).toEqual(jasmine.any(Function));
+  });
+
+  it('should toggle isOpen when toggle is called', () => {
+    const tooltip = shallow(<UncontrolledTooltip target="blah">Yo!</UncontrolledTooltip>);
+    const instance = tooltip.instance();
+    instance.toggle();
+    expect(tooltip.prop('isOpen')).toBe(true);
+  });
+});
diff --git a/src/index.js b/src/index.js
@@ -66,6 +66,14 @@ import Collapse from './Collapse';
 import ListGroupItem from './ListGroupItem';
 import ListGroupItemHeading from './ListGroupItemHeading';
 import ListGroupItemText from './ListGroupItemText';
+import {
+  UncontrolledAlert,
+  UncontrolledButtonDropdown,
+  UncontrolledDropdown,
+  UncontrolledNavDropdown,
+  UncontrolledTooltip,
+  UncontrolledPopover,
+} from './Uncontrolled';
 
 export {
   Alert,
@@ -136,4 +144,10 @@ export {
   ListGroupItem,
   ListGroupItemText,
   ListGroupItemHeading,
+  UncontrolledAlert,
+  UncontrolledButtonDropdown,
+  UncontrolledDropdown,
+  UncontrolledNavDropdown,
+  UncontrolledTooltip,
+  UncontrolledPopover,
 };
