react-misc-toolbox
Version:
- [ ] diagramexample | optimize creating from blank slate
309 lines (271 loc) • 10.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SelectMany = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _helperFunctions = require('./helperFunctions');
var _CTCPopover = require('./CTCPopover');
var _CTCPopover2 = _interopRequireDefault(_CTCPopover);
var _defaultStyles = require('./defaultStyles');
var _Button = require('./Button');
var _Button2 = _interopRequireDefault(_Button);
var _StyledSelect = require('./StyledSelect');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var defaultRenderCurrentOption = function defaultRenderCurrentOption(_ref) {
var label = _ref.label;
if (typeof label === 'string') {
return label;
} else {
var flattened = (0, _helperFunctions.flatten)(label);
return flattened.join(', ');
}
};
var SelectMany = function SelectMany(_ref2) {
var _ref2$onChange = _ref2.onChange,
onChange = _ref2$onChange === undefined ? function (x) {
return console.log(x);
} : _ref2$onChange,
_ref2$renderCurrentOp = _ref2.renderCurrentOption,
renderCurrentOption = _ref2$renderCurrentOp === undefined ? defaultRenderCurrentOption : _ref2$renderCurrentOp,
_ref2$sortingFunction = _ref2.sortingFunction,
sortingFunction = _ref2$sortingFunction === undefined ? function () {
return 0;
} : _ref2$sortingFunction,
_ref2$showUnselectedO = _ref2.showUnselectedOnly,
showUnselectedOnly = _ref2$showUnselectedO === undefined ? false : _ref2$showUnselectedO,
children = _ref2.children,
_ref2$shouldRenderCle = _ref2.shouldRenderClearSelection,
shouldRenderClearSelection = _ref2$shouldRenderCle === undefined ? true : _ref2$shouldRenderCle,
renderTrigger = _ref2.renderTrigger,
_ref2$initialOptions = _ref2.initialOptions,
initialOptions = _ref2$initialOptions === undefined ? [] : _ref2$initialOptions,
props = (0, _objectWithoutProperties3.default)(_ref2, ['onChange', 'renderCurrentOption', 'sortingFunction', 'showUnselectedOnly', 'children', 'shouldRenderClearSelection', 'renderTrigger', 'initialOptions']);
function init(initialOptions) {
return { currentOptions: initialOptions };
}
var reducer = function reducer(_ref3, action) {
var currentOptions = _ref3.currentOptions;
var updatedState = {};
switch (action.type) {
case 'add':
if (sortingFunction) {
updatedState = {
currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option]).sort(sortingFunction)
};
} else {
updatedState = {
currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option])
};
}
break;
case 'remove':
updatedState = {
currentOptions: currentOptions.filter(function (currentOption) {
return currentOption.value !== action.payload.option.value;
})
};
break;
case 'clear':
updatedState = init(action.payload.options);
break;
default:
throw new Error();
}
onChange(updatedState.currentOptions);
return updatedState;
};
var _useReducer = (0, _react.useReducer)(reducer, initialOptions, init),
_useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
currentOptions = _useReducer2[0].currentOptions,
dispatch = _useReducer2[1];
var renderClearSelection = function renderClearSelection() {
return shouldRenderClearSelection ? _react2.default.createElement(_Button2.default, {
type: 'cancel',
colors: _defaultStyles.buttonStyles.redden,
onClick: function onClick(e) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
dispatch({ type: 'clear', payload: { options: [] } });
}
}) : null;
};
var renderRemoveCurrentOption = function renderRemoveCurrentOption(currentOption) {
return _react2.default.createElement(_Button2.default, {
className: 'selectmany__option__remove',
type: 'cancel',
colors: 'darkhighlight',
onClick: function onClick(e) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
dispatch({
type: 'remove',
payload: { option: currentOption }
});
}
});
};
var isActive = function isActive(option) {
return currentOptions.some(function (currentOption) {
return currentOption.value === option.value;
});
};
var getChildProps = function getChildProps() {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var className = _ref4.className,
style = _ref4.style,
_onClick = _ref4.onClick,
option = _ref4.option,
props = (0, _objectWithoutProperties3.default)(_ref4, ['className', 'style', 'onClick', 'option']);
var optionIsActive = isActive(option);
var handleClassName = (0, _helperFunctions.advancedMulti)({
unflattenedBases: [className, 'selectmany__option'],
flipVars: [[optionIsActive, 'active', 'inactive']]
});
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
if (isActive(option)) {
dispatch({ type: 'remove', payload: { option: option } });
} else {
dispatch({ type: 'add', payload: { option: option } });
}
_onClick && _onClick.apply(undefined, [e].concat(args));
},
className: handleClassName,
style: style
}, props);
};
var handleRenderTrigger = function handleRenderTrigger(_ref5) {
var isOn = _ref5.isOn,
_getTriggerProps = _ref5.getTriggerProps;
return renderTrigger ? renderTrigger({
dispatch: dispatch,
currentOptions: currentOptions,
isOn: isOn,
getTriggerProps: function getTriggerProps() {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var className = _ref6.className,
props = (0, _objectWithoutProperties3.default)(_ref6, ['className']);
return _getTriggerProps((0, _extends3.default)({
className: ['selectmany__trigger', className]
}, props));
}
}) : _react2.default.createElement(
_Button2.default,
{
type: 'caretdown',
isOn: isOn
},
function (_ref7) {
var getButtonProps = _ref7.getButtonProps,
icon = _ref7.icon,
commonProps = (0, _objectWithoutProperties3.default)(_ref7, ['getButtonProps', 'icon']);
return _react2.default.createElement(
_StyledSelect.DROPDOWN_TRIGGER,
(0, _extends3.default)({}, commonProps, getButtonProps((0, _extends3.default)({}, _getTriggerProps({
className: 'selectmany__trigger'
})))),
_react2.default.createElement(
_StyledSelect.TRIGGER_OPTIONS,
{
className: 'selectmany__options'
},
currentOptions.length > 0 ? currentOptions.map(function (currentOption, i) {
return _react2.default.createElement(
_StyledSelect.TRIGGER_OPTION,
{
key: '' + currentOption.value + i,
className: 'selectmany__option'
},
_react2.default.createElement(
_StyledSelect.TRIGGER_OPTION_LABEL,
{ className: 'selectmany__option__label' },
renderCurrentOption(currentOption)
),
renderRemoveCurrentOption(currentOption)
);
}) : _react2.default.createElement(
_StyledSelect.EMPTY_GUIDE,
{
className: 'selectmany__guide'
},
'select one...'
)
),
_react2.default.createElement(
_StyledSelect.TRIGGER_CONTROLS,
{ className: 'selectmany__removeall' },
currentOptions.length > 0 && renderClearSelection(),
_react2.default.createElement(
_StyledSelect.TRIGGER_CONTROLS_CARET,
{
className: 'selectmany__caret'
},
icon
)
)
);
}
);
};
return _react2.default.createElement(
_CTCPopover2.default,
(0, _extends3.default)({
renderTrigger: handleRenderTrigger
}, props),
function (_ref8) {
var getChildrenProps = _ref8.getChildrenProps,
toggleIsOn = _ref8.toggleIsOn;
return typeof children === 'function' ? children({
getChildProps: getChildProps,
getChildrenProps: getChildrenProps,
toggleIsOn: toggleIsOn,
currentOptions: currentOptions
}) : _react2.default.createElement(
_StyledSelect.DROPDOWN_CHILDREN,
(0, _extends3.default)({}, getChildrenProps({ style: { zIndex: 1 } })),
children.filter(function (option) {
if (showUnselectedOnly) {
if (!currentOptions.some(function (currentOption) {
return currentOption.value === option.value;
})) {
return option;
}
} else {
return option;
}
}).map(function (option) {
return _react2.default.createElement(
_StyledSelect.DROPDOWN_OPTION,
(0, _extends3.default)({}, getChildProps({ option: option }), {
colors: _defaultStyles.buttonStyles.monochrome,
isOn: currentOptions.some(function (currentOption) {
return currentOption.value === option.value;
}),
key: option.value
}),
option.label
);
})
);
}
);
};
exports.SelectMany = SelectMany;
exports.default = SelectMany;