diff --git a/packages/xo-web/src/common/sorted-table/index.js b/packages/xo-web/src/common/sorted-table/index.js index a9c4d8879..ef9e57fae 100644 --- a/packages/xo-web/src/common/sorted-table/index.js +++ b/packages/xo-web/src/common/sorted-table/index.js @@ -12,6 +12,7 @@ import { Portal } from 'react-overlays' import { routerShape } from 'react-router/lib/PropTypes' import { Set } from 'immutable' import { Dropdown, MenuItem } from 'react-bootstrap-4/lib' +import { injectState, provideState } from 'reaclette' import { ceil, filter, @@ -208,44 +209,36 @@ const actionsShape = PropTypes.arrayOf( }) ) -class IndividualAction extends Component { - _getIsDisabled = createSelector( - () => this.props.disabled, - () => this.props.item, - () => this.props.userData, - (disabled, item, userData) => - isFunction(disabled) ? disabled(item, userData) : disabled - ) - _getLabel = createSelector( - () => this.props.label, - () => this.props.item, - () => this.props.userData, - (label, item, userData) => - isFunction(label) ? label(item, userData) : label - ) - - _executeAction = () => { - const p = this.props - return p.handler(p.item, p.userData) - } - - render () { - const { icon, item, level, redirectOnSuccess, userData } = this.props - - return ( - - ) - } -} +const IndividualAction = [ + provideState({ + computed: { + disabled: ({ item }, { disabled, userData }) => + isFunction(disabled) ? disabled(item, userData) : disabled, + handler: ({ item }, { handler, userData }) => () => + handler(item, userData), + icon: ({ item }, { icon, userData }) => + isFunction(icon) ? icon(item, userData) : icon, + item: (_, { item, grouped }) => (grouped ? [item] : item), + label: ({ item }, { label, userData }) => + isFunction(label) ? label(item, userData) : label, + level: ({ item }, { level, userData }) => + isFunction(level) ? level(item, userData) : level, + }, + }), + injectState, + ({ state, redirectOnSuccess, userData }) => ( + + ), +].reduceRight((value, decorator) => decorator(value)) class GroupedAction extends Component { _getIsDisabled = createSelector( @@ -721,13 +714,27 @@ export default class SortedTable extends Component { _getIndividualActions = createSelector( () => this.props.individualActions, () => this.props.actions, - (individualActions, actions) => - sortBy( + (individualActions, actions) => { + const normalizedActions = map(actions, a => ({ + disabled: + a.individualDisabled !== undefined + ? a.individualDisabled + : a.disabled, + grouped: a.individualHandler === undefined, + handler: + a.individualHandler !== undefined ? a.individualHandler : a.handler, + icon: a.icon, + label: a.individualLabel !== undefined ? a.individualLabel : a.label, + level: a.level, + })) + + return sortBy( individualActions !== undefined && actions !== undefined - ? individualActions.concat(actions) - : individualActions || actions, + ? individualActions.concat(normalizedActions) + : individualActions || normalizedActions, action => LEVELS.indexOf(action.level) ) + } ) _renderItem = (item, i) => { @@ -771,11 +778,8 @@ export default class SortedTable extends Component { {map(this._getIndividualActions(), (props, key) => ( ))}