[changed] deprecate ModalTrigger

Author: jquense

docs/generate-metadata.js

@@ -26,7 +26,7 @@ let isLiteral = str => (/^('|")/).test(str.trim());
  * @param  {ComponentMetadata|PropMetadata} obj
  */
 function parseDoclets(obj){
-  obj.doclets = metadata.parseDoclets(obj.desc || '');
+  obj.doclets = metadata.parseDoclets(obj.desc || '') || {};
   obj.desc = cleanDoclets(obj.desc || '');
   obj.descHtml = marked(obj.desc || '');
 }

docs/src/PropTable.js

@@ -5,18 +5,46 @@ import Label from '../../src/Label';
 import Table from '../../src/Table';
 
 
-let cleanDocletValue = str => str.replace(/^\{|\}$/g, '');
+let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');
+
+function getPropsData(componentData, metadata){
+
+  let props = componentData.props || {};
+
+  if (componentData.composes) {
+    componentData.composes.forEach( other => {
+      props = merge({}, getPropsData(metadata[other] || {}, metadata), props);
+
+    });
+  }
+
+  if (componentData.mixins) {
+    componentData.mixins.forEach( other => {
+      if ( componentData.composes.indexOf(other) === -1) {
+        props = merge({}, getPropsData(metadata[other] || {}, metadata), props);
+      }
+    });
+  }
+
+  return props;
+}
 
 const PropTable = React.createClass({
 
   contextTypes: {
     metadata: React.PropTypes.object
   },
 
+  componentWillMount(){
+    let componentData = this.context.metadata[this.props.component] || {};
+
+    this.propsData = getPropsData(componentData, this.context.metadata);
+  },
+
   render(){
-    let metadata = this.context.metadata[this.props.component] || {};
+    let propsData = this.propsData;
 
-    if ( !Object.keys(metadata.props || {}).length){
+    if ( !Object.keys(propsData).length){
       return <span/>;
     }
 
@@ -31,46 +59,36 @@ const PropTable = React.createClass({
           </tr>
         </thead>
         <tbody>
-          { this._renderRows() }
+          { this._renderRows(propsData) }
         </tbody>
       </Table>
     );
   },
 
-  _renderRows(){
-    let metadata = this.context.metadata[this.props.component] || {};
-    let props = metadata.props || {};
+  _renderRows(propsData){
 
-    if (metadata.composes) {
-      metadata.composes.forEach( other => {
-        props = merge(props, (this.context.metadata[other] || {}).props);
-      });
-    }
-
-    if (metadata.mixins) {
-      metadata.mixins.forEach( other => {
-        if ( metadata.composes.indexOf(other) === -1) {
-          props = merge(props, (this.context.metadata[other] || {}).props);
-        }
-      });
-    }
-
-    return Object.keys(props)
+    return Object.keys(propsData)
       .sort()
-      .filter(propName => props[propName].type && !props[propName].doclets.private )
+      .filter(propName => propsData[propName].type && !propsData[propName].doclets.private )
       .map(propName => {
-        let prop = props[propName];
+        let propData = propsData[propName];
 
         return (
           <tr key={propName} className='prop-table-row'>
             <td>
-              {propName} {this.renderRequiredLabel(prop)}
+              {propName} {this.renderRequiredLabel(propData)}
             </td>
             <td>
-              <div>{this.getType(prop)}</div>
+              <div>{this.getType(propData)}</div>
+            </td>
+            <td>{propData.defaultValue}</td>
+
+            <td>
+              { propData.doclets.deprecated
+                && <div><strong className='text-danger'>{'Deprecated: ' + propData.doclets.deprecated + ' '}</strong></div>
+              }
+              <div dangerouslySetInnerHTML={{__html: propData.descHtml }} />
             </td>
-            <td>{prop.defaultValue}</td>
-            <td dangerouslySetInnerHTML={{__html: prop.descHtml }}></td>
           </tr>
         );
       });
@@ -87,17 +105,29 @@ const PropTable = React.createClass({
   },
 
   getType(prop) {
-    let type = prop.type;
+    let type = prop.type || {};
     let name = this.getDisplayTypeName(type.name);
     let doclets = prop.doclets || {};
 
     switch (name) {
       case 'object':
         return name;
       case 'union':
-        return type.value.map(val => this.getType({ type: val })).join(' | ');
+        return type.value.reduce((current, val, i, list) => {
+          let item = this.getType({ type: val });
+
+          if (React.isValidElement(item)) {
+            item = React.cloneElement(item, {key: i});
+          }
+
+          current = current.concat(item);
+
+          return i === (list.length - 1) ? current : current.concat(' | ');
+        }, []);
       case 'array':
-        return `array<${this.getDisplayTypeName(type.value.name)}>`;
+        let child = this.getType({ type: type.value });
+
+        return <span>{'array<'}{ child }{'>'}</span>;
       case 'enum':
         return this.renderEnum(type);
       case 'custom':

package.json

@@ -95,7 +95,7 @@
     "phantomjs": "^1.9.17",
     "portfinder": "^0.4.0",
     "react": "^0.13.1",
-    "react-component-metadata": "^1.1.1",
+    "react-component-metadata": "^1.2.1",
     "react-hot-loader": "^1.2.7",
     "react-router": "^0.13.1",
     "rimraf": "^2.3.2",

src/ModalTrigger.js

@@ -1,11 +1,20 @@
 import React, { cloneElement } from 'react';
-import OverlayMixin from './OverlayMixin';
+
+import deprecationWarning from './utils/deprecationWarning';
 
 import createChainedFunction from './utils/createChainedFunction';
 import createContextWrapper from './utils/createContextWrapper';
 
+function createHideDepreciationWrapper(hide){
+  return function(...args){
+    deprecationWarning(
+        'The Modal prop `onRequestHide`', 'the `onHide` prop');
+
+    return hide(...args);
+  };
+}
+
 const ModalTrigger = React.createClass({
-  mixins: [OverlayMixin],
 
   propTypes: {
     modal: React.PropTypes.node.isRequired,
@@ -39,15 +48,31 @@ const ModalTrigger = React.createClass({
     });
   },
 
-  renderOverlay() {
-    if (!this.state.isOverlayShown) {
-      return <span />;
-    }
+  componentDidMount(){
+    this._overlay = document.createElement('div');
+    React.render(this.getOverlay(), this._overlay);
+  },
+
+  componentWillUnmount() {
+    React.unmountComponentAtNode(this._overlay);
+    this._overlay = null;
+    clearTimeout(this._hoverDelay);
+  },
+
+  componentDidUpdate(){
+    React.render(this.getOverlay(), this._overlay);
+  },
+
+  getOverlay() {
+    let modal = this.props.modal;
 
     return cloneElement(
-      this.props.modal,
+      modal,
       {
-        onRequestHide: this.hide
+        show: this.state.isOverlayShown,
+        onHide: this.hide,
+        onRequestHide: createHideDepreciationWrapper(this.hide),
+        container: modal.props.container || this.props.container
       }
     );
   },
@@ -82,4 +107,19 @@ const ModalTrigger = React.createClass({
  */
 ModalTrigger.withContext = createContextWrapper(ModalTrigger, 'modal');
 
-export default ModalTrigger;
+let DepreciatedModalTrigger = React.createClass({
+  componentWillMount(){
+    deprecationWarning(
+        'The `ModalTrigger` component', 'the `Modal` component directly'
+      , 'http://react-bootstrap.github.io/components.html#modals');
+  },
+
+  render(){
+    return (<ModalTrigger {...this.props}/>);
+  }
+});
+
+DepreciatedModalTrigger.withContext = ModalTrigger.withContext;
+DepreciatedModalTrigger.ModalTrigger = ModalTrigger;
+
+export default DepreciatedModalTrigger;

src/index.js

@@ -39,6 +39,7 @@ import NavItem from './NavItem';
 import ModalTrigger from './ModalTrigger';
 import OverlayTrigger from './OverlayTrigger';
 import OverlayMixin from './OverlayMixin';
+import Overlay from './Overlay';
 import PageHeader from './PageHeader';
 import Pagination from './Pagination';
 import Panel from './Panel';
@@ -100,6 +101,7 @@ export default {
   Navbar,
   NavItem,
   ModalTrigger,
+  Overlay,
   OverlayTrigger,
   OverlayMixin,
   PageHeader,

test/ModalTriggerSpec.js

@@ -1,8 +1,27 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import ModalTrigger from '../src/ModalTrigger';
+import { shouldWarn } from './helpers';
+
 
 describe('ModalTrigger', function() {
+
+  afterEach(()=> {
+    if ( console.warn.called ) {
+      shouldWarn('The `ModalTrigger` component is deprecated');
+    }
+  });
+
+  it('Should warn about deprecated Component', function() {
+    ReactTestUtils.renderIntoDocument(
+      <ModalTrigger modal={<div>test</div>}>
+        <button>button</button>
+      </ModalTrigger>
+    );
+
+    shouldWarn('The `ModalTrigger` component is deprecated');
+  });
+
   it('Should create ModalTrigger element', function() {
     const instance = ReactTestUtils.renderIntoDocument(
       <ModalTrigger modal={<div>test</div>}>