diff --git a/package.json b/package.json index 466fd08..3e37776 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "amazeui-react", "title": "Amaze UI React", - "version": "1.0.0-beta1", + "version": "1.0.0-beta2", "description": "Amaze UI components build with React.", "main": "lib/AMUIReact.js", "scripts": { @@ -73,11 +73,9 @@ "vinyl-source-stream": "^1.1.0", "watchify": "^3.2.1" }, - "peerDependencies": { - "react": "0.13.x" - }, "browserify-shim": { - "react": "global:React" + "react": "global:React", + "react-dom": "global:ReactDOM" }, "jest": { "rootDir": "./src", diff --git a/src/Accordion.js b/src/Accordion.js index 53655fc..211a9e2 100644 --- a/src/Accordion.js +++ b/src/Accordion.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var CollapseMixin = require('./mixins/CollapseMixin'); @@ -80,7 +81,7 @@ Accordion.Item = React.createClass({ }, getCollapsibleDimensionValue: function() { - return React.findDOMNode(this.refs.panel).scrollHeight; + return ReactDOM.findDOMNode(this.refs.panel).scrollHeight; }, getCollapsibleDOMNode: function() { @@ -88,7 +89,7 @@ Accordion.Item = React.createClass({ return null; } - return React.findDOMNode(this.refs.panel); + return ReactDOM.findDOMNode(this.refs.panel); }, render: function() { diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js index 47fd8f2..cc9f0f6 100644 --- a/src/CollapsibleNav.js +++ b/src/CollapsibleNav.js @@ -5,6 +5,7 @@ * */ var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var CollapseMixin = require('./mixins/CollapseMixin'); @@ -32,7 +33,7 @@ var CollapsibleNav = React.createClass({ for (var key in nodes) { if (nodes.hasOwnProperty(key)) { - var n = React.findDOMNode(nodes[key]); + var n = ReactDOM.findDOMNode(nodes[key]); var h = n.offsetHeight; var computedStyles = getComputedStyle(n, null); @@ -47,7 +48,7 @@ var CollapsibleNav = React.createClass({ }, getCollapsibleDOMNode: function() { - return React.findDOMNode(this); + return ReactDOM.findDOMNode(this); }, getChildActiveProp: function(child) { diff --git a/src/DateTimeInput.js b/src/DateTimeInput.js index 1c7f1ba..5338bec 100644 --- a/src/DateTimeInput.js +++ b/src/DateTimeInput.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var fecha = require('fecha'); var Events = require('./utils/Events'); var isNodeInTree = require('./utils/isNodeInTree'); @@ -28,7 +29,7 @@ var DateTimeInput = React.createClass({ }, handleOuterClick: function(event) { - var picker = React.findDOMNode(this.refs.DateTimePicker.getDOMNode()); + var picker = ReactDOM.findDOMNode(this.refs.DateTimePicker.getDOMNode()); if (!isNodeInTree(event.target, picker)) { this.handleClose(); diff --git a/src/Dropdown.js b/src/Dropdown.js index f30f3e7..e3ba497 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var constants = require('./constants'); @@ -44,6 +45,10 @@ var Dropdown = React.createClass({ this.unbindOuterHandlers(); }, + componentWillUnmount: function () { + this.unbindOuterHandlers(); + }, + setDropdownState: function(state, callback) { if (state) { this.bindOuterHandlers(); @@ -68,7 +73,7 @@ var Dropdown = React.createClass({ // close dropdown when click outer dropdown handleOuterClick: function(e) { - if (isNodeInTree(e.target, React.findDOMNode(this))) { + if (isNodeInTree(e.target, ReactDOM.findDOMNode(this))) { return false; } @@ -94,6 +99,8 @@ var Dropdown = React.createClass({ render: function() { var classSet = this.getClassSet(); var Component = this.props.navItem ? 'li' : 'div'; + var btnClassPrefix = this.props.navItem ? '' : 'btn'; + var btnComponentTag = this.props.navItem ? 'a' : null; var caret = (); @@ -115,6 +122,8 @@ var Dropdown = React.createClass({ style={this.props.btnInlineStyle} className={classNames(this.prefixClass('toggle'), this.props.toggleClassName)} + classPrefix={btnClassPrefix} + componentTag={btnComponentTag} ref="dropdownToggle"> {this.props.title} {' '} diff --git a/src/GoTop.js b/src/GoTop.js index 5a87b2c..e506697 100644 --- a/src/GoTop.js +++ b/src/GoTop.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var SmoothScrollMixin = require('./mixins/SmoothScrollMixin'); @@ -46,7 +47,7 @@ var GoTop = React.createClass({ checkPosition: function() { var action = (dom.scrollTop(window) > 50 ? 'add' : 'remove') + 'Class'; - CSSCore[action](React.findDOMNode(this), this.setClassNamespace('active')); + CSSCore[action](ReactDOM.findDOMNode(this), this.setClassNamespace('active')); }, isAutoHide: function() { diff --git a/src/Input.js b/src/Input.js index e6960b4..9775509 100644 --- a/src/Input.js +++ b/src/Input.js @@ -6,6 +6,7 @@ */ var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var FormGroup = require('./FormGroup'); @@ -48,7 +49,7 @@ var Input = React.createClass({ }, getFieldDOMNode: function() { - return React.findDOMNode(this.refs.field); + return ReactDOM.findDOMNode(this.refs.field); }, getValue: function() { diff --git a/src/Modal.js b/src/Modal.js index a0f1dab..3e9e9f4 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var DimmerMixin = require('./mixins/DimmerMixin'); @@ -85,7 +86,7 @@ var Modal = React.createClass({ // Get input data for prompt modal getPromptData: function() { var data = []; - var inputs = React.findDOMNode(this).querySelectorAll('input'); + var inputs = ReactDOM.findDOMNode(this).querySelectorAll('input'); if (inputs) { var i = 0; diff --git a/src/NProgress.js b/src/NProgress.js index ec40a9c..3fb6f1a 100644 --- a/src/NProgress.js +++ b/src/NProgress.js @@ -6,6 +6,7 @@ */ var React = require('react'); +var ReactDOM = require('react-dom'); var ClassNameMixin = require('./mixins/ClassNameMixin'); function clamp(n, min, max) { @@ -82,7 +83,7 @@ var NProgress = React.createClass({ }); if (n === 1) { - var progress = React.findDOMNode(this.refs.progress); + var progress = ReactDOM.findDOMNode(this.refs.progress); progress.style.opacity = 1; progress.style.transition = 'none'; diff --git a/src/Pagination.js b/src/Pagination.js index 35c763a..a0f55ea 100644 --- a/src/Pagination.js +++ b/src/Pagination.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); @@ -40,7 +41,7 @@ var Pagination = React.createClass({ handleChange: function(e) { if (this.props.onSelect) { - var select = React.findDOMNode(this.refs.select); + var select = ReactDOM.findDOMNode(this.refs.select); this.props.onSelect.call(this, select && select.value, e); } diff --git a/src/Panel.js b/src/Panel.js index 5fb612b..e3b9db4 100644 --- a/src/Panel.js +++ b/src/Panel.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var CollapseMixin = require('./mixins/CollapseMixin'); @@ -44,7 +45,7 @@ var Panel = React.createClass({ }, getCollapsibleDimensionValue: function() { - return React.findDOMNode(this.refs.panel).scrollHeight; + return ReactDOM.findDOMNode(this.refs.panel).scrollHeight; }, getCollapsibleDOMNode: function() { @@ -52,7 +53,7 @@ var Panel = React.createClass({ return null; } - return React.findDOMNode(this.refs.panel); + return ReactDOM.findDOMNode(this.refs.panel); }, renderHeader: function() { diff --git a/src/PopoverTrigger.js b/src/PopoverTrigger.js index c8fe7f4..05367e9 100644 --- a/src/PopoverTrigger.js +++ b/src/PopoverTrigger.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var cloneElement = React.cloneElement; var OverlayMixin = require('./mixins/OverlayMixin'); var assign = require('object-assign'); @@ -166,7 +167,7 @@ var PopoverTrigger = React.createClass({ }, getPosition: function() { - var node = React.findDOMNode(this); + var node = ReactDOM.findDOMNode(this); var container = this.getContainerDOMNode(); var offset = container.tagName === 'BODY' ? diff --git a/src/ScrollSpy.js b/src/ScrollSpy.js index 0c406da..d9cfa57 100644 --- a/src/ScrollSpy.js +++ b/src/ScrollSpy.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var cloneElement = React.cloneElement; var assign = require('object-assign'); var classNames = require('classnames'); @@ -58,7 +59,7 @@ var ScrollSpy = React.createClass({ } if (this.isMounted) { - var isInView = isInViewport(React.findDOMNode(this)); + var isInView = isInViewport(ReactDOM.findDOMNode(this)); if (isInView && !this.state.inViewport) { if (this._timer) { diff --git a/src/ScrollSpyNav.js b/src/ScrollSpyNav.js index 618b596..a7ded02 100644 --- a/src/ScrollSpyNav.js +++ b/src/ScrollSpyNav.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var cloneElement = React.cloneElement; var assign = require('object-assign'); var classNames = require('classnames'); @@ -47,7 +48,7 @@ var ScrollSpyNav = React.createClass({ }, _init: function() { - this._linkNodes = React.findDOMNode(this).querySelectorAll('a[href^="#"]'); + this._linkNodes = ReactDOM.findDOMNode(this).querySelectorAll('a[href^="#"]'); this._anchorNodes = []; Array.prototype.forEach.call(this._linkNodes, function(link) { @@ -88,7 +89,7 @@ var ScrollSpyNav = React.createClass({ CSSCore.removeClass(link, this.props.activeClass); }.bind(this)); - var targetLink = React.findDOMNode(this). + var targetLink = ReactDOM.findDOMNode(this). querySelector('a[href="#' + targetNode.id + '"]'); targetLink && CSSCore.addClass(targetLink, this.props.activeClass); diff --git a/src/Selected.js b/src/Selected.js index 30724b1..4bbb12f 100644 --- a/src/Selected.js +++ b/src/Selected.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var Dropdown = require('./Dropdown'); @@ -55,7 +56,7 @@ var Selected = React.createClass({ setDropdownWidth: function() { if (this.isMounted) { - var toggleButton = React.findDOMNode(this.refs.dropdown. + var toggleButton = ReactDOM.findDOMNode(this.refs.dropdown. refs.dropdownToggle); toggleButton && this.setState({dropdownWidth: toggleButton.offsetWidth}); @@ -105,7 +106,7 @@ var Selected = React.createClass({ e.preventDefault(); this.setState({ - filterText: React.findDOMNode(this.refs.filterInput).value + filterText: ReactDOM.findDOMNode(this.refs.filterInput).value }); }, @@ -115,7 +116,7 @@ var Selected = React.createClass({ this.setState({ filterText: null }); - React.findDOMNode(this.refs.filterInput).value = null; + ReactDOM.findDOMNode(this.refs.filterInput).value = null; } }, diff --git a/src/Slider.js b/src/Slider.js index 2fc0ce0..23ba069 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -1,11 +1,12 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); var TransitionEvents = require('./utils/TransitionEvents'); -React.initializeTouchEvents(true); +//React.initializeTouchEvents(true); var Slider = React.createClass({ mixins: [ClassNameMixin], @@ -342,7 +343,7 @@ Slider.Item = React.createClass({ componentDidUpdate: function(prevProps) { if (!this.props.active && prevProps.active) { - TransitionEvents.on(React.findDOMNode(this), this.handleAnimateOutEnd); + TransitionEvents.on(ReactDOM.findDOMNode(this), this.handleAnimateOutEnd); } if (this.props.active !== prevProps.active) { diff --git a/src/Sticky.js b/src/Sticky.js index 632a806..bab45fa 100644 --- a/src/Sticky.js +++ b/src/Sticky.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var assign = require('object-assign'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); @@ -44,7 +45,7 @@ var Sticky = React.createClass({ componentDidMount: function() { this._init(); this.checkPosition(); - var ownerWindow = domUtils.ownerWindow(React. + var ownerWindow = domUtils.ownerWindow(ReactDOM. findDOMNode(this.refs.sticker)); this._scrollListener = Events.on(ownerWindow, 'scroll', @@ -63,7 +64,7 @@ var Sticky = React.createClass({ return; } - var sticker = React.findDOMNode(this.refs.sticker); + var sticker = ReactDOM.findDOMNode(this.refs.sticker); var elStyle = getComputedStyle(sticker); var outerHeight = parseInt(elStyle.height, 10) + parseInt(elStyle.marginTop, 10) + parseInt(elStyle.marginBottom, 10); @@ -87,7 +88,7 @@ var Sticky = React.createClass({ var scrollTop = domUtils.scrollTop(window); var offsetTop = this.props.top; var offsetBottom = this.props.bottom; - var holder = React.findDOMNode(this); + var holder = ReactDOM.findDOMNode(this); if (typeof offsetBottom === 'function') { offsetBottom = offsetBottom(); diff --git a/src/Table.js b/src/Table.js index 1ad42de..c3ce2a6 100644 --- a/src/Table.js +++ b/src/Table.js @@ -4,7 +4,7 @@ var React = require('react'); var classNames = require('classnames'); var ClassNameMixin = require('./mixins/ClassNameMixin'); -var Button = React.createClass({ +var Table = React.createClass({ mixins: [ClassNameMixin], propTypes: { @@ -52,4 +52,4 @@ var Button = React.createClass({ } }); -module.exports = Button; +module.exports = Table; diff --git a/src/mixins/DimmerMixin.js b/src/mixins/DimmerMixin.js index bc0dcc6..b9e3770 100644 --- a/src/mixins/DimmerMixin.js +++ b/src/mixins/DimmerMixin.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var getScrollbarWidth = require('../utils/getScrollbarWidth'); var CSSCore = require('../utils/CSSCore'); @@ -8,7 +9,7 @@ var CSSCore = require('../utils/CSSCore'); module.exports = { setDimmerContainer: function() { var container = (this.props.container && - React.findDOMNode(this.props.container)) || document.body; + ReactDOM.findDOMNode(this.props.container)) || document.body; var bodyPaddingRight = parseInt((container.style.paddingRight || 0), 10); var barWidth = getScrollbarWidth(); @@ -21,7 +22,7 @@ module.exports = { resetDimmerContainer: function(nextProps, nextState) { var container = (this.props.container && - React.findDOMNode(this.props.container)) || document.body; + ReactDOM.findDOMNode(this.props.container)) || document.body; CSSCore.removeClass(container, this.setClassNamespace('dimmer-active')); diff --git a/src/mixins/OverlayMixin.js b/src/mixins/OverlayMixin.js index b1c4379..5f0096e 100644 --- a/src/mixins/OverlayMixin.js +++ b/src/mixins/OverlayMixin.js @@ -1,7 +1,7 @@ 'use strict'; var React = require('react'); - +var ReactDOM = require('react-dom'); /** * Overlay Mixin * @@ -46,7 +46,7 @@ module.exports = { var overlay = this.renderOverlay(); if (overlay !== null) { - this._overlayInstance = React.render(overlay, this._overlayWrapper); + this._overlayInstance = ReactDOM.render(overlay, this._overlayWrapper); } else { // Unmount if the component is null for transitions to null this._unmountOverlay(); @@ -55,7 +55,7 @@ module.exports = { // Remove a mounted Overlay from wrapper _unmountOverlay: function() { - React.unmountComponentAtNode(this._overlayWrapper); + ReactDOM.unmountComponentAtNode(this._overlayWrapper); this._overlayInstance = null; }, @@ -66,13 +66,13 @@ module.exports = { } if (this._overlayInstance) { - return React.findDOMNode(this._overlayInstance); + return ReactDOM.findDOMNode(this._overlayInstance); } return null; }, getContainerDOMNode: function() { - return React.findDOMNode(this.props.container) || document.body; + return ReactDOM.findDOMNode(this.props.container) || document.body; } }; diff --git a/src/utils/domUtils.js b/src/utils/domUtils.js index 1a5be90..cbc4afa 100644 --- a/src/utils/domUtils.js +++ b/src/utils/domUtils.js @@ -1,6 +1,7 @@ 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); /** * Get ownerDocument @@ -8,7 +9,7 @@ var React = require('react'); * @returns {HTMLDocument} */ function ownerDocument(componentOrElement) { - var element = React.findDOMNode(componentOrElement); + var element = ReactDOM.findDOMNode(componentOrElement); return (element && element.ownerDocument) || document; }