1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.SelectMany = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
13 |
|
14 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
15 |
|
16 | var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
|
17 |
|
18 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
|
19 |
|
20 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
21 |
|
22 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
23 |
|
24 | var _propTypes = require('prop-types');
|
25 |
|
26 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
27 |
|
28 | var _react = require('react');
|
29 |
|
30 | var _react2 = _interopRequireDefault(_react);
|
31 |
|
32 | var _helperFunctions = require('./helperFunctions');
|
33 |
|
34 | var _CTCPopover = require('./CTCPopover');
|
35 |
|
36 | var _CTCPopover2 = _interopRequireDefault(_CTCPopover);
|
37 |
|
38 | var _defaultStyles = require('./defaultStyles');
|
39 |
|
40 | var _Button = require('./Button');
|
41 |
|
42 | var _Button2 = _interopRequireDefault(_Button);
|
43 |
|
44 | var _StyledSelect = require('./StyledSelect');
|
45 |
|
46 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
47 |
|
48 | var SelectMany = function SelectMany(_ref) {
|
49 | var _ref$onChange = _ref.onChange,
|
50 | onChange = _ref$onChange === undefined ? function (x) {
|
51 | return console.log(x);
|
52 | } : _ref$onChange,
|
53 | _ref$renderCurrentOpt = _ref.renderCurrentOption,
|
54 | renderCurrentOption = _ref$renderCurrentOpt === undefined ? function (option) {
|
55 | return option.label;
|
56 | } : _ref$renderCurrentOpt,
|
57 | _ref$sortingFunction = _ref.sortingFunction,
|
58 | sortingFunction = _ref$sortingFunction === undefined ? function () {
|
59 | return 0;
|
60 | } : _ref$sortingFunction,
|
61 | _ref$showUnselectedOn = _ref.showUnselectedOnly,
|
62 | showUnselectedOnly = _ref$showUnselectedOn === undefined ? false : _ref$showUnselectedOn,
|
63 | children = _ref.children,
|
64 | renderTrigger = _ref.renderTrigger,
|
65 | _ref$initialOptions = _ref.initialOptions,
|
66 | initialOptions = _ref$initialOptions === undefined ? [] : _ref$initialOptions,
|
67 | props = (0, _objectWithoutProperties3.default)(_ref, ['onChange', 'renderCurrentOption', 'sortingFunction', 'showUnselectedOnly', 'children', 'renderTrigger', 'initialOptions']);
|
68 |
|
69 | function init(initialOptions) {
|
70 | return { currentOptions: initialOptions };
|
71 | }
|
72 |
|
73 | var reducer = function reducer(_ref2, action) {
|
74 | var currentOptions = _ref2.currentOptions;
|
75 |
|
76 | var updatedState = {};
|
77 | switch (action.type) {
|
78 | case 'add':
|
79 | if (sortingFunction) {
|
80 | updatedState = {
|
81 | currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option]).sort(sortingFunction)
|
82 | };
|
83 | } else {
|
84 | updatedState = {
|
85 | currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option])
|
86 | };
|
87 | }
|
88 | break;
|
89 | case 'remove':
|
90 | updatedState = {
|
91 | currentOptions: currentOptions.filter(function (currentOption) {
|
92 | return currentOption.value !== action.payload.option.value;
|
93 | })
|
94 | };
|
95 | break;
|
96 | case 'clear':
|
97 | updatedState = init(action.payload.options);
|
98 | break;
|
99 | default:
|
100 | throw new Error();
|
101 | }
|
102 | onChange(updatedState.currentOptions);
|
103 | return updatedState;
|
104 | };
|
105 |
|
106 | var _useReducer = (0, _react.useReducer)(reducer, initialOptions, init),
|
107 | _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
|
108 | currentOptions = _useReducer2[0].currentOptions,
|
109 | dispatch = _useReducer2[1];
|
110 |
|
111 | var renderClearSelection = function renderClearSelection() {
|
112 | return _react2.default.createElement(_Button2.default, {
|
113 | type: 'cancel',
|
114 | colors: _defaultStyles.buttonStyles.redden,
|
115 | onClick: function onClick(e) {
|
116 | e.stopPropagation();
|
117 | e.nativeEvent.stopImmediatePropagation();
|
118 | dispatch({ type: 'clear', payload: { options: [] } });
|
119 | }
|
120 | });
|
121 | };
|
122 | var renderRemoveCurrentOption = function renderRemoveCurrentOption(currentOption) {
|
123 | return _react2.default.createElement(_Button2.default, {
|
124 | className: 'selectmany__option__remove',
|
125 | type: 'cancel',
|
126 | colors: 'darkhighlight',
|
127 | onClick: function onClick(e) {
|
128 | e.stopPropagation();
|
129 | e.nativeEvent.stopImmediatePropagation();
|
130 | dispatch({
|
131 | type: 'remove',
|
132 | payload: { option: currentOption }
|
133 | });
|
134 | }
|
135 | });
|
136 | };
|
137 |
|
138 | var isActive = function isActive(option) {
|
139 | return currentOptions.some(function (currentOption) {
|
140 | return currentOption.value === option.value;
|
141 | });
|
142 | };
|
143 |
|
144 | var getChildProps = function getChildProps() {
|
145 | var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
146 |
|
147 | var className = _ref3.className,
|
148 | style = _ref3.style,
|
149 | _onClick = _ref3.onClick,
|
150 | option = _ref3.option,
|
151 | props = (0, _objectWithoutProperties3.default)(_ref3, ['className', 'style', 'onClick', 'option']);
|
152 |
|
153 | var optionIsActive = isActive(option);
|
154 | var handleClassName = (0, _helperFunctions.advancedMulti)({
|
155 | unflattenedBases: [className, 'selectmany__option'],
|
156 | flipVars: [[optionIsActive, 'active', 'inactive']]
|
157 | });
|
158 | return (0, _extends3.default)({
|
159 | onClick: function onClick(e) {
|
160 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
161 | args[_key - 1] = arguments[_key];
|
162 | }
|
163 |
|
164 | e.stopPropagation();
|
165 | e.nativeEvent.stopImmediatePropagation();
|
166 | if (isActive(option)) {
|
167 | dispatch({ type: 'remove', payload: { option: option } });
|
168 | } else {
|
169 | dispatch({ type: 'add', payload: { option: option } });
|
170 | }
|
171 | _onClick && _onClick.apply(undefined, [e].concat(args));
|
172 | },
|
173 | className: handleClassName,
|
174 | style: style
|
175 | }, props);
|
176 | };
|
177 |
|
178 | var handleRenderTrigger = function handleRenderTrigger(_ref4) {
|
179 | var isOn = _ref4.isOn,
|
180 | _getTriggerProps = _ref4.getTriggerProps;
|
181 | return renderTrigger ? renderTrigger({
|
182 | dispatch: dispatch,
|
183 | currentOptions: currentOptions,
|
184 | isOn: isOn,
|
185 | getTriggerProps: function getTriggerProps() {
|
186 | var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
187 |
|
188 | var className = _ref5.className,
|
189 | props = (0, _objectWithoutProperties3.default)(_ref5, ['className']);
|
190 | return _getTriggerProps((0, _extends3.default)({
|
191 | className: ['selectmany__trigger', className]
|
192 | }, props));
|
193 | }
|
194 | }) : _react2.default.createElement(
|
195 | _Button2.default,
|
196 | {
|
197 | type: 'caretdown',
|
198 | isOn: isOn
|
199 | },
|
200 | function (_ref6) {
|
201 | var getButtonProps = _ref6.getButtonProps,
|
202 | icon = _ref6.icon,
|
203 | commonProps = (0, _objectWithoutProperties3.default)(_ref6, ['getButtonProps', 'icon']);
|
204 | return _react2.default.createElement(
|
205 | _StyledSelect.DROPDOWN_TRIGGER,
|
206 | (0, _extends3.default)({}, commonProps, getButtonProps((0, _extends3.default)({}, _getTriggerProps({
|
207 | className: 'selectmany__trigger'
|
208 | })))),
|
209 | _react2.default.createElement(
|
210 | _StyledSelect.TRIGGER_OPTIONS,
|
211 | {
|
212 | className: 'selectmany__options'
|
213 | },
|
214 | currentOptions.length > 0 ? currentOptions.map(function (currentOption, i) {
|
215 | return _react2.default.createElement(
|
216 | _StyledSelect.TRIGGER_OPTION,
|
217 | {
|
218 | key: '' + currentOption.value + i,
|
219 | className: 'selectmany__option'
|
220 | },
|
221 | _react2.default.createElement(
|
222 | _StyledSelect.TRIGGER_OPTION_LABEL,
|
223 | { className: 'selectmany__option__label' },
|
224 | renderCurrentOption(currentOption)
|
225 | ),
|
226 | renderRemoveCurrentOption(currentOption)
|
227 | );
|
228 | }) : _react2.default.createElement(
|
229 | _StyledSelect.EMPTY_GUIDE,
|
230 | {
|
231 | className: 'selectmany__guide'
|
232 | },
|
233 | 'select one...'
|
234 | )
|
235 | ),
|
236 | _react2.default.createElement(
|
237 | _StyledSelect.TRIGGER_CONTROLS,
|
238 | { className: 'selectmany__removeall' },
|
239 | currentOptions.length > 0 && renderClearSelection(),
|
240 | _react2.default.createElement(
|
241 | _StyledSelect.TRIGGER_CONTROLS_CARET,
|
242 | {
|
243 | className: 'selectmany__caret'
|
244 | },
|
245 | icon
|
246 | )
|
247 | )
|
248 | );
|
249 | }
|
250 | );
|
251 | };
|
252 | return _react2.default.createElement(
|
253 | _CTCPopover2.default,
|
254 | (0, _extends3.default)({
|
255 | renderTrigger: handleRenderTrigger
|
256 |
|
257 | }, props),
|
258 | function (_ref7) {
|
259 | var getChildrenProps = _ref7.getChildrenProps,
|
260 | toggleIsOn = _ref7.toggleIsOn;
|
261 | return typeof children === 'function' ? children({
|
262 | getChildProps: getChildProps,
|
263 | getChildrenProps: getChildrenProps,
|
264 | toggleIsOn: toggleIsOn,
|
265 | currentOptions: currentOptions
|
266 | }) : _react2.default.createElement(
|
267 | _StyledSelect.DROPDOWN_CHILDREN,
|
268 | (0, _extends3.default)({}, getChildrenProps({ style: { zIndex: 1 } })),
|
269 | children.filter(function (option) {
|
270 | if (showUnselectedOnly) {
|
271 | if (!currentOptions.some(function (currentOption) {
|
272 | return currentOption.value === option.value;
|
273 | })) {
|
274 | return option;
|
275 | }
|
276 | } else {
|
277 | return option;
|
278 | }
|
279 | }).map(function (option) {
|
280 | return _react2.default.createElement(
|
281 | _Button2.default,
|
282 | (0, _extends3.default)({}, getChildProps({ option: option }), {
|
283 | colors: _defaultStyles.buttonStyles.monochrome,
|
284 | isOn: currentOptions.some(function (currentOption) {
|
285 | return currentOption.value === option.value;
|
286 | }),
|
287 | key: option.value
|
288 | }),
|
289 | option.label
|
290 | );
|
291 | })
|
292 | );
|
293 | }
|
294 | );
|
295 | };
|
296 |
|
297 | exports.SelectMany = SelectMany;
|
298 | exports.default = SelectMany; |
\ | No newline at end of file |