react-bootstrap
Advanced tools
react-bootstrap - npm Package Compare versions
Comparing version 0.8.2 to 0.9.0
65
main.js
| module.exports = { | ||
| Accordion: require('./Accordion'), | ||
| Affix: require('./Affix'), | ||
| AffixMixin: require('./AffixMixin'), | ||
| Alert: require('./Alert'), | ||
| BootstrapMixin: require('./BootstrapMixin'), | ||
| Button: require('./Button'), | ||
| ButtonGroup: require('./ButtonGroup'), | ||
| ButtonToolbar: require('./ButtonToolbar'), | ||
| DropdownButton: require('./DropdownButton'), | ||
| DropdownMenu: require('./DropdownMenu'), | ||
| DropdownStateMixin: require('./DropdownStateMixin'), | ||
| FadeMixin: require('./FadeMixin'), | ||
| Input: require('./Input'), | ||
| Interpolate: require('./Interpolate'), | ||
| MenuItem: require('./MenuItem'), | ||
| Modal: require('./Modal'), | ||
| Nav: require('./Nav'), | ||
| NavItem: require('./NavItem'), | ||
| OverlayTrigger: require('./OverlayTrigger'), | ||
| OverlayTriggerMixin: require('./OverlayTriggerMixin'), | ||
| Panel: require('./Panel'), | ||
| PanelGroup: require('./PanelGroup'), | ||
| ProgressBar: require('./ProgressBar'), | ||
| SplitButton: require('./SplitButton'), | ||
| SubNav: require('./SubNav'), | ||
| TabbedArea: require('./TabbedArea'), | ||
| TabPane: require('./TabPane') | ||
| Accordion: require('./Accordion'), | ||
| Affix: require('./Affix'), | ||
| AffixMixin: require('./AffixMixin'), | ||
| Alert: require('./Alert'), | ||
| BootstrapMixin: require('./BootstrapMixin'), | ||
| Badge: require('./Badge'), | ||
| Button: require('./Button'), | ||
| ButtonGroup: require('./ButtonGroup'), | ||
| ButtonToolbar: require('./ButtonToolbar'), | ||
| Carousel: require('./Carousel'), | ||
| CarouselItem: require('./CarouselItem'), | ||
| DropdownButton: require('./DropdownButton'), | ||
| DropdownMenu: require('./DropdownMenu'), | ||
| DropdownStateMixin: require('./DropdownStateMixin'), | ||
| FadeMixin: require('./FadeMixin'), | ||
| Glyphicon: require('./Glyphicon'), | ||
| Input: require('./Input'), | ||
| Interpolate: require('./Interpolate'), | ||
| Jumbotron: require('./Jumbotron'), | ||
| Label: require('./Label'), | ||
| MenuItem: require('./MenuItem'), | ||
| Modal: require('./Modal'), | ||
| Nav: require('./Nav'), | ||
| NavItem: require('./NavItem'), | ||
| ModalTrigger: require('./ModalTrigger'), | ||
| OverlayTrigger: require('./OverlayTrigger'), | ||
| OverlayMixin: require('./OverlayMixin'), | ||
| PageHeader: require('./PageHeader'), | ||
| Panel: require('./Panel'), | ||
| PanelGroup: require('./PanelGroup'), | ||
| Popover: require('./Popover'), | ||
| ProgressBar: require('./ProgressBar'), | ||
| SplitButton: require('./SplitButton'), | ||
| SubNav: require('./SubNav'), | ||
| TabbedArea: require('./TabbedArea'), | ||
| TabPane: require('./TabPane'), | ||
| Tooltip: require('./Tooltip'), | ||
| Well: require('./Well') | ||
| }; |
| { | ||
| "name": "react-bootstrap", | ||
| "version": "0.8.2", | ||
| "version": "0.9.0", | ||
| "description": "Bootstrap 3 components build with React", | ||
@@ -5,0 +5,0 @@ "main": "main.js", |
@@ -9,3 +9,4 @@ "use strict"; | ||
| bsStyle: React.PropTypes.oneOf(Object.keys(constants.STYLES)), | ||
| bsSize: React.PropTypes.oneOf(Object.keys(constants.SIZES)) | ||
| bsSize: React.PropTypes.oneOf(Object.keys(constants.SIZES)), | ||
| bsGlyph: React.PropTypes.oneOf(Object.keys(constants.GLYPHS)) | ||
| }, | ||
@@ -27,2 +28,7 @@ | ||
| var bsGlyph = this.props.bsGlyph && constants.GLYPHS[this.props.bsGlyph]; | ||
| if (bsGlyph) { | ||
| classes[prefix + bsGlyph] = true; | ||
| } | ||
| var bsStyle = this.props.bsStyle && constants.STYLES[this.props.bsStyle]; | ||
@@ -29,0 +35,0 @@ if (this.props.bsStyle) { |
| "use strict"; | ||
| exports["default"] = { | ||
| CLASSES: { | ||
| 'column': 'col', | ||
| 'button': 'btn', | ||
| 'button-group': 'btn-group', | ||
| 'button-toolbar': 'btn-toolbar', | ||
| 'label': 'label', | ||
| 'alert': 'alert', | ||
| 'input-group': 'input-group', | ||
| 'form': 'form', | ||
| 'panel': 'panel', | ||
| 'panel-group': 'panel-group', | ||
| 'progress-bar': 'progress-bar', | ||
| 'nav': 'nav', | ||
| 'modal': 'modal' | ||
| }, | ||
| STYLES: { | ||
| 'default': 'default', | ||
| 'primary': 'primary', | ||
| 'success': 'success', | ||
| 'info': 'info', | ||
| 'warning': 'warning', | ||
| 'danger': 'danger', | ||
| 'link': 'link', | ||
| 'inline': 'inline', | ||
| 'tabs': 'tabs', | ||
| 'pills': 'pills' | ||
| }, | ||
| SIZES: { | ||
| 'large': 'lg', | ||
| 'medium': 'md', | ||
| 'small': 'sm', | ||
| 'xsmall': 'xs' | ||
| } | ||
| CLASSES: { | ||
| 'column': 'col', | ||
| 'button': 'btn', | ||
| 'button-group': 'btn-group', | ||
| 'button-toolbar': 'btn-toolbar', | ||
| 'label': 'label', | ||
| 'alert': 'alert', | ||
| 'input-group': 'input-group', | ||
| 'form': 'form', | ||
| 'panel': 'panel', | ||
| 'panel-group': 'panel-group', | ||
| 'progress-bar': 'progress-bar', | ||
| 'nav': 'nav', | ||
| 'modal': 'modal', | ||
| 'glyphicon': 'glyphicon', | ||
| 'well': 'well' | ||
| }, | ||
| STYLES: { | ||
| 'default': 'default', | ||
| 'primary': 'primary', | ||
| 'success': 'success', | ||
| 'info': 'info', | ||
| 'warning': 'warning', | ||
| 'danger': 'danger', | ||
| 'link': 'link', | ||
| 'inline': 'inline', | ||
| 'tabs': 'tabs', | ||
| 'pills': 'pills' | ||
| }, | ||
| SIZES: { | ||
| 'large': 'lg', | ||
| 'medium': 'md', | ||
| 'small': 'sm', | ||
| 'xsmall': 'xs' | ||
| }, | ||
| GLYPHS: { | ||
| 'asterisk': 'asterisk', | ||
| 'plus': 'plus', | ||
| 'euro': 'euro', | ||
| 'minus': 'minus', | ||
| 'cloud': 'cloud', | ||
| 'envelope': 'envelope', | ||
| 'pencil': 'pencil', | ||
| 'glass': 'glass', | ||
| 'music': 'music', | ||
| 'search': 'search', | ||
| 'heart': 'heart', | ||
| 'star': 'star', | ||
| 'star-empty': 'star-empty', | ||
| 'user': 'user', | ||
| 'film': 'film', | ||
| 'th-large': 'th-large', | ||
| 'th': 'th', | ||
| 'th-list': 'th-list', | ||
| 'ok': 'ok', | ||
| 'remove': 'remove', | ||
| 'zoom-in': 'zoom-in', | ||
| 'zoom-out': 'zoom-out', | ||
| 'off': 'off', | ||
| 'signal': 'signal', | ||
| 'cog': 'cog', | ||
| 'trash': 'trash', | ||
| 'home': 'home', | ||
| 'file': 'file', | ||
| 'time': 'time', | ||
| 'road': 'road', | ||
| 'download-alt': 'download-alt', | ||
| 'download': 'download', | ||
| 'upload': 'upload', | ||
| 'inbox': 'inbox', | ||
| 'play-circle': 'play-circle', | ||
| 'repeat': 'repeat', | ||
| 'refresh': 'refresh', | ||
| 'list-alt': 'list-alt', | ||
| 'lock': 'lock', | ||
| 'flag': 'flag', | ||
| 'headphones': 'headphones', | ||
| 'volume-off': 'volume-off', | ||
| 'volume-down': 'volume-down', | ||
| 'volume-up': 'volume-up', | ||
| 'qrcode': 'qrcode', | ||
| 'barcode': 'barcode', | ||
| 'tag': 'tag', | ||
| 'tags': 'tags', | ||
| 'book': 'book', | ||
| 'bookmark': 'bookmark', | ||
| 'print': 'print', | ||
| 'camera': 'camera', | ||
| 'font': 'font', | ||
| 'bold': 'bold', | ||
| 'italic': 'italic', | ||
| 'text-height': 'text-height', | ||
| 'text-width': 'text-width', | ||
| 'align-left': 'align-left', | ||
| 'align-center': 'align-center', | ||
| 'align-right': 'align-right', | ||
| 'align-justify': 'align-justify', | ||
| 'list': 'list', | ||
| 'indent-left': 'indent-left', | ||
| 'indent-right': 'indent-right', | ||
| 'facetime-video': 'facetime-video', | ||
| 'picture': 'picture', | ||
| 'map-marker': 'map-marker', | ||
| 'adjust': 'adjust', | ||
| 'tint': 'tint', | ||
| 'edit': 'edit', | ||
| 'share': 'share', | ||
| 'check': 'check', | ||
| 'move': 'move', | ||
| 'step-backward': 'step-backward', | ||
| 'fast-backward': 'fast-backward', | ||
| 'backward': 'backward', | ||
| 'play': 'play', | ||
| 'pause': 'pause', | ||
| 'stop': 'stop', | ||
| 'forward': 'forward', | ||
| 'fast-forward': 'fast-forward', | ||
| 'step-forward': 'step-forward', | ||
| 'eject': 'eject', | ||
| 'chevron-left': 'chevron-left', | ||
| 'chevron-right': 'chevron-right', | ||
| 'plus-sign': 'plus-sign', | ||
| 'minus-sign': 'minus-sign', | ||
| 'remove-sign': 'remove-sign', | ||
| 'ok-sign': 'ok-sign', | ||
| 'question-sign': 'question-sign', | ||
| 'info-sign': 'info-sign', | ||
| 'screenshot': 'screenshot', | ||
| 'remove-circle': 'remove-circle', | ||
| 'ok-circle': 'ok-circle', | ||
| 'ban-circle': 'ban-circle', | ||
| 'arrow-left': 'arrow-left', | ||
| 'arrow-right': 'arrow-right', | ||
| 'arrow-up': 'arrow-up', | ||
| 'arrow-down': 'arrow-down', | ||
| 'share-alt': 'share-alt', | ||
| 'resize-full': 'resize-full', | ||
| 'resize-small': 'resize-small', | ||
| 'exclamation-sign': 'exclamation-sign', | ||
| 'gift': 'gift', | ||
| 'leaf': 'leaf', | ||
| 'fire': 'fire', | ||
| 'eye-open': 'eye-open', | ||
| 'eye-close': 'eye-close', | ||
| 'warning-sign': 'warning-sign', | ||
| 'plane': 'plane', | ||
| 'calendar': 'calendar', | ||
| 'random': 'random', | ||
| 'comment': 'comment', | ||
| 'magnet': 'magnet', | ||
| 'chevron-up': 'chevron-up', | ||
| 'chevron-down': 'chevron-down', | ||
| 'retweet': 'retweet', | ||
| 'shopping-cart': 'shopping-cart', | ||
| 'folder-close': 'folder-close', | ||
| 'folder-open': 'folder-open', | ||
| 'resize-vertical': 'resize-vertical', | ||
| 'resize-horizontal': 'resize-horizontal', | ||
| 'hdd': 'hdd', | ||
| 'bullhorn': 'bullhorn', | ||
| 'bell': 'bell', | ||
| 'certificate': 'certificate', | ||
| 'thumbs-up': 'thumbs-up', | ||
| 'thumbs-down': 'thumbs-down', | ||
| 'hand-right': 'hand-right', | ||
| 'hand-left': 'hand-left', | ||
| 'hand-up': 'hand-up', | ||
| 'hand-down': 'hand-down', | ||
| 'circle-arrow-right': 'circle-arrow-right', | ||
| 'circle-arrow-left': 'circle-arrow-left', | ||
| 'circle-arrow-up': 'circle-arrow-up', | ||
| 'circle-arrow-down': 'circle-arrow-down', | ||
| 'globe': 'globe', | ||
| 'wrench': 'wrench', | ||
| 'tasks': 'tasks', | ||
| 'filter': 'filter', | ||
| 'briefcase': 'briefcase', | ||
| 'fullscreen': 'fullscreen', | ||
| 'dashboard': 'dashboard', | ||
| 'paperclip': 'paperclip', | ||
| 'heart-empty': 'heart-empty', | ||
| 'link': 'link', | ||
| 'phone': 'phone', | ||
| 'pushpin': 'pushpin', | ||
| 'usd': 'usd', | ||
| 'gbp': 'gbp', | ||
| 'sort': 'sort', | ||
| 'sort-by-alphabet': 'sort-by-alphabet', | ||
| 'sort-by-alphabet-alt': 'sort-by-alphabet-alt', | ||
| 'sort-by-order': 'sort-by-order', | ||
| 'sort-by-order-alt': 'sort-by-order-alt', | ||
| 'sort-by-attributes': 'sort-by-attributes', | ||
| 'sort-by-attributes-alt': 'sort-by-attributes-alt', | ||
| 'unchecked': 'unchecked', | ||
| 'expand': 'expand', | ||
| 'collapse-down': 'collapse-down', | ||
| 'collapse-up': 'collapse-up', | ||
| 'log-in': 'log-in', | ||
| 'flash': 'flash', | ||
| 'log-out': 'log-out', | ||
| 'new-window': 'new-window', | ||
| 'record': 'record', | ||
| 'save': 'save', | ||
| 'open': 'open', | ||
| 'saved': 'saved', | ||
| 'import': 'import', | ||
| 'export': 'export', | ||
| 'send': 'send', | ||
| 'floppy-disk': 'floppy-disk', | ||
| 'floppy-saved': 'floppy-saved', | ||
| 'floppy-remove': 'floppy-remove', | ||
| 'floppy-save': 'floppy-save', | ||
| 'floppy-open': 'floppy-open', | ||
| 'credit-card': 'credit-card', | ||
| 'transfer': 'transfer', | ||
| 'cutlery': 'cutlery', | ||
| 'header': 'header', | ||
| 'compressed': 'compressed', | ||
| 'earphone': 'earphone', | ||
| 'phone-alt': 'phone-alt', | ||
| 'tower': 'tower', | ||
| 'stats': 'stats', | ||
| 'sd-video': 'sd-video', | ||
| 'hd-video': 'hd-video', | ||
| 'subtitles': 'subtitles', | ||
| 'sound-stereo': 'sound-stereo', | ||
| 'sound-dolby': 'sound-dolby', | ||
| 'sound-5-1': 'sound-5-1', | ||
| 'sound-6-1': 'sound-6-1', | ||
| 'sound-7-1': 'sound-7-1', | ||
| 'copyright-mark': 'copyright-mark', | ||
| 'registration-mark': 'registration-mark', | ||
| 'cloud-download': 'cloud-download', | ||
| 'cloud-upload': 'cloud-upload', | ||
| 'tree-conifer': 'tree-conifer', | ||
| 'tree-deciduous': 'tree-deciduous' | ||
| } | ||
| }; |
@@ -23,4 +23,4 @@ "use strict"; | ||
| getPosition: function (elem) { | ||
| var offsetParent, offset, | ||
| getPosition: function (elem, offsetParent) { | ||
| var offset, | ||
| parentOffset = {top: 0, left: 0}; | ||
@@ -34,4 +34,6 @@ | ||
| } else { | ||
| // Get *real* offsetParent | ||
| offsetParent = this.offsetParent(elem); | ||
| if (!offsetParent) { | ||
| // Get *real* offsetParent | ||
| offsetParent = this.offsetParent(elem); | ||
| } | ||
@@ -38,0 +40,0 @@ // Get correct offsets |
@@ -18,2 +18,9 @@ "use strict"; | ||
| propTypes: { | ||
| title: React.PropTypes.renderable, | ||
| backdrop: React.PropTypes.oneOf(['static', true, false]), | ||
| keyboard: React.PropTypes.bool, | ||
| onRequestHide: React.PropTypes.func.isRequired | ||
| }, | ||
| getDefaultProps: function () { | ||
@@ -28,25 +35,4 @@ return { | ||
| componentDidMount: function () { | ||
| document.addEventListener('keyup', this.handleKeyUp); | ||
| }, | ||
| componentWillUnmount: function () { | ||
| document.removeEventListener('keyup', this.handleKeyUp); | ||
| }, | ||
| killClick: function (e) { | ||
| e.stopPropagation(); | ||
| }, | ||
| handleBackdropClick: function () { | ||
| this.props.onRequestHide(); | ||
| }, | ||
| handleKeyUp: function (e) { | ||
| if (this.props.keyboard && e.keyCode === 27) { | ||
| this.props.onRequestHide(); | ||
| } | ||
| }, | ||
| render: function () { | ||
| var modalStyle = {display: 'block'}; | ||
| var classes = this.getBsClassSet(); | ||
@@ -59,12 +45,10 @@ | ||
| React.DOM.div( | ||
| {bsClass:"modal", | ||
| tabIndex:"-1", | ||
| {tabIndex:"-1", | ||
| role:"dialog", | ||
| style:{display: 'block'}, | ||
| style:modalStyle, | ||
| className:classSet(classes), | ||
| onClick:this.handleBackdropClick, | ||
| ref:"modal"} | ||
| , | ||
| onClick:this.props.backdrop === true ? this.handleBackdropClick : null, | ||
| ref:"modal"}, | ||
| React.DOM.div( {className:"modal-dialog"}, | ||
| React.DOM.div( {className:"modal-content", onClick:this.killClick}, | ||
| React.DOM.div( {className:"modal-content"}, | ||
| this.props.title ? this.renderHeader() : null, | ||
@@ -111,2 +95,24 @@ this.props.children | ||
| ); | ||
| }, | ||
| componentDidMount: function () { | ||
| document.addEventListener('keyup', this.handleDocumentKeyUp); | ||
| }, | ||
| componentWillUnmount: function () { | ||
| document.removeEventListener('keyup', this.handleDocumentKeyUp); | ||
| }, | ||
| handleBackdropClick: function (e) { | ||
| if (e.target !== e.currentTarget) { | ||
| return; | ||
| } | ||
| this.props.onRequestHide(); | ||
| }, | ||
| handleDocumentKeyUp: function (e) { | ||
| if (this.props.keyboard && e.keyCode === 27) { | ||
| this.props.onRequestHide(); | ||
| } | ||
| } | ||
@@ -113,0 +119,0 @@ }); |
@@ -6,97 +6,217 @@ "use strict"; | ||
| var cloneWithProps = require("./react-es6/lib/cloneWithProps")["default"]; | ||
| var OverlayTriggerMixin = require("./OverlayTriggerMixin")["default"]; | ||
| var merge = require("./react-es6/lib/merge")["default"]; | ||
| var OverlayMixin = require("./OverlayMixin")["default"]; | ||
| var domUtils = require("./domUtils")["default"]; | ||
| var utils = require("./utils")["default"]; | ||
| /** | ||
| * Check if value one is inside or equal to the of value | ||
| * | ||
| * @param {string} one | ||
| * @param {string|array} of | ||
| * @returns {boolean} | ||
| */ | ||
| function isOneOf(one, of) { | ||
| if (Array.isArray(of)) { | ||
| return of.indexOf(one) >= 0; | ||
| } | ||
| return one === of; | ||
| } | ||
| var OverlayTrigger = React.createClass({displayName: 'OverlayTrigger', | ||
| mixins: [OverlayTriggerMixin], | ||
| mixins: [OverlayMixin], | ||
| getDefaultProps: function () { | ||
| return { | ||
| trigger: 'click' | ||
| }; | ||
| }, | ||
| propTypes: { | ||
| trigger: React.PropTypes.oneOfType([ | ||
| React.PropTypes.oneOf(['manual', 'click', 'hover', 'focus']), | ||
| React.PropTypes.arrayOf(React.PropTypes.oneOf(['click', 'hover', 'focus'])) | ||
| ]), | ||
| placement: React.PropTypes.oneOf(['top','right', 'bottom', 'left']), | ||
| delay: React.PropTypes.number, | ||
| delayShow: React.PropTypes.number, | ||
| delayHide: React.PropTypes.number, | ||
| defaultOverlayShown: React.PropTypes.bool, | ||
| overlay: React.PropTypes.renderable.isRequired | ||
| }, | ||
| getInitialState: function() { | ||
| return { | ||
| isOverlayShown: (this.props.defaultOverlayShown == null) ? | ||
| false : this.props.defaultOverlayShown | ||
| }; | ||
| }, | ||
| getDefaultProps: function () { | ||
| return { | ||
| placement: 'right', | ||
| trigger: ['hover', 'focus'] | ||
| }; | ||
| }, | ||
| show: function () { | ||
| this.setState({ | ||
| isOverlayShown: true | ||
| }); | ||
| }, | ||
| getInitialState: function () { | ||
| return { | ||
| isOverlayShown: this.props.defaultOverlayShown == null ? | ||
| false : this.props.defaultOverlayShown, | ||
| overlayLeft: null, | ||
| overlayTop: null | ||
| }; | ||
| }, | ||
| hide: function () { | ||
| this.setState({ | ||
| isOverlayShown: false | ||
| }); | ||
| }, | ||
| show: function () { | ||
| this.setState({ | ||
| isOverlayShown: true | ||
| }, function() { | ||
| this.updateOverlayPosition(); | ||
| }); | ||
| }, | ||
| toggle: function () { | ||
| this.setState({ | ||
| isOverlayShown: !this.state.isOverlayShown | ||
| }); | ||
| }, | ||
| hide: function () { | ||
| this.setState({ | ||
| isOverlayShown: false | ||
| }); | ||
| }, | ||
| _trigger: function () { | ||
| var propName = 'delay' + (this.state.isOverlayShown ? 'Hide' : 'Show'), | ||
| delay = this.props[propName] || this.props.delay; | ||
| toggle: function () { | ||
| this.state.isOverlayShown ? | ||
| this.hide() : this.show(); | ||
| }, | ||
| clearTimeout(this._triggerTimeout); | ||
| if (delay) { | ||
| this._triggerTimeout = setTimeout(this.toggle, parseInt(delay, 10)); | ||
| } else { | ||
| this.toggle(); | ||
| } | ||
| }, | ||
| renderOverlay: function () { | ||
| if (!this.state.isOverlayShown) { | ||
| return React.DOM.span(null ); | ||
| } | ||
| renderOverlay: function() { | ||
| var props; | ||
| return cloneWithProps( | ||
| this.props.overlay, | ||
| { | ||
| onRequestHide: this.hide, | ||
| placement: this.props.placement, | ||
| positionLeft: this.state.overlayLeft, | ||
| positionTop: this.state.overlayTop | ||
| } | ||
| ); | ||
| }, | ||
| if (!this.state.isOverlayShown || !this.props.overlay) { | ||
| return React.DOM.span(null ); | ||
| } | ||
| render: function () { | ||
| var props = {}; | ||
| props = { | ||
| onRequestHide: this._trigger | ||
| }; | ||
| if (isOneOf('click', this.props.trigger)) { | ||
| props.onClick = utils.createChainedFunction(this.toggle, this.props.onClick); | ||
| } | ||
| if (this.props.animation != null) { | ||
| props.animation = this.props.animation; | ||
| } | ||
| if (isOneOf('hover', this.props.trigger)) { | ||
| props.onMouseOver = utils.createChainedFunction(this.handleDelayedShow, this.props.onMouseOver); | ||
| props.onMouseOut = utils.createChainedFunction(this.handleDelayedHide, this.props.onMouseOut); | ||
| } | ||
| return cloneWithProps( | ||
| this.props.overlay, | ||
| props | ||
| ); | ||
| }, | ||
| if (isOneOf('focus', this.props.trigger)) { | ||
| props.onFocus = utils.createChainedFunction(this.handleDelayedShow, this.props.onFocus); | ||
| props.onBlur = utils.createChainedFunction(this.handleDelayedHide, this.props.onBlur); | ||
| } | ||
| render: function() { | ||
| return (this.props.children) ? | ||
| this.renderTrigger() : React.DOM.span(null ); | ||
| }, | ||
| return cloneWithProps( | ||
| React.Children.only(this.props.children), | ||
| props | ||
| ); | ||
| }, | ||
| renderTrigger: function () { | ||
| var props = {}, | ||
| trigger = this.props.trigger, | ||
| propName; | ||
| componentWillUnmount: function() { | ||
| clearTimeout(this._hoverDelay); | ||
| }, | ||
| if (trigger !== 'manual') { | ||
| if (trigger === 'hover') { | ||
| trigger = 'mouseOver'; | ||
| } | ||
| propName = 'on' + trigger.substr(0, 1).toUpperCase() + | ||
| trigger.substr(1); | ||
| props[propName] = this._trigger; | ||
| } | ||
| handleDelayedShow: function () { | ||
| if (this._hoverDelay != null) { | ||
| clearTimeout(this._hoverDelay); | ||
| this._hoverDelay = null; | ||
| return; | ||
| } | ||
| return React.DOM.span( | ||
| props, | ||
| this.props.children | ||
| ); | ||
| var delay = this.props.delayShow != null ? | ||
| this.props.delayShow : this.props.delay; | ||
| if (!delay) { | ||
| this.show(); | ||
| return; | ||
| } | ||
| this._hoverDelay = setTimeout(function() { | ||
| this._hoverDelay = null; | ||
| this.show(); | ||
| }.bind(this), delay); | ||
| }, | ||
| handleDelayedHide: function () { | ||
| if (this._hoverDelay != null) { | ||
| clearTimeout(this._hoverDelay); | ||
| this._hoverDelay = null; | ||
| return; | ||
| } | ||
| var delay = this.props.delayHide != null ? | ||
| this.props.delayHide : this.props.delay; | ||
| if (!delay) { | ||
| this.hide(); | ||
| return; | ||
| } | ||
| this._hoverDelay = setTimeout(function() { | ||
| this._hoverDelay = null; | ||
| this.hide(); | ||
| }.bind(this), delay); | ||
| }, | ||
| updateOverlayPosition: function () { | ||
| if (!this.isMounted()) { | ||
| return; | ||
| } | ||
| var pos = this.calcOverlayPosition(); | ||
| this.setState({ | ||
| overlayLeft: pos.left, | ||
| overlayTop: pos.top | ||
| }); | ||
| }, | ||
| calcOverlayPosition: function () { | ||
| var childOffset = this.getPosition(); | ||
| var overlayNode = this.getOverlayDOMNode(); | ||
| var overlayHeight = overlayNode.offsetHeight; | ||
| var overlayWidth = overlayNode.offsetWidth; | ||
| switch (this.props.placement) { | ||
| case 'right': | ||
| return { | ||
| top: childOffset.top + childOffset.height / 2 - overlayHeight / 2, | ||
| left: childOffset.left + childOffset.width | ||
| }; | ||
| case 'left': | ||
| return { | ||
| top: childOffset.top + childOffset.height / 2 - overlayHeight / 2, | ||
| left: childOffset.left - overlayWidth | ||
| }; | ||
| case 'top': | ||
| return { | ||
| top: childOffset.top - overlayHeight, | ||
| left: childOffset.left + childOffset.width / 2 - overlayWidth / 2 | ||
| }; | ||
| case 'bottom': | ||
| return { | ||
| top: childOffset.top + childOffset.height, | ||
| left: childOffset.left + childOffset.width / 2 - overlayWidth / 2 | ||
| }; | ||
| default: | ||
| throw new Error('calcOverlayPosition(): No such placement of "' + this.props.placement + '" found.'); | ||
| } | ||
| }, | ||
| getPosition: function () { | ||
| var node = this.getDOMNode(); | ||
| var container = this.getContainerDOMNode(); | ||
| var offset = container.tagName == 'BODY' ? | ||
| domUtils.getOffset(node) : domUtils.getPosition(node, container); | ||
| return merge(offset, { | ||
| height: node.offsetHeight, | ||
| width: node.offsetWidth | ||
| }); | ||
| } | ||
| }); | ||
| exports["default"] = OverlayTrigger; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by31.69%
116072
- Number of package files
- increased by27.5%
102
- Lines of code
- increased by34.27%
3628
No dependency changes