From 63db87b9ea93de984db893683f2ffdb7653f9883 Mon Sep 17 00:00:00 2001 From: ibogdanov Date: Wed, 30 Sep 2015 17:08:51 -0700 Subject: [PATCH] v0.0.7 compile --- lib/SLDSDateInput/SLDSDatePicker/index.js | 2 +- lib/SLDSModal/index.js | 402 ++++++++-------------- lib/SLDSModal/manager.js | 173 ++++++++++ lib/SLDSModal/trigger.js | 42 +++ lib/SLDSPicklistBase/index.js | 15 +- lib/index.js | 12 +- lib/utils/EventUtil.js | 7 +- package.json | 2 +- 8 files changed, 390 insertions(+), 265 deletions(-) create mode 100644 lib/SLDSModal/manager.js create mode 100644 lib/SLDSModal/trigger.js diff --git a/lib/SLDSDateInput/SLDSDatePicker/index.js b/lib/SLDSDateInput/SLDSDatePicker/index.js index 476882184d..0192c084e1 100644 --- a/lib/SLDSDateInput/SLDSDatePicker/index.js +++ b/lib/SLDSDateInput/SLDSDatePicker/index.js @@ -64,7 +64,7 @@ module.exports = _react2['default'].createClass({ if (this.props.onClose) { this.props.onClose(); } - } else if (event.keyCode === _utils2.KEYS.SPACE) {} else if (event.keyCode === _utils2.KEYS.ENTER) {} else if (event.keyCode === _utils2.KEYS.TAB) {} else { + } else if (event.keyCode === _utils2.KEYS.SPACE) {} else if (event.keyCode === _utils2.KEYS.ENTER) {} else if (event.keyCode === _utils2.KEYS.TAB) {} else if (event.keyCode === _utils2.KEYS.ESCAPE) {} else { _utils.EventUtil.trapEvent(event); } } diff --git a/lib/SLDSModal/index.js b/lib/SLDSModal/index.js index 47614d0e9b..d7d3419293 100644 --- a/lib/SLDSModal/index.js +++ b/lib/SLDSModal/index.js @@ -1,281 +1,179 @@ /* Copyright (c) 2015, salesforce.com, inc. All rights reserved. - Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. - THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ 'use strict'; -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); - -var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +var _react = require('react'); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } +var _react2 = _interopRequireDefault(_react); -function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var _SLDSIcons = require("../SLDSIcons"); - -var _SLDSButton = require("../SLDSButton"); +var _SLDSButton = require('../SLDSButton'); var _SLDSButton2 = _interopRequireDefault(_SLDSButton); -var _lodash = require('lodash'); - -var React = require('react'); -var ReactDOM = require('react-dom'); -var PT = React.PropTypes; - -var classNames = require('classnames'); - -var ModalFooter = (function (_React$Component) { - _inherits(ModalFooter, _React$Component); - - function ModalFooter() { - _classCallCheck(this, ModalFooter); - - _get(Object.getPrototypeOf(ModalFooter.prototype), 'constructor', this).apply(this, arguments); - } - - _createClass(ModalFooter, [{ - key: 'getClassName', - value: function getClassName(cls) { - return classNames(this.props.className, 'slds-modal__footer'); - } - }, { - key: 'render', - value: function render() { - var props = (0, _lodash.omit)(['className', 'flavor'], this.props); - return React.createElement( - 'div', - _extends({}, props, { className: this.getClassName() }), - this.props.children - ); - } - }]); - - return ModalFooter; -})(React.Component); - -var ModalBody = (function (_React$Component2) { - _inherits(ModalBody, _React$Component2); - - function ModalBody() { - _classCallCheck(this, ModalBody); - - _get(Object.getPrototypeOf(ModalBody.prototype), 'constructor', this).apply(this, arguments); - } - - _createClass(ModalBody, [{ - key: 'getClassName', - value: function getClassName(cls) { - return classNames(this.props.className, 'slds-modal__content'); - } - }, { - key: 'render', - value: function render() { - return React.createElement( - 'div', - _extends({}, this.props, { className: this.getClassName() }), - this.props.children - ); - } - }]); - - return ModalBody; -})(React.Component); - -var ModalHeader = (function (_React$Component3) { - _inherits(ModalHeader, _React$Component3); - - function ModalHeader() { - _classCallCheck(this, ModalHeader); - - _get(Object.getPrototypeOf(ModalHeader.prototype), 'constructor', this).apply(this, arguments); - } - - _createClass(ModalHeader, [{ - key: 'getClassName', - value: function getClassName(cls) { - return classNames(this.props.className, 'slds-modal__header'); - } - }, { - key: 'render', - value: function render() { - return React.createElement( - 'div', - _extends({}, this.props, { className: this.getClassName() }), - this.props.children, - this.props.closeButton ? React.createElement( - _SLDSButton2['default'], - { className: 'slds-modal__close' }, - React.createElement(_SLDSIcons.ButtonIcon, { - onClick: this.context.onRequestClose, - iconFlavor: 'inverse,large', - inverse: true, - size: 'large', - sprite: 'action', - name: 'close', - assistiveText: 'Close' }) - ) : null - ); - } - }]); - - return ModalHeader; -})(React.Component); - -ModalHeader.propTypes = { closeButton: PT.bool }; -ModalHeader.defaultProps = { closeButton: true }; -ModalHeader.contextTypes = { onRequestClose: PT.func }; - -var Modal = (function (_React$Component4) { - _inherits(Modal, _React$Component4); - - function Modal() { - _classCallCheck(this, Modal); - - _get(Object.getPrototypeOf(Modal.prototype), 'constructor', this).apply(this, arguments); +var _SLDSIcons = require('../SLDSIcons'); + +var _utils = require('../utils'); + +var _reactModal = require('react-modal'); + +var _reactModal2 = _interopRequireDefault(_reactModal); + +var customStyles = { + content: { + position: 'default', + top: 'default', + left: 'default', + right: 'default', + bottom: 'default', + border: 'default', + background: 'default', + overflow: 'default', + WebkitOverflowScrolling: 'default', + borderRadius: 'default', + outline: 'default', + padding: 'default' + }, + overlay: { + backgroundColor: 'default' } +}; - _createClass(Modal, [{ - key: 'getChildContext', - value: function getChildContext() { - return { onRequestClose: this.onClick.bind(this) }; - } - }, { - key: 'onClick', - value: function onClick() { - if (this.props.onRequestClose) { - this.props.onRequestClose(); - } - } - }, { - key: 'onContentClick', - value: function onContentClick(e) { - e.stopPropagation(); - } - }, { - key: 'isModalChild', - value: function isModalChild(t) { - var container = ReactDOM.findDOMNode(this); - var node = t.parentNode; - while (node !== null) { - if (node === container) { - return true; - } - node = node.parentNode; +module.exports = _react2['default'].createClass({ + displayName: 'exports', + + getDefaultProps: function getDefaultProps() { + return { + title: '', + isOpen: false, + content: [], + footer: [], + returnFocusTo: null + }; + }, + + getInitialState: function getInitialState() { + return { + isOpen: this.props.isOpen, + revealed: false + }; + }, + + componentDidMount: function componentDidMount() { + var _this = this; + + if (!this.state.revealed) { + setTimeout(function () { + _this.setState({ revealed: true }); + }); + } + this.updateBodyScroll(); + }, + + openModal: function openModal() { + this.setState({ isOpen: true }); + }, + + closeModal: function closeModal() { + this.setState({ isOpen: false }); + }, + + handleSubmitModal: function handleSubmitModal() { + this.closeModal(); + }, + + updateBodyScroll: function updateBodyScroll() { + if (window && document && document.body) { + if (this.state.isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'inherit'; } - return false; } - }, { - key: 'getClassName', - value: function getClassName(cls) { - return classNames(this.props.className, cls); - } - }, { - key: 'render', - value: function render() { - var className = this.getClassName(classNames('slds-modal', _defineProperty({}, 'slds-fade-in-open', this.props.isOpen))); - var classNameModalContainer = 'slds-modal__container'; - var classNameModalBackdrop = classNames('slds-modal-backdrop', _defineProperty({}, 'slds-modal-backdrop--open', this.props.isOpen)); - return React.createElement( + }, + + getModal: function getModal() { + return _react2['default'].createElement( + 'div', + { className: 'slds-modal' + (this.state.revealed ? ' slds-fade-in-open' : ''), + onClick: this.closeModal }, + _react2['default'].createElement( 'div', - null, - React.createElement( + { className: 'slds-modal__container', onClick: function (e) { + _utils.EventUtil.trap(e); + } }, + _react2['default'].createElement( 'div', - { 'aria-hidden': !this.props.isOpen, role: 'dialog', className: className, onClick: this.onClick.bind(this) }, - React.createElement( - 'div', - { className: classNameModalContainer, onClick: this.onContentClick.bind(this), key: 'content' }, - this.props.children + { className: 'slds-modal__header' }, + _react2['default'].createElement( + 'h2', + { className: 'slds-text-heading--medium' }, + this.props.title + ), + _react2['default'].createElement( + _SLDSButton2['default'], + { className: 'slds-button slds-modal__close', onClick: this.closeModal }, + _react2['default'].createElement(_SLDSIcons.Icon, { name: 'close', category: 'utility', size: 'small' }), + _react2['default'].createElement( + 'span', + { className: 'slds-assistive-text' }, + 'Close' + ) ) ), - React.createElement('div', { className: classNameModalBackdrop }) - ); - } - }]); - - return Modal; -})(React.Component); - -Modal.childContextTypes = { onRequestClose: PT.func }; - -var ModalWrapper = (function (_React$Component5) { - _inherits(ModalWrapper, _React$Component5); - - function ModalWrapper() { - _classCallCheck(this, ModalWrapper); - - _get(Object.getPrototypeOf(ModalWrapper.prototype), 'constructor', this).apply(this, arguments); - } - - _createClass(ModalWrapper, [{ - key: 'componentDidMount', - value: function componentDidMount() { - var renderInline = this.props.renderInline; - - var hasDOM = document && document.createElement; - if (!renderInline && hasDOM) { - this.__node = document.createElement('div'); - document.body.appendChild(this.__node); - this.renderModal(this.props); - } - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - if (this.__node) { - ReactDOM.unmountComponentAtNode(this.__node); - document.body.removeChild(this.__node); - } - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - this.renderModal(nextProps); - } - }, { - key: 'render', - value: function render() { - var renderInline = this.props.renderInline; - - return renderInline ? React.createElement(Modal, _extends({}, this.props, { tabindex: '-1' })) : null; - } - }, { - key: 'renderModal', - value: function renderModal(props) { - if (this.__node) { - this.__modal = React.render(React.createElement(Modal, props), this.__node); + _react2['default'].createElement( + 'div', + { className: 'slds-modal__content' }, + this.props.children + ), + _react2['default'].createElement( + 'div', + { className: 'slds-modal__footer' }, + this.props.footer + ) + ) + ); + }, + + render: function render() { + return _react2['default'].createElement( + _reactModal2['default'], + { + isOpen: this.state.isOpen, + onRequestClose: this.closeModal, + style: customStyles, + overlayClassName: 'slds-modal-backdrop' + (this.state.revealed ? ' slds-modal-backdrop--open' : '') }, + this.getModal() + ); + }, + + componentDidUpdate: function componentDidUpdate(prevProps, prevState) { + + if (this.state.isOpen !== prevState.isOpen) { + + this.updateBodyScroll(); + + if (!this.state.isOpen) { + if (this.props.returnFocusTo && this.props.returnFocusTo.focus) { + this.props.returnFocusTo.focus(); + } + if (this.isMounted()) { + var el = this.getDOMNode().parentNode; + if (el && el.getAttribute('data-slds-modal')) { + _react2['default'].unmountComponentAtNode(el); + document.body.removeChild(el); + } + } } } - }]); - - return ModalWrapper; -})(React.Component); - -ModalWrapper.propTypes = { - isOpen: React.PropTypes.bool.isRequired, - onRequestClose: React.PropTypes.func, - renderInline: React.PropTypes.bool -}; -ModalWrapper.defaultProps = { renderInline: false }; - -ModalWrapper.displayName = 'Modal'; - -ModalWrapper.Header = ModalHeader; -ModalWrapper.Body = ModalBody; -ModalWrapper.Footer = ModalFooter; + } -module.exports = ModalWrapper; \ No newline at end of file +}); \ No newline at end of file diff --git a/lib/SLDSModal/manager.js b/lib/SLDSModal/manager.js new file mode 100644 index 0000000000..6f288c7b44 --- /dev/null +++ b/lib/SLDSModal/manager.js @@ -0,0 +1,173 @@ +/* +Copyright (c) 2015, salesforce.com, inc. All rights reserved. +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: +Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. +Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. +Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +*/ + +'use strict'; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _SLDSButton = require('../SLDSButton'); + +var _SLDSButton2 = _interopRequireDefault(_SLDSButton); + +var _SLDSIcons = require('../SLDSIcons'); + +var _utils = require('../utils'); + +var _reactModal = require('react-modal'); + +var _reactModal2 = _interopRequireDefault(_reactModal); + +var customStyles = { + content: { + position: 'default', + top: 'default', + left: 'default', + right: 'default', + bottom: 'default', + border: 'default', + background: 'default', + overflow: 'default', + WebkitOverflowScrolling: 'default', + borderRadius: 'default', + outline: 'default', + padding: 'default' + }, + overlay: { + backgroundColor: 'default' + } +}; + +module.exports = _react2['default'].createClass({ + displayName: 'exports', + + getDefaultProps: function getDefaultProps() { + return { + title: '', + isOpen: false + }; + }, + + getInitialState: function getInitialState() { + return { + isOpen: this.props.isOpen, + revealed: false + }; + }, + + componentDidMount: function componentDidMount() { + var _this = this; + + if (!this.state.revealed) { + setTimeout((function () { + _this.setState({ revealed: true }); + }).bind(this)); + } + this.updateBodyScroll(); + }, + + openModal: function openModal() { + this.setState({ isOpen: true }); + }, + + closeModal: function closeModal() { + this.setState({ isOpen: false }); + }, + + handleSubmitModal: function handleSubmitModal() { + this.closeModal(); + }, + + updateBodyScroll: function updateBodyScroll() { + if (window && document && document.body) { + if (this.state.isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'inherit'; + } + } + }, + + getModal: function getModal() { + return _react2['default'].createElement( + 'div', + { className: 'slds-modal' + (this.state.revealed ? ' slds-fade-in-open' : ''), + onClick: this.closeModal }, + _react2['default'].createElement( + 'div', + { className: 'slds-modal__container', onClick: function (e) { + _utils.EventUtil.trap(e); + } }, + _react2['default'].createElement( + 'div', + { className: 'slds-modal__header' }, + _react2['default'].createElement( + 'h2', + { className: 'slds-text-heading--medium' }, + this.props.title + ), + _react2['default'].createElement( + _SLDSButton2['default'], + { className: 'slds-button slds-modal__close', onClick: this.closeModal }, + _react2['default'].createElement(_SLDSIcons.Icon, { name: 'close', category: 'utility', size: 'small' }), + _react2['default'].createElement( + 'span', + { className: 'slds-assistive-text' }, + 'Close' + ) + ) + ), + _react2['default'].createElement( + 'div', + { className: 'slds-modal__content' }, + this.props.children + ), + _react2['default'].createElement( + 'div', + { className: 'slds-modal__footer' }, + this.props.footer + ) + ) + ); + }, + + render: function render() { + return _react2['default'].createElement( + _reactModal2['default'], + { + isOpen: this.state.isOpen, + onRequestClose: this.closeModal, + style: customStyles, + overlayClassName: 'slds-modal-backdrop' + (this.state.revealed ? ' slds-modal-backdrop--open' : '') }, + this.getModal() + ); + }, + + componentDidUpdate: function componentDidUpdate(prevProps, prevState) { + + if (this.state.isOpen !== prevState.isOpen) { + + this.updateBodyScroll(); + + if (!this.state.isOpen) { + if (this.isMounted()) { + var el = this.getDOMNode().parentNode; + if (el && el.getAttribute('data-slds-modal')) { + _react2['default'].unmountComponentAtNode(el); + document.body.removeChild(el); + } + } + } + } + } + +}); \ No newline at end of file diff --git a/lib/SLDSModal/trigger.js b/lib/SLDSModal/trigger.js new file mode 100644 index 0000000000..8b4aa0e304 --- /dev/null +++ b/lib/SLDSModal/trigger.js @@ -0,0 +1,42 @@ +/* +Copyright (c) 2015, salesforce.com, inc. All rights reserved. +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: +Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. +Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. +Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +*/ + +'use strict'; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _utils = require('../utils'); + +var _index = require('./index'); + +var _index2 = _interopRequireDefault(_index); + +var SLDSModalTrigger = { + open: function open(cfg) { + var el = document.createElement('span'); + el.setAttribute('data-slds-modal', true); + document.body.appendChild(el); + var comp = _react2['default'].createElement( + _index2['default'], + { + title: cfg.title, + footer: cfg.footer, + returnFocusTo: cfg.returnFocusTo, + isOpen: true }, + cfg.content + ); + _react2['default'].render(comp, el); + } +}; + +module.exports = SLDSModalTrigger; \ No newline at end of file diff --git a/lib/SLDSPicklistBase/index.js b/lib/SLDSPicklistBase/index.js index c32b879791..d9f84f79f3 100644 --- a/lib/SLDSPicklistBase/index.js +++ b/lib/SLDSPicklistBase/index.js @@ -32,6 +32,12 @@ var _utils = require('../utils'); module.exports = _react2['default'].createClass({ displayName: 'exports', + propTypes: { + onClick: _react.PropTypes.func, + onSelect: _react.PropTypes.func.isRequired, + onUpdateHighlighted: _react.PropTypes.func + }, + getDefaultProps: function getDefaultProps() { return { placeholder: 'Select an Option', @@ -43,14 +49,7 @@ module.exports = _react2['default'].createClass({ initialFocus: false, modal: false, className: '', - listClassName: '', - onClick: function onClick() {}, - onSelect: function onSelect(value) { - console.log('onItemSelect should be defined'); - }, - onUpdateHighlighted: function onUpdateHighlighted(nextIndex) { - console.log('onUpdateHighlighted should be defined'); - } + listClassName: '' }; }, diff --git a/lib/index.js b/lib/index.js index 1843c764f3..385f6b74e1 100644 --- a/lib/index.js +++ b/lib/index.js @@ -25,8 +25,18 @@ var _SLDSButton = require('./SLDSButton'); var _SLDSButton2 = _interopRequireDefault(_SLDSButton); +var _SLDSModal = require('./SLDSModal'); + +var _SLDSModal2 = _interopRequireDefault(_SLDSModal); + +var _SLDSModalTrigger = require('./SLDSModal/trigger'); + +var _SLDSModalTrigger2 = _interopRequireDefault(_SLDSModalTrigger); + module.exports = { SLDSPicklistBase: _SLDSPicklistBase2['default'], SLDSSettings: _SLDSSettings2['default'], - SLDSButton: _SLDSButton2['default'] + SLDSButton: _SLDSButton2['default'], + SLDSModal: _SLDSModal2['default'], + SLDSModalTrigger: _SLDSModalTrigger2['default'] }; \ No newline at end of file diff --git a/lib/utils/EventUtil.js b/lib/utils/EventUtil.js index 36df4c22df..1028e1dc3c 100644 --- a/lib/utils/EventUtil.js +++ b/lib/utils/EventUtil.js @@ -16,8 +16,11 @@ var EventUtil = { trapEvent: function trapEvent(event) { event.preventDefault(); event.stopPropagation(); - if (event.nativeEvent) { + if (event.nativeEvent && event.nativeEvent.preventDefault) { event.nativeEvent.preventDefault(); + } + + if (event.nativeEvent && event.nativeEvent.stopPropagation) { event.nativeEvent.stopPropagation(); } }, @@ -27,7 +30,7 @@ var EventUtil = { }, trapImmediate: function trapImmediate(event) { - if (event.nativeEvent) { + if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) { event.nativeEvent.stopImmediatePropagation(); } EventUtil.trap(event); diff --git a/package.json b/package.json index 195d0f5972..efc53ac2c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "design-system-react", - "version": "0.0.6", + "version": "0.0.7", "description": "Salesforce Lightning Design System React components", "scripts": { "start": "node server.js",