1 |
|
2 | 'use strict';
|
3 |
|
4 | var _extends2 = require('babel-runtime/helpers/extends');
|
5 |
|
6 | var _extends3 = _interopRequireDefault(_extends2);
|
7 |
|
8 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
9 |
|
10 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
11 |
|
12 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
13 |
|
14 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
15 |
|
16 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
17 |
|
18 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
19 |
|
20 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
21 |
|
22 | var _createClass3 = _interopRequireDefault(_createClass2);
|
23 |
|
24 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
25 |
|
26 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
27 |
|
28 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
29 |
|
30 | var _inherits3 = _interopRequireDefault(_inherits2);
|
31 |
|
32 | var _react = require('react');
|
33 |
|
34 | var _react2 = _interopRequireDefault(_react);
|
35 |
|
36 | var _classnames = require('classnames');
|
37 |
|
38 | var _classnames2 = _interopRequireDefault(_classnames);
|
39 |
|
40 | var _puiReactMixins = require('pui-react-mixins');
|
41 |
|
42 | var _puiReactMixins2 = _interopRequireDefault(_puiReactMixins);
|
43 |
|
44 | var _scrim_mixin = require('pui-react-mixins/mixins/scrim_mixin');
|
45 |
|
46 | var _scrim_mixin2 = _interopRequireDefault(_scrim_mixin);
|
47 |
|
48 | var _transition_mixin = require('pui-react-mixins/mixins/transition_mixin');
|
49 |
|
50 | var _transition_mixin2 = _interopRequireDefault(_transition_mixin);
|
51 |
|
52 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
53 |
|
54 | var _require = require('pui-react-iconography'),
|
55 | Icon = _require.Icon;
|
56 |
|
57 | require('pui-css-dropdowns');
|
58 |
|
59 | var types = _react2.default.PropTypes;
|
60 |
|
61 | function defaultToggleNode(dropCaret) {
|
62 | if (dropCaret) return _react2.default.createElement(Icon, { src: 'chevron_down' });
|
63 | }
|
64 |
|
65 | var Dropdown = function (_mixin$with) {
|
66 | (0, _inherits3.default)(Dropdown, _mixin$with);
|
67 |
|
68 | function Dropdown(props, context) {
|
69 | (0, _classCallCheck3.default)(this, Dropdown);
|
70 |
|
71 | var _this = (0, _possibleConstructorReturn3.default)(this, (Dropdown.__proto__ || (0, _getPrototypeOf2.default)(Dropdown)).call(this, props, context));
|
72 |
|
73 | _this.click = function (event) {
|
74 | _this.setState({ open: !_this.state.open });
|
75 | _this.props.onClick && _this.props.onClick(event);
|
76 | };
|
77 |
|
78 | _this.scrimClick = function () {
|
79 | _this.setState({ open: false });
|
80 | };
|
81 |
|
82 | _this.menuClick = function () {
|
83 | if (!_this.props.closeOnMenuClick) return;
|
84 | _this.setState({ open: false });
|
85 | };
|
86 |
|
87 | _this.state = {
|
88 | open: false
|
89 | };
|
90 | return _this;
|
91 | }
|
92 |
|
93 | (0, _createClass3.default)(Dropdown, [{
|
94 | key: 'render',
|
95 | value: function render() {
|
96 | var _props = this.props,
|
97 | border = _props.border,
|
98 | buttonClassName = _props.buttonClassName,
|
99 | children = _props.children,
|
100 | className = _props.className,
|
101 | closeOnMenuClick = _props.closeOnMenuClick,
|
102 | disableScrim = _props.disableScrim,
|
103 | dropCaret = _props.dropCaret,
|
104 | flat = _props.flat,
|
105 | link = _props.link,
|
106 | pullRight = _props.pullRight,
|
107 | onClick = _props.onClick,
|
108 | onEntered = _props.onEntered,
|
109 | onExited = _props.onExited,
|
110 | split = _props.split,
|
111 | title = _props.title,
|
112 | toggle = _props.toggle,
|
113 | menuCaret = _props.menuCaret,
|
114 | props = (0, _objectWithoutProperties3.default)(_props, ['border', 'buttonClassName', 'children', 'className', 'closeOnMenuClick', 'disableScrim', 'dropCaret', 'flat', 'link', 'pullRight', 'onClick', 'onEntered', 'onExited', 'split', 'title', 'toggle', 'menuCaret']);
|
115 | var open = this.state.open;
|
116 |
|
117 |
|
118 | var dropdownLabel = void 0,
|
119 | dropdownToggle = void 0,
|
120 | toggleNode = void 0;
|
121 |
|
122 | toggleNode = toggle ? toggle : defaultToggleNode(dropCaret);
|
123 |
|
124 | var buttonStyleClasses = (0, _classnames2.default)('btn-default', buttonClassName);
|
125 | dropdownLabel = split ? _react2.default.createElement(
|
126 | 'div',
|
127 | { className: (0, _classnames2.default)('dropdown-label', buttonStyleClasses) },
|
128 | title
|
129 | ) : null;
|
130 | dropdownToggle = _react2.default.createElement(
|
131 | 'button',
|
132 | { type: 'button', onClick: this.click, className: (0, _classnames2.default)('dropdown-toggle', buttonStyleClasses) },
|
133 | !split ? title : null,
|
134 | toggleNode
|
135 | );
|
136 |
|
137 | var dropdownClasses = (0, _classnames2.default)('dropdown', {
|
138 | 'dropdown-flat': flat, open: open, split: split, 'dropdown-link': link
|
139 | }, className);
|
140 | var dropdownMenuClasses = (0, _classnames2.default)('dropdown-menu', {
|
141 | 'dropdown-border': border,
|
142 | 'dropdown-menu-right': pullRight,
|
143 | 'dropdown-menu-float': split || flat || menuCaret,
|
144 | 'dropdown-menu-caret': menuCaret
|
145 | });
|
146 | return _react2.default.createElement(
|
147 | 'div',
|
148 | (0, _extends3.default)({ className: dropdownClasses }, props),
|
149 | dropdownLabel,
|
150 | dropdownToggle,
|
151 | _react2.default.createElement(
|
152 | 'div',
|
153 | { className: dropdownMenuClasses },
|
154 | _react2.default.createElement(
|
155 | 'ul',
|
156 | { onClick: this.menuClick },
|
157 | children
|
158 | )
|
159 | )
|
160 | );
|
161 | }
|
162 | }]);
|
163 | return Dropdown;
|
164 | }((0, _puiReactMixins2.default)(_react2.default.Component).with(_scrim_mixin2.default, _transition_mixin2.default));
|
165 |
|
166 | Dropdown.propTypes = {
|
167 | border: types.bool,
|
168 | buttonClassName: types.string,
|
169 | closeOnMenuClick: types.bool,
|
170 | disableScrim: types.bool,
|
171 | dropCaret: types.bool,
|
172 | flat: types.bool,
|
173 | link: types.bool,
|
174 | pullRight: types.bool,
|
175 | split: types.bool,
|
176 | menuCaret: types.bool,
|
177 | title: types.node,
|
178 | toggle: types.node,
|
179 | onClick: types.func,
|
180 | onEntered: types.func,
|
181 | onExited: types.func
|
182 | };
|
183 | Dropdown.defaultProps = {
|
184 | closeOnMenuClick: true,
|
185 | disableScrim: false,
|
186 | dropCaret: true
|
187 | };
|
188 |
|
189 | var DropdownItem = function (_React$Component) {
|
190 | (0, _inherits3.default)(DropdownItem, _React$Component);
|
191 |
|
192 | function DropdownItem() {
|
193 | var _ref;
|
194 |
|
195 | var _temp, _this2, _ret;
|
196 |
|
197 | (0, _classCallCheck3.default)(this, DropdownItem);
|
198 |
|
199 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
200 | args[_key] = arguments[_key];
|
201 | }
|
202 |
|
203 | return _ret = (_temp = (_this2 = (0, _possibleConstructorReturn3.default)(this, (_ref = DropdownItem.__proto__ || (0, _getPrototypeOf2.default)(DropdownItem)).call.apply(_ref, [this].concat(args))), _this2), _this2.handleClick = function (event) {
|
204 | var _this2$props = _this2.props,
|
205 | href = _this2$props.href,
|
206 | disabled = _this2$props.disabled,
|
207 | onSelect = _this2$props.onSelect,
|
208 | eventKey = _this2$props.eventKey;
|
209 |
|
210 |
|
211 | if (!href || disabled) {
|
212 | event.preventDefault();
|
213 | }
|
214 |
|
215 | if (disabled) return;
|
216 |
|
217 | if (onSelect) {
|
218 | onSelect(event, eventKey);
|
219 | }
|
220 | }, _temp), (0, _possibleConstructorReturn3.default)(_this2, _ret);
|
221 | }
|
222 |
|
223 | (0, _createClass3.default)(DropdownItem, [{
|
224 | key: 'render',
|
225 | value: function render() {
|
226 | var _props2 = this.props,
|
227 | children = _props2.children,
|
228 | className = _props2.className,
|
229 | eventKey = _props2.eventKey,
|
230 | style = _props2.style,
|
231 | href = _props2.href,
|
232 | header = _props2.header,
|
233 | divider = _props2.divider,
|
234 | disabled = _props2.disabled,
|
235 | anchorProps = (0, _objectWithoutProperties3.default)(_props2, ['children', 'className', 'eventKey', 'style', 'href', 'header', 'divider', 'disabled']);
|
236 |
|
237 |
|
238 | if (header) return _react2.default.createElement(
|
239 | 'li',
|
240 | { role: 'heading', className: 'dropdown-header' },
|
241 | children
|
242 | );
|
243 | if (divider) return _react2.default.createElement('li', { role: 'separator', className: 'divider' });
|
244 |
|
245 | var anchor = void 0;
|
246 | if (href) {
|
247 | anchor = _react2.default.createElement(
|
248 | 'a',
|
249 | (0, _extends3.default)({}, (0, _extends3.default)({ href: href, disabled: disabled }, anchorProps), { onClick: this.handleClick }),
|
250 | children
|
251 | );
|
252 | } else {
|
253 | anchor = children;
|
254 | }
|
255 |
|
256 | var disabledClass = disabled ? 'disabled' : '';
|
257 | var dropdownItemClass = (0, _classnames2.default)(className, disabledClass);
|
258 | return _react2.default.createElement(
|
259 | 'li',
|
260 | (0, _extends3.default)({ style: style }, { className: dropdownItemClass, onClick: href ? '' : this.handleClick }),
|
261 | anchor
|
262 | );
|
263 | }
|
264 | }]);
|
265 | return DropdownItem;
|
266 | }(_react2.default.Component);
|
267 |
|
268 | DropdownItem.propTypes = {
|
269 | className: types.string,
|
270 | style: types.object,
|
271 | href: types.string,
|
272 | header: types.bool,
|
273 | divider: types.bool,
|
274 | disabled: types.bool,
|
275 | eventKey: types.string,
|
276 | onSelect: types.func
|
277 | };
|
278 |
|
279 |
|
280 | module.exports = {
|
281 | Dropdown: Dropdown,
|
282 | DropdownItem: DropdownItem
|
283 | }; |
\ | No newline at end of file |