Merge branch 'master' into custom-file-input

reactstrap · Jul 18, 2019 · 9224ffa · 9224ffa
2 parents 168b758 + b4edeb8
commit 9224ffa
Show file tree

Hide file tree

Showing 18 changed files with 671 additions and 417 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+tidelift: npm/reactstrap
+custom: https://www.paypal.me/evansharp
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+<a name="8.0.1"></a>
+## [8.0.1](https://github.com/reactstrap/reactstrap/compare/8.0.0...8.0.1) (2019-07-10)
+
+
+### Bug Fixes
+
+* **DropdownMenu:** Allow positionFixed prop to be passed through ([#1538](https://github.com/reactstrap/reactstrap/issues/1538)) ([01466ae](https://github.com/reactstrap/reactstrap/commit/01466ae)), closes [#1473](https://github.com/reactstrap/reactstrap/issues/1473)
+* **FormGroup:** allow disable when tag is fieldset ([#1547](https://github.com/reactstrap/reactstrap/issues/1547)) ([0736f80](https://github.com/reactstrap/reactstrap/commit/0736f80)), closes [#1546](https://github.com/reactstrap/reactstrap/issues/1546)
+* **Modal:** handle init modal in SSR ([#1495](https://github.com/reactstrap/reactstrap/issues/1495)) ([c844ab1](https://github.com/reactstrap/reactstrap/commit/c844ab1))
+* **Modal:** update condition to call `setFocus` in case open mo… ([#1514](https://github.com/reactstrap/reactstrap/issues/1514)) ([ae6fe93](https://github.com/reactstrap/reactstrap/commit/ae6fe93))
+* **Tooltip:** clear timeouts on unmount ([#1562](https://github.com/reactstrap/reactstrap/issues/1562)) ([e85238b](https://github.com/reactstrap/reactstrap/commit/e85238b)), closes [#1255](https://github.com/reactstrap/reactstrap/issues/1255)
+
+
+
 <a name="8.0.0"></a>
 # [8.0.0](https://github.com/reactstrap/reactstrap/compare/7.1.0...8.0.0) (2019-04-03)
 

diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -94,7 +94,9 @@ DropdownMenu.propTypes = {
   cssModule: PropTypes.object,
   // Custom modifiers that are passed to DropdownMenu.js, see https://popper.js.org/popper-documentation.html#modifiers
   modifiers: PropTypes.object,
-  persist: PropTypes.bool // presist the popper, even when closed. See #779 for reasoning
+  persist: PropTypes.bool, // presist the popper, even when closed. See #779 for reasoning
+  // passed to popper, see https://popper.js.org/popper-documentation.html#Popper.Defaults.positionFixed
+  positionFixed: PropTypes.bool
 };
 
 DropdownItem.propTypes = {
@@ -323,7 +325,7 @@ DropdownItem.propTypes = {
                           styles: {
                             ...data.styles,
                             overflow: 'auto',
-                            maxHeight: 100,
+                            maxHeight: '100px',
                           },
                         };
                       },

diff --git a/docs/lib/Home/index.js b/docs/lib/Home/index.js
@@ -48,14 +48,12 @@ export default () => {
               </PrismCode>
             </pre>
             <h3 className="mt-5">Getting Started with Create React App</h3>
-            <p>Follow the <a href="https://github.com/facebookincubator/create-react-app#getting-started" target="_blank">create-react-app instructions</a> up to the <code>Adding Bootstrap</code> section and instead follow the reactstrap version of adding bootstrap.</p>
+            <p>Follow the <a href="https://facebook.github.io/create-react-app/docs/getting-started" target="_blank">Create React App instructions</a> and then follow the <a href="https://facebook.github.io/create-react-app/docs/adding-bootstrap" target="_blank">Adding Bootstrap instructions</a>.</p>
             <h4>tl;dr</h4>
             <pre>
               <PrismCode className="language-bash">
-{`npm install -g create-react-app
-
-create-react-app my-app
-cd my-app/
+{`npx create-react-app my-app
+cd my-app
 npm start`}
               </PrismCode>
             </pre>
@@ -66,7 +64,7 @@ npm start`}
             <p>Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:</p>
             <pre>
               <PrismCode className="language-bash">
-  {`npm install bootstrap --save
+  {`npm install --save bootstrap
 npm install --save reactstrap react react-dom`}
               </PrismCode>
             </pre>

diff --git a/docs/lib/UI/Content.js b/docs/lib/UI/Content.js
@@ -17,7 +17,7 @@ function Content({ items, children, title }) {
           <div className="docs-sidebar mb-3">
             <h1 className="h5">{title}</h1>
             <Nav className="flex-column">
-              {items.map(item => (
+              {items.sort((a, b) => a.name.localeCompare(b.name)).map(item => (
                 <NavItem key={item.to}>
                   <NavLink tag={Link} to={item.to} activeClassName="active">
                     {item.name}

diff --git a/docs/lib/examples/InputGroupOverview.js b/docs/lib/examples/InputGroupOverview.js
@@ -20,7 +20,9 @@ const Example = (props) => {
       <br />
       <InputGroup>
         <Input placeholder="username" />
-        <InputGroupAddon addonType="append">@example.com</InputGroupAddon>
+        <InputGroupAddon addonType="append">
+          <InputGroupText>@example.com</InputGroupText>
+        </InputGroupAddon>
       </InputGroup>
       <br />
       <InputGroup>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactstrap",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "React Bootstrap 4 components",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",
@@ -125,7 +125,7 @@
     "babel-loader": "^8.0.4",
     "bootstrap": "^4.1.3",
     "clean-webpack-plugin": "^1.0.0",
-    "conventional-changelog-cli": "^1.3.22",
+    "conventional-changelog-cli": "^2.0.21",
     "conventional-recommended-bump": "^0.3.0",
     "copy-webpack-plugin": "^4.6.0",
     "coveralls": "^2.11.12",

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -52,10 +52,11 @@ class Dropdown extends React.Component {
 
   getContextValue() {
     return {
-      toggle: this.props.toggle,
+      toggle: this.toggle,
       isOpen: this.props.isOpen,
       direction: (this.props.direction === 'down' && this.props.dropup) ? 'up' : this.props.direction,
       inNavbar: this.props.inNavbar,
+      disabled: this.props.disabled
     };
   }
 

diff --git a/src/DropdownContext.js b/src/DropdownContext.js
@@ -7,6 +7,7 @@ import React from 'react';
  *  isOpen: PropTypes.bool.isRequired,
  *  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired,
  *  inNavbar: PropTypes.bool.isRequired,
+ *  disabled: PropTypes.bool
  * }
  */
 export const DropdownContext = React.createContext({});
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
@@ -14,6 +14,7 @@ const propTypes = {
   className: PropTypes.string,
   cssModule: PropTypes.object,
   persist: PropTypes.bool,
+  positionFixed: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -33,7 +34,7 @@ const directionPositionMap = {
 class DropdownMenu extends React.Component { 
 
   render() {
-    const { className, cssModule, right, tag, flip, modifiers, persist, ...attrs } = this.props;
+    const { className, cssModule, right, tag, flip, modifiers, persist, positionFixed, ...attrs } = this.props;
     const classes = mapToCssModules(classNames(
       className,
       'dropdown-menu',
@@ -54,11 +55,13 @@ class DropdownMenu extends React.Component {
         ...modifiers,
         ...noFlipModifier,
       } : modifiers;
+      const popperPositionFixed = !!positionFixed;
 
       return (
         <Popper
           placement={poperPlacement}
           modifiers={poperModifiers}
+          positionFixed={popperPositionFixed}
         >
           {({ ref, style, placement }) => (
             <Tag

diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
@@ -33,7 +33,7 @@ class DropdownToggle extends React.Component {
   }
 
   onClick(e) {
-    if (this.props.disabled) {
+    if (this.props.disabled || this.context.disabled) {
       e.preventDefault();
       return;
     }

diff --git a/src/FormGroup.js b/src/FormGroup.js
@@ -37,6 +37,10 @@ const FormGroup = (props) => {
     check && inline ? 'form-check-inline' : false,
     check && disabled ? 'disabled' : false
   ), cssModule);
+
+  if (Tag === 'fieldset') {
+    attributes.disabled = disabled;
+  }
 
   return (
     <Tag {...attributes} className={classes} />

diff --git a/src/Modal.js b/src/Modal.js
@@ -100,21 +100,23 @@ class Modal extends React.Component {
     this.manageFocusAfterClose = this.manageFocusAfterClose.bind(this);
 
     this.state = {
-      isOpen: props.isOpen,
+      isOpen: false,
     };
-
-    if (props.isOpen) {
-      this.init();
-    }
   }
 
   componentDidMount() {
-    if (this.props.onEnter) {
-      this.props.onEnter();
+    const { isOpen, autoFocus, onEnter } = this.props;
+
+    if (isOpen) {
+      this.init();
+      this.setState({ isOpen: true })
+      if (autoFocus) {
+        this.setFocus();
+      }
     }
 
-    if (this.state.isOpen && this.props.autoFocus) {
-      this.setFocus();
+    if (onEnter) {
+      onEnter();
     }
 
     this._isMounted = true;
@@ -341,7 +343,6 @@ class Modal extends React.Component {
     } = this.props;
 
     if (!!this._element && (this.state.isOpen || !unmountOnClose)) {
-
       const isModalHidden = !!this._element && !this.state.isOpen && !unmountOnClose;
       this._element.style.display = isModalHidden ? 'none' : 'block';
 
@@ -415,7 +416,6 @@ class Modal extends React.Component {
         </Portal>
       );
     }
-
     return null;
   }
 }

diff --git a/src/TooltipPopoverWrapper.js b/src/TooltipPopoverWrapper.js
@@ -82,14 +82,19 @@ class TooltipPopoverWrapper extends React.Component {
     this.getRef = this.getRef.bind(this);
     this.onClosed = this.onClosed.bind(this);
     this.state = { isOpen: props.isOpen };
+    this._isMounted = false;
   }
 
   componentDidMount() {
+    this._isMounted = true;
     this.updateTarget();
   }
 
   componentWillUnmount() {
+    this._isMounted = false;
     this.removeTargetEvents();
+    this.clearShowTimeout();
+    this.clearHideTimeout();
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -279,7 +284,7 @@ class TooltipPopoverWrapper extends React.Component {
   }
 
   toggle(e) {
-    if (this.props.disabled) {
+    if (this.props.disabled || !this._isMounted) {
       return e && e.preventDefault();
     }
 

diff --git a/src/__tests__/Dropdown.spec.js b/src/__tests__/Dropdown.spec.js
@@ -735,7 +735,7 @@ describe('Dropdown', () => {
 
       wrapper.find('#first').hostNodes().simulate('keydown', { which: keyCodes.space });
 
-      expect(Dropdown.prototype.toggle.mock.calls.length).toBe(0);
+      expect(Dropdown.prototype.toggle.mock.calls.length).toBe(1);
       expect(click.mock.calls.length).toBe(1);
 
       wrapper.detach();
@@ -761,7 +761,7 @@ describe('Dropdown', () => {
 
       wrapper.find('#first').hostNodes().simulate('keydown', { which: keyCodes.space });
 
-      expect(Dropdown.prototype.toggle.mock.calls.length).toBe(0);
+      expect(Dropdown.prototype.toggle.mock.calls.length).toBe(1);
       expect(click.mock.calls.length).toBe(1);
 
       wrapper.detach();

diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js
@@ -160,6 +160,17 @@ describe('DropdownMenu', () => {
     expect(wrapper.find(Popper).prop('modifiers')).toEqual({ flip: { enabled: false } });
   });
 
+  it('should position using fixed mode when positionFixed is true', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
+        <DropdownMenu positionFixed>Ello world</DropdownMenu>
+      </DropdownContext.Provider>
+    );
+
+    expect(wrapper.find(Popper).prop('positionFixed')).toBe(true);
+  });
+
   it('should not render multiple children when isOpen is false', () => {
     const wrapper = mount(
       <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>