revenge-react-components
Version:
react-components for revenge https://github.com/buildo/revenge
230 lines (186 loc) • 8.73 kB
JavaScript
'use strict';
exports.__esModule = true;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
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; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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; }
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _revenge = require('revenge');
var _DropdownMenuDropdownMenu = require('../DropdownMenu/DropdownMenu');
var _DropdownMenuDropdownMenu2 = _interopRequireDefault(_DropdownMenuDropdownMenu);
var _DividerDivider = require('../Divider/Divider');
var _DividerDivider2 = _interopRequireDefault(_DividerDivider);
var _IconTooltippedIcon = require('../Icon/TooltippedIcon');
var _IconTooltippedIcon2 = _interopRequireDefault(_IconTooltippedIcon);
var _TooltipTooltip = require('../Tooltip/Tooltip');
var _TooltipTooltip2 = _interopRequireDefault(_TooltipTooltip);
var _buildoReactComponents = require('buildo-react-components');
var _lodashObjectOmit = require('lodash/object/omit');
var _lodashObjectOmit2 = _interopRequireDefault(_lodashObjectOmit);
var _lodashFunctionPartial = require('lodash/function/partial');
var _lodashFunctionPartial2 = _interopRequireDefault(_lodashFunctionPartial);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
require('./panelMenu.scss');
var Props = _extends({
actionsGroups: _revenge.t.list(_revenge.t.struct({
name: _revenge.t.maybe(_revenge.t.Str),
actions: _revenge.t.list(_revenge.t.subtype(_revenge.t.struct({
name: _revenge.t.Str,
callBack: _revenge.t.Func,
shortcut: _revenge.t.maybe(_revenge.t.struct({
label: _revenge.t.Str,
keyCode: _revenge.t.Str
})),
featured: _revenge.t.maybe(_revenge.t.struct({
icon: _revenge.t.Str,
color: _revenge.t.maybe(_revenge.t.Str)
})),
disabled: _revenge.t.maybe(_revenge.t.struct({
reason: _revenge.t.Str
})),
selected: _revenge.t.maybe(_revenge.t.Bool)
// handling either disabled or selected for each action
}), function (_ref) {
var disabled = _ref.disabled;
var selected = _ref.selected;
return !(disabled && selected);
}))
}))
}, _lodashObjectOmit2['default'](_DropdownMenuDropdownMenu.Props, ['children', 'options', 'iconClassName']));
exports.Props = Props;
var PanelMenu = (function (_React$Component) {
_inherits(PanelMenu, _React$Component);
function PanelMenu() {
var _this = this;
_classCallCheck(this, _PanelMenu);
_React$Component.apply(this, arguments);
this.makeActionItem = function (action) {
return {
type: 'item',
title: (function () {
if (typeof action.selected !== 'undefined') {
return _this.makeSelectableAction(action);
} else {
return action.disabled ? _this.makeDisabledAction(action) : action.name;
}
})(),
onClick: action.callBack,
metadata: action.shortcut && action.shortcut.label,
disabled: !!action.disabled
};
};
this.makeDisabledAction = function (action) {
return _react2['default'].createElement(
_TooltipTooltip2['default'],
{
popover: { content: 'Disabled because ' + action.disabled.reason, position: 'top', anchor: 'center' },
style: { display: 'inline-block', cursor: 'not-allowed' }
},
_react2['default'].createElement(
'div',
{ style: { opacity: '.5' } },
action.name
)
);
};
this.makeSelectableAction = function (_ref2) {
var name = _ref2.name;
var selected = _ref2.selected;
return _react2['default'].createElement(
_buildoReactComponents.FlexView,
{ row: true, vAlignContent: 'center' },
_react2['default'].createElement('i', {
style: {
marginRight: 6,
marginTop: 4
},
className: _classnames2['default']('icon', {
'icon-square-o': !selected,
'icon-check-in': selected
})
}),
_react2['default'].createElement(
'div',
null,
name
)
);
};
this.makeOptions = function (actionsGroups) {
return _(actionsGroups).map(function (actionsGroup, index) {
return [].concat(actionsGroup.name && { type: 'title', title: actionsGroup.name }).concat(actionsGroup.actions.map(_this.makeActionItem)).concat(index !== actionsGroups.length - 1 && { type: 'divider' });
}).flatten().compact().value();
};
this.makeActionIcon = function (action) {
return _extends({
label: action.name,
disabled: action.disabled,
onClick: _lodashFunctionPartial2['default'](action.callBack, action)
}, action.featured);
};
this.makeActionIcons = function (actionsGroups) {
return _(actionsGroups).map(function (actionsGroup) {
return actionsGroup.actions.filter(function (action) {
return action.featured;
}).map(_this.makeActionIcon);
}).flatten().take(5).value();
};
}
PanelMenu.prototype.getLocals = function getLocals() {
var actionsGroups = this.props.actionsGroups;
var iconClassName = 'widget-menu';
var options = this.makeOptions(actionsGroups);
var actionIcons = this.makeActionIcons(actionsGroups);
return _extends({
options: options,
iconClassName: iconClassName,
actionIcons: actionIcons
}, this.props);
};
PanelMenu.prototype.template = function template(locals) {
return _react2['default'].createElement(
_buildoReactComponents.FlexView,
{ className: 'panel-menu', marginLeft: 'auto', vAlignContent: 'center' },
locals.actionIcons.map(function (_ref3, i) {
var icon = _ref3.icon;
var color = _ref3.color;
var label = _ref3.label;
var disabled = _ref3.disabled;
var onClick = _ref3.onClick;
return _react2['default'].createElement(_IconTooltippedIcon2['default'], {
className: 'panel-menu-action-icon',
label: disabled ? label + ' is disabled because ' + disabled.reason : label,
icon: icon,
style: { color: color, opacity: disabled ? '.5' : '1', cursor: disabled ? 'not-allowed' : 'pointer' },
onClick: disabled ? null : onClick,
key: icon + '-' + i
});
}),
_react2['default'].createElement(_DividerDivider2['default'], { orientation: 'horizontal', size: 'no-margin', style: { height: 26 } }),
_react2['default'].createElement(_DropdownMenuDropdownMenu2['default'], {
options: locals.options,
initiallyOpen: locals.initiallyOpen,
iconClassName: locals.iconClassName,
size: locals.size,
maxHeight: locals.maxHeight,
dismissOnClickOut: locals.dismissOnClickOut
})
);
};
_createClass(PanelMenu, null, [{
key: 'defaultProps',
value: {
initiallyOpen: false
},
enumerable: true
}]);
var _PanelMenu = PanelMenu;
PanelMenu = _revenge.props(Props)(PanelMenu) || PanelMenu;
PanelMenu = _revenge.skinnable()(PanelMenu) || PanelMenu;
PanelMenu = _revenge.pure(PanelMenu) || PanelMenu;
return PanelMenu;
})(_react2['default'].Component);
exports['default'] = PanelMenu;