1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.Dropdown = undefined;
|
7 |
|
8 | 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; };
|
9 |
|
10 | var _react = require('react');
|
11 |
|
12 | var _react2 = _interopRequireDefault(_react);
|
13 |
|
14 | var _propTypes = require('prop-types');
|
15 |
|
16 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
17 |
|
18 | var _reactClickOutside = require('react-click-outside');
|
19 |
|
20 | var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);
|
21 |
|
22 | var _Button = require('../Button/Button');
|
23 |
|
24 | var _Button2 = _interopRequireDefault(_Button);
|
25 |
|
26 | var _StyledDiv = require('../StyledDiv');
|
27 |
|
28 | var _StyledDiv2 = _interopRequireDefault(_StyledDiv);
|
29 |
|
30 | var _styles = require('./styles.css');
|
31 |
|
32 | var _styles2 = _interopRequireDefault(_styles);
|
33 |
|
34 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
35 |
|
36 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
37 |
|
38 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
39 |
|
40 | 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; }
|
41 |
|
42 | var Dropdown = exports.Dropdown = function (_React$Component) {
|
43 | _inherits(Dropdown, _React$Component);
|
44 |
|
45 | function Dropdown(props) {
|
46 | _classCallCheck(this, Dropdown);
|
47 |
|
48 | var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, props));
|
49 |
|
50 | _this.state = {
|
51 | isOpened: _this.props.isOpened,
|
52 | clickedItem: null
|
53 | };
|
54 |
|
55 | _this.UNSAFE_componentWillReceiveProps = function (nextProps) {
|
56 | if (nextProps.isOpened !== _this.state.isOpened) {
|
57 | _this.setState({ isOpened: !!nextProps.isOpened });
|
58 | }
|
59 | };
|
60 |
|
61 | _this.componentDidMount = function () {
|
62 | _this.getTriggerRect();
|
63 | };
|
64 |
|
65 | _this.toggleDropdown = function (e) {
|
66 | e.preventDefault();
|
67 |
|
68 | if (_this.props.disabled) return;
|
69 |
|
70 | _this.setState({ isOpened: !_this.state.isOpened }, function () {
|
71 | if (typeof _this.props.changeCallback === 'function') {
|
72 | _this.props.changeCallback(_this.state.isOpened);
|
73 | }
|
74 | });
|
75 | };
|
76 |
|
77 | _this.handleClickOutside = function () {
|
78 | if (!_this.state.isOpened) return;
|
79 |
|
80 | _this.setState({ isOpened: false, confirmationOverlayOpen: false, clickedItem: null }, function () {
|
81 | if (typeof _this.props.changeCallback === 'function') {
|
82 | _this.props.changeCallback(_this.state.isOpened);
|
83 | }
|
84 | });
|
85 | };
|
86 |
|
87 | _this.listItemCallback = function (item) {
|
88 | _this.setState({ isOpened: false, confirmationOverlayOpen: false, clickedItem: null });
|
89 |
|
90 | if (typeof item.callback === 'function') {
|
91 | item.callback(item.name);
|
92 | }
|
93 | };
|
94 |
|
95 | _this.handleConfirmation = function (confirm, e) {
|
96 |
|
97 |
|
98 | e.stopPropagation();
|
99 |
|
100 | if (confirm) {
|
101 | _this.listItemCallback(_this.state.clickedItem);
|
102 | } else {
|
103 | _this.setState({ confirmationOverlayOpen: false, clickedItem: null });
|
104 | }
|
105 | };
|
106 |
|
107 | _this.handleItemClick = function (item, e) {
|
108 |
|
109 |
|
110 | e.stopPropagation();
|
111 |
|
112 | if (item.callbackConfirmation) {
|
113 | _this.setState({ confirmationOverlayOpen: true, clickedItem: item });
|
114 | } else {
|
115 | _this.listItemCallback(item);
|
116 | }
|
117 | };
|
118 |
|
119 | _this.handleDropdownClick = function (e) {
|
120 | e.stopPropagation();
|
121 | };
|
122 |
|
123 | _this.getTriggerRect = function () {
|
124 | _this._triggerRect = _this._trigger && _this._trigger.getBoundingClientRect();
|
125 | };
|
126 |
|
127 | _this.getTriggerNode = function () {
|
128 | return _react2.default.isValidElement(_this.props.trigger) ? _react2.default.cloneElement(_this.props.trigger, { disabled: _this.props.disabled }) : _this.props.trigger;
|
129 | };
|
130 |
|
131 | _this.render = function () {
|
132 | var listItems = _this.props.listItems;
|
133 | var listItemNodes = listItems instanceof Array ? listItems.map(function (item, index) {
|
134 | return _react2.default.createElement(
|
135 | 'li',
|
136 | { key: index, onClick: _this.handleItemClick.bind(_this, item) },
|
137 | item.name
|
138 | );
|
139 | }) : [];
|
140 |
|
141 | return _react2.default.createElement(
|
142 | _StyledDiv2.default,
|
143 | {
|
144 | css: (0, _styles2.default)(_extends({}, _this.props, { isOpened: _this.state.isOpened, triggerRect: _this._triggerRect })),
|
145 | className: [_this.props.optClass, _this.props.className].join(' ').trim() },
|
146 | _react2.default.createElement(
|
147 | 'span',
|
148 | { ref: function ref(c) {
|
149 | return _this._trigger = c;
|
150 | }, className: 'trigger', onClick: _this.toggleDropdown },
|
151 | _this.getTriggerNode()
|
152 | ),
|
153 | _react2.default.createElement(
|
154 | 'div',
|
155 | { className: 'dropdown-wrapper', onClick: _this.handleDropdownClick.bind(_this) },
|
156 | listItemNodes.length > 0 && !_this.state.confirmationOverlayOpen ? _react2.default.createElement(
|
157 | 'ul',
|
158 | { className: 'list-wrapper' },
|
159 | listItemNodes
|
160 | ) : _this.props.children,
|
161 | _this.state.confirmationOverlayOpen && _react2.default.createElement(
|
162 | 'div',
|
163 | { className: 'overlay' },
|
164 | _react2.default.createElement(
|
165 | 'span',
|
166 | null,
|
167 | 'Are you sure?'
|
168 | ),
|
169 | _react2.default.createElement(
|
170 | 'div',
|
171 | { className: 'button-wrapper' },
|
172 | _react2.default.createElement(
|
173 | _Button2.default,
|
174 | { onClick: _this.handleConfirmation.bind(_this, false), optClass: 'danger-alt' },
|
175 | 'Cancel'
|
176 | ),
|
177 | _react2.default.createElement(
|
178 | _Button2.default,
|
179 | { onClick: _this.handleConfirmation.bind(_this, true) },
|
180 | 'Yes'
|
181 | )
|
182 | )
|
183 | )
|
184 | )
|
185 | );
|
186 | };
|
187 |
|
188 | if (props.optClass && process.env.NODE_ENV !== 'production') {
|
189 | console.warn('Dropdown: Use of optClass will be deprecated as of react-ions 6.0.0, please use `className` instead');
|
190 | }
|
191 | return _this;
|
192 | }
|
193 |
|
194 | return Dropdown;
|
195 | }(_react2.default.Component);
|
196 |
|
197 | Dropdown.defaultProps = {
|
198 | isOpened: false
|
199 | };
|
200 | Dropdown.propTypes = {
|
201 | |
202 |
|
203 |
|
204 | changeCallback: _propTypes2.default.func,
|
205 | |
206 |
|
207 |
|
208 | isOpened: _propTypes2.default.bool,
|
209 | |
210 |
|
211 |
|
212 | alignment: _propTypes2.default.oneOf(['left', 'right']),
|
213 | |
214 |
|
215 |
|
216 | optClass: _propTypes2.default.string,
|
217 | |
218 |
|
219 |
|
220 | trigger: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.node]),
|
221 | |
222 |
|
223 |
|
224 | listItems: _propTypes2.default.array,
|
225 | |
226 |
|
227 |
|
228 | className: _propTypes2.default.string,
|
229 | |
230 |
|
231 |
|
232 | disabled: _propTypes2.default.bool
|
233 | };
|
234 | Dropdown.defaultProps = {
|
235 | alignment: 'left',
|
236 | isOpened: false
|
237 | };
|
238 | exports.default = (0, _reactClickOutside2.default)(Dropdown); |
\ | No newline at end of file |