diff --git a/docs/index.js b/docs/index.js index 7ef89bd..2ef0d72 100644 --- a/docs/index.js +++ b/docs/index.js @@ -6,17 +6,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol Object.defineProperty(exports, "__esModule", { value: true }); -exports.DropdownContent = exports.DropdownTrigger = undefined; - -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) { @@ -36,24 +25,16 @@ var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); -var _reactDom = require('react-dom'); - -var _classnames = require('classnames'); - -var _classnames2 = _interopRequireDefault(_classnames); - -var _DropdownTrigger = require('./DropdownTrigger.js'); - -var _DropdownTrigger2 = _interopRequireDefault(_DropdownTrigger); - -var _DropdownContent = require('./DropdownContent.js'); - -var _DropdownContent2 = _interopRequireDefault(_DropdownContent); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +function _objectWithoutProperties(obj, keys) { + var target = {};for (var i in obj) { + if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i]; + }return target; +} + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); @@ -72,161 +53,47 @@ function _inherits(subClass, 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 Dropdown = function (_Component) { - _inherits(Dropdown, _Component); - - _createClass(Dropdown, [{ - key: 'componentDidMount', - value: function componentDidMount() { - window.addEventListener('click', this._onWindowClick); - window.addEventListener('touchstart', this._onWindowClick); - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - window.removeEventListener('click', this._onWindowClick); - window.removeEventListener('touchstart', this._onWindowClick); - } - }]); - - function Dropdown(props) { - _classCallCheck(this, Dropdown); - - var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Dropdown).call(this, props)); +var DropdownContent = function (_Component) { + _inherits(DropdownContent, _Component); - _this.state = { - active: false - }; + function DropdownContent() { + _classCallCheck(this, DropdownContent); - _this._onWindowClick = _this._onWindowClick.bind(_this); - _this._onToggleClick = _this._onToggleClick.bind(_this); - return _this; + return _possibleConstructorReturn(this, Object.getPrototypeOf(DropdownContent).apply(this, arguments)); } - _createClass(Dropdown, [{ - key: 'isActive', - value: function isActive() { - return typeof this.props.active === 'boolean' ? this.props.active : this.state.active; - } - }, { - key: 'hide', - value: function hide() { - var _this2 = this; - - this.setState({ - active: false - }, function () { - if (_this2.props.onHide) { - _this2.props.onHide(); - } - }); - } - }, { - key: 'show', - value: function show() { - var _this3 = this; - - this.setState({ - active: true - }, function () { - if (_this3.props.onShow) { - _this3.props.onShow(); - } - }); - } - }, { - key: '_onWindowClick', - value: function _onWindowClick(event) { - var dropdownElement = (0, _reactDom.findDOMNode)(this); - if (event.target !== dropdownElement && !dropdownElement.contains(event.target) && this.isActive()) { - this.hide(); - } - } - }, { - key: '_onToggleClick', - value: function _onToggleClick(event) { - event.preventDefault(); - if (this.isActive()) { - this.hide(); - } else { - this.show(); - } - } - }, { + _createClass(DropdownContent, [{ key: 'render', value: function render() { - var _this4 = this, - _arguments = arguments; - var _props = this.props; var children = _props.children; var className = _props.className; - var disabled = _props.disabled; - var removeElement = _props.removeElement; - // create component classes - var active = this.isActive(); - var dropdownClasses = (0, _classnames2.default)({ - dropdown: true, - 'dropdown--active': active, - 'dropdown--disabled': disabled - }); - // stick callback on trigger element - var boundChildren = _react2.default.Children.map(children, function (child) { - if (child.type === _DropdownTrigger2.default) { - (function () { - var originalOnClick = child.props.onClick; - child = (0, _react.cloneElement)(child, { - ref: 'trigger', - onClick: function onClick(event) { - if (!disabled) { - _this4._onToggleClick(event); - if (originalOnClick) { - originalOnClick.apply(child, _arguments); - } - } - } - }); - })(); - } else if (child.type === _DropdownContent2.default && removeElement && !active) { - child = null; - } - return child; - }); - var cleanProps = _extends({}, this.props); - delete cleanProps.active; - delete cleanProps.onShow; - delete cleanProps.onHide; - delete cleanProps.removeElement; + var dropdownContentProps = _objectWithoutProperties(_props, ['children', 'className']); - return _react2.default.createElement('div', _extends({}, cleanProps, { - className: dropdownClasses + ' ' + className }), boundChildren); + dropdownContentProps.className = 'dropdown__content ' + className; + + return _react2.default.createElement('div', dropdownContentProps, children); } }]); - return Dropdown; + return DropdownContent; }(_react.Component); -Dropdown.propTypes = { - disabled: _propTypes2.default.bool, - active: _propTypes2.default.bool, - onHide: _propTypes2.default.func, - onShow: _propTypes2.default.func, +DropdownContent.displayName = 'DropdownContent'; + +DropdownContent.propTypes = { children: _propTypes2.default.node, - className: _propTypes2.default.string, - removeElement: _propTypes2.default.bool, - style: _propTypes2.default.object + className: _propTypes2.default.string }; -Dropdown.defaultProps = { +DropdownContent.defaultProps = { className: '' }; -exports.DropdownTrigger = _DropdownTrigger2.default; -exports.DropdownContent = _DropdownContent2.default; -exports.default = Dropdown; +exports.default = DropdownContent; -},{"./DropdownContent.js":2,"./DropdownTrigger.js":3,"classnames":4,"prop-types":208,"react":390,"react-dom":212}],2:[function(require,module,exports){ +},{"prop-types":208,"react":390}],2:[function(require,module,exports){ 'use strict'; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; @@ -281,45 +148,45 @@ function _inherits(subClass, 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 DropdownContent = function (_Component) { - _inherits(DropdownContent, _Component); +var DropdownTrigger = function (_Component) { + _inherits(DropdownTrigger, _Component); - function DropdownContent() { - _classCallCheck(this, DropdownContent); + function DropdownTrigger() { + _classCallCheck(this, DropdownTrigger); - return _possibleConstructorReturn(this, Object.getPrototypeOf(DropdownContent).apply(this, arguments)); + return _possibleConstructorReturn(this, Object.getPrototypeOf(DropdownTrigger).apply(this, arguments)); } - _createClass(DropdownContent, [{ + _createClass(DropdownTrigger, [{ key: 'render', value: function render() { var _props = this.props; var children = _props.children; var className = _props.className; - var dropdownContentProps = _objectWithoutProperties(_props, ['children', 'className']); + var dropdownTriggerProps = _objectWithoutProperties(_props, ['children', 'className']); - dropdownContentProps.className = 'dropdown__content ' + className; + dropdownTriggerProps.className = 'dropdown__trigger ' + className; - return _react2.default.createElement('div', dropdownContentProps, children); + return _react2.default.createElement('a', dropdownTriggerProps, children); } }]); - return DropdownContent; + return DropdownTrigger; }(_react.Component); -DropdownContent.displayName = 'DropdownContent'; +DropdownTrigger.displayName = 'DropdownTrigger'; -DropdownContent.propTypes = { +DropdownTrigger.propTypes = { children: _propTypes2.default.node, className: _propTypes2.default.string }; -DropdownContent.defaultProps = { +DropdownTrigger.defaultProps = { className: '' }; -exports.default = DropdownContent; +exports.default = DropdownTrigger; },{"prop-types":208,"react":390}],3:[function(require,module,exports){ 'use strict'; @@ -329,6 +196,17 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol Object.defineProperty(exports, "__esModule", { value: true }); +exports.DropdownContent = exports.DropdownTrigger = undefined; + +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) { @@ -348,16 +226,24 @@ var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); +var _reactDom = require('react-dom'); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _dropdownTrigger = require('./dropdown-trigger.js'); + +var _dropdownTrigger2 = _interopRequireDefault(_dropdownTrigger); + +var _dropdownContent = require('./dropdown-content.js'); + +var _dropdownContent2 = _interopRequireDefault(_dropdownContent); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _objectWithoutProperties(obj, keys) { - var target = {};for (var i in obj) { - if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i]; - }return target; -} - function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); @@ -376,47 +262,161 @@ function _inherits(subClass, 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 DropdownTrigger = function (_Component) { - _inherits(DropdownTrigger, _Component); +var Dropdown = function (_Component) { + _inherits(Dropdown, _Component); - function DropdownTrigger() { - _classCallCheck(this, DropdownTrigger); + _createClass(Dropdown, [{ + key: 'componentDidMount', + value: function componentDidMount() { + window.addEventListener('click', this._onWindowClick); + window.addEventListener('touchstart', this._onWindowClick); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + window.removeEventListener('click', this._onWindowClick); + window.removeEventListener('touchstart', this._onWindowClick); + } + }]); - return _possibleConstructorReturn(this, Object.getPrototypeOf(DropdownTrigger).apply(this, arguments)); + function Dropdown(props) { + _classCallCheck(this, Dropdown); + + var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Dropdown).call(this, props)); + + _this.state = { + active: false + }; + + _this._onWindowClick = _this._onWindowClick.bind(_this); + _this._onToggleClick = _this._onToggleClick.bind(_this); + return _this; } - _createClass(DropdownTrigger, [{ + _createClass(Dropdown, [{ + key: 'isActive', + value: function isActive() { + return typeof this.props.active === 'boolean' ? this.props.active : this.state.active; + } + }, { + key: 'hide', + value: function hide() { + var _this2 = this; + + this.setState({ + active: false + }, function () { + if (_this2.props.onHide) { + _this2.props.onHide(); + } + }); + } + }, { + key: 'show', + value: function show() { + var _this3 = this; + + this.setState({ + active: true + }, function () { + if (_this3.props.onShow) { + _this3.props.onShow(); + } + }); + } + }, { + key: '_onWindowClick', + value: function _onWindowClick(event) { + var dropdownElement = (0, _reactDom.findDOMNode)(this); + if (event.target !== dropdownElement && !dropdownElement.contains(event.target) && this.isActive()) { + this.hide(); + } + } + }, { + key: '_onToggleClick', + value: function _onToggleClick(event) { + event.preventDefault(); + if (this.isActive()) { + this.hide(); + } else { + this.show(); + } + } + }, { key: 'render', value: function render() { + var _this4 = this, + _arguments = arguments; + var _props = this.props; var children = _props.children; var className = _props.className; + var disabled = _props.disabled; + var removeElement = _props.removeElement; + // create component classes - var dropdownTriggerProps = _objectWithoutProperties(_props, ['children', 'className']); - - dropdownTriggerProps.className = 'dropdown__trigger ' + className; + var active = this.isActive(); + var dropdownClasses = (0, _classnames2.default)({ + dropdown: true, + 'dropdown--active': active, + 'dropdown--disabled': disabled + }); + // stick callback on trigger element + var boundChildren = _react2.default.Children.map(children, function (child) { + if (child.type === _dropdownTrigger2.default) { + (function () { + var originalOnClick = child.props.onClick; + child = (0, _react.cloneElement)(child, { + ref: 'trigger', + onClick: function onClick(event) { + if (!disabled) { + _this4._onToggleClick(event); + if (originalOnClick) { + originalOnClick.apply(child, _arguments); + } + } + } + }); + })(); + } else if (child.type === _dropdownContent2.default && removeElement && !active) { + child = null; + } + return child; + }); + var cleanProps = _extends({}, this.props); + delete cleanProps.active; + delete cleanProps.onShow; + delete cleanProps.onHide; + delete cleanProps.removeElement; - return _react2.default.createElement('a', dropdownTriggerProps, children); + return _react2.default.createElement('div', _extends({}, cleanProps, { + className: dropdownClasses + ' ' + className }), boundChildren); } }]); - return DropdownTrigger; + return Dropdown; }(_react.Component); -DropdownTrigger.displayName = 'DropdownTrigger'; - -DropdownTrigger.propTypes = { +Dropdown.propTypes = { + disabled: _propTypes2.default.bool, + active: _propTypes2.default.bool, + onHide: _propTypes2.default.func, + onShow: _propTypes2.default.func, children: _propTypes2.default.node, - className: _propTypes2.default.string + className: _propTypes2.default.string, + removeElement: _propTypes2.default.bool, + style: _propTypes2.default.object }; -DropdownTrigger.defaultProps = { +Dropdown.defaultProps = { className: '' }; -exports.default = DropdownTrigger; +exports.DropdownTrigger = _dropdownTrigger2.default; +exports.DropdownContent = _dropdownContent2.default; +exports.default = Dropdown; -},{"prop-types":208,"react":390}],4:[function(require,module,exports){ +},{"./dropdown-content.js":1,"./dropdown-trigger.js":2,"classnames":4,"prop-types":208,"react":390,"react-dom":212}],4:[function(require,module,exports){ /*! Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see @@ -57937,9 +57937,9 @@ var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); -var _Dropdown = require('../../../lib/components/Dropdown.js'); +var _dropdown = require('../../../lib/components/dropdown.js'); -var _Dropdown2 = _interopRequireDefault(_Dropdown); +var _dropdown2 = _interopRequireDefault(_dropdown); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -57973,10 +57973,10 @@ var AccountDropdown = function (_Component) { return _react2.default.createElement( - _Dropdown2.default, + _dropdown2.default, { className: 'account-dropdown', ref: 'dropdown' }, _react2.default.createElement( - _Dropdown.DropdownTrigger, + _dropdown.DropdownTrigger, null, _react2.default.createElement('img', { className: 'account-dropdown__avatar', src: user.avatar_url }), _react2.default.createElement( @@ -57986,7 +57986,7 @@ var AccountDropdown = function (_Component) { ) ), _react2.default.createElement( - _Dropdown.DropdownContent, + _dropdown.DropdownContent, null, _react2.default.createElement( 'div', @@ -58074,7 +58074,7 @@ AccountDropdown.propTypes = { exports.default = AccountDropdown; -},{"../../../lib/components/Dropdown.js":1,"prop-types":208,"react":390}],398:[function(require,module,exports){ +},{"../../../lib/components/dropdown.js":3,"prop-types":208,"react":390}],398:[function(require,module,exports){ 'use strict'; var _react = require('react'); @@ -58085,9 +58085,9 @@ var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); -var _AccountDropdown = require('./components/AccountDropdown.jsx'); +var _accountDropdown = require('./components/account-dropdown.jsx'); -var _AccountDropdown2 = _interopRequireDefault(_AccountDropdown); +var _accountDropdown2 = _interopRequireDefault(_accountDropdown); var _reactHighlight = require('react-highlight'); @@ -58104,13 +58104,13 @@ var user = { }; // eslint-disable-next-line no-sync -var accountDropdownCode = "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Dropdown, { DropdownTrigger, DropdownContent } from '../../../lib/components/Dropdown.js';\n\nclass AccountDropdown extends Component {\n constructor (props) {\n super(props);\n\n this.handleLinkClick = this.handleLinkClick.bind(this);\n }\n\n handleLinkClick () {\n this.refs.dropdown.hide();\n }\n\n render () {\n const { user } = this.props;\n\n return (\n \n \n My Account\n \n \n
\n Signed in as {user.name}\n
\n \n \n \n \n );\n }\n}\n\nAccountDropdown.propTypes = {\n user: PropTypes.object.isRequired\n};\n\nexport default AccountDropdown;\n"; +var accountDropdownCode = "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Dropdown, { DropdownTrigger, DropdownContent } from '../../../lib/components/dropdown.js';\n\nclass AccountDropdown extends Component {\n constructor (props) {\n super(props);\n\n this.handleLinkClick = this.handleLinkClick.bind(this);\n }\n\n handleLinkClick () {\n this.refs.dropdown.hide();\n }\n\n render () {\n const { user } = this.props;\n\n return (\n \n \n My Account\n \n \n
\n Signed in as {user.name}\n
\n \n \n \n \n );\n }\n}\n\nAccountDropdown.propTypes = {\n user: PropTypes.object.isRequired\n};\n\nexport default AccountDropdown;\n"; -_reactDom2.default.render(_react2.default.createElement(_AccountDropdown2.default, { user: user }), document.getElementById('account-dropdown')); +_reactDom2.default.render(_react2.default.createElement(_accountDropdown2.default, { user: user }), document.getElementById('account-dropdown')); _reactDom2.default.render(_react2.default.createElement( _reactHighlight2.default, { className: 'code jsx' }, accountDropdownCode ), document.getElementById('account-dropdown-code')); -},{"./components/AccountDropdown.jsx":397,"react":390,"react-dom":212,"react-highlight":229}]},{},[398]); +},{"./components/account-dropdown.jsx":397,"react":390,"react-dom":212,"react-highlight":229}]},{},[398]); diff --git a/package.json b/package.json index 17b8b43..99fcfb6 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-simple-dropdown", "version": "3.2.2", "description": "Non-prescriptive React.js dropdown toolkit", - "main": "lib/components/Dropdown.js", + "main": "lib/components/dropdown.js", "scripts": { "prepublish": "npm run build", "postpublish": "npm run clean", diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index f79c5a3..48cf2ac 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import { findDOMNode } from 'react-dom'; import cx from 'classnames'; -import DropdownTrigger from './DropdownTrigger.js'; -import DropdownContent from './DropdownContent.js'; +import DropdownTrigger from './dropdown-trigger.js'; +import DropdownContent from './dropdown-content.js'; class Dropdown extends Component { displayName: 'Dropdown' diff --git a/src/components/DropdownContent.jsx b/src/components/dropdown-content.jsx similarity index 100% rename from src/components/DropdownContent.jsx rename to src/components/dropdown-content.jsx diff --git a/src/components/DropdownTrigger.jsx b/src/components/dropdown-trigger.jsx similarity index 100% rename from src/components/DropdownTrigger.jsx rename to src/components/dropdown-trigger.jsx diff --git a/src/docs/components/AccountDropdown.jsx b/src/docs/components/account-dropdown.jsx similarity index 98% rename from src/docs/components/AccountDropdown.jsx rename to src/docs/components/account-dropdown.jsx index f2cc2ba..be975c0 100644 --- a/src/docs/components/AccountDropdown.jsx +++ b/src/docs/components/account-dropdown.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import Dropdown, { DropdownTrigger, DropdownContent } from '../../../lib/components/Dropdown.js'; +import Dropdown, { DropdownTrigger, DropdownContent } from '../../../lib/components/dropdown.js'; class AccountDropdown extends Component { constructor (props) { diff --git a/src/docs/index.jsx b/src/docs/index.jsx index 28d61e7..a05d3ec 100644 --- a/src/docs/index.jsx +++ b/src/docs/index.jsx @@ -1,7 +1,7 @@ const fs = require('fs'); // brfs doesn't play nice with babelify import React from 'react'; import ReactDOM from 'react-dom'; -import AccountDropdown from './components/AccountDropdown.jsx'; +import AccountDropdown from './components/account-dropdown.jsx'; import Highlight from 'react-highlight'; const user = { @@ -10,7 +10,7 @@ const user = { }; // eslint-disable-next-line no-sync -const accountDropdownCode = fs.readFileSync(`${__dirname}/components/AccountDropdown.jsx`, 'utf8'); +const accountDropdownCode = fs.readFileSync(`${__dirname}/components/account-dropdown.jsx`, 'utf8'); ReactDOM.render(, document.getElementById('account-dropdown')); ReactDOM.render(({accountDropdownCode}), document.getElementById('account-dropdown-code'));